/* ============================================================
   モフタビ 公式サイト スタイル
   2026-11-10 タイポグラフィ・余白の体系として全面再設計
   （個別値の継ぎ接ぎを廃し、全ての余白・行間・字サイズを
   　下記のスケールと役割トークン経由に統一した）

   ■ 色（確定値・変更禁止）
     墨 #1D2B24 / 本文 #38433C / 生成り #F7F3E9 / ライト #FBF7EC / 紙 #FFFDF4
     ダーク #141A17・面 #1E2721・境界 #39463E
     ティール #0E7C74 は機能色（リンク等）のみ。赤は使わない。

   ■ 字サイズスケール（--fs-*）13/14/16/18/20/24/29/32/36/40/44
     100=ラベル・注記 / 200=補助 / 300=本文 / 400=項目見出し /
     500=大きめの項目見出し / 600=SP見出し / 700=SP大見出し /
     800=PC見出し・金額 / 900=数字大 / 1000=金額PC / 1100=PC大見出し

   ■ 行間の役割（--lh-*）
     read 1.9 = 長文の本文 / text 1.8 = 短い説明・注記 /
     lead 1.7 = リード・声明文 / heading 1.5 = 見出し /
     display 1.45 = SP大見出し / snug 1.6 = 小見出し / num 1.2 = 数字

   ■ 余白スケール（--sp-*、4pxベース）
     4/8/12/16/20/24/32/40/48/56/64/80/96/112/128/160
     セクション上下余白は --sec-y（SP 80 / PC 112）の一元管理とし、
     セクション境界の空きは常に 2×sec-y（SP 160 / PC 224）で均一にする。
     帯（cta-band / closing / footer）は帯ごとの役割値を使う。
     要素間隔は「見出し→本文 8」「ブロック間 40/48/64」の役割で寄せる。
     ステップ間は、1ステップが自己完結した単位（画＋見出し＋本文）のため
     ブロック間の最大段を使う（SP 64 / PC 80）。
     ※ スマホ実機（phone）の角丸・影などの機器形状、景色・相棒の
        配置寸法は余白スケールの対象外（幾何として個別に持つ）。
   ============================================================ */

:root {
  --brand: #F7F3E9;
  --bg: #FBF7EC;
  --paper: #FFFDF4;
  --ink: #1D2B24;
  --ink-body: #38433C;
  --ink-dim: #55645A;
  --line: #E3DCC8;
  --dark: #141A17;
  --dark-2: #1E2721;
  --dark-line: #39463E;
  --dark-dim: #A9B8AC;
  --teal: #0E7C74;
  --radius-sm: 12px;
  --radius: 20px;
  --radius-md: 24px;
  --radius-lg: 28px;
  --shadow: 0 16px 40px rgba(29, 43, 36, 0.10);
  --font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;

  --fs-100: 13px;
  --fs-200: 14px;
  --fs-300: 16px;
  --fs-400: 18px;
  --fs-500: 20px;
  --fs-600: 24px;
  --fs-700: 29px;
  --fs-800: 32px;
  --fs-900: 36px;
  --fs-1000: 40px;
  --fs-1100: 44px;

  --lh-read: 1.9;
  --lh-text: 1.8;
  --lh-lead: 1.7;
  --lh-heading: 1.5;
  --lh-display: 1.45;
  --lh-snug: 1.6;
  --lh-num: 1.2;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-28: 112px;
  --sp-32: 128px;
  --sp-40: 160px;

  --sec-y: var(--sp-20);
}
@media (min-width: 900px) {
  :root { --sec-y: var(--sp-28); }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-body);
  font-family: var(--font);
  font-size: var(--fs-300);
  line-height: var(--lh-read);
  letter-spacing: 0.01em;
}

h1, h2, h3, .turn, .inversion, .cta-line, .closing-line, .plan-amount { color: var(--ink); }
.promise h2, .promise h3 { color: #F2EEE1; }
.step-body h3, .feature h3, .promise h3, h1, h2, .turn, .inversion, .faq-item h3, .faq-item p, .cta-line { word-break: keep-all; overflow-wrap: anywhere; }
.store-note .s { white-space: nowrap; }

img { max-width: 100%; }

a { color: var(--teal); }
a:hover { text-decoration-thickness: 2px; }

/* ---------- 共通の器 ---------- */
.wrap {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--sp-6);
}
.wrap--narrow { max-width: 760px; }

.pc-only { display: none; }
@media (min-width: 900px) {
  .pc-only { display: inline; }
  .wrap { padding-inline: var(--sp-10); }
}
/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-6);
  background: rgba(247, 243, 233, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-brand { display: inline-flex; line-height: 0; flex: none; }
.site-logo { height: 40px; width: auto; display: block; }
.site-header nav { display: flex; gap: var(--sp-6); }
.site-header nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-200);
  font-weight: 500;
  white-space: nowrap;
}
.site-header nav a:hover { color: var(--teal); }
@media (min-width: 900px) {
  .site-header { padding: var(--sp-4) var(--sp-10); }
  .site-logo { height: 44px; }
}

/* ---------- 節の共通 ---------- */
.section, .section--compact { padding: var(--sec-y) 0; }

.kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
}
.kicker::before {
  content: "";
  width: 36px;
  height: 2px;
  background: var(--ink);
  flex: none;
}

.section h2 {
  font-size: var(--fs-600);
  line-height: var(--lh-heading);
  font-weight: 700;
  letter-spacing: 0.03em;
  margin: 0 0 var(--sp-6);
  text-wrap: balance;
}
@media (min-width: 900px) {
  .section h2 { font-size: var(--fs-800); }
}
.section-lead {
  margin: 0 0 var(--sp-10);
  color: var(--ink-dim);
  font-size: var(--fs-300);
}

/* ---------- ストア導線（共通部品） ---------- */
.store-badges { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.store-badges.center { justify-content: center; }
.store-badge { display: inline-flex; line-height: 0; }
.store-badge img { display: block; height: 54px; width: auto; }
.store-badge.is-disabled { opacity: 0.55; }
.store-note { margin: var(--sp-3) 0 0; font-size: var(--fs-200); font-weight: 500; }
.store-note.center { text-align: center; }
.store-status { margin: var(--sp-1) 0 0; font-size: var(--fs-100); color: var(--ink-dim); }
.store-status.center { text-align: center; }

/* ---------- ヒーロー（調査仕様準拠 2026-11-10） ----------
   構成: 景色ゾーン（作画）＋コピーゾーン（地の上）の分割。
   FV 占有率 55〜65% を、景色ゾーンの面積比で作る。 */
.hero {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.hero-scene-wrap {
  position: relative;
  height: 472px;
  overflow: hidden;
  background: var(--brand);
}
.hero-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}
.hero-partner {
  position: absolute;
  z-index: 2;
  left: 6%;
  bottom: 2%;
  height: 236px;
  width: auto;
}
.hero-copy { padding: var(--sp-4) var(--sp-6) var(--sp-5); }
.eyebrow {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--ink-dim);
}
.hero h1 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-700);
  line-height: var(--lh-display);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-wrap: balance;
}
.hero .lead { word-break: keep-all; overflow-wrap: anywhere; }
.hero .lead {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-300);
  line-height: var(--lh-lead);
  font-weight: 500;
  color: var(--ink);
  max-width: 32em;
}
.store-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
@media (min-width: 900px) {
  .hero {
    flex-direction: row;
    height: calc(100svh - 77px);
    min-height: 620px;
  }
  .hero-copy {
    order: 1;
    flex: none;
    width: 508px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sp-10) var(--sp-12);
  }
  .hero-scene-wrap { order: 2; flex: 1; height: auto; }
  .hero h1 { font-size: var(--fs-1100); line-height: var(--lh-heading); margin-bottom: var(--sp-4); }
  .hero .lead { margin-bottom: var(--sp-6); }
  .hero-partner { left: auto; right: 10%; bottom: 2.5%; height: 46%; }
}

/* ---------- 節の頭の景色帯 ---------- */
.section--flush-top { padding-top: 0; }
.section-visual {
  height: 190px;
  margin-bottom: var(--sp-14);
  overflow: hidden;
}
.section-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
@media (min-width: 900px) {
  .section-visual { height: 300px; margin-bottom: var(--sp-20); }
}
.section-visual--night img { object-position: 50% 18%; }

/* ---------- 共感（状況） ---------- */
.situations { display: grid; gap: var(--sp-4); margin: 0 0 var(--sp-10); }
.situation {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-6);
}
.situation p { margin: 0; font-size: var(--fs-300); font-weight: 500; line-height: var(--lh-text); }
@media (min-width: 900px) {
  .situations { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
  .situation { padding: var(--sp-6); }
}
.turn {
  margin: 0;
  text-align: left;
  font-size: var(--fs-400);
  font-weight: 700;
  line-height: var(--lh-lead);
}
@media (min-width: 900px) { .turn { font-size: var(--fs-500); } }
.turn-sub {
  margin: var(--sp-4) 0 0;
  text-align: left;
  font-size: var(--fs-300);
  color: var(--ink-dim);
}
.inversion {
  margin: var(--sp-8) 0 0;
  text-align: left;
  font-size: var(--fs-400);
  font-weight: 700;
  letter-spacing: 0.02em;
}
@media (max-width: 899px) { .inversion { font-size: var(--fs-300); letter-spacing: 0.01em; } }

/* ---------- 仕組み ---------- */
.phone {
  position: relative;
  background: var(--dark);
  border-radius: 54px;
  padding: 10px;
  box-shadow: 0 24px 56px rgba(29, 43, 36, 0.22);
}
.phone::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 31%;
  height: 13px;
  border-radius: 999px;
  background: #000;
  z-index: 2;
}
.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 44px;
}
.step-rows { display: grid; gap: var(--sp-16); }
.step-row {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: var(--sp-6);
  align-items: center;
}
.step-media .phone.mid {
  border-radius: 40px;
  padding: 6px;
  box-shadow: 0 14px 34px rgba(29, 43, 36, 0.16);
}
.step-media .phone.mid::before { top: 13px; height: 10px; }
.step-media .phone.mid .screen {
  border-radius: 34px;
  overflow: hidden;
  padding-top: 24px;
}
.step-media .phone.mid .screen img { border-radius: 0; }
.step-num {
  display: block;
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-600);
  font-weight: 700;
  line-height: 1;
  color: var(--ink-dim);
  opacity: 0.55;
}
.step-body h3 { margin: 0; font-size: var(--fs-400); font-weight: 700; line-height: var(--lh-snug); }
.step-body p { margin: var(--sp-2) 0 0; color: var(--ink-dim); }
.step-body p.step-num { margin: 0 0 var(--sp-2); }
@media (min-width: 900px) {
  .step-rows { gap: var(--sp-20); }
  .step-row { grid-template-columns: 230px 1fr; gap: var(--sp-16); }
  .step-row--flip { grid-template-columns: 1fr 230px; }
  .step-row--flip .step-media { order: 2; }
  .step-row--flip .step-body { order: 1; }
  .step-num { font-size: var(--fs-900); }
  .step-body h3 { font-size: var(--fs-500); }
  .step-media { padding-inline: var(--sp-3); }
}

/* ---------- 使用後の体験 ---------- */
.feature-visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0 0 var(--sp-12);
  line-height: 0;
}
.feature-visual img { width: 100%; height: auto; display: block; }
.features { display: grid; gap: var(--sp-8); margin: 0 0 var(--sp-16); }
.feature h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-400); font-weight: 700; }
.feature p { margin: 0; color: var(--ink-dim); }
@media (min-width: 900px) {
  .features { grid-template-columns: repeat(3, 1fr); gap: var(--sp-10); }
  .feature-visual { margin-bottom: var(--sp-14); }
}
.partner-feature {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0;
  margin: 0 0 var(--sp-16);
  border-radius: var(--radius-lg);
  background: var(--brand);
}
.partner-scene {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 320px;
  width: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}
.partner-stand {
  position: relative;
  z-index: 1;
  justify-self: center;
  height: 250px;
  width: auto;
  margin-top: var(--sp-10);
}
.partner-copy {
  position: relative;
  z-index: 1;
  margin: var(--sp-5) var(--sp-4) var(--sp-4);
  padding: var(--sp-6);
  background: var(--paper);
  border-radius: var(--radius);
}
.partner-copy h3 { margin: 0 0 var(--sp-4); font-size: var(--fs-500); font-weight: 700; }
.partner-copy p { margin: 0 0 var(--sp-4); color: var(--ink-dim); }
.partner-copy p:last-child { margin-bottom: 0; }
.stages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  color: var(--ink) !important;
}
.stages span:not(.stage-arrow) {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-200);
  line-height: var(--lh-snug);
}
.stage-arrow { color: var(--ink-dim); font-weight: 400; }
@media (max-width: 899px) {
  .stage-arrow { display: none; }
}
@media (min-width: 900px) {
  .partner-feature { min-height: 430px; }
  .partner-scene { height: 100%; }
  .partner-stand {
    position: absolute;
    left: 5%;
    bottom: 3%;
    height: 330px;
    margin: 0;
  }
  .partner-copy {
    justify-self: end;
    width: min(600px, 56%);
    margin: var(--sp-10);
  }
}
.dest-heading { margin: 0 0 var(--sp-2); font-size: var(--fs-500); font-weight: 700; }
.dest-lead { margin: 0 0 var(--sp-6); color: var(--ink-dim); }
.dest-grid { display: grid; gap: var(--sp-5); }
.dest-grid figure { margin: 0; }
.dest-grid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.dest-grid figcaption { margin-top: var(--sp-2); font-size: var(--fs-200); font-weight: 500; color: var(--ink-dim); }
@media (min-width: 900px) {
  .dest-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .dest-grid .dest-wide { grid-column: 1 / -1; }
}

/* ---------- 中間 CTA ---------- */
.cta-band { background: var(--brand); padding: var(--sp-14) 0; border-block: 1px solid var(--line); }
.cta-line { margin: 0 0 var(--sp-5); text-align: center; font-size: var(--fs-400); font-weight: 700; }
@media (min-width: 900px) { .cta-band { padding: var(--sp-16) 0; } }

/* ---------- 約束（ダーク） ---------- */
.section--dark { background: var(--dark); color: #F2EEE1; }
.section--dark .kicker { color: var(--dark-dim); }
.section--dark .kicker::before { background: #F2EEE1; }
.section--dark h2 { color: #F2EEE1; }
.promises { display: grid; gap: 0; margin-top: var(--sp-12); border-top: 1px solid var(--dark-line); }
.promise { padding: var(--sp-8) 0; border-bottom: 1px solid var(--dark-line); }
.promise h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-400); font-weight: 700; }
.promise p { margin: 0; color: var(--dark-dim); }
.promise-note { margin: var(--sp-6) 0 0; font-size: var(--fs-100); color: var(--dark-dim); }
@media (min-width: 900px) {
  .promise { display: grid; grid-template-columns: 340px 1fr; gap: var(--sp-10); padding: var(--sp-8) 0; }
  .promise h3 { margin: 0; font-size: var(--fs-500); }
}

/* ---------- 料金 ---------- */
.price-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-6);
  box-shadow: var(--shadow);
}
.price-card > p { margin: 0 0 var(--sp-4); }
.plans { display: grid; gap: var(--sp-4); margin: var(--sp-6) 0; }
.plan {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-6);
  background: var(--bg);
  text-align: center;
}
.plan-name { margin: 0 0 var(--sp-2); font-size: var(--fs-100); font-weight: 700; letter-spacing: 0.12em; color: var(--ink-dim); }
.plan-amount { margin: 0; font-size: var(--fs-800); font-weight: 700; line-height: var(--lh-num); }
.plan-tax { font-size: var(--fs-200); font-weight: 500; color: var(--ink-dim); }
.plan-note { margin: var(--sp-3) 0 0; font-size: var(--fs-100); line-height: var(--lh-text); color: var(--ink-dim); text-align: left; }
@media (min-width: 900px) {
  .price-card { padding: var(--sp-12); }
  .plans { grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }
  .plan-amount { font-size: var(--fs-1000); }
}
.fineprint { font-size: var(--fs-100); line-height: var(--lh-text); color: var(--ink-dim); }
.price-card .fineprint { margin: 0 0 var(--sp-3); }
.price-card .fineprint:last-child { margin-bottom: 0; }

/* ---------- FAQ 導線 ---------- */
.faq-teaser p { margin: 0 0 var(--sp-4); color: var(--ink-dim); }
.faq-teaser p:last-child { margin-bottom: 0; }
.text-link { font-weight: 700; font-size: var(--fs-300); }

/* ---------- 締め ---------- */
.closing {
  position: relative;
  overflow: hidden;
  background: var(--brand);
  padding: var(--sp-24) var(--sp-6) var(--sp-28);
  text-align: center;
  border-top: 1px solid var(--line);
}
.closing-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}
.closing-inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
  padding: var(--sp-10) var(--sp-6) var(--sp-12);
  background: var(--paper);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}
.closing-partner {
  position: absolute;
  z-index: 1;
  right: 6%;
  bottom: 2%;
  height: 34%;
  width: auto;
}
.closing-line { font-size: var(--fs-600); font-weight: 700; line-height: var(--lh-lead); letter-spacing: 0.02em; margin: 0 0 var(--sp-8); }
@media (max-width: 899px) {
  .closing-line { font-size: var(--fs-500); }
  .closing-partner { display: none; }
}
@media (min-width: 900px) {
  .closing { padding: var(--sp-32) var(--sp-6) var(--sp-40); }
  .closing-line { font-size: var(--fs-700); }
}

/* ---------- フッター ---------- */
.site-footer { background: var(--dark); color: var(--dark-dim); padding: var(--sp-10) 0; }
.footer-inner { display: grid; gap: var(--sp-4); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.site-footer nav a { color: #F2EEE1; text-decoration: none; font-size: var(--fs-200); }
.site-footer nav a:hover { text-decoration: underline; }
.site-footer p { margin: 0; font-size: var(--fs-100); }
/* 下層ページのフッター（.footer-inner を持たない形）も同じ見え方にする */
.site-footer > nav, .site-footer > p {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--sp-6);
}
.site-footer > nav { margin-bottom: var(--sp-4); }

/* ============================================================
   下層ページ（privacy / terms / faq / contact / tokushoho）
   文面・構成は正として維持。同じトークンで見え方だけを揃える。
   ============================================================ */
body:not(.page-home) main {
  max-width: 760px;
  margin-inline: auto;
  padding: var(--sp-12) var(--sp-6) var(--sec-y);
}
body:not(.page-home) main h1 {
  font-size: var(--fs-700);
  line-height: var(--lh-heading);
  margin: 0 0 var(--sp-8);
  letter-spacing: 0.02em;
}
body:not(.page-home) main h2 {
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
  margin: var(--sp-10) 0 var(--sp-3);
}
body:not(.page-home) main h3 { font-size: var(--fs-300); margin: var(--sp-6) 0 var(--sp-2); }
body:not(.page-home) main p { margin: 0 0 var(--sp-4); }
@media (min-width: 900px) {
  body:not(.page-home) main { padding: var(--sp-16) var(--sp-6) var(--sec-y); }
  body:not(.page-home) main h1 { font-size: var(--fs-800); }
}

/* 法務ページの条文 */
/* 表は項目名3割／内容7割の固定配分。項目名に nowrap を付けると最長ラベルが
   列幅を占有して内容列が潰れるため、項目名は折り返し可とする（2026-11-11 是正） */
.legal { font-size: var(--fs-300); }
.legal table { border-collapse: collapse; width: 100%; margin: var(--sp-4) 0 var(--sp-6); font-size: var(--fs-200); table-layout: fixed; }
.legal th, .legal td { border: 1px solid var(--line); padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: top; }
.legal th { background: var(--brand); font-weight: 700; width: 30%; }

/* FAQ ページ */
body.page-faq main .block { padding: 0; margin: 0 0 var(--sp-2); }
.faq-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-6);
  margin: 0 0 var(--sp-4);
}
.faq-item h3 { margin: 0 0 var(--sp-2) !important; font-size: var(--fs-400); }
.faq-item p { margin: 0 !important; color: var(--ink-dim); }
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-6);
}

/* お問い合わせフォーム */
.contact-form { display: grid; gap: var(--sp-6); margin-top: var(--sp-8); }
.contact-form label { display: grid; gap: var(--sp-2); font-weight: 500; font-size: var(--fs-300); }
.contact-form input,
.contact-form select,
.contact-form textarea {
  font: inherit;
  font-size: var(--fs-300);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  width: 100%;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}
.contact-form button[type="submit"] {
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--teal);
  border: 0;
  border-radius: 999px;
  padding: var(--sp-4) var(--sp-10);
  cursor: pointer;
  justify-self: start;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: var(--ink); font-weight: 700; }
.form-error:not(:empty) {
  background: var(--brand);
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
}
.form-note, .noscript-note, .placeholder-note { font-size: var(--fs-100); color: var(--ink-dim); }

/* ---------- SPの幅（実機360pxに合わせ、全セクションで左右16pxに統一） ---------- */
@media (max-width: 899px) {
  .wrap { padding-inline: var(--sp-4); }
  .hero-copy { padding-inline: var(--sp-4); }
  .closing { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .site-header { padding-inline: var(--sp-4); gap: 0; justify-content: space-between; }
  .site-logo { height: 40px; }
  .site-header nav { gap: var(--sp-5); }
  .site-header nav a { font-size: var(--fs-100); }
  .step-row { grid-template-columns: 1fr; gap: var(--sp-4); }
  .step-media { max-width: 200px; }
  body:not(.page-home) main { padding-inline: var(--sp-4); }
  .site-footer > nav, .site-footer > p { padding-inline: var(--sp-4); }
}