/* riceparrowLab LP 共通スタイル（WO-012: 見た目と動きを作り直し）
   - スマホ（375px）を基本に書き、広い画面は末尾の @media で足す。
   - 色の変数の名前は前のまま。値もブランドの濃い緑・金のまま。足した変数は --green-deep・--ink だけ。
   - 色の使い方（WO-012）: 濃い緑の面を「ヒーロー・大事にしていること・相談の箱・フッター」に広げ、
     金は帯・数字・ボタンに強く使う。白と生成りが交互に来るようにして、区切りをはっきりさせる。
   - 動き: html.motion が付いた時だけ（main.js）。「視差効果を減らす」がオンなら、全部止める（末尾）。 */

:root {
  --green: #1E5B2E;
  --green-dark: #174925;
  --green-deep: #123A1E;
  --green-soft: #E7EFE4;
  --gold: #C9A227;
  --gold-light: #E8C464;
  --gold-dark: #8A6D12;
  --cream: #FAF7EE;
  --sand: #F2EBD8;
  --line: #E3DCC6;
  --text: #24312A;
  --ink: #2E2405;
  --muted: #5E6D62;
  --white: #FFFFFF;
  --radius: 16px;
  --wrap: 1080px;
  --mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* 文字の段（WO-018）。値はここと広い画面の @media の :root だけで決める。決まりは tasks/lp-riceparrow/design-review-axes.md の付録 */
  --fs-xs: 12px;     /* 注記・出典・札 */
  --fs-s: 14px;      /* 補足・カードの説明・表 */
  --fs-m: 16px;      /* 本文・ボタン */
  --fs-l: 19px;      /* 小見出し（h3）・締めの1文 */
  --fs-xl: 26px;     /* セクションの見出し（h2） */
  --fs-hero: 24px;   /* ヒーローの見出し（h1）だけ */
  --fs-num: 30px;    /* 料金の数字 */
  --fs-num-l: 56px;  /* 課題の大きな数字 */
  --fs-deco: 72px;   /* 右上のセクション番号（飾り。段に数えない） */
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 64px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--gothic);
  font-size: var(--fs-m);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: .02em;
  /* かなの字間を詰める（Zen Kaku Gothic New は、そのままだと かな の間が空いて見える） */
  font-feature-settings: "palt" 1;
  /* 行末に1〜2文字だけ落ちるのを防ぐ */
  text-wrap: pretty;
  /* 左端の金のライン（名刺の箔押しを引き継ぐ）。動きはつけない */
  border-left: 5px solid var(--gold);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); }
a:hover { color: var(--gold-dark); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; line-height: 1.5; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.wrap--narrow { max-width: 800px; }

/* ===== 差し替える場所の印（公開前に全部消す） ===== */
.todo {
  background: #FFF3A3 !important;
  color: #3A3000 !important;
  outline: 2px dashed #D9B300;
  outline-offset: 1px;
}
.img-todo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  width: 100%;
  padding: 16px;
  background: #D8D8D2;
  color: #4A4A44;
  font-size: var(--fs-s);
  text-align: center;
  border-radius: 8px;
}
.img-todo.todo { background: #E6E1B8 !important; }

/* ===== ボタン（押せる所は、下に濃い影。触ると浮く） ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 30px;
  border-radius: 999px;
  font-weight: 900;
  font-size: var(--fs-m);
  text-decoration: none;
  text-align: center;
  line-height: 1.4;
  letter-spacing: .04em;
  transition: background-color .2s, color .2s, transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
.btn--main { background: var(--gold); color: var(--ink); box-shadow: 0 5px 0 var(--gold-dark); }
.btn--main:hover { background: var(--gold-light); color: var(--ink); box-shadow: 0 8px 0 var(--gold-dark), 0 16px 28px rgba(0, 0, 0, .18); }
.btn--main:active { box-shadow: 0 2px 0 var(--gold-dark); }
.btn--sub { border: 2px solid var(--cream); color: var(--cream); }
.btn--sub:hover { background: var(--cream); color: var(--green); }
.btn--green { background: var(--green); color: var(--white); box-shadow: 0 5px 0 var(--green-deep); }
.btn--green:hover { background: var(--green-dark); color: var(--white); box-shadow: 0 8px 0 var(--green-deep), 0 16px 28px rgba(18, 58, 30, .22); }
.btn--green::after { content: "→" / ""; margin-left: .6em; transition: transform .25s var(--ease); }
.btn--green:hover::after { transform: translateX(4px); }
.btn--outline { border: 2px solid var(--green); color: var(--green); background: var(--white); }
.btn--outline:hover { background: var(--green-soft); color: var(--green); }
.btn--block { display: flex; width: 100%; }

/* ===== ヘッダー ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--gold);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 60px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--green); min-width: 0; }
.brand img { width: 32px; height: 44px; flex-shrink: 0; }
.brand__name { display: block; font-weight: 900; font-size: var(--fs-m); line-height: 1.2; letter-spacing: .01em; }
.brand__sub { display: block; font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
.site-header .btn { min-height: 44px; padding: 8px 18px; font-size: var(--fs-s); flex-shrink: 0; background: var(--green); color: var(--white); box-shadow: 0 3px 0 var(--green-deep); }
.site-header .btn:hover { background: var(--green-dark); box-shadow: 0 5px 0 var(--green-deep); }

/* ===== セクション共通 ===== */
main { counter-reset: sec; }
.section { position: relative; padding: 72px 0; overflow: hidden; }
.section > .wrap { position: relative; z-index: 1; }
/* 右上の大きな番号（飾り。読み上げない）。並びは HTML の順のまま数える */
.section { counter-increment: sec; }
.section::before {
  content: counter(sec, decimal-leading-zero) / "";
  position: absolute;
  top: 18px;
  right: 12px;
  font-family: var(--mincho);
  font-weight: 800;
  font-size: var(--fs-deco);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold);
  opacity: .55;
  pointer-events: none;
}
.section--cream { background: var(--cream); }
/* 白どうしが続く所は、細い線で区切る */
.section--rule { border-top: 1px solid var(--line); }
.section--green { background: var(--green); color: #EEF4EC; }
.section__title {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .4em;
  font-family: var(--mincho);
  font-weight: 800;
  font-size: var(--fs-xl);
  line-height: 1.45;
  color: var(--green);
  letter-spacing: .03em;
  margin-bottom: 14px;
  padding-bottom: 14px;
  text-wrap: balance;
}
/* 見出しの下に金の太い短線 */
.section__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 5px;
  border-radius: 3px;
  background: var(--gold);
}
/* 大見出しの印: 止まる雀のワンポイント（全セクション同じ形・同じ大きさ。小見出しには付けない） */
.section__title::before {
  content: "";
  flex-shrink: 0;
  width: 1.5em;
  height: 1.5em;
  margin-top: -.02em;
  border-radius: 50%;
  background: var(--green-soft) url("img/sparrow-mark.webp") center 60% / 76% auto no-repeat;
}
.section--green .section__title::before { background-color: var(--cream); }
.section--green .section__title { color: var(--cream); margin-bottom: 32px; }
.section__lead { color: var(--muted); font-weight: 700; margin-bottom: 32px; }
.section--green .section__lead { color: #C9DCC6; }
.eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--gold-dark);
  letter-spacing: .12em;
  margin-bottom: 6px;
}
.small { font-size: var(--fs-xs); color: var(--muted); }
.nowrap { display: inline-block; }

/* ===== 1. ヒーロー ===== */
.hero { position: relative; overflow: hidden; background: var(--green); color: #EEF4EC; isolation: isolate; }
.hero__inner { position: relative; padding-top: 12px; padding-bottom: 40px; text-align: center; }
.hero__body { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.hero__lead, .hero__text { text-wrap: balance; }
/* 行を言葉の途中で折らない（WO-012 追加指示4）。折ってよい所は HTML の <wbr> で示す。
   keep-all は文字と文字の間で折らない指定。入りきらない時だけ overflow-wrap で折る（はみ出し防止） */
.hero__tag, .hero__title, .hero__lead, .hero__text, .section__title { word-break: keep-all; overflow-wrap: anywhere; }
/* WO-018 段4: 再レビュー 7-4。ヒーロー以外の短い文（小見出し・カードの説明・よくある質問の問い・表・相談の箱・フッター）も、HTML の <wbr> の所でだけ折る */
.brand__sub, .figure__text, .checklist li, .way h3, .step__one, .step__note, .step__what, .faq summary, .profile-table td, .case__flow dd, .timeline li, .takeaway dd, .promises li, .contact-box p, .site-footer p { word-break: keep-all; overflow-wrap: anywhere; }

/* ヒーロー（A案・代表が選んだ）: 濃い緑の上に、ビル（左上）と田園（右下）の大きな丸い写真。
   ふちは大きくぼかし、画面の角からはみ出させる（代表の希望）。文字は真ん中で、写真より手前 */
.hero__photo {
  position: relative;
  z-index: 0;
  display: block;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle, #000 42%, transparent 70%);
  mask-image: radial-gradient(circle, #000 42%, transparent 70%);
}
/* スマホ: ビルは見出しの上で左上の角から、田園はボタンの下で右下の角からはみ出す */
.hero__photo--building { width: 240px; margin: -96px auto -76px -100px; }
.hero__photo--field { width: 300px; margin: -10px -120px -130px auto; }

/* 金の点線の輪（飾り）。スマホでは出さない */
.hero__rings { display: none; }

.hero__tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 900;
  color: var(--ink);
  background: var(--gold-light);
  border-radius: 999px;
  padding: 4px 16px;
  margin-bottom: 12px;
  letter-spacing: .06em;
}
.hero__title {
  font-family: var(--mincho);
  font-weight: 800;
  font-size: var(--fs-hero);
  line-height: 1.55;
  color: var(--cream);
  letter-spacing: .02em;
  margin-bottom: 12px;
}
/* 見出しの2行目: 金の帯に濃い緑の文字（参考: 文字を帯で囲む強調） */
.hero__title em {
  position: relative;
  display: inline-block;
  isolation: isolate;
  font-style: normal;
  color: var(--green-deep);
  padding: 0 .28em;
  margin-top: .2em;
}
.hero__title em::before {
  content: "";
  position: absolute;
  inset: .06em 0;
  z-index: -1;
  background: var(--gold-light);
  transform-origin: left center;
}
.hero__lead { font-size: var(--fs-m); font-weight: 900; line-height: 1.7; color: var(--cream); margin-bottom: 10px; }
/* 説明文: 3秒テストで「小さく細く薄い」と6人が答えたため、16px・太字・生成りの色に（WO-012 追加指示4） */
.hero__text { font-size: var(--fs-m); font-weight: 700; line-height: 1.75; color: var(--cream); margin-bottom: 18px; }
/* スマホでも2つのボタンを横に並べ、札3つまで最初の画面に収める（WO-012 追加指示4） */
.hero__actions { display: flex; gap: 10px; }
.hero__actions .btn { flex: 1 1 0; padding: 12px 6px; font-size: var(--fs-s); letter-spacing: 0; }
/* 問い合わせる前の安心を、金のふちの丸で並べる */
.hero__badges { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hero__badges li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  padding: 4px;
  border-radius: 50%;
  border: 2px solid var(--gold-light);
  background: var(--green-deep);
  color: var(--cream);
  font-size: var(--fs-xs);
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  flex-direction: column;
}
/* 札の中は、意味の切れ目で改行する（文言は同じ。span で区切っただけ） */
.hero__badges li span { display: block; white-space: nowrap; }

/* ===== 2. 課題 ===== */
.pains { display: grid; gap: 22px; margin-bottom: 14px; }
.pain {
  display: grid;
  grid-template-columns: 1fr 72px;
  column-gap: 12px;
  background: var(--white);
  border: 2px solid var(--green);
  border-radius: var(--radius);
  padding: 0 18px 8px;
  overflow: hidden;
}
.pain > * { grid-column: 1 / -1; }
/* 小見出しは、カードの上の濃い緑の帯 */
.pain .pain__name {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0 -18px 16px;
  padding: 10px 18px;
  background: var(--green);
  color: var(--cream);
  font-family: var(--mincho);
  font-size: var(--fs-l);
  font-weight: 800;
  letter-spacing: .04em;
}
.pain__name span { color: var(--gold-light); margin-right: 8px; }
.pain__illust { grid-column: 2; grid-row: 2 / 3; width: 72px; align-self: end; margin-bottom: 4px; }
.pain .figure { grid-column: 1; grid-row: 2; }
.figure { padding: 0; margin-bottom: 6px; }
/* 数字を大きく。金の下線を敷く */
.figure__num {
  display: inline-block;
  font-family: var(--mincho);
  font-weight: 800;
  font-size: var(--fs-num-l);
  line-height: 1.05;
  color: var(--green);
  letter-spacing: -.01em;
  background: linear-gradient(transparent 70%, rgba(232, 196, 100, .7) 70%);
  padding: 0 .08em;
  font-variant-numeric: tabular-nums;
}
.figure__num small { font-size: var(--fs-xl); margin-left: .06em; }
.figure__text { font-size: var(--fs-s); line-height: 1.7; margin-top: 10px; font-weight: 700; }
.checklist { list-style: none; margin: 8px 0 0; padding: 0; }
.checklist li {
  position: relative;
  padding: 12px 0 12px 36px;
  border-top: 1px dashed var(--line);
}
/* 金の丸にチェック */
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold);
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 20px;
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--white);
  border-bottom: 2.5px solid var(--white);
  transform: rotate(-45deg);
}
.source { font-size: var(--fs-xs); color: var(--muted); line-height: 1.7; margin: 0 0 24px; }
/* 課題の締め: 生成りの大きな面。文章（左）と古川さんの絵（右。手のひらが文章のほうを向く） */
.closing {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 100px;
  column-gap: 12px;
  align-items: end;
  background: var(--cream);
  border: 2px solid var(--gold);
  border-radius: 24px;
  padding: 22px 18px 0;
}
.closing__body { display: contents; }
.closing__head { grid-column: 1 / -1; }
.closing__text { grid-column: 1; align-self: start; padding-bottom: 20px; }
.closing__owner { grid-column: 2; grid-row: 2; width: 100px; align-self: end; }
.closing__head { font-family: var(--mincho); font-weight: 800; font-size: var(--fs-l); line-height: 1.6; color: var(--green); margin-bottom: 10px; }
.closing__text { font-size: var(--fs-m); }
/* 困っている2人から古川さんの絵へ飛んでいく雀（右向き） */
.closing__sparrow { width: 100px; margin: 0 auto 10px; }
/* 文字の装飾は「大事な一言に金のマーカー線」。太くした */
.marker { background: linear-gradient(transparent 55%, rgba(232, 196, 100, .75) 55%); padding: 0 .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ===== 3. 大事にしていること（濃い緑の面に、金の輪の飾り） ===== */
.section--ways::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  left: -220px;
  bottom: -260px;
  border-radius: 50%;
  border: 2px dashed rgba(232, 196, 100, .35);
  box-shadow: 0 0 0 60px rgba(232, 196, 100, .05);
  pointer-events: none;
}
.section--ways .section__title { color: var(--cream); }
.ways { display: grid; gap: 16px; }
.way {
  background: var(--green-dark);
  border: 1.5px solid rgba(232, 196, 100, .45);
  border-radius: var(--radius);
  padding: 20px 20px 18px;
  transition: transform .3s var(--ease), border-color .3s;
}
.way:hover { border-color: var(--gold-light); transform: translateY(-3px); }
.way h3 {
  font-family: var(--mincho);
  font-weight: 800;
  font-size: var(--fs-l);
  line-height: 1.5;
  color: var(--gold-light);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(232, 196, 100, .35);
}
.way p { color: #DCE8D9; font-size: var(--fs-s); }
/* 締めの一言: 大きな明朝。金の太い罫線を上下に */
.ways__message {
  margin: 36px 0 0;
  padding: 22px 0;
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
  color: var(--cream);
  font-family: var(--mincho);
  font-weight: 800;
  font-size: var(--fs-l);
  line-height: 2;
  text-wrap: pretty;
}
/* 締めの1行目「Keep It Simple.」を見出しのように（WO-018 追加指示4）。英字の引用句なので、書体の統一の例外として英字の斜体（EB Garamond Italic 600）を使う。2行目は上の締めの1文のまま */
.ways__motto { display: block; font-family: "EB Garamond", var(--mincho); font-size: var(--fs-xl); font-weight: 600; font-style: italic; line-height: 1.4; color: var(--gold-light); letter-spacing: .04em; margin-bottom: 8px; }
/* スマホで「形にし／ます」のように言葉の途中で折れないよう、後半をひとかたまりに（7-4） */
.ways__nobr { display: inline-block; }

/* ===== 4. ご提案イメージ（同じ形の3本。①②は架空、③は自分の教室） ===== */
.case {
  position: relative;
  background: var(--white);
  border-top: 6px solid var(--green);
  padding: 22px 20px 16px;
  border-radius: var(--radius);
  box-shadow: 0 2px 0 var(--line), 0 12px 32px rgba(36, 49, 42, .08);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.case:hover { transform: translateY(-4px); box-shadow: 0 2px 0 var(--line), 0 20px 40px rgba(36, 49, 42, .14); }
.case:nth-child(2) { border-top-color: var(--gold); }
.case:nth-child(3) { border-top-color: #4F7A57; }
.case__tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 900;
  color: var(--ink);
  background: var(--gold-light);
  border-radius: 4px;
  padding: 1px 10px;
  margin-bottom: 10px;
  letter-spacing: .06em;
}
/* WO-018: 1件の中は「何の事例か（札と業種）→ 題 → 現状（As is）→ ▼ → 提案（To be）→ 画面」の順。
   変化が目に入るように、現状は控えめな灰色の箱、提案は緑の太い枠の箱にし、間に金の下向き矢印を置く */
.case { display: flex; flex-direction: column; }
.case__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; }
.case__head .case__tag { margin-bottom: 0; }
.case__kind { display: inline-block; font-size: var(--fs-xs); font-weight: 700; color: var(--green); background: var(--green-soft); border-radius: 999px; padding: 1px 12px; }
.case__title { font-family: var(--mincho); font-weight: 800; font-size: var(--fs-l); color: var(--text); line-height: 1.55; text-wrap: pretty; margin-bottom: 14px; }
.case__flow { display: grid; margin-bottom: 16px; font-size: var(--fs-s); }
.case__flow dl { margin: 0; padding: 12px 14px; border-radius: 10px; }
.case__flow dt { display: inline-block; font-size: var(--fs-xs); font-weight: 900; border-radius: 4px; padding: 0 8px; margin-bottom: 4px; }
.case__flow dd { margin: 0 0 8px; }
.case__flow dd:last-child { margin-bottom: 0; }
.case__asis { background: #F1EFE8; color: var(--muted); }
.case__asis dt { background: var(--muted); color: var(--white); }
.case__tobe { background: var(--green-soft); border: 2px solid var(--green); color: var(--text); font-weight: 700; }
.case__tobe dt { background: var(--green); color: var(--white); }
/* 現状 → 提案 の矢印（金の下向き三角。飾りなので読み上げない） */
.case__asis { position: relative; margin-bottom: 36px; }
.case__asis::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -30px;
  margin-left: -22px;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-top: 22px solid var(--gold);
}
/* 画面・動画は文のすぐ下 */
img.case__img, video.case__img { display: block; width: 100%; height: auto; margin: 0 auto; border: 1px solid var(--line); border-radius: 10px; background: var(--line); }
/* 縦長の動画（3枚目・チラトラ）は、カードが長くなりすぎないよう幅を決めて真ん中に置く（高さ約320px。属性は変えない） */
.case:nth-child(3) .case__img { width: 248px; max-width: 100%; }
/* PC もスマホも: 3枚を横にめくるカルーセル（CSS の scroll-snap。自動では動かさない。WO-021）
   下に〇の点と矢印。影が切れないよう上下左右に余白をとる */
.cases {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 -24px;
  padding: 8px 24px 28px;
  scroll-padding: 0 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cases::-webkit-scrollbar { display: none; }
.cases:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.case { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
@media (max-width: 767px) {
  .cases { gap: 12px; margin: 0 -16px; padding: 4px 16px 14px; scroll-padding: 0 16px; }
  .case { flex-basis: 86%; }
  .case:hover { transform: none; }
}

/* 〇の点と矢印（押せる大きさは 44px 四方） */
.cases__nav { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; }
.cases__dots { display: flex; list-style: none; margin: 0; padding: 0; }
.cases__dot, .cases__arrow {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--green);
}
.cases__dot::before {
  content: ""; width: 14px; height: 14px; box-sizing: border-box;
  border: 2px solid var(--green); border-radius: 50%; background: transparent;
  transition: background-color .2s;
}
.cases__dot[aria-current="true"]::before { background: var(--green); }
.cases__arrow { font-size: 34px; line-height: 1; font-family: inherit; border-radius: 50%; padding-bottom: 4px; }
.cases__arrow:hover:not(:disabled) { background: var(--green-soft); }
.cases__arrow:disabled { color: var(--line); cursor: default; }
.cases__dot:focus-visible, .cases__arrow:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; border-radius: 50%; }


/* ===== 5. 導入の流れと料金 ===== */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr;
  column-gap: 14px;
  background: var(--white);
  border: 2px solid var(--green);
  border-radius: var(--radius);
  padding: 20px 20px;
}
/* ステップの間の下向き矢印（番号の真下） */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50px;
  bottom: -28px;
  margin-left: -12px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 16px solid var(--gold);
}
/* 番号は金の丸 */
.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--mincho);
  font-weight: 800;
  font-size: var(--fs-l);
  line-height: 1;
}
.step__name { align-self: center; font-family: var(--mincho); font-size: var(--fs-l); font-weight: 800; color: var(--green); margin: 0; letter-spacing: .04em; }
.step__body { grid-column: 1 / -1; margin-top: 14px; }
.step__one { margin: 0; font-weight: 700; }
.step__note { font-size: var(--fs-xs); color: var(--muted); margin: 6px 0 0; }
.step__foot { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.step__what { font-size: var(--fs-s); color: var(--text); margin: 0; text-wrap: pretty; }
/* 金額は大きく。添え書きは下（HTML の順番によらず） */
.step__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--mincho);
  font-size: var(--fs-num);
  font-weight: 800;
  line-height: 1.25;
  color: var(--green);
  margin: 0;
  white-space: nowrap;
}
.step__price small { order: 1; font-family: var(--gothic); font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.step__price .step__tax { order: 0; font-size: var(--fs-s); font-weight: 700; color: var(--text); margin-top: 2px; }
.steps__tax { margin: 18px 0 24px; }

/* ===== 6. よくある質問（Q と A の丸） ===== */
.faq { display: grid; gap: 12px; }
.faq details { background: var(--white); border: 2px solid var(--line); border-radius: var(--radius); transition: border-color .2s; }
.faq details[open] { border-color: var(--green); }
.faq summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 16px 48px 16px 60px;
  font-weight: 900;
  min-height: 56px;
  line-height: 1.6;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before,
.faq .answer::before {
  position: absolute;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: var(--mincho);
  font-weight: 800;
  font-size: var(--fs-m);
  line-height: 1;
}
.faq summary::before { content: "Q" / ""; top: 13px; background: var(--green); color: var(--cream); }
.faq summary::after {
  content: "+" / "";
  position: absolute;
  right: 16px;
  top: 12px;
  font-size: var(--fs-l);
  font-weight: 400;
  line-height: 1.2;
  color: var(--gold-dark);
}
.faq details[open] summary::after { content: "−" / ""; }
.faq summary:hover { color: var(--green); }
.faq .answer { position: relative; margin: 0 16px; padding: 14px 4px 18px 44px; border-top: 1px dashed var(--line); font-size: var(--fs-s); color: var(--text); }
.faq .answer::before { content: "A" / ""; left: 0; top: 12px; background: var(--gold); color: var(--ink); }

/* ===== 7. 代表紹介 ===== */
.profile__message {
  position: relative;
  font-size: var(--fs-m);
  font-weight: 700;
  line-height: 2;
  background: var(--white);
  border-radius: var(--radius);
  padding: 22px 20px;
  margin-bottom: 18px;
  box-shadow: 0 0 0 2px var(--gold) inset;
}
.profile__note { font-size: var(--fs-s); margin-bottom: 20px; }
.profile-table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); line-height: 1.75; margin-bottom: 20px; background: var(--white); border-radius: var(--radius); overflow: hidden; }
.profile-table th,
.profile-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.profile-table tr:last-child th,
.profile-table tr:last-child td { border-bottom: 0; }
.profile-table th { width: 7em; font-weight: 700; letter-spacing: .06em; color: var(--cream); background: var(--green); white-space: nowrap; border-bottom-color: rgba(255, 255, 255, .15); }
.profile-table .note { display: block; font-size: var(--fs-xs); color: var(--muted); }
.profile__media { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.profile__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); border: 3px solid var(--white); box-shadow: 0 8px 24px rgba(36, 49, 42, .12); }

/* ===== 8. 初回相談と問い合わせ ===== */
#contact::after {
  content: "";
  position: absolute;
  width: 640px;
  height: 640px;
  right: -260px;
  top: -200px;
  border-radius: 50%;
  background: var(--cream);
  pointer-events: none;
}
.contact__head { margin-bottom: 24px; }
.contact__head .section__title { font-size: var(--fs-xl); }
.contact__illust { width: 100%; max-width: 380px; margin: 8px auto 0; }
.timeline { margin: 0 0 24px; }
.timeline__bar { display: flex; height: 48px; border-radius: 999px; overflow: hidden; margin-bottom: 16px; font-size: var(--fs-xs); font-weight: 900; }
.timeline__bar span { display: flex; align-items: center; justify-content: center; color: var(--white); text-align: center; line-height: 1.3; padding: 0 4px; }
.timeline__bar .t1 { flex: 1; background: #4F7A57; }
.timeline__bar .t2 { flex: 1; background: var(--green); }
.timeline__bar .t3 { flex: 1; background: var(--gold); color: var(--ink); }
.timeline ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: tl; }
.timeline li { position: relative; font-size: var(--fs-s); padding-left: 40px; counter-increment: tl; }
.timeline li::before {
  content: counter(tl) / "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green);
  color: var(--cream);
  font-family: var(--mincho);
  font-weight: 800;
  font-size: var(--fs-s);
  line-height: 28px;
  text-align: center;
}
.timeline li:nth-child(1)::before { background: #4F7A57; }
.timeline li:nth-child(3)::before { background: var(--gold); color: var(--ink); }
/* 相談の小見出しも、ほかの小見出しと同じ明朝 800（WO-018 段4・再レビュー 1-2） */
.timeline b { color: var(--green); font-size: var(--fs-m); font-family: var(--mincho); font-weight: 800; }
.takeaway { background: var(--cream); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 24px; }
.takeaway dt { font-family: var(--mincho); font-weight: 800; color: var(--green); }
.takeaway dd { margin: 0 0 12px; font-size: var(--fs-s); }
.takeaway dd:last-child { margin-bottom: 0; }
.promises { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
/* 札は丸い枠をやめ、金のチェックの印＋文字にした（ラジオボタンに見えないように。WO-018 段4） */
.promises { gap: 6px 20px; }
.promises li { display: flex; align-items: center; gap: 10px; font-weight: 900; color: var(--green); }
.promises li::before {
  content: "";
  flex-shrink: 0;
  width: 13px;
  height: 7px;
  margin-top: -4px;
  border-left: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
  transform: rotate(-45deg);
}
/* 相談の箱: 濃い緑の面に金のボタン */
.contact-box {
  position: relative;
  background: var(--green);
  color: #DCE8D9;
  border-radius: 24px;
  padding: 26px 20px;
  box-shadow: 0 6px 0 var(--green-deep);
}
.contact-box__actions { display: grid; gap: 10px; margin-bottom: 18px; }
.contact-box__actions .btn { min-height: 60px; font-size: var(--fs-m); }
/* 「メールで相談する」は枠のない文字のリンク風に（白枠の「まずは質問だけ送る」と見分けるため。押せる高さ 44px は保つ。WO-018 段4） */
.contact-box__actions .btn--text { min-height: 44px; border: 0; box-shadow: none; background: none; color: var(--gold-light); text-decoration: underline; text-underline-offset: 4px; }
.contact-box__actions .btn--text:hover { background: none; color: var(--cream); }
.contact-box p { font-size: var(--fs-s); color: #DCE8D9; }
.contact-box a:not(.btn) { color: var(--gold-light); }
.contact-box a:not(.btn):hover { color: var(--cream); }

/* ===== フッター ===== */
.site-footer { background: var(--green-deep); color: #C9DCC6; padding: 40px 0 32px; font-size: var(--fs-s); border-top: 4px solid var(--gold); }
.site-footer a { color: var(--gold-light); }
.site-footer__name { color: var(--gold-light); font-weight: 900; font-size: var(--fs-m); }
.site-footer address { font-style: normal; margin: 8px 0 14px; line-height: 1.8; }
.site-footer__motto { font-family: var(--mincho); font-weight: 800; font-size: var(--fs-m); letter-spacing: .12em; color: var(--cream); margin: 4px 0 14px; }
.site-footer .copy { margin-top: 16px; font-size: var(--fs-xs); color: #9FBEA0; }
/* 生成画像の注記（D85-3）: ページの一番下に小さく1行 */
.site-footer__note { margin-top: 6px; font-size: var(--fs-xs); color: #9FBEA0; }

/* ===== 記事ページ・プライバシーポリシー（前のまま） ===== */
.article { padding: 32px 0 56px; }
.article__notice {
  background: var(--sand);
  border-left: 4px solid var(--gold);
  padding: 10px 14px;
  font-size: var(--fs-s);
  font-weight: 700;
  margin-bottom: 20px;
}
.article__kind { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 4px; }
.article h1 { font-family: var(--mincho); font-weight: 800; font-size: var(--fs-xl); color: var(--green); margin-bottom: 20px; }
.article h2 {
  font-family: var(--mincho);
  font-weight: 800;
  font-size: var(--fs-l);
  color: var(--green);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 4px;
  margin: 32px 0 12px;
}
.article ul, .article ol { padding-left: 1.4em; margin: 0 0 1em; }
.article li { margin-bottom: 4px; }
.article .img-todo { margin: 8px 0 16px; }
.article__img { display: block; width: 100%; height: auto; margin: 8px 0 16px; border: 1px solid var(--line); border-radius: 6px; }
.article__cta { margin-top: 36px; padding: 20px 18px; background: var(--white); border: 2px solid var(--green); border-radius: var(--radius); }
.article__cta p { font-weight: 700; color: var(--green); }
.backlink { display: inline-block; margin-top: 24px; font-weight: 700; padding: 6px 0; }
.article .section__title::after { display: none; }

/* ===== 広い画面（タブレット・PC） ===== */
@media (min-width: 768px) {
  :root {
    --fs-xs: 13px;
    --fs-s: 15px;
    --fs-m: 17px;
    --fs-l: 22px;
    --fs-xl: 38px;
    --fs-hero: 40px;
    --fs-num: 34px;
    --fs-num-l: 84px;
    --fs-deco: 140px;
  }
  .wrap { padding: 0 32px; }
  .section { padding: 112px 0; }
  .section::before { top: 36px; right: 32px; }
  .section__title { margin-bottom: 18px; padding-bottom: 18px; }
  .section__title::after { width: 88px; height: 6px; }

  .hero__inner { padding-top: 64px; padding-bottom: 72px; }
  .hero__lead { font-size: var(--fs-l); }
  .hero__actions { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .hero__actions .btn { flex: 0 0 auto; min-height: 60px; padding: 14px 36px; font-size: var(--fs-m); letter-spacing: .04em; }
  .hero__badges { gap: 16px; margin-top: 32px; }
  .hero__badges li { width: 118px; height: 118px; padding: 10px; font-size: var(--fs-s); }
  .hero__photo--building { width: 380px; margin: -140px auto -40px -160px; }
  .hero__photo--field { width: 400px; margin: -20px -170px -180px auto; }

  .pains { grid-template-columns: 1fr 1fr; gap: 28px; }
  .pain { grid-template-columns: 1fr 110px; column-gap: 16px; padding: 0 24px 10px; }
  .pain .pain__name { margin: 0 -24px 20px; padding: 12px 24px; }
  .pain__illust { width: 110px; }

  .closing { grid-template-columns: 1fr 170px; column-gap: 32px; padding: 36px 40px 0; border-radius: 32px; }
  .closing__body { display: block; grid-column: 1; align-self: center; padding-bottom: 36px; }
  .closing__text { padding-bottom: 0; }
  .closing__owner { grid-row: 1; width: 170px; margin-top: -60px; }
  .closing__sparrow { width: 140px; margin: -4px auto 12px; }

  /* 見出しが1行・2行で違っても、説明の書き出しの高さをそろえる（subgrid） */
  .ways { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .way { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; padding: 28px 28px 24px; }
  .ways__message { padding: 28px 0; margin-top: 48px; text-align: center; text-wrap: balance; }

  /* ご提案イメージ: 1件を横長の1行（左に文、右に画面）。次の「導入の流れと料金」の3列と形を変える（指摘4） */
  .case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 32px; padding: 28px 32px; border-top: 0; border-left: 8px solid var(--green); }
  .case:nth-child(2) { border-left-color: var(--gold); }
  .case:nth-child(3) { border-left-color: #4F7A57; }
  .case > :not(.case__img) { grid-column: 1; }
  .case__flow { margin-bottom: 0; align-content: start; }
  .case__img { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; }
  /* 縦長の動画（チラトラ）は高さに上限をつけ、真ん中に置く */
  .case__img { justify-self: center; }
  .case:nth-child(3) .case__img { width: 324px; }

  .step { grid-template-columns: 72px 1fr; column-gap: 20px; padding: 24px 28px; }
  .step__num { width: 72px; height: 72px; grid-row: 1 / 3; }
  .step:not(:last-child)::after { left: 64px; }
  .step__name { align-self: end; }
  .step__body { grid-column: 2; margin-top: 4px; }
  .step__foot { grid-column: 2; grid-template-columns: 1fr 9em; column-gap: 20px; align-items: start; }

  .faq summary { padding: 18px 56px 18px 64px; }
  .faq summary::before { left: 18px; top: 16px; }

  .profile { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .profile__message { grid-column: 1 / -1; padding: 28px 32px; margin-bottom: 24px; }
  .profile-table { margin-bottom: 0; }
  .profile__media { grid-template-columns: 1fr; gap: 16px; }

  .contact__head { margin-bottom: 36px; }
  .contact { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: start; }
  .contact-box { padding: 32px 30px; }

}

/* 導入の流れ: 広い画面では3つを横に並べ、右向きの矢印でつなぐ（行の高さは subgrid でそろえる） */
@media (min-width: 1000px) {
  /* 見出しと絵を横に並べるのは広い画面だけ（768px で並べると見出しが細くなり7行になったため。WO-012） */
  .contact__head { display: grid; grid-template-columns: 1fr 440px; gap: 32px; align-items: end; }
  .contact__head .section__title { margin-bottom: 0; }
  .contact__illust { max-width: none; margin: 0; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .step { grid-template-columns: 1fr; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; padding: 28px 26px 24px; }
  .step > * { grid-column: 1; grid-row: auto; }
  .step__num { grid-row: auto; margin-bottom: 14px; }
  .step__name { align-self: start; }
  .step__body { grid-column: 1; margin-top: 8px; }
  .step__foot { grid-column: 1; grid-template-columns: 1fr; align-content: start; margin-top: 18px; }
  .step__price { align-items: flex-start; }
  /* 金額の高さを3つでそろえる: 「含むもの」と「金額」を別の行（subgrid）にし、含むものの行の高さを3つで同じにする（01 の5万円だけ下がらない。WO-018 段4） */
  .step__foot { grid-row: span 2; grid-template-rows: subgrid; }
  .step:not(:last-child)::after {
    left: auto;
    right: -31px;
    bottom: auto;
    top: 44px;
    margin: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 16px solid var(--gold);
    border-right: 0;
  }
}

/* PC の広い画面: 大きな丸い写真を、ヒーローの左上と右下の角からはみ出させる（代表の希望: 丸を2倍に） */
@media (min-width: 1100px) {
  :root {
    --fs-hero: clamp(44px, 4.4vw, 64px);
    --fs-deco: 180px;
  }
  .hero { min-height: min(900px, calc(100svh - 60px)); display: flex; align-items: center; }
  .hero__inner { position: static; width: 100%; padding-top: 120px; padding-bottom: 128px; }
  .hero__body { max-width: 860px; }
  .hero__title { line-height: 1.45; margin-bottom: 24px; }
  .hero__text { max-width: 680px; margin-left: auto; margin-right: auto; margin-bottom: 32px; }
  /* 丸の中心を角に置き、画面の幅に合わせて大きくする（代表が赤線で示した広がり。2026-10-13） */
  .hero__photo { position: absolute; margin: 0; }
  .hero__photo--building { width: 74vw; top: -29vw; left: -37vw; }
  .hero__photo--field { width: 82vw; bottom: -28vw; right: -41vw; }

  /* 文字の後ろにだけ、濃い緑の薄い膜を敷く（写真が文字にかかっても読めるように。WO-012 追加指示4）。
     丸い写真の形と位置は変えない */
  .hero__body::before {
    content: "";
    position: absolute;
    inset: -60px -120px;
    z-index: -1;
    background: radial-gradient(ellipse closest-side, rgba(18, 58, 30, .82) 55%, rgba(18, 58, 30, 0) 100%);
    pointer-events: none;
  }

  /* 真ん中に、金の点線の輪を2重に（ゆっくり回る）。意味が伝わらないという声があったため、細く薄く（WO-012 追加指示4） */
  .hero__rings { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  .hero__rings span {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(232, 196, 100, .22);
  }
  .hero__rings span:nth-child(1) { width: 62vw; height: 62vw; margin: -31vw 0 0 -31vw; }
  .hero__rings span:nth-child(2) { width: 46vw; height: 46vw; margin: -23vw 0 0 -23vw; border-style: dotted; border-width: 2px; border-color: rgba(232, 196, 100, .14); }

  .section::before { right: 48px; }
}

/* ===== 動き（main.js が html に .motion を付けた時だけ） ===== */
@keyframes rp-band { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rp-pop { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes rp-spin { to { transform: rotate(360deg); } }

/* ヒーロー: 読み込んだ直後に1回だけ。文字は読み始める前（約1秒）に止まる */
.motion .hero__tag,
.motion .hero__title,
.motion .hero__lead,
.motion .hero__text,
.motion .hero__actions { animation: rp-rise .7s var(--ease) both; }
.motion .hero__title { animation-delay: .08s; }
.motion .hero__lead { animation-delay: .2s; }
.motion .hero__text { animation-delay: .28s; }
.motion .hero__actions { animation-delay: .36s; }
.motion .hero__title em::before { animation: rp-band .8s .45s cubic-bezier(.7, 0, .2, 1) both; }
.motion .hero__badges li { animation: rp-pop .6s var(--ease) both; }
.motion .hero__badges li:nth-child(1) { animation-delay: .55s; }
.motion .hero__badges li:nth-child(2) { animation-delay: .65s; }
.motion .hero__badges li:nth-child(3) { animation-delay: .75s; }
.motion .hero__rings span:nth-child(1) { animation: rp-spin 160s linear infinite; }
.motion .hero__rings span:nth-child(2) { animation: rp-spin 120s linear infinite reverse; }

/* スクロールで出てくる（下から少し上がる。1回だけ） */
.motion .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.motion .reveal.is-in { opacity: 1; transform: none; }
/* 同じ並びの2つ目・3つ目は少し遅らせる */
.motion .pain.reveal:nth-child(2),
.motion .way.reveal:nth-child(2),
.motion .case.reveal:nth-child(2),
.motion .step.reveal:nth-child(2) { transition-delay: .12s; }
.motion .way.reveal:nth-child(3),
.motion .case.reveal:nth-child(3),
.motion .step.reveal:nth-child(3) { transition-delay: .24s; }
.motion .way.reveal:nth-child(4) { transition-delay: .36s; }
/* 困っている2人の下から、雀が古川さんのほうへ飛んでくる */
.motion .closing__sparrow.reveal { transform: translate(-40vw, 30px) rotate(-12deg); transition-duration: 1.4s; }
.motion .closing__sparrow.reveal.is-in { transform: none; }
/* 押せる所は reveal の後でも浮く */
.motion .case.reveal.is-in:hover { transform: translateY(-4px); }
.motion .way.reveal.is-in:hover { transform: translateY(-3px); }

/* 「視差効果を減らす」がオンなら、動きを全部止める（main.js も何もしない） */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .btn:hover,
  .case:hover,
  .way:hover { transform: none; }
}