/* mobile 起点。1024px〜が desktop（Figma 2:126）、〜1023px は mobile（Figma 15:867）を引き延ばす。
   実測値の出典は spec/20-design.md と Figma の実コード。 */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font-base);
  font-weight: var(--fw-regular);
  font-size: var(--fs-15);
  letter-spacing: var(--ls-06);
  color: var(--color-ink);
  background: var(--color-bg);
}

img {
  display: block;
  max-width: 100%;
}

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

ul {
  list-style: none;
}

button {
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.inner {
  width: 100%;
  max-width: var(--w-900);
  margin-inline: auto;
}

.sp-only { display: inline; }
.pc-only { display: none; }

/* 見た目から消して読み上げには残す。インライン SVG のロゴのように
   alt を持てない要素の代替テキストに使う。 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- header ---------- */

/* ヘッダーは常時追従（クライアント修正指示 002、2026-07-27）。
   バーとしては描かず、ロゴとハンバーガーだけが浮いて付いてくる
   （ユーザー指示 2026-07-28。白帯と罫線は付けない）。
   バー自体は透明のままクリックを素通しし、子要素だけ受ける。 */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  padding: 30px 15px;
  z-index: 10;
  pointer-events: none;
}

.site-header a,
.site-header button {
  pointer-events: auto;
}

.header-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* キービジュアル（暗い写真）の上ではロゴは白
   （クライアント指示 2026-07-26「ヘッダーをキービジュアルの際は白に変更」）。
   ヒーローを過ぎると白背景になるので .is-scrolled で黒へ切り替える。
   ロゴは fill="currentColor" のインライン SVG なので、色はここの color で決まる。 */
.site-logo {
  display: flex;
  align-items: center;
  color: var(--color-bg);
  transition:
    color var(--dur-menu-icon) var(--ease-menu),
    opacity var(--dur-menu-icon) var(--ease-menu),
    visibility var(--dur-menu-icon) var(--ease-menu);
}

/* Figma 50:6 の実測は 116 x 27.0064。mobile も同じ SVG を同じ寸法で出す
   （クライアント修正指示 2026-07-27「スマホもPC同様」）。 */
.site-logo-mark {
  display: block;
  width: 116px;
  height: 27px;
}

/* ヒーローの下端がヘッダー下端(100px)を通過したら、白い本文の上に来るので黒へ。
   判定は IntersectionObserver（index.html）で、scroll イベントは使わない。 */
body.is-scrolled .site-logo {
  color: var(--color-ink);
}

body.is-scrolled .menu-btn span {
  background: var(--color-ink);
}

/* メニューを開いている間はヘッダーを暗幕（z-index 30）より上に出す。
   ロゴはパネル側の右寄せロゴと二重になるので隠す。 */
body.menu-open .site-header {
  z-index: 40;
}

body.menu-open .site-logo {
  opacity: 0;
  visibility: hidden;
}

.menu-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  /* 見た目は 40x18 のまま、padding でタップ領域を 44x44 に広げる。
     線は右端揃えなので padding-right は 0 のままにする。 */
  width: 44px;
  height: 44px;
  padding: 13px 0 13px 4px;
}

/* 3本線もキービジュアルの上なので白。ヒーローを過ぎたら .is-scrolled で黒へ 240ms。 */
.menu-btn span {
  position: relative;
  display: block;
  height: var(--stroke);
  background: var(--color-bg);
  transition:
    width var(--dur-menu-icon) var(--ease-menu),
    opacity var(--dur-menu-icon) var(--ease-menu),
    transform var(--dur-menu-icon) var(--ease-menu),
    background-color var(--dur-menu-icon) var(--ease-menu);
}

/* 開いている間の×は白背景のパネルに重なるので黒。
   切り替えはパネルの滑り終わりまで遅らせる。開いた瞬間に黒へ変えると、
   まだ暗幕しか無い 500ms のあいだ×が消える。閉じるときも同じ理由で遅らせる。
   span 本体の background でなく重ねた層で出すのは、スクロール時の色替え(240ms)と
   時間軸が違うため。1つの background-color に2つの遅延は書けない。 */
.menu-btn span::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-black);
  opacity: 0;
  transition: opacity 0s linear var(--dur-menu-panel);
}

body.menu-open .menu-btn span::before {
  opacity: 1;
}

.menu-btn span:nth-child(1) { width: 22px; }
.menu-btn span:nth-child(2) { width: 17px; }
.menu-btn span:nth-child(3) { width: 12px; }

/* 開いている間は×印。3本線は幅が不揃いなので上下2本を 22px に揃え、
   中央（3本の間隔 7px）へ寄せてから ±45deg 回す。 */
.menu-btn[aria-expanded="true"] span:nth-child(1) {
  width: 22px;
  transform: translateY(7px) rotate(45deg);
}

.menu-btn[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-btn[aria-expanded="true"] span:nth-child(3) {
  width: 22px;
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- menu drawer ----------
   形式は右からスライドインするドロワー（ユーザー指示 2026-07-26、既存案件「耕流祭」に合わせる）。
   パネルの中身は Figma mobile 15:1549 が正。desktop も幅で出し分けず同じものを出す。 */

/* 暗幕。閉じ切ってから visibility を落とすので、遅延を 0s linear で入れる。 */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  justify-content: flex-end;
  /* 閉じている間のパネルは translateX(100%) で画面外に居るので、ここで刈る */
  overflow: hidden;
  background: var(--color-backdrop);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-menu-backdrop) ease,
    visibility 0s linear var(--dur-menu-backdrop);
}

.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-menu-backdrop) ease;
}

.menu-panel {
  flex: 0 0 min(83%, 480px);
  height: 100%;
  /* 上だけヘッダー高さ(100px)ぶん空ける。Figma のパネル値は 60px だが、
     それだとヘッダーの×(y 41.9〜58.1)とパネルのロゴが 1.9px まで詰まる。
     Figma はパネルをヘッダーと重ねた状態で描いていないので、ここは実装側で決める。 */
  padding: 100px var(--pad-mobile) 60px;
  background: var(--color-bg);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 60px;
  transform: translateX(100%);
  transition: transform var(--dur-menu-panel) var(--ease-menu);
}

.menu-overlay.is-open .menu-panel {
  transform: translateX(0);
}

/* iOS Safari は body の overflow:hidden を無視するので position:fixed で止める。
   スクロール位置は inline style の top に退避し、閉じるときに JS が戻す。 */
body.menu-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

.menu-head {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 60px;
}

.menu-logo {
  width: 101px;
  height: 27px;
}

.menu-nav ul {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
}

/* ナビ項目のスタガーはドロワーのスライドと二重に動いて重く見えるので入れない。 */
.menu-nav li {
  padding-block: 1px;
}

.menu-nav a {
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-2);
  line-height: var(--lh-28);
}

.menu-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  text-align: right;
}

.menu-address {
  color: var(--color-grey-33);
  letter-spacing: var(--ls-06);
  line-height: 21px;
}

.menu-tel {
  color: var(--color-grey-33);
  letter-spacing: var(--ls-2);
  line-height: 15px;
}

.menu-copy {
  font-size: var(--fs-12);
  color: var(--color-grey-40);
  letter-spacing: var(--ls-06);
  line-height: 12px;
}

/* ドロワーの開閉は prefers-reduced-motion を見ない（ユーザー指示 2026-07-26）。
   OS 側でアニメーションを切っている環境でも同じ動きを出す。
   戻す場合はこのコメントを下記の @media に差し替える。

   @media (prefers-reduced-motion: reduce) {
     .menu-overlay, .menu-overlay.is-open, .menu-panel, .menu-btn span, .site-logo { transition: none; }
     .menu-panel { transform: none; }
   }

   .is-open 側にも transition: none を書かないと、開くときだけ詳細度で負けてフェードが残る。 */

/* ---------- hero ---------- */

.hero {
  position: relative;
  height: 700px;
  overflow: hidden;
}

.hero img {
  position: absolute;
  width: 280.27%;
  height: 100%;
  left: -53.61%;
  top: 0;
  max-width: none;
  object-fit: cover;
}

.hero-title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--fs-45);
  font-weight: var(--fw-medium);
  letter-spacing: 1px;
  line-height: var(--lh-52);
  color: var(--color-bg);
  white-space: nowrap;
}

/* ---------- sections 共通 ---------- */

/* ヘッダーが fixed なので、ページ内リンクで飛んだ先が 100px ぶん潜る。
   レイアウトは動かさず scroll-margin だけで逃がす。 */
section,
#contact {
  padding-inline: var(--pad-mobile);
  scroll-margin-top: 100px;
}

.section-title {
  font-size: var(--fs-21);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-324);
  line-height: var(--gap-36);
}

#plan .section-title,
#after .section-title {
  letter-spacing: var(--ls-2);
}

/* ---------- about ---------- */

#about .inner {
  max-width: 760px;
  padding-top: 114px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.intro-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.intro-body p {
  line-height: var(--lh-30);
}

.intro-body .note {
  padding-top: 2px;
  font-size: var(--fs-12);
  line-height: var(--lh-26);
  color: var(--color-grey-40);
}

/* ---------- flow ---------- */

#flow .inner {
  padding-top: 84px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-36);
}

.flow-items {
  display: flex;
  flex-direction: column;
  gap: var(--gap-36);
}

.flow-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.flow-subject {
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-192);
  line-height: var(--lh-32);
}

.flow-desc {
  color: var(--color-grey-20);
  line-height: var(--lh-28);
}

.flow-photo {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.flow-photo img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

/* トリミングは Figma の実測%をそのまま使う */
.photo-kiyoharae { aspect-ratio: 900 / 502; }
.photo-kiyoharae img { width: 120.24%; height: 119.52%; left: -14.47%; top: 0.49%; }

.photo-sankotsu-a { aspect-ratio: 513 / 285; }
.photo-sankotsu-a img { width: 122.55%; height: 123.97%; left: -11.35%; top: -11.74%; }

.photo-sankotsu-b { aspect-ratio: 900 / 500; }
.photo-sankotsu-b img { width: 100%; height: 100%; left: 0; top: 0; }

.photo-sankotsu-c { aspect-ratio: 718 / 387; }
.photo-sankotsu-c img { width: 114.48%; height: 119.37%; left: -14.49%; top: -9.81%; }

.flow-photo-pair {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.flow-photo-pair .flow-photo {
  flex: 1;
}

/* ---------- plan ---------- */

#plan .inner {
  padding-top: 180px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-36);
}

.plan-detail {
  border: var(--stroke) solid var(--color-line-plan);
  padding: 73px 21px;
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.plan-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 42px;
}

.plan-name {
  font-size: var(--fs-21);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-2);
  line-height: 18px;
  text-align: center;
}

.plan-price {
  text-decoration: underline;
  text-underline-position: from-font;
}

.plan-lead {
  width: 100%;
  line-height: 24px;
}

/* mobile は縦積み。gap 3px は ［散骨場所］の本文と地図の間隔（Figma mobile 15:1183）で、
   .plan-info の最後の行の下がそのまま地図の上になる。DOM は desktop と共通。 */
.plan-cols {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.plan-info {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.plan-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.plan-row h4 {
  font-weight: var(--fw-medium);
  letter-spacing: 0.3px;
  line-height: var(--lh-28);
  text-align: center;
}

.plan-row p {
  letter-spacing: 0.3px;
  line-height: var(--lh-28);
}

.plan-row .plan-note {
  font-size: var(--fs-12);
  letter-spacing: 0.24px;
  line-height: 21px;
  color: var(--color-grey-40);
}

/* 地図は全面表示（クライアント修正指示 002、2026-07-27）。
   Figma は 122.26% × 101.69% のトリミングで四辺の地名が切れていたので、
   実測値からは意図的に外れる。mobile は幅なりに高さを決める（800:610 = 1.311）。 */
.plan-map img {
  width: 100%;
  height: auto;
}

.plan-button {
  display: flex;
  justify-content: center;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-196);
  line-height: var(--lh-28);
  text-align: center;
}

.btn-schedule {
  width: 100%;
  max-width: var(--w-820);
  height: 52px;
  background: var(--color-black);
  color: var(--color-bg);
}

/* ---------- その他費用 ---------- */

.etc {
  display: flex;
  flex-direction: column;
  gap: var(--gap-78);
}

.etc-title {
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-2);
  line-height: var(--lh-32);
  text-align: center;
}

.etc-lead {
  color: var(--color-grey-40);
  line-height: var(--lh-26);
  text-align: center;
}

.fee-table {
  display: flex;
  flex-direction: column;
}

/* mobile は 項目 / 金額 / 説明 の3列。説明は既定で金額の右横（列間 21px）に置き、
   .fee-row--stacked の行だけ金額の下へ全幅で落とす（Figma mobile 15:1198）。 */
.fee-row {
  border-top: var(--stroke) solid var(--color-line-box);
  padding-block: 12px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 6px 21px;
  align-items: start;
}

.fee-row:last-child {
  border-bottom: var(--stroke) solid var(--color-line-box);
}

.fee-name {
  letter-spacing: 0.3px;
  line-height: var(--lh-28);
  white-space: nowrap;
}

.fee-price {
  letter-spacing: 0.3px;
  line-height: var(--lh-28);
  padding-inline: 8px;
}

.fee-desc {
  color: var(--color-grey-40);
  letter-spacing: 0.3px;
  line-height: var(--lh-26);
}

.fee-row--stacked .fee-desc {
  grid-column: 1 / -1;
}

.fee-desc:empty {
  display: none;
}

/* ---------- after ---------- */

#after .inner {
  padding-top: 84px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-36);
}

.after-item {
  border-top: var(--stroke) solid var(--color-line);
  padding: 29px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.after-item:last-child {
  border-bottom: var(--stroke) solid var(--color-line);
  padding-bottom: 29px;
}

.after-when {
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-26);
  line-height: var(--lh-32);
}

.after-body {
  padding-left: 12px;
}

.after-body h3 {
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-224);
  line-height: var(--lh-32);
}

.after-body p {
  color: var(--color-grey-20);
  line-height: var(--lh-28);
}

/* ---------- contact ---------- */

#contact {
  padding-block: 82px;
}

.contact-box {
  border: var(--stroke) solid var(--color-line-box);
  padding: 37px 21px;
}

.subhead {
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-2);
  line-height: var(--gap-36);
  text-align: center;
}

.contact-notes {
  padding-top: 27px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-notes li {
  position: relative;
  padding-left: 16.8px;
  letter-spacing: var(--ls-2);
  line-height: 21px;
}

.contact-notes li::before {
  content: "・";
  /* 読み上げから外す。alt text 構文が未対応のブラウザは上の宣言が残る */
  content: "・" / "";
  position: absolute;
  left: 0;
  top: 0;
  letter-spacing: var(--ls-06);
}

.contact-button {
  display: flex;
  justify-content: center;
  padding: 27px 0 36px;
}

.btn-apply {
  width: 300px;
  max-width: var(--w-574);
  height: 60px;
  background: var(--color-black);
  border: var(--stroke) solid var(--color-black);
  color: var(--color-bg);
}

.contact-tel {
  border-top: var(--stroke) solid var(--color-line-box);
  padding-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 27px;
}

.contact-tel .subhead {
  letter-spacing: var(--ls-288);
}

.tel-number {
  font-size: var(--fs-34);
  letter-spacing: var(--ls-136);
  line-height: var(--lh-34);
}

.tel-number a {
  text-decoration: underline;
  text-underline-position: from-font;
}

.tel-hours {
  width: 100%;
  color: var(--color-grey-33);
  line-height: 24px;
}

/* ---------- footer ---------- */

.site-footer {
  border-top: var(--stroke) solid var(--color-line-box);
  padding: 60px var(--pad-mobile);
}

/* mobile は Figma 15:1549（mobile のフッター単体は 15:362 / 15:1566）の右寄せ。
   desktop は 2:285 の左寄せ横並びで、下の @media が全て上書きする。
   メニューパネルと見た目は同じだが別物として扱い、共通化しない。 */
/* 間隔は gap でなく margin で置く。Figma 15:1549 ではコピーライトが
   住所・電話と同じグループ(15:1561, gap 9px)に入っていて、
   ロゴ+ナビとの 60px とは別の値になるため。 */
.site-footer .inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.site-footer .footer-brand {
  margin-top: 60px;
}

.site-footer .footer-copy {
  margin-top: 9px;
}

.footer-top {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 60px;
}

.footer-logo {
  width: 101px;
  height: 27px;
}

.footer-nav ul {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
}

.footer-nav li {
  padding-block: 1px;
}

.footer-nav a {
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-2);
  line-height: var(--lh-28);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  color: var(--color-grey-33);
  text-align: right;
}

.footer-address {
  letter-spacing: var(--ls-06);
  line-height: 21px;
}

.footer-tel {
  letter-spacing: var(--ls-2);
  line-height: 15px;
}

.footer-copy {
  font-size: var(--fs-12);
  color: var(--color-grey-40);
  letter-spacing: var(--ls-06);
  line-height: 12px;
}

/* ---------- 申し込みバナー ----------
   全幅で出す（ユーザー指示 2026-07-28。当初は Figma の desktop アートボードにしか
   無かったため desktop のみだった）。mobile は 375px の画面で本文を塞がないよう
   180px に縮める。Figma に mobile 版の指定は無く、ここは実装側で決めた値。 */

.float-banner {
  position: fixed;
  right: var(--pad-mobile);
  bottom: 20px;
  z-index: 20;
  width: 180px;
}

.banner-link {
  display: block;
}

/* width/height 属性は 243x180 のまま、mobile の縮小時も比率を保つ */
.banner-link img {
  width: 100%;
  height: auto;
}

.banner-close {
  position: absolute;
  top: -15px;
  left: -15px;
  width: 30px;
  height: 30px;
}

/* ---------- desktop（1024px〜、Figma 1280 アートボード） ---------- */

@media (min-width: 1024px) {

  .sp-only { display: none; }
  .pc-only { display: inline; }

  .site-header {
    padding: 30px 32px;
  }

  .hero img {
    width: 100%;
    height: 137.73%;
    left: 0;
    top: -0.09%;
  }

  /* about */

  #about .inner {
    max-width: var(--w-900);
    padding-top: 180px;
    gap: var(--gap-36);
  }

  /* flow */

  #flow .inner {
    padding-top: 82px;
  }

  .flow-items {
    gap: 39px;
  }

  .flow-photo-pair {
    flex-direction: row;
  }

  /* plan */

  /* 左右は Figma の 73px から 24px に詰める（ユーザー指示 2026-07-28「もうちょっと左右使っていい」）。
     73px のままだと列幅が足りず「散骨証明書」の途中などで折れるうえ、
     地図の下端が文字の書き終わりに届かない。上下 73・左右 24 の非対称は
     Figma mobile（73/21）と同じ構図。 */
  .plan-detail {
    padding: 73px 24px;
  }

  .plan-head {
    gap: var(--gap-m);
  }

  .plan-lead {
    text-align: center;
    line-height: var(--lh-28);
  }

  /* 地図の上端を文字の書き出し、下端を書き終わりに合わせる（ユーザー指示 2026-07-28）。
     地図の縦横比は 800/610 固定なので、幅で高さを決める。
     info 350 + gap 50 + map 452 = 852（枠 900 − padding 48）。
     452 ÷ 1.3115 ≒ 345px が文字ブロックの実測高 347px とほぼ一致する。 */
  .plan-cols {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--gap-50);
  }

  .plan-info {
    width: 350px;
    flex-shrink: 0;
  }

  .plan-row h4 {
    text-align: left;
  }

  .plan-row .plan-note {
    font-size: var(--fs-15);
    letter-spacing: 0.3px;
    line-height: 21px;
  }

  /* 幅なりの高さ（aspect-ratio は img の width/height 属性が持つ）。
     stretch + contain だと上下に 55px ずつ余白が出て文字と揃わない。 */
  .plan-map {
    flex: 1;
  }

  .btn-schedule {
    width: 240px;
    background: transparent;
    border: var(--stroke) solid var(--color-black);
    color: var(--color-ink);
  }

  /* その他費用 */

  .fee-table {
    padding-top: 12px;
  }

  .fee-row {
    grid-template-columns: 213px 180px 1fr;
    gap: 0;
    padding-block: 0;
    border-top: 0;
  }

  .fee-row:last-child {
    border-bottom: 0;
  }

  .fee-name,
  .fee-price,
  .fee-desc {
    border-top: var(--stroke) solid var(--color-line);
    padding: 17px 8px 16px;
    grid-column: auto;
    align-self: stretch;
  }

  /* desktop は全行が3列の表組み。mobile 用の全幅落としを戻す（詳細度で勝つよう子孫で書く）。 */
  .fee-row--stacked .fee-desc {
    grid-column: auto;
  }

  .fee-desc:empty {
    display: block;
  }

  .fee-row:last-child .fee-name,
  .fee-row:last-child .fee-price,
  .fee-row:last-child .fee-desc {
    border-bottom: var(--stroke) solid var(--color-line);
  }

  /* after */

  .after-item {
    flex-direction: row;
    gap: var(--gap-m);
  }

  .after-when {
    padding-right: 26.8px;
    flex-shrink: 0;
  }

  .after-body {
    padding-left: 0;
    flex: 1;
  }

  /* contact */

  .contact-box {
    padding: 73px;
  }

  .contact-notes {
    gap: 0;
  }

  .contact-notes li {
    line-height: var(--lh-28);
  }

  .contact-button {
    padding: 27px 0 52px;
  }

  .contact-tel {
    border-top-color: var(--color-line-faint);
    padding-top: 52px;
  }

  .tel-hours {
    text-align: center;
  }

  /* footer */

  .site-footer {
    padding: 72px 32px;
  }

  /* desktop（2:285）は3ブロックとも等間隔なので gap に戻す */
  .site-footer .inner {
    align-items: flex-start;
    gap: var(--gap-m);
  }

  .site-footer .footer-brand,
  .site-footer .footer-copy {
    margin-top: 0;
  }

  .footer-top {
    flex-direction: row;
    align-items: center;
    gap: 62px;
  }

  .footer-nav ul {
    flex-direction: row;
    align-items: center;
    gap: 27px;
  }

  .footer-brand {
    align-items: flex-start;
    gap: 6px;
    text-align: left;
  }

  .footer-address {
    line-height: 15px;
  }

  /* 申し込みバナーは desktop で Figma の実寸・実位置（15:345）に戻す */

  .float-banner {
    right: 32px;
    bottom: 30px;
    width: 243px;
  }
}