@charset "utf-8";

/* 基本的なスタイル */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    margin: 0;
    background-color: #f0f0f0;
    padding-top: 100px;
}

.container {
    max-width: 1166px;
    padding: 20px;
    margin: auto;
}

/* ヘッダー */
.header {
/*    background-color: #BB8D5F;*/ /*キャメル (Camel) */
    background-color: #F6978F; /*シュリンプピンク (Shrimp pink)*/
    color: white;
    padding: 10px 10px; /* 左右のpaddingを減らす */
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.header-title {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-title a {
    color: white;
    text-decoration: none;
    font-size: 1.2em;
    vertical-align: middle; /* テキストを中央揃え */
}

.header-logo {
    height: 40px; /* 高さを調整 */
    margin-right: 5px; /* 右側に余白 */
    vertical-align: middle; /* 画像を中央揃え */
}

.logo-wrapper {
    background-color: white; /* 背景を白に */
    display: inline-block; /* インライン要素として表示しつつ、幅と高さを設定可能に */
    padding: 2px; /* ロゴと背景の間に少し余白 */
    border-radius: 3px; /* 角を少し丸く */
    vertical-align: middle; /* テキストと縦方向の位置を揃える */
}

.footer-logo-wrapper {
    background-color: white; /* 背景を白に */
    display: inline-block; /* インライン要素として表示しつつ、幅と高さを設定可能に */
    padding: 2px; /* ロゴと背景の間に少し余白 */
    border-radius: 3px; /* 角を少し丸く */
    vertical-align: middle; /* テキストと縦方向の位置を揃える */
}

/* ハンバーガーボタン */
.hamburger-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: block; /* スマホで表示 */
}

.hamburger-bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px 0;
    transition: 0.4s;
}

/* ナビゲーションメニュー */
.nav-menu {
/*    background-color: #BB8D5F;*/ /*キャメル (Camel) */
    background-color: #F6978F; /*シュリンプピンク (Shrimp pink)*/
    padding: 10px 0;
    display: none; /* 初期状態では非表示 */
    position: fixed; /* メニューを固定 */
    top: 60px; /* ヘッダーの高さ分下に配置 */
    left: 0;
    width: 100%;
    z-index: 999; /* ヘッダーより少し低いz-index */
}

.nav-menu.active {
    display: block; /* activeクラスが付いたら表示 */
    height: calc(100% - 60px); /* 画面の残りの高さを占める */
    overflow-y: auto; /* メニュー内容が多ければスクロール可能に */
}

.nav-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.nav-menu li {
    padding: 10px 0;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    font-size: 1.1em;
}

/* お知らせと開催概要 */

/* お知らせ、概要、表彰 */
.announcement, .summary,.award {
    background-color: white;
    padding: 5px 15px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.award table, th, tr, td {
    border: none;        /* 枠線を消す */
    border-top: none;    /* 上線を消す */
    border-right: none;  /* 右線を消す */
    border-bottom: none; /* 下線を消す */
    border-left: none;   /* 左線を消す */
    outline:none;
}
.award ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center; /* 中央寄せ */
    gap: 20px; /* リンク間のスペース */
    flex-wrap: wrap; /* 画面幅が狭い場合に折り返す */
}

.award li {
    margin-bottom: 10px; /* 縦方向の余白 */
}


/* 優秀賞 */
.award1 {
    display: block;
    text-align: center;
    margin: 20px auto; /* 上下に余白、左右中央寄せ */
    padding: 10px 30px;
    background-color: orange;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    width: fit-content; /* コンテンツの幅に合わせる */
}

/* 奨励賞 */
.award2 {
    display: block;
    text-align: center;
    margin: 20px auto; /* 上下に余白、左右中央寄せ */
    padding: 10px 30px;
    background-color: green;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    width: fit-content; /* コンテンツの幅に合わせる */
}

.summary dl {
    counter-reset: dt-counter;
}

.summary dt::before {
    content: counter(dt-counter) ". ";
    counter-increment: dt-counter;
    font-weight: bold;
    margin-right: 5px;
}

/* 当日までの流れ（スケジュール） */
.flow-section {
    background-color: transparent; /* 透過 */
    padding: 5px 15px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.flow-section dl {
    counter-reset: dt-counter;
}

.flow-section dt::before {
    content: counter(dt-counter) ". ";
    counter-increment: dt-counter;
    font-weight: bold;
    margin-right: 5px;
}

.flow-section ul {
    list-style: none; /* デフォルトのリストスタイルを無効にする */
    counter-reset: flow-counter;
}

.flow-section li::before {
    content: counter(flow-counter) ". ";
    counter-increment: flow-counter;
    font-weight: bold;
    margin-right: 5px;
}

.flow-section li {
    margin-bottom: 5px; /* 各項目の下部に少し余白 */
}

.flow-section table {
    background-color: transparent; /* 透過 */
    padding: 15px; /* 内側の余白 */
    border-radius: 5px; /* 角を丸く */
    width: 100%; /* 幅を100%に */
    border-collapse: collapse; /* セルの境界線を結合 */
    margin-bottom: 20px; /* 下部に余白 */
}

.flow-section table, th, td {
    border: 1px solid #ddd; /* 罫線 */
    padding: 8px; /* セル内の余白 */
    text-align: left; /* テキストを左寄せ */
}

/* 時間・会場について */
.prog-section {
    background-color: transparent; /* 透過 */
    padding: 5px 15px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.prog-section dl {
    counter-reset: dt-counter;
}

.prog-section dt::before {
    content: counter(dt-counter) ". ";
    counter-increment: dt-counter;
    font-weight: bold;
    margin-right: 5px;
}

.prog-section ul {
    list-style: none; /* デフォルトのリストスタイルを無効にする */
    counter-reset: flow-counter;
}

.prog-section li::before {
    content: counter(flow-counter) ". ";
    counter-increment: flow-counter;
    font-weight: bold;
    margin-right: 5px;
}

.prog-section li {
    margin-bottom: 5px; /* 各項目の下部に少し余白 */
}

.prog-section table {
    background-color: transparent; /* 透過 */
    padding: 15px; /* 内側の余白 */
    border-radius: 5px; /* 角を丸く */
    width: 100%; /* 幅を100%に */
    border-collapse: collapse; /* セルの境界線を結合 */
    margin-bottom: 20px; /* 下部に余白 */
}

.prog-section th {
    background-color: white; /* 白 */
    border: 1px solid #ddd; /* 罫線 */
    padding: 8px; /* セル内の余白 */
    text-align: left; /* テキストを左寄せ */
}
.prog-section td {
    border: 1px solid #ddd; /* 罫線 */
    padding: 8px; /* セル内の余白 */
    text-align: left; /* テキストを左寄せ */
}

/* 見出し */

h2 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: black;/*文字色*/
  background: transparent;/*背景色*/
  border-left: solid 5px #574020;/*左線*/
}

h3 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: black;/*文字色*/
  background: transparent;/*背景色*/
/*  border-left: solid 5px #BB8D5F;*//*左線*/
/*  border-bottom: solid 5px #BB8D5F;*//*左線*/
  border-left: solid 5px #F6978F;/*左線*/
  border-bottom: solid 5px #F6978F;/*左線*/
}


/* フッター */
.footer {
    text-align: center;
    padding: 20px;
/*    background-color: #BB8D5F;*/ /*キャメル (Camel) */
    background-color: #F6978F; /*シュリンプピンク (Shrimp pink)*/
    color: white;
}

.footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center; /* 中央寄せ */
    gap: 20px; /* リンク間のスペース */
    flex-wrap: wrap; /* 画面幅が狭い場合に折り返す */
}

.footer li {
    margin-bottom: 10px; /* 縦方向の余白 */
}

.footer img {
    display: block; /* 画像の下の余白をなくす */
}

.back-to-top {
    display: block;
    text-align: center;
    margin: 20px auto; /* 上下に余白、左右中央寄せ */
    padding: 10px 20px;
/*    background-color: #BB8D5F;*/ /*キャメル (Camel) */
    background-color: #F6978F; /*シュリンプピンク (Shrimp pink)*/
    color: white;
    text-decoration: none;
    border-radius: 5px;
    width: fit-content; /* コンテンツの幅に合わせる */
}

.footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center; /* 中央寄せ */
    gap: 20px; /* リンク間のスペース */
    flex-wrap: wrap; /* 画面幅が狭い場合に折り返す */
}

.footer li {
    margin-bottom: 10px; /* 縦方向の余白 */
}

.footer img {
    display: block; /* 画像の下の余白をなくす */
}

@media (min-width: 768px) {
    .hamburger-button {
        display: none;
    }

    .nav-menu {
        display: block;
        background-color: white; /* PCでは背景を白に */
        padding: 0;
    }

    .nav-menu ul {
        display: flex;
        justify-content: flex-end;
    }

    .nav-menu li {
        margin-left: 20px;
    }

    .nav-menu a {
        color: #333;
        padding: 5px 10px; /* ホバー範囲を広げる */
        border-radius: 5px; /* 角を丸くする */
        transition: background-color 0.3s, color 0.3s; /* スムーズな変化のため */
    }

    .nav-menu a:hover {
/*    background-color: #BB8D5F;*/ /*キャメル (Camel) */
        background-color: #F6978F; /*シュリンプピンク (Shrimp pink)*/
        color: white; /* 文字を白に */
    }

}

/* スマートフォン表示時のタイトルとロゴを小さく */
@media (max-width: 767px) {
    .header-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .header {
        padding: 10px;
    }

    .header-title a {
        font-size: 1em;
    }

    .header-logo {
        height: 20px;
    }

    .nav-menu {
        top: 80px; /* ヘッダーの高さに合わせて調整 */
    }

    .nav-menu.active {
        height: calc(100% - 80px);
    }
}