@charset "UTF-8";

/* =========================================================
   NANGOKU LUXE
   デザイン基準：PC 1440 / SP 375（XD「NANGOKULUXEHP」より）
   グリッド：12カラム・左右マージン141px・コンテンツ幅1158px
   ========================================================= */

:root {
    --gold: #B48843;          /* ボタン地 */
    --gold-border: #E0A74F;   /* ボタン枠 */
    --gold-title: #BFAA89;    /* セクション見出し・ナビ */
    --gold-sub: #C1A989;      /* サブタイトル */
    --gold-text: #C0A989;     /* 装飾文字・カード内 */
    --gold-body: #C0AA89;     /* 本文 */
    --gold-deep: #CC9338;     /* バッジ */
    --black: #0A0000;
    --black-2: #070707;
    --gray-dark: #2F2F2F;
    --card: #212121;
    --ivory: #F7F2E9;
}

body {
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    color: #FFFFFF;
    background: var(--black);
    overflow-x: hidden;
    /* 🔴 タップしてから反応するまでの約300msの遅延を無くす。
       head で viewport を width=375 に固定しているため、width=device-width の
       ときと違ってブラウザが「ダブルタップズーム待ち」を自動で外してくれない。
       manipulation はダブルタップズームだけを切る（ピンチズームは残る） */
    touch-action: manipulation;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.en {
    font-family: "Allura", cursive;
}

/* PC/SPで改行位置を出し分ける（XDの改行がPC版とSP版で違うため） */
br.sp {
    display: none;
}

/* XDではPC版とSP版で文言そのものが違う箇所がある（確認事項に記載） */
.only-sp {
    display: none;
}

/* 共通ボタン（ゴールド） --------------------------------- */
.btn-gold {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gold);
    border: 1px solid var(--gold-border);
    color: #FFFFFF;
    text-align: center;
    transition: opacity .3s;
}

.btn-gold:hover {
    opacity: .8;
}

/* 共通セクション見出し ----------------------------------- */
.section-title {
    font-size: 56px;
    line-height: 1.2;
    color: var(--gold-title);
    text-align: center;
}

.section-subtitle {
    margin-top: -10px;
    font-size: 21px;
    color: var(--gold-sub);
    text-align: center;
}

/* XD：見出し→サブの間隔はセクションで違う */
.quality .section-title    { margin-top: -52px; }
.quality .section-subtitle { margin-top: 10.8px; }
.cast .section-title       { margin-top: -36.7px; }
.cast .section-subtitle    { margin-top: 5.8px; }
/* XD：Price と Private&Secure の見出しだけ、ページ中央（720）ではなく
   697〜714 を中心に置かれている（文字幅の実測から算出）。
   要素ごとずらすと箱が画面外にはみ出すので、右paddingで中心をずらしている */
.price .section-title      { margin-top: -24.4px; padding-right: 38px; }
.price .section-subtitle   { margin-top: -1.2px;  padding-right: 39px; }
.secure .section-title     { margin-top: -34.1px; }
.secure .section-subtitle  { margin-top: -1.2px;  padding-right: 33.6px; }
.qa .section-title         { margin-top: -56.8px; }
.recruit .section-title    { margin-top: -84.8px; }
.reserve .section-title    { margin-top: -33.9px; }
.reserve .section-subtitle { margin-top: -1.2px; }

/* SPだけに出るメニュー（XDのSPヘッダーに3本線のアイコンがある） */
.header-menu,
.sp-menu {
    display: none;
}

/* =========================================================
   ヘッダー
   ========================================================= */
.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 80px;
    background: var(--gray-dark);
}

/* XDの座標どおりに置く（ロゴ36／ナビ681／電話1007／ボタン1236） */
.header-inner {
    position: relative;
    width: 100%;
    max-width: 1440px;
    height: 100%;
    margin: 0 auto;
}

.header-logo {
    position: absolute;
    top: 12px;
    left: 36px;
    width: 213px;
}

.header-nav {
    position: absolute;
    top: 21px;
    left: 681px;
}

.header-nav__list {
    display: flex;
    align-items: center;
    list-style: none;
}

/* XDの項目間隔（Concept 681／Cast 793／Price 867／Q&A 948） */
.header-nav__list li:nth-child(1) { margin-right: 48px; }
.header-nav__list li:nth-child(2) { margin-right: 41px; }
.header-nav__list li:nth-child(3) { margin-right: 41px; }

.header-nav__list a {
    font-size: 16px;
    line-height: 38px;
    color: var(--gold-title);
    transition: opacity .3s;
}

.header-nav__list a:hover {
    opacity: .7;
}

.header-tel {
    position: absolute;
    top: 14px;
    left: 1007px;
    text-align: center;
    white-space: nowrap;
}

.header-tel__label {
    position: relative;
    top: 3px;
    font-size: 12px;
    line-height: 1;
    text-align: left;
}

.header-tel__number {
    display: block;
    margin-top: 6px;
    font-size: 31px;
    line-height: 1;
}

.header-reserve {
    position: absolute;
    top: 15px;
    left: 1236px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 162px;
    height: 51px;
    background: var(--gold);
    border: 1px solid var(--gold-border);
    flex-shrink: 0;
    transition: opacity .3s;
}

.header-reserve:hover {
    opacity: .8;
}

.header-reserve__en {
    position: relative;
    top: -3px;
    font-size: 19px;
    line-height: 1;
}

.header-reserve__ja {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1;
}

/* =========================================================
   FV
   ========================================================= */
.fv {
    position: relative;
    width: 100%;
    height: 780px;
}

.fv-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.fv-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fv-logo {
    position: absolute;
    top: 182px;
    left: 50%;
    width: 625px;
    transform: translateX(-50%);
}

.fv-btns {
    position: absolute;
    top: 693px;
    right: 40px;
}

.fv-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 272px;
    height: 57px;
    background: var(--gold);
    border: 1px solid var(--gold-border);
    font-size: 21px;
    transition: opacity .3s;
}

.fv-btn:hover {
    opacity: .8;
}

/* 「電話で予約する」はSPデザインにだけある */
.fv-btn.is-tel {
    display: none;
}

/* =========================================================
   Pickup Cast
   ========================================================= */
/* 横にはみ出す帯を切るのはこちら。
   .pickup-slider 側で切ると、ホバーで浮いた写真の上端まで切れてしまう */
.pickup {
    padding: 72px 0 52px;
    overflow: hidden;
}

.pickup-title {
    position: relative;
    top: 4px;
    font-size: 56px;
    line-height: 1;
    color: var(--gold-title);
    text-align: center;
}

.pickup-slider {
    margin-top: 46px;
}

/* XDの付箋：「セラピストの写真は横にスライドで自動に動くようにお願いします」
   1枚ずつ送るのではなく、等速で流れ続ける形にしている。
   JSが同じ並びをもう1組うしろに足し、-50%まで動かして先頭へ戻すので継ぎ目が出ない。
   速さは「1秒あたり何px」で決めてあり、セラピストが増えても速くならない */
.pickup-track {
    display: flex;
    width: max-content;
}

.pickup-track.is-flowing {
    animation: pickup-flow var(--pickup-duration, 24s) linear infinite;
}

@keyframes pickup-flow {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* 間隔は gap ではなく margin-right で取る。
   gap だと「1組ぶん＝-50%」がぴったり合わずに継ぎ目がずれる */
.pickup-item {
    flex: none;
    width: 231px;
    margin-right: 26px;
}

.pickup-slider figure {
    width: 231px;
    height: 345px;
    overflow: hidden;
}

.pickup-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pickup-btn {
    width: 317px;
    height: 67px;
    margin: 44px auto 0;
    font-size: 24px;
}

/* =========================================================
   Concept
   ========================================================= */
.concept {
    position: relative;
    height: 811px;
    padding-top: 87px;
    box-sizing: border-box;
}

.concept-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.concept-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .5; /* XD側で不透明度50%指定 */
}

.concept-inner {
    width: 1080px;
    margin: 0 auto;
}

/* Alluraの装飾文字と日本語見出しを重ねる（XD上で重ねてある） */
.concept-lead {
    position: relative;
    margin-top: 49px;
    padding-left: 192px;
}

.concept-lead__en {
    font-size: 96px;
    line-height: 1;
    color: var(--gold-text);
    opacity: .3; /* XD指定 */
}

/* XDでは中央揃えのオフセット込みで左端x=148（tx372 − 223.68） */
.concept-lead__ja {
    /* XDは中心x=372（左端164.3）で本文より15.7px左に出ていたが、
       先頭を本文の左端(180)に揃える（2026-10-01 蓮太朗さんの指示） */
    position: absolute;
    top: 44.8px;
    left: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    color: #C0AA89;
}

/* XDでは手動改行だが、レスポンシブで破綻するので幅で折り返す（幅はXDの行長に合わせた） */
.concept-text {
    /* XD：x=180 / W=607 / AmericanTypewriter-Bold 18px / 行送り33 */
    width: 607px;
    margin-top: 3.8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 33px;
    color: #C0AA89;
}

/* =========================================================
   Our Quality
   ========================================================= */
.quality {
    padding: 20px 0 140px;
}

.quality-list {
    width: 900px;
    margin: 67.2px auto 0;
}

.quality-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 32px;
    height: 420px;
}

.quality-item:last-child {
    height: 300px;
}

.quality-item__img {
    width: 400px;
    height: 300px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid #707070;
}

/* 素材未着のプレースホルダ表示（デザインの「4:3」枠） */
.quality-item__ph {
    position: relative;
    top: -8.7px;
    font-size: 32px;
    font-weight: 700;
    color: var(--black);
}

.quality-item__body {
    width: 468px;
}

.quality-item__title {
    margin-top: -10.35px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    color: #C0AA89;
    white-space: nowrap; /* XDでは折り返さない指定（テキスト幅自動） */
}

.quality-item__text {
    /* XD：AmericanTypewriter-Bold 18px / 行送り33（4か所とも） */
    margin-top: 12.2px;
    font-size: 18px;
    font-weight: 700;
    line-height: 33px;
    color: #C0AA89;
}

/* XDでは番号の縦位置が1つずつ違うので item ごとに指定する */
.quality-item:nth-child(1) .quality-item__num { bottom: 71.7px; }
.quality-item:nth-child(2) .quality-item__num { bottom: 43.7px; }
.quality-item:nth-child(3) .quality-item__num { bottom: 56.7px; left: 773px; }
.quality-item:nth-child(4) .quality-item__num { bottom: -46.3px; }

.quality-item__num {
    position: absolute;
    left: 763px;           /* XD：x=1033（.quality-list の左端270から763） */
    right: auto;
    bottom: -38px;
    font-size: 116px;
    line-height: 1;
    color: var(--gold-text);
    opacity: .3; /* XD指定 */
}

/* =========================================================
   Cast 在籍一覧
   ========================================================= */
/* XD（9/26 19時修正版）：Castの「出勤情報を見る」が削除され、Price以下が107px上がった。
   ボタン（高さ67＋上余白49.4＝116.4px）を外したぶんのうち 9.4px は下余白として残す */
.cast {
    padding: 40px 0 49.4px;
}

.cast-list {
    display: grid;
    grid-template-columns: repeat(4, 231px);
    gap: 45.4px 26px;
    width: 1002px;
    margin: 42.9px auto 0;
}

.cast-card__img {
    position: relative;
    width: 231px;
    height: 345px;
}

.cast-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 出勤ステータス（画像の左上に重ねる） */
.cast-card__status {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    height: 33px;
    padding: 0 12px;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #FFFFFF;
}

.cast-card__status.is-standby,
.cast-card__status.is-next {
    background: var(--gold-deep);
}

/* XDの実寸は99／118／93pxだが、ブラウザの字幅では収まらず折り返すため
   内容にあわせた幅にしている（確認事項に記載） */

.cast-card__status.is-closed {
    background: #808080;
}

.cast-card__catch {
    margin-top: 19.6px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: var(--gold-text);
}

.cast-card__name {
    margin-top: 10px;
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
    color: var(--gold-text);
}

/* =========================================================
   Price 料金・コース
   ========================================================= */
.price {
    padding: 126px 0 47px;
}

/* XDでは中央より20px左に置かれている（見出しは中央720、料金表は中央700.5） */
/* 🔴 画面左からの固定位置にすると1440pxより広い画面で左に寄ってしまうので、
   中央ぞろえにしたうえで XD のぶんだけ左へずらす（XDでは画面中央より19.5px左） */
.price-list {
    position: relative;
    right: 19.5px;
    width: 875px;
    margin: 50.6px auto 0;
}

/* XD：行の基準は英語名の枠の上端。数字は枠より上に出る */
.price-row {
    display: flex;
    align-items: flex-start;
    height: 62px;
    padding: 0 2px;
    box-sizing: border-box;
}

/* 「オススメ」の行だけ枠で囲って強調する */
.price-row.is-recommend {
    height: 78px;
    margin-top: -6px;
    margin-bottom: 29px;
    border: 2px solid var(--gold);
}

/* XD：Luxuryの行だけ間隔が65px */
.price-row:last-child {
    margin-top: 3px;
}

.price-row__badge {
    width: 98px;
    height: 30px;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .027em;
    color: #FFFFFF;
}

.price-row__badge.is-on {
    background: var(--gold);
    border: 1px solid #707070;
    box-sizing: border-box;
}

/* オススメ行：XDではバッジが枠線の上に重なり、英語名の枠は行の上端から24px。
   このバッジだけXDに枠線がない */
.price-row.is-recommend .price-row__badge {
    height: 78px;
    margin: -2px 0 0 -2px;
    border: none;
    font-size: 18px;
}

.price-row__en {
    width: 111px;
    height: 30px;
    margin-left: 41px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #707070;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 200;
    letter-spacing: .027em;
    color: #FFFFFF;
}

.price-row.is-recommend .price-row__en {
    width: 122px;
    height: 33px;
    margin-top: 22px;
    margin-left: 39px;
    font-size: 15px;
}

.price-row__time {
    width: 120px;          /* 3桁（150/180）が収まる幅。右端の位置は margin-left で据え置く */
    margin-top: -22.1px;
    margin-left: 15px;
    flex-shrink: 0;
    text-align: right;
    font-size: 26px;
    letter-spacing: .006em;
    color: #C1A989;
}

.price-row__num {
    margin-right: 4px;
    font-size: 40px;
}

.price-row.is-recommend .price-row__num {
    font-size: 43px;
}

/* XD：線は672〜828（156px）、金額は851〜991（行の右端1138まではあえて空ける）
   XDの指定は破線（2px描いて4px空ける） */
.price-row__line {
    width: 156px;
    height: 1px;
    margin: 14px 15px 0 24px;
    flex: none;
    background-image: repeating-linear-gradient(to right, #707070 0 2px, transparent 2px 6px);
}

.price-row__yen {
    width: 140px;
    margin-top: -13.1px;
    flex-shrink: 0;
    text-align: center;
    font-size: 34px;
    letter-spacing: .027em;
    color: #FFFFFF;
}

/* オススメ行はXDで線700〜895、金額895〜。
   XDでは min の左端が618なので、分数の枠に右余白26pxを持たせている */
.price-row.is-recommend .price-row__time {
    width: 152px;
    margin-top: -1.1px;
    padding-right: 19.5px;
    box-sizing: border-box;
    font-size: 28px;
}

.price-row.is-recommend .price-row__line {
    width: 172px;
    margin: 38px 27.5px 0 -3px;
}

.price-row.is-recommend .price-row__yen {
    width: 155px;
    margin-top: 8.9px;
    font-size: 37px;
}

/* オプション --------------------------------------------- */
.price .price-option-title {
    margin-top: 14.9px;
    padding-right: 36px;
}

/* 同上。XDでは画面中央より18.5px左 */
.option-list {
    position: relative;
    right: 18.5px;
    width: 873px;
    height: 363px;
    margin: 15.1px auto 0;
    padding: 29px 159px 29px 139px;
    background: var(--black);
    box-sizing: border-box;
}

.option-row + .option-row {
    margin-top: 13.5px;
}

.option-row__head {
    display: flex;
    align-items: center;
    height: 40px;
}

.option-row__name {
    font-size: 18px;
    letter-spacing: .027em;
    color: var(--gold-title);
    white-space: nowrap;
}

.option-row__line {
    height: 1px;
    margin: 7px 21.8px 0 13px;
    flex: 1;
    background-image: repeating-linear-gradient(to right, #707070 0 2px, transparent 2px 6px);
}

.option-row__yen {
    font-size: 31px;
    line-height: 1;
    letter-spacing: .027em;
    color: #FFFFFF;
    white-space: nowrap;
}

.option-row__note {
    margin-top: -3.5px;
    line-height: 11px;
    font-size: 12px;
    letter-spacing: .006em;
    color: #FFFFFF;
}

/* ご案内・注意事項 ---------------------------------------- */
/* 同上 */
.price-notes {
    /* XD：テキストボックスは x=265 / W=862（autoHeight）。
       1440pxのとき margin:auto で left=289 になるので right:24px で 265 に合わせる */
    position: relative;
    right: 24px;
    width: 862px;
    margin: 15.4px auto 0;
}

.price-notes__title {
    font-size: 21px;
    color: var(--gold-text);
}

.price-notes__list {
    margin-top: 21.6px;
    list-style: none;
}

.price-notes__list li {
    padding-left: 1em;
    text-indent: -1em;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #D5D5D5;
}

.price-notes__list li::before {
    content: "・";
}

/* =========================================================
   Private & Secure
   ========================================================= */
.secure {
    padding: 117px 0 172.8px;
}

.secure-list {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 121.3px;
    padding-right: 5px;    /* XD：カードの中心は717.5（画面中央より2.5px左） */
}

.secure-card {
    position: relative;
    width: 333px;
    height: 398px;
    padding: 34px 20px 0;
    background: var(--card);
    border: 1px solid #707070;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 3px 3px rgba(0, 0, 0, .16); /* XD指定のドロップシャドウ */
}

/* XD：見出しと本文のあいだに 77x2 の金色のあしらい線が入る */
.secure-card::after {
    content: "";
    position: absolute;
    top: 199.3px;
    left: 124px;
    width: 77px;
    height: 2px;
    background: var(--gold-text);
}

.secure-card:nth-child(2)::after { left: 127.5px; }
.secure-card:nth-child(3)::after { top: 203.3px; left: 124.5px; }

/* XD：アイコンは枠の上端に揃っている（高さが3枚とも違う） */
.secure-card__icon {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 79px;
}

/* XD：2枚目のアイコンだけ中心から3px右にずれている */
.secure-card:nth-child(2) .secure-card__icon {
    padding-left: 6px;
}

/* XD：79x76 ／ 77x74 ／ 77x77 */
.secure-card__icon img {
    width: 79px;
    height: 76px;
}

.secure-card:nth-child(2) .secure-card__icon img {
    width: 77px;
    height: 74px;
}

.secure-card:nth-child(3) .secure-card__icon img {
    width: 77px;
    height: 77px;
}

/* XDではカードごとに見出し・本文の高さが違う */
.secure-card:nth-child(1) .secure-card__title { margin-top: 24.3px; }
.secure-card:nth-child(2) .secure-card__title { margin-top: 22.2px; }
.secure-card:nth-child(3) .secure-card__title { margin-top: 9.2px; }
.secure-card:nth-child(1) .secure-card__text  { margin-top: 72px; }
.secure-card:nth-child(2) .secure-card__text  { margin-top: 73px; }
.secure-card:nth-child(3) .secure-card__text  { margin-top: 56px; }

.secure-card__title {
    margin-top: 28px;
    font-size: 23px;
    line-height: 32px;
}

.secure-card__text {
    margin-top: 95px;
    font-size: 18px;
    line-height: 32px;
}

/* XDでは3枚目だけ行間26px */
.secure-card:nth-child(3) .secure-card__text {
    line-height: 26px;
}

/* カンプでは「心身のリラクゼーションを目的」だけ金色 */
.secure-note__em {
    color: var(--gold-text);
}

.secure-note {
    margin-top: 50.2px;
    font-size: 21px;
    line-height: 31px;
    text-align: center;
}

/* =========================================================
   Q&A
   ========================================================= */
.qa {
    height: 761px;
    padding-top: 25px;
    background: var(--black-2);
    box-sizing: border-box;
}

.qa-list {
    width: 960px;
    margin: 49.9px auto 0;
}

.qa-item + .qa-item {
    margin-top: 29.2px;
}

.qa-item__q,
.qa-item__a {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.qa-item__q {
    padding-bottom: 19.5px;
    border-bottom: 1px solid #707070;
}

/* XDではAが回答の2行目の高さに置かれている */
.qa-item__a {
    align-items: center;
    padding-top: 13.2px;
}

.qa-item__q .qa-item__mark {
    margin-top: -5px;
}

.qa-item__a .qa-item__mark {
    margin-top: -7.5px;
}

/* XD：区切り線 x=240／Q・Aは直径51の丸の上／本文 x=306
   丸の色は Q=#B48843（白文字）・A=#BFAA89（黒文字） */
.qa-item__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 51px;
    height: 51px;
    flex-shrink: 0;
    padding-bottom: 10.2px;   /* XDでは文字が丸の中心より少し上にある */
    box-sizing: border-box;
    border-radius: 50%;
    font-size: 29px;
    line-height: 1;
}

.qa-item__q .qa-item__mark {
    background: var(--gold);
    color: #FFFFFF;
}

.qa-item__a .qa-item__mark {
    background: var(--gold-title);
    color: var(--black);
}

.qa-item__q .qa-item__text {
    font-size: 22px;
    line-height: 1.5;
}

.qa-item__a .qa-item__text {
    font-size: 18px;
    line-height: 1.7;
}

/* =========================================================
   Recruit
   ========================================================= */
.recruit {
    position: relative;
    padding: 30px 0 0;
}

/* XD：見出しの下に 149x1 の線 */
.recruit::after {
    content: "";
    position: absolute;
    top: 42.3px;
    left: 646px;
    width: 149px;
    height: 1px;
    background: #707070;
}

.recruit-body {
    position: relative;
    height: 745px;
    margin-top: 147.8px;
    overflow: hidden;
}

/* XD：写真の下端84pxはマスクで切られていて、そこは背景色が出る（745 - 84 = 661） */
.recruit-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 661px;
    overflow: hidden;
    z-index: -1;
}

/* XD：写真(1774x887)は 1489x745 で x=-48 に置かれている。
   高さ745のまま敷いて、cover の余剰50pxのうち48pxを左へ送る */
.recruit-bg img {
    width: 100%;
    height: 745px;
    object-fit: cover;
    object-position: 96% center;
}

/* 各要素はXDの座標どおりに置く（テキストは1行で折り返さない） */
.recruit-left,
.recruit-right {
    position: static;
}

.recruit-en,
.recruit-title,
.recruit-lead,
.recruit-text,
.recruit-btn,
.recruit-allura,
.recruit-catch {
    position: absolute;
    white-space: nowrap;
}

/* 🔴 1440pxより広い画面での見え方（2026-10-01 蓮太朗さんの指示）。
   Recruitの中身はXDの座標どおりに絶対配置してあるため（例：.recruit-catch は left:968px）、
   画面が1440pxより広がると中身だけが左に寄ってしまう。
   → 1440pxの箱ごと中央に置き、背景写真だけを画面いっぱいに広げる */
@media (min-width: 1441px) {
    .recruit {
        width: 1440px;
        margin-right: auto;
        margin-left: auto;
    }

    .recruit-bg {
        left: 50%;
        right: auto;
        width: 100vw;
        transform: translateX(-50%);
    }
}

/* XD：RECRUIT の左右にあしらい線（長さが左右で違う） */
.recruit-en::before,
.recruit-en::after {
    content: "";
    position: absolute;
    top: 27.3px;
    height: 1px;
    background: #707070;
}

.recruit-en::before { left: -189px;  width: 131.8px; }
.recruit-en::after  { left: 199.2px; width: 161.6px; }

.recruit-en {
    top: 92.1px;
    left: 273.6px;
    font-size: 24px;
    line-height: 49px;
    letter-spacing: .221em;
}

/* XD：「セラピスト」の5文字だけ62px、「募集」が66px。
   XDは最後の文字のうしろに字間を付けないので、その分を詰めている */
.recruit-title span {
    font-size: 62px;
}

.recruit-title::after {
    content: "";
    margin-left: -.265em;
}

.recruit-title {
    top: 165px;
    left: 85px;
    font-size: 66px;
    line-height: 88px;
    letter-spacing: .265em;
}

.recruit-lead {
    top: 289px;
    left: 128px;
    font-size: 32px;
    line-height: 41px;
    letter-spacing: .091em;
}

/* 9/26の文言差し替えで字幅が変わったため、XDの中心(x=360)に合わせて left を引き直した */
.recruit-text {
    top: 361.1px;
    left: 176px;
    font-size: 19px;
    line-height: 36px;
    letter-spacing: .153em;
    text-align: center;
}

.recruit-btn {
    top: 475px;
    left: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 357px;
    height: 65px;
    line-height: 36px;
    box-sizing: border-box;
    text-align: center;
    background: transparent;
    border: 2px solid #D1B791;
    color: #FFFFFF;
    font-family: inherit;
    padding-right: 24px;
    font-size: 20px;
    letter-spacing: .153em;
    text-indent: .153em;
    cursor: pointer;
    transition: background .3s;
}

/* カンプ：文字の右に矢印（横線30px＋小さな矢じり）。ボタン右端から54px */
.recruit-btn::after {
    content: "";
    position: absolute;
    top: 36.5px;
    right: 54px;
    width: 30px;
    height: 1px;
    background: #FFFFFF;
}

.recruit-btn::before {
    content: "";
    position: absolute;
    top: 32.5px;
    right: 54px;
    width: 9px;
    height: 9px;
    border-top: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    transform: rotate(45deg);
    transform-origin: right center;
}

.recruit-btn:hover {
    background: rgba(209, 183, 145, .2);
}

/* XD：この装飾文字だけ -11度 回転している（回転の中心は1行目のベースライン先頭） */
.recruit-allura {
    top: 394.2px;
    left: 947px;
    transform: rotate(-11deg);
    transform-origin: 0 53px;
    font-size: 83px;
    line-height: 78px;
    letter-spacing: .011em;
    color: var(--gold-text);
    opacity: .6; /* XD指定 */
}

.recruit-catch {
    top: 521.1px;
    left: 968px;
    font-size: 28px;
    line-height: 78px;
    color: var(--gold-text);
}

/* =========================================================
   Reserve ご予約
   ========================================================= */
.reserve {
    padding: 90px 0 67px;
}

/* XDではリード文だけ中心が733（見出しは720）。XDどおりにしている */
.reserve-lead {
    margin-top: 3.5px;
    padding-left: 26px;
    font-size: 22px;
    line-height: 34px;
    text-align: center;
}

.reserve-form {
    width: 960px;
    min-height: 1298px;
    margin: 40.6px auto 0;
    padding: 52px 36px 0;
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    font-family: "Noto Sans JP", sans-serif;
}

/* XDでは1つ目の見出しだけ枠からの距離が違う */
.form-group-title {
    position: relative;
    margin-top: 42.2px;
    font-size: 24px;
    line-height: 34px;
}

/* XD：見出しの下に 867.5x4 の線 */
.form-group-title::after {
    content: "";
    position: absolute;
    top: 41.8px;
    left: 3px;
    width: 867.5px;
    height: 4px;
    background: #707070;
}

.form-group-title.is-first {
    position: relative;
    top: -10.6px;
    margin-top: 0;
}

.form-row {
    display: flex;
    align-items: flex-start;
    margin-top: 13.2px;
}

/* XDの行間隔は一定ではないので1行ずつ指定する。
   Contact Form 7 が出力するDOMでは行が <form> の子になり :nth-child が効かないため、
   項目ごとのクラスで指定している（cf7-form.txt 側にも同じクラスを入れてある） */
.form-row.is-name      { margin-top: 10px; }
.form-row.is-hotel     { margin-top: 23.8px; }
.form-row.is-room      { margin-top: 16px; }
.form-row.is-therapist { margin-top: 41px; }
.form-row.is-course    { margin-top: 16px; }
.form-row.is-datetime  { margin-top: 16px; }
.form-row.is-lang      { margin-top: 16px; }
.form-row.is-message   { margin-top: 7px; }

.form-row__label {
    display: flex;
    align-items: center;
    gap: 34px;
    width: 248px;
    padding-top: 6.04px;   /* XD：ラベルのベースラインは入力欄の上端から30px */
    padding-left: 2px;
    flex-shrink: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 34px;
}

.form-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 20px;
    flex-shrink: 0;
    border: 1px solid #707070;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 1;
}

.form-row__field {
    width: 625px;
}

.form-row__field input[type="text"],
.form-row__field input[type="tel"],
.form-row__field input[type="email"],
.form-row__field select {
    width: 100%;
    height: 44px;
    padding: 0 30px;
    background: transparent;
    border: 1px solid #707070;
    box-sizing: border-box;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 16px;
}

.form-row__field select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #FFFFFF 50%),
                      linear-gradient(135deg, #FFFFFF 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.form-row__field select option {
    background: var(--black);
}

.form-row__field input::placeholder,
.form-row__field textarea::placeholder {
    color: #FFFFFF;
    opacity: 1;
}

.form-row__field textarea {
    width: 623px;
    height: 87px;
    padding: 12px 30px;
    background: transparent;
    border: 1px solid #707070;
    box-sizing: border-box;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 16px;
    resize: vertical;
}

.form-row__field.is-datetime {
    display: flex;
    gap: 16px;
}

.form-date,
.form-time {
    height: 48px;
    padding: 0 30px;
    background: transparent;
    border: 1px solid #707070;
    box-sizing: border-box;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 16px;
    color-scheme: dark;    /* ピッカーのアイコンとカレンダーを暗い地色用に描く */
}

/* 🔴 iOS Safari は、値が空の date/time に「年/月/日」もアイコンも表示しない
   （デスクトップChromeは表示する）。枠だけが残って入力できる場所に見えないため、
   JSで is-empty を付けて自前の文字を重ねる */
.form-date.is-empty::before,
.form-time.is-empty::before {
    content: attr(data-placeholder);
    color: #707070;
    pointer-events: none;
}

.form-date {
    width: 325px;
}

.form-time {
    width: 282px;
}

.form-row__field.is-radio {
    display: flex;
    align-items: flex-start;
    gap: 50px;
    height: 44px;
    padding: 1.14px 0 0;
}

.form-row__field.is-radio label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 34px;
    cursor: pointer;
}

/* XD：ラジオは直径27・枠1px #707070 */
.form-row__field.is-radio input[type="radio"] {
    width: 27px;
    height: 27px;
    margin: 0;
    flex-shrink: 0;
    appearance: none;
    background: transparent;
    border: 1px solid #707070;
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
}

.form-row__field.is-radio input[type="radio"]:checked::after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    margin: 5px auto 0;
    background: var(--gold);
    border-radius: 50%;
}

/* 料金内訳 ------------------------------------------------ */
.estimate {
    position: relative;
    width: 884px;
    height: 450px;
    margin-top: 19px;
    padding: 14.4px 36px 24px 30px;
    border: 1px solid #707070;
    box-sizing: border-box;
}

.estimate-head {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

/* XD：見出しの下に 827.9x1 の線 */
.estimate-head::after {
    content: "";
    position: absolute;
    top: 43.6px;
    left: -5px;
    width: 827.9px;
    height: 1px;
    background: #707070;
}

.estimate-title {
    font-size: 24px;
    line-height: 34px;
}

.estimate-caption {
    position: relative;
    top: -4px;
    right: -15.3px;
    font-size: 14px;
    line-height: 34px;
}

.estimate-list {
    margin-top: 12.6px;
}

/* XD：項目名は左端303、右側（金額・注記）は左端724で揃っている */
.estimate-row {
    display: flex;
    align-items: center;
    min-height: 35px;
    font-size: 16px;
    line-height: 34px;
}

.estimate-row dt {
    width: 412px;
    flex-shrink: 0;
}

.estimate-note {
    font-size: 16px;
    line-height: 34px;
}

.estimate-total {
    position: relative;
    display: flex;
    align-items: center;
    margin: 5px -9.9px 0 -2px;
    padding-top: 10px;
    border-top: 1px solid #707070;
}

/* XD：合計の下に 867.5x4 の線 */
.estimate-total::after {
    content: "";
    position: absolute;
    top: 53.5px;
    left: -19.7px;
    width: 867.5px;
    height: 4px;
    background: #707070;
}

.estimate-total__label {
    width: 412px;
    flex-shrink: 0;
    font-size: 20px;
}

.estimate-total__price {
    font-size: 20px;
}

/* 同意・送信 ---------------------------------------------- */
/* XD：チェックボックスは枠の左端から284pxの位置 */
.form-privacy {
    position: absolute;
    top: 331px;
    left: 283px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.form-privacy label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    cursor: pointer;
}

.form-privacy input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin: 0;
    appearance: none;
    background: transparent;
    border: 1px solid #707070;
    box-sizing: border-box;
    cursor: pointer;
}

.form-privacy input[type="checkbox"]:checked {
    background: var(--gold);
    border-color: var(--gold-border);
}

.form-privacy input[type="checkbox"]:checked::after {
    content: "";
    display: block;
    width: 6px;
    height: 12px;
    margin: 3px auto 0;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.form-submit {
    position: absolute;
    top: 373px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 539px;
    height: 53px;
    box-sizing: border-box;
    background: transparent;
    border: 3px solid #707070;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 21px;
    cursor: pointer;
    transition: background .3s, border-color .3s;
}

.form-submit:hover {
    background: var(--gold);
    border-color: var(--gold-border);
}

/* =========================================================
   フッター
   ========================================================= */
.footer {
    height: 240px;
    background: #000000;
}

/* XD：ロゴ136x100を(208,45)、ナビは2列で x=878／1039 */
/* XD：フッターの中に 1080x1 の線 */
.footer-inner::after {
    content: "";
    position: absolute;
    top: 183.1px;
    left: 180px;
    width: 1080px;
    height: 1px;
    background: #707070;
}

.footer-inner {
    position: relative;
    width: 100%;
    max-width: 1440px;
    height: 100%;
    margin: 0 auto;
}

.footer-logo {
    position: absolute;
    top: 45px;
    left: 208px;
    width: 136px;
}

.footer-nav {
    position: absolute;
    top: 27px;
    left: 878px;
}

.footer-nav__list {
    display: grid;
    grid-template-columns: repeat(2, 161px);
    list-style: none;
}

/* inline のままだとタップ領域が文字の高さ分しかないので inline-block にする */
.footer-nav__list a {
    position: relative;
    top: 4.5px;
    display: inline-block;
    font-size: 19px;
    line-height: 52px;
    color: var(--gold-title);
    transition: opacity .3s;
}

.footer-nav__list a:hover {
    opacity: .7;
}

/* =========================================================
   モーダル（共通）
   ========================================================= */
/* 🔴 中身が画面より高いときは、この器ごとスクロールさせる。
   中身側に max-height を持たせて中央ぞろえにすると、はみ出したぶんが
   上下に均等に出て「上が画面外に行ったまま戻せない」状態になる（2026-09-26）。
   .modal-inner の margin:auto と組み合わせることで、
   入りきるときは中央・入りきらないときは上から並ぶ */
.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(13, 9, 6, .5); /* XD: #0D0906 を不透明度50%で敷いている */
    box-sizing: border-box;
}

.modal.is-open {
    display: flex;
}

/* XDのプロトタイプ設定に入っている 0.3秒・ease-out に合わせて、
   ぱっと出さずに一段やわらげる。display は切り替えが要るので
   JS が is-open →（次の描画で）is-visible の順にクラスを付ける */
.modal {
    opacity: 0;
    transition: opacity .3s ease-out;
}

.modal.is-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .modal {
        opacity: 1;
        transition: none;
    }
}

.modal-inner {
    position: relative;
    width: 960px;
    margin: auto;   /* 入りきるときは中央、入りきらないときは上から */
    padding: 14px;
    background: #0D0906;
    box-sizing: border-box;
    box-shadow: 0 3px 3px rgba(0, 0, 0, .478); /* XD指定 */
}

/* 内側の金色の罫線（XDの933x691枠）。XDではこの枠にも影がついている */
.modal-inner::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid var(--gold-text);
    box-shadow: 0 3px 3px rgba(0, 0, 0, .478);
    pointer-events: none;
}

.modal-inner.is-cast {
    height: 718px;
}

/* カンプ：本体は 960x1069（内枠 932x1044 ＋ padding 14px） */
.modal-inner.is-recruit {
    height: 1069px;
}

.modal-close {
    position: absolute;
    top: 26px;
    right: 26px;
    z-index: 2;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.modal-close::before,
.modal-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--gold-text);
}

.modal-close::before { transform: rotate(45deg); }
.modal-close::after  { transform: rotate(-45deg); }

/* セラピスト詳細 ----------------------------------------- */
/* XD：写真は 234x349 を 234x308 のマスクで切っている（下41pxは出ない）。
   切らないと、下に置いたサムネイルの隙間から写真が見えてしまう */
.modal-cast__img {
    position: absolute;
    top: 99px;
    left: 95px;
    width: 234px;
    height: 308px;
    overflow: hidden;
}

.modal-cast__img img {
    width: 234px;
    height: 349px;
    object-fit: cover;
    transition: opacity .2s ease-out;
}

.modal-cast__thumbs {
    position: absolute;
    top: 419px;
    left: 95px;
    display: flex;
    gap: 10px;
}

/* サムネイル（XD：51x62）。登録した写真が2枚以上あるときだけ出る。
   押すと上の大きい写真が入れ替わる */
.modal-cast__thumb {
    flex: none;
    width: 51px;
    height: 62px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #FFFFFF;
    overflow: hidden;
    cursor: pointer;
    opacity: .55;
    transition: opacity .3s ease-out;
}

.modal-cast__thumb.is-current,
.modal-cast__thumb:hover {
    opacity: 1;
}

.modal-cast__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-cast__catch {
    position: absolute;
    top: 113px;
    left: 377px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: var(--gold-text);
}

.modal-cast__name {
    position: absolute;
    top: 148px;
    left: 377px;
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
    color: var(--gold-text);
}

.modal-cast__en {
    position: absolute;
    top: 149px;
    left: 697px;
    font-size: 72px;
    line-height: 1;
    color: var(--gold-text);
    opacity: .3; /* XD指定 */
}

/* XD：サイズ表記の下に 488x1 の区切り線 */
.modal-cast__size::after {
    content: "";
    position: absolute;
    top: 24px;
    left: 0;
    width: 488px;
    height: 1px;
    background: #707070;
}

.modal-cast__size {
    position: absolute;
    top: 190px;
    left: 377px;
    display: flex;
    gap: 12px;
    list-style: none;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: var(--gold-text);
}

.modal-cast__intro-title {
    position: absolute;
    top: 232px;
    left: 377px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: var(--gold-text);
}

/* XD：本文の枠は488px幅（1行48文字で折り返す）。ダミーのXが続くので break-all で折る */
.modal-cast__intro {
    position: absolute;
    top: 256px;
    left: 377px;
    width: 488px;
    word-break: break-all;
    font-size: 14px;
    font-weight: 700;
    line-height: 27px;
    color: var(--gold-text);
}

.modal-cast__btn {
    position: absolute;
    top: 438px;
    left: 706px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 159px;
    height: 44px;
    background: var(--gold);
    border: 1px solid #707070;
    color: var(--ivory);
    font-family: inherit;
    font-size: 18px;
    cursor: pointer;
    transition: opacity .3s;
}

.modal-cast__btn:hover {
    opacity: .8;
}

/* 出勤情報 ------------------------------------------------ */
.schedule {
    position: absolute;
    top: 520px;
    left: 95px;
    display: flex;
}

.schedule-col {
    width: 110px;
}

.schedule-col__date {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    background: #B99A63;
    border: .5px solid #D5C5A9;
    box-sizing: border-box;
    font-size: 13px;
    color: var(--ivory);
}

.schedule-col__time {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 67px;
    background: #FFFFFF;
    border: .5px solid #D5C5A9;
    box-sizing: border-box;
    font-size: 15px;
    color: #0D0906;
}

/* 募集要項 ------------------------------------------------ */
/* カンプ：1行目 y178（本体基準95px）、24px、行間35px、4行 */
.modal-recruit__lead {
    position: absolute;
    top: 88px;
    left: 0;
    width: 100%;
    font-size: 24px;
    line-height: 35px;
    text-align: center;
}

/* カンプ：Allura 75px。リードの右下に重なる */
.modal-recruit__en {
    position: absolute;
    top: 213px;
    left: 625px;
    font-size: 75px;
    line-height: 1;
    color: var(--gold-text);
    opacity: .3; /* XD指定 */
}

/* カンプ：表は内枠いっぱい（本体基準 x14〜946）。上端282px、
   ラベル列は x14〜345 の中央揃え、内容列は x345 から30px入ったところ */
.modal-recruit__list {
    position: absolute;
    top: 282px;
    left: 14px;
    width: 932px;
    box-sizing: border-box;
}

/* カンプ：ラベル列と内容列の仕切りは、行ごとではなく表を貫く1本の縦線（x585＝本体基準331px） */
.modal-recruit__list {
    position: absolute;
}

.modal-recruit__list::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 331px;
    width: 1px;
    height: 535px;
    background: #D0B792;
}

.modal-recruit__row {
    display: flex;
    align-items: center;
    height: 68px;
    border-top: 1px solid #D0B792;
    box-sizing: border-box;
}

/* カンプ：行の高さが項目ごとに違う（XDのまま） */
.modal-recruit__row:nth-child(5) { height: 67px; }
.modal-recruit__row:nth-child(6) { height: 65px; }
.modal-recruit__row:nth-child(7) { height: 74px; }

.modal-recruit__row:last-child {
    border-bottom: 1px solid #D0B792;
}

/* カンプ：ラベルは列の中央ではなく右寄り（文字の中心が本体基準222px） */
.modal-recruit__row dt {
    box-sizing: border-box;
    width: 331px;
    padding-left: 86px;
    flex-shrink: 0;
    font-size: 22px;
    text-align: center;
}

.modal-recruit__row dd {
    padding-left: 30px;
    font-size: 20px;
    line-height: 1.5;
}

/* カンプ：448x67 を本体基準 (256, 897) に */
.modal-recruit__btn {
    position: absolute;
    top: 897px;
    left: 256px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 448px;
    height: 67px;
    background: var(--gold);
    font-size: 24px;
    transition: opacity .3s;
}

/* カンプ：文字の右に矢じりの無い横線（47x1px、ボタン右端から20px） */
.modal-recruit__btn::after {
    content: "";
    position: absolute;
    top: 38px;
    right: 20px;
    width: 47px;
    height: 1px;
    background: #FFFFFF;
}

.modal-recruit__btn:hover {
    opacity: .8;
}

/* Castカードはクリックでモーダルを開く */
.cast-card {
    cursor: pointer;
}

.cast-card__img img {
    transition: opacity .3s;
}

.cast-card:hover .cast-card__img img {
    opacity: .8;
}

/* =========================================================
   SP（〜678px）
   デザイン基準：XD「nangoku_luxe-sp」375 x 13017
   ========================================================= */
/* =========================================================
   Contact Form 7 の出力に合わせる
   静的版のHTMLとDOM構造が変わる箇所だけを吸収している。
   （CF7は入力欄を <span class="wpcf7-form-control-wrap"> で包み、
     ラジオ・チェックは <span class="wpcf7-list-item"> で包む）
   ========================================================= */
.reserve-form .wpcf7-form-control-wrap {
    display: block;
}

/* CF7が出力する余分な余白を消す（見出しの .form-group-title は除く） */
.reserve-form .wpcf7 p:not([class]),
.reserve-form .screen-reader-response {
    margin: 0;
}

/* ラジオ（多言語サポート） */
.form-row__field.is-radio .wpcf7-radio {
    display: flex;
    align-items: center;
    gap: 50px;
}

.form-row__field.is-radio .wpcf7-list-item {
    margin: 0;
}

.form-row__field.is-radio .wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 34px;
    cursor: pointer;
}

/* 日付・時刻の2つ並び */
.form-row__field.is-datetime .wpcf7-form-control-wrap {
    display: block;
}

/* プライバシーポリシーの同意 */
.form-privacy .wpcf7-acceptance,
.form-privacy .wpcf7-list-item {
    display: block;
    margin: 0;
}

.form-privacy .wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    cursor: pointer;
}

/* 送信中のスピナー（ボタンの右横に出す） */
.wpcf7-spinner {
    position: absolute;
    margin: 14px 0 0 12px;
}

/* 入力エラーの注記 */
.wpcf7-not-valid-tip {
    margin-top: 6px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: #E27676;
}

.wpcf7-form-control.wpcf7-not-valid {
    border-color: #E27676;
}

/* 送信結果のメッセージ */
.wpcf7-response-output {
    margin: 24px 0 0;
    padding: 12px 16px;
    border: 1px solid #707070;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #FFFFFF;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
    border-color: #E27676;
}

.wpcf7-form.sent .wpcf7-response-output {
    border-color: var(--gold-border);
}

@media (max-width: 450px) {

    br.pc {
        display: none;
    }

    br.sp {
        display: block;
    }

    .only-pc {
        display: none;
    }

    .only-sp {
        display: inline;
    }

    /* 共通 ------------------------------------------------ */
    .section-title {
        font-size: 32px;
    }

    .section-subtitle {
        margin-top: 8px;
        font-size: 15px;
    }

    /* XD：見出し→サブの間隔はSPでもセクションごとに違う */
    .price .section-title,
    .price .section-subtitle,
    .price .price-option-title,
    .secure .section-title,
    .secure .section-subtitle { padding-right: 0; }

    .price .section-subtitle  { margin-top: 1px; }
    .secure .section-subtitle { margin-top: 3.6px; }
    .cast .section-subtitle   { margin-top: 3.6px; }

    /* FV -------------------------------------------------- */
    .fv-logo {
        top: 284px;
        width: 291px;
    }

    /* XD（SP）：黒い帯(375x66)の中に金色のボタン2つ(188x52)。
       188x2=376 で375に収まらないため、XDどおり左右に少しはみ出させている */
    /* 🔴 画面の下に貼り付ける（確認事項47・蓮太朗さんの判断 2026-09-26）。
       XDのデータに fixed の指定があり、カンプでもFVの高さ800pxに対して y734〜800＝
       画面の下端そのものなので、固定が設計意図で合っている。
       z-index は SPメニュー(99) より下。メニューを開いたら隠れる */
    /* メニューを開いているあいだは、下の固定ボタンを確実に消す。
       z-index だけだと上記のビューポートのズレで端が覗くことがある */
    body.is-menu-open .fv-btns {
        display: none;
    }

    .fv-btns {
        position: fixed;
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 98;
        display: flex;
        justify-content: space-between;
        height: 66px;
        padding: 7px 0;
        box-sizing: border-box;
        background: var(--black);
    }

    /* 固定したぶん、ページの最後がボタンに隠れないように空ける */
    .footer {
        padding-bottom: 66px;
        box-sizing: content-box;
    }

    .fv-btn {
        width: 184px;
        height: 52px;
        flex-shrink: 0;
        font-size: 17px;
    }

    /* XDは 188x52 を x=-3 と x=191 に置いており左右が数px切れるため、
       184x52 にして画面内に収めている（右側のボタンはXDどおり x=191） */
    .fv-btn.is-tel {
        display: flex;
    }

    /* Pickup Cast ----------------------------------------- */
    .pickup {
        padding: 43px 0 68px;
    }

    /* XD（SP）：Pickup見出しだけ色が違う */
    /* top はPC版の 4px を打ち消して、SPのXD位置に合わせている */
    .pickup-title {
        top: -4px;
        font-size: 32px;
        color: #C89C58;
    }

    .pickup-slider {
        margin-top: 19px;
    }

    .pickup-item,
    .pickup-slider figure {
        width: 175px;
    }

    .pickup-slider figure {
        height: 261px;
    }

    .pickup-btn {
        width: 159px;
        height: 34px;
        margin-top: 25px;
        font-size: 15px;
    }

    /* Concept --------------------------------------------- */
    .concept {
        height: auto;
        padding: 26px 27px 69.4px;
    }

    .concept .section-title {
        margin-top: -33px;
    }

    /* XD：背景は777x438でセクション上部にだけ敷かれている */
    .concept-bg {
        height: 438px;
    }

    .concept-bg img {
        object-position: center;
    }

    .concept-inner {
        width: 100%;
    }

    .concept-lead {
        position: relative;
        margin-top: 21.6px;
        padding-left: 0;
    }

    .concept-lead__en {
        margin-left: 110px;
        font-size: 47px;
    }

    .concept-lead__ja {
        position: absolute;
        top: 16px;
        left: 0;
        font-size: 22px;
        font-weight: 700;
    }

    .concept-text {
        width: 100%;
        margin-top: 17px;
        font-size: 15px;
        line-height: 28px;
    }

    /* Our Quality ----------------------------------------- */
    .quality {
        padding: 65.6px 20px 88.7px;
    }

    .quality .section-subtitle {
        margin-top: 7.6px;
    }

    .quality-list {
        width: 100%;
        margin-top: 25.6px;
    }

    .quality-item,
    .quality-item:last-child {
        display: block;
        height: auto;
    }

    /* XD（SP）：itemの間隔も1つずつ違う */
    .quality-item:nth-child(2) { margin-top: 36.1px; }
    .quality-item:nth-child(3) { margin-top: 14.1px; }
    .quality-item:nth-child(4) { margin-top: 49.1px; }

    /* XD（SP）：画像枠は 335x300（4:3ではない） */
    .quality-item__img {
        position: relative;
        width: 100%;
        height: 300px;
        padding-bottom: 0;
    }

    .quality-item__ph {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .quality-item__body {
        width: 100%;
        margin-top: 17.26px;
    }

    .quality-item__title {
        font-size: 22px;
        white-space: normal;
    }

    .quality-item__text {
        margin-top: 2.25px;
        font-size: 15px;
        line-height: 33px;
    }

    /* XDでは本文の行数がitemごとに違うため、番号の位置も1つずつ指定する */
    .quality-item:nth-child(2) .quality-item__num { margin-top: -93.9px; padding-left: 217px; }
    .quality-item:nth-child(3) .quality-item__num { margin-top: -61px;   padding-left: 217px; }
    .quality-item:nth-child(4) .quality-item__num { margin-top: -50.1px; padding-left: 220px; }

    /* XD（SP）：左端 248 / 237 / 237 / 240 に置かれている */
    .quality-item__num {
        position: static;
        margin-top: -47px;
        padding-left: 228px;
        font-size: 116px;
        line-height: 1;
        text-align: left;
    }

    /* Cast ------------------------------------------------ */
    .cast {
        padding: 30px 0 40px;
    }

    .cast .section-title {
        margin-top: -100.6px;
    }

    .cast-list {
        grid-template-columns: repeat(2, 151px);
        gap: 21px 9px;
        width: 311px;
        margin: 24.5px auto 0;
    }

    .cast-card__img {
        width: 151px;
        height: 226px;
    }

    .cast-card__status {
        height: 21px;
        padding: 0 10px;
        font-size: 11px;
    }

    .cast-card__catch {
        margin-top: 7px;
        font-size: 9px;
    }

    .cast-card__name {
        margin-top: 4px;
        font-size: 13px;
    }


    /* Price ----------------------------------------------- */
    /* 下余白は、注意事項を21px上げたぶんを足して Secure の位置を保つ */
    .price {
        padding: 40px 20px 51px;
    }

    /* PC用の「中央より19.5px左」はSPでは効かせない */
    .price-list,
    .option-list,
    .price-notes {
        right: 0;
    }

    .price-list {
        width: 100%;
        margin: 16.7px 0 0;
    }

    .price-row {
        align-items: center;
        height: 35px;
        padding: 0;
    }

    /* XD（SP）：行間隔は 35 / 49 / 47 / 37 と一定ではない */
    /* XD（SP）：オススメの枠は 333x47（他の行より2px狭い） */
    .price-row.is-recommend {
        width: 333px;
        height: 47px;
        margin: 8px 0 0;
    }

    .price-list .price-row:nth-child(4) {
        margin-top: 6px;
    }

    /* オススメ行もSPでは他の行と同じ寸法に戻す */
    .price-row.is-recommend .price-row__badge,
    .price-row.is-recommend .price-row__en,
    .price-row.is-recommend .price-row__time,
    .price-row.is-recommend .price-row__line,
    .price-row.is-recommend .price-row__yen {
        margin-top: 0;
    }

    .price-row.is-recommend .price-row__line {
        width: 46px;
        margin: 0 23px 0 2.2px;
    }

    .price-row.is-recommend .price-row__yen {
        width: 90px;
    }

    .price-list .price-row:last-child {
        margin-top: 2px;
    }

    .price-row__badge {
        width: 44px;
        height: 18px;
        font-size: 9px;
    }

    .price-row.is-recommend .price-row__badge {
        width: 45px;
        height: 20px;
        font-size: 9px;
        white-space: nowrap;
    }

    .price-row__en {
        width: 47px;
        height: 18px;
        margin-left: 4px;
        font-size: 9px;
    }

    .price-row.is-recommend .price-row__en {
        width: 47px;
        height: 21px;
        margin-left: 4px;
        font-size: 9px;
    }

    /* XD（SP）：分数の右端193／線194〜240／金額264 */
    .price-row__time {
        width: 68px;
        margin-top: -8.4px;
        margin-left: 10px;
        font-size: 14px;
    }

    .price-row.is-recommend .price-row__time {
        width: 74px;
        margin-top: -13.4px;
        margin-left: 14.8px;
        padding-right: 0;
        font-size: 15px;
    }

    .price-row__num {
        font-size: 22px;
    }

    .price-row.is-recommend .price-row__num {
        font-size: 24px;
    }

    .price-row__line {
        width: 46px;
        flex: none;
        margin: 0 24px 0 1px;
    }

    /* XD（SP）：金額はx=264から左揃えで描かれている */
    .price-row__yen {
        width: 90px;
        margin-top: 0;
        font-size: 18px;
        text-align: left;
    }

    .price-row.is-recommend .price-row__yen {
        font-size: 19px;
    }

    .price-option-title {
        margin-top: 28px;
    }

    /* XD（SP）：項目名の左端37px／金額の右端は画面から10px */
    .price .price-option-title {
        margin-top: 41.8px;
    }

    /* XD（SP）：項目名は x57、金額は右ぞろえで x317 まで */
    .option-list {
        width: 100%;
        height: auto;
        margin: -8.8px 0 0;
        padding: 20px 37.7px 20px 37px;
    }

    /* XD（SP）：オプションの行間隔は32px前後（PCの61pxより詰まっている） */
    .option-row__head {
        height: 20px;
    }

    .option-row + .option-row {
        margin-top: 6.7px;
    }

    /* 2026-09-26：XDの寸法どおりに戻した（それ以前は可読サイズへ起こしていた） */
    .option-row__note {
        margin-top: -5.7px;
        font-size: 7px;
    }

    .option-row__name {
        font-size: 10px;
    }

    /* XD：1行目の「延長30分」だけ11px */
    .option-row:first-child .option-row__name {
        font-size: 11px;
    }

    .option-row__yen {
        font-size: 15px;
    }

    /* XD：交通費（3行目）の金額だけ14px */
    .option-row:nth-child(3) .option-row__yen {
        font-size: 14px;
    }

    .price-notes {
        width: 100%;
        margin: 26px 0 0;
    }

    .price-notes__title {
        font-size: 11px;
    }

    /* XD（SP）：見出しの文字の下端 6695 → 本文1行目の上端 6702 */
    .price-notes__list {
        margin-top: 0.6px;
    }

    .price-notes__list li {
        font-size: 7px;
        line-height: 12px;
    }

    /* Private & Secure ------------------------------------ */
    /* 下余白は、カードを5px下げたぶんを引いて Q&A の位置を保つ */
    .secure {
        padding: 40px 20px 51px;
    }

    /* 2026-09-26：XD寸法に戻して Price が114px縮んだぶん、負のマージンをやめて引き直した */
    .secure .section-title {
        margin-top: 3.9px;
    }

    /* XD（SP）：カードは 335x324、1枚目の上端は 6961。
       PC用の padding-right:5px は解除する（SPでは335px幅いっぱい） */
    .secure-list {
        display: block;
        margin-top: 18.5px;
        padding-right: 0;
    }

    /* 枠を5px下げたぶん、上の余白を5px詰めて中身の位置は動かさない */
    .secure-card {
        width: 100%;
        height: 324px;
        padding: 35px 16px 0;
    }

    .secure-card + .secure-card {
        margin-top: 26px;
    }

    /* 3枚目だけ本文が5行あり、324pxの箱から9pxはみ出していた（2026-10-01 実測）。
       箱の大きさを中身に合わせる */
    .secure-card:nth-child(3) {
        height: auto;
        min-height: 324px;
    }

    /* XD：タイトル23px／本文18px lh32。カードごとに高さが違う */
    /* XD（SP）：あしらい線は x149.5（カード左端から129.5） */
    .secure-card::after {
        top: 180px;
        left: 129.5px;
    }

    .secure-card:nth-child(2)::after { top: 168px; left: 129.5px; }
    .secure-card:nth-child(3)::after { top: 183px; left: 129.5px; }

    /* XD（SP）：アイコンの上余白もカードごとに違う（40 / 37 / 21） */
    .secure-card:nth-child(2) .secure-card__icon { margin-top: -3px; }
    .secure-card:nth-child(3) .secure-card__icon { margin-top: -19px; }

    .secure-card:nth-child(1) .secure-card__title { margin-top: 12px; }
    .secure-card:nth-child(2) .secure-card__title { margin-top: 6px; }
    .secure-card:nth-child(3) .secure-card__title { margin-top: 10px; }

    .secure-card:nth-child(1) .secure-card__text { margin-top: 42px; }
    .secure-card:nth-child(2) .secure-card__text { margin-top: 35px; }
    .secure-card:nth-child(3) .secure-card__text { margin-top: 33px; }

    /* カンプは4行。18pxだと最終行（17文字=306px）が301pxの行幅に入らず
       「す。」が5行目に落ちていた（2026-10-01 実測） */
    .secure-card:nth-child(3) .secure-card__text {
        font-size: 17px;
    }

    .secure-card__title {
        font-size: 23px;
        line-height: 32px;
    }

    .secure-card__text {
        font-size: 18px;
        line-height: 32px;
    }

    .secure-note {
        margin-top: 30px;
        font-size: 17px;
        line-height: 27px;
    }

    /* Q&A ------------------------------------------------- */
    /* XD（SP）：Q&Aの最後の回答から Recruit の見出しまで123px空いている */
    /* XD（SP）：Q&Aの最後の区切り線 y8729 → Recruitの上端 8800.7 */
    .qa {
        height: auto;
        padding: 40px 20px 66.4px;
    }

    .qa .section-title {
        margin-top: 3px;
    }

    .qa-list {
        width: 100%;
        margin-top: 55.1px;
    }

    /* XD（SP）：Qの文字の上端は 8341 / 8479 / 8618。item の間隔は 138.5px で一定
       （前回 147/140 としていたのは、XDの区切り線のパスに乗っている
         オフセットを座標と取り違えていたため） */
    .qa-item + .qa-item {
        margin-top: 18.5px;
    }

    .qa-item__q .qa-item__mark {
        margin-top: 0;
    }

    .qa-item__a {
        align-items: flex-start;
        padding-top: 2.1px;
    }



    /* XD（SP）：丸はQ=直径39／A=直径38、x17。本文 x=66 */
    .qa-item__mark {
        width: 39px;
        height: 39px;
        margin-left: -3px;
        padding-bottom: 4.2px;
        font-size: 14px;
    }

    .qa-item__a .qa-item__mark {
        width: 38px;
        height: 38px;
    }

    /* XD（SP）：区切り線は x17・長さ338 */
    .qa-item__q {
        width: 338px;
        margin-left: -3px;
        padding-bottom: 19.9px;
        box-sizing: border-box;
    }

    .qa-item__q .qa-item__mark {
        margin-left: 0;
    }

    .qa-item__a .qa-item__mark {
        margin-top: 11.5px;
        font-size: 15px;
    }

    /* 丸と本文の間。11pxだと本文が1px右にずれる（カンプ実測） */
    .qa-item__q,
    .qa-item__a {
        gap: 10px;
    }

    /* カンプ（SP）：質問の行間20px／回答の行間19px */
    .qa-item__q .qa-item__text {
        font-size: 14px;
        line-height: 20px;
    }

    .qa-item__a .qa-item__text {
        font-size: 13px;
        line-height: 19px;
    }

    /* Recruit --------------------------------------------- */
    /* XD（SP）：.recruit の上端 8800.7 → 見出しの文字の上端 8829 */
    .recruit {
        padding: 18.1px 0 0;
    }

    .recruit .section-title {
        margin-top: 0;
    }

    /* 🔴 SPカンプには見出しの線が出ていない（XDにデータはあるが書き出しに現れない。
       PC版には線がある）→ 確認事項。カンプに合わせて消しておく */
    .recruit::after {
        display: none;
    }

    /* XD（SP）：RECRUIT の左右の線 */
    .recruit-en::before { top: 9.1px; left: -63.4px; width: 49.4px; }
    .recruit-en::after  { top: 9.1px; left: 71.6px;  width: 60.6px; }

    /* XDの背景は463x309。文字サイズもXDのまま（7〜9px）にしている。
       2026-09-26、パーフェクトピクセル優先の方針に変更（それ以前は可読サイズへ起こしていた） */
    /* XD（SP）：本体は y8868〜9177（309px） */
    .recruit-body {
        height: 309px;
        margin-top: 10.7px;
    }

    /* XD（SP）：写真は 447x224 の帯。.recruit-body（309px）の上から35px・x=-45。
       上下は黒地が出る（PC版の「下端84pxはマスク」と同じ考え方） */
    .recruit-bg {
        top: 35px;
        left: -45px;
        right: auto;
        width: 447px;
        height: 224px;
    }

    .recruit-bg img {
        width: 447px;
        height: 224px;
        object-position: center;
    }

    /* XD（SP）：左の文字列は中心x=117あたりに揃っている */
    .recruit-en,
    .recruit-title,
    .recruit-lead,
    .recruit-text,
    .recruit-btn {
        left: 117px;
        transform: translateX(-50%);
        text-align: center;
    }

    .recruit-en {
        top: 55.6px;
        font-size: 9px;
        line-height: 18px;
        letter-spacing: .221em;
    }

    .recruit-title span {
        font-size: 21px;
    }

    .recruit-title {
        top: 75.5px;
        font-size: 23px;
        line-height: 31px;
        letter-spacing: .265em;
    }

    .recruit-lead {
        top: 122.8px;
        font-size: 12px;
        line-height: 14px;
        letter-spacing: .091em;
    }

    .recruit-text {
        top: 151.8px;
        left: 122px;
        font-size: 7px;
        line-height: 11px;
        letter-spacing: .153em;
    }

    /* 🔴 カンプのSP版どおり 133x24・font 8px。
       2026-10-01 午前に 240x48・14px へ起こしたが、同日「カンプと違う」との指摘で
       パーフェクトピクセル優先（9/26 の決定）に戻した。
       ⚠️ 8px は実機では読みづらく、タップ領域24pxもiOS推奨の44pxを下回る。
          確認事項11として村上さんに伝えてある */
    .recruit-btn {
        top: 186px;
        left: 50.5px;
        transform: none;
        width: 133px;
        height: 24px;
        padding-right: 10px;
        border-width: 1px;
        font-size: 8px;
        line-height: 12px;
        letter-spacing: .153em;
    }

    /* 矢印はPCの比率（ボタン357pxに対し right54・線30）を 133px に縮めたもの */
    .recruit-btn::after {
        top: 12px;
        right: 14px;
        width: 11px;
    }

    .recruit-btn::before {
        top: 10px;
        right: 14px;
        width: 4px;
        height: 4px;
    }

    /* XD（SP）：装飾文字は右側。回転も -11度 のまま */
    .recruit-allura {
        top: 146.8px;
        left: 237px;
        transform: rotate(-11deg);
        transform-origin: 0 17.2px;
        font-size: 27px;
        line-height: 25px;
        opacity: .6;
    }

    /* XD（SP）：x=244・9px のまま */
    .recruit-catch {
        top: 192.5px;
        left: 244px;
        right: auto;
        transform: none;
        font-size: 9px;
        line-height: 25px;
    }

    /* Reserve：1カラムに積む ------------------------------ */
    /* XD（SP）：Recruit本体の下端 9177 から見出しまで22px。上余白はそのぶん詰める。
       左右は17px — リード文の1行目（17px×20文字＝約340px）が20pxだと収まらず
       余計な行に折り返してしまうため */
    .reserve {
        /* 🔴 リード文の1行目は20文字×17px＝340px ある。左右17pxだと幅341pxしか残らず、
           実機のフォント描画差で1行に収まらずに折り返してしまう。
           左右の余白はこの外枠ではなく .reserve-form 側で持たせる */
        padding: 12px 10px 50px;
    }

    .reserve .section-title {
        margin-top: 0;
    }

    /* XD（SP）：ご予約の中心は183（画面中央187.5より4.5px左） */
    .reserve .section-subtitle {
        margin-top: -0.4px;
        padding-right: 9px;
        font-size: 17px;
    }

    .reserve-lead {
        margin-top: 1.5px;
        padding-left: 0;     /* PC用の26pxを打ち消す */
        font-size: 17px;
        line-height: 26px;
    }

    .reserve-form {
        /* .reserve の左右を10pxに詰めたぶん、ここで7px戻して元の位置を保つ */
        width: auto;
        height: auto;
        margin: 24px 7px 0;
        padding: 24px 16px 30px;
    }

    .form-group-title {
        font-size: 19px;
    }

    /* 🔴 PC用の 867.5px がそのまま効いて、フォーム枠を突き抜けて右へはみ出していた。
       カンプのSP版はフォームがPC版のまま（枠759px・入力欄494px）で375pxに
       収まっておらず参照できないため、枠の内側いっぱいに引く */
    .form-group-title::after {
        left: 0;
        width: 100%;
    }

    /* 同じ理由で、料金内訳の2本の線もPC用の固定幅（827.9px / 867.5px）のままだった */
    .estimate-head::after,
    .estimate-total::after {
        left: 0;
        width: 100%;
    }

    /* 🔴 同意チェックはPC用の絶対配置（top:331px / left:283px）が効いたままで、
       料金内訳の枠の外へ飛び出していた。SPは通常の積み上げに戻す */
    .form-privacy {
        position: static;
        justify-content: center;
        margin-top: 24px;
    }

    .form-row,
    .form-row[class] {
        display: block;
        margin-top: 16px;
    }

    .form-group-title.is-first {
        top: 0;
    }

    .form-row__label {
        width: 100%;
        gap: 10px;
        padding: 0 0 6px;
        font-size: 14px;
    }

    .form-row__field,
    .form-row__field textarea {
        width: 100%;
    }

    .form-row__field textarea {
        padding: 12px 14px;
        font-size: 14px;
    }

    .form-row__field input[type="text"],
    .form-row__field input[type="tel"],
    .form-row__field input[type="email"],
    .form-row__field select,
    .form-date,
    .form-time {
        height: 42px;
        padding: 0 14px;
        font-size: 14px;
    }

    .form-row__field.is-datetime {
        display: block;
    }

    .form-date,
    .form-time {
        width: 100%;
        /* 🔴 iOS Safari は date/time を中身に合わせて勝手に広げるため、
           width:100% を指定しても枠が画面からはみ出す。min-width を切って止める */
        min-width: 0;
        -webkit-appearance: none;
        appearance: none;
    }

    .form-time {
        margin-top: 10px;
    }

    .form-row__field.is-radio {
        height: auto;
        padding: 6px 0 0;
        gap: 24px;
    }

    .form-row__field.is-radio input[type="radio"] {
        width: 21px;
        height: 21px;
    }

    .form-row__field.is-radio input[type="radio"]:checked::after {
        width: 11px;
        height: 11px;
        margin-top: 4px;
    }

    .form-row__field.is-radio label {
        font-size: 14px;
    }

    .estimate {
        margin-top: 30px;
        padding: 20px 14px;
    }

    .estimate-head {
        display: block;
    }

    .estimate-title {
        font-size: 19px;
    }

    .estimate-caption {
        margin-top: 4px;
        font-size: 11px;
    }

    .estimate-row {
        font-size: 12px;
    }

    .estimate-note {
        display: block;
        max-width: 190px;
        font-size: 12px;
        line-height: 1.5;
        text-align: right;
    }

    .estimate-row {
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
    }

    .estimate-row dt,
    .estimate-total__label {
        width: auto;
    }

    .estimate-total {
        justify-content: space-between;
    }

    .estimate-row dt {
        flex-shrink: 0;
    }

    .estimate-total__label,
    .estimate-total__price {
        font-size: 15px;
    }

    .estimate {
        position: static;
        width: 100%;
        height: auto;
    }

    .form-privacy {
        position: static;
        justify-content: center;
        gap: 10px;
        margin-top: 48px;
    }

    .form-privacy label,
    .form-privacy .wpcf7-list-item label {
        font-size: 12px;
        white-space: nowrap;
    }

    .form-submit {
        position: static;
        transform: none;
        width: 100%;
        height: 50px;
        margin-top: 20px;
        border-width: 2px;
        font-size: 16px;
    }

    /* フッター -------------------------------------------- */
    /* XD：高さ240、ロゴ106x78をx=30、ナビは2列で x=163／280 */
    .footer {
        height: 240px;
        padding: 0;
    }

    /* XD（SP）：フッターの中に 375x1 の線 */
    .footer-inner::after {
        top: 219px;
        left: 0;
        width: 375px;
    }

    /* 2026-10-01：ロゴを中央、その下にメニューを中央で積む */
    .footer-inner {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding-top: 20px;
        box-sizing: border-box;
    }

    .footer-logo {
        position: static;
        width: 106px;
    }

    .footer-nav {
        position: static;
        margin-top: 10px;
    }

    .footer-nav__list {
        grid-template-columns: auto auto;
        justify-content: center;
        column-gap: 44px;
    }

    .footer-nav__list a {
        font-size: 14px;
        line-height: 38px;
    }

    /* モーダル -------------------------------------------- */
    /* 上下の余白は40px。画面に入りきらないときの出はじめを少し下げる */
    .modal {
        padding: 40px 20px;
    }

    /* XD（SP）：モーダルは335幅。中の文字は左揃えでx=62〜66に並ぶ */
    .modal-inner,
    .modal-inner.is-cast,
    .modal-inner.is-recruit {
        width: 100%;
        height: auto;
        padding: 46px 20px 61px;
    }

    /* XD（SP）：金色の罫線は枠の上から9px・左右11pxの内側 */
    .modal-inner::before {
        inset: 9px 11px;
    }

    .modal-close {
        top: 10px;
        right: 10px;
        width: 24px;
        height: 24px;
    }

    .modal-cast__img,
    .modal-cast__thumbs,
    .modal-cast__catch,
    .modal-cast__name,
    .modal-cast__en,
    .modal-cast__size,
    .modal-cast__intro-title,
    .modal-cast__intro,
    .modal-cast__btn,
    .schedule {
        position: static;
        width: auto;
    }

    /* XD（SP）：写真は 236x352 を 237x311 のマスクで切っている（下41pxは出ない）。x=51 */
    .modal-cast__img {
        width: 237px;
        height: 311px;
        margin: 0 auto 0 28px;
        overflow: hidden;
    }

    .modal-cast__img img {
        width: 236px;
        height: 352px;
        margin-left: 1px;
    }

    /* XD（SP）：サムネは写真と同じ左端（x=51）。マスクで切れた写真の下端から13px下 */
    .modal-cast__thumbs {
        justify-content: flex-start;
        padding-left: 28px;
        margin-top: 13px;
    }

    /* XD（SP）：キャッチ・名前・サイズは中央ではなく x=66.5 の左揃え */
    .modal-cast__catch {
        margin-top: 25.2px;
        padding-left: 26.5px;
        text-align: left;
    }

    .modal-cast__name {
        margin-top: 18px;
        padding-left: 26.5px;
        text-align: left;
    }

    /* XD（SP）：Profile は右側。Allura 27px・ベースラインy570・x231（不透明度はPCと同じ.3） */
    .modal-cast__en {
        position: absolute;
        top: 550.1px;
        left: 228px;
        width: auto;
        font-size: 27px;
    }

    /* XD（SP）：サイズ表記の下の区切り線は 244x1・x=44・y=575 */
    .modal-cast__size::after {
        top: 38.3px;
        left: 21px;
        width: 244px;
    }

    .modal-cast__size {
        justify-content: flex-start;
        padding-left: 26.5px;
        margin-top: 18.5px;
        gap: 12px;
    }

    .modal-cast__intro-title {
        margin-top: 47.3px;
        padding-left: 21.5px;
    }

    /* XD（SP）：14px・行送り27px・1行25文字（幅254px）。見出しの下から8.4px */
    .modal-cast__intro {
        width: 254px;
        margin-top: 8.4px;
        padding-left: 21.5px;
        box-sizing: content-box;
        font-size: 14px;
        line-height: 27px;
        word-break: break-all;
    }

    /* 上の一括指定で width:auto になるので、XDの159x44を指定し直す */
    .modal-cast__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 159px;
        height: 44px;
        margin: 16.6px auto 0 21px;
    }

    /* XD（SP）：出勤表は縦に積む（日付122px｜時間132px）。x=44・1行目 y=999 */
    .schedule {
        display: block;
        margin-top: 68.3px;
        margin-left: 21px;
    }

    .schedule-col {
        display: flex;
        width: 254px;
    }

    /* XD：セルは高さ30pxだが行送りは29px。1pxずつ重ねる */
    .schedule-col + .schedule-col {
        margin-top: -1px;
    }

    .schedule-col__date,
    .schedule-col__time {
        height: 30px;
    }

    .schedule-col__date { width: 122px; font-size: 13px; }
    .schedule-col__time { width: 132px; font-size: 15px; }

    /* XD（SP）：リード文は枠の上から90pxの位置から始まる */
    /* カンプ（SP 335x680）：外枠 x11〜323・y15〜666、表は y215〜542、ボタン y581 */
    .modal-inner.is-recruit {
        height: 680px;
        padding: 0;
    }

    .modal-inner.is-recruit::before {
        inset: 15px 11px 14px;
    }

    /* カンプ（SP）：1行目の文字の上端が71px、行送りは21px */
    .modal-recruit__lead {
        top: 66px;
        left: 0;
        width: 100%;
        font-size: 14.5px;
        line-height: 21px;
    }

    /* カンプ（SP）：Allura 43px。表の右上に重なる */
    .modal-recruit__en {
        top: 176px;
        left: auto;
        right: 2px;
        margin-top: 0;
        font-size: 43px;
        text-align: right;
    }

    .modal-recruit__list {
        top: 215px;
        left: 11px;
        width: 312px;
        margin-top: 0;
        padding-left: 0;
    }

    /* カンプ（SP）：縦の仕切り線は x105（表の左から94px）、表の高さは327px */
    .modal-recruit__list::after {
        top: 0;
        left: 94px;
        height: 327px;
    }

    .modal-recruit__row {
        height: 41px;
        font-size: 15px;
    }

    .modal-recruit__row:nth-child(5) { height: 41px; }
    .modal-recruit__row:nth-child(6) { height: 41px; }
    .modal-recruit__row:nth-child(7) { height: 46px; }
    .modal-recruit__row:nth-child(8) { height: 35px; }

    /* カンプ（SP）：ラベルの文字の中心は x64（列の中央より6.5px右） */
    .modal-recruit__row dt {
        width: 94px;
        padding-left: 13px;
        font-size: 15px;
    }

    /* カンプ（SP）：値の文字は仕切り線（x105）から13px右から始まる */
    .modal-recruit__row dd {
        padding-left: 13px;
        font-size: 12.5px;
        line-height: 1.5;
    }

    /* カンプ（SP）：201x30 を (67, 581) に。文字は10px */
    .modal-recruit__btn {
        top: 581px;
        left: 67px;
        width: 201px;
        height: 30px;
        margin: 0;
        font-size: 10px;
    }

    .modal-recruit__btn::after {
        top: 17px;
        right: 9px;
        width: 21px;
    }
}

/* =========================================================
   〜678px：ヘッダーはハンバーガーに切り替える
   （蓮太朗さんの指示・2026-09-26「パソコンでは上部のメニューをできるだけ残したい。
     ロゴとぶつかりそうになったらハンバーガー」）

   🔴 実測：電話番号を隠した状態（900px以下）で、横並びのヘッダーは
   　 680px なら ロゴとナビのすきま 36px、660px でぶつかる。よって 679px で切り替える。
   🔴 レイアウト本体（450px以下がSPカンプ）とは別の帯なので、ここだけ 678px で区切っている
   ========================================================= */
@media (max-width: 678px) {
    /* ヘッダー：SPデザインはロゴのみ ---------------------- */
    .header {
        height: 80px;
    }

    .header-inner {
        padding: 0 20px;
    }

    /* XD：3本線のアイコン（37.2x2・12px間隔・#707070・右端から20px） */
    .header-menu {
        position: absolute;
        top: 28px;
        right: 20px;
        z-index: 100;  /* メニュー(99)より上に出して、×ボタンとして残す */
        display: block;
        width: 37.2px;
        height: 26px;
        padding: 0;
        background: transparent;
        border: 0;
        cursor: pointer;
    }

    .header-menu span {
        display: block;
        width: 37.2px;
        height: 2px;
        background: #707070;
        transition: transform .3s, opacity .3s;
    }

    .header-menu span + span {
        margin-top: 10px;
    }

    /* 開いているときは×に変える */
    .header-menu.is-open span:nth-child(1) { transform: translateY(12px) rotate(45deg); }
    .header-menu.is-open span:nth-child(2) { opacity: 0; }
    .header-menu.is-open span:nth-child(3) { transform: translateY(-12px) rotate(-45deg); }

    /* カンプ（アートボード – 2 / 379x734）：メニューは画面全体を覆う。
       項目は29px・中央・間隔77px、1つ目のベースラインが y156 */
    .sp-menu {
        position: fixed;
        /* 🔴 top/bottom で引き伸ばす。height:100% だと iOS Safari で
           アドレスバーが伸縮したときに実際の画面下端とズレ、
           下に敷いた .fv-btns（z-index:98）がはみ出して見えてしまう */
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 99;
        display: block;
        width: 100%;
        height: auto;
        padding: 0;
        box-sizing: border-box;
        background: #0D0907;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s, visibility .3s;
    }

    .sp-menu.is-open {
        opacity: 1;
        visibility: visible;
    }

    .sp-menu__list {
        margin-top: 106.5px;
        list-style: none;
    }

    .sp-menu__list a {
        display: block;
        padding: 0;
        border-bottom: none;
        font-size: 29px;
        line-height: 77px;
        color: var(--gold-title);
        text-align: center;
    }

    /* カンプ：「お電話でお申し込み」だけ中心が左に48pxずれている（XDのまま） */
    .sp-menu__tel {
        margin-top: 56.9px;
        text-align: center;
    }

    .sp-menu__tel span {
        display: block;
        /* 🔴 もとは margin-left:-96px でカンプの座標に寄せていたが、
           そのぶん箱が画面の外（左へ96px）まではみ出していた。
           親が text-align:center なので、負のマージンを外せば素直に中央に収まる */
        font-size: 12px;
        line-height: 12px;
    }

    .sp-menu__tel a {
        display: block;
        margin-top: 14.3px;
        font-size: 31px;
        line-height: 31px;
    }

    /* カンプ：162x51 のボタン。中は RESERVE(19px) ／ お申し込み(12px) の2行 */
    .sp-menu__reserve {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 162px;
        height: 51px;
        margin: 31.3px auto 0;
        padding: 0;
        box-sizing: border-box;
        background: var(--gold);
        border: 1px solid var(--gold-border);
        color: #FFFFFF;
    }

    .sp-menu__reserve-en {
        font-size: 19px;
        line-height: 21px;
    }

    .sp-menu__reserve-ja {
        font-size: 12px;
        line-height: 13px;
    }

    /* a要素はstaticに戻すとinlineになり幅が効かないのでblockにする */
    .header-logo {
        position: static;
        display: block;
        width: 213px;
        padding-top: 12px;
    }

    .header-nav,
    .header-tel,
    .header-reserve {
        display: none;
    }

}


/* =========================================================
   Thanks ページ
   デザイン基準：XD「thanks page　sp」1440 x 900（※アートボード名はPCと逆）
   ========================================================= */
.thanks {
    position: relative;
    height: 900px;
    padding-top: 80px;
    box-sizing: border-box;
}

/* z-index:-1 にすると .thanks の背景色（SP）に隠れてしまうので使わない */
.thanks-bg {
    position: absolute;
    top: 80px;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 820px;
    overflow: hidden;
}

.thanks-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .37; /* XD指定 */
}

.thanks-inner {
    position: relative;
    z-index: 1;
    height: 100%;
}

.thanks-title {
    position: absolute;
    top: 114px;
    left: 479px;
    font-size: 69px;
    line-height: 1;
    letter-spacing: .064em;
    color: var(--gold-title);
}

.thanks-sub {
    position: absolute;
    top: 209px;
    left: 487px;
    font-size: 23px;
    line-height: 1;
    letter-spacing: .064em;
}

/* XD：本文の下に 42x1 のあしらい線 */
.thanks-text::after {
    content: "";
    position: absolute;
    top: 80.4px;
    left: 699px;
    width: 42px;
    height: 1px;
    background: #707070;
}

.thanks-text {
    position: absolute;
    top: 281px;
    left: 0;
    width: 100%;
    font-size: 20px;
    line-height: 36px;
    letter-spacing: .064em;
    text-align: center;
}

/* XD：枠521・アイコンと見出しは横並び（アイコン x556／見出し x597）・本文はその下 */
.thanks-note {
    position: absolute;
    top: 441px;
    left: 479px;
    width: 483px;
    height: 162px;
    border: 1px solid #707070;
    box-sizing: border-box;
    text-align: center;
}

/* XD：アイコンは枠の左から77px・上から35px。見出しと横に並ぶ */
.thanks-note__icon {
    position: absolute;
    top: 35px;
    left: 77px;
}

.thanks-note__icon img {
    width: 33px;
    height: 33px;
}

.thanks-note__title {
    margin-top: 33.15px;
    padding-left: 117px;
    text-align: left;
    font-size: 18px;
    line-height: 36px;
    letter-spacing: .064em;
}

.thanks-note__text {
    margin-top: 4px;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: .064em;
}

.thanks-btn {
    position: absolute;
    top: 640px;
    left: 574px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 292px;
    height: 59px;
    border: 2px solid #707070;
    box-sizing: border-box;
    font-size: 18px;
    line-height: 36px;
    letter-spacing: .064em;
    transition: background .3s;
}

.thanks-btn:hover {
    background: rgba(255, 255, 255, .1);
}

/* XDはx=982だが、実際のAlluraの字幅では画面からはみ出すため右端で止める
   XD：この装飾文字は -10度 回転している */
.thanks-allura {
    position: absolute;
    top: 644px;
    right: 28px;
    transform: rotate(-10deg);
    transform-origin: 0 37.2px;
    font-size: 55px;
    line-height: 55px;
    letter-spacing: .011em;
    color: var(--gold-text);
    opacity: .3; /* XD指定 */
}

@media (max-width: 450px) {
    /* XD（SP 375x812）：アートボード＝画面1枚ぶん。写真は下端まで届く */
    .thanks {
        height: auto;
        min-height: 100vh;
        padding: 80px 20px 60px;
    }

    .thanks-bg {
        height: calc(100% - 80px);
    }

    /* XD（SP）：写真は 1492x840 を左上そろえで置き、画面幅ぶんだけ見せる。
       不透明度はグループ .692 × 画像 .373 ＝ .258 */
    .thanks-bg img {
        width: 1492px;
        height: 840px;
        max-width: none;
        object-fit: fill;
        opacity: .258;
    }

    .thanks-inner {
        height: auto;
    }

    .thanks-title,
    .thanks-sub,
    .thanks-text,
    .thanks-note,
    .thanks-btn,
    .thanks-allura {
        position: static;
        left: auto;
        width: auto;
    }

    /* XD（SP 375x812）：アートボードの背景色がPC版と違う */
    .thanks {
        background: #0D0906;
    }

    .thanks-title {
        margin-top: 128px;
        font-size: 40px;
        line-height: 1;
        text-align: center;
    }

    .thanks-sub {
        margin-top: 10px;
        font-size: 15px;
        line-height: 1.6;
        text-align: center;
    }

    .thanks-text {
        margin-top: 29px;
        font-size: 14px;
        line-height: 25px;
    }

    .thanks-note {
        position: relative;
        top: auto;
        width: 292px;
        min-height: 98px;
        height: auto;
        margin: 32.2px auto 0;
        padding: 0 0 12px;
    }

    /* XD（SP）：アイコン x78 y460／見出し x104 — こちらも横並び */
    .thanks-note__icon {
        top: 17px;
        left: 34px;
    }

    .thanks-note__icon img {
        width: 20px;
        height: 20px;
    }

    .thanks-note__title {
        margin-top: 17.77px;
        padding-left: 59px;
        font-size: 12px;
        line-height: 20px;
    }

    .thanks-note__text {
        margin-top: 0.5px;
        font-size: 12px;
        line-height: 19px;
    }

    .thanks-btn {
        width: 176px;
        height: 36px;
        margin: 25px auto 0;
        font-size: 13px;
    }

    /* XD（SP）：回転は -6度 */
    .thanks-allura {
        margin-top: 42px;
        transform: rotate(-6deg);
        transform-origin: 0 25.7px;
        font-size: 38px;
        line-height: 38px;
        text-align: center;
    }
}

/* =========================================================
   タブレット〜小さめのPC（451px〜1439px）
   XDにこの幅のデザインが無いため、1440pxの配置で破綻する箇所だけ戻す
   ========================================================= */
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* 🔴 iOS Safari は html / body に overflow-x:hidden があると
   スクロールコンテナが分かれてしまい、慣性スクロールが引っかかる。
   clip は「はみ出しを切る」だけでスクロールコンテナを作らないので、
   見た目は同じまま症状だけ消える（2026-10-01 実機の指摘） */
@supports (overflow-x: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

/* 画面の外にあるあいだは動きごと切る。
   animation-play-state: paused では止まるだけで合成レイヤーが残り、
   大きな背景画像ではそれ自体がスクロールの負担になる */
.is-offscreen {
    animation: none !important;
}

/* ヘッダーが固定80pxなので、アンカーで飛んだときに隠れないようにする */
#concept,
#cast,
#price,
#qa,
#recruit,
#reserve {
    scroll-margin-top: 80px;
}

@media (min-width: 451px) and (max-width: 1439px) {

    /* ヘッダー：XD座標の絶対配置をやめて横並びに戻す */
    .header-inner {
        display: flex;
        align-items: center;
        padding: 0 24px;
        box-sizing: border-box;
    }

    .header-logo,
    .header-nav,
    .header-tel,
    .header-reserve {
        position: static;
    }

    .header-logo {
        width: 180px;
        flex-shrink: 0;
    }

    .header-nav {
        margin-left: auto;
    }

    .header-nav__list li:nth-child(1),
    .header-nav__list li:nth-child(2),
    .header-nav__list li:nth-child(3) {
        margin-right: 28px;
    }

    .header-tel {
        margin-left: 28px;
    }

    .header-tel__number {
        font-size: 24px;
    }

    .header-reserve {
        margin-left: 20px;
    }

    /* コンテンツ幅：画面に収まるようにする */
    .concept-inner,
    .quality-list,
    .cast-list,
    .price-list,
    .option-list,
    .price-notes,
    .qa-list,
    .reserve-form,
    .estimate {
        max-width: calc(100% - 48px);
    }

    .price-list,
    .option-list,
    .price-notes,
    .concept-inner,
    .quality-list,
    .qa-list,
    .reserve-form {
        margin-left: auto;
        margin-right: auto;
    }

    .concept-text,
    .quality-item__body,
    .quality-item__text {
        max-width: 100%;
    }

    /* Conceptのキャッチは1440px前提の位置なので通常の並びに戻す。
       先頭は本文の左端に揃える（2026-10-01） */
    .concept-lead {
        padding-left: 0;
        text-align: left;
    }

    .concept-lead__ja {
        position: static;
        width: min(607px, 100%);
        margin: -48px auto 0;
    }

    /* Our Qualityは見出しの折り返しを許可し、横並びを保つ */
    .quality-item__title {
        white-space: normal;
    }

    .quality-item {
        height: auto;
        min-height: 300px;
        padding-bottom: 60px;
    }

    .quality-item:last-child {
        height: auto;
    }

    .quality-item__num {
        right: 0;
        bottom: 0;
    }

    /* Castは画面幅に応じて列数を減らす */
    .cast-list {
        grid-template-columns: repeat(auto-fit, 231px);
        justify-content: center;
    }

    /* Price：行の幅を画面に合わせる */
    .price-row__line {
        width: auto;
        flex: 1;
        margin: 14px 20px 0;
    }

    .price-row.is-recommend .price-row__line {
        width: auto;
        margin: 38px 20px 0;
    }

    .option-list {
        height: auto;
        padding: 29px 40px;
    }

    /* FV・フッター */
    .fv-btns {
        right: 24px;
    }

    .footer-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 40px;
        box-sizing: border-box;
    }

    .footer-logo,
    .footer-nav {
        position: static;
    }

    /* Recruit：左右のテキストが重なるので縦に積む */
    .recruit-body {
        height: auto;
        padding: 60px 24px;
    }

    .recruit-bg,
    .recruit-bg img {
        height: 100%;
    }

    .recruit-en,
    .recruit-title,
    .recruit-lead,
    .recruit-text,
    .recruit-btn,
    .recruit-allura,
    .recruit-catch {
        position: static;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        white-space: normal;
    }

    .recruit-title,
    .recruit-lead,
    .recruit-text {
        margin-top: 16px;
    }

    .recruit-btn {
        margin-top: 32px;
    }

    .recruit-allura {
        margin-top: 40px;
    }

    .recruit-catch {
        margin-top: 8px;
    }

    /* 料金内訳：同意・送信を通常の流れに戻す */
    .estimate {
        height: auto;
        padding-bottom: 32px;
    }

    .estimate-row dt,
    .estimate-total__label {
        width: 50%;
    }

    .form-privacy {
        position: static;
        justify-content: center;
        margin-top: 32px;
    }

    .form-submit {
        position: static;
        transform: none;
        margin: 20px auto 0;
        max-width: 100%;
    }

    /* フォームのラベル幅 */
    .form-row__label {
        width: 220px;
    }

    /* 入力欄は画面幅に応じて縮める */
    .form-row__field {
        width: auto;
        flex: 1;
        min-width: 0;
    }

    .form-row__field input,
    .form-row__field select,
    .form-row__field textarea {
        width: 100%;
        max-width: 100%;
    }

    .form-row__field.is-datetime {
        flex-wrap: wrap;
    }

    .form-date,
    .form-time {
        width: calc(50% - 8px);
        min-width: 140px;
    }

    /* Thanks */
    .thanks {
        height: auto;
        padding: 140px 24px 80px;
    }

    .thanks-bg {
        height: 100%;
    }

    .thanks-title,
    .thanks-sub,
    .thanks-text,
    .thanks-note,
    .thanks-btn,
    .thanks-allura {
        position: static;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .thanks-sub  { margin-top: 18px; }
    .thanks-text { margin-top: 28px; width: auto; }
    /* position を static に戻すと、中のアイコン（absolute）が枠の外へ飛ぶので
       relative にする。ただしPC用の top/left が効いてしまうので打ち消す */
    .thanks-note { position: relative; top: auto; left: auto; margin-top: 44px; }
    .thanks-btn  { margin-top: 32px; }

    /* この幅のデザインは無い。装飾文字は残しつつ、箱を文字幅に絞って中心で傾ける。
       PC用（左端を軸に-10度）のままだと、箱が画面いっぱいに広がるせいで
       右端が160px以上持ち上がり「TOPページへ戻る」に重なってしまう */
    .thanks-allura {
        width: fit-content;
        margin-top: 64px;
        transform-origin: center;
    }
}

/* =========================================================
   451〜767px：1440px前提の固定幅が収まらないぶんを詰める
   （ここまで来たらタブレットのデザインを素直に縮める。450px以下はSPカンプ）
   ========================================================= */
@media (min-width: 451px) and (max-width: 767px) {

    /* FVのロゴ（625px固定）が画面からはみ出す */
    .fv-logo {
        width: min(625px, calc(100% - 48px));
    }

    /* Price：固定幅の合計（98+111+120+140）が行幅を超える */
    .price-row__badge { width: 76px; font-size: 12px; }
    .price-row__en    { width: 88px; font-size: 12px; }
    .price-row__time  { width: 96px; }
    .price-row__num   { font-size: 28px; }
    .price-row__yen   { width: 112px; font-size: 26px; }

    .price-row.is-recommend .price-row__yen { font-size: 28px; }

    /* オススメ行は別指定で幅が大きいので、こちらも詰める */
    .price-row.is-recommend .price-row__badge { width: 84px; }
    .price-row.is-recommend .price-row__en    { width: 92px; font-size: 13px; }
    .price-row.is-recommend .price-row__time  { width: 104px; }
    .price-row.is-recommend .price-row__num   { font-size: 30px; }
    .price-row.is-recommend .price-row__yen   { width: 120px; font-size: 28px; }

    /* オプション：左右の余白を詰める */
    .option-list {
        padding: 29px 24px;
    }

    /* 予約フォーム：ラベル248pxを横に置くと入力欄が狭すぎるので縦に積む */
    .form-row {
        display: block;
    }

    .form-row__label {
        width: auto;
        padding-top: 0;
    }

    .form-row__field {
        width: 100%;
        margin-top: 6px;
    }
}

/* =========================================================
   🔴 タブレット帯（451〜1439px）は基本的に縦組にする
   （蓮太朗さんの指示・2026-09-26）

   1440px前提の横並びは、幅が足りないと中身が箱からはみ出す。
   横に詰めるのではなく、素直に縦へ積み直す。
   ========================================================= */
@media (min-width: 451px) and (max-width: 1439px) {

    /* Concept：本文（600px固定）が左に寄ってしまうので中央に */
    .concept-text {
        width: min(607px, 100%);
        margin-left: auto;
        margin-right: auto;
    }

    /* Our Quality：写真の下に本文を積む（縦並びなので横幅は600pxで止める） */
    .quality-list {
        max-width: min(600px, calc(100% - 48px));
    }

    .quality-item {
        display: block;
        height: auto;
    }

    .quality-item__img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .quality-item__body {
        width: 100%;
        margin-top: 24px;
    }

    /* Private & Secure：3枚を折り返す。入る幅なら横に並び、足りなければ縦に積む */
    .secure-list {
        flex-wrap: wrap;
        gap: 24px;
        padding-right: 0;
    }

    .secure-card {
        width: min(333px, 100%);
        height: auto;
        min-height: 398px;
        padding-bottom: 32px;
    }
}

/* 520px以下はさらに詰める（料金の行の固定幅の合計が収まらないため） */
@media (min-width: 451px) and (max-width: 519px) {
    .price-row__line,
    .price-row.is-recommend .price-row__line {
        margin-left: 8px;
        margin-right: 8px;
    }

    .price-row__badge { width: 68px; font-size: 11px; }
    .price-row__en    { width: 78px; font-size: 11px; }
    .price-row__time  { width: 86px; }
    .price-row__num   { font-size: 24px; }
    .price-row__yen   { width: 94px; font-size: 22px; }

    .price-row.is-recommend .price-row__badge { width: 72px; }
    .price-row.is-recommend .price-row__en    { width: 82px; }
    .price-row.is-recommend .price-row__time  { width: 92px; }
    .price-row.is-recommend .price-row__num   { font-size: 26px; }
    .price-row.is-recommend .price-row__yen   { width: 96px; font-size: 22px; }
    .price-row.is-recommend .price-row__en    { width: 76px; }
    .price-row.is-recommend .price-row__time  { width: 86px; }
    .price-row.is-recommend .price-row__badge { width: 68px; }
}

/* 900px以下はヘッダーに電話番号が収まらないので省く */
@media (min-width: 451px) and (max-width: 900px) {
    .header-tel {
        display: none;
    }

    .header-nav__list li:nth-child(1),
    .header-nav__list li:nth-child(2),
    .header-nav__list li:nth-child(3) {
        margin-right: 20px;
    }
}

/* =========================================================
   セクションがふわっと現れる
   ※ 🔴 セクションを「まるごと1単位」で出す。要素ごとに出すと、長いセクションの
   　 途中の文字が半透明のまま読む位置に来てしまう（2026-09-26 に実際に起きた）。
   ※ 🔴 画面に入る**前**から出しはじめる（JS側の rootMargin）。読む位置に来たときには
   　 出し終わっているようにするため。
   ※ JSが動かない環境では .js-sec が付かないので、中身はそのまま見える。
   ========================================================= */
/* ごく一般的なスクロール表示。下から20px上がりながらフェードイン（0.8秒）。
   Our Quality だけはセクションごとではなく、見出しと4項目を別々に出す
   （縦に長いので、結果として1つずつ出てくる） */
/* 🔴 transition は .is-in 側にだけ書く。
   .js-sec（隠す指定）にも書くと、JSがクラスを付けた瞬間に
   「見えている状態→隠す」のトランジションが走り、その transitionend で
   後片付けが先に動いてしまう（2026-09-26、セクションが見えなくなる不具合の原因） */
.js-sec {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}

.js-sec.is-in {
    opacity: 1;
    transform: none;
    /* 🔴 .8s だとスクロール中に「薄いままの文字」が見えてしまう（2026-10-01、
       Priceの「オプション」が消えているという指摘）。上の方針どおり
       文字が薄い時間を最小にするため、発火を早める（JS側）のとあわせて短くする */
    transition: opacity .4s ease, transform .4s ease;
}

/* 出し終わったら合成レイヤーを持ち続けない */
.js-sec.is-done {
    will-change: auto;
}

/* =========================================================
   動き
   ※ XDにアニメーションの指定は無い（プロトタイプ設定はモーダルの1件だけ）。
   　 入れているのは次の2つだけで、**文字は一切動かさない・薄くしない**。
   　 黒地に細い明朝が動くと読みにくくなるため（2026-09-26 に実際に起きた）。

   ① 背景写真がゆっくり呼吸する（スクロールと無関係なので読む邪魔にならない）
   ② カードはマウスを載せたときだけ浮く（Pickup Cast と同じ動き）
   ========================================================= */

@keyframes bg-breathe {
    from { transform: scale(1); }
    to   { transform: scale(1.06); }
}

/* 拡大したぶんがはみ出さないように切る */
.fv-bg,
.concept-bg {
    overflow: hidden;
}

.fv-bg img,
.concept-bg img,
.recruit-bg img {
    animation: bg-breathe 24s ease-in-out infinite alternate;
}

/* カードのホバー（Pickup Cast・美浜まち旅博覧会のナビゲーターカードと同じ値） */
@media (hover: hover) and (pointer: fine) {
    .cast-card,
    .secure-card {
        transition: transform .45s cubic-bezier(.2, .8, .3, 1),
                    box-shadow .45s cubic-bezier(.2, .8, .3, 1);
    }

    .cast-card:hover,
    .secure-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 18px 32px rgba(0, 0, 0, .55);
    }

    /* 写真は暗くするのではなく、ゆっくり寄せる（Pickupに揃える） */
    .cast-card__img {
        overflow: hidden;
    }

    .cast-card__img img {
        transition: transform .8s cubic-bezier(.2, .8, .3, 1);
    }

    .cast-card:hover .cast-card__img img {
        opacity: 1;
        transform: scale(1.07);
    }
}

/* =========================================================
   〜450px：SPカンプ（375px基準）の見た目を、そのまま画面幅に合わせて伸縮させる
   （美浜まち旅博覧会と同じ実装。あちらは400px基準）

   320px → 0.853倍（縮小）／ 375px → 等倍 ／ 450px → 1.200倍（拡大）。451px以上は伸縮しない。

   🔴 transform:scale ではなく zoom を使う。
   　 zoom はレイアウトの高さも position:fixed も正しく働くが、scale は見た目だけ変わって
   　 高さが元のまま残り、固定ヘッダーの位置も狂う。

   --sp-zoom は script.js が入れる（画面幅 ÷ 375）。
   実機では head の viewport(width=375) が効くので clientWidth が375に固定され、
   ブラウザ側が端末幅まで伸縮してくれる（そのとき zoom は 1.0 のまま）。
   ========================================================= */
@media (max-width: 450px) {
    body {
        zoom: var(--sp-zoom, 1);
    }
}

/* =========================================================
   キーボード操作・動きの抑制
   ========================================================= */

/* キーボードで操作したときだけフォーカスを見せる */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.cast-card:focus-visible {
    outline: 2px solid var(--gold-border);
    outline-offset: 2px;
}

/* 入力中の枠を分かりやすく */
.form-row__field input:focus,
.form-row__field select:focus,
.form-row__field textarea:focus,
.form-date:focus,
.form-time:focus {
    border-color: var(--gold-border);
    outline: none;
}

/* 動きを減らす設定の端末では、スライダーやアニメーションを止める */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .pickup-track.is-flowing,
    .fv-bg img,
    .concept-bg img,
    .recruit-bg img {
        animation: none !important;
    }

    .js-sec,
    .js-sec.is-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .cast-card,
    .cast-card:hover,
    .secure-card,
    .secure-card:hover,
    .cast-card__img img,
    .cast-card:hover .cast-card__img img {
        transform: none !important;
        transition: none !important;
        box-shadow: none !important;
    }

    .pickup-item,
    .pickup-item:hover,
    .pickup-item img,
    .pickup-item:hover img {
        transform: none !important;
        transition: none !important;
        box-shadow: none !important;
    }
}

/* Pickupのスライドもタップで詳細が開く（XDのプロトタイプ設定） */
.pickup-item {
    cursor: pointer;
}



/* マウスのある端末だけ。タップ端末では :hover が押したあと残ってしまう */
/* マウスのある端末だけ。タップ端末では :hover が押したあと残ってしまう */
@media (hover: hover) and (pointer: fine) {
    /* 載せているあいだは流れを止める */
    .pickup-slider:hover .pickup-track.is-flowing {
        animation-play-state: paused;
    }

    /* 載せた1枚が「選ばれた」ように浮いて、中の写真がゆっくり寄る
       （美浜まち旅博覧会のナビゲーターカードと同じ動き） */
    .pickup-item {
        transition: transform .45s cubic-bezier(.2, .8, .3, 1),
                    box-shadow .45s cubic-bezier(.2, .8, .3, 1);
    }

    .pickup-item:hover {
        transform: translateY(-10px);
        box-shadow: 0 18px 32px rgba(0, 0, 0, .55);
    }

    .pickup-item img {
        transition: transform .8s cubic-bezier(.2, .8, .3, 1);
    }

    .pickup-item:hover img {
        transform: scale(1.07);
    }
}