img {
    padding: 0px;
    margin: 0px;
    max-width: 100%;
}
@media (min-width: 1300px) {
    img {
        width: 100%; /* 幅を100%に設定 */
        padding: 0px;
        margin: 0px;
    }
}

body {
    margin-top: 80px; /* ヘッダーの高さに合わせて調整 */
    text-align: center; /* 中央に配置 */
}
@media (max-width: 767px) {
    body {
        margin-top: 60px; /* ヘッダーの高さに合わせて調整 */
    }
}

/* コンテンツエリア */
.content-wrapper {
    background-image: url(../img/kamihubuki.png);
    background-color: #ffd35c;
    background-size: 1200px 400px; /* 紙吹雪のサイズ */
    background-repeat: no-repeat; /* 繰り返さない（上に1枚だけ） */
    background-position: top center; /* 上中央に配置 */
}

.nav-icon {
    width: 20px; /* お好みの幅に変更 */
    height: auto; /* 高さは自動でアスペクト比を維持 */
}
.nav-item {
    font-weight: bold;
    font-size: 1.4vw;
    display: flex;
    align-items: center;
}
.nav-lang {
    font-weight: bold;
    font-size: 1.6vw;
}
.nav-lang a {
    margin: 0 2px;
    text-decoration: none;
}
@media (max-width: 767px) {
    .nav-lang,
    .nav-lang a {
        font-size: 20px;
    }
}

/* ナビバーのロゴ */
.logo_pic {
    width: 260px;
}

/* スマホ用調整 */
@media (max-width: 767px) {
    .logo_pic {
        width: 180px;
    }
}
.headimage-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: bottom; /* これで画像下の余白を防げます */
    width: 100%;
}
/* メイン画像 */
.headimage {
    width: 100%;
    display: block;
}

.overlay-content {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
    padding: 1em;
    border-radius: 10px;
    width: 100%; /* ← 追加！親幅を明示的に広げる */
    max-width: 800px; /* ← 必要に応じて最大幅を設定 */
}

/* 以下スタート */

.special-title {
    font-family: "Kosugi Maru", sans-serif;
    font-size: 2rem;
    font-weight: bold;
    color: #0050c8;
    display: inline-block;
    margin-bottom: 1rem;
}
/* 下人形 */
.doll_image {
    width: 100%;
}

@media (max-width: 767px) {
    .doll_image {
        width: 100%; /* スマホは幅を少し小さく */
    }
}

/* 事務局 */
.jimukyoku {
    width: 40%;
    text-align: center;
    margin: 0 auto;
    transition: transform 0.3s;
}
.jimukyoku:hover {
    transform: scale(1.05); /* クリック時浮く */
}

.kumiai {
    width: 87%;
    text-align: center;
    margin: 5vh auto;
}

/* スマホ画面 */
@media screen and (max-width: 767px) {
    /* 事務局 */
    .jimukyoku {
        width: 65%;
        text-align: center;
        margin: 10px auto;
    }
}

/* サイドメニュー（ハンバーガボタン） ↓*/
.side-menu {
    position: fixed;
    top: 0;
    right: -270px;
    width: 270px; /* メニュー横調整 */
    height: 100%; /* メニュー高さ調整 */
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
    transition: right 0.3s ease;
    z-index: 100; /* 重ね画像や他の要素よりも前面に表示されるように設定 */
}
.side-menu.show {
    right: 0;
    padding-top: 12vh; /* 上に50vhを追加 */
}
.side-menu ul {
    padding: 1rem;
    list-style: none;
}
.side-menu li {
    margin: 0.3rem 0; /* 上下 文字間隔 */
}
.side-menu a {
    font-size: 1.2rem; /* 文字サイズを調整 */
    color: #333;
}

/* リンクにホバーしたときのスタイル */
.side-menu a {
    text-decoration: none; /* デフォルトの下線を取り除く */
    color: #333; /* リンクのデフォルトカラー */
    position: relative; /* 下線のための相対位置指定 */
    display: inline-block; /* 下線を文字だけに合わせるため */
}

.side-menu a:hover {
    color: #007bff; /* ホバー時のテキストカラー */
}

.side-menu a:hover::after {
    content: ""; /* 擬似要素の内容は空にする */
    /*position: absolute; /* 絶対位置で下線を表示 */
    left: 0;
    bottom: 10px; /* テキストの下に下線を表示する */
    width: 100%; /* テキストの幅に合わせる */
    border-bottom: 1.2px solid #007bff; /* 下線のスタイル */
}

.navbar-toggler {
    position: relative; /* トグルボタンを基準として位置を指定するために relative を設定 */
    border: none; /* ボタンの枠線を削除 */
    background: none; /* ボタンの背景を削除 */
    font-size: 1.5rem; /* ボタン内のフォントサイズを 1.5rem に設定 */
}

.navbar-toggler:focus {
    outline: none; /* デフォルトの外枠を削除 */
    box-shadow: 0 0 0 0px black; /* クリックしたときの外枠の太さと色を設定 */
}

.navbar-toggler .fa-bars,
.navbar-toggler .fa-times {
    color: black; /* アイコンの色を黒に設定 */
    font-size: 1.5rem; /* アイコンのサイズを 1.5rem に設定 */
}

/* 最初はハンバーガーアイコンを表示 */
.navbar-toggler .fa-bars {
    display: block; /* fa-bars アイコンを表示 */
}

.navbar-toggler .fa-times {
    display: none; /* fa-times アイコンを非表示 */
}

/* トグルが閉じている状態ではハンバーガーアイコンを表示 */
.navbar-toggler.collapsed .fa-bars {
    display: block; /* .collapsed クラスが付いているときに fa-bars アイコンを表示 */
}

/* トグルが開いている状態ではハンバーガーアイコンを非表示 */
.navbar-toggler:not(.collapsed) .fa-bars {
    display: none; /* .collapsed クラスがないときに fa-bars アイコンを非表示 */
}

/* トグルが開いている状態では×アイコンを表示 */
.navbar-toggler:not(.collapsed) .fa-times {
    display: block; /* .collapsed クラスがないときに fa-times アイコンを表示 */
}

/* トグルが閉じている状態では×アイコンを非表示 */
.navbar-toggler.collapsed .fa-times {
    display: none; /* .collapsed クラスが付いているときに fa-times アイコンを非表示 */
}
/* 大きな画面ではサイドメニューを表示しない */
@media (min-width: 768px) {
    .side-menu {
        display: none;
    }
}
/* サイドメニュー（ハンバーガボタン） ↑*/

/* 当てようCP 間隔調整 ↓*/
.follow_cp,
.reshito_cp {
    width: 40%;
    display: block;
    padding: 0;
}

/* 左画像は右寄せ */
.follow_cp {
    margin-left: auto;
    margin-right: 0;
}

/* 右画像は左寄せ */
.reshito_cp {
    margin-left: 0;
    margin-right: auto;
}
/* スマホ画面は中央寄せに変更 */
@media (max-width: 767px) {
    .follow_cp,
    .reshito_cp {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block;
    }
}
/* 当てようCP 間隔調整 ↑*/

/* イベント登録ボタン ピンク ↓*/
.event_register-button {
    background-color: #ea005b; /* 濃いピンク */
    color: white;
    padding: 10px 30px;
    border: none;
    border-radius: 999px; /* 丸みを強調 */
    font-size: 1.4vw;
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
    text-decoration: none; /* ← 下線を消す */

    position: fixed; /* 画面に固定 */
    top: 80px; /* 上からの距離 */
    right: 20px; /* 右からの距離 (250px)*/
    z-index: 10000;
}

.event_register-button:hover {
    background-color: #c80058; /* ホバー時に少し暗めのピンク */
    transform: scale(1.01); /* クリック時浮く */
}

/* スマホ用 非表示設定 */
@media (max-width: 767px) {
    .event_register-button {
        display: none;
    }
}
/* イベント登録ボタン ピンク ↑*/

/* 小売店の皆さまへボタン ピンク ↓*/
.for_retailers-button {
    background-color: #ea005b; /* 濃いピンク */
    color: white;
    padding: 10px 30px;
    border: none;
    border-radius: 999px; /* 丸みを強調 */
    font-size: 1.4vw;
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
    text-decoration: none; /* ← 下線を消す */

    position: fixed; /* 画面に固定 */
    top: 70px; /* 上からの距離 */
    right: 20px; /* 右からの距離 */
    z-index: 10000;
}

.for_retailers-button:hover {
    background-color: #c41461; /* ホバー時に少し暗めのピンク */
    transform: scale(1.01); /* クリック時浮く */
}
/* スマホ用 非表示設定 */
@media (max-width: 767px) {
    .for_retailers-button {
        display: none;
    }
}
/* 小売店の皆さまへボタン ピンク ↑*/

/* 日本酒の日とは？ボタン 茶 ↓*/
.sake-button {
    background-color: #cf8a00; /* 濃いオレンジ色 */
    color: white;
    padding: 10px 30px;
    border: none;
    border-radius: 999px; /* 丸みを強調 */
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
    text-decoration: none; /* ← 下線を消す */
    text-align: center; /* 中央に配置 */
}

.sake-button:hover {
    background-color: #a86e00; /* ホバー時に少し濃く */
}
/* 日本酒の日とは？ボタン 茶 ↑*/

/*  背景 画像重ね ↓*/
.headimage {
    position: relative; /* 子要素の絶対配置を基準にする */
    max-width: 100%; /* 必要に応じて幅を指定 */
    height: auto; /* 必要に応じて高さを指定 */
}
/* 背景画像 */
.headimage .background-image {
    width: 100%; /* 背景画像を親要素にフィットさせる */
    height: auto;
}
/* 画像2専用の高さ設定 */
.headimage .bg-img-2 {
    height: auto; /* 任意の高さに変更（px, %, vhなど指定可能） */
    object-fit: cover; /* 必要に応じて画像のはみ出しを調整 */
}
/* 重ねる画像共通設定 */
.headimage .overlay {
    position: absolute; /* 親要素を基準に配置 */
    width: auto; /* 必要に応じてサイズを調整 */
    height: auto;
}
/* <a>タグ下の余白削除 */
.headimage a.btn {
    display: block; /* ブロック要素に変更 */
    border: none; /* リンクのボーダーを削除 */
}
.headimage > * {
    margin: 0;
    padding: 0;
}
.headimage .overlay-youtube1 {
    width: 100%; /* 背景画像を親要素にフィットさせる */
    height: auto;
}

.headimage .overlay-youtube2 {
    width: 100%; /* 背景画像を親要素にフィットさせる */
    height: auto;
}

.headimage .overlay-1 {
    top: 2%; /* 上からの位置 */
    left: 0%; /* 左からの位置 */
    width: 100%; /* サイズを調整 */
    z-index: 2; /* 前面に表示 */
    height: 95%;
}
.headimage .overlay-2 {
    top: 6%; /* 上からの位置 */
    left: 30%; /* 左からの位置 */
    width: 40%; /* サイズを調整 */
    z-index: 3; /* 前面に表示 */
}
.headimage .overlay-3 {
    top: 25%; /* 上からの位置 */
    left: 0%; /* 左からの位置 */
    width: 100%; /* サイズを調整 */
    z-index: 3; /* 前面に表示 */
}
.headimage .overlay-4 {
    top: 43%; /* 上からの位置 */
    left: 19%; /* 左からの位置 */
    width: 60%; /* サイズを調整 */
    z-index: 3; /* 前面に表示 */
}
.headimage .overlay-5 {
    top: 57%; /* 上からの位置 */
    left: 19%; /* 左からの位置 */
    width: 60%; /* サイズを調整 */
    z-index: 3; /* 前面に表示 */
}
.headimage .overlay-6 {
    top: 90%; /* 上からの位置 */
    left: 42%; /* 左からの位置 */
    width: 18%; /* サイズを調整 */
    z-index: 3; /* 前面に表示 */
}

.headimage .overlay-6:hover {
    transform: scale(1.01); /* クリック時浮く */
}
.headimage .overlay-21 {
    top: 5%; /* 上からの位置 */
    left: 35%; /* 左からの位置 */
    width: 30%; /* サイズを調整 */
    z-index: 3; /* 前面に表示 */
}
.headimage .overlay-22 {
    top: 22%; /* 上からの位置 */
    left: 7%; /* 左からの位置 */
    width: 42%; /* サイズを調整 */
    z-index: 3; /* 前面に表示 */
}
.headimage .overlay-23 {
    top: 86%; /* 上からの位置 */
    left: 18%; /* 左からの位置 */
    width: 20%; /* サイズを調整 */
    z-index: 4; /* 前面に表示 */
}

.headimage .overlay-23:hover {
    transform: scale(1.01); /* クリック時浮く */
}

.headimage .overlay-24 {
    top: 22%; /* 上からの位置 */
    left: 52%; /* 左からの位置 */
    width: 42%; /* サイズを調整 */
    z-index: 3; /* 前面に表示 */
}
.headimage .overlay-25 {
    top: 86%; /* 上からの位置 */
    left: 63%; /* 左からの位置 */
    width: 20%; /* サイズを調整 */
    z-index: 4; /* 前面に表示 */
}
.headimage .overlay-25:hover {
    transform: scale(1.01); /* クリック時浮く */
}

.headimage .overlay-31 {
    top: 5%; /* 上からの位置 */
    left: 35%; /* 左からの位置 */
    width: 30%; /* サイズを調整 */
    z-index: 3; /* 前面に表示 */
}
.headimage .overlay-32 {
    top: 74%; /* 上からの位置 */
    left: 42%; /* 左からの位置 */
    width: 18%; /* サイズを調整 */
    z-index: 3; /* 前面に表示 */
}

.headimage .overlay-32:hover {
    transform: scale(1.01); /* クリック時浮く */
}
/* スマホ用調整 */
@media (max-width: 767px) {
    .headimage .overlay-1 {
        top: 2%; /* 上からの位置 */
        left: 0%; /* 左からの位置 */
        width: 100%; /* サイズを調整 */
    }
    .headimage .overlay-2 {
        top: 6%; /* 上からの位置 */
        left: 26%; /* 左からの位置 */
        width: 48%; /* サイズを調整 */
    }
    .headimage .overlay-3 {
        top: 22%; /* 上からの位置 */
        left: 0%; /* 左からの位置 */
        width: 100%; /* サイズを調整 */
    }
    .headimage .overlay-4 {
        top: 40%; /* 上からの位置 */
        left: 19%; /* 左からの位置 */
        width: 60%; /* サイズを調整 */
    }
    .headimage .overlay-5 {
        top: 55%; /* 上からの位置 */
        left: 19%; /* 左からの位置 */
        width: 60%; /* サイズを調整 */
    }

    .headimage .overlay-6 {
        top: 90%; /* 上からの位置 */
        left: 36%; /* 左からの位置 */
        width: 30%; /* サイズを調整 */
    }
    .headimage .overlay-21 {
        top: 2%; /* 上からの位置 */
        left: 30%; /* 左からの位置 */
        width: 40%; /* サイズを調整 */
    }
    .headimage .overlay-22 {
        top: 12%; /* 上からの位置 */
        left: 22%; /* 左からの位置 */
        width: 56%; /* サイズを調整 */
    }
    .headimage .overlay-23 {
        top: 47%; /* 上からの位置 */
        left: 34%; /* 左からの位置 */
        width: 30%; /* サイズを調整 */
    }
    .headimage .overlay-24 {
        top: 53%; /* 上からの位置 */
        left: 22%; /* 左からの位置 */
        width: 56%; /* サイズを調整 */
    }
    .headimage .overlay-25 {
        top: 90%; /* 上からの位置 */
        left: 34%; /* 左からの位置 */
        width: 30%; /* サイズを調整 */
    }
    .headimage .overlay-31 {
        top: 2%; /* 上からの位置 */
        left: 30%; /* 左からの位置 */
        width: 40%; /* サイズを調整 */
    }
    .headimage .overlay-32 {
        top: 71%; /* 上からの位置 */
        left: 35%; /* 左からの位置 */
        width: 30%; /* サイズを調整 */
    }
}

/* テキスト位置調整 */
/* 共通設定 （中央寄せ） */
.overlay-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.overlay-1-text {
    top: 49%;
    left: 20%;
    z-index: 2;
    text-align: left; /* テキストを左揃え */
    font-size: 1.6vw;
}
.overlay-2-text {
    top: 60%;
    left: 20%;
    z-index: 2;
    text-align: left; /* テキストを左揃え */
    font-size: 1.6vw;
}
/* キャンペーン一覧下テキスト↓ */
.overlay-21-text {
    top: 10%;
    left: 13%;
    z-index: 2;
}
/* スマホ用調整 */
@media (max-width: 767px) {
    .overlay-1-text {
        top: 45%;
        left: 20%;
        font-size: 2.2vw;
    }
    .overlay-2-text {
        top: 59%;
        left: 20%;
        font-size: 2.2vw;
    }
    .overlay-21-text {
        top: 5%;
        left: 11%;
    }
}
.campaign-intro,
.campaign-rewards {
    font-size: 1.6vw;
}
.highlight-black {
    font-weight: bold;
    color: #000;
    font-size: 3vw;
}

.highlight-red {
    color: #e60039;
    font-weight: bold;
    font-size: 3vw;
}
/* スマホ用調整 */
@media (max-width: 767px) {
    .campaign-intro,
    .campaign-rewards {
        font-size: 2.5vw;
    }
    .highlight-black {
        font-size: 3.5vw;
    }
    .highlight-red {
        font-size: 3.5vw;
    }
}

/* キャンペーン一覧下テキスト↑ */

.overlay-31-text {
    top: 11%;
    left: 30%;
    z-index: 2;
    font-size: 2vw;
}
.overlay-32-text {
    top: 17%;
    /* left: 22%; 共通で中央寄せ指定*/
    z-index: 2;
}
.highlight-pink {
    color: #e91e63;
    font-weight: bold;
    font-size: 2.5vw;
}
.event-main {
    font-size: 2vw;
}
.overlay-33-text {
    top: 60%;
    /*left: 20%; 共通で中央寄せ指定*/
    z-index: 2;
    font-size: 2vw;
    text-align: center; /* テキストを中央揃え */
}
/* スマホ用調整 */
@media (max-width: 767px) {
    .overlay-31-text {
        font-size: 2.8vw;
        top: 7%;
        left: 22%;
    }
    .overlay-32-text {
        top: 14%;
        /*left: 20%; 共通で中央寄せ指定*/
    }
    .highlight-pink {
        font-size: 3.2vw;
    }
    .event-main {
        font-size: 2.8vw;
    }
    .overlay-33-text {
        top: 52%;
        /*left: 20%; 共通で中央寄せ指定*/
        font-size: 2.8vw;
    }
}
/* YouTube用オーバーレイ */
.overlay-youtube1 {
    position: absolute;
    top: 70%; /* 画像の上部に表示したい場合は調整 */
    left: 50%;
    transform: translateX(-50%);
    max-width: 50%; /* 画像の大きさ調整 */
    aspect-ratio: 16 / 9;
    z-index: 10;
}

.overlay-youtube1 iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 20px;
}

.overlay-youtube2 {
    position: absolute;
    top: 26%; /* 画像の上部に表示したい場合は調整 */
    left: 50%;
    transform: translateX(-50%);
    max-width: 50%; /* 画像の大きさ調整 */
    aspect-ratio: 16 / 9;
    z-index: 10;
}

.overlay-youtube2 iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 20px;
}
.overlay-youtube-label {
    top: 55%;
    z-index: 2;
    font-size: 1.6vw;
}

/* モバイル対応 */
@media screen and (max-width: 767px) {
    .overlay-youtube1 {
        top: 72%;
        max-width: 60%; /* 画像の大きさ調整 */
    }
    .overlay-youtube2 {
        top: 23%;
        max-width: 56%; /* 画像の大きさ調整 */
    }
    .overlay-youtube-label {
        top: 47%;
        font-size: 2.6vw;
    }
}