/* 見本v3：水族館の解説板
   - 章は「水槽の前に立つ解説板」。すりガラス・光のにじみ・大きな角丸をやめ、平らな板に
   - 見出しは丸ゴシック（泡の子と同じ丸み）、本文はUDゴシック（年配の店主にも読みやすい）
   - 章名の小見出しは置かない（右の深さ計が章名を出しているため）
   - 値段だけ値札の黄色。目立たせるのはここと水槽だけ */
body.v3{
  --deep:#041a26;
  --plate:#f5fafb;
  --ink:#10303d;
  --sub:#4c6670;
  --line:#cfdde2;
  --blue:#0e7fa6;
  --bub:#7fe6ff;
  --tag:#ffe27a;
  --font:"BIZ UDPGothic","Hiragino Sans","Noto Sans JP",sans-serif;
  --round:"Zen Maru Gothic","BIZ UDPGothic",sans-serif;
  font-family:var(--font);
  line-height:1.8;
  letter-spacing:.01em;
}
body.v3 h1,body.v3 h2,body.v3 h3,body.v3 .logo,body.v3 .btn,body.v3 .nav .cta{font-family:var(--round)}

/* ── 最初の画面：見出しは白一色（一部だけ色を変えない） */
body.v3 .hero h1{font-weight:900;letter-spacing:-.02em;line-height:1.12}
body.v3 .hero h1 .g{background:none;-webkit-text-fill-color:#fff;color:#fff}
body.v3 .hero .kicker{font-family:var(--round);font-weight:700;letter-spacing:.04em;opacity:.9}
body.v3 .hero .lead{font-size:clamp(17px,1.6vw,20px)}

/* ── ボタン：丸ゴシック・矢印なし */
body.v3 .btn{font-weight:700;letter-spacing:.02em}
body.v3 .btn.ink{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:999px;background:var(--ink);color:#fff;flex:none}
body.v3 .btn.ink:hover{background:var(--blue)}

/* ── 章＝解説板。平ら・角は小さく・影は1本 */
body.v3.dive .sec,body.v3.dive .sec.alt{
  background:var(--plate);-webkit-backdrop-filter:none;backdrop-filter:none;
  border-radius:6px;box-shadow:0 2px 0 rgba(0,0,0,.18);
  margin:0 clamp(10px,5vw,96px);padding:clamp(56px,7vw,96px) 0;
  color:var(--ink);
}
body.v3.dive .sec + .sec{margin-top:clamp(48px,7vw,104px)}
/* 深い章＝夜の水槽の解説板（暗い板に明るい文字） */
body.v3.dive .sec.deep,body.v3.dive .sec.deep.alt{
  --ink:#e8f4f7;--sub:#9fbcc6;--line:rgba(232,244,247,.18);--blue:#7fe6ff;
  background:#082736;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 2px 0 rgba(0,0,0,.4)
}
body.v3 .sec h2{font-family:var(--round);font-weight:900;font-size:clamp(28px,3.8vw,46px);line-height:1.3;letter-spacing:0;margin:0}
body.v3 .sec .fine{color:var(--sub);font-size:14px}

/* ── 小さな仕事：前→後の図・名前・値札 を1行に */
body.v3 .jobs{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;margin-top:40px;border-top:2px solid var(--ink)}
body.v3 .job{display:grid;grid-template-columns:132px 1fr auto;align-items:center;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
body.v3 .job .fig{background:#fff;border:1px solid var(--line);border-radius:4px;padding:6px}
body.v3 .job .fig svg{display:block;width:100%;height:auto}
body.v3 .job h3{font-size:18px;font-weight:700;line-height:1.4}
body.v3 .job p{font-size:14px;color:var(--sub);margin-top:4px;line-height:1.6}
body.v3 .tag{font-family:var(--font);font-weight:700;font-size:14px;white-space:nowrap;
  background:var(--tag);color:#2a2306;padding:4px 10px 4px 16px;border-radius:2px;position:relative;
  clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%)}
body.v3 .tag b{font-size:18px;letter-spacing:0}
body.v3 .askline{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:32px;padding:22px 26px;border:2px dashed var(--line);border-radius:4px}
body.v3 .askline p{font-size:16px}
body.v3 .askline b{font-family:var(--round);font-size:19px;margin-right:8px}
body.v3 #jobs .fine{margin-top:20px}

/* ── 実例：1時間→1分 は大きな数字のまま */
body.v3 .ba .after b{color:var(--blue)}
body.v3 .ba b,body.v3 .sum b{font-family:var(--font)}
body.v3 .screen{border-radius:4px;box-shadow:0 0 0 1px var(--line)}

/* ── 自社で動くもの：色つき四角のアイコンをやめ、文字と「動いている」印だけ */
body.v3 .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px;border-top:2px solid var(--ink)}
body.v3 .tiles li{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:12px;padding:22px 24px 22px 0;border-bottom:1px solid var(--line);background:none;box-shadow:none;border-radius:0;text-align:left}
body.v3 .tiles h3{font-size:19px;font-weight:700;grid-column:1;margin:0}
body.v3 .tiles p{grid-column:1;color:var(--sub);font-size:14px;margin:2px 0 0}
body.v3 .tiles .live{grid-column:2;grid-row:1 / span 2;align-self:center;position:static;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#178a52;background:none;padding:0}
body.v3 .tiles .live::before{content:"";width:9px;height:9px;border-radius:50%;background:#22b46a;box-shadow:0 0 0 4px rgba(34,180,106,.18)}

/* ── 料金：値段に値札の色 */
body.v3 .prices h3{font-family:var(--round);font-size:17px;color:var(--ink);border-bottom:2px solid var(--ink)}
body.v3 .prices .v b{background:linear-gradient(transparent 58%,var(--tag) 58%);padding:0 2px}

/* ── 進め方：本当に順番があるので、番号と1本の線でつなぐ */
body.v3 .steps{position:relative}
body.v3 .steps li h3{font-family:var(--round)}

/* ── お引き受けしないこと：×印の短い行 */
body.v3 .nopes li{border-radius:4px;font-family:var(--round);font-weight:700}
body.v3 .nopes li::before{content:"×";margin-right:8px;color:#ff8f8f;font-weight:900}

/* ── 代表から */
body.v3 blockquote{font-family:var(--round);font-weight:500;font-size:clamp(19px,2vw,24px);line-height:1.8}

/* ── ほかのお仕事：板の中の小さなリンク。色つき四角アイコンは消した */
body.v3 .ocards .oc{border-radius:4px;padding:22px 22px}
body.v3 .ocards .oc h3{font-family:var(--round)}

/* ── スマホ */
@media (max-width:900px){
  body.v3 .jobs{grid-template-columns:1fr}
  body.v3 .tiles{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body.v3.dive .sec,body.v3.dive .sec.alt{margin:0 8px}
  body.v3 .job{grid-template-columns:112px 1fr;grid-template-rows:auto auto;gap:6px 14px;padding:18px 0}
  body.v3 .job .fig{grid-row:1 / span 2}
  body.v3 .job .tag{grid-column:2;justify-self:start}
  body.v3 .job h3{font-size:17px}
  body.v3 .askline{flex-direction:column;align-items:flex-start;padding:18px}
  body.v3 .tiles{grid-template-columns:1fr}
}

body.v3 .job.ask .fig.q{display:grid;place-items:center;aspect-ratio:320/150;border-style:dashed;font-family:var(--round);font-size:34px;font-weight:900;color:var(--blue);background:transparent}
body.v3 .job.ask .btn.ink{min-height:42px;padding:0 20px;font-size:15px}
@media (max-width:560px){body.v3 .job.ask .btn.ink{grid-column:2;justify-self:start}}