@charset "utf-8";

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* これで完全に横スクロールを封印します */
}

/* =========================================================
   メインビジュアル (KV)
========================================================= */
.mv {
    position: relative;
    width: 100%;
    /* 画像読み込み前に表示する背景色 */
    background-color: #DD90B1; 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.mv__inner {
    position: relative;
    aspect-ratio: 1600 / 900; 
    width: 100%; /* 基本は画面幅いっぱい */
    /* ▼ 高さが画面(100vh)を超えないように制限 */
    max-width: calc(100vh * (1600 / 900));
}

.mv__img {
    position: absolute;
    top: 0;
    height: 100%;
    width: auto;
    max-width: none;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
}

/* =========================================================
   メインビジュアル：再生ボタン
========================================================= */
.mv__play-btn {
    position: absolute;
    /* vwではなく、画像ラッパーに対する「％」で指定することで、縮小しても絶対にズレない */
    /* calc(Figmaのpx / 画像の幅or高さ * 100%) の式で書くと計算が楽です */
    right: calc(103 / 1600 * 100%); 
    bottom: calc(122 / 900 * 100%); /* ※900の部分は実際の画像の高さに変更 */
    width: calc(120 / 1600 * 100%);
    
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 2;
    opacity: 0; 
}

/* SPでのボタン位置の微調整が必要な場合はメディアクエリで上書き */
@media screen and (max-width: 1024px) {
    .mv__inner {
        aspect-ratio: 375 / 667; 
        max-width: none;
    }

    .mv__play-btn {
        right: calc(36 / 375 * 100%);
        bottom: calc(200 / 667 * 100%);
        width: calc(74 / 375 * 100%);
    }
}

/* ホバー時のクロスフェード演出 */
.mv__play-btn img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
}
.mv__play-btn .btn-on { opacity: 0; }
.mv__play-btn:hover .btn-on { opacity: 1; }
.mv__play-btn:hover .btn-off { opacity: 0; }

/* =========================================================
   メインビジュアル：スクロールインジケーター
========================================================= */
.mv__scroll-indicator {
    /* ▼ 変更：absoluteに戻し、画像の枠内に閉じ込めます */
    position: absolute; 
    
    /* ▼ 魔法の1行：KVが画面より長い時だけ、はみ出した分を上に押し上げる！ */
    /* iOSのURLバー対策として vh と dvh の両方を書いておきます */
    bottom: max(0px, calc(100% - 100vh + 10px));
    bottom: max(0px, calc(100% - 100dvh + 0px));
    
    right: 7px; 
    display: flex;
    align-items: flex-start;
    gap: 8px; 
    z-index: 10;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ▼ JSで付与する非表示用クラス */
.mv__scroll-indicator.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.mv__scroll-indicator .scroll-text {
    color: #fff;
    font-size: 10px;
    letter-spacing: 0.1em;
    writing-mode: vertical-rl;
}

.mv__scroll-indicator .line-wrapper {
    width: 1px;
    height: 130px; 
    position: relative;
    overflow: hidden;
}


/* PCレイアウト */
@media screen and (min-width: 1025px) {
    .mv__scroll-indicator {
        position: absolute; 
        
        --kv-px: calc(min(100vw, 100vh * (1600 / 900)) / 1600);
        right: calc(10 / 1600 * 100%); 
        
        /* PC版は1画面収まり前提なので、常に一番下（0）に固定 */
        bottom: 0;
        
        gap: 10px;
        flex-direction: row-reverse;
    }

    .mv__scroll-indicator .scroll-text {
        font-size: min(calc(var(--kv-px) * 12), 12px);
    }

    .mv__scroll-indicator .line-wrapper {
        height: min(calc(var(--kv-px) * 243), 243px); 
    }

    /* ▼ PC時は画像と一緒に消えていくので非表示処理を無効化 */
    .mv__scroll-indicator.is-hidden {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

}

.mv__scroll-indicator .line {
    width: 100%;
    height: 0;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    animation: growAndShrink 2.5s ease-in-out infinite;
}

@keyframes growAndShrink {
    0% {
        height: 0;
        top: 0;
    }
    30% {
        height: 100%;
        top: 0;
    }
    70% {
        height: 100%;
        top: 100%;
    }
    100% {
        height: 0;
        top: 100%;
    }
}


/* =========================================================
   YouTubeモーダル
========================================================= */
.youtube-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    display: none; /* 初期は非表示 */
    align-items: center;
    justify-content: center;
}
.youtube-modal.is-active {
    display: flex;
}
.youtube-modal__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
}
.youtube-modal__content {
    position: relative;
    width: 90%;
    max-width: 1000px;
    z-index: 1;
}
/* 右上のバツボタン */
.youtube-modal__close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
/* 16:9の動画比率をキープするコンテナ */
.youtube-modal__video {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    background-color: #000;
}
.youtube-modal__video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* =========================================================
   ステートメント
========================================================= */
.statement {
    position: relative;
    z-index: 0;
    width: 100%;
    padding: calc(var(--winW) * 100) 0; /* セクションの上下余白 */
    padding-top: 0;
    background-color: #fff;
}

.statement__inner {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.statement__heading,
.statement__text {
    position: relative;
    z-index: 2; 
}

.statement__heading-img {
    width: calc(var(--winW) * 1200);
    margin: 0 auto calc(var(--winW) * 37);
}

.statement__text {
    text-align: left;
    /* 初期色は黒色(#555) */
    color: #555555;
    /* PCのフォントサイズ (16pxベース) */
    font-size: max(16px, calc(var(--winW) * 18));
    line-height: 2.4;
    letter-spacing: 0.2em;
}

.stmt-spacer {
    height: calc(var(--winW) * 32); /* 段落の間の余白 */
}

/* SPレイアウトの上書き */
@media screen and (max-width: 1024px) {
    .statement {
        padding: calc(var(--winW) * 100) 0;
    }

    .statement__heading-img {
        width: calc(var(--winW) * 360);
        margin-bottom: calc(var(--winW) * 68);
        margin-left: calc(var(--winW) * 16);
    }
    .statement__text {
        /* SPのフォントサイズ (14pxベース) */
        font-size: calc(var(--winW) * 14); 
    }
    .stmt-spacer {
        height: calc(var(--winW) * 24);
    }
}

/* =========================================================
   花びら パララックス装飾
========================================================= */
.petals-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* クリックやスクロールの邪魔をしないようにする */
}

.petal {
    position: absolute;
    /* CSSで個別に配置・回転・サイズ・ぼかしを設定し、1枚の画像で表現を分ける */
}


.petal--front { z-index: 3; } /* テキスト(2)より手前 */
.petal--back  { z-index: 1; } /* テキスト(2)より奥 */

/* ▼ PC用配置（位置・サイズ・角度・ぼかしを個別に管理） */
.petal-pc-1 {
    top: 150%; right: 0%;
    width: calc(var(--winW) * 280);
    transform: rotate(280deg);
    filter: blur(20px);
}
.petal-pc-2 {
    top: 50%; right: 20%;
    width: calc(var(--winW) * 96);
    transform: rotate(91deg);
    filter: blur(7px);
}
.petal-pc-3 {
    top: 46%; right: 29%;
    width: calc(var(--winW) * 24);
    transform: rotate(254deg);
    filter: blur(1px);
}
.petal-pc-4 {
    top: 110%; left: -2%;
    width: calc(var(--winW) * 149);
    transform: rotate(265deg);
    filter: blur(11px);
}

/* ▼ SP用配置 */
.petal-sp-1 {
    top: 31%; left: 6%;
    width: calc(var(--winW) * 54);
    transform: rotate(285deg);
    filter: blur(3px);
}
.petal-sp-2 {
    top: 38%; left: 18%;
    width: calc(var(--winW) * 17);
    transform: rotate(343deg);
    filter: blur(1px);
}
.petal-sp-3 {
    top: 59%; right: -2%;
    width: calc(var(--winW) * 57);
    transform: rotate(80deg);
    filter: blur(7px);
}
.petal-sp-4 {
    top: 54%; right: 15%;
    width: calc(var(--winW) * 17);
    transform: rotate(278deg);
    filter: blur(1px);
}
.petal-sp-5 {
    top: 120%; right: -1%;
    width: calc(var(--winW) * 38);
    transform: rotate(92deg);
    filter: blur(3px);
}
.petal-sp-6 {
    top: 112%; left: 24%;
    width: calc(var(--winW) * 17);
    transform: rotate(305deg);
    filter: blur(1px);
}
.petal-sp-7 {
    top: 132%; left: -6%;
    width: calc(var(--winW) * 93);
    transform: rotate(267deg);
    filter: blur(7px);
}

/* =========================================================
   スペシャルコンテンツ（横スクロール）
========================================================= */
.special {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #DD90B1; 
    overflow: hidden; 
    z-index: 0;

    /* ▼ 修正：clip-path, translateZ, backface-visibility はもう不要なので全削除！ */

    /* padding-left計算用の変数は残す */
    --mask-width: calc(var(--vhRate) * 1300); 
    --mask-height: calc(var(--vhRate) * 600);
}
/* ▼ 追加：clip-pathの代用。巨大な「白い影」で画面を覆い、中央だけ透明にする */
.special__white-mask {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* 初期サイズは既存の変数を利用 */
    width: var(--mask-width);
    height: var(--mask-height);
    border-radius: calc(var(--vhRate) * 500);
    
    /* これが魔法！画面外をすべて白で塗りつぶす（前のセクションの背景色と同じ白） */
    box-shadow: 0 0 0 3000px #ffffff;
    
    z-index: 10; /* 横スクロールのコンテンツより上に被せる */
    pointer-events: none; /* クリックやスクロールを妨害しない */
    
    /* アニメーションを滑らかにする設定 */
    will-change: width, height;
    -webkit-transform: translate(-50%, -50%) translateZ(0);
    transform: translate(-50%, -50%) translateZ(0);
}


.special {
    --vhRate: calc(100vh / 900);
}

/* 横に流れていくコンテナ */
.special__scroll-content {
    display: flex;
    align-items: center; /* 縦中央揃え */
    height: 100%;
    /* 要素の中身の分だけ横幅が広がるようにする */
    width: max-content; 
    padding-left: calc(50vw - (var(--mask-width) / 2) + calc(var(--vhRate) * 100));

    will-change: transform;
}

/* 各ブロックの共通設定 */
.special__block {
    position: relative;
    z-index: 2;
    height: 100%; /* 高さを100%確保 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 縦中央 */
}

/* 横スクロール開始コンテンツ上端レイアウト */
.special__block--title {
    justify-content: flex-start;
}


/* 各画像のサイズ（vh連動） */
.special__title-img {
    height: calc(var(--vhRate) * 848); 
    width: auto; /* 比率を保つ */
}

.special__movie-area {
    height: calc(var(--vhRate) * 248);
    aspect-ratio: 736 / 496; 
    flex-shrink: 0;
    border-radius: calc(var(--vhRate) * 10);
    overflow: hidden;
}
.special__movie-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.special__num-img {
    position: absolute;
    height: calc(var(--vhRate) * 42); /* vh連動 */
    width: auto;
}
.special__movie-text {
    position: absolute;
    font-size: calc(var(--vhRate) * 28);
    color: #fff;
    font-style: italic;
    letter-spacing: 0.16em;
}
.special__suu-img {
    position: absolute;
    width: auto;
}
.special__fuki-img {
    position: absolute;
    width: auto;
}

.special__block--card-01 {

    margin-right: calc(var(--vhRate) * 162);

    .special__num-img {
        top: calc(var(--vhRate) * 172);
        left:  calc(var(--vhRate) * -34);
    }
    .special__movie-text {
        top: calc(var(--vhRate) * 219);
        left: calc(var(--vhRate) * -2);
    }
    .special__movie-area {
        margin-top: calc(var(--vhRate) * -120);
    }
    .special__suu-img {
        top: calc(var(--vhRate) * 410);
        left: calc(var(--vhRate) * 213);
        height: calc(var(--vhRate) * 146);
    }
    .special__fuki-img {
        top: calc(var(--vhRate) * 561);
        left: calc(var(--vhRate) * -3);
        height: calc(var(--vhRate) * 131);
    }
}
.special__block--card-02 {

    margin-right: calc(var(--vhRate) * 220);

    .special__num-img {
        top: calc(var(--vhRate) * 264);
        left: calc(var(--vhRate) * -44);
    }
    .special__movie-text {
        top: calc(var(--vhRate) * 308);
        left: calc(var(--vhRate) * 0);
    }
    .special__movie-area {
        margin-top: calc(var(--vhRate) * 60);
    }
    .special__suu-img {
        top: calc(var(--vhRate) * 224);
        left: calc(var(--vhRate) * 18);
        height: calc(var(--vhRate) * 500);
    }
    .special__fuki-img {
        top: calc(var(--vhRate) * 132);
        left: calc(var(--vhRate) * 88);
        height: calc(var(--vhRate) * 161);
    }
}
.special__block--card-03 {

    margin-right: calc(var(--vhRate) * 250);

    .special__num-img {
        top: calc(var(--vhRate) * 195);
        left: calc(var(--vhRate) * -40);
    }
    .special__movie-text {
        top: calc(var(--vhRate) * 246);
        left: 0;
    }
    .special__movie-area {
        margin-top: calc(var(--vhRate) * -54);
    }
    .special__suu-img {
        top: calc(var(--vhRate) * 99);
        left: calc(var(--vhRate) * 90);
        height: calc(var(--vhRate) * 214);
    }
    .special__fuki-img {
        top: calc(var(--vhRate) * 563);
        left: calc(var(--vhRate) * 43);
        height: calc(var(--vhRate) * 211);
    }
}
.special__block--card-04 {

    margin-right: calc(var(--vhRate) * 115);

    .special__num-img {
        top: calc(var(--vhRate) * 203);
        left: calc(var(--vhRate) * -90);
    }
    .special__movie-text {
        top: calc(var(--vhRate) * 306);
        left: calc(var(--vhRate) * 320);
        white-space: nowrap;
    }
    .special__movie-area {
        margin-top: calc(var(--vhRate) * 62);
    }
    .special__suu-img {
        top: calc(var(--vhRate) * -48);
        left: calc(var(--vhRate) * -85);
        height: calc(var(--vhRate) * 445);
    }
    .special__fuki-img {
        top: calc(var(--vhRate) * 630);
        left: calc(var(--vhRate) * -3);
        height: calc(var(--vhRate) * 189);
    }
}

/* SPレイアウトの上書き */
@media screen and (max-width: 1024px) {
    .special {
        --vhRate: calc(100vh / 900);
        --spScale: min(100vw / 375, 100vh / 650);
        --mask-width: calc(var(--spScale) * 300); 
        --mask-height: calc(var(--spScale) * 600); 
    }
    /* ▼ 追加：SP用の角丸 */
    .special__white-mask {
        border-radius: calc(var(--spScale) * 300);
    }
    .special__scroll-content {
        padding-left: 0;
    }
    .special__title-img {
        height: calc(var(--vhRate) * 893);
        margin-top: calc(var(--vhRate) * 80);
    }
    .special__block--card-01 {
        margin-left: calc(var(--vhRate) * -80);
    }
    .special__block--card-04 {
        margin-right: 0;
    }
}

/* ▼ PC用配置（位置・サイズ・角度・ぼかしを個別に管理） */
.petal-special-pc-01 {
    top: calc(var(--vhRate) * 580);
    left: calc(var(--vhRate) * -40);
    height: calc(var(--vhRate) * 123);
    width: auto;
    transform: rotate(259deg);
    filter: blur(6px);
}
.petal-special-pc-02 {
    top: calc(var(--vhRate) * 509);
    left: calc(var(--vhRate) * 100);
    height: calc(var(--vhRate) * 41);
    width: auto;
    transform: rotate(94deg);
    filter: blur(2px);
}
.petal-special-pc-03 {
    top: calc(var(--vhRate) * 801);
    left: calc(var(--vhRate) * 558);
    height: calc(var(--vhRate) * 78);
    width: auto;
    transform: rotate(93deg);
    filter: blur(7px);
}
.petal-special-pc-04 {
    top: calc(var(--vhRate) * 363);
    left: calc(var(--vhRate) * 996);
    height: calc(var(--vhRate) * 29);
    width: auto;
    transform: rotate(-102deg);
    filter: blur(2px);
}
.petal-special-pc-05 {
    top: calc(var(--vhRate) * 335);
    left: calc(var(--vhRate) * 1094);
    height: calc(var(--vhRate) * 76);
    width: auto;
    transform: rotate(87deg);
    filter: blur(6px);
}
.petal-special-pc-06 {
    top: calc(var(--vhRate) * 767);
    left: calc(var(--vhRate) * 1516);
    height: calc(var(--vhRate) * 226);
    width: auto;
    transform: rotate(87deg);
    filter: blur(12px);
}
.petal-special-pc-07 {
    top: calc(var(--vhRate) * 76);
    left: calc(var(--vhRate) * 1643);
    height: calc(var(--vhRate) * 128);
    width: auto;
    transform: rotate(95deg);
    filter: blur(17px);
}
.petal-special-pc-08 {
    top: calc(var(--vhRate) * 643);
    left: calc(var(--vhRate) * 1453);
    height: calc(var(--vhRate) * 39);
    width: auto;
    transform: rotate(270deg);
    filter: blur(3px);
}

.petal-special-pc-09 {
    top: calc(var(--vhRate) * 826);
    left: calc(var(--vhRate) * 1899);
    height: calc(var(--vhRate) * 125);
    width: auto;
    transform: rotate(93deg);
    filter: blur(10px);
}
.petal-special-pc-10 {
    top: calc(var(--vhRate) * 659);
    left: calc(var(--vhRate) * 1954);
    height: calc(var(--vhRate) * 26);
    width: auto;
    transform: rotate(270deg);
    filter: blur(1px);
}
.petal-special-pc-11 {
    top: calc(var(--vhRate) * 133);
    left: calc(var(--vhRate) * 2066);
    height: calc(var(--vhRate) * 55);
    width: auto;
    transform: rotate(89deg);
    filter: blur(3px);
}
.petal-special-pc-12 {
    top: calc(var(--vhRate) * 521);
    left: calc(var(--vhRate) * 2611);
    height: calc(var(--vhRate) * 77);
    width: auto;
    transform: rotate(270deg);
    filter: blur(9px);
}
.petal-special-pc-13 {
    top: calc(var(--vhRate) * 94);
    left: calc(var(--vhRate) * 2816);
    height: calc(var(--vhRate) * 24);
    width: auto;
    transform: rotate(270deg);
    filter: blur(2px);
}
.petal-special-pc-14 {
    top: calc(var(--vhRate) * 778);
    left: calc(var(--vhRate) * 3189);
    height: calc(var(--vhRate) * 48);
    width: auto;
    transform: rotate(270deg);
    filter: blur(7px);
}
.petal-special-pc-15 {
    top: calc(var(--vhRate) * 123);
    left: calc(var(--vhRate) * 3087);
    height: calc(var(--vhRate) * 116);
    width: auto;
    transform: rotate(270deg);
    filter: blur(12px);
}
.petal-special-pc-16 {
    top: calc(var(--vhRate) * 794);
    left: calc(var(--vhRate) * 3696);
    height: calc(var(--vhRate) * 147);
    width: auto;
    transform: rotate(95deg);
    filter: blur(15px);
}
.petal-special-pc-17 {
    top: calc(var(--vhRate) * 703);
    left: calc(var(--vhRate) * 3808);
    height: calc(var(--vhRate) * 22);
    width: auto;
    transform: rotate(270deg);
    filter: blur(1px);
}

.petal-special-sp-01 {
    top: calc(var(--vhRate) * 83);
    left: calc(var(--vhRate) * -20);
    height: calc(var(--vhRate) * 72);
    width: auto;
    transform: rotate(1deg);
    filter: blur(6px);
}
.petal-special-sp-02 {
    top: calc(var(--vhRate) * 69);
    left: calc(var(--vhRate) * 63);
    height: calc(var(--vhRate) * 21);
    width: auto;
    transform: rotate(1deg);
    filter: blur(2px);
}
.petal-special-sp-03 {
    bottom: calc(var(--vhRate) * -20);
    left: calc(var(--vhRate) * 224);
    height: calc(var(--vhRate) * 112);
    width: auto;
    transform: rotate(80deg);
    filter: blur(9px);
}
.petal-special-sp-04 {
    top: calc(var(--vhRate) * 211);
    left: calc(var(--vhRate) * 308);
    height: calc(var(--vhRate) * 27);
    width: auto;
    transform: rotate(245deg);
    filter: blur(2px);
}
.petal-special-sp-05 {
    bottom: calc(var(--vhRate) * 120);
    left: calc(var(--vhRate) * 322);
    height: calc(var(--vhRate) * 19);
    width: auto;
    transform: rotate(313deg);
    filter: blur(1px);
}

.petal-special-sp-09 {
    top: calc(var(--vhRate) * 786);
    left: calc(var(--vhRate) * 781);
    height: calc(var(--vhRate) * 125);
    width: auto;
    transform: rotate(270deg);
    filter: blur(10px);
}
.petal-special-sp-10 {
    top: calc(var(--vhRate) * 659);
    left: calc(var(--vhRate) * 811);
    height: calc(var(--vhRate) * 26);
    width: auto;
    transform: rotate(270deg);
    filter: blur(1px);
}
.petal-special-sp-11 {
    top: calc(var(--vhRate) * 133);
    left: calc(var(--vhRate) * 920);
    height: calc(var(--vhRate) * 55);
    width: auto;
    transform: rotate(270deg);
    filter: blur(3px);
}
.petal-special-sp-12 {
    top: calc(var(--vhRate) * 521);
    left: calc(var(--vhRate) * 1484);
    height: calc(var(--vhRate) * 77);
    width: auto;
    transform: rotate(270deg);
    filter: blur(9px);
}
.petal-special-sp-13 {
    top: calc(var(--vhRate) * 94);
    left: calc(var(--vhRate) * 1332);
    height: calc(var(--vhRate) * 24);
    width: auto;
    transform: rotate(270deg);
    filter: blur(2px);
}
.petal-special-sp-14 {
    top: calc(var(--vhRate) * 778);
    left: calc(var(--vhRate) * 1052);
    height: calc(var(--vhRate) * 48);
    width: auto;
    transform: rotate(270deg);
    filter: blur(7px);
}
.petal-special-sp-15 {
    top: calc(var(--vhRate) * 123);
    left: calc(var(--vhRate) * 2223);
    height: calc(var(--vhRate) * 116);
    width: auto;
    transform: rotate(270deg);
    filter: blur(12px);
}
.petal-special-sp-16 {
    top: calc(var(--vhRate) * 778);
    left: calc(var(--vhRate) * 2200);
    height: calc(var(--vhRate) * 147);
    width: auto;
    transform: rotate(270deg);
    filter: blur(15px);
}
.petal-special-sp-17 {
    top: calc(var(--vhRate) * 703);
    left: calc(var(--vhRate) * 1260);
    height: calc(var(--vhRate) * 22);
    width: auto;
    transform: rotate(270deg);
    filter: blur(1px);
}


/* =========================================================
   ポイント セクション（レイアウトベース）
========================================================= */
.point {
    position: relative;
    width: 100%;
    padding-top: 0;
    padding-bottom: calc(var(--winW) * 150);
    background-color: #fff;
    overflow: hidden;
}

/* タイトル */
.point__title {
    text-align: center;
    margin-bottom: calc(var(--winW) * 12);
}
.point__title-img {
    width: calc(var(--winW) * 1003);
    margin: 0 auto;
}

/* リスト全体枠 */
.point__inner {
    width: 100%;
    max-width: calc(var(--winW) * 1108);
    margin: 0 auto;
}

/* 各アイテム */
.point__item {
    position: relative;
    margin-bottom: calc(var(--winW) * 40); /* アイテム間の縦の余白 */
    z-index: 1;
}
.point__img-wrap {
    position: relative;
    z-index: 1;
}

.point__item-01 {
    width: calc(var(--winW) * 1075);
    margin-bottom: calc(var(--winW) * 14);

    .point__content {
        column-gap: calc(var(--winW) * 76);
    }
    .point__img-wrap {
        width: calc(var(--winW) * 653);
    }
}
.point__item-02 {
    width: calc(var(--winW) * 1107);
    margin-left: calc(var(--winW) * -92);
    margin-bottom: calc(var(--winW) * 126);

    .point__content {
        column-gap: calc(var(--winW) * 84);
    }
    .point__img-wrap {
        width: calc(var(--winW) * 684);
    }
    .point__other_img {
        width: 100%;
        height: auto;
        width: calc(var(--winW) * 284);
        position: absolute;
        bottom: calc(var(--winW) * -144);
        right: calc(var(--winW) * -121);
    }
}
.point__item-03 {
    width: calc(var(--winW) * 1098);
    margin-bottom: calc(var(--winW) * 56);

    .point__content {
        column-gap: calc(var(--winW) * 104);
    }
    .point__img-wrap {
        width: calc(var(--winW) * 653);
    }
}
.point__item-04 {
    width: calc(var(--winW) * 1035);

    .point__content {
        column-gap: calc(var(--winW) * 41);
    }
    .point__img-wrap {
        width: calc(var(--winW) * 653);
    }
}


/* PC：左右配置のフレックスボックス */
.point__content {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}


/* ★PC：偶数番目(2,4...)は画像とテキストの左右を入れ替える */
.point__item:nth-child(even) .point__content {
    flex-direction: row-reverse;
}

/* 画像エリア */
.point__img {
    width: 100%;
    height: auto;
}

/* テキストエリア */
.point__text-wrap {
    width: auto; /* テキストエリアの横幅 */
    white-space: nowrap;
}

/* 時計アイコン */
.point__clock-img {
    width: calc(var(--winW) * 80); /* 仮数値：Figmaに合わせて調整 */
    margin-bottom: calc(var(--winW) * 14);
}
.point__item-01 .point__clock-img {
    margin-left: calc(var(--winW) * -10);
}


/* テキスト（ステートメント等と共通のトーン） */
.point__desc {
    color: #888888;
    font-size: calc(var(--winW) * 18);
    line-height: 2;
    letter-spacing: 0.2em;
}
.c-pink {
    color: #DD90B1;
    font-weight: bold;
}

/* ボタン */
.point__btn {
    position: relative;
    display: inline-block;
    margin-top: calc(var(--winW) * 32);
    width: calc(var(--winW) * 280);
}
.point__item-03 .point__btn {
    width: calc(var(--winW) * 260);
}
.point__item-04 .point__btn {
    width: calc(var(--winW) * 260);
}


.point__btn img {
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
    display: block;
}
.point__btn .btn-on {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; /* 初期状態ではホバー用画像を消しておく */
}
.point__btn:hover .btn-on {
    opacity: 1; /* ホバーで表示 */
}
.point__btn:hover .btn-off {
    opacity: 0; /* ホバーで通常画像を消す（クロスフェード） */
}


/* =========================================================
   ポイント：SPレイアウト
========================================================= */
@media screen and (max-width: 1024px) {
    .point {
        padding: calc(var(--winW) * 80) 0 calc(var(--winW) * 30);
    }
    .point__title {
        margin-bottom: calc(var(--winW) * 16);
        z-index: 1;
        position: relative;
    }
    .point__title-img {
        width: calc(var(--winW) * 360);
        margin-left: auto;
        margin-right: 0;
    }
    .point__inner {
        padding: 0; 
    }
    
    /* ▼ PC用の巨大な固定幅や余白をSP用にリセット */
    .point__item {
        width: 100% !important;      /* PCの1000px以上の指定をリセット */
        margin-left: 0 !important;   /* PCのマイナスマージンをリセット */
        margin-bottom: calc(var(--winW) * 69);
    }
    .point__item-01 {
        margin-bottom: calc(var(--winW) * 44);
    }
    .point__item-02 {
        margin-bottom: calc(var(--winW) * 188);
    }
    .point__item-03 {
        margin-bottom: calc(var(--winW) * 99);
    }
    

    /* SP：flex-directionを縦積みで統一（偶数番目の反転も解除） */
    .point__content,
    .point__item:nth-child(even) .point__content {
        flex-direction: column !important; 
        column-gap: 0 !important;    /* PCのgapをリセット */
    }
    
    .point__img-wrap {
        width: 100% !important;      /* PCの固定幅をリセット */
        margin-bottom: calc(var(--winW) * 0);
        position: relative;
        z-index: 2;
        text-align: center;          /* 画像を中央寄せ */
    }
    .point__item-03 .point__img-wrap {
        margin-bottom: calc(var(--winW) * 15);
    }


    /* メイン画像（少し小さくして余白を持たせる） */
    .point__img {
        width: calc(var(--winW) * 280); /* Figmaに合わせて適宜調整 */
        margin: 0 auto;
    }
    .point__item-01 .point__img {
        width: calc(var(--winW) * 328);
        margin-left: 0;
        margin-right: auto;
    }
    .point__item-02 .point__img {
        width: calc(var(--winW) * 357);
        margin-left: auto;
        margin-right: 0;
    }
    .point__item-03 .point__img {
        width: calc(var(--winW) * 334);
        margin-left: calc(var(--winW) * 21);
        margin-right: auto;
    }
    .point__item-04 .point__img {
        width: calc(var(--winW) * 327);
        margin-left: auto;
        margin-right: 0;
    }

    /* Point2 の右下にある装飾画像（家・犬など）のSP調整 */
    .point__item-02 .point__other_img {
        width: calc(var(--winW) * 145);
        bottom: calc(var(--winW) * -415);
        right: calc(var(--winW) * 38);
        pointer-events: none;
    }
    
    .point__text-wrap {
        width: 100%;
        /* SPデザインに合わせて左右に余白（インデント）を設ける */
        padding: 0 calc(var(--winW) * 40); 
        box-sizing: border-box;
    }
    .point__item-01 .point__text-wrap {
        margin-top: calc(var(--winW) * 20);
    }
    .point__item-01 .point__clock-img {
        margin-left: calc(var(--winW) * -7);
    }



    .point__item-02 .point__text-wrap {
        padding: 0;
    }
    .point__item-02 .point__text-wrap .point__clock-img {
        margin-left: calc(var(--winW) * 97);
    }
    .point__item-02 .point__text-wrap .point__desc {
        margin-left: calc(var(--winW) * 97);
    }
    .point__item-04 .point__text-wrap {
        padding: 0;
        margin-top: calc(var(--winW) * -19);
    }
    .point__item-04 .point__text-wrap .point__clock-img {
        margin-left: calc(var(--winW) * 88);
    }
    .point__item-04 .point__text-wrap .point__desc {
        margin-left: calc(var(--winW) * 88);
    }


    /* 各要素のサイズ調整 */
    .point__clock-img {
        width: calc(var(--winW) * 60);
        margin-bottom: calc(var(--winW) * 4);
    }
    .point__desc {
        font-size: calc(var(--winW) * 14);
    }
    .point__btn {
        display: block;
        margin-inline: auto;
        margin-top: calc(var(--winW) * 24);
        width: calc(var(--winW) * 241);
        position: relative;
        z-index: 1;
    }
    .point__item-02 .point__btn {
        margin-left: auto;
        margin-right: calc(var(--winW) * 43);
        width: calc(var(--winW) * 241);
    }
    .point__item-03 .point__btn {
        margin-left: 0;
        margin-right: auto;
        width: calc(var(--winW) * 241);
    }
    .point__item-04 .point__btn {
        margin-left: auto;
        margin-right: calc(var(--winW) * 43);
        width: calc(var(--winW) * 241);
    }

    .point__line--1-sp {
        top: calc(var(--winW) * 160); /* 画像やテキストの下に潜り込むように配置 */
        left: calc(var(--winW) * 220);
        width: calc(var(--winW) * 108); /* SP用のSVG幅 */
    }
    .point__line--2-sp {
        top: calc(var(--winW) * 200); /* 画像やテキストの下に潜り込むように配置 */
        left: calc(var(--winW) * 20);
        width: calc(var(--winW) * 165); /* SP用のSVG幅 */
    }
    .point__line--3-sp {
        top: calc(var(--winW) * 188); /* 画像やテキストの下に潜り込むように配置 */
        left: calc(var(--winW) * 166);
        width: calc(var(--winW) * 177); /* SP用のSVG幅 */
    }

}

/* =========================================================
   SVGラインの配置
========================================================= */
.point__line {
    position: absolute;
    /* .point__item の基準点から絶対配置で自由な位置に置く */
    z-index: 0;
}
.point__line svg {
    width: 100%;
    height: auto;
    /* ▼ 追加：Safariで線の端が途切れたり突然消えたりするのを防ぐ */
    overflow: visible;
}

/* 各線の個別位置調整（Figmaを見ながら数値を合わせます） */
.point__line--1 {
    top: calc(var(--winW) * 310);
    left: calc(var(--winW) * -18);
    width: calc(var(--winW) * 356); /* SVGのwidthに合わせる */
}
.point__line--2 {
    top: calc(var(--winW) * 355);
    left: calc(var(--winW) * 462);
    width: calc(var(--winW) * 436); /* SVGのwidthに合わせる */
}
.point__line--3 {
    top: calc(var(--winW) * 367);
    left: calc(var(--winW) * 231);
    width: calc(var(--winW) * 209); /* SVGのwidthに合わせる */
}

.point__desc .long {
    transform: scaleX(2);
    display:inline-block;
    padding-inline: 0.5em;
}

/* =========================================================
   リンク セクション（レイアウトベース）
========================================================= */
.links {
    background:#EFEEEE;
    width: 100%;
    padding: calc(var(--winW) * 70) 0;
}
.links__content {
    width: calc(var(--winW) * 1240);
    margin:0 auto;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: calc(var(--winW) * 40);
}
.links__item {
    background:#fff;
    padding: calc(var(--winW) * 10);
    border-radius: calc(var(--winW) * 10);
    width: calc(var(--winW) * 800);
    text-align:center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ▼ 修正：画像エリア（角丸を上部のみ適用） */
.links__dealers-map-img,
.links__webcatalog-img {
    width: 100%;
    height: auto;
    border-radius: calc(var(--winW) * 10) calc(var(--winW) * 10) 0 0; /* 上部のみ角丸 */
}

/* ▼ 修正：タイトルのスタイル（共通化） */
.links__dealers-title,
.links__webcatalog-logo-jp {
    color: #555555; /* 黒文字に変更 */
    font-size: calc(var(--winW) * 18); /* Figmaに合わせて調整してください */
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-top: calc(var(--winW) * 30);
    margin-bottom: calc(var(--winW) * 20);
}

.links__webcatalog-logo {
    width: calc(var(--winW) * 233);
    margin-top: calc(var(--winW) * 30);
    margin-bottom: calc(var(--winW) * 10);
}

/* タイトルとロゴの余白微調整用 */
.links__webcatalog-logo-jp {
    margin-top: 0;
    font-size: calc(var(--winW) * 14); /* 既存のサイズを維持 */
}

/* ▼ 修正：ボタンのスタイル（共通化してピンク背景に変更） */
.links__dealers-btn,
.links__webcatalog-btn {
    display:block;
    width: calc(var(--winW) * 300);
    padding: calc(var(--winW) * 18);
    border-radius: calc(var(--winW) * 30);
    color: #fff;
    font-size: calc(var(--winW) * 14);
    letter-spacing: calc(var(--winW) * 1.4);
    background: #DD90B1; /* ピンク背景 */
    border: calc(var(--winW) * 2) solid #DD90B1;
    margin-bottom: calc(var(--winW) * 19);
    margin-top: auto; /* ボタンを一番下に押し下げる（高さが違っても揃うように） */
    transition: 0.3s ease;
    text-decoration: none;
}

.links__dealers-btn:hover,
.links__webcatalog-btn:hover {
    background: #fff;
    color: #DD90B1;
}

/* =========================================================
   リンク：よく比較されているクルマ
========================================================= */
.links__compare {
    width: calc(var(--winW) * 1240); /* 上のカード群と同じ幅 */
    margin: calc(var(--winW) * 80) auto 0; /* 上のカードとの余白 */
}

.links__compare-title {
    text-align: center;
    color: #DD90B1;
    font-size: calc(var(--winW) * 24); /* タイトルサイズ */
    letter-spacing: 0.1em;
    margin-bottom: calc(var(--winW) * 40);
}

.links__compare-list {
    display: flex;
    justify-content: space-between;
    gap: calc(var(--winW) * 40); /* カード間の余白 */
}

.links__compare-item {
    background: #ffffff;
    border-radius: calc(var(--winW) * 10);
    width: 100%; /* flexで等分されます */
    display: flex;
    align-items: center;
    padding: 10px; /* カード内の余白 */
    gap: calc(var(--winW) * 40); /* 画像とテキストの間の余白 */
}

.links__compare-img-wrap {
    width: 50%; /* 左半分の割合 */
    border-radius: calc(var(--winW) * 10) 0 0 calc(var(--winW) * 10);
    overflow: hidden;
}

.links__compare-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

.links__compare-info {
    width: 50%; /* 右半分の割合 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.links__compare-name {
    font-size: calc(var(--winW) * 28);
    letter-spacing: 0.1em;
    color: #000;
    margin-bottom: calc(var(--winW) * 15);
}

.links__compare-btn {
    display: inline-block;
    width: 100%;
    max-width: calc(var(--winW) * 200); /* ボタンの最大幅 */
    padding: calc(var(--winW) * 12) 0;
    text-align: center;
    border-radius: calc(var(--winW) * 30);
    border: calc(var(--winW) * 2) solid #7E7E7E; /* グレーの枠線 */
    color: #7E7E7E;
    font-size: calc(var(--winW) * 12);
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: 0.3s ease;
}

/* ホバーで色を反転 */
.links__compare-btn:hover {
    background: #7E7E7E;
    color: #ffffff;
}

/* =========================================================
   リンク：SPレイアウト
========================================================= */
@media screen and (max-width: 1024px) {
    .links {
        padding: calc(var(--winW) * 40) calc(var(--winW) * 20);
    }
    .links__content {
        width: 100%;
        margin: 0 auto;
        flex-direction: column;
        gap: calc(var(--winW) * 20);
        align-items: center;
    }
    .links__item {
        padding: calc(var(--winW) * 10);
        border-radius: calc(var(--winW) * 10);
        width: 100%;
        text-align:center;
    }

    .links__dealers-title,
    .links__webcatalog-logo-jp {
        font-size: calc(var(--winW) * 14);
        margin-top: calc(var(--winW) * 20);
        margin-bottom: calc(var(--winW) * 15);
    }
    
    .links__webcatalog-logo {
        width: calc(var(--winW) * 167);
        margin-top: calc(var(--winW) * 28);
        margin-bottom: calc(var(--winW) * 5);
    }

    .links__webcatalog-logo-jp {
        margin-top: 0;
        font-size: calc(var(--winW) * 12);
    }

    .links__dealers-btn,
    .links__webcatalog-btn {
        width: calc(var(--winW) * 255);
        padding: calc(var(--winW) * 17);
        border-radius: calc(var(--winW) * 30);
        font-size: calc(var(--winW) * 13);
        margin-bottom: calc(var(--winW) * 15);
    }

    .links__compare {
        width: 100%;
        margin-top: calc(var(--winW) * 60);
    }
    
    .links__compare-title {
        font-size: calc(var(--winW) * 18);
        margin-bottom: calc(var(--winW) * 30);
    }
    
    .links__compare-list {
        flex-direction: column; /* 縦積みに変更 */
        gap: calc(var(--winW) * 20);
    }
    
    .links__compare-item {
        padding: 10px; /* カード内の余白 */
        padding-right: 18px;
        gap: 16px;
    }
    
    .links__compare-name {
        font-size: calc(var(--winW) * 20);
        margin-bottom: calc(var(--winW) * 10);
    }
    
    .links__compare-btn {
        max-width: 100%;
        padding: calc(var(--winW) * 8) 0;
        border: calc(var(--winW) * 2) solid #888888;
        font-size: calc(var(--winW) * 11);
    }

    .links__compare-img-wrap img {
        transform: scale(1.1);
        transform-origin: center center; 
    }

}



/* =========================================================
   LINEUP セクション
========================================================= */
.lineup {
    position: relative;
    width: 100%;
    padding-top: 0; 
    padding-bottom: calc(var(--winW) * 100);
    z-index: 1;
/*
    overflow-x: hidden;
*/
}

/* 背景のピンクのアーチ（CSSで描画） */
.lineup::before {
    content: "";
    position: absolute;
    /* アーチの頂点となる高さ（Figmaに合わせて調整） */
    top: calc(var(--winW) * 619); 
    /* 画面より少し広げてカーブを緩やかにする */
    left: -10vw; 
    width: 120vw; 
    /* 下まで背景を伸ばす */
    background-color: #DD90B1; /* ピンク背景色 */
    bottom: 0;
    /* 上の左右だけ角丸にして楕円のアーチを作る */
    /* 数値を大きくするほどカーブが強くなります */
    border-radius: 50% 50% 0 0 / calc(var(--winW) * 100) calc(var(--winW) * 100) 0 0;
    z-index: 0;
}

/* 街並みのイラスト */
.lineup__bg-illust {
    position: absolute;
    /* アーチの少し上に乗るように配置 */
    top: calc(var(--winW) * 442); 
    left: 50%;
    transform: translateX(-50%); /* 左右中央揃え */
    width: calc(var(--winW) * 1600); /* イラストの幅（Figmaに合わせて調整） */
    z-index: -1;
    pointer-events: none; /* クリックの邪魔をしないように */
}
.lineup__bg-illust img {
    width: 100%;
    height: auto;
}

/* コンテンツエリア */
.lineup__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: calc(var(--winW) * 1000);
    margin: 0 auto;
}

/* タイトル */
.lineup__title {
    text-align: center;
    margin-bottom: calc(var(--winW) * 52);
    position: relative;
    z-index: 2;
}
.lineup__title-img {
    width: calc(var(--winW) * 838);
    margin: 0 auto;
}

/* 車種リストの親枠（PCは横並び） */
.lineup__cars {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* 車の底辺を揃える */
    gap: calc(var(--winW) * 10); /* 車と車の間の余白 */
    position: relative;
    z-index: 2;
}

/* 各車種のブロック */
.lineup__car {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(var(--winW) * 450); /* ブロックの幅 */
}

/* 車種名テキスト */
.lineup__car-name {
    color: #DD90B1; /* 基本はピンク色 */
    font-size: calc(var(--winW) * 24);
    letter-spacing: 0.1em;
    margin-bottom: calc(var(--winW) * -31);
    font-weight: normal;
    margin-left: 1em;
}
.lineup__car-name .small {
    font-size: 0.6em; /* （2WD）の部分だけ少し小さくする */
    margin-left: -0.3em;
}

/* 車両画像 */
.lineup__car-img-wrap {
    width: 100%;
    margin-bottom: calc(var(--winW) * -4);
}
.lineup__car-img {
    width: 100%;
    height: auto;
}

/* ボタン */
.lineup__btn {
    position: relative;
    display: block;
    width: calc(var(--winW) * 300); /* ボタンの幅 */
}
.lineup__btn img {
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
    display: block;
}
.lineup__btn .btn-on {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; 
}
.lineup__btn:hover .btn-on {
    opacity: 1; 
}
.lineup__btn:hover .btn-off {
    opacity: 0; 
}


/* =========================================================
   LINEUP：SPレイアウト
========================================================= */
@media screen and (max-width: 1024px) {
    .lineup {
        padding-top: 0;
    }
    
    /* SP時はアーチのカーブを少し変えるなど微調整 */
    .lineup::before {
        top: calc(var(--winW) * 388); 
        border-radius: 50% 50% 0 0 / calc(var(--winW) * 25) calc(var(--winW) * 25) 0 0;
    }

    .lineup__bg-illust {
        top: calc(var(--winW) * 321);
        width: calc(var(--winW) * 375); 
        left: 50%;
    }
    .lineup__title {
        margin-bottom: calc(var(--winW) * 43);
    }
    .lineup__title-img {
        width: calc(var(--winW) * 360); 
        margin-right: 0;
    }

    /* 車種リスト（SPは縦並び） */
    .lineup__cars {
        flex-direction: column; /* 縦積みに変更 */
        align-items: center;
        gap: calc(var(--winW) * 48);
    }

    .lineup__car {
        width: calc(var(--winW) * 300); /* SPでのブロック幅 */
    }

    .lineup__car-name {
        font-size: calc(var(--winW) * 20);
        margin-bottom: calc(var(--winW) * -18);
    }

    /* ★SPレイアウトの時だけ、「S」の文字色を白に変更する */
    .lineup__car-name--s {
        color: #ffffff;
    }

    .lineup__car-img-wrap {
        margin-bottom: calc(var(--winW) * 0);
    }

    .lineup__btn {
        width: calc(var(--winW) * 250);
    }
}

/* =========================================================
   ハンバーガーメニューボタン
========================================================= */
.gnav-btn {
    position: fixed;
    top: 0;
    right: 0;
    /* PCサイズ */
    width: calc(var(--winW) * 104);
    height: calc(var(--winW) * 81);
    /* 白の10%透過 */
    background-color: rgba(255, 255, 255, 0.1);
    /* 背景のぼかし効果（グラスモーフィズム） */
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px); /* Safari対応 */
    border: none;
    padding: 0;
    cursor: pointer;
 
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
 
    /* モーダル(10000)より下、他のコンテンツより上になるように設定 */
    z-index: 9000; 
    
    /* 2本の線を中央に配置 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(var(--winW) * 12); /* 線と線の間隔 */
    transition: background-color 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

/* ▼ 追加：スクロールして表示される時のクラス */
.gnav-btn.is-show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* クリックできるように戻す */
}

/* ホバー時に少しだけ明るくする演出 */
.gnav-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* 中央のピンクの線 */
.gnav-btn__line {
    display: block;
    width: calc(var(--winW) * 44); /* 線の長さ */
    height: calc(var(--winW) * 4); /* 線の太さ */
    background-color: #DD90B1;
    border-radius: calc(var(--winW) * 4); /* 角丸 */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* =========================================================
   ハンバーガーメニューボタン：SPレイアウト
========================================================= */
@media screen and (max-width: 1024px) {
    .gnav-btn {
        /* ▼ 追加：ボタンが大きくなりすぎないための専用ストッパー変数 */
        --btn-scale: min(var(--winW), 90px / 64);

        /* ▼ 修正：すべて var(--winW) から var(--btn-scale) に変更 */
        width: calc(var(--btn-scale) * 64);
        height: calc(var(--btn-scale) * 50);
        gap: calc(var(--btn-scale) * 8);
    }
    .gnav-btn__line {
        /* ▼ 修正：中の線も一緒に連動してストップさせます */
        width: calc(var(--btn-scale) * 26);
        height: calc(var(--btn-scale) * 2.5);
    }
}

/* =========================================================
   展開ナビゲーションメニュー本体
========================================================= */
.gnav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 8000;
    
    /* ▼ 修正：opacityを削除し、visibilityだけで表示/非表示を切り替える */
    visibility: hidden;
    transition: visibility 0.5s; /* 閉じる時のためにパネルの退場(0.5s)を待つ */
}
.gnav.is-active {
    visibility: visible;
}

/* ぼかし背景 */
.gnav__bg {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* ▼ 修正：初期状態は「色も完全に透明」「ぼかしも0」にしておく */
    background-color: rgba(255, 255, 255, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    cursor: pointer;
    
    /* ▼ 修正：色とぼかしの両方にアニメーションをかける */
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease;
}
/* ▼ 追加：メニューが開いた（is-active）時に、ぼかしを 40px まで上げる */
.gnav.is-active .gnav__bg {
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
}


/* 白いパネル */
.gnav__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(var(--winW) * 520); /* PC版のパネル幅（Figmaに合わせて調整） */
    height: 100%;
    background-color: #ffffff;
    /* 初期状態は画面の右外に隠しておく */
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* 中身が多い場合はスクロールできるようにする */
    overflow-y: auto;
    padding: calc(var(--winW) * 100) calc(var(--winW) * 60) calc(var(--winW) * 60);
    display: flex;
    flex-direction: column;
}
.gnav.is-active .gnav__panel {
    transform: translateX(0); /* 右からスライドイン */
}

/* メニュー中身のテキスト・装飾 */
.gnav__title {
    color: #46BAF3;
    font-size: calc(var(--winW) * 16);
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-bottom: calc(var(--winW) * 40);
}
.gnav__list {
    list-style: none;
    padding: 0;
    margin: 0 0 auto 0; /* 下部コンテンツを一番下に押し下げる */
    border-top: 1px dotted #DD90B1;
}
.gnav__item {
    border-bottom: 1px dotted #DD90B1;
}
.gnav__link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding: calc(var(--winW) * 30) 0;
    color: #DD90B1;
    text-decoration: none;
    transition: color 0.3s ease;
}
/* ホバー時にテキストを水色にする */
.gnav__link:hover {
    color: #46BAF3;
}

.gnav__link-sub {
    font-size: calc(var(--winW) * 12);
    margin-bottom: calc(var(--winW) * 8);
}
.gnav__link-main {
    font-size: calc(var(--winW) * 20);
    font-weight: bold;
    letter-spacing: 0.1em;
}
.gnav__link-arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: calc(var(--winW) * 67);
    transition: filter 0.3s ease;
}

/* ▼ 追加：ホバー時に矢印アイコンだけを filter で水色（#46BAF3）に変換 */
.gnav__link:hover .gnav__link-arrow {
    filter: brightness(0) saturate(100%) invert(60%) sepia(34%) saturate(1478%) hue-rotate(166deg) brightness(101%) contrast(95%);
}

/* 下部コンテンツ（車・ロゴ・ボタン） */
.gnav__bottom {
    margin-top: calc(var(--winW) * 50);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.gnav__car-img {
    width: 100%;
    margin-bottom: calc(var(--winW) * 20);
    border-radius: calc(var(--winW) * 10);
}
.gnav__logo-img {
    width: calc(var(--winW) * 200);
    margin-bottom: calc(var(--winW) * 20);
}
.gnav__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: calc(var(--winW) * 16);
    background-color: #DD90B1;
    color: #ffffff;
    border:solid 1px #DD90B1;
    border-radius: calc(var(--winW) * 30);
    font-size: calc(var(--winW) * 16);
    text-decoration: none;
    letter-spacing: 0.1em;
    transition: 0.3s ease;
}
.gnav__btn:hover {
    background-color: #ffffff;
    color: #DD90B1;
}

/* =========================================================
   展開ナビゲーション：SPレイアウト
========================================================= */
@media screen and (max-width: 1024px) {
    .gnav__panel {
        /* SP幅(375)から左のピンク(44)を引いた幅 */
        width: calc(100vw - calc(var(--winW) * 44)); 
        padding: calc(var(--winW) * 80) calc(var(--winW) * 24) calc(var(--winW) * 40);
    }
    
    .gnav__title {
        font-size: calc(var(--winW) * 12);
        margin-bottom: calc(var(--winW) * 24);
    }
    .gnav__link {
        padding: calc(var(--winW) * 20) 0;
    }
    .gnav__link-sub {
        font-size: calc(var(--winW) * 10);
        margin-bottom: calc(var(--winW) * 4);
    }
    .gnav__link-main {
        font-size: calc(var(--winW) * 16);
    }
    .gnav__link-arrow {
        width: calc(var(--winW) * 46);
    }
    .gnav__bottom {
        margin-top: calc(var(--winW) * 30);
    }
    .gnav__logo-img {
        width: calc(var(--winW) * 160);
    }
    .gnav__btn {
        padding: calc(var(--winW) * 12);
        font-size: calc(var(--winW) * 14);
    }
}

/* =========================================================
   ナビゲーション：パネル内の閉じるボタン（×）
========================================================= */
.gnav__close-btn {
    position: absolute;
    top: calc(var(--winW) * 40); /* 上からの位置 */
    right: calc(var(--winW) * 40); /* 右からの位置 */
    width: calc(var(--winW) * 44); /* クロスの幅 */
    height: calc(var(--winW) * 44);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 2;
    transition: opacity 0.3s ease;
}
.gnav__close-btn:hover {
    opacity: 0.6;
}

/* 水色の2本の線でクロスを作る */
.gnav__close-btn span {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: calc(var(--winW) * 2); /* 線の太さ（細めに設定） */
    background-color: #00A0E9; /* 水色 */
    border-radius: calc(var(--winW) * 2);
}
.gnav__close-btn span:nth-child(1) {
    transform: translateY(-50%) rotate(30deg);
}
.gnav__close-btn span:nth-child(2) {
    transform: translateY(-50%) rotate(-30deg);
}

/* SPレイアウト時の調整 */
@media screen and (max-width: 1024px) {
    .gnav__close-btn {
        top: calc(var(--winW) * 20);
        right: calc(var(--winW) * 20);
        width: calc(var(--winW) * 24);
        height: calc(var(--winW) * 24);
    }
}

/* =========================================================
   POINTセクション：花びら配置
========================================================= */
.petal-point-pc-01 { top: 10%; right: 11%; width: calc(var(--winW) * 105); transform: rotate(282deg); filter: blur(7px); }
.petal-point-pc-02 { top: 12%; right: 17%; width: calc(var(--winW) * 30); transform: rotate(75deg); filter: blur(2px); }
.petal-point-pc-03 { top: 14%; left: 8%; width: calc(var(--winW) * 69); transform: rotate(0deg); filter: blur(5px); }
.petal-point-pc-04 { top: 23%; left: -1%; width: calc(var(--winW) * 141); transform: rotate(107deg); filter: blur(11px); }
.petal-point-pc-05 { top: 38%; right: 41%; width: calc(var(--winW) * 34); transform: rotate(274deg); filter: blur(2px); }
.petal-point-pc-06 { top: 30%; right: 12%; width: calc(var(--winW) * 174); transform: rotate(270deg); filter: blur(11px); }
.petal-point-pc-07 { top: 87%; right: 10%; width: calc(var(--winW) * 134); transform: rotate(93deg); filter: blur(11px); }
.petal-point-pc-08 { top: 91%; left: 4%; width: calc(var(--winW) * 105); transform: rotate(274deg); filter: blur(7px); }
.petal-point-pc-09 { top: 89%; left: 3%; width: calc(var(--winW) * 63); transform: rotate(91deg); filter: blur(5px); }

.petal-point-sp-01 { top: 8%; left: -1%; width: calc(var(--winW) * 73); transform: rotate(272deg); filter: blur(7px); }
.petal-point-sp-02 { top: 13%; right: 4%; width: calc(var(--winW) * 52); transform: rotate(266deg); filter: blur(5px); }
.petal-point-sp-03 { top: 16%; right: 18%; width: calc(var(--winW) * 15); transform: rotate(80deg); filter: blur(2px); }
.petal-point-sp-04 { top: 34%; right: 10%; width: calc(var(--winW) * 32); transform: rotate(85deg); filter: blur(3px); }
.petal-point-sp-05 { top: 67%; left: 5%; width: calc(var(--winW) * 45); transform: rotate(281deg); filter: blur(5px); }
.petal-point-sp-06 { top: 64%; right: 0%; width: calc(var(--winW) * 23); transform: rotate(268deg); filter: blur(1px); }
.petal-point-sp-07 { top: 91%; left: -8%; width: calc(var(--winW) * 65); transform: rotate(270deg); filter: blur(7px); }
.petal-point-sp-08 { top: 48%; left: -2%; width: calc(var(--winW) * 32); transform: rotate(120deg); filter: blur(3px); }

/* =========================================================
   LINEUPセクション：花びら配置
========================================================= */
.petal-lineup-pc-01 { top: 108%; right: 16%; width: calc(var(--winW) * 77); transform: rotate(-79deg); filter: blur(7px); }
.petal-lineup-pc-02 { top: 47%; left: 18%; width: calc(var(--winW) * 46); transform: rotate(-79deg); filter: blur(4px); }
.petal-lineup-pc-03 { top: 43%; left: 41%; width: calc(var(--winW) * 30); transform: rotate(87deg); filter: blur(2px); }
.petal-lineup-pc-04 { top: 79%; right: 9%; width: calc(var(--winW) * 83); transform: rotate(266deg); filter: blur(7px); }
.petal-lineup-pc-05 { top: 74%; right: 15%; width: calc(var(--winW) * 30); transform: rotate(87deg); filter: blur(3px); }
.petal-lineup-pc-06 { top: 108%; left: 12%; width: calc(var(--winW) * 69); transform: rotate(103deg); filter: blur(7px); }

.petal-lineup-sp-01 { top: 27%; left: -3%; width: calc(var(--winW) * 54); transform: rotate(268deg); filter: blur(5px); }
.petal-lineup-sp-02 { top: 18%; left: 38%; width: calc(var(--winW) * 23); transform: rotate(266deg); filter: blur(1px); }
.petal-lineup-sp-03 { top: 22%; left: 55%; width: calc(var(--winW) * 35); transform: rotate(257deg); filter: blur(1px); }
.petal-lineup-sp-04 { top: 22%; left: 42%; width: calc(var(--winW) * 23); transform: rotate(70deg); filter: blur(2px); }
.petal-lineup-sp-05 { top: 50%; right: -4%; width: calc(var(--winW) * 75); transform: rotate(276deg); filter: blur(7px); }
.petal-lineup-sp-06 { top: 38%; left: 17%; width: calc(var(--winW) * 14); transform: rotate(265deg); filter: blur(1px); }
.petal-lineup-sp-07 { top: 61%; right: 6%; width: calc(var(--winW) * 19); transform: rotate(90deg); filter: blur(2px); }
.petal-lineup-sp-08 { top: 80%; left: -4%; width: calc(var(--winW) * 39); transform: rotate(98deg); filter: blur(3px); }
.petal-lineup-sp-09 { top: 120%; right: 13%; width: calc(var(--winW) * 39); transform: rotate(270deg); filter: blur(3px); }


/* =========================================================
   追従ナビゲーション（WEBカタログ / 販売店検索）
========================================================= */
.sticky-nav {
    position: fixed;
    z-index: 8500;
    pointer-events: none;
    top: 50%;
    right: 0;
    transform: translate(100%, -50%); 
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
    gap: calc(var(--winW) * 8); 
}

.sticky-nav.is-show {
    transform: translate(0, -50%);
    pointer-events: auto;
}

/* ▼ 変更：aタグ（リンク要素）自体にグラスモーフィズムと形を指定する */
.sticky-nav__link {
    display: block;
    line-height: 0; 
    transition: opacity 0.3s ease;
    
    /* FL指定のスタイルをここに適用 */
    background: rgba(255, 255, 255, 0.80);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); /* Safari対策 */
    border-radius: calc(var(--winW) * 10) 0 0 calc(var(--winW) * 10); 
    
    overflow: hidden; /* はみ出し防止 */
}

/* 画像の基本設定（PCサイズ） */
.sticky-nav img {
    width: calc(var(--winW) * 48); /* PCボタンの幅 */
    height: auto;
    display: block;
    /* 背景色や影はここから削除（親のaタグに任せる） */
}

/* PC：ホバー演出 */
@media screen and (min-width: 1025px) {
    .sticky-nav__link:hover {
        opacity: 0.7; 
    }
}

/* SPレイアウト時の調整 */
@media screen and (max-width: 1024px) {
    .sticky-nav {
        gap: calc(var(--winW) * 6); 
    }
    .sticky-nav img {
        width: calc(var(--winW) * 37); 
    }
    .sticky-nav__link {
        /* SPサイズ用の角丸の調整 */
        border-radius: calc(var(--winW) * 10) 0 0 calc(var(--winW) * 10); 
    }
}