@charset "UTF-8";

/* =====================================================================
   gindaco 2026_08 個別スタイル
   - コンテンツ幅: 基本 1280px / ブレークポイント: 1400px
   - 変換規則:
       SP    (～780px)      : 375px 基準  → calc(px / 375 * 100vw)
       TB&PC (781～1400px)  : 1400px 基準 → calc(px / 1400 * 100vw)
       PC    (1401px～)     : px そのまま（等倍固定）
   - KYV は特別設定
   ===================================================================== */


/* =====================================================================
   共通背景グループ（外側ラッパー）
     COMMON_bg1 : NAV + CAL
     COMMON_bg2 : CT0～CT3
     COMMON_bg3 : CT4～CT6
   ===================================================================== */

/* COMMON_bg1 -------------------------------------------- NAV+CAL（全幅背景・最大1920px＋繰り返し） */
.COMMON_bg1 {
    background-image: url(../images/aset/COM_bg1_pc.webp);
    background-repeat: repeat;
    background-position: center top;
    background-size: 1920px auto;   /* 実寸1920px。これより広い画面はタイル繰り返し */
}
@media screen and (max-width:780px) { /*SP*/
    .COMMON_bg1 {
        background-image: url(../images/aset/COM_bg1_sp.webp);
        background-size: 100% auto;  /* SPは画面幅にフィット＋縦繰り返し */
    }
}


/* COMMON_bg2 -------------------------------------------- CT0～CT3（全幅背景・最大1920px＋繰り返し） */
.COMMON_bg2 {
    background-image: url(../images/aset/CT0_00_pc.webp);
    background-repeat: repeat;
    background-position: center top;
    background-size: 1920px auto;
    padding: 0 0 10% 0;
}
@media screen and (max-width:780px) { /*SP（専用画像なし＝pc画像を幅フィット。調整用）*/
    .COMMON_bg2 {
        background-size: 100% auto;
        padding: 0 0 30% 0;
    }
}


/* COMMON_bg3 -------------------------------------------- CT4～CT6（全幅背景 CT4_01・最大1920px＋繰り返し） */
.COMMON_bg3 {
    background-image: url(../images/aset/CT4_01_pc.webp);
    background-repeat: repeat;
    background-position: center top;
    background-size: 1920px auto;
}
@media screen and (max-width:780px) { /*SP（専用画像なし＝pc画像を幅フィット。調整用）*/
    .COMMON_bg3 {
        background-size: 100% auto;
        margin: 0.1% 0 0 0;
        padding: 0 0 8.6% 0;
    }
}


/* 帯タイトル共通（.bar_ttl）------------------------------
   BAR_black.webp(68×148) を横繰り返し・高さ148px。中に *_title.webp を実サイズでセンター配置
   使用: CT0 / CT4 / CT7 / CT8 / CT9 / SNS の見出し帯 */
.bar_ttl {
    width: 100%;
    height: 148px;                                  /* PC=背景画像の実寸高さ */
    background-image: url(../images/aset/BAR_black.webp);
    background-repeat: repeat-x;
    background-position: center center;
    background-size: auto 100%;                     /* タイルの高さ=帯の高さ（帯が縮めばタイルも追従） */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* タイトルは実寸57pxを上限にアスペクト維持で内接（PC=実サイズ／狭くなると縮む） */
.bar_ttl img { display: block; width: auto; height: auto; max-height: 57px; max-width: 92%; }
@media screen and (min-width:781px) and (max-width:1400px) { /*TB&PC（1400基準でvw縮小）*/
    .bar_ttl { height: calc(148 / 1400 * 100vw); }
    .bar_ttl img { max-height: calc(57 / 1400 * 100vw); }
}
@media screen and (max-width:780px) { /*SP（375基準）※高さはPC比の半分*/
    .bar_ttl {height: calc(73 / 375 * 100vw);}      /* 148の半分 */
    .bar_ttl img { max-height: calc(28.5 / 375 * 100vw); } /* 57の半分（比率維持） */
}


/* KYV ----  ※特別設定：SP / それ以外(PC&TB共通) の2レイアウト。背景KYV_00
   画像幅は実寸からvw換算（PC=1920基準 / SP=750基準=2x想定）。05〜11の位置は仮 */
#KYV { position: relative; width: 100%; background-repeat: no-repeat; background-position: center top; overflow: hidden;}
#KYV picture { display: block; }
#KYV picture img { display: block; width: 100%; height: auto; }
#KYV [class^="KYV_"] { position: absolute; } /* 全要素 absolute（位置は各MQで・仮） */
#KYV .KYV_01, #KYV .KYV_02, #KYV .KYV_03, #KYV .KYV_04 { z-index: 2; } /* タイトル群は前面 */
#KYV .KYV_02 { display: none; } /* 【公開後に復活予定】一時的に非表示。戻すときはこの行を削除 */

@media screen and (min-width:781px) , print { /* PC&TB 共通（1920基準） */
    #KYV { aspect-ratio: 1920 / 800; background-image: url(../images/aset/KYV_00_pc.webp); background-size: cover; }
    #KYV .KYV_01 {width: 27.68vw;left: 0;right: 0;margin-inline: auto;top: 23%;} /* 493px・仮 */
    #KYV .KYV_03 {width: 36.53vw;left: 0;right: 0;margin-inline: auto;top: 47%;} /* 663px・仮 */
    #KYV .KYV_02 {width: 30.21vw;left: 0;right: 0;margin-inline: auto;top: 69%;} /* 580px・仮 */
    #KYV .KYV_04 {width: 37.40vw;left: 0;right: 0;margin-inline: auto;top: 81%;} /* 718px・仮 */
    #KYV .KYV_05 {width: 9.27vw;right: 2.8%;bottom: 6.5%;z-index: 2;} /* 178px */
    #KYV .KYV_06 {width: 14.32vw;left: 1.8%;bottom: -21%;}  /* 275px */
    #KYV .KYV_07 {width: 16.30vw;left: 16.7%;bottom: -31%; z-index: 1;}  /* 313px */
    #KYV .KYV_08 {width: 20.83vw;left: 11.5%;bottom: -20%;}  /* 400px */
    #KYV .KYV_09 {width: 24.64vw;right: 11%;bottom: -38%; z-index: 0;}  /* 473px */
    #KYV .KYV_10 {width: 26.20vw;right: 3.7%;bottom: -51.5%; z-index: 1;}  /* 503px */
    #KYV .KYV_11 {width: 33.91vw;right: -3.5%;bottom: -39%;}  /* 651px */
}
@media screen and (max-width:780px) { /* SP（750基準=2x） */
    #KYV {aspect-ratio: 750 / 750;background-image: url(../images/aset/KYV_00_sp.webp);background-size: cover;}
    #KYV .KYV_01 {width: 45.23vw;left: 0;right: 0;margin-inline: auto;top: 19.9%;}
    #KYV .KYV_03 {width: 36.1vw;left: 0;right: 0;margin-inline: auto;top: 35.8%;}
    #KYV .KYV_02 { width: 52vw;    left: 0; right: 0; margin-inline: auto; top: 50%; }
    #KYV .KYV_04 {width: 69.6vw;left: 0;right: 0;margin-inline: auto;top: 79%;}
    #KYV .KYV_05 {width: 23.73vw;right: 4.2%;bottom: 3.9%;z-index: 2;}
    #KYV .KYV_06 {width: 23.6vw;left: 3.3%;bottom: 11.1%;z-index: 1;}
    #KYV .KYV_07 {width: 26.4vw;left: 2.5%;bottom: -24.2%;z-index: 1;}
    #KYV .KYV_08 {width: 32.27vw;left: 19.4%;bottom: 21.4%;z-index: 0;}
    #KYV .KYV_09 {width: 38.93vw;right: 10%;bottom: 9%;}
    #KYV .KYV_10 {width: 41.47vw;right: -7%;bottom: -31.6%;z-index: 1;}
    #KYV .KYV_11 {width: 54.4vw;right: -6.9%;bottom: -1.6%;z-index: 0;}
}


/* NAV ---- 8ボタンを flex + gap で並べる（画像は実寸） */
#NAV .NAV_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 1.1%;          /* 行間=20px固定 / 列間=1.1%（幅追従）。
                                ※行gapは%だと高さauto基準で0に潰れるためpx。列gapのみ%で4×2の折り返し崩れを防ぐ */
    margin: 0 auto;
}
#NAV .NAV_link { display: block; width: 24.14%; transition: opacity 0.3s; } /* 309px */
#NAV .NAV_link:hover { opacity: 0.5; }
#NAV .NAV_link img { display: block; width: 100%; height: auto; }
@media screen and (max-width:780px) { /*SP（375基準・2列）*/
    #NAV {padding: 5.2% 0 0 0;}                       /* SP用セクション余白（調整用） */
    #NAV .NAV_wrap { width: 100%; gap: 2.5vw 3.3%; }  /* 行間 列間（%＝幅追従） */
    #NAV .NAV_link { width: 42.9%; }                  /* SP 2列 */
}
@media screen and (min-width:781px) and (max-width:1400px) { /*TB&PC*/
    #NAV .NAV_wrap { width: calc(1280 / 1400 * 100vw); }
    #NAV{padding: 2.2% 0 0 0;}
}
@media screen and (min-width:1401px) , print { /*PC*/
    #NAV .NAV_wrap { width: 1280px; }
    #NAV{padding: 2.2% 0 0 0;}
}


/* CAL ---- 背景CAL_00 + カレンダー(CAL_01)/ボタン(CAL_02) を成り行き配置 */
#CAL .CAL_wrap {
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#CAL .CAL_01, #CAL .CAL_02 { display: block; }
#CAL .CAL_01 img, #CAL .CAL_02 img { display: block; width: 100%; }
#CAL .CAL_01 { width: 94.2%; margin-top: 4.8%; }     /* 1206/1280 */
#CAL .CAL_02 { width: 46.9%; margin-top: 3.3%; transition: opacity 0.3s; } /* 600/1280 */
#CAL .CAL_02:hover { opacity: 0.7; }

@media screen and (max-width:780px) { /*SP（375基準）*/
    #CAL {margin: 0;padding: 0 0 15.8% 0;}           /* SP用セクション余白 */
    #CAL .CAL_wrap {width: 89.3%;aspect-ratio: 670 / 1980;background-image: url(../images/aset/CAL_00_sp.webp);margin: 11% auto 0;}
    #CAL .CAL_01 {width: 94%;margin-top: 8.7%;}  /* 630/670 */
    #CAL .CAL_02 { width: 80.6%; margin-top: 6%; }  /* 540/670 */
}
@media screen and (min-width:781px) and (max-width:1400px) { /*TB&PC*/
    #CAL .CAL_wrap { width: calc(1280 / 1400 * 100vw); aspect-ratio: 1280 / 1000; background-image: url(../images/aset/CAL_00_pc.webp); }
    #CAL{margin: 4% 0 0 0;padding: 0 0 6.3% 0;}
}
@media screen and (min-width:1401px) , print { /*PC*/
    #CAL .CAL_wrap { width: 1280px; aspect-ratio: 1280 / 1000; background-image: url(../images/aset/CAL_00_pc.webp); }
    #CAL{margin: 4% 0 0 0;padding: 0 0 6.3% 0;}
}


/* CT0 ---- 帯CT0_01(全幅) + 本文CT0_02。PC=画像実寸px / TB=1400基準vw / SP=全幅 */
#CT0 picture { display: block; margin: 0 auto; }
#CT0 picture img { display: block; width: 100%; height: auto; }
#CT0 .CT0_01 { width: 100%; }   /* 帯：全幅 */
@media screen and (max-width:780px) { /*SP*/
    #CT0 .CT0_02 {width: 97.3%;margin: 5.1% auto 0;}
}
@media screen and (min-width:781px) and (max-width:1400px) { /*TB&PC*/
    #CT0 .CT0_02 { width: calc(1187 / 1400 * 100vw); margin: 5% auto 0; }
}
@media screen and (min-width:1401px) , print { /*PC*/
    #CT0 .CT0_02 {width: 1187px;margin: 5% auto 0;}   /* 本文：画像実寸px */
}


/* CT1 ---- 背景CT1_00(1280×1384) に CT1_01〜09 を絶対配置
   位置/幅は %（コンテナ基準）＝PC/TB/SP自動スケール。PC=1280pxなので%は実寸px相当。
   ※位置はFigma(1dan)由来の概算。要微調整 */
#CT1 {
    position: relative;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
}
#CT1 > picture, #CT1 > a { position: absolute; display: block; }
#CT1 > picture img, #CT1 > a img { display: block; width: 100%; height: auto; }
#CT1 .CT1_01 {left: 2.75%;top: 3.55%;width: 23.98%;}
#CT1 .CT1_02 {left: 25%;top: 1.55%;width: 21.4%;}
#CT1 .CT1_03 {left: 4.7%;top: 2.5%;width: 90.6%;}
#CT1 .CT1_04 {left: 52.1%;top: 39.7%;width: 19.1%;}
#CT1 .CT1_05 {left: 71.7%;top: 21.4%;width: 23.4%;}
#CT1 .CT1_06 {left: 3.96%;top: 56.7%;width: 66.4%;}
#CT1 .CT1_07 {left: 4.06%;top: 74%;width: 51.6%;} /* モーダル予定 */
#CT1 .CT1_08 {left: 59.1%;top: 74.8%;width: 36.1%;} /* ページ内リンク予定 */
#CT1 .CT1_09 {left: 58.5%;top: 86.4%;width: 36.7%;}
#CT1 .CT1_07, #CT1 .CT1_08 { transition: opacity 0.3s; }
#CT1 .CT1_07:hover, #CT1 .CT1_08:hover { opacity: 0.7; }

@media screen and (max-width:780px) { /*SP（背景・比率・座標すべてSP用。ベースは触らない）*/
    #CT1 { width: 100%; aspect-ratio: 750 / 2143; background-image: url(../images/aset/CT1_00_sp.webp); margin: 5% auto 0; overflow-x: clip; }
    #CT1 .CT1_01 {left: 8.75%;top: 1.25%;width: 39.38%;}
    #CT1 .CT1_02 {left: 54.7%;top: 1.15%;width: 35.7%;}
    #CT1 .CT1_03 {left: 2.7%;top: 10.5%;width: 100.6%;}
    #CT1 .CT1_04 {left: 8.7%;top: 32.3%;width: 36.9%;}
    #CT1 .CT1_05 {left: 5.7%;top: 27%;width: 89.1%;}
    #CT1 .CT1_06 {left: 4.3%;top: 54.5%;width: 91.9%;}
    #CT1 .CT1_07 {left: 5.66%;top: 72.4%;width: 89%;}
    #CT1 .CT1_08 {left: 0%;top: 99.5%;width: 100%;}
    #CT1 .CT1_09 {left: 5.96%;top: 92.3%;width: 90.4%;}
}
@media screen and (min-width:781px) and (max-width:1400px) { /*TB&PC*/
    #CT1 { width: calc(1280 / 1400 * 100vw); aspect-ratio: 1280 / 1384; background-image: url(../images/aset/CT1_00_pc.webp); margin: 5% auto 0; }
}
@media screen and (min-width:1401px) , print { /*PC*/
    #CT1 {width: 1280px;aspect-ratio: 1280 / 1384;background-image: url(../images/aset/CT1_00_pc.webp);margin: 5% auto 0;}
}


/* CT2 ---- CT1同テンプレ（弾2）。位置はCT1流用の概算・幅は各画像実寸%。要微調整 */
#CT2 { position: relative; margin: 0 auto; background-repeat: no-repeat; background-position: center top; background-size: 100% 100%; }
#CT2 > picture, #CT2 > a { position: absolute; display: block; }
#CT2 > picture img, #CT2 > a img { display: block; width: 100%; height: auto; }
#CT2 .CT2_01 {left: 4.45%;top: 4.45%;width: 20.7%;}
#CT2 .CT2_02 { left: 25%;   top: 1.55%; width: 21.4%; }
#CT2 .CT2_03 {left: 5.2%;top: 1.7%;width: 91.4%;}
#CT2 .CT2_04 { left: 52.1%; top: 39.7%; width: 19.1%; }
#CT2 .CT2_05 {left: 71.7%;top: 21.6%;width: 23.4%;}
#CT2 .CT2_06 { left: 3.96%; top: 56.7%; width: 66.25%; }
#CT2 .CT2_07 { left: 4.06%; top: 74%;   width: 51.6%; } /* モーダル予定 */
#CT2 .CT2_08 { left: 59.1%; top: 74.8%; width: 36.1%; } /* リンク予定 */
#CT2 .CT2_09 {left: 59%;top: 86.5%;width: 36.7%;}
#CT2 .CT2_07, #CT2 .CT2_08 { transition: opacity 0.3s; }
#CT2 .CT2_07:hover, #CT2 .CT2_08:hover { opacity: 0.7; }
@media screen and (max-width:780px) { /*SP（CT1と同レイアウト）*/
    #CT2 {width: 100%;aspect-ratio: 750 / 2143;background-image: url(../images/aset/CT2_00_sp.webp);margin: 23.5% 0 0 0;overflow-x: clip;}
    #CT2 .CT2_01 {left: 12.55%;top: 1.75%;width: 34.48%;}
    #CT2 .CT2_02 {left: 54.7%;top: 0.85%;width: 35.7%;}
    #CT2 .CT2_03 {left: 0.9%;top: 9.5%;width: 103.9%;}
    #CT2 .CT2_04 {left: 8.7%;top: 32.3%;width: 37.1%;}
    #CT2 .CT2_05 {left: 5.6%;top: 26.9%;width: 89.1%;}
    #CT2 .CT2_06 {left: 4.56%;top: 54.5%;width: 90.7%;}
    #CT2 .CT2_07 {left: 5.66%;top: 72.2%;width: 89%;}
    #CT2 .CT2_08 {left: 0%;top: 99.5%;width: 100%;}
    #CT2 .CT2_09 {left: 6.4%;top: 92.2%;width: 91.4%;}
}
@media screen and (min-width:781px) and (max-width:1400px) { /*TB&PC*/
    #CT2 { width: calc(1280 / 1400 * 100vw); aspect-ratio: 1280 / 1384; background-image: url(../images/aset/CT2_00_pc.webp); margin: 5% auto 0; }
}
@media screen and (min-width:1401px) , print { /*PC*/
    #CT2 {width: 1280px;aspect-ratio: 1280 / 1384;background-image: url(../images/aset/CT2_00_pc.webp);margin: 5% auto 0;}
}


/* CT3 ---- CT1同テンプレ（弾3）。位置はCT1流用の概算・幅は各画像実寸%。要微調整 */
#CT3 { position: relative; margin: 0 auto; background-repeat: no-repeat; background-position: center top; background-size: 100% 100%; }
#CT3 > picture, #CT3 > a { position: absolute; display: block; }
#CT3 > picture img, #CT3 > a img { display: block; width: 100%; height: auto; }
#CT3 .CT3_01 {left: 0.65%;top: 1.55%;width: 29.8%;}
#CT3 .CT3_02 { left: 25%;   top: 1.55%; width: 21.4%; }
#CT3 .CT3_03 {left: 4.1%;top: 4.6%;width: 91.4%;}
#CT3 .CT3_04 {left: 52.1%;top: 32.4%;width: 19.1%;}
#CT3 .CT3_10 {left: 39%;top: 51%;width: 12.5%;} /* 160px/1280・位置は要調整 */
#CT3 .CT3_05 {left: 71.7%;top: 21.4%;width: 23.4%;}
#CT3 .CT3_06 {left: 3.96%;top: 59.2%;width: 66.5%;}
#CT3 .CT3_07 { left: 4.06%; top: 74%;   width: 51.6%; } /* モーダル予定 */
#CT3 .CT3_08 { left: 59.1%; top: 74.8%; width: 36.1%; } /* リンク予定 */
#CT3 .CT3_09 {left: 58.4%;top: 86.5%;width: 36.7%;}
#CT3 .CT3_07, #CT3 .CT3_08 { transition: opacity 0.3s; }
#CT3 .CT3_07:hover, #CT3 .CT3_08:hover { opacity: 0.7; }
@media screen and (max-width:780px) { /*SP（CT1と同レイアウト）*/
    #CT3 {width: 100%;aspect-ratio: 750 / 2143;background-image: url(../images/aset/CT3_00_sp.webp);margin: 23% 0 0 0;overflow-x: clip;}
    #CT3 .CT3_01 {left: 1.95%;top: 1.35%;width: 55.48%;}
    #CT3 .CT3_02 {left: 58.7%;top: 1.85%;width: 35.7%;}
    #CT3 .CT3_03 {left: -0.3%;top: 11.1%;width: 104.7%;}
    #CT3 .CT3_04 {left: 8.3%;top: 21.9%;width: 86.6%;}
    #CT3 .CT3_10 {left: 17%;top: 31.3%;width: 21.87%;} /* 82px/375・位置は要調整 */
    #CT3 .CT3_05 {left: 5.7%;top: 31.3%;width: 89.1%;}
    #CT3 .CT3_06 {left: 4.56%;top: 59%;width: 90.9%;}
    #CT3 .CT3_07 {left: 5.66%;top: 73.3%;width: 89%;}
    #CT3 .CT3_08 {left: 0%;top: 99.5%;width: 100%;}
    #CT3 .CT3_09 {left: 4.7%;top: 92.8%;width: 91.6%;}
}
@media screen and (min-width:781px) and (max-width:1400px) { /*TB&PC*/
    #CT3 { width: calc(1280 / 1400 * 100vw); aspect-ratio: 1280 / 1384; background-image: url(../images/aset/CT3_00_pc.webp); margin: 5% auto 0; }
}
@media screen and (min-width:1401px) , print { /*PC*/
    #CT3 {width: 1280px;aspect-ratio: 1280 / 1384;background-image: url(../images/aset/CT3_00_pc.webp);margin: 5% auto 0;}
}


/* CT4_00 帯：全幅（#CT4の外） */
.COMMON_bg3 > .CT4_00 { display: block; }
.COMMON_bg3 > .CT4_00 img { display: block; width: 100%; height: auto; }

/* CT4 ---- 1280px幅・画像は実寸（成り行き縦積みセンター）。CT4_05=外部リンク */
#CT4 { margin: 0 auto; }
#CT4 picture, #CT4 > a {display: block;/* margin: 4.3% auto 0; */}
#CT4 picture img, #CT4 > a img { display: block; width: 100%; height: auto; }
#CT4 .CT4_02 {width: 88.05%;margin: 6.2% auto 0;} /* 1127px */
#CT4 .CT4_03 {width: 100%;margin: 1.6% auto 0;}   /* 1280px */
#CT4 .CT4_04 {width: 100%;margin: 4% auto 0;}   /* 1280px */
#CT4 .CT4_05 {width: 100%;margin: 3.9% auto 0;}   /* 1280px */
#CT4 .CT4_06 {width: 86.72%;margin: 1.7% auto 0;} /* 1110px */
#CT4 .CT4_07 {width: 46.72%;margin: 3.4% auto 0;} /* 598px */
#CT4 .CT4_07 { transition: opacity 0.3s; }
#CT4 .CT4_07:hover { opacity: 0.7; }
@media screen and (max-width:780px) { /*SP（内容クラス＝PC値コピー。SP調整用）*/
    #CT4 { width: 100%; }
    #CT4 .CT4_02 {width: 91.65%;margin: 5% 0 0 5.4%;}
    #CT4 .CT4_03 {width: 90%;margin: 1.7% auto 0;}
    #CT4 .CT4_04 {width: 90%;margin: 5.1% auto 0;}
    #CT4 .CT4_05 {width: 90%;margin: 4.7% auto 0;}
    #CT4 .CT4_06 {width: 89.42%;margin: 2.6% auto 0;}
    #CT4 .CT4_07 {width: 72.82%;margin: 5.9% auto 0;}
}
@media screen and (min-width:781px) and (max-width:1400px) { /*TB&PC*/
    #CT4 { width: calc(1280 / 1400 * 100vw); }
}
@media screen and (min-width:1401px) , print { /*PC*/
    #CT4 { width: 1280px; }
}


/* CT5 ---- 背景CT5_01(繰り返しなし) + 画像実寸成り行き。1280px幅 */
#CT5 {
    margin: 0 auto;
    background-image: url(../images/aset/CT5_01_pc.webp);
    background-repeat: repeat;
    background-position: center top;
    background-size: 100% auto;
}
.CT5_05{display: block;}
#CT5 picture { display: block; margin: 0 auto; }
#CT5 picture img { display: block; width: 100%; height: auto; }
#CT5 .CT5_00 { width: 100%; }   /* 1282px */
#CT5 .CT5_02 {width: 73.44%;margin: 3.2% auto 0;} /* 940px */
#CT5 .CT5_03 {width: 73.44%;margin: 1.6% auto 0;} /* 940px */
#CT5 .CT5_04 {width: 87.5%;margin: -0.6% auto 0;}  /* 1120px */
#CT5 .CT5_05 {display: block;width: 48.5%;margin: 3.4% auto 2%;transition: opacity 0.3s;}  /* CT5_04コピー・要調整 */
#CT5 .CT5_05:hover { opacity: 0.7; }
@media screen and (max-width:780px) { /*SP（内容クラス＝PC値コピー。SP調整用）*/
    #CT5 {width: 90%;margin: 10.9% auto 0;padding: 0 0 6.3% 0;}
    #CT5 .CT5_00 { width: 100%; }
    #CT5 .CT5_02 {width: 91.94%;margin: 5.2% auto 0;}
    #CT5 .CT5_03 {width: 91.74%;margin: 4.7% auto 0;}
    #CT5 .CT5_04 {width: 91.4%;margin: 3.8% auto 0;}
    #CT5 .CT5_05 {width: 79.4%;margin: 5.8% auto 4%;}  /* CT5_04コピー・要調整 */
}
@media screen and (min-width:781px) and (max-width:1400px) { /*TB&PC*/
    #CT5 { width: calc(1280 / 1400 * 100vw); margin: 5.2% auto 0; padding: 0 0 3.2% 0; }
}
@media screen and (min-width:1401px) , print { /*PC*/
    #CT5 {width: 1280px;margin: 5.2% auto 0;padding: 0 0 3.2% 0;}
}


/* CT6 ---- 背景CT6_01(繰り返しなし) + 画像実寸成り行き。1280px幅 */
#CT6 {
    margin: 0 auto;
    background-image: url(../images/aset/CT6_01_pc.webp);
    background-repeat: no-repeat;
    background-position: center top 100.4%;
    background-size: 100% auto;
}
#CT6 picture { display: block; margin: 0 auto; }
#CT6 picture img { display: block; width: 100%; height: auto; }
#CT6 .CT6_00 { width: 100%; }   /* 1280px */
#CT6 .CT6_02 {width: 83.98%;margin: 7.5% auto 0;} /* 1075px */
#CT6 .CT6_03 {width: 74.92%;margin: 2.4% auto 0;} /* 959px */
#CT6 .CT6_04 {width: 70.08%;margin: 3.2% auto 0;} /* 897px */
#CT6 .CT6_05 {width: 69.92%;margin: 2.3% auto 0;} /* 895px */
#CT6 .CT6_06 {width: 83.36%;margin: 0.9% auto 0;padding: 0 0 6.9% 0;} /* 1067px */
/* CT6_grp：CT6背景(CT6_01)の外（COMMON_bg3直下）。1280中央。CT6_07(全幅)+CT6_08/09(リンク・絶対配置) */
.CT6_grp {width: 1280px;margin: 0 auto;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;column-gap: 3%;position: relative;margin: 0 auto 0;padding: 0 0 8.3% 0;}
.CT6_grp picture { display: block; }
.CT6_grp > a { display: block; transition: opacity 0.3s; }
.CT6_grp > a:hover { opacity: 0.7; }
.CT6_grp img { display: block; width: 100%; height: auto; }
.CT6_07 {width: 100%;margin: 0% auto 0;}   /* 1280px */
.CT6_08 {width: 12.73%;position: absolute;top: 13.6%;left: 62.5%;} /* 163px */
.CT6_09 {width: 15.78%;position: absolute;top: 13.6%;left: 78.7%;} /* 202px */
@media screen and (max-width:780px) { /*SP（内容クラス＝PC値コピー。SP調整用）*/
    #CT6 {width: 89%;background-image: url(../images/aset/CT6_01_sp.webp);margin: 8% auto 0;background-position: center top 103.3%;padding: 0 0 4% 0;}
    #CT6 .CT6_00 { width: 100%; }
    #CT6 .CT6_02 {width: 88.78%;margin: 12.8% auto 0;}
    #CT6 .CT6_03 {width: 86.32%;margin: 4.6% auto 0;}
    #CT6 .CT6_04 {width: 89.38%;margin: 5% auto 0;}
    #CT6 .CT6_05 {width: 90.32%;margin: 2.7% auto 0;}
    #CT6 .CT6_06 {width: 89.66%;margin: 4.2% auto 0;padding: 0 0 6.9% 0;}
    .CT6_grp {width: 90%;margin: 0.1% auto 0;}
    .CT6_07 {width: 100%;margin: 0% auto 0;}
    .CT6_08 {width: 27.73%;position: absolute;top: 37.1%;left: 15.5%;}
    .CT6_09 {width: 33.78%;position: absolute;top: 37.1%;left: 51.1%;}
}
@media screen and (min-width:781px) and (max-width:1400px) { /*TB&PC*/
    #CT6 { width: calc(1280 / 1400 * 100vw); margin: 3.1% auto 0; }
    .CT6_grp { width: calc(1280 / 1400 * 100vw); }
}
@media screen and (min-width:1401px) , print { /*PC*/
    #CT6 {width: 1280px;margin: 3.1% auto 0;}
}


/* CT7〜9 / QIZ / INF 共通：全幅帯(*_00) + 1280中央コンテンツ(.ct_inner) */
#CT7 > picture, #CT8 > picture, #CT9 > picture, #QIZ > picture, #INF > picture { display: block; } /* 帯：全幅 */
#CT7 > picture img, #CT8 > picture img, #CT9 > picture img, #QIZ > picture img, #INF > picture img { display: block; width: 100%; height: auto; }
.ct_inner { margin: 0 auto; position: relative; }
.ct_inner picture {display: block;}
.ct_inner picture img { display: block; width: 100%; height: auto; }
@media screen and (max-width:780px) { .ct_inner { width: 100%; } }
@media screen and (min-width:781px) and (max-width:1400px) { .ct_inner { width: calc(1280 / 1400 * 100vw); margin: 2.6% auto 0; } }
@media screen and (min-width:1401px) , print { .ct_inner {width: 1280px;margin: 2.6% auto 0;position: relative;} }

/* CT7 ---- 背景CT7_01(全幅・繰り返しなし) + 内容実寸% */
#CT7 {background-image: url(../images/aset/CT7_01_pc.webp);background-repeat: no-repeat;background-position: center top 100%;background-size: 1920px auto;padding: 0 0 8.2% 0;}
#CT7 .CT7_02 {width: 73.67%;margin: 0 0 0 11.2%;} /* 943px */
#CT7 .CT7_03 {width: 21.88%;margin: -0.4% 0 0 9.1%;} /* 280px */
#CT7 .CT7_04 {width: 84.30%;margin: -17.1% 0 0 8.6%;} /* 1079px */
/* CT7_05/06 を横並び（同幅576px） */
#CT7 .CT7_row {display: flex;justify-content: center;align-items: flex-start;column-gap: 2%;/* margin: -0.5% 0 0 -0.9%; *//* width: 1280px; */}
#CT7 .CT7_row picture {}
#CT7 .CT7_05 {width: 45%;margin: 0 0 0 0;}    /* 576px */
#CT7 .CT7_06 {width: 45%;margin: 0 0 0 0;}    /* 576px */
#CT7 .CT7_07 {width: 84.53%;margin: 2.5% 0 0 3.3%;} /* 1082px */
#CT7 .CT7_08 {width: 93.7%;margin: 5.4% auto 0;} /* 1200px */
#CT7 .CT7_09 {width: 93.7%;margin: 0% auto 0;} /* 1200px */
/* CT7_10 + CT7_11(外部リンク) のグループ */
#CT7 .CT7_grp { position: relative; }
#CT7 .CT7_grp > a {display: block;margin: 0 auto;transition: opacity 0.3s;position: absolute;bottom: 8.6%;left: 0;right: 0;}
#CT7 .CT7_grp > a:hover { opacity: 0.7; }
#CT7 .CT7_10 {width: 93.7%;margin: 4.9% auto 0;} /* 1200px */
#CT7 .CT7_11 { width: 46.72%; } /* 598px */
@media screen and (max-width:780px) { /*SP（内容クラス＝PC値コピー。SP調整用）*/
    #CT7 {background-image: url(../images/aset/CT7_01_sp.webp);background-repeat: no-repeat;background-position: center top 100%;background-size: 100% auto;padding: 0 0 15.7% 0;}
    #CT7 .CT7_row {display: flex;flex-direction: column;justify-content: center;align-items: center;column-gap: 2%;margin: 9% 0 0 0;}
    #CT7 .CT7_02 {width: 84.87%;margin: 6.3% 0 0 7.3%;}
    #CT7 .CT7_03 {width: 36.88%;margin: 0 0 0 0;position: absolute;top: 15.2%;right: 4.3%;}
    #CT7 .CT7_04 {width: 90.7%;margin: 6.7% 0 0 5.4%;}
    #CT7 .CT7_05 {width: 91%;margin: 0 0 0 2%;}
    #CT7 .CT7_06 {width: 91%;margin: 5% 0 0 2%;}
    #CT7 .CT7_07 {width: 88.73%;margin: 6.5% 0 0 5.8%;}
    #CT7 .CT7_08 {width: 89.7%;margin: 7.9% auto 0;}
    #CT7 .CT7_09 {width: 90%;margin: 0% auto 0;}
    #CT7 .CT7_10 {width: 89.3%;margin: 7% auto 0;}
    #CT7 .CT7_11 {width: 71.82%;bottom: 5.4%!important;}
}


/* CT8 ---- 背景CT8_01(全幅・繰り返し) + 内容実寸% */
#CT8 {background-image: url(../images/aset/CT8_01_pc.webp);background-repeat: repeat;background-position: center top;background-size: 1920px auto;padding: 0 0 6.4% 0;}
#CT8 .CT8_02 {width: 100%;margin: 4.8% auto 0;}   /* 1280px */
/* CT8_03 + CT8_04(外部リンク) のグループ */
#CT8 .CT8_grp { position: relative; }
#CT8 .CT8_grp > a { display: block; margin: 0 auto; transition: opacity 0.3s; }
#CT8 .CT8_grp > a:hover { opacity: 0.7; }
#CT8 .CT8_03 {width: 93.75%;margin: 4.8% auto 0;} /* 1200px */
#CT8 .CT8_04 {width: 46.72%;position: absolute;bottom: 8.6%;left: 0;right: 0;} /* 598px */
@media screen and (max-width:780px) { /*SP（内容クラス＝PC値コピー。SP調整用）*/
    #CT8 {background-image: url(../images/aset/CT8_01_pc.webp);background-repeat: repeat;background-position: center top;background-size: 1920px auto;padding: 0 0 20.1% 0;}
    #CT8 .CT8_02 {width: 100%;margin: 3.4% auto 0;}
    #CT8 .CT8_03 {width: 89.15%;margin: 7.3% auto 0;}
    #CT8 .CT8_04 {width: 71.32%;position: absolute;bottom: 5.3%;left: 0;right: 0;}
}
/* CT8_02_grp ---- 背景=CT8_02_01(1280×1315) + 前面 CT8_02_02(800×257)/03(1119×510)/04(1189×327)
   PC&TB用（SPは後日）。幅・余白は仮 */
#CT8 .CT8_02_grp {
    position: relative;
    width: 100%;
    aspect-ratio: 1280 / 1315;    /* 背景CT8_02_01_pcの実寸比＝PCで1280×1315ぴったり */
    margin: 4.8% auto 0;
    background-image: url(../images/aset/CT8_02_01_pc.webp);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;    /* 箱が実寸比なので歪まず1:1表示 */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#CT8 .CT8_02_grp > picture { display: block; }
#CT8 .CT8_02_grp > picture img { display: block; width: 100%; height: auto; }
#CT8 .CT8_02_02 { width: 62.5%; margin: 0 auto; }        /* 800px・仮 */
#CT8 .CT8_02_03 {width: 87.4%;margin: 3% auto 3%;}        /* 1119px・仮 */
#CT8 .CT8_02_04 { width: 92.9%; margin: 0 auto; }        /* 1189px・仮 */
@media screen and (max-width:780px) { /*SP（内容クラス＝PC値コピー。SP調整用）*/
    #CT8 .CT8_02_grp {margin: 0% auto 0;aspect-ratio: 710 / 3520;background-image: url(../images/aset/CT8_02_01_sp.webp);width: 95%;margin: 6% auto 0;}
    #CT8 .CT8_02_02 {width: 87.5%;margin: 0% auto 0;}
    #CT8 .CT8_02_03 {width: 90.4%;margin: 11% auto 11%;}
    #CT8 .CT8_02_04 { width: 92.9%; margin: 0% auto 0; }
}


/* CT9 ---- 背景CT9_01(全幅・繰り返し) + 内容実寸%。※背景だけ半透明（方法1：擬似要素＋opacity）PC&TB&SP共通 */
#CT9 { position: relative; background-color: #000; padding: 0 0 8.4% 0; }
#CT9::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../images/aset/CT9_01_pc.webp);
    background-repeat: repeat;
    background-position: center top;
    background-size: 950px auto;
    opacity: 0.5;                 /* ← 背景の透過度・仮（要調整） */
    z-index: 0;
    pointer-events: none;
}
#CT9 > * { position: relative; z-index: 1; }   /* 中身(帯タイトル/ct_inner)を背景より前面へ */
#CT9 .ct_inner { display: flex; flex-direction: column; align-items: center; } /* CT9だけ横センター(flex) */
#CT9 .CT9_02 {width: 64.30%;margin: 1% 0 0 0;} /* 823px */
#CT9 .CT9_03 {width: 93.75%;margin: 3.7% 0 0 0;} /* 1200px */
#CT9 .CT9_04 {width: 63.52%;margin: 2.4% 0 0 0;} /* 813px */
#CT9 .CT9_05 {width: 58.44%;margin: 3.6% 0 0 0;} /* 748px */
#CT9 .CT9_06 {width: 35.55%;margin: 3.6% 0 0 0;} /* 455px */
#CT9 .CT9_07 {width: 36.48%;margin: 3.6% 0 0 0;} /* 467px */
#CT9 .CT9_08 {width: 65.70%;margin: 3.5% 0 0 0;} /* 841px */
#CT9 .CT9_09 {width: 73.44%;margin: 5.3% 0 0 0;} /* 940px */
#CT9 .CT9_10 {width: 65.63%;} /* 840px・共通(幅のみ) */
/* CT9_10 個別（6個・margin はここがデフォ。必要に応じ上書き） */
#CT9 .CT9_10_01 {margin: 5% 0 0 0;}
#CT9 .CT9_10_02 {margin: 3.5% 0 0 0;}
#CT9 .CT9_10_03 {margin: 3.5% 0 0 0;}
#CT9 .CT9_10_04 {margin: 3.5% 0 0 0;}
#CT9 .CT9_10_05 {margin: 3.4% 0 0 0;}
#CT9 .CT9_10_06 {margin: 5% 0 0 0;}
#CT9 .CT9_11 {display: block;width: 46.72%;margin: 4.1% 0 0 0;transition: opacity 0.3s;position: relative;} /* 598px・リンク */
#CT9 .CT9_11:hover { opacity: 0.7; }
/* ▼ coming soon 状態（リリース時は index.html から is_soon クラスを外す） */
#CT9 .CT9_11.is_soon { pointer-events: none; }        /* クリック無効 */
#CT9 .CT9_11.is_soon:hover { opacity: 1; }            /* ホバー無効化 */
#CT9 .CT9_11.is_soon::after {
    content: "COMING SOON";
    position: absolute;
    top: 0;                                           /* 縦：上揃え */
    left: 50%;                                        /* 横：センター */
    transform: translateX(-50%);
    width: 100%;                                      /* 仮・調整用 */
    height: 100%;                                     /* 仮・調整用 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6b6b6b;                               /* グレーで画像を隠す（色は調整可） */
    color: #fff;
    font-weight: bold;
    font-size: 1.4vw;                                 /* PC・仮 */
    letter-spacing: 0.08em;
    text-align: center;
    border-radius: 50px;                              /* ボタン角丸・仮。合わせて調整 */
}
/* ▲ coming soon */
@media screen and (max-width:780px) { /*SP（内容クラス＝PC値コピー。SP調整用）*/
    #CT9 { background-color: #000; padding: 0 0 15.5% 0; }   /* 背景は #CT9::before（方法1）に集約 */
    #CT9 .CT9_02 {width: 95.3%;margin: 9% 0 0 0.3%;}
    #CT9 .CT9_03 {width: 89.65%;margin: 5.2% 0 0 0;}
    #CT9 .CT9_04 {width: 89.52%;margin: 4.9% 0 0 0;}
    #CT9 .CT9_05 {width: 80.54%;margin: 8.9% 0 0 0;}
    #CT9 .CT9_06 {width: 84.95%;margin: 9.1% 0 0 0;}
    #CT9 .CT9_07 {width: 87.48%;margin: 9% 0 0 0;}
    #CT9 .CT9_08 {width: 81.7%;margin: 8.6% 0 0 0;}
    #CT9 .CT9_09 {width: 71.44%;margin: 9.3% 0 0 0;}
    #CT9 .CT9_10 {width: 88.63%;}
    #CT9 .CT9_10_01 {margin: 8.4% 0 0 0;}
    #CT9 .CT9_10_02 {margin: 8.7% 0 0 0;}
    #CT9 .CT9_10_03 {margin: 8.2% 0 0 0;}
    #CT9 .CT9_10_04 {margin: 8.6% 0 0 0;}
    #CT9 .CT9_10_05 {margin: 8.5% 0 0 0;}
    #CT9 .CT9_10_06 {margin: 5% 0 0 0;}
    #CT9 .CT9_11 {width: 71.72%;margin: 9% 0 0 0;}
    #CT9 .CT9_11.is_soon::after { font-size: 4.4vw; border-radius: 50px; }  /* 24px / 8px・仮 */
}


/* SNS ---- 背景SNS_01(全幅・繰り返し) + 帯SNS_00 + ct_inner内に実寸%で縦積み
   例外: SNS_07-09=flex横並び / SNS_12-19=.SNS_grp(応募要項 STEP×3) */
#SNS {
    background-image: url(../images/aset/SNS_01_pc.webp);
    background-repeat: repeat;
    background-position: center top;
    background-size: 1920px auto;   /* 実寸1920px。広い画面はタイル繰り返し */
    padding: 0 0 6% 0;
}
#SNS > picture { display: block; }                 /* SNS_00 帯：全幅 */
#SNS > picture img { display: block; width: 100%; height: auto; }
#SNS .ct_inner picture { display: block; }
#SNS .ct_inner picture img { display: block; width: 100%; height: auto; }
#SNS .SNS_02 {width: 90.23%;margin: 8.2% auto 0;} /* 1155px */
#SNS .SNS_03 {width: 40.86%;margin: 1.9% auto 0;} /* 523px */
#SNS .SNS_04 {display: block;width: 46.72%;margin: 3.4% auto 0;transition: opacity 0.3s;} /* 598px */
#SNS .SNS_04:hover { opacity: 0.7; }
#SNS .SNS_05 {width: 52.42%;margin: 6.1% auto 0;} /* 671px */
#SNS .SNS_06 {width: 93.75%;margin: 4.2% auto 0;} /* 1200px */
#SNS .SNS_10 {width: 47.97%;margin: 2% auto 0;} /* 614px */
#SNS .SNS_11 {width: 43.20%;margin: 4.8% auto 0;} /* 553px */
#SNS .SNS_20 { width: 75.39%; margin: 3% auto 0; } /* 965px */
@media screen and (max-width:780px) { /*SP（内容クラス＝PC値コピー。SP調整用）*/
    #SNS {background-image: url(../images/aset/SNS_01_pc.webp);background-repeat: repeat;background-position: center top;background-size: 1920px auto;padding: 0 0 6% 0;}
    #SNS .SNS_02 {width: 78.53%;margin: 11.9% 0 0 12%;}
    #SNS .SNS_03 {width: 88.86%;margin: 3.4% auto 0;}
    #SNS .SNS_04 {width: 70.72%;margin: 7.1% auto 0;}
    #SNS .SNS_05 {width: 90.42%;margin: 11.7% auto 0;}
    #SNS .SNS_06 {width: 89.75%;margin: 9.5% auto 0;}
    #SNS .SNS_10 {width: 79.57%;margin: 2.5% auto 0;}
    #SNS .SNS_11 {width: 83.2%;margin: 8.8% auto 0;}
    #SNS .SNS_20 {width: 92.39%;margin: 6% auto 0;}
}

/* 利用規約（仮・テキスト） */
#SNS .SNS_terms {width: 75.39%;margin: 5% auto 0;color: #333;text-align: left;background-color: #fff;padding: 3% 2%;} /* 965px相当 */
#SNS .SNS_terms_ttl {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding-bottom: 16px;
    border-bottom: 1px solid #c8a85a;   /* 仮：金色ライン */
    margin: 0 0 24px;
}
#SNS .SNS_terms_box {
    height: 300px;
    overflow-y: scroll;
    background: #fff;
    /* border: 1px solid #ddd; */
    /* padding: 24px 28px; */
    box-sizing: border-box;
}
/* スクロールバー（gindaco_2025_12_15 .TRM_box2Frame と同仕様：細4px・track灰・thumb金） */
#SNS .SNS_terms_box::-webkit-scrollbar { width: 4px; }
#SNS .SNS_terms_box::-webkit-scrollbar-track { background-color: #D2D2D2; border-radius: 10%; }
#SNS .SNS_terms_box::-webkit-scrollbar-thumb { background-color: #BE8815; border-radius: 10%; }
/* フォントサイズはFigma準拠：見出し21px/1.4、本文・リスト・小見出し・注記13px/1.5 */
#SNS .SNS_terms_box h3 { font-size: 21px; font-weight: 700; line-height: 1.4; margin: 24px 0 10px; }
#SNS .SNS_terms_box h3:first-child { margin-top: 0; }
#SNS .SNS_terms_box h4 { font-size: 13px; font-weight: 700; line-height: 1.5; margin: 12px 0 4px; }
#SNS .SNS_terms_box p {font-size: 13px;line-height: 1.5;margin: 0 0 18px;}
#SNS .SNS_terms_box ul { margin: 0 0 8px; padding-left: 1.2em; list-style: disc; }
#SNS .SNS_terms_box ol { margin: 0 0 8px; padding-left: 1.6em; list-style: decimal; }
#SNS .SNS_terms_box li { font-size: 13px; line-height: 1.5; margin: 0 0 4px; }
#SNS .SNS_terms_box .SNS_terms_note { font-size: 13px; line-height: 1.5; color: #666; margin: 0 0 8px; }
/* 規約本文中のテキストリンク（URL表記） */
#SNS .SNS_terms_link {color: #0bc0d2;text-decoration: underline;word-break: break-all;transition: opacity 0.3s;text-decoration: none;}
#SNS .SNS_terms_link:hover { opacity: 0.7; }

@media screen and (max-width:780px) { /*SP*/
    #SNS .SNS_terms {width: 92%;margin: 11% auto 0;padding: 6% 2%;}
    #SNS .SNS_terms_ttl {font-size: 17px;}
    #SNS .SNS_terms_box { height: 220px; padding: 16px 18px; }
    #SNS .SNS_terms_box h3 {font-size: 14px;margin: 18px 0 8px;}
    #SNS .SNS_terms_box p,
    #SNS .SNS_terms_box li {font-size: 11px;}
    #SNS .SNS_terms_box .SNS_terms_note {font-size: 10px;}
}

/* SNS_07-09：flex横並び（380×380×3） */
#SNS .SNS_row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    column-gap: 2%;
    width: 100%;
    margin: 2.1% auto 0;
}
#SNS .SNS_row picture {width: 29.89%;margin: 0;} /* 380px */

/* SNS_12-19：応募要項（タイトル + STEP×3）。左ひし形＋右本文のシンプル構成 */
#SNS .SNS_grp {
    width: 100%;
    margin: 8.8% auto 0;
}
#SNS .SNS_grp picture { display: block; }
#SNS .SNS_12 {width: 75.39%;margin: 0 auto;}      /* 965px・タイトル(中央) */

#SNS .SNS_step {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    column-gap: 3%;
    margin: 3% auto 0;
    width: 75%;
    position: relative;   /* SNS_15(公式Xボタン)を absolute で配置する際の基準。SNS_step_body には position を付けないこと */
}
#SNS .SNS_step > picture {width: 27.94%;flex: none;} /* 268px・ひし形 */
#SNS .SNS_step_body {flex: 1;max-width: 76%;margin: 2.9% 0 0 2.4%;}        /* 右本文カラム */
#SNS .SNS_step_body picture,
#SNS .SNS_step_body .SNS_15 { display: block; }
#SNS .SNS_step_body img { display: block; width: 100%; height: auto; }
/* 本文画像は body 幅基準の%（実寸を1280→body換算） */
#SNS .SNS_14 {width: 81.3%;}  /* 519px */
#SNS .SNS_15 {width: 75.3%;margin-top: 4%;transition: opacity 0.3s;} /* 480px・公式Xボタン */
#SNS .SNS_15:hover { opacity: 0.7; }
#SNS .SNS_17 {width: 85.4%;margin: -1.3% 0 0 0;}  /* 547px */
#SNS .SNS_19 {width: 91.4%;margin: 9.1% 0 0 0;}  /* 585px */

@media screen and (max-width:780px) { /*SP（内容クラス＝PC値コピー。SP調整用。要調整：ひし形上・本文下に縦積み等） */
    #SNS .SNS_grp { width: 100%; margin: 8.8% auto 0; }
    #SNS .SNS_12 {width: 91.39%;margin: 0 auto;}              /* タイトル(中央) */
    #SNS .SNS_step {/* flex-direction: column; */column-gap: 3%;row-gap: 4%;width: 86%;}  /* position:relative は基準側(.SNS_step)に集約。margin は各step個別指定に移譲 */
    #SNS .SNS_step_01 { margin: 7% auto 0; }                     /* STEP1 */
    #SNS .SNS_step_02 {margin: 32% auto 0;}                     /* STEP2 */
    #SNS .SNS_step_03 {margin: 37% auto 0;}                     /* 応募完了 */
    #SNS .SNS_step > picture { width: 40%; }                     /* ひし形・共通デフォルト */
    #SNS .SNS_step > .SNS_13 {width: 42%;}                     /* STEP1（個別調整用） */
    #SNS .SNS_step > .SNS_16 { width: 40%; }                     /* STEP2（個別調整用） */
    #SNS .SNS_step > .SNS_18 { width: 40%; }                     /* 応募完了（個別調整用） */
    #SNS .SNS_step_body {max-width: 90%;margin: 2.9% 0 0 1%;}   /* position は付けない（SNS_15 を SNS_step 基準にするため） */
    #SNS .SNS_14 {width: 93.3%;}
    #SNS .SNS_15 {width: 84.3%;position: absolute;top: 102.3%;left: 8%;}  /* SNS_step 基準。width%も SNS_step 幅基準に変わる点に注意。top/left は仮 */
    #SNS .SNS_17 {width: 96.4%;margin: -1.3% 0 0 0;position: absolute;top: 9%;left: 2%;}
    #SNS .SNS_19 {width: 101.4%;margin: -8.9% 0 0 3%;}
}

@media screen and (max-width:780px) { /*SP（要調整）*/
    #SNS .SNS_row { flex-direction: column; align-items: center; row-gap: 4%; }
    #SNS .SNS_row picture {width: 89.75%;margin: 3% 0 0 0;}
    #SNS .SNS_row .SNS_07 {width: 89.75%;margin: 3% 0 0 0;}
    #SNS .SNS_row .SNS_08 {width: 89.75%;margin: 5% 0 0 0;}
    #SNS .SNS_row .SNS_09 {width: 89.75%;margin: 6% 0 0 0;}
}


/* QIZ ---- 背景QIZ_00(全幅・上寄せ・繰り返しなし) + 内容(QIZ_01/02)実寸% */
#QIZ {
    background-image: url(../images/aset/QIZ_00_pc.webp);
    background-repeat: repeat;
    background-position: center top;
    background-size: 1920px auto;   /* 実寸1920px */
    margin: -2.7% 0 0 0;
    padding: 5% 0;
}
#QIZ .QIZ_01 { width: 100%; }    /* 1280px */
#QIZ .QIZ_02 {display: block;width: 72.03%;position: absolute;bottom: 9%;left: 0;right: 0;margin-inline: auto;transition: opacity 0.3s;}  /* 922px・クイズへのリンク */
#QIZ .QIZ_02:hover { opacity: 0.7; }
/* ▼ coming soon 状態（リリース時は index.html から is_soon クラスを外す） */
#QIZ .QIZ_02.is_soon { pointer-events: none; }        /* クリック無効 */
#QIZ .QIZ_02.is_soon:hover { opacity: 1; }            /* ホバー無効化 */
#QIZ .QIZ_02.is_soon::after {
    content: "COMING SOON";
    position: absolute;
    top: 0;                                           /* 縦：上揃え */
    left: 50%;                                        /* 横：センター */
    transform: translateX(-50%);
    width: 96%;                                      /* 仮・調整用 */
    height: 89%;                                     /* 仮・調整用 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6b6b6b;                               /* グレーで画像を隠す（色は調整可） */
    color: #fff;
    font-weight: bold;
    font-size: 2.4vw;                                 /* PC・仮 */
    letter-spacing: 0.08em;
    text-align: center;
    border-radius: 150px;                              /* ボタン角丸・仮。合わせて調整 */
}
/* ▲ coming soon */
@media screen and (max-width:780px) { /*SP（内容クラス＝PC値コピー。SP調整用）*/
    #QIZ {background-image: url(../images/aset/QIZ_00_pc.webp);background-repeat: repeat;background-position: center top;background-size: 1920px auto;margin: 0% 0 0 0;padding: 7% 0;}
    #QIZ .QIZ_01 {width: 100%;}
    #QIZ .QIZ_02 {width: 89.03%;position: absolute;bottom: 9%;left: 0;right: 0;margin-inline: auto;}
    #QIZ .QIZ_02.is_soon::after { 
        font-size: 5.3vw;
        border-radius: 14.83vw;
        width: 95%;
        height: 86%; }  /* 24px / 8px・仮 */
}


/* INF ---- 背景INF_00(全幅・繰り返し) + INF_01/02を縦並び・横センター（実寸） */
#INF {
    background-image: url(../images/aset/INF_00_pc.webp);
    background-repeat: repeat;
    background-position: center top;
    background-size: 1920px auto;   /* 実寸1920px。広い画面はタイル繰り返し */
    display: flex;
    flex-direction: column;
    align-items: center;            /* 横センター */
    padding: 6% 0;
}
#INF picture { display: block; }
#INF picture img { display: block; width: 100%; height: auto; }
#INF .INF_02 { display: block; transition: opacity 0.3s; } /* リンク */
#INF .INF_02:hover { opacity: 0.7; }
@media screen and (max-width:780px) { /*SP（要調整）*/
    #INF {background-image: url(../images/aset/INF_00_pc.webp);background-repeat: repeat;background-position: center top;background-size: 1920px auto;padding: 12% 0;}
    #INF .INF_01 {width: 60%;margin: 0 0 3% 0;}
    #INF .INF_02 {width: 71%;}
}
@media screen and (min-width:781px) and (max-width:1400px) { /*TB&PC*/
    #INF .INF_01 { width: calc(423 / 1400 * 100vw); margin: 0 0 3% 0; }
    #INF .INF_02 { width: calc(598 / 1400 * 100vw); }
}
@media screen and (min-width:1401px) , print { /*PC*/
    #INF .INF_01 {width: 423px;margin: 0 0 3% 0;}
    #INF .INF_02 { width: 598px; }
}


/* xxx（デザイン透かし。横センター・半透明・クリック透過。既定OFF、PC(≥1601)で表示） */
.xxx {display: none;}
@media screen and (max-width:780px) { /*SP*/
    .xxx {
        position: absolute;
        top: -98px;
        left: 50%;
        transform: translateX(-50%);   /* ← 横センター */
        max-width: 375px;
        height: auto;
        opacity: 0.5;
        pointer-events: none;
        z-index: 100000;
    }
}
@media screen and (min-width:781px) and ( max-width:1600px) { /*TB&PC*/
}
@media screen and (min-width:1601px) , print { /*PC*/
    .xxx {
        position: absolute;
        top: 148px;
        left: 50%;
        transform: translateX(-50%);   /* ← 横センター */
        max-width: 1920px;
        height: auto;
        opacity: 0.5;
        pointer-events: none;
        z-index: 100000;
    }
}


/* =====================================================================
   モーダル（MDL_01/02/03）  ※ CT1_07/CT2_07/CT3_07 から開く
   開閉：フェード(opacity/visibility)＋スケール(transform) のアニメ
   ===================================================================== */
html.mdl-open, html.mdl-open body { overflow: hidden; }   /* 背面スクロールロック */

.mdl {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;    /* 上詰め＋ inner の margin:auto で「短ければ中央/長ければスクロール」 */
    box-sizing: border-box;
    padding: 4vh 4vw;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow-y: auto;               /* 画像が縦にはみ出たらスクロール */
    overscroll-behavior: contain;   /* モーダル内スクロールが端で背面へ連鎖しないように */
}
.mdl.is-open { opacity: 1; visibility: visible; }

.mdl_overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); cursor: pointer; }   /* モーダル本体がスクロールしても画面に固定 */

.mdl_inner {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: min(1500px, 92vw);  /* 横幅は最大1500px（画面幅92vwは超えない） */
    margin: auto 0;                /* 画像が短ければ縦センター、長ければ上端から流れてスクロール可 */
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;         /* ×ボタンを右上に */
    transform: scale(0.88);
    transition: transform 0.3s ease;
}
.mdl.is-open .mdl_inner { transform: scale(1); }

.MARK_close {
    border: 0;
    background: none;
    padding: 0;
    margin: 0 0 10px 0;
    width: 32px;                   /* 54×86 の実寸を縮小表示 */
    line-height: 0;
    cursor: pointer;
    transition: opacity 0.3s;
}
.MARK_close:hover { opacity: 0.7; }
.MARK_close img { display: block; width: 100%; height: auto; pointer-events: none; }

.mdl_body { display: block; }
.mdl_body picture { display: block; }
/* 横幅=最大1500px（画面幅92vwは超えない）。縦は上限なし＝はみ出したら .mdl がスクロール */
.mdl_body img { display: block; width: auto; height: auto; max-width: min(1500px, 92vw); max-height: none; }

@media screen and (max-width:780px) { /*SP*/
    /* 画像=横80vw・縦成り行き／はみ出しは縦スクロール／閉じるボタンは画面右上に固定 */
    .mdl {
        flex-direction: column;
        justify-content: flex-start;   /* 上詰め＋下記 margin:auto で「短ければ中央/長ければスクロール」 */
        padding: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mdl_overlay { position: fixed; }  /* スクロールしても背面を覆い続ける */
    .mdl_inner {
        transform: none;               /* fixed(閉じるボタン)をビューポート基準にするため必須 */
        width: 100%;
        max-width: none;
        align-items: center;           /* 画像を横センター */
        margin: auto 0;                /* 画像が短ければ縦センター、長ければ上端から流れてスクロール可 */
        padding: 16vw 0;               /* 上下余白（上は閉じるボタンとの被り回避も兼ねる） */
        box-sizing: border-box;
    }
    .mdl.is-open .mdl_inner { transform: none; }  /* base の scale(1) を打ち消す（transformを完全に消す） */
    .MARK_close {
        position: fixed;
        top: 3vw;
        right: 6vw;
        width: 35px;
        margin: 0;
        z-index: 2;                    /* 画像より前面 */
        padding: 2vw;
    }
    .mdl_body {width: 90%;}          /* 横幅80% */
    .mdl_body img {
        width: 100%;                   /* body(80%)いっぱい ＝ 画面の80vw */
        height: auto;                  /* 縦成り行き */
        max-width: none;
        max-height: none;
    }
}

/* モーション低減設定時はアニメOFF */
@media (prefers-reduced-motion: reduce) {
    .mdl, .mdl_inner { transition: none; }
}


/* =====================================================================
   ページトップへ戻る（右下・▲）  ※base.css の .pagetop を上書き
   ===================================================================== */
.pagetop {
    position: fixed;
    right: 40px;
    bottom: 40px;
    width: 100px;
    height: 100px;              /* PC&TB=100px（SPは60px） */
    display: block;             /* base.css の .pagetop{display:none} を上書き（消えていた原因） */
    padding: 0;
    border: 0;
    background: url(../images/aset/backtotop.webp) center center / contain no-repeat;
    font-size: 0;               /* ▲テキストを隠す（画像で表示） */
    line-height: 0;
    cursor: pointer;
    z-index: 500;
    /* 既定は非表示。スクロールで .is-show 付与 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
.pagetop.is-show { opacity: 1; visibility: visible; transform: translateY(0); }
.pagetop:hover { opacity: 0.8; }
@media screen and (max-width:780px) { /*SP*/
    .pagetop { right: 16px; bottom: 20px; width: 60px; height: 60px; }
}