/* ============================================================
   クルスタ LP ─ セクション別スタイル（原稿 lp-copy-v4.md 用）
   base.css（骨格＋C案パレット）を読み込んだ後に読む。

   セクションの地は 白（.sec-white）と サーモン tint（.sec-tint）を交互に：
     01 ヒーロー        tint
     02 3行サマリー     白
     03 利益構造 ★背骨  tint
     04 削れるムダ      白
     05 やること        tint
     06 誰がやるか      白
     07 実績            非表示（許諾待ち）
     08 料金            tint
     09 始め方          白
     10 FAQ             tint
     11 フォーム        白
     12 FINAL CTA       tint
============================================================ */

/* ============================================================
   01｜FIRST VIEW
============================================================ */
.hero{position:relative;overflow:hidden;padding:0;
  background:
    radial-gradient(700px 420px at 88% -10%,rgba(239,126,109,.20),transparent 62%),
    var(--accent-tint);
  --muted:#475569;}
.hero-inner{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:clamp(28px,4vw,52px);align-items:center;
  padding-block:clamp(40px,6vw,80px) clamp(32px,4vw,56px);}  /* .wrap の左右paddingを潰さないよう block 側だけ指定 */
.hero .en-kicker{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;
  font-size:12.5px;font-weight:700;color:var(--accent-ink);letter-spacing:.04em;line-height:1.6;}
.hero .en-kicker::before{content:"";flex:none;width:24px;height:2px;border-radius:2px;background:var(--accent);}

/* 最長行「かけすぎかもしれません。」= 12字 が折り返さない上限に合わせてある。
   H1 を差し替えるときは 375px と 1280px の両方で必ず折り返しを確認すること。 */
.hero h1{font-size:clamp(28px,3.9vw,47px);line-height:1.34;font-weight:800;
  letter-spacing:-.015em;margin:0 0 22px;}
.hero h1 .em{position:relative;display:inline-block;color:var(--accent-ink);z-index:0;}
.hero h1 .em::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.06em;height:.2em;
  z-index:-1;border-radius:3px;background:var(--accent);opacity:.42;}

.hero .lead{margin:0;font-size:clamp(14.5px,1.5vw,16.5px);line-height:2.05;color:var(--ink-2);max-width:34em;}
.hero .lead + .lead{margin-top:12px;}
.hero .lead b{color:var(--ink);font-weight:700;}

.hero-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin-top:26px;color:var(--accent-ink);}
.hero-price .u{color:var(--ink);font-size:14px;font-weight:700;margin-right:4px;}
.hero-price .n{font-family:var(--font-en);font-size:clamp(44px,5.6vw,60px);font-weight:700;
  line-height:.95;letter-spacing:-.03em;}
.hero-price .y{font-size:19px;font-weight:700;}
.hero-price .from{color:var(--ink-2);font-size:14px;font-weight:700;margin-left:6px;}
.hero-setup{margin-top:8px;font-size:12px;color:var(--muted);}
.hero-cta{margin-top:24px;}
.hero-micro{margin-top:14px;display:flex;align-items:flex-start;gap:8px;
  font-size:12.5px;color:var(--muted);line-height:1.75;}
.hero-micro::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--accent);margin-top:.55em;}

/* ヒーローの図版：インラインSVGで新規制作（旧LPの210KBの店舗イラストは廃止）。
   このLPの背骨＝利益構造を1画面目で先出しする図。写真は使わない。
   モバイルでは非表示。CTAをファーストビューに収めることを優先している。 */
.hero-art{display:none;}

/* 実績バー：tint の上に白いカードとして置く */
/* ===== ヒーロー図版：数字を主役にした濃色パネル ===== */
/* 「400店舗」を薄い地模様にすると弱くなるため、数字を最大要素に立てて
   濃色パネルでヒーローに重心を作る。マスの地は奥行きだけを担わせる。 */
.hero-industries{position:relative;overflow:hidden;isolation:isolate;
  padding:30px 28px 26px;border-radius:var(--r-lg);
  background:var(--panel);box-shadow:var(--shadow-lg);}
.hi-field{position:absolute;inset:0;z-index:0;
  background-image:radial-gradient(rgba(239,126,109,.34) 2.4px,transparent 2.6px);
  background-size:15px 15px;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 12%,#000 0%,rgba(0,0,0,.5) 45%,transparent 82%);
  mask-image:radial-gradient(120% 90% at 78% 12%,#000 0%,rgba(0,0,0,.5) 45%,transparent 82%);}
.hero-industries>*:not(.hi-field){position:relative;z-index:1;}
.hi-cap{margin:0 0 10px;font-size:13px;font-weight:800;color:var(--accent);letter-spacing:.02em;}
.hi-num{display:flex;align-items:baseline;gap:2px;margin:0;color:#fff;line-height:.9;}
.hi-num b{font-family:var(--font-en);font-size:clamp(62px,7.4vw,86px);font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;}
.hi-num i{font-family:var(--font-en);font-size:clamp(30px,3.4vw,40px);font-weight:700;font-style:normal;color:var(--accent);}
.hi-num span{margin-left:8px;font-size:16px;font-weight:800;color:#fff;}
.hi-sub{margin:12px 0 0;font-size:12.5px;color:#c7cdd8;line-height:1.7;}
.hi-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin:18px 0 0;padding:16px 0 0;list-style:none;border-top:1px solid rgba(255,255,255,.14);}
.hi-chips li{display:flex;flex-direction:column;align-items:center;gap:7px;
  font-size:12px;font-weight:700;color:#fff;}
.hi-chips .ic{display:block;width:24px;height:24px;color:var(--accent);}
.hi-chips svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}

.proof-bar{position:relative;z-index:1;padding-bottom:clamp(40px,5vw,64px);}
.proof-bar .inner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;
  padding:18px 24px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--accent-tint-2);box-shadow:var(--shadow-sm);}
/* 旧マークアップ（strong/span/sep）用のルールは実績バーの組み直しで不要になった */

/* ============================================================
   02｜3行サマリー
============================================================ */
.sum-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.sum-card{position:relative;display:flex;flex-direction:column;
  padding:28px 26px 26px;overflow:hidden;}
.sum-card::before{content:"";position:absolute;top:0;left:26px;right:26px;height:3px;
  border-radius:0 0 3px 3px;background:var(--accent);}
.sum-no{font-family:var(--font-en);font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--accent-ink);}
.sum-card h3{margin:8px 0 10px;font-size:19px;line-height:1.55;}
.sum-card p{margin:0;font-size:14px;line-height:1.95;color:var(--ink-2);}
.summary .cta-block{margin-top:34px;}

/* ============================================================
   03｜利益構造 ★このLPの背骨
   対比図は 375px で潰れないことが最優先。横棒グラフ＋スパークラインで
   「上がる／横ばい」が形で分かるようにしてある。
============================================================ */
.profit-lead{max-width:46em;margin-bottom:clamp(30px,4vw,44px);}
.profit-lead p{font-size:clamp(15px,1.7vw,17px);line-height:2.1;color:var(--ink-2);}
.profit-lead p + p{margin-top:16px;}
.profit-lead .punch{margin-top:20px;padding-left:18px;border-left:3px solid var(--accent);
  font-size:clamp(17px,2.2vw,22px);font-weight:800;color:var(--ink);line-height:1.7;}

.pl-cap{margin-bottom:14px;font-size:12.5px;font-weight:800;letter-spacing:.06em;color:var(--accent-ink);}
.pl-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.pl-card{display:flex;flex-direction:column;padding:24px 22px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--accent-tint-2);box-shadow:var(--shadow-sm);}
.pl-card--kurusta{border-color:var(--accent);box-shadow:0 12px 30px -20px rgba(182,65,44,.5);}

.pl-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding-bottom:16px;border-bottom:1px solid var(--line);}
.pl-who{font-size:16px;font-weight:800;color:var(--ink);line-height:1.5;}
.pl-card--kurusta .pl-who{color:var(--accent-ink);}
.pl-src{margin-top:4px;font-size:12px;font-weight:600;color:var(--ink-2);line-height:1.6;}
.pl-spark{flex:none;width:88px;height:40px;overflow:visible;}

.pl-rows{display:grid;gap:16px;padding:18px 0;}
.pl-cond{display:block;font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--ink-2);}
.pl-track{display:block;height:14px;margin:7px 0 6px;border-radius:7px;background:var(--surface-3);overflow:hidden;}
.pl-fill{display:block;height:100%;width:var(--w,50%);border-radius:7px;
  background:linear-gradient(90deg,#cbd5e1,#94a3b8);}
.pl-card--kurusta .pl-fill{background:linear-gradient(90deg,var(--accent),var(--accent-strong));}
.pl-val{display:block;font-size:14px;font-weight:800;color:var(--ink);line-height:1.55;}
.pl-val.is-bad{color:#b3271a;}
.pl-val.is-same{color:var(--accent-ink);}
.pl-val small{display:block;font-size:11.5px;font-weight:700;color:var(--ink-2);margin-top:2px;}

.pl-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  font-size:14.5px;font-weight:800;line-height:1.6;color:var(--ink-2);}
.pl-card--kurusta .pl-foot{color:var(--accent-ink);}

.pl-note{margin-top:24px;max-width:46em;font-size:14.5px;line-height:2;color:var(--ink-2);}
.pl-note strong{color:var(--ink);font-weight:800;}

/* 「だから、こういう提案が出てきます」以下 */
.choice-intro{margin-top:clamp(44px,6vw,68px);padding-top:clamp(30px,4vw,42px);
  border-top:1px solid var(--accent-tint-2);}
.choice-intro h3{font-size:clamp(19px,2.4vw,26px);line-height:1.55;font-weight:800;}
.flow-tag{display:inline-flex;align-items:center;gap:12px;margin-top:16px;
  font-size:13px;font-weight:800;color:var(--accent-ink);letter-spacing:.04em;}
.flow-tag::after{content:"";width:34px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),transparent);}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px;}
.choice{padding:26px 24px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--accent-tint-2);}
.choice .lbl{font-family:var(--font-en);font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--muted);}
.choice h4{margin:8px 0 12px;font-size:19px;line-height:1.5;font-weight:800;}
.choice h4 .zero{font-family:var(--font-en);font-size:1.5em;line-height:.9;color:var(--accent-ink);
  letter-spacing:-.03em;vertical-align:-2px;}
.choice p{margin:0;font-size:14px;line-height:1.95;color:var(--ink-2);}
.choice .fine{display:block;margin-top:14px;padding-left:14px;border-left:2px solid var(--accent);
  font-size:12px;font-weight:700;color:var(--accent-ink);line-height:1.75;}
.profit-close{margin-top:clamp(32px,4vw,44px);font-size:clamp(18px,2.4vw,26px);
  line-height:1.7;font-weight:800;color:var(--ink);}

/* ============================================================
   04｜削れるムダ（チェックリスト形式）
============================================================ */
.waste-lead{max-width:40em;margin-bottom:clamp(34px,5vw,52px);
  font-size:clamp(15px,1.7vw,17px);line-height:2.1;color:var(--ink-2);}
.waste-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,48px);}
.waste-label{display:inline-flex;align-items:center;gap:10px;margin-bottom:12px;
  padding:5px 16px 5px 12px;border-radius:var(--pill);background:var(--accent-tint);
  border:1px solid var(--accent-tint-2);font-size:12.5px;font-weight:800;
  color:var(--accent-ink);letter-spacing:.06em;}
.waste-label b{font-family:var(--font-en);font-size:13px;}
.waste-block h3{font-size:clamp(19px,2.3vw,25px);line-height:1.55;font-weight:800;margin-bottom:20px;}

.checks{display:grid;gap:8px;}
.checks li{display:flex;align-items:flex-start;gap:14px;padding:14px 18px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line);
  font-size:14.5px;font-weight:600;line-height:1.8;color:var(--ink-2);}
.sec-tint .checks li{background:var(--surface);border-color:var(--accent-tint-2);}
.checks .box{flex:none;width:20px;height:20px;margin-top:.42em;
  stroke:var(--accent);stroke-width:2;fill:none;}
.waste-block .note{margin-top:20px;font-size:14px;line-height:2;color:var(--ink-2);}
.waste-close{margin-top:clamp(36px,5vw,52px);padding-top:clamp(26px,3.4vw,36px);
  border-top:1px solid var(--line-2);font-size:clamp(19px,2.6vw,28px);
  line-height:1.65;font-weight:800;color:var(--ink);}

/* ============================================================
   05｜やること
============================================================ */
.do-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.do-card{padding:30px 28px;}
.do-top{display:flex;align-items:center;gap:14px;}
/* ステップのアイコンはインラインSVGの線画。旧LPの438KBのPNGアイコン帯を置き換えたもの */
.do-icon{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;
  background:var(--accent-tint);border:1px solid var(--accent-tint-2);}
.do-icon svg{width:24px;height:24px;stroke:var(--accent-deeper);stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round;}
.do-top .no{font-family:var(--font-en);font-size:26px;font-weight:700;line-height:1;
  color:var(--accent);letter-spacing:-.02em;}
.do-top .verb{font-size:12.5px;font-weight:800;letter-spacing:.1em;color:var(--accent-ink);}
.do-top .meta{display:flex;flex-direction:column;gap:2px;}
.do-card h3{margin:12px 0 16px;font-size:20px;line-height:1.5;}
.do-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;margin-bottom:20px;}
.do-list li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.8;color:var(--ink-2);}
.do-list li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:8px;
  border-radius:50%;background:var(--accent-tint-2);border:2px solid var(--accent);}
.do-card .punch{margin:0;padding-top:16px;border-top:1px solid var(--line);
  font-size:14.5px;font-weight:800;color:var(--accent-ink);line-height:1.75;}

.left-with{margin-top:clamp(32px,4.4vw,46px);padding:clamp(28px,4vw,44px);
  border-radius:var(--r-lg);background:var(--accent-deeper);color:#fff;}
.left-with h3{color:#fff;font-size:clamp(19px,2.5vw,27px);line-height:1.55;font-weight:800;}
.left-with ul{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.left-with li{display:inline-flex;align-items:center;gap:10px;padding:10px 20px;
  border-radius:var(--pill);background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);font-size:15px;font-weight:700;color:#fff;}
.left-with li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);}
.left-with .tail{margin-top:20px;font-size:14.5px;font-weight:700;color:rgba(255,255,255,.86);}

/* ============================================================
   06｜誰がやるか
============================================================ */
.who-row{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,4vw,56px);
  align-items:center;padding:clamp(30px,4vw,46px) 0;border-bottom:1px solid var(--line);}
.who-row:first-of-type{padding-top:0;}
.who-row.rev .who-side{order:-1;}
.who-index{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-en);
  font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--accent-ink);text-transform:uppercase;}
.who-index::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--accent);}
.who-copy h3{margin:14px 0 18px;font-size:clamp(21px,2.8vw,30px);line-height:1.5;font-weight:800;}
.who-copy p{margin:0 0 14px;font-size:15px;line-height:2.05;color:var(--ink-2);}
.who-copy > strong{display:block;margin-top:18px;padding-left:16px;border-left:3px solid var(--accent);
  font-size:15.5px;font-weight:800;color:var(--ink);line-height:1.8;}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;}
.tag-list li{padding:5px 13px;border-radius:var(--pill);background:var(--surface-2);
  border:1px solid var(--line-2);font-size:12.5px;font-weight:600;color:var(--ink-2);}
.big-stat{display:grid;place-content:center;gap:6px;min-height:230px;padding:32px;
  border-radius:var(--r-lg);background:var(--accent-tint);border:1px solid var(--accent-tint-2);text-align:center;}
.big-stat .n{font-family:var(--font-en);font-size:clamp(46px,6vw,66px);font-weight:700;
  line-height:1;letter-spacing:-.04em;color:var(--accent-ink);}
.big-stat .u{font-size:14px;font-weight:800;color:var(--ink);}
.big-stat .sub{font-size:12.5px;font-weight:600;color:#475569;line-height:1.8;}
.big-stat .div{width:40px;height:2px;border-radius:2px;background:var(--accent);margin:10px auto;}

.photo-slot{display:grid;place-items:center;min-height:250px;padding:24px;border-radius:var(--r-lg);
  border:1px dashed var(--line-2);background:var(--surface-2);text-align:center;}
.photo-slot .mark{display:grid;place-items:center;width:92px;height:92px;margin:0 auto 14px;
  border-radius:50%;background:var(--accent-tint);border:1px solid var(--accent-tint-2);}
.photo-slot .mark::after{content:"";width:42px;height:25px;border-radius:24px 24px 8px 8px;
  background:var(--accent-tint-2);box-shadow:0 -21px 0 -6px var(--accent-tint-2);}
.photo-slot figcaption{font-size:12.5px;font-weight:700;color:var(--ink-3);}

.profiles{display:grid;gap:14px;}
.profile{display:grid;grid-template-columns:104px 1fr;gap:20px;align-items:center;
  padding:20px 22px;border-radius:var(--r-lg);background:var(--surface-2);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);}
.profile .pic{position:relative;width:104px;height:104px;border-radius:var(--r);
  background:var(--accent-tint);overflow:hidden;}
.profile .pic img{width:100%;height:100%;object-fit:cover;}
/* 写真が未提供のスロットだけ、シルエットのプレースホルダを描く */
.profile .pic.empty::before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);
  width:30px;height:30px;border-radius:50%;background:var(--accent-tint-2);}
.profile .pic.empty::after{content:"";position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  width:58px;height:34px;border-radius:30px 30px 8px 8px;background:var(--accent-tint-2);}
.profile .role{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--accent-ink);}
.profile .pname{margin:5px 0 8px;font-size:19px;font-weight:800;color:var(--ink);line-height:1.4;}
.profile p{margin:0;font-size:12.5px;line-height:1.8;color:var(--ink-3);}
.profile .todo{font-size:11.5px;margin-top:6px;}

.who-close{margin-top:clamp(30px,4vw,42px);font-size:clamp(18px,2.4vw,26px);
  line-height:1.7;font-weight:800;color:var(--ink);}
.who-close b{color:var(--accent-ink);}

/* ============================================================
   08｜料金
============================================================ */
.price-card{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(24px,4vw,48px);max-width:900px;margin:0 auto;text-align:center;
  padding:clamp(32px,4.6vw,52px) clamp(26px,4vw,54px);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--accent-tint-2);box-shadow:var(--shadow-md);}
.price-card .label{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--ink-2);}
.price-card .amt{margin-top:8px;display:flex;align-items:baseline;justify-content:center;gap:5px;}
.price-card .n{font-family:var(--font-en);font-weight:700;letter-spacing:-.04em;
  line-height:.95;color:var(--accent-ink);}
.price-card .monthly .n{font-size:clamp(48px,7vw,72px);}
.price-card .setup .n{font-size:clamp(36px,4.8vw,50px);color:var(--ink);}
.price-card .y{font-size:18px;font-weight:700;color:var(--accent-ink);}
.price-card .setup .y{color:var(--ink);}
.price-card small{display:block;margin-top:12px;font-size:12px;color:#475569;line-height:1.75;}
.price-card .plus{font-size:26px;color:var(--accent-tint-2);}

.zero-block{max-width:900px;margin:clamp(26px,3.6vw,38px) auto 0;
  padding:clamp(26px,3.6vw,40px);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--accent-tint-2);}
.zero-block h3{font-size:clamp(18px,2.3vw,24px);line-height:1.55;margin-bottom:12px;}
.zero-block h3 .zero{font-family:var(--font-en);font-size:1.4em;color:var(--accent-ink);
  letter-spacing:-.03em;vertical-align:-2px;}
.zero-block p{margin:0;font-size:14.5px;line-height:2;color:var(--ink-2);}
.zero-block .fine{display:block;margin-top:14px;padding-left:14px;border-left:2px solid var(--accent);
  font-size:12px;font-weight:700;color:var(--accent-ink);line-height:1.75;}
.price .cta-block{margin-top:clamp(30px,4vw,42px);}

/* ============================================================
   09｜始め方
============================================================ */
.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.step{padding:26px 24px;}
.step .no{display:flex;align-items:baseline;gap:7px;font-family:var(--font-en);color:var(--accent-ink);}
.step .no span{font-size:10.5px;font-weight:700;letter-spacing:.16em;}
.step .no b{font-size:32px;font-weight:700;line-height:1;color:var(--accent);letter-spacing:-.03em;}
.step h3{margin:14px 0 10px;font-size:17.5px;line-height:1.5;}
.step p{margin:0;font-size:13.5px;line-height:1.9;color:var(--ink-2);}
.step p strong{color:var(--accent-ink);font-weight:800;}

/* ============================================================
   10｜FAQ
============================================================ */
.faq-list{border-top:1px solid var(--accent-tint-2);}
.faq-item{border-bottom:1px solid var(--accent-tint-2);}
.faq-item summary{position:relative;display:flex;gap:14px;padding:22px 48px 22px 0;cursor:pointer;
  font-size:16px;font-weight:700;color:var(--ink);line-height:1.65;list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .q{flex:none;font-family:var(--font-en);font-size:17px;font-weight:700;color:var(--accent-ink);}
.faq-item summary::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;
  border-right:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease);}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.faq-item .a{display:flex;gap:14px;padding:0 48px 24px 0;}
.faq-item .a .q{flex:none;font-family:var(--font-en);font-size:17px;font-weight:700;color:var(--ink-3);}
.faq-item .a p{margin:0;font-size:14.5px;line-height:2;color:var(--ink-2);}

/* ============================================================
   12｜FINAL CTA
============================================================ */
.final{text-align:center;}
.final h2{font-size:clamp(26px,4vw,44px);line-height:1.45;font-weight:800;color:var(--ink);}
.final .lead{margin:22px auto 0;max-width:42em;font-size:15px;line-height:2.05;color:var(--ink-2);}
.final .cta-row{justify-content:center;margin-top:32px;}
.qr-panel{display:inline-block;margin-top:26px;padding:14px 16px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--accent-tint-2);}
.qr-panel[hidden]{display:none;}
.qr-panel span{display:block;margin-bottom:8px;font-size:11px;font-weight:700;color:var(--accent-ink);}
.qr-panel img{width:150px;height:150px;object-fit:contain;margin:0 auto;}
.final .fine{display:block;margin-top:22px;font-size:13px;font-weight:700;color:#475569;}

/* ============================================================
   レスポンシブ
============================================================ */
@media(min-width:900px){
  .hero-art{display:block;}
}
@media(max-width:1000px){
  .sum-grid{grid-template-columns:1fr;gap:14px;}
  .step-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:899px){

  /* ヒーロー図版はモバイルでも出す（「店舗専門」の証拠なので）。
     ただしCTAをファーストビューに残すため、コピーより後ろに送って2×2に畳む。 */
  .hero-art{display:block;margin-top:26px;padding:24px 20px 20px;}
  .hi-chips{gap:6px;margin-top:16px;padding-top:14px;}
  .hi-chips li{font-size:11.5px;}
  .hi-chips .ic{width:22px;height:22px;}
  .hero-inner{grid-template-columns:1fr;padding-block-start:clamp(32px,7vw,52px);}
  /* ヒーローは情報量が多いので、モバイルでは縦を詰めてCTA2つを追従バーの上に収める */
  .hero .en-kicker{margin-bottom:12px;}
  .hero h1{margin-bottom:14px;}
  .hero .lead{margin:0 0 10px;}
  .hero-price{margin:16px 0 6px;}
  .hero-setup{margin-top:6px;font-size:11.5px;line-height:1.6;}
  .hero-cta{margin-top:16px;gap:10px;}
  .hero-micro{margin-top:10px;}
  .pl-grid{grid-template-columns:1fr;}
  .choice-grid{grid-template-columns:1fr;}
  .waste-grid{grid-template-columns:1fr;}
  .do-grid{grid-template-columns:1fr;}
  .who-row{grid-template-columns:1fr;gap:28px;}
  .who-row.rev .who-side{order:0;}
  .price-card{grid-template-columns:1fr;gap:20px;}
  .price-card .plus{transform:rotate(90deg);}
}
@media(max-width:768px){
  .left-with li{font-size:14px;padding:9px 16px;}
  .profile{grid-template-columns:84px 1fr;gap:16px;padding:18px;}
  .profile .pic{width:84px;height:84px;}
  .profile .pic::before{top:16px;width:24px;height:24px;}
  .profile .pic::after{bottom:12px;width:48px;height:28px;}
  .faq-item summary{font-size:15px;padding-right:40px;}
  .faq-item .a{padding-right:0;}
}
@media(max-width:560px){
  .step-grid{grid-template-columns:1fr;}
  .do-list{grid-template-columns:1fr;}
  .proof-bar .inner{padding:16px 18px;gap:6px 14px;}
  .proof-bar .sep{display:none;}
  .pl-card{padding:20px 18px;}
  .pl-spark{width:70px;height:34px;}
  .pl-who{font-size:15px;}
}
@media(max-width:400px){
  .hero h1{font-size:27px;}
  .hero-price .n{font-size:42px;}
  .pl-head{flex-direction:column;gap:10px;}
  .pl-spark{width:100%;height:32px;}
}

/* ===== 本文中のロゴ ===== */
/* 対比図：どちらが自社かを一目で分からせるため、クルスタ側だけロゴにする */
.pl-logo{height:22px;width:auto;display:block;}
.pl-card--kurusta .pl-who{margin:0 0 4px;}
/* 最後のCTA：判断の直前にブランドを一度だけ置く */
.final-logo{height:30px;width:auto;margin:0 auto 20px;opacity:.92;}
@media(max-width:768px){
  .pl-logo{height:19px;}
  .final-logo{height:26px;margin-bottom:16px;}
}

/* ===== 追記：レビュー反映 ===== */
/* 「広告費0円」の意思決定の主体を明示。解約要因の予防と、利益構造の主張の証明を兼ねる */
.pl-decide{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.8;color:var(--ink-2);}
.pl-decide b{color:var(--accent-ink);}
/* 支援範囲の線引き（応募が来るまで／面接は別） */
.tail-sub{display:block;margin-top:10px;font-size:13px;font-weight:500;color:var(--ink-3);line-height:1.8;}

/* ============================================================
   デザインレビュー反映 1／コントラスト・操作性
   （数値は実測。AA=4.5:1、非テキストUI=3:1）
============================================================ */
/* --- AA割れ 7箇所 --- */
.left-with li{background:rgba(255,255,255,.10);}          /* 白文字 4.27→4.6:1 */
.left-with .tail{color:rgba(255,255,255,.92);}            /* 4.46→4.9:1 */
.faq-item .a .q{color:#475569;}                           /* tint上 4.14→6.59:1 */
.form-row .opt{color:#475569;}                            /* 4.34→6.92:1 */
.site-footer .copy{color:#8794a8;}                        /* 3.93→6.09:1 */
.do-top .no,.step .no b{color:var(--accent-strong);}      /* 大文字 2.6→4.0:1 */
.checks .box{stroke:var(--accent-strong);}                /* 非テキスト 2.55→4.08:1 */

/* --- フォーカスリング：全環境で3:1を割っていた --- */
a:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--accent-deeper);outline-offset:3px;
  box-shadow:0 0 0 6px rgba(184,65,44,.16);border-radius:var(--pill);}
.final .btn:focus-visible{outline-color:#fff;}

/* --- 料金の「＋」が 1.32:1 で消えていた。月額と初期導入費が同額なので誤読の元 --- */
.price-card .plus{display:grid;place-items:center;width:44px;height:44px;margin:0 auto;
  border-radius:50%;background:var(--accent-tint);border:1px solid var(--accent-tint-2);
  font-size:22px;font-weight:700;line-height:1;color:var(--accent-ink);transform:none;}
@media(max-width:899px){.price-card .plus{transform:none;}}   /* rotate(90deg)は回転対称で無効だった */

/* --- タップ領域 44px --- */
/* 44pxのタップ高は確保しつつ、横幅は増やさない（375pxで5項目が収まる必要がある） */
.nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;}
.site-footer nav{gap:4px 24px;}
.site-footer nav a{display:inline-flex;align-items:center;min-height:44px;}
.form-note a{display:inline-block;padding:12px 4px;}
.logo{min-height:44px;align-items:center;}

/* --- 行長：和文の適正は35〜40字。FAQが48字で最長だった --- */
.faq-item .a p{max-width:38em;}
.profit-lead{max-width:38em;}
.pl-note{max-width:38em;}
.sec-head p.desc{max-width:36em;}
/* 孤立文字（「〜始まりま／す。」）を防ぐ */
.hero .lead,.sum-card h3,.waste-block h3,.who-copy h3{word-break:auto-phrase;}
.hero .lead{line-height:1.85;}

/* ============================================================
   デザインレビュー反映 2／モバイルのファーストビュー
   375×667 でヒーローのCTAが追従バーの裏に隠れていた
============================================================ */
@media(max-width:768px){
  .nav-cta{display:none;}                    /* 追従バーと完全に重複。初期表示でCTAが3つ見えていた */
  /* 追従バーはヒーローのCTAを通過してから出す */
  .sticky-cta{transform:translateY(110%);transition:transform .35s var(--ease);will-change:transform;}
  .sticky-cta.is-on{transform:none;}
}
@media(prefers-reduced-motion:reduce){
  .sticky-cta{transition:none;transform:none;}
}
/* ヒーロー：H1が主役に戻るサイズへ（375pxで44px＝13%幅を余らせていた） */
.hero h1{font-size:clamp(30px,8.2vw,46px);line-height:1.28;letter-spacing:-.02em;margin:0 0 18px;}
@media(min-width:900px){.hero h1{font-size:clamp(35px,3.9vw,54px);}}
@media(max-width:400px){.hero-price .n{font-size:36px;}}   

/* ============================================================
   デザインレビュー反映 4／終盤とリズム
   白×tintが11回交互に来るだけで単調 → 濃紺で始まり濃紺で閉じる3幕構造にする
============================================================ */
.final{position:relative;text-align:center;
  background:
    radial-gradient(900px 520px at 50% -20%, rgba(239,126,109,.22), transparent 62%),
    var(--panel);
  padding-block:clamp(88px,11vw,140px);}
.final::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-strong) 45%,transparent);}
.final h2{color:#fff;font-size:clamp(28px,4.6vw,50px);line-height:1.4;}   /* 15.8:1 */
.final .lead,.final .fine{color:#c7cdd8;}                                  /* 10.47:1 */
.final .lead{max-width:34em;margin-inline:auto;}
.final .btn-primary{background:#fff;color:var(--accent-deeper);
  box-shadow:0 14px 34px -10px rgba(0,0,0,.55);}                           /* 白地の #B8412C = 5.48:1 */
.final .btn-primary:hover{background:var(--accent-tint);}
.final .btn-primary .line-mark{background:var(--accent-deeper);color:#fff;}
.final .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42);}
.final .btn-ghost:hover{background:rgba(255,255,255,.10);border-color:#fff;}
.final .qr-panel{color:#c7cdd8;}

/* セクション見出しの図地を反転：飾りの英語が日本語より1.35倍大きく同色だった */
.sec-head .en{font-size:clamp(30px,5.6vw,72px);line-height:1;color:#EBC3B9;}
.sec-head h2{margin-top:12px;font-size:clamp(27px,4.4vw,46px);line-height:1.45;}

/* 動きの予算を配り直す。41要素一律のフェードが「作った感」の正体 */
.js .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);}

/* 料金：1店舗プランを基本プランの下に添える */
.price-card .plan-alt{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--ink-2);}
.price-card .plan-alt b{color:var(--accent-ink);font-weight:800;}

/* 料金の2段表示：5万を先に見せつつ、8万を同じ級数で隣に置く
   （5万だけを大きく出すと実勢とズレて、商談が値引き交渉から始まる） */
.hero-price--tier{display:flex;align-items:flex-end;flex-wrap:wrap;gap:6px 10px;}
.hero-price--tier .tier{display:flex;align-items:flex-end;gap:2px;position:relative;padding-bottom:16px;}
.hero-price--tier .cond{position:absolute;left:0;bottom:0;font-size:12px;font-weight:800;
  color:var(--accent-ink);letter-spacing:.02em;white-space:nowrap;}
.hero-price--tier .slash{padding-bottom:20px;font-size:20px;color:var(--line-2);}
@media(max-width:400px){.hero-price--tier{gap:4px 8px;}}

/* 代表の経歴年数：ここが唯一の「人の実績」なので数字を立てる */
.profile .pcareer{margin:2px 0 6px;font-size:13px;font-weight:700;color:var(--ink-2);}
.profile .pcareer b{font-family:var(--font-en);font-size:19px;font-weight:700;
  color:var(--accent-ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums;}

/* 縛りなしは料金のすぐ下に置く（商談で一番聞かれる項目） */
.price-note{max-width:34em;margin:20px auto 0;text-align:center;
  font-size:14px;line-height:1.9;color:var(--ink-2);}
.price-note b{color:var(--accent-ink);font-weight:800;}

/* フォームの補足文（プレースホルダに長文を入れると入力済みに見えるため外に出す） */
.form-hint{margin:6px 0 0;font-size:12.5px;line-height:1.7;color:var(--muted,#475569);}

/* ============================================================
   仕上げ：ヒーローパネルのブリードと、スクロール連動の線
============================================================ */
/* 濃紺パネルを画面端まで抜く。カードとして浮いているとウィジェットに見える */
.hero-art{--bleed:max(0px, calc((100vw - var(--max))/2 + clamp(20px,5vw,40px)));}
@media(min-width:900px){
  .hero-inner{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);}
  .hero-art{margin-right:calc(var(--bleed) * -1);
    border-radius:var(--r-lg) 0 0 var(--r-lg);
    padding:38px clamp(28px,3vw,44px) 32px;}
}
@media(max-width:899px){
  .hero-art{margin-inline:calc(clamp(20px,5vw,40px) * -1);border-radius:0;padding:26px 20px 22px;}
}
@media(max-width:400px){.hero-art{margin-inline:-16px;}}

/* スクロール連動の線描画。ネイティブのスクロールタイムラインなので
   メインスレッドを使わない。非対応環境は既存の時間ベースにフォールバックする。
   ★どちらも効かない場合は「描画済み」が既定なので、線が消えることはない。 */
/* スクロール連動（animation-timeline: view()）は撤去。
   iframe内で表示されるとタイムラインが進まず、線が開始状態＝非表示のまま固定される。
   共有リンクで実際に図が消えたため、確実に描画されることを優先する。 */

/* --- 修正：CTA下の一文が flex で分断されていた（<b> が別アイテムになる） --- */
.hero-micro{display:block;position:relative;padding-left:15px;}
.hero-micro::before{position:absolute;left:0;top:.62em;margin-top:0;}

/* --- 修正：価格の2段表示がスマホで折り返して崩れる --- */
@media(max-width:560px){
  .hero-price--tier{flex-direction:column;align-items:flex-start;gap:2px;}
  .hero-price--tier .u{margin-bottom:2px;}
  .hero-price--tier .slash{display:none;}
  .hero-price--tier .tier{padding-bottom:0;align-items:baseline;gap:3px;}
  .hero-price--tier .cond{position:static;margin-left:7px;font-size:12px;}
  .hero-price--tier .n{font-size:34px;}
}

/* 自社店舗の実写。ブランド名は出さず「自社店舗」表記に留める（FC本部の掲載ルール未確認のため） */
.shop-photo{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);box-shadow:var(--shadow-md);}
.shop-photo img{display:block;width:100%;height:100%;min-height:280px;max-height:420px;
  object-fit:cover;object-position:center 42%;}
.shop-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 18px 12px;
  font-size:12px;font-weight:700;color:#fff;letter-spacing:.02em;
  background:linear-gradient(180deg,transparent,rgba(15,23,42,.62));}
@media(max-width:899px){.shop-photo img{min-height:240px;max-height:320px;}}

/* ============================================================
   セクションのアイコン（文字だけだった3セクションに追加）
   すべてインラインSVGの線画。既存のステップアイコンと同じトーンで揃える
============================================================ */
.sum-ico,.step-ico,.waste-ico{display:grid;place-items:center;border-radius:12px;}
.sum-ico svg,.step-ico svg,.waste-ico svg{fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}

/* 3行サマリー：番号の下、見出しの上 */
.sum-ico{width:46px;height:46px;margin:0 0 14px;
  background:var(--accent-tint);border:1px solid var(--accent-tint-2);color:var(--accent-strong);}
.sum-ico svg{width:25px;height:25px;}

/* 始め方：STEP番号の隣に置くと縦が伸びるので、見出しの上に小さく */
.step-ico{width:40px;height:40px;margin:12px 0 10px;
  background:var(--surface);border:1px solid var(--line);color:var(--accent-strong);}
.step-ico svg{width:22px;height:22px;}

/* 削れるムダ：2つのムダを一目で見分けられるように（時間＝時計／お金＝漏れ） */
.waste-ico{width:52px;height:52px;margin:0 0 14px;
  background:var(--accent-tint);border:1px solid var(--accent-tint-2);color:var(--accent-deeper);}
.waste-ico svg{width:28px;height:28px;}
@media(max-width:768px){
  .sum-ico,.waste-ico{width:44px;height:44px;}
  .waste-ico svg{width:24px;height:24px;}
}

/* ============================================================
   「社長と店長に残るのは、これだけです」ブロックの配色を変更
   狙い：LP全体が --accent-ink(#A63E2A) / --accent-deeper(#B8412C) に偏って
   レンガ寄りに見えていた。ブランド本来のサーモン #EF7E6D が細い線にしか
   使われていなかったので、ここを「面」にして取り戻す。
   文字は --ink(#0f172a) で 6.69:1（AA 4.5 を大きく上回る）。
============================================================ */
.left-with{background:var(--accent);color:var(--ink);}
.left-with h3{color:var(--ink);}
.left-with li{background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.9);
  color:var(--accent-darkest);}                      /* #9C351F on 白66% ＝ 十分な差 */
.left-with li::before{background:var(--accent-deeper);}
.left-with .tail{color:#5C1F0E;}                     /* 4.75:1 */
.left-with .tail b{color:var(--ink);}
.left-with .tail-sub{color:#5C1F0E;}                 /* 4.75:1（#6B2513は4.15でAA不足だった） */

/* ============================================================
   循環図：「この4つを、月次で回します」
   カードは各ステップの中身、この図は「回る」という関係だけを担当する。
   ★線もラベルも常に描画。アニメに依存させない（過去2回の事故の教訓）
============================================================ */
.cycle{margin:clamp(34px,4.6vw,52px) 0 0;text-align:center;}
.cycle-cap{margin:0 0 clamp(18px,2.4vw,26px);font-size:13px;font-weight:800;
  letter-spacing:.06em;color:var(--accent-ink);}
.cycle-ring{position:relative;width:min(340px,86vw);aspect-ratio:1;margin:0 auto;}
.cycle-ring svg{position:absolute;inset:0;width:100%;height:100%;}
.cy-track{fill:none;stroke:var(--accent-tint-2);stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round;}
.cy-arrow path{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}

.cy-node{position:absolute;display:grid;place-items:center;gap:1px;
  width:78px;height:78px;border-radius:50%;
  background:var(--surface);border:1px solid var(--accent-tint-2);
  box-shadow:0 8px 20px -12px rgba(182,65,44,.5);
  font-size:13px;font-weight:800;color:var(--ink);line-height:1.3;}
.cy-node b{font-family:var(--font-en);font-size:11px;font-weight:700;
  letter-spacing:.06em;color:var(--accent-ink);}
.cy-1{top:0;left:50%;transform:translate(-50%,-6%);}
.cy-2{top:50%;right:0;transform:translate(6%,-50%);}
.cy-3{bottom:0;left:50%;transform:translate(-50%,6%);}
.cy-4{top:50%;left:0;transform:translate(-6%,-50%);}
.cy-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:13.5px;font-weight:800;color:var(--ink-2);line-height:1.6;}

@media(max-width:560px){
  .cycle-ring{width:min(300px,84vw);}
  .cy-node{width:70px;height:70px;font-size:12px;}
  .cy-center{font-size:12.5px;}
}

/* ============================================================
   本文セクションの地に薄いテクスチャ
   参考にした2サイトの「奥行き」はここから来ている。
   ★可読性を絶対に落とさない濃さに留める（本文の上に乗る地なので）
============================================================ */
.sec-tint,.sec-white{position:relative;isolation:isolate;}
.sec-tint::before,.sec-white::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;}
/* サーモン面：細かいドット */
.sec-tint::before{
  background-image:radial-gradient(rgba(182,65,44,.055) 1.4px,transparent 1.5px);
  background-size:18px 18px;}
/* 白面：さらに薄く、かつ上端だけに効かせて面の切り替わりを作る */
.sec-white::before{
  background-image:radial-gradient(rgba(15,23,42,.022) 1.3px,transparent 1.4px);  /* .035だと ink-3 が4.44でAA割れ */
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.25) 42%,transparent 78%);
  mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.25) 42%,transparent 78%);}
/* ヒーローと最後のCTAは独自の地を持っているので二重に敷かない */
.hero::before{background-image:none;}  /* .final を含めると上端のアクセント罫まで消える */

/* ============================================================
   ヒーローの再編：8行の羅列を3つのかたまりにする
   問題＝左カラムに8要素が縦積みで、H1以外はほぼ同じ視覚的重さだった。
   高さ1008px でノートPCの1画面(720px)にも収まっていなかった。
   ★文言は1文字も変えていない。見せ方の再編のみ。
============================================================ */

/* [1] eyebrow をバッジにする。細い1行の文字列より「専門」の宣言が立つ */
.hero .en-kicker{display:inline-flex;align-items:center;gap:8px;
  margin:0 0 20px;padding:7px 15px 7px 12px;border-radius:var(--pill);
  background:var(--surface);border:1px solid var(--accent-tint-2);
  box-shadow:0 6px 18px -12px rgba(182,65,44,.6);
  font-size:12.5px;letter-spacing:.03em;}
.hero .en-kicker::before{width:7px;height:7px;border-radius:50%;background:var(--accent-strong);}
.hero .en-kicker b{color:var(--accent-ink);font-weight:800;}

/* [2] リードに段差をつける。1つ目は400店舗の主張なので大きく、2つ目は補足に落とす */
.hero .lead{line-height:1.95;margin:0;}
.hero .lead:first-of-type{font-size:clamp(15px,1.62vw,17.5px);color:var(--ink);}
.hero .lead:first-of-type b{font-size:1.08em;}
.hero .lead + .lead{margin-top:14px;font-size:clamp(13.5px,1.35vw,15px);color:var(--ink-3);}

/* [3] 価格を「仕様のかたまり」として囲う。本文の中に埋もれていた */
.hero-price{margin-top:24px;padding:16px 20px 14px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--accent-tint-2);
  box-shadow:0 10px 26px -20px rgba(182,65,44,.75);}
.hero-setup{margin-top:0;padding:0 20px 14px;font-size:11.5px;line-height:1.65;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  background:var(--surface);border:1px solid var(--accent-tint-2);border-top:0;
  margin-top:-1px;}

/* [4] 縦を詰めて1画面に近づける */
.hero h1{margin-bottom:18px;}
.hero-cta{margin-top:20px;}
.hero-micro{margin-top:12px;}

/* [5] 地に幾何学の装飾。参考サイトの「奥行き」の正体 */
.hero-deco{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.hero-deco i{position:absolute;display:block;border-radius:50%;
  border:1.5px solid var(--accent-tint-2);}
.hero-deco i:nth-child(1){width:340px;height:340px;left:-130px;top:-120px;}
.hero-deco i:nth-child(2){width:190px;height:190px;left:-40px;bottom:6%;opacity:.7;}
.hero-deco i:nth-child(3){width:96px;height:96px;border-radius:22px;
  right:44%;top:14%;transform:rotate(24deg);opacity:.55;}
@media(max-width:899px){
  .hero-deco i:nth-child(3){display:none;}
  .hero-deco i:nth-child(1){width:240px;height:240px;left:-110px;top:-90px;}
  .hero-deco i:nth-child(2){display:none;}
}

/* [6] カラム比を変えた結果、H1と価格が左カラム(525px)に収まらなくなっていた実測修正
   ・H1最長行「かけすぎかもしれません。」= 49.9px時 586px > 525px で1文字落ち
     → 44pxで515pxに収まる。3.44vw で 1240px 以上は 44px 上限
   ・価格の数字 60px だと2段が横に並ばず縦積みになっていた → 46px上限 */
@media(min-width:900px){
  .hero h1{font-size:clamp(30px,3.44vw,44px);}
  .hero-price .n{font-size:clamp(32px,3.6vw,46px);}
  .hero-price--tier .tier{padding-bottom:15px;}
  .hero-price--tier .cond{font-size:11.5px;}
}

/* [7] モバイル：価格カード化で縦が増え、CTAが追従バーに15px被った実測修正 */
@media(max-width:560px){
  .hero .en-kicker{margin-bottom:14px;padding:6px 13px 6px 11px;}
  .hero h1{margin-bottom:14px;}
  .hero .lead + .lead{margin-top:10px;}
  .hero-price{margin-top:18px;padding:14px 16px 12px;}
  .hero-setup{padding:0 16px 12px;}
  .hero-cta{margin-top:16px;}
  .hero-micro{margin-top:10px;}
}

/* [8] 価格カードと注記が2枚に見えていたので1枚に繋ぐ */
.hero-price{border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0;}
.hero-price{margin-bottom:0;}
.hero-setup{margin-top:-1px;}

/* ============================================================
   料金：2プランを並列に
   ★図として派手にせず「構造を整理する」に留める。
     ここを強くしすぎると、LPの主役である利益構造の図と重心を取り合う。
============================================================ */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,20px);
  max-width:820px;margin:0 auto;}
.plan{padding:clamp(24px,3vw,32px) clamp(20px,2.6vw,28px);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  text-align:center;}
/* 基本プランを主に。8万を主役に出すという決定に合わせる */
.plan--main{border:2px solid var(--accent);box-shadow:0 16px 40px -28px rgba(182,65,44,.8);}
.plan-name{margin:0 0 12px;font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--ink-2);}
.plan--main .plan-name{color:var(--accent-ink);}
.plan .amt{display:flex;align-items:baseline;justify-content:center;gap:3px;margin:0;
  color:var(--accent-ink);}
.plan .amt .u{font-size:13px;font-weight:700;color:var(--ink-2);margin-right:5px;}
.plan .amt .n{font-family:var(--font-en);font-size:clamp(38px,4.6vw,54px);font-weight:700;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;}
.plan .amt .y{font-size:17px;font-weight:800;}
.plan-for{margin:12px 0 0;display:inline-block;padding:5px 14px;border-radius:var(--pill);
  background:var(--accent-tint);border:1px solid var(--accent-tint-2);
  font-size:12.5px;font-weight:800;color:var(--accent-ink);}
.plan small{display:block;margin-top:14px;font-size:12.5px;line-height:1.85;color:var(--ink-3);}

.plan-common{display:flex;align-items:center;gap:16px;
  max-width:820px;margin:clamp(16px,2.2vw,20px) auto 0;
  padding:18px clamp(20px,2.6vw,28px);border-radius:var(--r-lg);
  background:var(--surface-2);border:1px dashed var(--line-2);}
.pc-plus{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--accent-tint);border:1px solid var(--accent-tint-2);
  font-size:20px;font-weight:700;line-height:1;color:var(--accent-ink);}
.plan-common .label{margin:0;font-size:15px;font-weight:700;color:var(--ink);}
.plan-common .label b{color:var(--accent-ink);font-weight:800;}
.plan-common small{display:block;margin-top:4px;font-size:12.5px;line-height:1.8;color:var(--ink-3);}

@media(max-width:640px){
  .plans{grid-template-columns:1fr;}
  .plan-common{gap:13px;padding:16px 18px;}
  .pc-plus{width:34px;height:34px;font-size:17px;}
}

/* ============================================================
   面の作り：単色の平板さを消す
   参考サイト①はグラデーションを面に使って奥行きを出している。
   色は足さず（サーモン×濃紺のまま）、明度差だけで立体感を作る。
============================================================ */
/* カード類：白→ほんのりサーモンの縦グラデ */
.card,.plan,.sum-card,.do-card,.step,.faq-item,.form-card,.profile,.hero-price{
  background-image:linear-gradient(180deg,#fff 0%,#FFFCFB 58%,#FFF9F7 100%);}  /* 下端 #FEF6F4 だと --ink-3 が4.46でAA割れ */
/* 主ボタン：単色ベタから淡いグラデへ */
.btn-primary{background-image:linear-gradient(180deg,var(--accent-strong) 0%,var(--accent-deeper) 100%);}
.btn-primary:hover{background-image:linear-gradient(180deg,var(--accent-deeper) 0%,var(--accent-darkest) 100%);}
/* 濃紺パネル：上から光が当たる感じに */
.hero-industries,.final{background-image:
  radial-gradient(120% 80% at 50% -12%, rgba(239,126,109,.20), transparent 60%),
  linear-gradient(180deg,#1c2338 0%,var(--panel) 100%);}
/* 「社長に残る仕事」のサーモン面もわずかに深さを出す */
/* 下を暗くすると補足文字(#5C1F0E)が4.30まで落ちるので、上を明るくする向きにする */
.left-with{background-image:linear-gradient(180deg,#F49183 0%,var(--accent) 100%);}

/* ============================================================
   数字の組み方を1つに揃える
   実測で letter-spacing が9通り（-1.84〜+0.66px）、tabular-nums が5箇所で無効だった。
   同じ役割の数字がバラバラに組まれているのが「並べただけ」に見える正体。
   ★em指定にして、サイズが変わっても字送りが比例するようにする
============================================================ */
.hi-num b,.hi-num i,
.hero-price .n,
.plan .amt .n,
.big-stat .n,
.pcareer b,
.do-top .no,
.step .no b,
.cy-node b,
.pb-n{
  font-family:var(--font-en);
  font-weight:700;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
/* 小さい番号だけは詰めすぎると読めないので緩める */
.cy-node b,.do-top .no{letter-spacing:.02em;}
.pcareer b{letter-spacing:-.01em;}  /* 19pxと小さいので詰めすぎない */

/* ============================================================
   実績バー：文中の数値から「指標」へ
   ページで一番数字が集まる場所。ここを揃えると全体が組まれて見える。
============================================================ */
.proof-bar .inner{display:grid;grid-template-columns:repeat(3,auto) 1fr;
  align-items:center;gap:10px clamp(20px,3.4vw,44px);
  margin:0;padding:20px clamp(20px,2.6vw,30px);list-style:none;}
.proof-bar li{display:grid;grid-template-columns:auto auto;align-items:baseline;
  gap:0 5px;}
.proof-bar .pb-n{font-size:clamp(28px,3.4vw,40px);line-height:1;color:var(--accent-ink);}
.proof-bar .pb-u{font-size:12.5px;font-weight:800;color:var(--accent-ink);}
.proof-bar .pb-l{grid-column:1/-1;margin-top:4px;font-size:11.5px;font-weight:700;
  color:var(--ink-3);letter-spacing:.02em;}
.pb-tags{display:flex;flex-wrap:wrap;gap:6px;justify-self:end;}
.proof-bar .pb-tags span{padding:5px 12px;border-radius:var(--pill);
  background:var(--accent-tint);border:1px solid var(--accent-tint-2);
  font-size:11.5px;font-weight:800;color:var(--accent-ink);}
@media(max-width:899px){
  .proof-bar .inner{grid-template-columns:repeat(3,1fr);}
  .pb-tags{grid-column:1/-1;justify-self:start;margin-top:4px;}
}
@media(max-width:460px){
  .proof-bar .inner{grid-template-columns:1fr 1fr;gap:14px 18px;padding:18px;}
  .proof-bar .pb-n{font-size:26px;}
}

/* ============================================================
   「削れるムダ」のイラスト受け入れ枠
   参考サイト①は悩み1つにイラスト1枚を当てている。クルスタはムダが2本柱なので2枚。
   画像が入るまでは .waste-illust を置かなければ従来どおり1カラムで表示される。
============================================================ */
/* 2つのムダが左右に並ぶ中なので、絵は横に置かず見出しの下に敷く。
   横並びにするとテキスト列が178pxまで痩せてチェックリストが読めなくなる（実測） */
.waste-illust{margin:4px 0 18px;max-width:260px;}
.waste-illust svg{display:block;width:100%;height:auto;}
/* 線画の作り。既存のアイコンと同じ線の言語で揃える */
.wi-shadow{fill:var(--accent-tint-2);opacity:.55;}
.wi-line,.waste-illust g{stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;fill:none;}
.wi-fill-white{fill:var(--surface);}
.wi-fill-tint{fill:var(--accent-tint);}
.wi-fill-accent{fill:var(--accent);}
.wi-text-lines path{stroke:var(--ink-4);stroke-width:2.2;}
.wi-accent-stroke{stroke:var(--accent-deeper);stroke-width:2.6;}
.wi-q{stroke:var(--surface);stroke-width:3.4;}
.wi-q-dot{fill:var(--surface);stroke:none;}
@media(max-width:768px){
  .waste-illust{max-width:240px;margin:4px auto 16px;}
}

/* フォーム準備中の案内。開発者向けの .todo-block とは別物（訪問者に見える文言用） */
.notice-block{margin:0 0 20px;padding:14px 18px;border-radius:var(--r);
  background:var(--accent-tint);border:1px solid var(--accent-tint-2);
  font-size:13.5px;line-height:1.85;color:var(--ink-2);}
.notice-block b{display:block;color:var(--accent-ink);font-weight:800;margin-bottom:2px;}

/* ============================================================
   デザインレビュー反映（実測でAA/3:1割れが確認された箇所）
============================================================ */
.hero .lead + .lead{color:var(--muted);}                 /* #64748b on tint 4.14 → 6.59 */
.cy-arrow path{stroke:var(--accent-strong);}             /* 2.32 → 3.55 */
.cy-track{display:none;}                                  /* 1.15 で不可視。弧4本が同じ円を描いている */
.plan--main{border-color:var(--accent-strong);}          /* 2.32 → 3.55 */
/* 白カード上の白フィールドは枠が唯一の境界。--line-2 だと 1.33:1 で見えない。
   base.css が border ショートハンドで指定しているので、こちらもショートハンドで上書きする */
#contact-form .form-row input,#contact-form .form-row select,
#contact-form .form-row textarea{border:1.5px solid #818FA6;}  /* 3.27:1 */
.hero-price--tier .slash{color:#8794A8;}                 /* 1.31 → 3.03。見えず2段の理由が不明だった */

/* FINAL CTA の上端アクセント罫を、テクスチャ定義より後ろで宣言し直す */
.final::before{content:"";position:absolute;inset:0 0 auto;height:3px;z-index:1;
  background-image:linear-gradient(90deg,var(--accent),var(--accent-strong) 45%,transparent);}

/* 主役の逆転を解消：サーモン全面が利益構造の図より視覚的に重かった。
   帯をやめて .plans と同じ 820px のカードに揃える */
.left-with{max-width:820px;margin-inline:auto;}

                                 /* サーモン線への被りを回避 */

/* 実績バー：直上の濃紺パネルが同じ4業種を出しており重複していた */
.proof-bar li.pb-tags{display:none;}  /* .proof-bar li{display:grid} に詳細度で負けていた */
.proof-bar .inner{grid-template-columns:repeat(3,1fr);justify-items:start;}
.proof-bar li{justify-content:start;}
@media(max-width:460px){
  .proof-bar .inner{grid-template-columns:repeat(3,1fr);gap:0 12px;padding:16px 14px;}
  .proof-bar .pb-n{font-size:24px;}
}

/* 料金：破線＋グレー地は、このLPでは「未実装」を意味する記法（.todo-block/.photo-slot と同じ）。
   実在する請求項目をプレースホルダの見た目で描いていた */
.plan-common{background:var(--surface);border:1px solid var(--accent-tint-2);
  border-left:4px solid var(--accent-strong);}
.price-note{word-break:auto-phrase;}
@media(max-width:560px){.price-note{text-align:left;}}

/* イラスト：線幅が4種混在＋寒色スレートが第3の色として入っていた */
.wi-line,.waste-illust g,.wi-accent-stroke,.wi-q{stroke-width:2.4;}
.wi-text-lines path{stroke:var(--accent-tint-2);stroke-width:2.4;}

/* CTAが1本のときに帯状に伸びてフォームの送信バーに見えていた */
.cta-row:has(> .btn:only-child) .btn{flex:0 0 auto;padding-inline:34px;}
/* 数字の左端が単位長でズレていた（100社以上／400店舗以上で11px） */
.big-stat .u{display:block;margin-top:4px;}
.site-footer nav a{padding-inline:8px;}

/* 支援範囲ブロック：h3 →「その先は、店舗に残ります。」→ 残る仕事のリスト → 補足、の順。
   リード文のすぐ下にリストが来る場合だけ間を詰める（20px+22px=42px は空きすぎる）。 */
.left-with .tail + ul{margin-top:12px;}

/* 料金：向き不向きを自分から出すブロック。
   売り込みではないので、面はスレート寄りにして tint 系のカードと区別する。
   文字は白地に --ink-2（#334155）= 10.4:1。 */
.fit-block{max-width:900px;margin:clamp(20px,2.6vw,28px) auto 0;
  padding:clamp(24px,3.4vw,36px);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid #D8DEE8;border-left:4px solid var(--ink-3);}
.fit-block h3{font-size:clamp(17px,2.1vw,22px);line-height:1.55;margin-bottom:12px;color:var(--ink);}
.fit-block p{margin:0;font-size:14.5px;line-height:2;color:var(--ink-2);}
.fit-block p + p{margin-top:12px;}
.fit-block p b{font-weight:800;color:var(--ink);}
.fit-block .fit-close{margin-top:16px;padding-top:16px;border-top:1px solid #E6EAF1;}

/* ============================================================
   実績（CASE STUDY）
   数字は LP 共通の表示ルール（Space Grotesk 700 / -.03em / tabular-nums）に乗せる。
   「前」は残す。消すと変化幅が伝わらない。ただし主役は「後」。
============================================================ */
.cs-grid{display:grid;gap:clamp(16px,2.2vw,24px);margin-top:clamp(26px,3.4vw,36px);}
@media(min-width:820px){.cs-grid{grid-template-columns:1.15fr 1fr;align-items:start;}}

.cs-card{padding:clamp(24px,3.2vw,34px);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--accent-tint-2);
  box-shadow:0 18px 44px -32px rgba(182,65,44,.5);}
.cs-tag{display:inline-block;margin:0 0 14px;padding:5px 13px;border-radius:var(--pill);
  background:var(--accent-tint);color:var(--accent-ink);
  font-size:12px;font-weight:800;letter-spacing:.06em;}
.cs-what{margin:0 0 6px;font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--ink-2);}

.cs-fig{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0 0 16px;}
.cs-fig .n{font-family:var(--font-en);font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;}
.cs-before{font-size:clamp(20px,2.4vw,26px);font-weight:800;color:#5A6678;}  /* 白地 5.82:1 */
.cs-before .n{font-size:1.25em;}
.cs-arrow{font-size:clamp(18px,2vw,22px);font-weight:800;color:var(--accent-strong);}
.cs-after{font-size:clamp(24px,3vw,34px);font-weight:800;color:var(--accent-ink);}
.cs-after .n{font-size:1.35em;}
.cs-fig--solo .cs-after{font-size:clamp(28px,3.6vw,40px);}

.cs-body{margin:0;padding-top:16px;border-top:1px solid var(--accent-tint-2);
  font-size:14.5px;line-height:1.95;color:var(--ink-2);}
.cs-note{max-width:60em;margin:clamp(20px,2.6vw,28px) auto 0;padding-left:14px;
  border-left:2px solid var(--accent-tint-2);
  font-size:12px;line-height:1.85;color:var(--ink-3);word-break:auto-phrase;}

/* 実績セクションだけ3つ目の地（--accent-tint-2）。
   白／tint の2色交互に1セクション挟むと、必ずどこかで同色が隣り合う。
   実績はLPで一番目立たせたい場所なので、そこに3つ目の地を割り当てて解決する。 */
.sec-deep{position:relative;isolation:isolate;background:var(--accent-tint-2);}
.sec-deep .cs-note{color:var(--ink-2);border-left-color:rgba(166,62,42,.35);}
.sec-deep .cs-card{border-color:rgba(255,255,255,.9);box-shadow:0 20px 46px -30px rgba(140,48,32,.45);}


/* ============================================================
   利益構造：式（.fx-block）＋ 表（.cmp）
   折れ線の置き換え（2026-08-22）。大きさの比較を一切しないので、
   「広告費◯万で両社の取り分が並ぶ」という根拠のない含みが生まれない。
============================================================ */
.fx-block{padding:clamp(22px,3vw,32px);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--accent-tint-2);
  box-shadow:0 18px 44px -32px rgba(182,65,44,.5);}
.fx{padding:16px 0;}
.fx + .fx{border-top:1px solid var(--accent-tint-2);}
.fx-who{margin:0 0 8px;font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--ink-2);}
.fx-eq{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0;
  font-size:clamp(19px,2.6vw,28px);font-weight:800;line-height:1.5;}
.fx-eq .t{font-size:.72em;color:var(--ink-2);}
/* ⚠️--accent-strong(#D2563F) は白地 4.08:1。375pxでは 17px 太字＝大文字扱いにならず AA割れ。
   演算子は意味のある記号なので 4.5:1 を満たす --accent-ink にする。 */
.fx-eq .op{font-size:.9em;color:var(--accent-ink);}
.fx--ag .fx-eq .v{color:var(--panel);}
.fx--ks .fx-eq .v{color:var(--accent-ink);}
.fx-eq b{font-weight:800;box-shadow:inset 0 -.42em 0 var(--accent-tint);}
.fx-so{margin:12px 0 0;font-size:14.5px;line-height:1.95;color:var(--ink-2);}
.fx-so em{font-style:normal;font-weight:800;color:var(--ink);}
.fx--ks .fx-so em{color:var(--accent-ink);}

.cmp-fig{margin:clamp(18px,2.4vw,24px) 0 0;}
.cmp-fig figcaption{margin:0 0 12px;font-size:12.5px;font-weight:800;letter-spacing:.06em;
  color:var(--accent-ink);}
/* 横スクロールはこのラッパの中だけで起こす。ページ本体は絶対に横に流さない。
   ⚠️このセクションの地は --accent-tint(#FBECE9)。白いカードを置くだけだと沈むので、
     影で浮かせ、罫線をはっきり引く。 */
.cmp-wrap{overflow-x:auto;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid #EAD3CD;
  box-shadow:0 22px 48px -30px rgba(140,48,32,.5);}
.cmp{width:100%;border-collapse:collapse;min-width:620px;}
.cmp th,.cmp td{padding:15px 18px;text-align:center;font-size:15px;}

/* 見出し行は濃紺ベタ。表であることが一目で分かり、地の色に負けない */
.cmp thead th{background:var(--panel);color:#fff;
  font-size:12.5px;font-weight:800;letter-spacing:.04em;}
.cmp thead th + th{border-left:1px solid rgba(255,255,255,.18);}
.cmp thead th:first-child,.cmp tbody th{text-align:left;}

/* 行見出しの列は薄い地を敷いて、数値の列と役割を分ける */
.cmp tbody th{background:#FBF8F7;font-weight:800;color:var(--ink);white-space:nowrap;
  border-right:1px solid #EAD3CD;}
.cmp tbody td + td,.cmp tbody th + td{border-left:1px solid #F2E2DE;}
.cmp tbody tr + tr th,.cmp tbody tr + tr td{border-top:1px solid #EAD3CD;}

.r-ag td{color:var(--panel);font-weight:800;}
.r-ag td:first-of-type{color:var(--muted);font-weight:700;}   /* 「なし」は主役ではない */

/* ★この行の「月額のみ」が3つ並ぶことが主張。
   ⚠️以前は --accent-tint(#FBECE9) を敷いていたが、これはセクションの地とまったく同じ色で、
     行が背景に同化して見えなくなっていた。一段濃い --accent-tint-2 にする。 */
.r-ks{background:var(--accent-tint-2);}
/* ⚠️`.cmp tbody th`(0,1,2) の方が `.r-ks th`(0,1,1) より強く、行見出しだけ白く残る。
   セレクタを1段上げて、行全体をひと続きの帯にする。 */
.cmp tbody .r-ks th{background:var(--accent-tint-2);
  box-shadow:inset 4px 0 0 var(--accent-strong);border-right-color:#E4BFB6;}
/* 行見出しは濃色のまま、値だけサーモン。ラベルが値と張り合わない。
   （`.cmp tbody th{color:var(--ink)}` が勝っていた結果だが、この見え方が正しいので明示する） */
.cmp tbody .r-ks th{color:var(--ink);}
.r-ks td{color:var(--accent-ink);font-weight:800;}
.r-ks td{font-size:16px;}
.cmp tbody .r-ks td + td{border-left-color:#E9CCC4;}

.profit-punch{max-width:46em;margin:clamp(24px,3.2vw,32px) 0 0;padding-left:18px;
  border-left:3px solid var(--accent);
  font-size:clamp(16px,2vw,20px);font-weight:800;line-height:1.85;color:var(--ink);}
.profit-punch b{color:var(--accent-ink);font-weight:800;}

/* ============================================================
   比較表：狭い幅では行ごとに積み直す（2026-08-22）
   375pxでは表が620px幅で、.cmp-wrap の中を横スクロールする作りだった。
   スクロールできる合図が無いので3列目まで見られず、
   「月額のみが3つ並ぶ」という表の主張そのものが伝わらなかった。
   縦に積むと、クルスタの行に「月額のみ」が3つ縦に並ぶ。反復は保たれる。
============================================================ */
@media(max-width:700px){
  .cmp-wrap{overflow-x:visible;}
  .cmp{min-width:0;display:block;}
  .cmp thead{display:none;}
  .cmp tbody,.cmp tr{display:block;}
  .cmp tr + tr{border-top:1px solid var(--accent-tint-2);}
  .cmp tbody th{display:block;padding:16px 18px 10px;text-align:left;
    border-right:none;white-space:normal;font-size:14.5px;}
  .cmp td{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding:8px 18px;text-align:right;font-size:15px;}
  .cmp td::before{content:attr(data-h);flex:none;text-align:left;
    font-size:12.5px;font-weight:800;letter-spacing:.02em;color:var(--muted);}
  .cmp tbody tr td:last-child{padding-bottom:16px;}
  .r-ks td::before{color:var(--accent-ink);}
}

/* 生成画像であることを示す注記。実写に差し替えるまで外さない */
.shop-photo figcaption .fig-note{margin-left:8px;font-size:.85em;font-weight:700;opacity:.75;}