@charset "utf-8";

/* ===========================================================================
   Change Order — changeorder.jp
   モック（docs/mock-original.html）から移植。色・寸法・アニメーションは
   モックの値をそのまま使っている。値を丸めないこと。
   =========================================================================== */

/* --- 書体 ---------------------------------------------------------------
   見出しのみ Zen Kaku Gothic New（SIL OFL 1.1 / assets/fonts/OFL.txt）。
   使用文字だけのサブセット 17.5KB。見出しの文言を変えて新しい漢字が入ると
   その字が □ になる。scripts/build-font.sh で作り直すこと。
   本文は OS 標準ゴシック。Web フォントを足さない。
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("fonts/zenkaku-bold-subset.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro",
               メイリオ, Meiryo, "ＭＳ Ｐゴシック", Roboto, sans-serif;
  --font-heading: "Zen Kaku Gothic New", var(--font-sans);

  /* 地・罫・文字 */
  --paper:       #FFFFFF;
  --namakon:     #ECEEEA;
  --kei:         #C7CCC5;
  --kei-usu:     #E2E6E0;
  --fuku:        #626B65;
  --fuku-usu:    #A3ACA5;
  --sumi:        #151E19;
  --sumi-moji:   #F3F5F2;
  --sumi-fuku:   #AEB8B1;

  /* 深緑（変更点・確定・押せるもの） */
  --midori:      #166534;
  --midori-dark: #0E4423;
  --midori-tint: #DCE9E0;
  --midori-usu:  #F4F8F5;

  /* 第2アクセント（課題セクションの上罫とアイコン） */
  --acc: #A85A20;

  /* .lc の左右パディング。FV の図版を右端まで出すのに使うので変数にしてある */
  --lc-pad: 72px;
}
@media (max-width: 1439px) { :root { --lc-pad: 5vw } }
@media (max-width: 767px)  { :root { --lc-pad: 6vw } }

/* --- 素地 --------------------------------------------------------------- */
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body {
  margin: 0;
  background: var(--paper);
  color: var(--sumi);
  font-family: var(--font-sans);
  font-feature-settings: "palt" 1;
  line-height: 1.9;
}
img, svg { max-width: 100% }
a { color: var(--midori); text-decoration: none }
a:hover { color: var(--midori-dark); text-decoration: underline }
h1, h2, h3 { margin: 0; font-family: var(--font-heading); font-weight: 700; letter-spacing: .01em }
p { margin: 0 }
summary { list-style: none; cursor: pointer }
summary::-webkit-details-marker { display: none }

/* 見出し以外で Zen Kaku を使う箇所（ロゴ・STEP番号・価格） */
.zk { font-family: var(--font-heading) }

/* 日本語の改行制御。文節を塊で折り返す。
   word-break:keep-all は使わない（長い文節が画面外へはみ出す）。
   判定基準: SP 375px で「〜ください」が「〜くださ／い」と割れないこと。 */
.bn { display: inline-block; overflow-wrap: anywhere }

/* キーボード操作の可視化。モックが落としていたので足している */
:focus-visible { outline: 3px solid var(--midori); outline-offset: 2px }

/* --- レイアウト --------------------------------------------------------- */
.lc { width: 1440px; max-width: 100%; margin: 0 auto; padding: 0 var(--lc-pad) }
@media (max-width: 1439px) { .lc { width: 100% } }

.two {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(32px, 4.6vw, 76px); row-gap: 36px; align-items: center;
}
.top { align-items: start }
.fvg { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) }   /* 縦位置は .two の center を使う */

/* --- FV ------------------------------------------------------------------
   図版の右余白はコンテナのパディング（--lc-pad）と同じ。左のテキストの左余白と
   揃えるため、以前あった右へのはみ出しは外した。そのぶん失う幅はグリッド比率
   （1.1fr : 1fr）と gap の詰めで取り戻している。
   ここを装飾で埋めないこと。間延びするなら寸法で直す。
   -------------------------------------------------------------------------- */
.fv-sec { padding: clamp(56px, 6vw, 96px) 0 clamp(76px, 8.4vw, 130px) }
.fvg { column-gap: clamp(20px, 2.4vw, 36px) }

/* キービジュアルの入れ替え。1 枚目＝現場で撮る、2 枚目＝それが打合簿になる。
   2 枚は同じ 4:3 で書き出してあるので、重ねても高さが動かない。
   切り替えは app.js が 5 秒ごとに aria-hidden を付け替えるだけ。 */
.fvslide { position: relative }
.fvslide img { display: block; width: 100%; height: auto; transition: opacity .9s ease }
.fvslide img + img { position: absolute; inset: 0 }
.fvslide img[aria-hidden="true"] { opacity: 0 }
@media (prefers-reduced-motion: reduce) {
  .fvslide img { transition: none }
}
.rev > *:first-child { order: 2 }
@media (max-width: 1023px) {
  .two { grid-template-columns: 1fr }
  .rev > *:first-child { order: 0 }
}

.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px) }
@media (max-width: 860px) { .g3 { grid-template-columns: 1fr; gap: 36px } }

.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2vw, 28px) }
@media (max-width: 1023px) { .g4 { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 560px)  { .g4 { grid-template-columns: 1fr; gap: 30px } }

#top, #kadai, #dekiru, #nagare, #ryokin, #faq, #toiawase { scroll-margin-top: 80px }

/* --- ヘッダ -------------------------------------------------------------
   モックは state をインライン style に流し込んでいた。ここでは
   .is-scrolled / .is-hidden の 2 クラスで同じ状態を作る。
   ------------------------------------------------------------------------ */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: var(--paper);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--kei-usu);
  box-shadow: none;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), background-color .3s ease,
              box-shadow .3s ease, border-color .3s ease;
}
.hdr__bar {
  display: flex; align-items: center; gap: 16px; height: 68px;
  transition: height .3s cubic-bezier(.2,.7,.3,1);
}
.hdr.is-scrolled { background: rgba(255,255,255,.9); border-bottom-color: rgba(226,230,224,0); box-shadow: 0 2px 20px rgba(21,30,25,.09) }
.hdr.is-scrolled .hdr__bar { height: 58px }
.hdr.is-hidden { transform: translateY(-100%) }

.hdr__logo { margin-right: auto; display: flex; align-items: center; text-decoration: none }
.hdr__logo:hover { text-decoration: none }
.hdr__logo img { display: block; height: 30px; width: auto; transition: height .3s cubic-bezier(.2,.7,.3,1) }
.hdr.is-scrolled .hdr__logo img { height: 26px }
.pcNav { display: flex; align-items: center; gap: clamp(16px, 1.9vw, 30px) }
/* :not(.btn) を外さないこと。外すと詳細度（0,1,1）が .btn-cta（0,1,0）に勝ち、
   緑地のボタンが墨文字になってコントラストが消える。 */
.pcNav a:not(.btn) { color: var(--sumi); font-size: 14px; font-weight: 500 }

.mbBtn {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; background: transparent;
  border: 1px solid var(--kei); cursor: pointer; padding: 0;
}
@media (max-width: 900px) { .pcNav { display: none } .mbBtn { display: inline-flex } }

/* 3 本線 → × の変形。開いているかどうかは aria-expanded を見る（状態を
   1 箇所で持つため、見た目用のクラスを別に足さない）。 */
.mbBtn__lines { display: block; width: 22px; height: 12px; position: relative }
.mbBtn__lines i {
  position: absolute; left: 0; width: 22px; height: 1.6px; background: var(--sumi);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), opacity .16s linear;
}
.mbBtn__lines i:nth-child(1) { top: 0 }
.mbBtn__lines i:nth-child(2) { top: 5px }
.mbBtn__lines i:nth-child(3) { top: 10px }
.mbBtn[aria-expanded="true"] .mbBtn__lines i:nth-child(1) { transform: translateY(5px) rotate(45deg) }
.mbBtn[aria-expanded="true"] .mbBtn__lines i:nth-child(2) { opacity: 0 }
.mbBtn[aria-expanded="true"] .mbBtn__lines i:nth-child(3) { transform: translateY(-5px) rotate(-45deg) }

/* ドロワー。高さは app.js が実測して入れる（auto へは transition できないため）。
   閉じている間は visibility:hidden にしてキーボードのフォーカスから外す。 */
.drawer {
  border-top: 1px solid var(--kei-usu); background: var(--paper);
  overflow: hidden; height: 0; visibility: hidden;
  transition: height .3s cubic-bezier(.2,.7,.3,1), visibility 0s .3s;
}
.drawer.is-open { visibility: visible; transition: height .3s cubic-bezier(.2,.7,.3,1), visibility 0s }
.drawer[hidden] { display: none }   /* JS が無効なときだけ効く（app.js が外す） */
/* 上下だけ指定する。padding のショートハンドを使うと .lc の左右パディングを
   潰してリンクが画面端に張り付く。 */
.drawer__inner { display: grid; gap: 2px; padding-top: 8px; padding-bottom: 20px }
.drawer a:not(.btn) {
  color: var(--sumi); font-size: 16px; font-weight: 500;
  padding: 14px 0; border-bottom: 1px solid var(--namakon);
}

/* --- ボタン -------------------------------------------------------------
   モックの style-hover 属性を :hover に移したもの。
   ------------------------------------------------------------------------ */
.btn {
  border-radius: 999px;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, background-color .18s ease;
}
.btn:hover { transform: translateY(-2px) }
.btn:active { transform: translateY(0) }

.btn-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--midori); color: #fff; font-weight: 700; font-size: 14px;
  padding: 11px 26px; min-height: 44px; border: 1px solid var(--midori);
}
.btn-cta:hover {
  background: var(--midori-dark); border-color: var(--midori-dark);
  color: #fff; text-decoration: none; box-shadow: 0 6px 18px rgba(22,101,52,.28);
}

.btn-submit {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  background: var(--midori); color: #fff; border: 1px solid var(--midori);
  font-family: inherit; font-weight: 700; font-size: 16.5px; min-height: 58px; cursor: pointer;
}
.btn-submit:hover {
  background: var(--midori-dark); border-color: var(--midori-dark);
  box-shadow: 0 10px 26px rgba(22,101,52,.3);
}
.btn-submit[disabled] { opacity: .6; cursor: default; transform: none; box-shadow: none }

.btn-drawer {
  display: flex; align-items: center; justify-content: center;
  background: var(--midori); color: #fff; font-weight: 700; font-size: 16px;
  min-height: 54px; margin-top: 14px; text-decoration: none;
}
.btn-drawer:hover { background: var(--midori-dark); color: #fff; text-decoration: none }

/* --- フォーム ----------------------------------------------------------- */
.field {
  width: 100%; background: var(--paper); border: 1px solid var(--kei);
  border-radius: 999px; color: var(--sumi); font-family: inherit;
  font-size: 16px; padding: 15px 22px; min-height: 56px;
}
/* ハニーポット。人には見せず、bot にだけ見せる */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

.fvh1 { font-size: clamp(27px, 2.85vw, 42px); line-height: 1.44; margin-top: 12px }
@media (max-width: 1023px) { .fvh1 { font-size: min(6.4vw, 30px); line-height: 1.52 } }
@media (max-width: 359px)  { .fvh1 { font-size: 21px } }


/* --- 全幅の写真バンド ---------------------------------------------------
   高さ固定・object-fit:cover なので、元画像の縦は 6 割ほど捨てられる。
   object-position で「帯のどこを見せるか」を決める。画像を差し替えたら
   必ず 375 / 768 / 1440 で見て詰め直すこと。
   ------------------------------------------------------------------------ */
/* 罫も網掛けも付けない。絵柄そのものが境界とコントラストを持っているため。
   もし将来ここに文字を載せて網掛けが要るときは、無彩色のグレーではなく
   墨 rgba(21,30,25,x) を使うこと（無彩色を深緑の隣に置くと灰が赤みに転ぶ）。 */
.band-photo {
  display: block;
  width: 100%;
  height: clamp(200px, 26vw, 340px);
  object-fit: cover;
  object-position: center;      /* イラスト用。実写に戻すなら center 62% */
  background: var(--namakon);   /* 読み込み前の下地 */
}

/* --- 3 枚組みの図版（「2 生成」）------------------------------------------
   claude.ai/design の 1c 案から移植。入力と成果物をカードで対比させる。
   色は元案の独自パレット（#1b6b3a / #1a1a18 / #78786f）ではなく、サイトの
   トークンに読み替えてある。**元の値に戻さないこと** — あちらは無彩色の
   グレーで、深緑の隣に置くと補色残像で灰が赤みに転ぶ。
   ------------------------------------------------------------------------ */
.fig3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: clamp(8px, 1.2vw, 16px);
  align-items: stretch;
}
@media (max-width: 767px) { .fig3 { grid-template-columns: 1fr; gap: 12px } }

.fig3__card {
  background: var(--paper);
  border: 1px solid var(--kei-usu);
  padding: clamp(12px, 1.4vw, 18px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 16px);
}
.fig3__card.is-out { border: 1.5px solid var(--midori) }

.fig3__card.is-out .fig-label { color: var(--midori) }

.fig3__art { flex: 1; display: flex; align-items: center; justify-content: center }

.fig3__cap b { display: block; font-size: clamp(14px, 1.3vw, 16px); font-weight: 500; color: var(--sumi) }
.fig3__cap span { display: block; font-size: clamp(11.5px, 1vw, 13px); color: var(--fuku); margin-top: 3px }

/* スマホ（写真＋音声）*/
.fig3__phone {
  width: clamp(56px, 6vw, 76px); aspect-ratio: 110/158;
  border: 1.5px solid var(--sumi); border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(8px, 1vw, 14px);
}
.fig3__screen { width: 62%; aspect-ratio: 70/48; border: 1.5px solid var(--kei) }
.fig3__wave { display: flex; align-items: center; gap: 4px }
.fig3__wave i { width: 2px; background: var(--sumi) }
.fig3__wave i:nth-child(1) { height: 10px }
.fig3__wave i:nth-child(2) { height: 19px }
.fig3__wave i:nth-child(3) { height: 27px }
.fig3__wave i:nth-child(4) { height: 15px }
.fig3__wave i:nth-child(5) { height: 22px }

/* 行（文字起こし・帳票の中身）*/
.fig3__lines { width: 100%; display: flex; flex-direction: column; gap: clamp(7px, .9vw, 11px) }
.fig3__lines > i { height: 1.5px; background: var(--kei); display: block }
.fig3__lines > i.on { background: var(--midori) }

/* 成果物の帳票 */
.fig3__doc { width: 100%; border: 1px solid var(--kei-usu); padding: clamp(9px, 1.1vw, 13px) }
.fig3__doc > b { display: block; font-size: 11px; font-weight: 400; color: var(--sumi); text-align: center; margin-bottom: 8px }
.fig3__doc hr { border: 0; border-top: 1.5px solid var(--sumi); margin: 0 0 clamp(7px, .9vw, 11px) }

/* --- 関門型の図版（「3 確定」）--------------------------------------------
   同じプロジェクトの 2c 案。社内で動く範囲を面で囲い、「確定」だけを外に出す。
   押すまで書面が外に出ないことを、配置そのもので示すのが狙い。
   ------------------------------------------------------------------------ */
.figg {
  display: grid;
  grid-template-columns: 1fr minmax(110px, 168px);
  gap: clamp(10px, 1.4vw, 22px);
  align-items: stretch;
}
@media (max-width: 767px) { .figg { grid-template-columns: 1fr } }

.figg__in {
  background: var(--namakon); border: 1px solid var(--kei-usu);
  padding: clamp(12px, 1.5vw, 20px);
  display: flex; flex-direction: column; gap: clamp(10px, 1.3vw, 18px);
}
.figg__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.1vw, 16px) }
.figg__box {
  background: var(--paper); border: 1px solid var(--kei-usu);
  padding: clamp(10px, 1.2vw, 16px);
  display: flex; flex-direction: column; gap: 5px;
}
.figg__box b { font-size: clamp(13.5px, 1.35vw, 17px); font-weight: 500; color: var(--sumi) }
.figg__box span,
.figg__fix span { font-size: clamp(11px, .95vw, 13px); color: var(--fuku); line-height: 1.7 }

/* 差戻しの経路。破線と三角は擬似要素で描く */
.figg__back { position: relative; height: 46px }
.figg__back::before {
  content: ""; position: absolute; left: 25%; top: 0; width: 50%; height: 24px;
  border-left: 1.5px dashed var(--fuku-usu);
  border-bottom: 1.5px dashed var(--fuku-usu);
  border-right: 1.5px dashed var(--fuku-usu);
}
.figg__back::after {
  content: ""; position: absolute; left: 25%; top: -5px; margin-left: -5px;
  width: 0; height: 0; border-bottom: 8px solid var(--fuku-usu);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
}
.figg__back span {
  position: absolute; left: 25%; top: 28px; width: 50%; text-align: center;
  font-size: clamp(10.5px, .9vw, 12.5px); color: var(--fuku);
}

.figg__fix {
  background: var(--midori-tint); border: 1.5px solid var(--midori);
  padding: clamp(12px, 1.5vw, 20px);
  display: flex; flex-direction: column; gap: 7px; justify-content: center;
}
.figg__fix .fig-label { color: var(--midori) }
.figg__fix b { font-size: clamp(17px, 1.9vw, 24px); font-weight: 500; color: var(--midori) }
.figg__fix span { color: var(--midori-dark) }

/* --- 料金 ----------------------------------------------------------------
   claude.ai/design の 4a 案。早期導入価格を主役に置き、条件は右に一覧で読ませる。
   **右の表から特商法の表示事項（支払時期・解約・返金）を落とさないこと。**
   元案の表にはこの 3 項目が無く、そのまま移すと法定記載が欠ける。
   ------------------------------------------------------------------------ */
.pricing { display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: clamp(28px, 4vw, 64px); align-items: start }
@media (max-width: 1023px) { .pricing { grid-template-columns: 1fr } }

.pricing__card {
  background: var(--paper); border: 1.5px solid var(--midori);
  padding: clamp(24px, 2.8vw, 40px);
  display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 30px);
}
.pricing__badge {
  align-self: flex-start;
  background: var(--midori); color: #fff;
  font-size: 12.5px; letter-spacing: .08em; padding: 6px 13px;
}
.pricing__amount { display: flex; align-items: baseline; gap: 9px }
.pricing__amount b {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(44px, 5.4vw, 66px); line-height: 1; letter-spacing: -.02em; color: var(--sumi);
}
.pricing__amount span { font-size: clamp(16px, 1.7vw, 22px); font-weight: 500; color: var(--sumi) }
.pricing__tax { font-size: 13.5px; color: var(--fuku); margin-top: 10px }

.pricing__terms {
  background: var(--namakon); padding: clamp(11px, 1.2vw, 15px) clamp(13px, 1.4vw, 18px);
  display: flex; flex-direction: column; gap: 4px;
  font-size: clamp(12.5px, 1.05vw, 14px); color: var(--fuku); line-height: 1.65;
}
.pricing__terms .was { color: var(--sumi) }
.pricing__terms .was s { color: var(--fuku-usu) }

.pricing__checks { display: flex; flex-direction: column; gap: 13px; padding-top: 16px; border-top: 1px solid var(--kei-usu) }
.pricing__checks li { display: flex; gap: 12px; align-items: flex-start; font-size: clamp(14px, 1.2vw, 16.5px); color: var(--sumi); line-height: 1.6 }
.pricing__checks li::before {
  content: ""; flex: none; margin-top: 8px; width: 11px; height: 6px;
  border-left: 2px solid var(--midori); border-bottom: 2px solid var(--midori);
  transform: rotate(-45deg);
}

.pricing__lead { font-size: clamp(16px, 1.5vw, 20px); font-weight: 700; color: var(--sumi); line-height: 1.6 }
.pricing__table { width: 100%; border-collapse: collapse; margin-top: clamp(16px, 2vw, 26px); text-align: left }
.pricing__table th, .pricing__table td {
  border-top: 1px solid var(--kei); padding: clamp(12px, 1.3vw, 18px) 0; vertical-align: top;
  font-size: clamp(13px, 1.1vw, 15.5px); line-height: 1.7;
}
.pricing__table th { width: 8em; padding-right: 20px; font-weight: 400; color: var(--fuku); white-space: nowrap }
.pricing__table tr:last-child th, .pricing__table tr:last-child td { border-bottom: 1px solid var(--kei) }

/* --- 回収の図（「3 回収」）------------------------------------------------
   claude.ai/design の 3a 案を簡略化して移植。段階ごとに落ちていく金額を並べ、
   その落差＝まだ取りに行ける額を最後に置く。
   数値は例示。**必ず「図の数値は説明のための例です」を添えること。**
   ------------------------------------------------------------------------ */
.recov { width: 100%; border-collapse: separate; border-spacing: 0 clamp(5px, .6vw, 7px) }
.recov th, .recov .amt {
  font-size: clamp(12.5px, 1.05vw, 14.5px); color: var(--sumi);
  white-space: nowrap; font-weight: 400;
}
.recov th { text-align: left; padding-right: clamp(10px, 1.3vw, 18px) }
.recov .amt { text-align: right; padding-left: clamp(10px, 1.3vw, 18px) }
.recov .bar { width: 100%; background: var(--kei-usu); height: clamp(18px, 1.9vw, 24px) }
.recov .bar > i { display: block; height: 100%; background: var(--sumi) }
.recov .got th, .recov .got .amt { color: var(--midori) }
.recov .got .bar > i { background: var(--midori) }

.recov-sum {
  margin-top: clamp(16px, 2vw, 26px);
  background: var(--paper); border-left: 3px solid var(--midori);
  padding: clamp(14px, 1.7vw, 22px) clamp(16px, 1.9vw, 26px);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.recov-sum p { font-size: clamp(12px, 1.05vw, 14px); color: var(--fuku); line-height: 1.75 }
.recov-sum b {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(24px, 2.8vw, 36px); color: var(--midori);
  letter-spacing: -.01em; white-space: nowrap; line-height: 1;
}

/* 図版の共通部品 */
.fig-label { font-size: 11px; letter-spacing: .12em; color: var(--fuku-usu) }
.fig-note {
  margin-top: clamp(14px, 1.8vw, 22px); padding-top: 14px;
  border-top: 1px solid var(--kei);
  font-size: clamp(11.5px, 1vw, 13px); color: var(--fuku); line-height: 1.8;
}

/* --- FAQ ----------------------------------------------------------------
   高さは app.js が実測して入れる。details は閉じると中身が display:none に
   なるので、CSS だけでは閉じる側のアニメーションが効かない。
   ------------------------------------------------------------------------ */
.acc { overflow: hidden; transition: height .3s cubic-bezier(.2,.7,.3,1) }
details[open] .plus { transform: rotate(45deg) }
.plus {
  flex: none; position: relative; width: 18px; height: 18px;
  margin-top: 6px; transition: transform .22s ease;
}
.plus::before, .plus::after { content: ""; position: absolute; background: var(--midori) }
.plus::before { left: 0; top: 8px; width: 18px; height: 2px }
.plus::after  { left: 8px; top: 0; width: 2px; height: 18px }

/* --- 課題セクションの図版 -----------------------------------------------
   地色が墨ベタなので、イラストの黒い部分（服・土・重機）が背景に沈む。
   輪郭は白アウトラインで見えるが中身が読めないため、図版の背後にだけ
   生コンの面を敷く。セクションごと明るくしないのは、濃い地色の面が
   このセクションと CTA の 2 つしかなく、ページのリズムを作っているため。
   ------------------------------------------------------------------------ */
#kadai img { background: var(--namakon) }


/* --- 規約ページ（利用規約・プライバシーポリシー・特商法）------------------
   アプリ側（change-order_v2 の (public) 配下）から移設したもの。
   **値の正本はここ**。変えるときは 3 ページと料金セクションを揃えて直すこと。
   ------------------------------------------------------------------------ */
.legal { max-width: 46em }
.legal > header { margin-bottom: clamp(24px, 3vw, 36px) }
.legal h1 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.5 }
.legal .date { margin-top: 8px; font-size: 13px; color: var(--fuku) }
.legal section { margin-top: clamp(26px, 3.2vw, 40px) }
.legal h2 { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; margin-bottom: 10px }
.legal p { font-size: clamp(14px, 1.15vw, 15.5px); line-height: 1.95; color: var(--sumi) }
.legal p + p { margin-top: 12px }
.legal ul { margin: 10px 0 0; padding-left: 1.4em }
.legal li { font-size: clamp(14px, 1.15vw, 15.5px); line-height: 1.95 }
.legal li + li { margin-top: 6px }
.legal strong { font-weight: 700 }

.legal dl { margin: 0 }
.legal dl > div {
  display: grid; grid-template-columns: 11em 1fr; gap: 4px 20px;
  padding: 14px 0; border-bottom: 1px solid var(--kei-usu);
}
@media (max-width: 640px) { .legal dl > div { grid-template-columns: 1fr; gap: 2px } }
.legal dt { font-size: clamp(13px, 1.1vw, 14.5px); font-weight: 500; color: var(--fuku) }
.legal dd { margin: 0; font-size: clamp(14px, 1.15vw, 15.5px); line-height: 1.9; color: var(--sumi) }
.legal dd .todo { color: var(--fuku-usu) }

/* 記載が揃うまでの警告。埋まったらこのブロックごと消すこと */
.legal .notice {
  border: 1px solid var(--acc); background: #FDF6F0;
  padding: clamp(14px, 1.6vw, 18px); margin-bottom: clamp(20px, 2.4vw, 28px);
}
.legal .notice b { display: block; font-size: 14.5px; color: var(--acc) }
.legal .notice p { margin-top: 6px; font-size: 13.5px; color: var(--sumi) }

/* --- アニメーション -----------------------------------------------------
   モックの 3 系統をそのまま維持している。
   ① [data-rv]  … 画面に入ったら fade-up（初期状態は app.js が付ける）
   ② .fig3__doc .on … 成果物の帳票の行が上から順に引かれる
   ③ .gr        … 金額の棒が左から伸びる
   reduced-motion のときは ①を app.js が付けず、②③は下のブロックごと効かない。
   ------------------------------------------------------------------------ */
/* 開閉の動きも止める。app.js 側は FAQ を既定の即時開閉に切り替え、
   ドロワーは transition が無いぶん afterTransition のタイマーで処理される。 */
@media (prefers-reduced-motion: reduce) {
  .drawer, .acc, .mbBtn__lines i { transition: none }
}

@keyframes growX { to { transform: none } }

@media (prefers-reduced-motion: no-preference) {
  /* 成果物の帳票の行が上から順に引かれる（SVG 版 .dl の HTML 置き換え）。
     stroke-dashoffset は SVG 専用なので scaleX で同じ見え方を作っている。 */
  [data-anim] .fig3__doc .on { transform: scaleX(0); transform-origin: left center }
  [data-in] .fig3__doc .on { animation: growX .5s cubic-bezier(.2,.7,.3,1) forwards }
  [data-in] .fig3__doc .on:nth-of-type(3) { animation-delay: .12s }
  [data-in] .fig3__doc .on:nth-of-type(4) { animation-delay: .24s }
  [data-in] .fig3__doc .on:nth-of-type(5) { animation-delay: .36s }

  [data-anim] .gr { transform: scaleX(0); transform-origin: left center }
  [data-in] .gr { animation: growX .6s cubic-bezier(.2,.7,.3,1) forwards }
  [data-in] .gr:nth-of-type(2) { animation-delay: .07s }
  [data-in] .gr:nth-of-type(3) { animation-delay: .14s }
  [data-in] .gr:nth-of-type(4) { animation-delay: .21s }
  [data-in] .gr:nth-of-type(5) { animation-delay: .28s }
  [data-in] .gr:nth-of-type(6) { animation-delay: .35s }
}