/* =========================================================
   菊川写真事務所 LP — A案
   全ての色・サイズ・余白は :root のカスタムプロパティに集約。
   値の直書きは原則しない（例外はコメントで明示）。
   ========================================================= */

:root {
  /* ---- color ---- */
  --c-bg:            #FFFFFF;
  --c-bg-alt:        #F7F7F5;  /* 交互に敷くオフホワイト面 */
  --c-bg-hero:       #F2F3F1;  /* FV画像読込前の下地 */
  --c-ink:           #1A1A1A;  /* 本文 */
  --c-ink-sub:       #6B6B6B;  /* 補助テキスト（4.5:1確保） */
  --c-ink-mute:      #9A9A9A;  /* 仮表示・注記のみ */
  --c-tentative:     #C4362B;  /* 【要確認】の赤。先方にも見せる前提の「未確定」表示（#57）。白地5.4:1／グレー面5.0:1（AA） */
  --c-accent:        #17304D;  /* ネイビー：唯一のアクセント */
  --c-accent-dark:   #0F2338;  /* ネイビーhover */
  --c-accent-tint:   #E8EDF3;  /* 選択中タグの地 */
  --c-line:          #EDEDEA;  /* 罫線（弱） */
  --c-line-strong:   #DCDCD8;  /* 罫線（強）／入力枠 */
  --c-rule-bg:       #F1F1EE;  /* 背景のノート罫。構造の罫(--c-line)より明確に薄くする。
                                  同じ色だと、構造の罫と重なって2本に見え、離れるとランダムな線に見える */
  --c-alert:         #C0392B;  /* 必須バッジ・エラー */
  --c-on-accent:     #FFFFFF;

  /* ---- typography ---- */
  --font-base: "Jost", "Zen Kaku Gothic New", sans-serif;
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --fs-eyebrow: 12px;  /* セクション英字ラベル・ナビ */
  --fs-note:    13px;  /* 注記・キャプション */
  /* 【ルール】画像とキャプションの距離＝キャプションのフォントサイズの 1/2〜2/3。
     大きくてもフォントサイズを超えない。13px なら 6.5〜8.7px、上限13px。
     近すぎるより離れすぎのほうが事故になる（どの画像の説明か分からなくなる）*/
  --fs-label:   14px;  /* フォームラベル・タブ */
  --fs-body-s:  15px;  /* 本文小・ボタン */
  --fs-body:    16px;  /* 本文 */
  --fs-h3:      18px;
  --fs-price:   20px;
  --fs-logo:    19px;
  --fs-step:    28px;  /* FLOW の 01〜05 */
  --fs-h2:      clamp(22px, 2.2vw, 28px);
  --fs-hero-sub: clamp(14px, 1.1vw, 16px);

  --lh-tight:  1.4;
  --lh-snug:   1.6;
  --lh-body:   1.9;

  --ls-tight:  .02em;
  --ls-body:   .03em;
  --ls-label:  .04em;
  --ls-head:   .06em;
  --ls-logo:   .12em;
  --ls-eyebrow:.18em;

  /* ---- layout / spacing ---- */
  --maxw:        1200px;
  --gutter:      40px;
  --header-h:    72px;
  --mobilebar-h: 64px;

  --sp-2:   2px;
  --sp-4:   4px;
  --sp-8:   8px;
  --sp-10:  10px;
  --sp-12:  12px;
  --sp-14:  14px;
  --sp-16:  16px;
  --sp-18:  18px;
  --sp-20:  20px;
  --sp-24:  24px;
  --sp-28:  28px;
  --sp-32:  32px;
  --sp-36:  36px;
  --sp-40:  40px;
  --sp-48:  48px;
  --sp-64:  64px;
  --sp-96:  96px;
  --section-y: 128px;

  --grid-gap:      24px;
  --grid-gap-row:  32px;
  --grid-gap-wide: 64px;

  /* ---- misc ---- */
  --radius:      2px;
  --rule-w:      24px;   /* 見出し上の短い罫 */
  --rule-h:      3px;
  --hit:         44px;   /* 最小タップ領域 */
  --field-h:     52px;
  --btn-h:       56px;
  --btn-h-sm:    52px;
  --dur-fast:    120ms;
  --dur-mid:     200ms;
  --dur-slow:    400ms;
  --ease:        ease-out;
  /* ノートの罫線。ピッチは本文の行送り（16px×1.9≒30.4）に合わせて 32px。
     根拠のない数値だと、揃っていても揃って見えない */
  --stripe-pitch: 32px;
  --stripe: repeating-linear-gradient(to bottom,
              var(--c-rule-bg) 0px, var(--c-rule-bg) 1px,
              transparent 1px, transparent var(--stripe-pitch));
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* 追従ヘッダー(72px)の下に見出しが潜らないよう、ページ内リンクの着地点をずらす */
  scroll-padding-top: calc(var(--header-h) + var(--sp-24));
}
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-base);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--c-ink); text-decoration: none; }
a:hover { color: var(--c-accent); }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; background: var(--c-bg); }
/* 交互に敷くグレーの面。
   ノートの罫は「コンテンツの外側＝左右の余白」にだけ引く（2026-09-09 #38）。
   本文の裏には敷かないので、構造の罫（区切り線・タブ・入力枠）と競合しない。
   コンテナ幅 1200px の外側が対象なので、画面が狭いときは自動的に消える */
.section--alt {
  background-color: var(--c-bg-alt);
  background-image: var(--stripe), var(--stripe);
  background-repeat: repeat-y, repeat-y;
  background-position: left top, right top;
  background-size:
    calc((100% - var(--maxw)) / 2) 100%,
    calc((100% - var(--maxw)) / 2) 100%;
  /* 罫のリズムを合わせるため、上下パディングはピッチ(32px)の倍数にする */
  padding-top: calc(var(--stripe-pitch) * 4);    /* 128px */
  padding-bottom: calc(var(--stripe-pitch) * 4);
}
.section--alt > .wrap > *,
.section--alt > .wrap { position: relative; }
.section__head { margin-bottom: var(--sp-48); }
.rule { width: var(--rule-w); height: var(--rule-h); background: var(--c-accent); margin-bottom: var(--sp-16); }
.eyebrow { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); color: var(--c-ink-sub); margin-bottom: var(--sp-14); }
h2.h2 { margin: 0 0 var(--sp-20); font-size: var(--fs-h2); font-weight: var(--fw-medium); letter-spacing: var(--ls-head); line-height: var(--lh-tight); }
h3.h3 { margin: 0 0 var(--sp-16); font-size: var(--fs-h3); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); }
.lead { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); text-wrap: pretty; }
.note { margin: 0; font-size: var(--fs-note); line-height: var(--lh-snug); letter-spacing: var(--ls-body); color: var(--c-ink-sub); }
/* 【要確認】の仮表示。確定するまで消さないこと */
/* 【要確認】は赤で出す。先方に「ここはまだ決まっていない」と一目で伝わるように（#57） */
.note--tentative { color: var(--c-tentative); }
.tentative { color: var(--c-tentative); }
.zoom { transition: transform var(--dur-slow) var(--ease); width: 100%; object-fit: cover; }
.zoom-wrap { overflow: hidden; }
.zoom-wrap:hover .zoom { transform: scale(1.02); }
.arrow { color: inherit; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-10);
  height: var(--btn-h); padding: 0 var(--sp-32);
  border-radius: var(--radius); border: 0;
  font: inherit; font-size: var(--fs-body-s); letter-spacing: var(--ls-head);
  cursor: pointer; transition: background-color var(--dur-fast) var(--ease);
}
.btn--primary { background: var(--c-accent); color: var(--c-on-accent); }
.btn--primary:hover { background: var(--c-accent-dark); color: var(--c-on-accent); }
.btn--primary:active { transform: translateY(1px); }
.btn--primary[disabled] { opacity: .6; cursor: default; }
.btn--outline {
  height: var(--btn-h-sm); padding: 0 var(--sp-28);
  background: transparent; border: 1px solid var(--c-ink); color: var(--c-ink);
}
.btn--outline:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.btn--outline:active { transform: translateY(1px); }
.link-arrow { display: inline-flex; align-items: center; gap: var(--sp-10); font-size: var(--fs-body-s); letter-spacing: var(--ls-body); }
.link-arrow:hover { text-decoration: underline; color: var(--c-ink); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: var(--c-bg); border-bottom: 1px solid var(--c-line);
}
.site-header .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); }
/* line-height:1 だと和文の字面がボックスの上寄りに乗り、ヘッダー内で上に2pxズレて見える。
   normal はフォント自身の ascent/descent を使うので、字面の中心とボックスの中心が揃う（#48） */
.logo { font-size: var(--fs-logo); font-weight: var(--fw-bold); letter-spacing: var(--ls-logo); line-height: normal; white-space: nowrap; }
/* flex-wrap: wrap だと、Webフォント読み込み前の幅で2段に折り返して一瞬崩れる。
   折り返さず、狭い画面ではハンバーガーへ切り替える（2026-09-09 #39） */
.gnav { display: flex; align-items: center; gap: var(--sp-36); flex-wrap: nowrap; justify-content: flex-end; }
.gnav a { white-space: nowrap; }
.gnav a { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); color: var(--c-ink-sub); transition: color var(--dur-mid) var(--ease); }
.gnav a:hover { color: var(--c-ink); }

/* 電話番号：PCではクリックさせない（#52）
   マウスのPCで tel: を踏むと FaceTime / Skype の起動ダイアログが出るだけで、
   電話はかけられない。番号は「見て控えるもの」なので、リンクにする意味がない。
   条件を3つ重ねている：
     hover:hover / pointer:fine … 指ではなくマウスの環境（＝PC・タブレットは除外）
     min-width: 768px          … PCをSP幅に縮めて確認するときはクリックできる
   HTMLは <a href="tel:"> のまま残す（スマホで有効・機械可読・構造を壊さない） */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  a[href^="tel:"] { pointer-events: none; cursor: default; }
  a[href^="tel:"]:hover { background: inherit; border-color: inherit; color: inherit; }
  /* 押せないのに「電話する」と書いてあると、壊れたボタンに見える。
     PCは番号だけを見せる（＝控えるための表示） */
  .tel__verb { display: none; }
}

/* ---------- FV ---------- */
/* FVは画面の80%。660pxの上限を外したので、大きい画面ほど写真が大きく出る（#50）。
   min-heightは背の低いノートPC（1280x720等）で潰れないための下限 */
.hero { position: relative; height: 80vh; min-height: 520px; overflow: hidden; background: var(--c-bg-hero); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 40%; }
.hero__inner {
  position: relative; height: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter) 0 0;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--sp-24);
}
.hero__copy {
  margin: 0; width: min(620px, 52vw);
  filter: drop-shadow(0 1px 14px rgba(255,255,255,.6)) drop-shadow(0 0 32px rgba(255,255,255,.45));
}
.hero__copy-h { width: 100%; height: auto; }
.hero__copy-v { display: none; }
.hero__foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-20); margin-top: var(--sp-40); padding-left: var(--gutter); }
.hero__sub {
  margin: 0; font-size: var(--fs-hero-sub); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label); line-height: var(--lh-body); color: var(--c-ink);
  text-shadow: 0 1px 10px rgba(255,255,255,.7), 0 0 24px rgba(255,255,255,.5);
}
/* 金額は途中で割らない。PCは1行、SPは金額を次の行へ落とす（#46） */
.hero__sub-a::after { content: "\3000"; }   /* 全角アキ */
.hero__sub-b { white-space: nowrap; }

/* ---------- ジャンル帯 ---------- */
.genrebar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); background: var(--c-bg); }
.genrebar__fig { overflow: hidden; aspect-ratio: 1 / 1; }
.genrebar__fig img { height: 100%; }
.genrebar__label { margin: 0; padding: var(--sp-8) var(--sp-8) var(--sp-20); text-align: center; font-size: var(--fs-note); letter-spacing: var(--ls-head); color: var(--c-ink); }

/* ---------- 事実バンド ---------- */
.facts { border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); background: var(--c-bg); }
.facts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.facts__item {
  margin: 0; min-height: 60px; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-body-s); letter-spacing: var(--ls-body); padding: var(--sp-16) var(--sp-8);
}
.facts__item + .facts__item { border-left: 1px solid var(--c-line); }

/* ---------- ABOUT ---------- */
.about__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--grid-gap-wide); align-items: start; }
.about__photo img { aspect-ratio: 4 / 5; }
.about__role { margin: 0 0 var(--sp-32); font-size: var(--fs-note); line-height: var(--lh-snug); letter-spacing: var(--ls-body); color: var(--c-ink-sub); }
.about p.lead { margin-bottom: var(--sp-24); }
.about p.lead:last-of-type { margin-bottom: var(--sp-40); }
.deflist { margin: 0; display: grid; gap: var(--sp-12); border-top: 1px solid var(--c-line); padding-top: var(--sp-24); }
.deflist__row { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-16); align-items: baseline; }
.deflist dt { font-size: var(--fs-note); letter-spacing: var(--ls-head); color: var(--c-ink-sub); }
.deflist dd { margin: 0; font-size: var(--fs-body-s); line-height: var(--lh-snug); letter-spacing: var(--ls-body); }
.deflist .tentative { margin-left: var(--sp-8); font-size: var(--fs-eyebrow); }

/* ---------- PACKAGES ---------- */
.pkg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--sp-48); padding: var(--sp-32) 0; border-top: 1px solid var(--c-line); align-items: center; }
.pkg:last-of-type { border-bottom: 1px solid var(--c-line); }
.pkg__photo img { aspect-ratio: 3 / 2; }
.price { margin: 0 0 var(--sp-20); font-size: var(--fs-price); font-weight: var(--fw-medium); letter-spacing: var(--ls-tight); color: var(--c-accent); }
.price small { font-size: var(--fs-label); }
.spec { display: grid; font-size: var(--fs-note); letter-spacing: var(--ls-body); color: var(--c-ink-sub); }
.spec__row { display: flex; justify-content: space-between; gap: var(--sp-16); padding: var(--sp-10) 0; border-bottom: 1px solid var(--c-line); }
.spec__row b { font-weight: var(--fw-normal); color: var(--c-ink); }

/* ---------- PRICE ---------- */
.pricetable { border-top: 1px solid var(--c-line-strong); }
.pricetable__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--sp-8) var(--grid-gap); padding: var(--sp-20) 0; border-bottom: 1px solid var(--c-line); align-items: baseline; }
.pricetable__name { font-size: var(--fs-body); letter-spacing: var(--ls-body); }
.pricetable__price { font-size: var(--fs-price); font-weight: var(--fw-medium); color: var(--c-accent); }
.pricetable__price small { font-size: var(--fs-label); }
.pricetable__meta { font-size: var(--fs-note); color: var(--c-ink-sub); letter-spacing: var(--ls-body); }
.price__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--grid-gap-wide); margin-top: var(--grid-gap-wide); }
.price__cols h3 { margin-bottom: var(--sp-24); }
.tickitems { margin: 0; padding: 0; list-style: none; display: grid; }
.tickitems li { padding: var(--sp-12) 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-body-s); line-height: var(--lh-snug); letter-spacing: var(--ls-body); }
.price__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-24) var(--sp-40); margin-top: var(--sp-48); }

/* ---------- WORKS（絞り込み） ---------- */
.filter { margin-bottom: var(--grid-gap); }
.filter__label { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); color: var(--c-ink-sub); margin-bottom: var(--sp-12); }
.tabs { display: flex; flex-wrap: wrap; gap: 0 var(--sp-32); border-bottom: 1px solid var(--c-line); }
.tab {
  appearance: none; background: none; border: 0; border-bottom: var(--sp-2) solid transparent;
  padding: var(--sp-12) var(--sp-2); min-height: var(--hit);
  font: inherit; font-size: var(--fs-label); letter-spacing: var(--ls-head);
  color: var(--c-ink-sub); cursor: pointer; transition: color var(--dur-mid) var(--ease);
}
.tab:hover { color: var(--c-ink); }
.tab[aria-pressed="true"] { color: var(--c-ink); border-bottom-color: var(--c-accent); }
.taglist { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.tag {
  appearance: none; background: var(--c-bg-alt); border: 1px solid var(--c-line-strong); border-radius: 0;
  padding: var(--sp-10) var(--sp-18); min-height: var(--hit);
  font: inherit; font-size: var(--fs-note); letter-spacing: var(--ls-label);
  color: var(--c-ink-sub); cursor: pointer;
  transition: border-color var(--dur-mid) var(--ease), color var(--dur-mid) var(--ease);
}
.tag:hover { color: var(--c-ink); }
.tag[aria-pressed="true"] { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-tint); }
/* WORKS：B案のタイル（大小混在・目地2px・角丸なし）2026-09-09 #25-⑤ */
.works__grid { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 2px; row-gap: var(--sp-24); }
.work { margin: 0; position: relative; grid-column: span 2; }
.work:nth-child(6n+1) { grid-column: span 4; }   /* 1枚目を大きく */
.work:nth-child(6n+4) { grid-column: span 3; }
.work:nth-child(6n+5) { grid-column: span 3; }
.work img { aspect-ratio: 1 / 1; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.work:nth-child(6n+1) img { aspect-ratio: 2 / 1; }
.work:nth-child(6n+4) img,
.work:nth-child(6n+5) img { aspect-ratio: 3 / 2; }
/* キャプションは写真の外（下）に置く。
   写真の上に文字を乗せない／グラデーションで面を着色しない（DESIGN_A.md）。
   横の目地は2pxのままタイル感を保ち、縦だけキャプション分を空ける */
.work figcaption { padding-top: var(--sp-8); font-size: var(--fs-note); line-height: var(--lh-snug); letter-spacing: var(--ls-body); color: var(--c-ink-sub); display: flex; gap: var(--sp-10); }
.work__loc { margin-left: auto; color: var(--c-ink-mute); }
@media (max-width: 767px) {
  .works__grid { grid-template-columns: repeat(2, 1fr); }
  .work, .work:nth-child(6n+1), .work:nth-child(6n+4), .work:nth-child(6n+5) { grid-column: span 1; }
  .work img, .work:nth-child(6n+1) img, .work:nth-child(6n+4) img, .work:nth-child(6n+5) img { aspect-ratio: 1 / 1; }
}
.work__loc { margin-left: var(--sp-10); }
.work[hidden] { display: none; }
.works__empty p { margin: 0 0 var(--sp-8); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); }
.linkbtn { appearance: none; background: none; border: 0; padding: 0; min-height: var(--hit); font: inherit; font-size: var(--fs-body-s); letter-spacing: var(--ls-body); color: var(--c-ink); cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }

/* ---------- LOCATIONS ---------- */
.loc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: var(--sp-48) var(--grid-gap); }
.loc h3 { margin: 0 0 var(--sp-10); }
.loc p { margin: 0; font-size: var(--fs-label); line-height: var(--lh-snug); letter-spacing: var(--ls-body); color: var(--c-ink-sub); }

/* ---------- FLOW ---------- */
.flow { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--grid-gap-row) 0; border-top: 1px solid var(--c-line); }
.flow li { padding: var(--sp-32) var(--grid-gap) 0; border-left: 1px solid var(--c-line); }
.flow li:first-child { padding-left: 0; border-left: 0; }
.flow li:last-child { padding-right: 0; }
.flow__n { font-size: var(--fs-step); font-weight: var(--fw-light); color: var(--c-accent); letter-spacing: var(--ls-tight); margin-bottom: var(--sp-16); }
.flow h3 { margin: 0 0 var(--sp-12); font-size: var(--fs-body); }
.flow p { margin: 0; font-size: var(--fs-label); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--c-ink-sub); text-wrap: pretty; }

/* ---------- FIRST TIME ---------- */
.ft__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--sp-48) var(--grid-gap); }
.ft__photo { margin-bottom: var(--grid-gap); }
.ft__photo img { aspect-ratio: 4 / 3; }
.ft p { margin: 0; font-size: var(--fs-body-s); line-height: var(--lh-body); letter-spacing: var(--ls-body); text-wrap: pretty; }
.ft p + .note { margin-top: var(--sp-12); }

/* ---------- STAGE / BUSINESS / DELIVERY ---------- */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--grid-gap-wide); align-items: center; }
.split img { aspect-ratio: 3 / 2; }
.split p.lead { margin-bottom: var(--sp-24); }
.split .btn { margin-top: var(--sp-8); }
.cols2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--grid-gap-wide); align-items: start; }
.cols2 p.lead { margin-bottom: var(--sp-20); }

/* ---------- NEWS / FAQ ---------- */
.aside-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--sp-48); }
.aside-layout__body { grid-column: span 2; min-width: 0; }
.news__empty { margin: 0; padding: var(--grid-gap) 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); font-size: var(--fs-body-s); line-height: var(--lh-snug); letter-spacing: var(--ls-body); color: var(--c-ink-sub); }
.news__list { border-top: 1px solid var(--c-line); }
.news__item { display: flex; align-items: center; gap: var(--grid-gap); padding: var(--sp-20) 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-body-s); letter-spacing: var(--ls-body); }
.news__date { color: var(--c-ink-sub); font-size: var(--fs-note); white-space: nowrap; }
.news__title { flex: 1; }
.news__arrow { color: var(--c-ink-mute); }
.faq { border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__q {
  appearance: none; background: none; border: 0; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--grid-gap);
  padding: 22px 0; min-height: var(--hit);
  font: inherit; font-size: var(--fs-body); letter-spacing: var(--ls-body);
  text-align: left; color: var(--c-ink); cursor: pointer;
}
.faq__sign { color: var(--c-accent); font-size: var(--fs-h3); }
.faq__a > p { font-size: var(--fs-body-s); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--c-ink-sub); text-wrap: pretty; }

/* ---------- CONTACT ---------- */
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); background: var(--c-bg); border-top: 1px solid var(--c-line); }
.contact__photo { overflow: hidden; min-height: 480px; }
.contact__photo img { width: 100%; height: 100%; min-height: 480px; object-fit: cover; object-position: 60% 40%; }
.contact__body { padding: var(--sp-96) var(--gutter); display: flex; flex-direction: column; justify-content: center; gap: var(--grid-gap); max-width: 640px; }
.contact__body h2 { margin: 0; }
.contact__btns { display: flex; flex-wrap: wrap; gap: var(--sp-12); margin-top: var(--sp-8); }

/* ---------- FORM ---------- */
.form { max-width: 680px; display: grid; gap: var(--sp-32); }
.field { display: grid; gap: var(--sp-10); }
.field label { display: flex; align-items: center; gap: var(--sp-10); font-size: var(--fs-label); letter-spacing: var(--ls-label); }
.req { border: 1px solid var(--c-alert); color: var(--c-alert); font-size: var(--fs-eyebrow); line-height: 1; padding: var(--sp-4) 6px; letter-spacing: var(--ls-head); }
.field input, .field textarea {
  border: 1px solid var(--c-line-strong); border-radius: var(--radius); background: var(--c-bg);
  font: inherit; font-size: var(--fs-body); letter-spacing: var(--ls-body); color: var(--c-ink);
  transition: border-color var(--dur-mid) var(--ease);
}
.field input { height: var(--field-h); padding: 0 var(--sp-16); }
.field textarea { padding: var(--sp-14) var(--sp-16); line-height: var(--lh-body); resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--c-accent); outline: none; }
.field__error { margin: 0; font-size: var(--fs-note); line-height: var(--lh-snug); color: var(--c-alert); }
.field__error[hidden] { display: none; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-16) var(--grid-gap); }
.form__done { max-width: 680px; border-top: 1px solid var(--c-line-strong); border-bottom: 1px solid var(--c-line-strong); padding: var(--sp-32) 0; }
.form__done[hidden] { display: none; }
.form__done p:first-child { margin: 0 0 var(--sp-12); font-size: var(--fs-h3); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); line-height: 1.5; }
.form__done p:last-child { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); }
.form[hidden] { display: none; }

/* ---------- footer ----------
   左＝事業者情報（誰か）／右＝リンク（どこへ行くか）。役割が違うので同じ列幅に並べない（#55）
   リンクは3群（MENU / GUIDE / SNS）に見出しを付けて、種類の違いを見せる */
.site-footer { padding: var(--sp-96) 0 var(--sp-40); background: var(--c-bg); border-top: 1px solid var(--c-line); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-64); align-items: start; }

/* 事業者情報：ラベル付きの一覧。address の既定イタリックは消す */
.site-footer__info { font-style: normal; }
.site-footer__name { margin: 0; font-size: var(--fs-logo); font-weight: var(--fw-bold); letter-spacing: var(--ls-logo); line-height: normal; }
.site-footer__tagline { margin: var(--sp-4) 0 0; font-size: var(--fs-note); letter-spacing: var(--ls-head); color: var(--c-ink-sub); }
.site-footer__dl { margin: var(--sp-24) 0 0; display: grid; gap: var(--sp-8); }
.site-footer__row { display: grid; grid-template-columns: 4em minmax(0, 1fr); gap: var(--sp-12); align-items: baseline; }
.site-footer__row dt { font-size: var(--fs-note); letter-spacing: var(--ls-head); color: var(--c-ink-mute); }
.site-footer__row dd { margin: 0; font-size: var(--fs-label); line-height: var(--lh-snug); letter-spacing: var(--ls-body); color: var(--c-ink-sub); overflow-wrap: anywhere; }
.site-footer__row dd a { color: inherit; }

/* リンク：3群。見出しは項目より濃く・太く（同じ欧文サイズなので、濃さで上下関係をつける） */
.site-footer__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-40); }
.site-footer__label { margin: 0 0 var(--sp-16); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--ls-eyebrow); color: var(--c-ink); }
.fnav__list { display: grid; gap: var(--sp-12); justify-items: start; }
/* 欧文12pxと和文14pxが隣の列に並ぶので、行の高さを固定して段を揃える（和文だけ行送りが広がって列同士がズレていた） */
.fnav__list > * { line-height: 20px; }
.fnav__list a { color: var(--c-ink-sub); }
.fnav__list a:hover { color: var(--c-ink); }
.fnav__list--en a { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); }
.fnav__list--ja a { font-size: var(--fs-label); letter-spacing: var(--ls-body); }
/* 下層ページ未作成のためリンクにしていない項目（作成後は <a> に戻す） */
.fnav__pending { color: var(--c-ink-mute); font-size: var(--fs-label); letter-spacing: var(--ls-body); }

/* 1023px以下：情報を上、リンク3群を下に（横並びだとリンク列が狭くなり、和文が折り返す） */
@media (max-width: 1023px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-48); }
}
/* 767px以下：MENU と GUIDE を2列、SNS は下に横並び（4項目を縦に積むと長くなるだけ） */
@media (max-width: 767px) {
  .site-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-40) var(--sp-24); }
  .fnav--sns { grid-column: 1 / -1; }
  .fnav--sns .fnav__list { display: flex; flex-wrap: wrap; gap: var(--sp-12) var(--sp-24); }
}
.copyright { max-width: var(--maxw); margin: var(--grid-gap-wide) auto 0; padding: var(--grid-gap) var(--gutter) 0; border-top: 1px solid var(--c-line); }
.copyright p { margin: 0; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-head); color: var(--c-ink-mute); }

/* ---------- mobile CTA bar ---------- */
.mobilebar { display: none; }
@media (max-width: 767px) {
  /* SPはヘッダーを薄く（72→52px）。FVのコピーと上端の距離を稼ぐ（#47）
     scroll-padding-top / .menu の上余白もこの変数を見ているので自動で追従する */
  :root { --section-y: 80px; --gutter: 20px; --grid-gap-wide: 40px; --header-h: 52px; }
  .logo { font-size: 17px; }
  .hero__inner { padding-right: var(--gutter); }
  .hero__copy { width: min(620px, 78vw); }
  .hero__foot { padding-left: var(--gutter); }
  .flow li { padding-left: 0; padding-right: 0; border-left: 0; }
  .aside-layout__body { grid-column: auto; }
  .contact__body { padding: var(--sp-64) var(--gutter); }
  body { padding-bottom: var(--mobilebar-h); }
  .mobilebar {
    transform: translateY(100%); transition: transform var(--dur-mid) var(--ease);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: var(--mobilebar-h); display: grid; grid-template-columns: 1fr 1fr;
    background: var(--c-bg); border-top: 1px solid var(--c-line);
  }
  .mobilebar a { display: flex; align-items: center; justify-content: center; font-size: var(--fs-body-s); letter-spacing: var(--ls-head); }
  .mobilebar a:first-child { background: var(--c-accent); color: var(--c-on-accent); }
  .mobilebar.is-shown { transform: translateY(0); }
  /* JSが動かない環境では常に出す（導線を落とさない） */
  .no-js .mobilebar { transform: translateY(0); }
}

/* ============================================
   LOCATIONS：長方形を縦線で左右2分割（2026-09-09 改訂）
   左＝下見／右＝当日。同じ大きさで並べて「下見してから撮る」の順序を読ませる
   ホバー切替は使わない（SPで効かない）／写真の上に文字を乗せない
   ============================================ */
.loc__pair{
  display:grid; grid-template-columns:1fr 1fr; column-gap:2px;
  margin-bottom:var(--sp-16);
}
.loc__shot{ margin:0; }
.loc__shot img{
  display:block; width:100%; height:auto;
  aspect-ratio:3/4; object-fit:cover;   /* 2枚並べて全体が約3:2の長方形になる */
}
.loc__tag{
  padding-top:var(--sp-8);
  font-size:var(--fs-note); line-height:1.5;
  letter-spacing:var(--ls-label); color:var(--c-ink-mute);
}  /* 下見／当日の一枚は同じ扱い。色を変えない */

@media (max-width:767px){
  .loc__shot img{ aspect-ratio:1/1; }
}

/* ============================================
   KIMONO DRESS（2026-09-09 追加・復旧）
   着付師とのコラボ企画。他メニューと価格の性質が違うため
   料金表（PRICE）には入れず、独立セクションで扱う
   ============================================ */
.kimono__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--grid-gap); margin-top:var(--sp-40);
}
.kimono__photo{ margin-bottom:var(--sp-16); }
.kimono__photo img{ display:block; width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; }
.kimono__photo--none{
  aspect-ratio:2/3; background:var(--c-bg-alt);
  border:1px solid var(--c-line);
}
.kimono__price{
  margin:var(--sp-4) 0 var(--sp-8);
  font-size:var(--fs-price); font-weight:var(--fw-medium); color:var(--c-accent);
}
.kimono__price span{ font-size:var(--fs-note); font-weight:var(--fw-normal); color:var(--c-ink-sub); }

.kimono__night{ margin-top:var(--sp-64); align-items:center; }
.kimono__night img{ display:block; width:100%; height:auto; }

.kimono__foot{
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--grid-gap-wide); margin-top:var(--sp-48);
  padding-top:var(--sp-32); border-top:1px solid var(--c-line);
}

@media (max-width:1023px){
  .kimono__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px){
  .kimono__foot{ grid-template-columns:1fr; gap:var(--sp-24); }
}

/* 撮影メニュー：各項目のリード文（2026-09-09 #25-③・復旧）
   価格・仕様は下の料金表が本体なので小さく。ここは「何の撮影か」を説明する場所 */
.pkg__lead{
  margin:var(--sp-8) 0 var(--sp-16);
  font-size:var(--fs-body-s); line-height:var(--lh-body);
  letter-spacing:var(--ls-body); color:var(--c-ink-sub);
}
.pkg .price{ font-size:var(--fs-h3); }
.pkg .spec{ font-size:var(--fs-note); }

/* ============================================
   画像とテキストの距離のルール（2026-09-09 #31 改訂）

   大原則：**カード内部の縦の距離は、カラム間のガター（24px）より必ず小さくする。**
   内部の距離がガターを超えると、キャプションが隣のカラムのほうに近く見えて、
   どの写真の説明なのか分からなくなる。

   内訳：
     画像 → 直下のテキスト（見出し・キャプション）… 12px
     見出し → 本文 ………………………………………… 10px
     ＝ 画像・見出し・本文は「ひとかたまり」。距離をほぼ揃える
     カード → 隣のカード（ガター）………………… 24px
     カード → 下のカード（行間）…………………… 48px
   ============================================ */

/* --- FIRST TIME（服装・ポーズ・雨天） --- */
.ft__photo { margin-bottom: var(--sp-12); }
.ft h3.h3 { margin-bottom: var(--sp-10); }

/* --- KIMONO（プラン4枚） --- */
.kimono__photo { margin-bottom: var(--sp-12); }
.kimono h3.h3 { margin-bottom: var(--sp-10); }
.kimono__price { margin: 0 0 var(--sp-10); }

/* --- LOCATIONS（下見／当日のペア） ---
   テキストが5段（ラベル2＋欧文地名＋和文地名＋説明）と多いので、
   間隔をすべて12px以下に揃えて「ひとかたまり」に見せる。
   画像 →8px→ ラベル →12px→ 欧文地名 →6px→ 和文地名 →8px→ 説明 */
.loc__tag { padding-top: var(--sp-8); }
.loc__pair { margin-bottom: var(--sp-12); }
.loc .eyebrow { margin-bottom: 6px; }
.loc h3.h3 { margin-bottom: var(--sp-8); }

/* --- 撮影メニュー --- */
.pkg__photo { margin-bottom: var(--sp-12); }
.pkg h3.h3 { margin-bottom: var(--sp-10); }

/* --- 事例タイル（横の目地2pxに対し、キャプションは8px） --- */
.work figcaption { padding-top: var(--sp-8); }

/* ============================================
   SP対応（2026-09-09 #32）
   PCを固めてから着手。方針は DESIGN_A.md のとおり
   「FVは SP では 写真が上・テキストが下の縦積み」
   ============================================ */
@media (max-width: 767px) {

  /* --- ヘッダー：ナビが2段に折り返してFVに重なっていた --- */
  /* 常時表示の固定フッターバー（LINE／電話）があるので、
     ヘッダーのナビはSPでは畳んで屋号だけにする */
  .gnav { display: none; }

  /* --- FV：SPは全面画像（縦長）＋キャッチを上部に重ねる（2026-09-09 #33）--- */
  /* PCは左右2分割。SPは写真を主役にして、キャッチだけ画像に乗せる。
     サブコピーとCTAは画像の下（白地）に置いて確実に読ませる */
  .hero { height: auto; min-height: 0; overflow: visible; }
  .hero__img {
    position: static; width: 100%;
    /* 縦長端末だと 3:4 では画面の6割しか埋まらず、下のジャンル帯が見えすぎる。
       FVは画面の90%を占める（#49）。
       svh＝URLバーが出ている状態の高さ。vh だとバーの出入りで高さが跳ねる。
       下限に従来の 3:4（=133.333vw）を残してあるので、
       横長・縦の短い画面では今までどおりの見え方になる */
    aspect-ratio: auto;
    height: 90vh;                              /* svh 非対応ブラウザ用 */
    height: max(133.333vw, 90svh);
    object-fit: cover; object-position: 70% 50%;
  }
  /* キャッチを画像の上部へ。人物の頭と重ならない左上に置く */
  .hero__inner { position: static; display: block; padding: 0; background: var(--c-bg); }
  .hero__copy {
    /* 21%＝内側に入りすぎ／ガター揃え＝左に寄りすぎ。その中間（#46）
       ガターから少し離して、写真の中に置かれている感じを残す */
    position: absolute; top: 6%; left: 13%;
    width: auto; height: 92%; max-width: none; margin: 0;
    display: block; pointer-events: none;
  }
  /* SPは縦書きに切り替える */
  .hero__copy-h { display: none; }
  .hero__copy-v {
    display: block; position: relative; z-index: 1;
    width: auto; height: 63%; max-height: 400px;
    transform: rotate(-2.5deg); transform-origin: top left;
    /* 面を着色せず、文字の輪郭に白いグローを掛けて可読性を確保 */
    filter:
      drop-shadow(0 0 6px rgba(255,255,255,.95))
      drop-shadow(0 0 14px rgba(255,255,255,.75));
  }
  /* サブコピーとCTAも画像に重ねる（2026-09-09 #34）。
     FVは全面画像で、下のジャンル帯と直接つながる */
  .hero__foot {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    margin-top: 0; padding: var(--sp-20) var(--gutter) var(--sp-24);
    gap: var(--sp-16); align-items: stretch; background: none;
  }
  /* 下部は人物の服＝明るいので、濃いめのスクリムを敷かないと文字が乗らない */
  /* 帯（パネル）は敷かない。境界の線が出て写真が切れて見えるため。
     写真がそのまま下まで続く印象を保つ（2026-09-09 #36）
     可読性は、キャッチと同じく「文字の輪郭に白いグロー」で確保する */
  /* 帯（パネル）は敷かない。境界の線が出て写真が切れて見えるため。
     写真がそのまま下まで続く印象を保つ（2026-09-09 #36）
     可読性は、キャッチと同じく「文字の輪郭に白いグロー」で確保する */
  .hero__sub {
    color: var(--c-ink);
    text-shadow:
      0 0 6px rgba(255,255,255,.95),
      0 0 14px rgba(255,255,255,.85),
      0 0 24px rgba(255,255,255,.7);
  }
  .hero__sub-a { display: block; }            /* 金額を必ず次の行へ */
  .hero__sub-a::after { content: none; }
  .hero__foot .btn { width: 100%; justify-content: center; }

  /* --- ジャンル帯：上2つ（婚活・プロフィール）／下3つ。
         2列だと5つ目が1枚だけ残って、まとまりが崩れていた --- */
  .genrebar { grid-template-columns: repeat(6, 1fr); }
  /* 上2つ（婚活・プロフィール）を大きく、下3つを並べる（#64）
     ※ タグに依存させない。<a> を外したときに効かなくなった（#44） */
  .genrebar > :nth-child(1),
  .genrebar > :nth-child(2) { grid-column: span 3; }
  .genrebar > :nth-child(n+3) { grid-column: span 2; }
  .genrebar__label { padding: var(--sp-8) var(--sp-4) var(--sp-14); font-size: var(--fs-note); line-height: 1.4; letter-spacing: 0; }

  /* --- 事実バンド：横1列。画面幅を等分し、各項目の中で中央揃え。
         区切り線が画面のちょうど真ん中に来る（#45） --- */
  .facts__grid {
    display: flex; flex-wrap: nowrap; align-items: stretch;
  }
  /* ジャンル帯のキャプション（12px・標準）より目立たせる */
  .facts__item {
    flex: 1 1 0; min-width: 0;                 /* 等分。中身の長さで幅を変えない */
    min-height: 0; padding: var(--sp-14) var(--sp-8);
    font-size: var(--fs-body-s); font-weight: var(--fw-medium);
    line-height: 1.5; white-space: nowrap; text-align: center;
    justify-content: center;                   /* 各項目の中で中央 */
    color: var(--c-ink);
  }
  .facts__item + .facts__item { border-left: 1px solid var(--c-line); }

  /* --- 撮影メニュー：写真と本文を積む --- */
  .pkg { grid-template-columns: 1fr; gap: var(--sp-20); padding: var(--sp-32) 0; }

  /* --- 料金表：ラベルと値を2列で保つ（1列だと読みにくい）--- */
  .pricetable__row { grid-template-columns: 1fr auto; gap: var(--sp-8) var(--sp-16); }

  /* --- 経歴の定義リスト：ラベル幅を詰める --- */
  .deflist__row { grid-template-columns: 72px 1fr; gap: var(--sp-12); }

  /* --- セクションの縦余白（PC128px → SP72px）--- */
  .section { padding-top: var(--sp-64); padding-bottom: var(--sp-64); }

  /* --- 固定フッターバーのぶん、最後に余白 --- */
  .site-footer { padding-bottom: calc(var(--mobilebar-h) + var(--sp-32)); }
}

/* 事実バンドが横1列に収まらない幅では、金額を落とす。
   FVのサブコピーに同じ「16,500円（税込）〜」があるので情報は失われない（#37） */
@media (max-width: 600px) {
  .facts__item:first-child { display: none; }
  .facts__item:nth-child(2) { border-left: 0; }
}
/* 360px未満（旧iPhone SE等）は、2項目が1行に収まらず右端がはみ出す。文字と左右の余白だけ詰める（#57） */
@media (max-width: 359px) {
  .facts__item { font-size: var(--fs-note); padding-inline: var(--sp-4); }
}

/* ============================================
   ハンバーガーメニュー（2026-09-09 #39）
   ============================================ */
.burger {
  display: none; position: relative; z-index: 30;
  width: 44px; height: 44px; margin-right: calc(var(--sp-8) * -1);
  padding: 0; border: 0; background: none; cursor: pointer;
}
.burger__bar {
  display: block; width: 22px; height: 1px; margin: 0 auto;
  background: var(--c-ink);
  transition: transform var(--dur-mid) var(--ease), opacity var(--dur-fast) var(--ease);
}
.burger__bar + .burger__bar { margin-top: 6px; }
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 25;
  background: var(--c-bg);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--header-h) var(--gutter) var(--sp-48);
  opacity: 0; transition: opacity var(--dur-mid) var(--ease);
  overflow-y: auto;
}
.menu.is-open { opacity: 1; }
/* hidden属性は UA の display:none だが、上の display:flex が勝ってしまう。
   これが無いと「透明な全画面メニュー」がページ全体に被さり、どこを押してもメニューのリンクに飛ぶ */
.menu[hidden] { display: none; }
.menu:not(.is-open) { pointer-events: none; }   /* フェードアウト中も反応させない */
.menu__nav { display: flex; flex-direction: column; gap: var(--sp-24); }
.menu__nav a {
  display: flex; align-items: baseline; gap: var(--sp-16);
  /* 1本ずつ順に立ち上がる */
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.menu.is-open .menu__nav a { opacity: 1; transform: none; }
.menu__nav a:nth-child(1) { transition-delay: 40ms; }
.menu__nav a:nth-child(2) { transition-delay: 70ms; }
.menu__nav a:nth-child(3) { transition-delay: 100ms; }
.menu__nav a:nth-child(4) { transition-delay: 130ms; }
.menu__nav a:nth-child(5) { transition-delay: 160ms; }
.menu__nav a:nth-child(6) { transition-delay: 190ms; }
.menu__nav a:nth-child(7) { transition-delay: 220ms; }
.menu__nav a:nth-child(8) { transition-delay: 250ms; }
.menu__nav span {
  font-size: 22px; font-weight: var(--fw-light);
  letter-spacing: var(--ls-eyebrow); color: var(--c-ink);
}
.menu__nav small { font-size: var(--fs-note); color: var(--c-ink-sub); }
.menu__foot {
  margin: var(--sp-48) 0 0; font-size: var(--fs-note);
  line-height: 1.9; color: var(--c-ink-sub);
  opacity: 0; transition: opacity var(--dur-slow) var(--ease) 280ms;
}
.menu.is-open .menu__foot { opacity: 1; }
body.is-menu-open { overflow: hidden; }

/* ============================================
   軽い動き（2026-09-09 #39）
   バウンス・跳ねは使わない（DESIGN_A.md）。フェードと数pxの移動だけ
   ============================================ */

/* --- WORKS：絞り込みの切り替え（#53）---
   1枚ずつではなくグリッドごと入れ替える。消すのは速く（120ms）、出すのはゆっくり（400ms）。
   並べ替えは透明な間に行うので、写真が横へ動く瞬間は見えない。
   transition は「行き先の状態」の値が使われるので、消えるとき＝.is-switching側／出るとき＝素の側 */
.works__grid { transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.works__grid.is-switching {
  opacity: 0; transform: translateY(4px);
  transition-duration: var(--dur-fast);
}

/* --- FAQ：開閉（div.faq__a > p の入れ子で高さをアニメーションさせる） --- */
.faq__a {
  display: grid; grid-template-rows: minmax(0, 0fr);
  opacity: 0; overflow: hidden;
  transition: grid-template-rows var(--dur-mid) var(--ease), opacity var(--dur-fast) var(--ease);
}
.faq__a > p { min-height: 0; margin: 0; padding: 0 0 var(--grid-gap); }
.faq__item.is-open .faq__a { grid-template-rows: minmax(0, 1fr); opacity: 1; }
.faq__sign { display: inline-block; transition: transform var(--dur-mid) var(--ease); }
.faq__item.is-open .faq__sign { transform: rotate(45deg); }

/* ヘッダーだけ切り替え点が別（レイアウトは767px、ナビは899px）。
   768〜899pxでは6項目の欧文ナビがロゴと衝突して横にはみ出すため、
   本文レイアウトがPCのままでもナビはハンバーガーに寄せる（#51） */
@media (max-width: 899px) {
  .gnav { display: none; }
  .burger { display: block; }
}