/* 基本設定 */
:root {
    --primary-color: #ed4ab3;
    /* アクセントカラー：ピンク */
    --bg-color: #fffae0;
    /* 背景色：温かみのある黄色 */
    --text-color: #333;
    --white: #ffffff;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    scroll-behavior: smooth;
}

:target {
    scroll-margin-top: 70px;
}

#guest,
#map,
#douga,
#toukou {
    scroll-margin-top: 80px;
}

body {
    font-family: "Zen Maru Gothic", sans-serif;
    font-style: normal;

    background-color: #fffae0;

    /* 斜めストライプの設定（透明度をさらに下げて馴染ませる） */
    background-image: linear-gradient(45deg,
            transparent 25%,
            rgba(240, 225, 150, 0.2) 25%,
            /* 透明度を0.2（20%）に下げて、より淡い発色に */
            rgba(240, 225, 150, 0.2) 50%,
            transparent 50%,
            transparent 75%,
            rgba(240, 225, 150, 0.2) 75%,
            rgba(240, 225, 150, 0.2) 100%);

    /* ストライプの幅と間隔（50pxのゆったりサイズを維持） */
    background-size: 50px 50px;

    padding: 80px 0;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    /* background-image: url(../img/bg.webp); */
}





/* ヘッダー */
.site-header {
    background: #ffeaf1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.logo img {
    width: 220px;
    height: auto;
    display: block;
}

.main-nav ul {
    display: flex;
    justify-content: center;
    gap: 15px;
    /* ボタン同士の間隔 */
    list-style: none;
    padding: 0;
}

.main-nav li {
    transition: transform 0.2s, box-shadow 0.2s;
    /* 動きを滑らかに */
}

.main-nav li a {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 50px;
    /* 丸み */
    text-decoration: none;
    color: #fff;
    /* 文字色（白抜きの場合） */
    font-weight: bold;
    transition: all 0.3s ease;
    /* 動きを滑らかに */

    /* ▼ 影だけを追加 ▼ */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* ホバー時の演出：少し浮き上がらせる */
.main-nav li:hover {
    transform: translateY(-3px);
}

.main-nav li:hover a {
    /* ホバー時に影を少し強くして「浮いた感」を出す */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* 各ボタンの元々の背景色は、以下のように個別に残っていればOKです */
.nav-item-1 a {
    background-color: #f7b1c3;
}

/* 例：ピンク */
.nav-item-2 a {
    background-color: #6c9bd2;
}

/* 例：青 */
.nav-item-3 a {
    background-color: #f8d44d;
}

/* 例：黄 */
.nav-item-4 a {
    background-color: #a8d3ba;
}

/* 例：緑 */
/* アイコンと文字の間隔 */

.main-nav .material-symbols-outlined {
    margin-right: 8px;
    font-size: 20px;
}

/* アイコンのサイズ微調整 */
.main-nav .material-symbols-outlined {
    font-size: 18px;
}

/* スマホ表示時の調整 */
@media (max-width: 768px) {
    .main-nav ul {
        flex-wrap: wrap;
        /* 折り返しを許可 */
        justify-content: center;
        gap: 8px;
    }

    .main-nav a {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

.main-nav a:hover {
    opacity: 0.8;
    transform: translateY(-2px);
    color: var(--white);
    /* ホバー時も白を維持 */
}

/* 4色の出し分け */
.nav-item-1 a {
    background-color: #ed4ab3;
}

/* アクセントカラー（ピンク） */
.nav-item-2 a {
    background-color: #4ebf73;
}

/* グリーン（お出かけ・マップ） */
.nav-item-3 a {
    background-color: #f2a922;
}

/* オレンジ（ハッピー・投稿） */
.nav-item-4 a {
    background-color: #5593e8;
}

/* ブルー（番組情報） */

/* メインビジュアル */
.hero {
    position: relative;
    width: 100%;
    /*height: 100vh;*/
    aspect-ratio: 16 / 9;
    /* ←これで常に16:9に */
    background-image: url("../images/bg_title.webp");
    position: relative;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 10px;
    color: #504f4f;
}

.hero-sub {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 5px;
    color: #504f4f;
}

.hero-info {
    font-size: 1.5rem;
    margin-bottom: 30px;
    color: #504f4f;

}


.hero-content2 {
    text-align: center;
    width: 40%;
    box-sizing: border-box;
}



.hero-content img {
    position: absolute;
    top: 50%;
    left: 50%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;

}

/* ボタン */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.2s;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--primary-color);
    color: var(--white);
}

.btn-secondary {
    background: var(--white);
    color: var(--primary-color);
    margin-left: 10px;
}

/* セクション共通 */
.section {
    padding: 80px 0;
}

.intro01 {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    font-weight: bold;
    background-color: #fcf5f9;

}

.intro02 {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 5%;
    font-weight: bold;
    text-align: left;
    /* background-color: #4ebf73; */
}


.sm01 {
    width: 15vw;
    text-align: center;
    margin-left: -10vw;
}

.sm02 {
    width: 15vw;
    text-align: center;
    margin-right: -10vw;
}




.sm01 img {
    width: 100%;
}

.sm02 img {
    width: 100%;
}

.sm05 img {
    width: 200px;
}


/* 親要素のsectionに relative を追加（既にある場合は不要） */
.section {
    position: relative;
    overflow: hidden;
    /* 気球が画面外へはみ出してもスクロールバーを出さない */
}

.parallax-container {
    position: relative;
    width: 100%;
    /* 気球が動くためのスペースを確保 */
}

.parallax-kikyu {
    position: absolute;
    right: 2%;
    top: 0;
    width: 15%;
    height: auto;
    z-index: 5;
    pointer-events: none;
    will-change: transform;
}


.parallax-rbw {
    position: absolute;
    right: 2%;
    top: 0;
    width: 120px;
    height: auto;
    z-index: 5;
    pointer-events: none;
    will-change: transform;
}

.parallax-sm03 {
    position: absolute;
    left: 1%;
    top: 80vh;
    margin-top: 50vw;
    width: 300px;
    height: auto;
    z-index: 5;
    pointer-events: none;
    will-change: transform;
}

.parallax-sm04 {
    position: absolute;
    right: 1%;
    top: 15vh;
    margin-top: 60vw;
    width: 200px;
    height: auto;
    z-index: 5;
    pointer-events: none;
    will-change: transform;
}

.parallax-sm05 {
    position: absolute;
    left: 1%;
    top: 0;
    width: 200px;
    height: auto;
    z-index: 5;
    pointer-events: none;
    will-change: transform;
}





.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;
    border-left: 8px solid var(--primary-color);
    padding-left: 15px;
}

.section-title {
    font-size: 1.8rem;
}

.text-center {
    text-align: center;
}

.mb-40 {
    margin-bottom: 40px;
}

/* ゲストカード */
.guest-card {
    background: var(--white);
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.guest-image {
    flex: 1;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.guest-image img {
    max-width: 300px;
}

.guest-body {
    flex: 2;
    padding: 40px;
}

.guest-tag-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.tag {
    background: var(--primary-color);
    color: var(--white);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 1.4rem;
    font-weight: bold;
}

.guest-name {
    font-size: 1.4rem;
    font-weight: bold;
}

.guest-quote {
    font-size: 2rem;
    margin-bottom: 20px;
}

.guest-pr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 30px;
}

.pr-item {
    border: 2px solid #f0f0f0;
    padding: 15px;
    border-radius: 12px;
    text-align: center;
}

.pr-item img {
    width: 100%;
}


.pr-label {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 0.9rem;
}

.space {
    padding-bottom: 30%;
}


/********ギャラリー*******/

.gallery-section {}

/* 外枠 */
.auto-scroll-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 60px 0;
    /* ← 帯の高さ分確保 */
    background-color: #ff62cb49;
}

/* 黒帯 */
.auto-scroll-container::before,
.auto-scroll-container::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 40px;
    background: #29292913;
    z-index: 5;
}

/* 上 */
.auto-scroll-container::before {
    top: 0;
}

/* 下 */
.auto-scroll-container::after {
    bottom: 0;
}

/* 穴コンテナ */
.film-holes {
    position: absolute;
    left: 0;
    width: 100%;
    height: 40px;
    display: flex;
    gap: 20px;
    padding: 0 20px;
    z-index: 10;
    pointer-events: none;
    align-items: center;
}

/* 上 */
.film-holes.top {
    top: 0;
}

/* 下 */
.film-holes.bottom {
    bottom: 0;
}

/* 穴（角丸四角） */
.film-holes span {
    width: 14px;
    height: 26px;
    background: #fff;
    border-radius: 4px;
    flex-shrink: 0;
}


/* スライドするトラック */
.loop-track {
    display: flex;
    width: max-content;
    /* 中身の合計幅に広げる */
    animation: loop-scroll 40s linear infinite;
    /* 40秒で1周、一定速度で無限に */
}

/* マウスを乗せた時に一時停止させる（任意） */
.loop-track:hover {
    animation-play-state: paused;
}

/* 各動画アイテム */
.gallery-item {
    flex: 0 0 400px;
    /* 動画の横幅を固定 */
    margin: 0 15px;
}

.gallery-item iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* アニメーションの定義 */
@keyframes loop-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        /* 全体の半分（1セット目分）だけ左に動いたら0%に戻す */
        transform: translateX(-50%);
    }
}

/* スマホでは動画を少し小さくする */
@media screen and (max-width: 768px) {
    .gallery-item {
        flex: 0 0 280px;
    }
}



/* マップセクション */
.map-section {
    position: relative;
    width: 100%;
    background-image: url(../img/map.webp);

    background-attachment: fixed;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    padding: 100px 0;
}

.map-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    /* 白っぽく薄くして文字を読みやすくする */
    z-index: 1;
}

.map-container {
    position: relative;
    z-index: 2;
}


.section-title {
    color: #6c9bd2;
    /* メニューと同じ青色で統一感 */
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-weight: bold;
}

.section-title img {
    width: 30%;
}

.section-desc {
    color: #333;
    margin-bottom: 40px;
    font-size: 1.1rem;
}

/* マップエリアの仮装飾 */
.map-placeholder {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    background-color: #fff;
    border: 3px solid #6c9bd2;
    border-radius: 15px;
    overflow: hidden;
    /* ここで、枠からはみ出したヘッダーを隠します */
    position: relative;
    padding-top: 56.25%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.map-placeholder iframe {
    position: absolute;
    /* ヘッダーの高さ（約50px〜60px）分だけ上にずらす */
    top: -60px !important;
    left: 0;
    width: 100% !important;
    /* 上にずらした分、高さを少し足して下まで埋める */
    height: calc(100% + 50px) !important;
    border: none;
}

/* スマホでは少し高さを出して見やすくする（任意） */
@media screen and (max-width: 768px) {
    .map-placeholder {
        padding-top: 75%;
        /* 4:3に近い比率にして高さを確保 */
    }

    .section-title img {
        width: 50%;
    }

}

/* iOS対策：スマホではパララックスを解除して通常の背景表示にする */
@media screen and (max-width: 1024px) {
    .map-section {
        background-attachment: scroll;
        /* 固定を解除 */
    }
}

/* 横並びにするための親要素 */
.map-flex-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* 隙間を少し狭くして専有面積を稼ぐ */
    max-width: 1200px;
    /* 全体の最大幅を少し広げるとマップがより大きく見えます */
    margin: 40px auto 0;
    align-items: flex-start;
}

/* 左側：ショップリストの箱 */
.shop-list-container {
    flex: 0 0 250px;
    /* 幅を250pxに固定し、伸縮させない */
    background: #fff;
    border: 2px solid #6c9bd2;
    border-radius: 12px;
    padding: 15px;
    /* 中の余白を少し詰める */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.list-headline {
    color: #6c9bd2;
    font-size: 1.1rem;
    /* 少し小さく */
    margin-bottom: 10px;
    padding-bottom: 8px;
}

.shop-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.shop-list li {
    padding: 10px 0;
    /* 行間を少し詰める */
}

.shop-list li:last-child {
    border-bottom: none;
}

.shop-name {
    font-size: 14px;
    /* 文字サイズをわずかに調整 */
}

/* 「地図で見る」ボタン */
.map-link-btn {
    background-color: #6c9bd2;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 20px;
    transition: 0.3s;
}

.map-link-btn:hover {
    background-color: #5584b8;
    transform: translateY(-2px);
}

/* 右側：マップ（レスポンシブ対応） */
.map-placeholder {
    flex: 1;
    /* 残りの幅をすべてマップに割り当て */
    min-width: 300px;
    position: relative;
    padding-top: 50%;
    /* 高さは比率で維持 */
    border: 3px solid #6c9bd2;
    border-radius: 15px;
    overflow: hidden;
}

.map-placeholder iframe {
    position: absolute;
    top: -50px;
    /* ヘッダーを隠す */
    left: 0;
    width: 100% !important;
    height: calc(100% + 50px) !important;
    border: none;
}

/* スマホ用の調整（縦に並んだ時は全幅に） */
@media screen and (max-width: 768px) {
    .shop-list-container {
        flex: 1 1 100%;
        /* スマホでは横幅いっぱい */
        max-width: 100%;
    }


    .map-placeholder {
        width: 100%;
        padding-top: 75%;
        /* スマホでは地図を少し高くする */
    }
}

/* ハッピーBOX */
.happy-box {
    background: #fff5f0;
    padding: 60px;
    border-radius: 40px;
    border: 2px dashed var(--primary-color);
    text-align: center;
}

.happy-title {
    font-size: 2.2rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.happy-text {
    font-size: 1.1rem;
    margin-bottom: 30px;
}

/* フッター */
.site-footer {
    position: absolute;
    bottom: 0;
    background: #92ccf7;
    color: #3a3a3a;
    padding: 60px 0 20px;
    width: 100%;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.footer-logo img {
    width: 200px;
    height: auto;
    display: block;
    margin-bottom: 15px;
}

/* SNSセクションの調整 */
.footer-social p {
    font-weight: bold;
    margin-bottom: 10px;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.social-icon {
    display: block;
    background: #ffffff;
    /* 背景を白にして文字を見やすく */
    color: #3a3a3a;
    /* 文字色を濃く設定 */
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: bold;
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* 軽い縁取りでスッキリと */
}

.social-icon img {
    width: 50px
}

.footer-copy {
    padding-top: 20px;
    text-align: center;
    font-size: 0.8rem;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        height: auto;
        padding: 10px 0;
    }

    .logo img {
        width: 180px;
        margin-bottom: 10px;
    }

    .guest-card {
        flex-direction: column;
    }

    .gallery-grid,
    .guest-pr-grid {
        grid-template-columns: 1fr;
    }

    .footer-container {
        flex-direction: column;
    }

    .hero-title {
        font-size: 2.5rem;
        color: #333;
    }

}

.youtube {
    aspect-ratio: 16 / 9;
    box-shadow: 10px 5px 5px rgb(59, 59, 59);
    width: 80%;
    margin: 0 auto;
    margin-top: 5%;
}

.youtube iframe {
    width: 100%;
    height: 100%;
}

/************/
@media screen and (max-width: 768px) {

    /* 1. ヘッダー：ロゴとメニューを縦に並べるか、コンパクトに */
    header {
        padding: 15px 10px 40px;
        /* 上下左右の余白を調整 */
    }

    /* 2. メニューボタン：2列（または1列）にして押しやすく */
    .main-nav ul {
        flex-wrap: wrap;
        /* 折り返しを許可 */
        gap: 10px;
        justify-content: center;
    }

    .main-nav li {
        width: calc(50% - 10px);
        /* 2列で並べる */
    }

    .main-nav li a {
        padding: 12px 5px;
        font-size: 14px;
        justify-content: center;
        /* 中央寄せ */
        border-radius: 10px;
        /* スマホは少し角を立てたほうが押しやすい */
    }

    .main-nav .material-symbols-outlined {
        font-size: 18px;
        margin-right: 4px;
    }

    /* 3. オートスクロール（ギャラリー）：動画のサイズをスマホ用に */
    .gallery-item {
        flex: 0 0 80%;
        /* 画面の8割くらいの幅で見せる */
        margin: 0 10px;
    }

    /* 4. コンテナ・セクション：左右のパディングを削る */
    .container {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .section-title {
        font-size: 1.5rem;
        margin-bottom: 25px;
    }

    /* 5. とことこマップ（ショップリスト）：縦並びに */
    .shop-list-grid {
        display: block;
        /* グリッドを解除して縦並びに */
    }

    .shop-item {
        margin-bottom: 20px;
        width: 100%;
    }
}

@media screen and (max-width: 598px) {

    /* 1. コンテンツ全体を中央寄せにし、左右に適切な余白を */
    .hero-content {
        padding: 40px 20px;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
        margin-top: 28%;
    }

    .hero-content2 {
        padding: 40px 20px;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }

    /* 2. フォントサイズをスマホサイズに縮小 */
    .hero-sub {
        font-size: 0.8rem;
        margin-bottom: 10px;
        display: block;
        /* 1行をしっかり確保 */
    }

    .hero-title {
        font-size: 24px;
        /* 見切れない程度の大きさに */
        line-height: 1.4;
        margin-bottom: 15px;
        word-break: keep-all;
        /* 日本語の変な位置での改行を防ぐ */
    }

    .hero-info {
        font-size: 16px;
        margin-bottom: 25px;
    }

    /* 3. ボタンを横並びから縦並びに変更 */
    .hero-buttons {
        display: flex;
        flex-direction: column;
        /* 縦に並べる */
        gap: 12px;
        align-items: center;
    }

    .btn {
        width: 100%;
        /* ボタンを横幅いっぱいに */
        max-width: 300px;
        /* ただし広がりすぎないように制限 */
        padding: 15px 20px;
        font-size: 15px;
        margin: 0 !important;
        /* PC用のマージンをリセット */
    }
}

@media screen and (max-width: 598px) {

    .intro01 {
        justify-content: center;
        align-items: center;
    }

    /* 1. 全体的にサイズを抑える */
    .sm01,
    .sm02 {
        width: 120px;
        z-index: 5;
        /* 文字（z-index:10想定）より下に配置して被りを防ぐ */
    }




    .sm01 img {
        width: 100%;
        height: auto;
    }


    .sm02 img {
        width: 100%;
        height: auto;
    }



    .parallax-sm03 {

        width: 120px;
        overflow: hidden;
    }

    .parallax-sm04 {
        top: 500vw;
        width: 80px;
        overflow: hidden;
    }


    .parallax-sm05 {
        width: 80px;
        overflow: hidden;
    }



    .parallax-kikyu {
        position: absolute;
        right: 2%;
        top: 0;
        width: 100px;
        height: auto;
        z-index: 5;
        pointer-events: none;
        will-change: transform;
    }


    /* 4. ヒーローコンテンツの重なり順を上げる */
    .hero-content {
        position: relative;
        z-index: 10;
        /* パーツよりも前面に出す */
    }

    .section-title {
        font-size: 1.4rem;
    }
}


@media screen and (max-width: 768px) {

    /* 1. ギャラリーアイテム（動画を包む枠）のサイズ調整 */
    .gallery-item {
        flex: 0 0 80vw;
        width: 80vw;
    }

    /* 2. iframe（動画本体）のレスポンシブ化 */
    .gallery-item iframe {
        width: 100% !important;
        /* 親要素の幅いっぱいに広げる */
        height: auto;
        /* アスペクト比を16:9に固定（これがないと潰れます） */
        aspect-ratio: 16 / 9;
        border-radius: 10px;
        /* スマホで見やすい適度な角丸 */
    }

    /* 3. オートスクロール全体の余白調整 */
    .auto-scroll-container {
        padding: 10px 0;
    }

    /* 黒帯 */
    .auto-scroll-container::before,
    .auto-scroll-container::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 10px;
        background: #29292913;
        z-index: 5;
    }

    /* 上 */
    .auto-scroll-container::before {
        top: 0;
    }

    /* 下 */
    .auto-scroll-container::after {
        bottom: 0;
    }

    /* 穴コンテナ */
    .film-holes {
        position: absolute;
        left: 0;
        width: 100%;
        height: 10px;
        display: flex;
        gap: 10px;
        padding: 0 20px;
        z-index: 10;
        pointer-events: none;
        align-items: center;
    }

    /* 上 */
    .film-holes.top {
        top: 0;
    }

    /* 下 */
    .film-holes.bottom {
        bottom: 0;
    }

    /* 穴（角丸四角） */
    .film-holes span {
        width: 14px;
        height: 7px;
        background: #fff;
        border-radius: 4px;
        flex-shrink: 0;
    }

    .happy-title {
        font-size: 1.4rem;
    }


}


@media screen and (max-width: 768px) {

    /* 1. セクション全体の上下余白をギュッと詰める */
    .container.section {
        padding-top: 40px !important;
        /* 100px → 40px 程度に */
        padding-bottom: 40px !important;
        /* 同様に調整 */
    }

    /* 2. もし不規則な曲線を導入している場合、その高さも調整 */
    .curve-top svg,
    .curve-bottom svg {
        height: 40px !important;
        /* 曲線の「うねり」を浅くして高さを節約 */
    }

    /* 3. セクション間のマージン（外側の余白）も調整 */
    section {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    /* 4. タイトルの上の余白が気になる場合はここも */
    .section-title {
        margin-top: 0;
        margin-bottom: 20px;
    }

    .map-section {
        padding: 5% 0;
    }

    .gallery-section {
        margin: 0 !important;
        padding: 0 !important;
    }
}

.pc {
    display: none;
}

@media screen and (max-width: 768px) {

    .pc {
        display: block !important;
    }
}

/****************/
@media screen and (max-width: 768px) {

    /* 1. ヒーローエリア全体の余白をゼロにする */
    .hero {
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden;
    }

    /* 2. コンテンツ（画像を入れる枠）の調整 */
    .hero-content {
        width: 100% !important;
        padding: 0 !important;
        /* 左右の余白を消して画像を満杯に */
        text-align: center;
    }

    /* 3. 画像自体のサイズ調整 */
    .hero-content img {
        width: 100% !important;
        /* 画面幅いっぱいに広げる */
        height: auto !important;
        /* 高さを自動調整して歪みを防ぐ */
        display: block;
        /* 下に謎の隙間ができるのを防ぐ */
        max-width: none !important;
        /* PC用の制限を解除 */
    }
}

/* PCではハンバーガーを隠す */
.menu-trigger {
    display: none;
}

@media screen and (max-width: 768px) {
    .site-header {
        padding: 25px 0;
        height: auto;
    }

    .header-container {
        display: flex !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 15px !important;
    }

    .logo {
        margin: 0;
    }

    .logo img {
        height: 50px;
        /* ロゴを少し小さくして高さを抑える */
        width: auto;
    }

    .intro02 {
        font-size: 0.7rem;
        padding: 20px;
        /* background-color: #4ebf73; */
    }



    /* ハンバーガーボタンの見た目 */
    .menu-trigger {
        display: block;
        background: transparent;

        border: none;

        outline: none;
        box-shadow: none;

        padding: 0;
        appearance: none;
        margin-top: -50px;

        /* 2. 右端に寄せる */
        margin-left: auto !important;
        position: relative;
        z-index: 1000;
    }

    .menu-trigger span {
        display: block;
        width: 30px;
        height: 3px;
        background-color: #ffffff;
        /* 白色の線 */
        margin-bottom: 6px;
        border-radius: 2px;
    }

    .menu-trigger span:last-child {
        margin-bottom: 0;
    }

    .menu-trigger span:nth-child(1) {
        top: 0;
    }

    .menu-trigger span:nth-child(2) {
        top: 11px;
    }

    .menu-trigger span:nth-child(3) {
        bottom: 0;
    }

    /* メニューが開いた時の「×」アニメーション */
    .menu-trigger.active span:nth-child(1) {
        transform: translateY(11px) rotate(-45deg);
    }

    .menu-trigger.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-trigger.active span:nth-child(3) {
        transform: translateY(-11px) rotate(45deg);
    }

    /* メニュー本体を画面いっぱいのオーバーレイに */
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        /* 最初は画面の外へ */
        width: 100%;
        height: 100vh;
        background: rgba(108, 155, 210, 0.95);
        /* 番組カラーの青（少し透過） */
        transition: all 0.5s;
        z-index: 90;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .main-nav.active {
        right: 0;
        /* 右からスッと出てくる */
    }

    .main-nav ul {
        flex-direction: column;
        /* 縦並びに変更 */
        gap: 20px;
    }

    .main-nav li {
        width: 250px;
        /* メニュー内のボタン幅 */
    }

    .tag {
        width: 50%;
        font-size: 0.8rem;
    }
}

/*************************/

/* 1. カーソル本体（中心の点） */
#cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    /* 中心に合わせる */
    background: #ff69b4;
    /* 番組のアクセントカラー（ピンクなど） */
    border-radius: 50%;
    z-index: 10001;
    pointer-events: none;
    /* クリックを邪魔しない */
    transition: transform 0.1s;
}

/* 2. 追いかけてくる円（ふわっとした動き） */
#cursor-follower {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: none;
    /* 円の枠線を消す */
    background: none;
    /* 背景を消す */
    z-index: 10000;
    pointer-events: none;
    transition: transform 0.15s ease-out;

    /* ↓アイコンを中央に寄せる↓ */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* リンクの上に乗ったときの変化 */
#cursor.active {
    transform: scale(2);
}

#cursor-follower.active {
    transform: scale(1.5);
    background: rgba(108, 155, 210, 0.1);
}

#cursor-follower span {
    font-size: 30px;
    /* アイコンの大きさ */
    color: #6c9bd2;
    /* 星の色 */
}


/* 1. キラキラ回転するアニメーションの定義 */
@keyframes rotate-star {
    0% {
        transform: rotate(0deg) scale(1.5);
    }

    100% {
        transform: rotate(360deg) scale(2.0);
    }
}

/* 2. リンクに乗った（activeクラスがついた）時のスタイル */
#cursor-follower.active span {
    color: #ff69b4;
    /* ホバー時に番組のアクセントカラー（ピンクなど）に変える */
    animation: rotate-star 1.5s linear infinite;
    /* くるくる回し続ける */
    text-shadow: 0 0 10px rgba(255, 105, 180, 0.8);
    /* キラキラ感を出す光彩 */
}

/* 3. カーソル本体（中心の点）も少し変化させる */
#cursor.active {
    transform: scale(0);
    /* 中心点は消して、星だけを目立たせる */
    transition: transform 0.2s;
}


/* 生成される星のスタイル */
.star-trail {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 10000;
    color: #ffb6c1;
    /* さくら色のような淡いピンク */
    /* 初期の中心位置調整 */
    margin: -10px 0 0 -10px;
    /* 消えていくアニメーション */
    animation: star-fade 0.8s forwards ease-out;
}

@keyframes star-fade {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: scale(0) rotate(180deg);
        opacity: 0;
    }
}



/* スマホではマウスがないので非表示にする */
@media screen and (max-width: 768px) {

    #cursor,
    #cursor-follower {
        display: none;
    }
}

.btn-large {
    display: inline-block;
    text-decoration: none;
    /* 下線を消す */
    color: #ffffff;
    z-index: 9999;
    /* margin-bottom: 20vw; */
    /* 文字色を白に固定 */
}

.btn-large:hover {
    color: #ffffff;
    text-decoration: none;
}