/* =============================================================
   M's Resort / Glass Concierge  参照ビルド 共通スタイル
   作成: 2026-08-29
   -------------------------------------------------------------
   ・この CSS は「STUDIO で同じ見た目を作るための見本」。
     STUDIO には取り込めない。値（色・余白・文字サイズ）を
     STUDIO の各パネルに手で写すための参照として使う。
   ・色はすべて :root のカスタムプロパティ＝14_デザインパレット確定 の9色。
     STUDIO では C2-1 でこの9色をプロジェクトカラーに登録する。
   ・セクション（＝ブロック）ごとにコメントで区切ってある。
     HTML 側の <section data-block="N"> と対応。
   ============================================================= */

/* ---- 1. カラー変数（14_ 確定パレット / STUDIO C2-1） ---- */
:root{
  --accent:      #45B7B2;   /* ボタン・リンク・罫線・アイコン         */
  --accent-dark: #286966;   /* ホバー、強調色の上に乗せる文字         */
  --accent-pale: #E9F6F6;   /* 淡い面、選択状態                       */
  --bg:          #F4EEE0;   /* ページ地色                             */
  --bg-sand:     #E8DCC0;   /* セクション区切り、カード地             */
  --text:        #2A2B31;   /* 明るい面の本文                         */
  --mute:        #5A5348;   /* 補足・キャプション（サンド面でもAA 4.5:1を満たす濃さ） */
  --dark:        #2E3136;   /* ダーク面・フッター                     */
  --on-dark:     #F1EEE7;   /* ダーク面の文字                         */

  --line: rgba(42,43,49,.18);          /* 明るい面の罫線 */
  --line-dark: rgba(241,238,231,.16);  /* 暗い面の罫線   */

  /* ---- 2. フォント（21_ 判断1 / STUDIO C2-2） ----
     見出し = 明朝 Shippori Mincho B1（代替 Noto Serif JP → OS明朝）
     本文   = ゴシック Noto Sans JP（代替 OSゴシック）              */
  --mincho: "Shippori Mincho B1","Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  --sans:   "Noto Sans JP","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;

  --wrap: 1160px;   /* 内側コンテンツ最大幅 */
}

/* ---- 3. リセット & 基本 ---- */
*{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none!important;}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:2.0;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

/* 内側の中央寄せコンテナ（STUDIO: 各セクションの内側ボックス max-width 1160 / 左右 padding 48） */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 48px;}

/* セクション共通の上下余白（STUDIO: PC 104px / SP 64px） */
section{padding:104px 0;}

/* 面の色ユーティリティ（HTML の data-face 属性に対応させる） */
.face-bg      {background:var(--bg);      color:var(--text);}
.face-sand    {background:var(--bg-sand); color:var(--text);}
.face-dark    {background:var(--dark);    color:var(--on-dark);}
.face-dark h2,.face-dark h3{color:var(--on-dark);}
.face-dark .lead{color:rgba(241,238,231,.62);}

/* ---- 4. 見出し・パーツ ---- */
.eyebrow{font-size:10px;letter-spacing:.42em;color:var(--accent-dark);font-weight:700;margin-bottom:14px;}
.face-dark .eyebrow{color:var(--accent);}
h1{font-family:var(--mincho);font-weight:400;}
h2{font-family:var(--mincho);font-size:33px;line-height:1.7;font-weight:500;letter-spacing:.08em;}
h3{font-family:var(--mincho);font-size:19px;font-weight:500;letter-spacing:.08em;line-height:1.7;}
.lead{color:var(--mute);font-size:14px;margin-top:18px;line-height:2.1;}
.center{text-align:center;}
.rule{width:40px;height:2px;background:var(--accent);margin:0 auto 22px;}
.rule.left{margin-left:0;}
p + p{margin-top:1.2em;}

/* ボタン */
.btn{display:inline-block;font-size:12.5px;letter-spacing:.18em;font-weight:700;padding:16px 40px;text-align:center;}
.btn-primary{background:var(--accent);color:#08302C;}
.btn-primary:hover{background:var(--accent-dark);color:#fff;}
.btn-ghost{background:transparent;border:1px solid rgba(241,238,231,.55);color:var(--on-dark);cursor:pointer;font-family:var(--sans);}
.btn-ghost:hover{background:rgba(241,238,231,.1);border-color:var(--on-dark);}
.btn-ghost:disabled{opacity:.45;cursor:default;}
.btn-line{display:inline-block;font-size:12px;letter-spacing:.14em;color:var(--accent-dark);border-bottom:1px solid var(--accent-dark);padding-bottom:4px;}
.face-dark .btn-line{color:var(--accent);border-color:var(--accent);}

/* ============================================================
   ブロック1 ｜ ヘッダー（STUDIO: 共通コンポーネント Header / C2-3）
   ============================================================ */
.site-header{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;}
.site-header .hd{display:flex;align-items:center;height:76px;gap:34px;}
.site-header .logo{font-family:var(--mincho);font-size:22px;font-weight:500;letter-spacing:.1em;color:var(--accent);white-space:nowrap;line-height:1;}
.site-header .logo img{height:100%;width:auto;}
.gnav{display:flex;gap:24px;margin-left:auto;font-size:12.5px;letter-spacing:.08em;list-style:none;}
.gnav > li{position:relative;}
.drop{list-style:none;}
.gnav a{padding:8px 0;display:inline-block;}
.gnav a:hover{color:var(--accent-dark);}
/* Service ドロップダウン */
.has-drop > .drop{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid var(--line);padding:14px 0;min-width:340px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);display:none;
}
.has-drop:hover > .drop{display:block;}
.drop li a{display:block;padding:10px 22px;font-size:12px;line-height:1.7;letter-spacing:.06em;}
.drop li a small{display:block;color:var(--mute);font-size:11px;letter-spacing:.04em;}
.drop li a:hover{background:var(--accent-pale);}
.header-icons{display:flex;gap:14px;align-items:center;font-size:15px;color:var(--accent-dark);}
.header-icons a{display:inline-flex;align-items:center;justify-content:center;}
.header-icons a:hover{color:var(--accent);}
.ig-icon{display:block;}

/* ハンバーガーボタン（PC では非表示） */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;padding:9px;margin-left:14px;background:none;border:0;cursor:pointer;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);transition:transform .2s,opacity .2s;}

/* ============================================================
   ブロック2 ｜ ファーストビュー（STUDIO: C3-FV）
   ============================================================ */
.hero{position:relative;height:680px;overflow:hidden;background:#0A0B0D;}
.hero video,.hero img.bg{position:absolute;inset:0;top:0;left:0;width:100%;height:100%;
  object-fit:cover;object-position:center;}
.hero::after{content:"";position:absolute;inset:0;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,rgba(10,11,13,.58) 0%,rgba(10,11,13,.4) 45%,rgba(10,11,13,.8) 100%);}
.hero-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;color:#F6F3EC;padding:0 24px;}
.hero .en{font-size:11.5px;letter-spacing:.5em;color:var(--accent);margin-bottom:22px;}
.hero h1{font-size:56px;font-weight:500;letter-spacing:.1em;line-height:1.55;
  text-shadow:0 2px 24px rgba(0,0,0,.45);}
.hero h1 .hero-lead{letter-spacing:.32em;}
.hero .hero-rule{width:52px;height:1px;background:rgba(246,243,236,.7);margin:26px 0 0;}
.hero .sub{margin-top:22px;font-size:15.5px;letter-spacing:.14em;color:rgba(246,243,236,.92);
  text-shadow:0 1px 14px rgba(0,0,0,.4);}
.hero .btn{margin-top:38px;}
.sp-only{display:none;}

/* ============================================================
   ブロック3 ｜ AUTO ALIVE 概要（STUDIO: 面 bg）
   ============================================================ */
.block-auto{padding-bottom:0;}
.block-auto .wrap{max-width:900px;}
.block-auto .txt{max-width:660px;}
.auto-hero{width:100%;height:64vh;max-height:640px;min-height:400px;
  margin-top:56px;overflow:hidden;background:#0A0B0D;}
.auto-hero img{width:100%;height:100%;object-fit:cover;object-position:38% center;
  transform:scale(1.001);transition:transform 9s ease;}
.block-auto:hover .auto-hero img{transform:scale(1.04);}
.badge{display:inline-block;border:1px solid var(--accent-dark);color:var(--accent-dark);
  font-size:10.5px;letter-spacing:.16em;padding:5px 12px;margin-bottom:20px;}

/* スイス国旗マーク（SWISSVAX 取扱店の視覚的強調） */
.swiss-mark{display:inline-flex;align-items:center;gap:12px;margin-top:22px;
  padding:10px 16px 10px 12px;border:1px solid var(--line);background:#fff;}
.swiss-mark img{width:38px;height:38px;box-shadow:0 1px 4px rgba(0,0,0,.18);flex:0 0 auto;}
.swiss-mark span{font-size:11px;letter-spacing:.08em;color:var(--mute);line-height:1.7;}
.swiss-mark strong{display:inline-block;font-size:12.5px;letter-spacing:.1em;color:var(--text);font-weight:700;margin-top:2px;}

/* ============================================================
   ブロック4 ｜ 選ばれる理由（STUDIO: 面 dark ①）
   ============================================================ */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:56px;}
.reason .no{font-family:var(--mincho);font-size:24px;color:var(--accent);}
.reason h3{margin:14px 0 14px;padding-bottom:14px;border-bottom:1px solid var(--line-dark);}
.reason p{font-size:14px;color:rgba(241,238,231,.72);line-height:2.05;}

/* ============================================================
   ブロック5 ｜ 施工実績 BEFORE/AFTER（STUDIO: 面 sand）
   ============================================================ */
.works{display:grid;grid-template-columns:1fr 1fr;gap:30px 36px;margin-top:52px;max-width:820px;margin-left:auto;margin-right:auto;}
.work .im{overflow:hidden;background:var(--bg-sand);border:1px solid var(--line);}
.work .im img{width:100%;height:auto;display:block;}
.work .cap{font-size:12.5px;letter-spacing:.08em;color:var(--mute);margin-top:12px;text-align:center;}
.works-foot{margin-top:44px;}

/* ============================================================
   ブロック6 ｜ 施工の流れ 6ステップ（STUDIO: 面 bg）
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 28px;margin-top:52px;}
.step .im{height:180px;position:relative;overflow:hidden;}
.step .im img{width:100%;height:100%;object-fit:cover;}
.step .no{position:absolute;left:0;top:0;background:var(--accent);color:#08302C;
  font-size:12px;font-weight:700;letter-spacing:.1em;padding:6px 13px;}
.step h3{font-size:15px;margin-top:16px;}
.step p{font-size:14px;color:var(--mute);line-height:1.95;margin-top:6px;}
.steps-note{font-size:13px;color:var(--mute);margin-top:22px;}

/* ============================================================
   ブロック7 ｜ 料金（STUDIO: 面 bg）
   ============================================================ */
.price-block{margin-top:44px;}
.price-block h3{font-size:15px;letter-spacing:.14em;margin-bottom:16px;}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px;}
th,td{border-bottom:1px solid var(--line);padding:16px 14px;text-align:center;letter-spacing:.04em;vertical-align:top;}
th{font-size:11.5px;letter-spacing:.14em;color:var(--mute);font-weight:600;}
thead th{border-bottom:1px solid var(--accent-dark);}
td:first-child,th:first-child{text-align:left;font-family:var(--mincho);letter-spacing:.08em;white-space:nowrap;}
.price-note{font-size:12.5px;color:var(--mute);margin-top:18px;line-height:2;}
.price-note li{list-style:none;}
/* サイズ名（S〜XXL）を先頭で強調し、説明文と分ける。長い説明で「サイズ」が埋もれるのを防ぐ */
.rtable .rt-head .sz{font-weight:700;letter-spacing:.08em;}
.rtable .rt-head .dsc{display:block;margin-top:2px;}
/* A-4：サイズ名が長く1列目が表幅の58%を占めていたため、折り返し可＋40%固定にする。
   スマホは表ではなくカード表示（下のメディアクエリ）で、幅の指定が入るとサイズ名の欄が
   カード幅の40%に潰れてしまうため、PC幅にだけ適用する。 */
@media screen and (min-width: 769px) {
  .rtable-kv:not(.rtable-2col) th:first-child,
  .rtable-kv:not(.rtable-2col) td:first-child{white-space:normal;width:40%;}
}
.price-ui-note{font-size:11px;color:var(--mute);margin-top:10px;}
.swipe-hint{display:none;}   /* スマホでのみ表示（下のメディアクエリ） */

/* ============================================================
   ブロック8 ｜ 対応エリア（STUDIO: 面 sand）
   ============================================================ */
.area{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.area .im{height:320px;overflow:hidden;}
.area .im img{width:100%;height:100%;object-fit:cover;}
.area-list{list-style:none;margin-bottom:22px;}
.area-list li{border-bottom:1px solid var(--line);padding:14px 0;font-size:15px;letter-spacing:.1em;font-family:var(--mincho);}

/* ============================================================
   ブロック9 ｜ その他のサービス カード2枚（STUDIO: 面 dark ②）
   ============================================================ */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:52px;}
.card{border:1px solid var(--line-dark);padding:38px 34px;}
.card h3{color:var(--on-dark);}
.card .soon{font-size:9.5px;letter-spacing:.14em;border:1px solid rgba(241,238,231,.4);
  padding:2px 8px;margin-left:10px;vertical-align:3px;color:rgba(241,238,231,.7);}
.card p{font-size:14px;color:rgba(241,238,231,.72);margin-top:16px;line-height:2.05;}
.card .more{display:inline-block;margin-top:18px;font-size:12px;letter-spacing:.14em;color:var(--accent);}

/* ============================================================
   ブロック10 ｜ Q&A（STUDIO: 面 bg / ボックスID = qa）
   ============================================================ */
.qa{margin-top:48px;max-width:840px;margin-left:auto;margin-right:auto;}
.qa .item{border-top:1px solid var(--line);}
.qa .item:last-child{border-bottom:1px solid var(--line);}
.qa summary{list-style:none;cursor:pointer;position:relative;
  padding:22px 46px 22px 0;font-size:14.5px;letter-spacing:.04em;font-weight:600;line-height:1.9;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::before{content:"Q.";color:var(--accent-dark);margin-right:8px;font-family:var(--mincho);}
.qa summary::after{content:"";position:absolute;right:8px;top:27px;width:10px;height:10px;
  border-right:2px solid var(--accent-dark);border-bottom:2px solid var(--accent-dark);
  transform:rotate(45deg);transition:transform .2s ease;}
.qa .item[open] summary{color:var(--accent-dark);}
.qa .item[open] summary::after{transform:rotate(-135deg);}
.qa .qa-body{padding:0 40px 26px 0;}
.qa .qa-body p{font-size:14px;color:var(--mute);line-height:2.15;}

/* ============================================================
   ブロック11 ｜ About Us 抜粋（背景動画・FV と同じ扱い）
   ============================================================ */
.about-teaser-sec{position:relative;overflow:hidden;background:#0A0B0D;}
.about-teaser-sec .sec-bg-video{
  position:absolute;inset:0;top:0;left:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:0;
}
.about-teaser-sec::after{
  content:"";position:absolute;inset:0;top:0;left:0;right:0;bottom:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,11,13,.62) 0%,rgba(10,11,13,.5) 45%,rgba(10,11,13,.72) 100%);
}
.about-teaser-sec .wrap{position:relative;z-index:2;}
.about-teaser{text-align:center;}
.about-teaser blockquote{font-family:var(--mincho);font-size:20px;line-height:2.2;letter-spacing:.1em;color:var(--on-dark);}
.about-teaser .btn-line{margin-top:30px;}

/* ============================================================
   ブロック12 ｜ お問い合わせフォーム（STUDIO: 面 dark ③ / ボックスID = contact / C5）
   ============================================================ */
.form-wrap{max-width:840px;margin:52px auto 0;}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:22px 30px;}
.f{display:flex;flex-direction:column;gap:9px;}
.f.full{grid-column:1/-1;}
.f label{font-size:11.5px;letter-spacing:.1em;color:rgba(241,238,231,.78);}
.f label .req{color:var(--accent);margin-left:6px;font-size:10px;}
.f label .opt{color:rgba(241,238,231,.45);margin-left:6px;font-size:10px;}
.f input,.f select,.f textarea{
  height:48px;border:1px solid rgba(241,238,231,.4);background:#3A3E44;
  color:var(--on-dark);padding:0 14px;font-family:var(--sans);font-size:13px;
}
.f input::placeholder,.f textarea::placeholder{color:rgba(241,238,231,.5);}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);}
/* ネイティブのドロップダウン一覧が「濃い地に濃い文字」で読めない端末への対策 */
.f select{color:var(--on-dark);}
.f select option{background:#2E3136;color:#F1EEE7;}
.f select:invalid{color:rgba(241,238,231,.5);}
.f textarea{height:120px;padding:12px 14px;line-height:1.9;}
.f .hint{font-size:10.5px;color:rgba(241,238,231,.62);}
.form-submit{text-align:center;margin-top:38px;}
.form-submit .btn{padding:17px 64px;}
.form-foot{font-size:11.5px;color:rgba(241,238,231,.6);margin-top:20px;text-align:center;letter-spacing:.06em;}
.form-done{font-size:14px;line-height:2.15;text-align:center;color:var(--on-dark);padding:40px 0;letter-spacing:.05em;}
.form-error{font-size:12px;color:#ff9b9b;margin-top:14px;text-align:center;letter-spacing:.04em;width:100%;}

/* 送信前の確認画面 */
.form-review{max-width:840px;margin:52px auto 0;}
.review-head{font-size:12.5px;color:rgba(241,238,231,.82);letter-spacing:.04em;text-align:center;margin-bottom:26px;line-height:1.9;}
.review-list{display:grid;grid-template-columns:160px 1fr;border-top:1px solid rgba(241,238,231,.2);}
.review-list dt{padding:15px 14px 15px 0;font-size:11.5px;letter-spacing:.08em;color:rgba(241,238,231,.6);
  border-bottom:1px solid rgba(241,238,231,.14);}
.review-list dd{padding:15px 0;font-size:13.5px;color:var(--on-dark);border-bottom:1px solid rgba(241,238,231,.14);
  white-space:pre-wrap;word-break:break-word;line-height:1.9;}
.review-list dd.is-empty{color:rgba(241,238,231,.4);}
.review-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:34px;}
.review-actions .btn{padding:16px 40px;}

/* ============================================================
   ブロック13 ｜ フッター（STUDIO: 共通コンポーネント Footer / C2-4）
   ============================================================ */
.site-footer{background:var(--dark);color:rgba(241,238,231,.72);padding:64px 0 40px;font-size:12px;letter-spacing:.06em;}
.site-footer .ft{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;}
.site-footer .logo{margin-bottom:20px;}
.site-footer .logo img{height:88px;width:auto;margin-left:-10px;}
.site-footer .corp{line-height:2;color:rgba(241,238,231,.55);font-size:11.5px;}
.site-footer nav ul{list-style:none;display:flex;gap:20px;flex-wrap:wrap;}
.site-footer .sub-links{margin-top:14px;display:flex;gap:18px;flex-wrap:wrap;}
.site-footer .sub-links a:hover,.site-footer nav a:hover{color:var(--accent);}
.copy{border-top:1px solid var(--line-dark);margin-top:44px;padding-top:22px;font-size:10.5px;color:rgba(241,238,231,.60);}

/* ============================================================
   下層ページ（About Us / プライバシー）共通
   ============================================================ */
.page-head{background:var(--bg-sand);padding:80px 0 72px;text-align:center;}
.page-head h1{font-size:32px;letter-spacing:.12em;}
.page-head .en{display:block;font-size:10px;letter-spacing:.4em;color:var(--accent-dark);margin-top:12px;font-family:var(--sans);}
.doc{max-width:860px;margin:0 auto;padding:0 48px;}
.doc section{padding:56px 0;border-bottom:1px solid var(--line);}
.doc section:last-child{border-bottom:none;}
.doc h2{font-size:24px;margin-bottom:20px;}
.doc h3{font-size:17px;margin:28px 0 12px;}
.doc p{font-size:14px;line-height:2.15;}
.doc ul{margin:12px 0 12px 1.4em;font-size:14px;line-height:2.1;}
.doc table{min-width:0;margin-top:8px;}
.doc td:first-child{white-space:nowrap;color:var(--mute);font-family:var(--sans);font-size:13px;}
.doc td{text-align:left;font-size:13.5px;}
.poetic{font-family:var(--mincho);font-size:16px;line-height:2.4;letter-spacing:.06em;}

/* 準備中ページ */
.coming{min-height:52vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:80px 24px;}
.coming h1{font-size:26px;letter-spacing:.12em;}
.coming p{font-size:13px;color:var(--mute);}

/* ============================================================
   レスポンシブ（STUDIO: モバイル 390px で上書き）
   ============================================================ */
@media screen and (max-width: 768px) {
  .wrap{padding:0 22px;}
  html{scroll-padding-top:72px;}
  section{padding:64px 0;}
  h2{font-size:24px;}
  .site-header .hd{height:60px;gap:0;}
  .site-header .logo{font-size:18px;letter-spacing:.08em;}
  /* A-2：電話15×30px・Instagram18×18px だったタップ領域を44×44pxに広げる
     （アイコンの見た目の大きさは変えず、当たり判定のみ拡大。間隔を詰めて幅は現状維持） */
  .header-icons{margin-left:auto;gap:4px;}
  .header-icons a{min-width:44px;min-height:44px;}

  /* ハンバーガーメニュー */
  .nav-toggle{display:flex;}
  .site-header.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .site-header.open .nav-toggle span:nth-child(2){opacity:0;}
  .site-header.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .gnav{
    position:fixed;top:60px;left:0;right:0;bottom:0;flex-direction:column;gap:0;margin:0;
    background:var(--bg);padding:12px 22px 40px;overflow-y:auto;
    transform:translateX(100%);transition:transform .25s ease;z-index:60;
  }
  .site-header.open .gnav{transform:translateX(0);}
  .gnav > li{border-bottom:1px solid var(--line);}
  .gnav > li > a{display:block;padding:18px 2px;font-size:14px;}
  .has-drop > .drop{
    position:static;transform:none;display:block;min-width:0;
    background:none;border:0;box-shadow:none;padding:0 0 10px 14px;
  }
  .drop li a{padding:9px 0;}
  .drop li a small{font-size:10.5px;}
  .hero{height:76vh;min-height:500px;max-height:620px;}
  .hero .en{font-size:10px;margin-bottom:16px;}
  .hero h1{font-size:28px;line-height:1.8;letter-spacing:.03em;}
  .hero h1 .hero-lead{letter-spacing:.2em;}
  .hero .hero-rule{margin-top:20px;}
  .hero .sub{font-size:13px;letter-spacing:.1em;margin-top:18px;}
  .sp-only{display:inline;}
  .area,.cards,.reasons{grid-template-columns:1fr;gap:28px;}
  .works{grid-template-columns:1fr;gap:22px;}
  .area .im{height:240px;}
  .block-auto .wrap,.block-auto .txt{max-width:none;}
  .auto-hero{height:54vh;min-height:340px;max-height:480px;margin-top:36px;}
  .auto-hero img{object-position:42% center;}
  .steps{grid-template-columns:1fr 1fr;gap:22px 16px;}
  .step .im{height:120px;}
  .fields{grid-template-columns:1fr;}
  .review-list{grid-template-columns:1fr;}
  .review-list dt{border-bottom:0;padding:14px 0 0;}
  .review-list dd{padding:3px 0 14px;}
  .review-actions{flex-direction:column;}
  .review-actions .btn{width:100%;}
  .doc,.about-teaser blockquote{padding-left:22px;padding-right:22px;}
  .about-teaser blockquote{font-size:17px;}
  .site-footer .ft{flex-direction:column;gap:32px;}

  /* 料金表：スマホは「カードを横スクロール」（DAZN 参考） */
  .swipe-hint{display:block;font-size:10.5px;letter-spacing:.2em;color:var(--accent-dark);
    text-align:center;margin-top:12px;}
  .price-block .table-scroll{overflow:visible;}
  .rtable{display:block;min-width:0;border-collapse:collapse;}
  .rtable thead{position:absolute;left:-9999px;}
  .rtable tbody{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding:4px 22px 14px;margin:0 -22px;
  }
  .rtable tbody::after{content:"";flex:0 0 6px;}
  .rtable tr{
    display:block;flex:0 0 78%;scroll-snap-align:start;
    border:1px solid var(--line);background:#fff;box-shadow:0 4px 14px rgba(42,43,49,.06);
  }
  /* 追加オプションは横スクロールしない（縦積みカード） */
  .rtable-2col tbody{display:block;overflow:visible;margin:0;padding:0;scroll-snap-type:none;}
  .rtable-2col tbody::after{display:none;}
  .rtable-2col tbody tr{flex:none;width:100%;margin-bottom:12px;}
  .rtable-2col tbody tr:last-child{margin-bottom:0;}
  .rtable td{display:block;width:auto;border:0;border-top:1px solid var(--line);padding:11px 15px;text-align:left;letter-spacing:.02em;white-space:normal;}
  .rtable td::before{content:attr(data-label);display:block;color:var(--mute);font-size:10.5px;letter-spacing:.1em;font-weight:600;margin-bottom:3px;}
  .rtable td.rt-head{background:var(--bg-sand);border-top:0;font-family:var(--mincho);font-size:13px;letter-spacing:.04em;padding:13px 15px;line-height:1.7;}
  .rtable td.rt-head::before{display:none;}
  .rtable td.rt-head .sz{display:block;font-size:15px;letter-spacing:.12em;margin-bottom:4px;}
  .rtable td.rt-head .dsc{font-size:12px;color:var(--mute);line-height:1.65;margin-top:0;}
  .rtable-kv td:not(.rt-head){display:flex;justify-content:space-between;align-items:baseline;gap:14px;}
  .rtable-kv td:not(.rt-head)::before{margin-bottom:0;flex:0 0 auto;}
}

/* ============================================================
   SP追従CTA（B-3 / 2026-08-31 追加）
   PC では非表示。768px 以下でのみ画面下部に固定表示する。
   ============================================================ */
.sp-cta{display:none;}

@media screen and (max-width: 768px) {
  .sp-cta{
    display:grid;grid-template-columns:1fr 1.15fr;
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    border-top:1px solid rgba(42,43,49,.12);
    box-shadow:0 -4px 18px rgba(42,43,49,.12);
    transform:translateY(0);transition:transform .22s ease;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .sp-cta.is-hidden,.sp-cta.is-menu-open{transform:translateY(110%);}
  .sp-cta a{
    display:flex;align-items:center;justify-content:center;gap:7px;
    min-height:56px;font-size:13.5px;font-weight:700;letter-spacing:.1em;
  }
  .sp-cta-tel{background:var(--bg);color:var(--accent-dark);}
  .sp-cta-tel .ic{font-size:15px;}
  .sp-cta-form{background:var(--accent);color:#08302C;}
  /* 追従バーの高さぶん、フッター末尾が隠れないように余白を足す */
  .site-footer{padding-bottom:calc(40px + 56px + env(safe-area-inset-bottom));}
}