body {
    font-family: "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
    font-size: 0.9rem; /* 絶対値から相対値に変更 */
    margin: 20px;
}

.background {
    background: linear-gradient(to top, rgba(217, 175, 217, 0.7) 0%, rgba(151, 217, 225, 0.7) 100%), url(back.jpg);
}

.background_text_main {
    padding: 5px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.7);
}

.background_text_side {
    padding: 0px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.5);
}

img {
    width: 100%;
}

.face {
    width: 160px;
}

.schedule {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.day {
    text-align: center;
}

.day img {
    width: 390px; /* オリジナル画像を縮小表示 */
    height: auto;
    cursor: pointer;
    border: 1px solid #000;
}

   /* ボタンのスタイルを定義 */
        .download-button {
            display: inline-block;
            margin: 18px;
            padding: 18px;
            font-size: 16px; 
            font-weight: bold;
            text-align: center;
            color: white;
            background-color: #007bff;
            border: none;
            border-radius: 5px;
            text-decoration: none;
        }
        .download-button:hover {
            background-color: #0056b3;
        }
        .red-button {
            background-color: #d9534f;
        }
        .red-button:hover {
            background-color: #c9302c;
        }

        .session {
            margin-bottom: 20px;
        }
        .right-align {
            text-align: right;
        }
        .left-align {
            text-align: left;
        }
        
        
              .details {
            margin-top: 10px;
        }
          .role {
            font-weight: bold;
            font-size: 0.8rem;
            padding-left: 3em; /* 司会・演者ラベルを右に移動 */
        }
        .person {
            padding-left: 5em; /* 司会者名と演者名をさらに右に移動 */
        }
        
        /* ボタンのスタイル */
.link-button {
  display: inline-block;
  padding: 3px 10px; /* 内側の余白を少し減らしてコンパクトに */
  font-size: 0.7em; /* 文字サイズを0.7emに調整 */
  color: #000080; /* 濃い青 */
  background-color: #e6e6fa; /* 薄紫 */
  border: 2px solid #ccccff; /* 薄い紫のボーダー */
  border-radius: 8px; /* 角を丸めた四角 */
  text-align: center;
  text-decoration: none;
  margin: 4px;
  transition: background-color 0.3s ease;
}

/* ボタンにマウスが乗ったときのスタイル */
.link-button:hover {
  background-color: #d8bfd8; /* 少し濃い紫色に変化 */
  color: #000080; /* 文字色はそのまま */
}
  
        
h1 {
    color: #364e96;
    padding: 10px;
    border-top: solid 2px #364e96;
    border-bottom: solid 2px #364e96;
    font-weight: bold;
    font-size: 1.25rem; /* 相対値に変更 */
    background: lavender;
    /* border-left: solid 5px blue; */

}

h2 {
    padding: 0.3em;
    margin-top: 8pt; /* 8ポイントの空白を追加 */
    color: #494949;
    background: lavender;
    border-left: solid 5px blue;
    font-size: 1.1em; /* 相対値に変更 */
    font-weight: bold;
}

h3 {
    color: #364e96;
    padding: 0;
    margin-top: 0px; /* 上の余白を5に */
    /* border-top: solid 2px #364e96;*/
    /* border-bottom: solid 2px #364e96;*/
    font-weight: bold;
    font-size: 1rem; /* 相対値に変更 */
}

.session-info {
  background-color: #f8f8f8; /* 背景色 */
  border: solid 1px #ccc; /* 境界線 */
  padding: 0.5rem; /* 内側の余白 (20px相当) */
  margin: 0.25rem; /* 外側の余白をなくす */
}

.time-date ph1, .time-date ph2 {
  display: block; /* 改行して表示 */
  color: #333; /* 文字色 */
  
  font-size: 0.7rem; /* 相対フォントサイズ (24px相当) */
  text-align: right; /* 右詰めにする */
}

.title ph3 {
  color: #364e96;/* タイトルの文字色 */
  font-size: 0.9rem; /* 相対フォントサイズ (20px相当) */
  font-weight: bold; /* 太字 */
  border-bottom: 1px solid #ccc; /* 下に薄い区切り線を追加 */
  padding-bottom: 0.3rem; /* 区切り線と内容の間に余白を追加 */
  margin-bottom: 10rem; /* 下部の余白 (10px相当) */
}

.speakers ph3 {
  display: block; /* 改行して表示 */
  color: #555; /* 文字色 */
  font-size: 0.8rem; /* 相対フォントサイズ (14px相当) */
}

.second-speaker {
  padding-left: 2.55em; /* 「演者:」分のインデントを追加 */
  font-size: 0.8rem; /* フォントサイズを他の演者と同じに */
}

table {
    border-collapse: separate;
    border-spacing: 5px;
    width: 100%;
}

table th {
    border-radius: 5px;
    text-align: center;
    padding: 5px 0;
    background-color: #7fbfff;
    color: black;
    border: solid 1px #927141;
}

table td {
    border-radius: 5px;
    text-align: left;
    padding: 5px 0;
    background-color: #c6e2ff;
    border: solid 1px #af9d85;
}

/* 1列目のセルに左側の余白を追加 */
table td:first-child {
    padding-left: 5px; /* 1列目の左側に10pxの余白を追加 */
}

table th, table td {
    padding: 5px 0; /* 上下の余白を縮める */
}


/* 2列目以降のセルを中央揃え */
table td:nth-child(n+2) {
    text-align: center;
}

.vertical-navbar {
    width: 100%; /* 固定幅からフル幅に変更 */
    height: auto;
}

.vertical-navbar a {
    display: block;
    color: black;
    padding: 10px;
    text-decoration: none;
    border: 1px solid white;
    font-size: 1rem;
    font-weight: bold;
}

.vertical-navbar a:hover {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
}

.total {
    max-width: 100%; /* 固定幅を削除し、最大幅を指定 */
    margin: 0 auto;
}

.header {
    max-width: 100%;
    margin: 0 auto;
    padding: 0px;
}

/* サイドとメインコンテンツを横並びにするためにflexboxを使用 */
.container {
    display: flex;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
}

.side {
    width: 25%; /* 横幅を割合で指定 */
    padding: 5px;
    background-color: rgba(255, 255, 255, 0.5);
}

.main {
    width: 70%; /* メインコンテンツも割合で指定 */
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.7);
}

.main_text {
    width: 100%;
    margin: 0 auto;
    padding: 10px;
}

.main img {
    display: block;  /* ブロック要素にして余白をなくす */
    max-width: 100%; /* 画面幅を超えないようにする */
    height: auto;    /* アスペクト比を保ったまま拡大・縮小 */
    margin: 0 auto;  /* 画像を中央揃えに */
}

.menu {
    background-color: rgba(188, 188, 255, 0.5);
}

.footer {
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
    padding: 0px;
    padding-right: 10px; /* 右側に10ポイントの余裕を追加 */
    height: 85px;
    color: white;
    font-size: 0.6em;
    background: url(footer.jpg);
    background-repeat: no-repeat; /* 背景画像をタイル表示しない */
    background-size: cover; /* 画像をコンテナ全体に拡大 */
    background-position: center; /* 画像を中央に配置 */
}

.b {
    letter-spacing: -0.4em;
    font-size: 1rem;
    margin-bottom: 0;
    list-style: none;
    padding: 0;
}

.b li {
    letter-spacing: normal;
    display: inline-block;
    width: calc(100% / 6);
}

.b li a {
    display: block;
    text-decoration: none;
    position: relative;
    text-align: center;
    padding: 12px 0px;
    color: #1a1a1a;
    text-decoration: none;
}

.c {
    display: flex;
    flex-wrap: wrap; /* 自動で折り返し */
    max-width: 100%;
    margin: 0 auto;
}

.h-img {
    max-width: 100%;
    height: auto; /* 画像の高さを自動調整 */
}

.details-summary {
    cursor: pointer;
    transition: 0.2s;
    padding: 6px;
    border-radius: 6px;
}

.details-summary:hover {
    cursor: pointer;
    background-color: #bee1de;
}

.details-summary:focus-visible {
    outline: dashed #00a5a0;
}

/* メディアクエリで画面幅768px以下に対応 */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* 縦並びに変更 */
    }

    .side, .main {
        width: 100%; /* 横幅を100%にして縦並びに */
    }

    .vertical-navbar {
        width: 100%;
    }

    .h-img {
        max-width: 100%;
    }
}