/* 株式会社タルムード HP v5 — /ai-solutions/consulting/ 専用スタイル
   (2026-09-03 株主の見直し指示 14:2x で全面改稿 = v3。
    v2 = 月間改善ボード中心の工程説明 → v3 = 「実際に、こう改善します」の実例が主役)
   方針:
     ・ダークネイビー背景 / 主役は 03「実際に、こう改善します」の実画面3枚
     ・毎月の進め方は円形の改善ループ(HTML/CSS/SVG・生成画像なし・人物/ロボット絵なし)
     ・約7節→5節。本文は削り、工程の説明でなく「前後の変化」を見せる
   制約:
     ・色・書体・余白のトークンは site.css のものだけを使う(新しい色は足さない)。
       ここで宣言する変数は、site.css に既出の値(#B9BCC8 / #C7C9D2 / #F5A96B / --night 系)の別名のみ。
     ・このファイルは /ai-solutions/consulting/ でのみ読み込む(他ページに影響させない)。
   ===================================================================== */

.cs-page{
  --cs-tx:#B9BCC8;          /* site.css の .sec-ink .lead と同値 */
  --cs-tx-2:#C7C9D2;        /* site.css の .gnav a と同値 */
  --cs-accent:#F5A96B;      /* site.css の .sec-ink .eyebrow と同値 */
  --cs-line:#FCFCFA22;      /* site.css の --rule-d と同値 */
  --cs-line-2:#FCFCFA14;    /* site.css の .ft border-top と同値 */
  --cs-panel:#131624;       /* site.css の --night-2 と同値 */
  background:var(--night);
  color:var(--white);
}
.cs-page #main{background:var(--night)}

/* 節: site.css の .sec / .sec-ink を土台にする */
.cs-sec{background:var(--night)}
.cs-sec-2{background:var(--night-2)}
.cs-sec .lead{color:var(--cs-tx)}
.cs-sec h2,.cs-sec h3,.cs-sec h4{color:var(--white)}
.cs-sec .eyebrow{margin-bottom:1.1rem}
.cs-sec h2{max-width:34ch}
.cs-sec h2 .wb{display:inline-block}   /* 語の途中で折らない */

/* 節の締めの一文(株主原文) */
.cs-oneline{margin:clamp(1.8rem,3.5vw,2.6rem) 0 0;padding:.15rem 0 .15rem 1.2rem;
  border-left:1px solid transparent;border-image:var(--grad) 1;
  font-family:var(--serif);font-weight:700;letter-spacing:.03em;
  font-size:clamp(1rem,1.9vw,1.22rem);line-height:1.9;color:var(--white);max-width:74ch}

/* =====================================================================
   ファーストビュー
   ===================================================================== */
.cs-fv{position:relative;overflow:hidden;background:var(--night);color:var(--white);
  padding:clamp(7.5rem,15vh,10rem) 0 clamp(3.6rem,7vw,5.4rem)}
.cs-fv::before{content:"";position:absolute;inset:-25%;
  background:radial-gradient(34% 40% at 20% 26%,rgba(232,70,43,.24),transparent 70%),
             radial-gradient(30% 36% at 80% 20%,rgba(240,122,46,.18),transparent 70%),
             radial-gradient(34% 40% at 60% 96%,rgba(232,43,108,.14),transparent 70%);
  filter:blur(12px)}
.cs-fvgrid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2.2rem,5vw,4.2rem);align-items:center}

.cs-eyebrow{font-family:var(--en);font-weight:800;font-size:.7rem;letter-spacing:.32em;
  color:var(--cs-accent);margin:0 0 .85rem}
.cs-svcname{font-family:var(--serif);font-weight:700;color:var(--cs-tx-2);
  font-size:clamp(.98rem,1.7vw,1.12rem);line-height:1.6;letter-spacing:.1em;margin:0 0 1.15rem}

.cs-fv h1{font-size:clamp(1.62rem,3.3vw,2.5rem);line-height:1.55;margin:0 0 1.4rem;max-width:none}
.cs-fv h1 .wb,.cs-fv .lead .wb{display:inline-block}   /* 語の途中で折らない */
.cs-fv .lead{max-width:64ch;color:var(--cs-tx);font-size:clamp(.96rem,1.25vw,1.04rem);
  line-height:2.05;margin-bottom:.55rem}
.cs-fv .lead-2{margin-bottom:0}

/* 補助表示 3つだけ */
.cs-badges{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.55rem}
.cs-badges li{display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--cs-line);border-radius:999px;background:rgba(252,252,250,.04);
  padding:.5rem 1rem;font-size:.8rem;line-height:1.6;letter-spacing:.03em;color:var(--cs-tx-2)}
.cs-badges li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--cs-accent);opacity:.9}
.cs-fv .hero-actions{margin-top:2rem}

/* --- 月間改善ボードを簡略化した図 + 実画面を一部重ねる --- */
.cs-fvvis{position:relative;min-width:0}
.cs-miniboard{position:relative;z-index:2;border:1px solid var(--cs-line);border-radius:6px;
  background:linear-gradient(180deg,rgba(252,252,250,.055),rgba(252,252,250,.02));
  padding:clamp(1.2rem,2.6vw,1.7rem) clamp(1.2rem,2.6vw,1.8rem) clamp(1.3rem,2.8vw,1.9rem);
  box-shadow:0 34px 80px -46px rgba(0,0,0,.95);overflow:hidden}
.cs-miniboard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.cs-miniboard .mb-lb{margin:0 0 .5rem;font-family:var(--en);font-weight:800;font-size:.64rem;
  letter-spacing:.26em;color:var(--cs-accent)}
.cs-miniboard .mb-t{margin:0;font-family:var(--serif);font-weight:700;color:var(--white);
  font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.6;letter-spacing:.04em}
.mb-steps{list-style:none;margin:1.15rem 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.mb-steps li{position:relative;display:inline-flex;align-items:center;
  border:1px solid var(--cs-line);border-radius:3px;background:rgba(11,13,20,.55);
  padding:.42rem .72rem;font-size:.76rem;line-height:1.5;letter-spacing:.04em;color:var(--cs-tx);white-space:nowrap}
.mb-steps li+li::before{content:"";position:absolute;left:-.42rem;top:50%;width:6px;height:6px;
  border-right:1px solid var(--cs-accent);border-bottom:1px solid var(--cs-accent);
  transform:translate(-50%,-50%) rotate(-45deg);opacity:.8}
.mb-steps li.is-now{background:rgba(240,122,46,.16);border-color:#F5A96B66;color:var(--white);font-weight:700}

.cs-fvshot{position:relative;z-index:3;margin:-1.5rem 0 0 clamp(1.2rem,7%,3.2rem);
  border:1px solid var(--cs-line);border-radius:6px;overflow:hidden;background:#EDF3FC;
  box-shadow:0 34px 74px -40px rgba(0,0,0,.95)}
.cs-fvshot img{display:block;width:100%;height:auto}
@media(max-width:980px){
  .cs-fvgrid{grid-template-columns:1fr;gap:clamp(2rem,5vw,3rem)}
  .cs-fvvis{max-width:640px}
}
/* SP: 実画面をボード図に重ねると、ボードの下端を隠して「切れている」ように見える
   (株主 2026-09-03 16:00 指摘)。重ねをやめ、ボードの下に全幅で置く。PC は現状のまま。 */
@media(max-width:820px){
  .cs-fvvis{display:flex;flex-direction:column;gap:.75rem}
  .cs-fvshot{margin:0;border-radius:6px}
}

/* =====================================================================
   01 こんな状態を改善します
   ===================================================================== */
.cs-cards{list-style:none;margin:clamp(2.2rem,4.5vw,3rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.cs-cards li{position:relative;border:1px solid var(--cs-line);border-radius:5px;background:var(--cs-panel);
  padding:clamp(1.5rem,3vw,2rem) clamp(1.3rem,2.6vw,1.7rem) clamp(1.6rem,3vw,2rem);overflow:hidden;
  display:flex;flex-direction:column;gap:.75rem}
.cs-cards li::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad);opacity:.55}
.cs-cards .t{margin:0;font-family:var(--serif);font-weight:700;color:var(--white);
  font-size:clamp(1rem,1.8vw,1.14rem);line-height:1.75;letter-spacing:.03em}
.cs-cards .d{margin:0;font-size:.85rem;line-height:1.95;color:var(--cs-tx)}
@media(max-width:900px){.cs-cards{grid-template-columns:1fr}}

/* =====================================================================
   02 毎月の進め方 — 円形の改善ループ
   ===================================================================== */
.cs-loopwrap{position:relative;margin-top:clamp(2.4rem,5vw,3.6rem)}
.cs-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(240px,26vw);height:auto;z-index:0;pointer-events:none}
.cs-loop4{list-style:none;margin:0;padding:0;position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2.6rem,5.5vw,4.4rem) clamp(4rem,10vw,8rem)}
.cs-loop4>li{position:relative;border:1px solid var(--cs-line);border-radius:5px;
  background:var(--cs-panel);padding:clamp(1.3rem,2.6vw,1.7rem) clamp(1.2rem,2.4vw,1.6rem);
  display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic no" "ic t" "d d";
  gap:.35rem .9rem;align-content:start;box-shadow:0 26px 60px -44px rgba(0,0,0,.95)}
.cs-loop4 .ic{grid-area:ic;width:38px;height:38px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #F5A96B4d;background:rgba(240,122,46,.1);color:var(--cs-accent)}
.cs-loop4 .ic svg{width:19px;height:19px;display:block}
.cs-loop4 .no{grid-area:no;font-family:var(--en);font-weight:800;font-size:.64rem;
  letter-spacing:.24em;color:var(--cs-accent);align-self:end}
.cs-loop4 .t{grid-area:t;font-family:var(--serif);font-weight:700;color:var(--white);
  font-size:clamp(.98rem,1.7vw,1.12rem);line-height:1.6;letter-spacing:.03em}
.cs-loop4 .d{grid-area:d;margin-top:.55rem;font-size:.84rem;line-height:1.95;color:var(--cs-tx)}
/* SP の円形図(4工程を輪の四方に置く)。PC では出さない。 */
.cs-loopdia{display:none}
.cs-loopagain{display:none}
@media(max-width:820px){
  .cs-loop4{grid-template-columns:1fr;gap:1rem}
  /* 輪だけ・矢印だけの図は出さない(株主 2026-09-03 17:2x)。輪は cs-loopdia の中に入れる。 */
  .cs-ring{display:none}
  .cs-loopdia{position:relative;display:block;width:min(320px,100%);margin:1.4rem auto 1.6rem;
    aspect-ratio:1/1}
  .cs-ring2{position:absolute;inset:0;width:100%;height:100%;display:block}
  .cs-loopdia .p{position:absolute;display:flex;align-items:baseline;gap:.32rem;white-space:nowrap;
    padding:.36rem .62rem;border-radius:999px;border:1px solid var(--cs-line);
    background:var(--cs-panel);box-shadow:0 10px 24px -14px rgba(0,0,0,.95);
    font-family:var(--serif);font-weight:700;font-size:.76rem;line-height:1.5;
    color:var(--white);letter-spacing:.02em}
  .cs-loopdia .p i{font-style:normal;font-family:var(--en);font-weight:800;font-size:.56rem;
    letter-spacing:.14em;color:var(--cs-accent)}
  .cs-loopdia .p1{left:50%;top:10%;transform:translate(-50%,-50%)}
  .cs-loopdia .p2{left:90%;top:50%;transform:translate(-50%,-50%)}
  .cs-loopdia .p3{left:50%;top:90%;transform:translate(-50%,-50%)}
  .cs-loopdia .p4{left:10%;top:50%;transform:translate(-50%,-50%)}
  .cs-loopdia .hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    display:flex;flex-direction:column;align-items:center;gap:.18rem;text-align:center;
    font-size:.68rem;line-height:1.55;color:var(--cs-tx);letter-spacing:.04em}
  .cs-loopdia .hub em{font-style:normal;font-size:1.55rem;line-height:1;color:var(--cs-accent)}
  .cs-loop4>li+li::before{content:"";position:absolute;left:50%;top:-.62rem;width:9px;height:9px;
    border-right:1.5px solid var(--cs-accent);border-bottom:1.5px solid var(--cs-accent);
    transform:translate(-50%,-50%) rotate(45deg);opacity:.85}
  .cs-loopagain{display:flex;align-items:center;justify-content:center;gap:.5rem;
    margin:1rem 0 0;font-size:.8rem;line-height:1.8;color:var(--cs-tx);letter-spacing:.04em}
  .cs-loopagain span{font-size:1.15rem;line-height:1;color:var(--cs-accent)}
}

/* =====================================================================
   03 実際に、こう改善します(このページの主役)
   ===================================================================== */
.cs-case{position:relative;overflow:hidden}
.cs-case::before{content:"";position:absolute;inset:-30% -10% auto;height:120%;
  background:radial-gradient(38% 40% at 50% 10%,rgba(240,122,46,.12),transparent 72%);pointer-events:none}
.cs-case>.wrap{position:relative;z-index:1}
.cs-exlabel{margin:.4rem 0 0;display:inline-flex;align-items:center;gap:.55rem;
  border:1px solid var(--cs-line);border-radius:999px;padding:.42rem 1rem;
  font-size:.8rem;letter-spacing:.06em;color:var(--cs-tx-2);background:rgba(252,252,250,.04)}

.cs-steps{list-style:none;margin:clamp(2.2rem,4.5vw,3.2rem) 0 0;padding:0;
  display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,2.2rem)}
.cs-steps>li{position:relative;border:1px solid var(--cs-line);border-radius:6px;background:var(--cs-panel);
  padding:clamp(1.4rem,3vw,2rem);display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(1.4rem,3.2vw,2.6rem);align-items:center;
  box-shadow:0 28px 66px -46px rgba(0,0,0,.95)}
.cs-steps>li.is-before{grid-template-columns:1fr;background:transparent;border-style:dashed;
  border-color:var(--cs-line-2);box-shadow:none}
.cs-steps>li+li::before{content:"";position:absolute;left:clamp(1.9rem,4vw,2.9rem);
  top:calc(-1 * clamp(1.5rem,3vw,2.2rem));height:clamp(1.5rem,3vw,2.2rem);width:1px;
  background:linear-gradient(180deg,transparent,#F5A96B80)}
.cs-steps .tx{min-width:0}
.cs-steps .lb{margin:0 0 .6rem;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--en);font-weight:800;font-size:.66rem;letter-spacing:.2em;color:var(--cs-accent)}
.cs-steps>li.is-before .lb{color:var(--cs-tx)}
.cs-steps .lb::before{content:"";width:14px;height:1px;background:currentColor;opacity:.7}
.cs-steps .d{margin:0;font-family:var(--serif);font-weight:700;color:var(--white);
  font-size:clamp(1rem,1.8vw,1.18rem);line-height:1.85;letter-spacing:.03em}
.cs-steps>li.is-before .d{font-family:var(--body);font-weight:400;color:var(--cs-tx);
  font-size:clamp(.9rem,1.4vw,.98rem);line-height:2}

.cs-steps .shot{margin:0;border:1px solid var(--cs-line);border-radius:5px;overflow:hidden;
  background:#EDF3FC;box-shadow:0 26px 58px -40px rgba(0,0,0,.9)}
.cs-steps .shot img{display:block;width:100%;height:auto}
.cs-steps .shot figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .7rem;
  padding:.65rem .95rem .75rem;background:var(--night-2);border-top:1px solid var(--cs-line)}
.cs-steps .shot figcaption b{font-weight:700;font-size:.72rem;letter-spacing:.14em;color:var(--cs-accent)}
.cs-steps .shot figcaption span{font-size:.76rem;line-height:1.7;color:var(--cs-tx)}
/* アプリの実アイコン(株主 2026-09-03 16:14) — 画面ラベルの横に同寸の角丸で添える */
/* ★ .cs-steps .shot img{width:100%} は詳細度 (0,2,1)。クラス1つ(0,1,0)では負けて
   アイコンが全幅になる。img.cs-appic を .cs-page 配下で書いて確実に勝たせる。 */
.cs-page img.cs-appic{display:block;width:24px;height:24px;flex:none;border-radius:7px;
  background:var(--white);border:1px solid var(--cs-line)}
.cs-exic{display:inline-flex;flex:none}
.cs-page .cs-exic img.cs-appic{width:22px;height:22px;border-radius:6px}
.cs-appic-chip{position:absolute;bottom:.6rem;left:.6rem;z-index:2;display:block;
  border-radius:8px;box-shadow:0 8px 20px -10px rgba(0,0,0,.8)}
.cs-page .cs-appic-chip img.cs-appic{width:30px;height:30px;border-radius:8px;border-color:rgba(11,13,20,.2)}
@media(max-width:860px){
  .cs-steps>li{grid-template-columns:1fr;gap:1.2rem}
  .cs-steps>li+li::before{left:50%}
}

/* =====================================================================
   04 人とAIの支援体制
   ===================================================================== */
.cs-team{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(1rem,2.4vw,1.6rem);margin-top:clamp(2.2rem,4.5vw,3rem);align-items:stretch}
.cs-human,.cs-aiteam{position:relative;border:1px solid var(--cs-line);border-radius:5px;
  background:var(--cs-panel);padding:clamp(1.5rem,3vw,2rem) clamp(1.3rem,2.6vw,1.8rem);overflow:hidden}
.cs-human::before,.cs-aiteam::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad);opacity:.5}
.cs-human img{width:52px;height:52px;display:block;margin:0 0 .9rem}
.cs-human .nm{margin:0 0 .55rem;font-family:var(--serif);font-weight:700;color:var(--white);
  font-size:clamp(1.05rem,1.9vw,1.24rem);line-height:1.6;letter-spacing:.06em}
.cs-human .ds{margin:0;font-size:.85rem;line-height:1.95;color:var(--cs-tx)}
.cs-aiteam .lb{margin:0 0 1.2rem;font-family:var(--en);font-weight:800;font-size:.64rem;
  letter-spacing:.24em;color:var(--cs-accent)}
/* 株主指示: アイコン横一列 or 2×3。幅が足りなければ折り返して中央寄せ(=3+2の2段) */
.cs-roles{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;
  gap:1.3rem 1.5rem}
.cs-roles li{flex:0 0 calc(33.333% - 1rem);display:grid;grid-template-columns:auto auto auto;
  grid-template-areas:"i i i" "n s r";
  justify-content:center;justify-items:center;align-items:baseline;gap:0;text-align:center}
.cs-roles .nm,.cs-roles .sp,.cs-roles .rl{white-space:nowrap}
.cs-roles li img{grid-area:i;width:52px;height:52px;border-radius:50%;display:block;
  background:rgba(252,252,250,.06);margin-bottom:.6rem}
.cs-roles .nm{grid-area:n;font-family:var(--serif);font-weight:700;color:var(--white);
  font-size:.86rem;line-height:1.6;letter-spacing:.02em}
.cs-roles .sp{grid-area:s;color:var(--cs-tx);font-size:.78rem}
.cs-roles .rl{grid-area:r;font-weight:700;font-size:.78rem;line-height:1.6;color:var(--cs-accent);
  letter-spacing:.02em}
@media(max-width:980px){.cs-team{grid-template-columns:1fr}}
@media(max-width:640px){.cs-roles{gap:1.3rem 1.2rem}
  .cs-roles li{flex:0 0 calc(50% - .6rem)}}
@media(max-width:340px){.cs-roles li{flex:0 0 100%}}

.cs-more{margin-top:1.5rem}
.cs-more .go{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:46px;
  border:1px solid #FCFCFA45;color:var(--white);border-radius:3px;padding:.5rem 1.35rem;
  font-weight:700;font-size:.85rem;letter-spacing:.04em;
  transition:border-color .25s,background .25s,transform .25s var(--ease)}
.cs-more .go:hover{border-color:var(--cs-accent);background:#FCFCFA0d;transform:translateY(-2px)}
.cs-more .go .ar{transition:transform .3s var(--ease)}
.cs-more .go:hover .ar{transform:translateX(5px)}

/* =====================================================================
   05 毎月残るもの・料金
   ===================================================================== */
.cs-keeps{list-style:none;margin:clamp(2.2rem,4.5vw,3rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
.cs-keeps li{position:relative;border:1px solid var(--cs-line);border-radius:5px;background:var(--cs-panel);
  padding:clamp(1.4rem,2.8vw,1.8rem) clamp(1.2rem,2.4vw,1.5rem);display:flex;flex-direction:column;gap:.6rem}
.cs-keeps .ic{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid #F5A96B4d;background:rgba(240,122,46,.1);color:var(--cs-accent);
  margin-bottom:.25rem}
.cs-keeps .ic svg{width:18px;height:18px;display:block}
.cs-keeps .t{margin:0;font-family:var(--serif);font-weight:700;color:var(--white);
  font-size:clamp(.98rem,1.6vw,1.08rem);line-height:1.7;letter-spacing:.03em}
.cs-keeps .d{margin:0;font-size:.82rem;line-height:1.95;color:var(--cs-tx)}
@media(max-width:980px){.cs-keeps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.cs-keeps{grid-template-columns:1fr}}

/* 06 料金 — SNS mate LP の「料金プラン」節と同じ組み立て
   (節見出し / 価格カード / 含まれるもの / CTA)を、法人HPのトークンで作る。 */
.cs-pricesec h2{font-size:clamp(1.5rem,3.4vw,2.2rem);letter-spacing:.08em}
.cs-price{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:.9rem;
  margin-top:clamp(2rem,4vw,2.8rem)}
.cs-price>div{position:relative;border:1px solid var(--cs-line);border-radius:5px;
  background:rgba(252,252,250,.04);padding:clamp(1.5rem,3vw,2rem) clamp(1.3rem,2.6vw,1.8rem);overflow:hidden}
.cs-price .pr-main::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.cs-price .lb{margin:0 0 .7rem;font-family:var(--en);font-weight:800;font-size:.64rem;
  letter-spacing:.24em;color:var(--cs-accent)}
.cs-price .v{margin:0 0 .7rem;font-family:var(--serif);font-weight:700;color:var(--white);
  font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.5;letter-spacing:.05em}
.cs-price .d{margin:0;font-size:.84rem;line-height:1.95;color:var(--cs-tx)}
.cs-price .pr-inc ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem .9rem}
.cs-price .pr-inc li{display:flex;align-items:flex-start;gap:.55rem;font-size:.84rem;line-height:1.85;
  color:var(--cs-tx-2)}
.cs-price .pr-inc li::before{content:"";flex:none;width:8px;height:5px;margin-top:.72em;
  border-left:1.5px solid var(--cs-accent);border-bottom:1.5px solid var(--cs-accent);
  transform:rotate(-45deg)}
@media(max-width:900px){.cs-price{grid-template-columns:1fr}}
@media(max-width:520px){.cs-price .pr-inc ul{grid-template-columns:1fr}}

.cs-pricecta{margin-top:clamp(1.8rem,3.5vw,2.4rem)}

/* サービスの違いを短く */
.cs-diff{list-style:none;margin:clamp(1.8rem,3.5vw,2.4rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.cs-diff li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .8rem;
  border-top:1px solid var(--cs-line-2);padding:.85rem .1rem .1rem}
.cs-diff .q{font-size:.82rem;line-height:1.8;color:var(--cs-tx)}
.cs-diff .q::after{content:"";display:inline-block;width:1.1em;height:1px;vertical-align:.32em;
  margin-left:.5em;background:currentColor;opacity:.5}
.cs-diff a{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.88rem;
  line-height:1.7;color:var(--cs-accent);letter-spacing:.02em;
  border-bottom:1px solid transparent;transition:border-color .25s}
.cs-diff a:hover{border-bottom-color:var(--cs-accent)}
.cs-diff a .ar{transition:transform .3s var(--ease)}
.cs-diff a:hover .ar{transform:translateX(4px)}
@media(max-width:760px){.cs-diff{grid-template-columns:1fr}}

/* =====================================================================
   サービス選択欄(3ページ共通・v2 逐語。株主指示で料金の後に置く)
   ===================================================================== */
/* 株主 2026-09-03 17:2x「押せる物に見えない」→ ボタン型。3ページで同じ形。 */
.svc-select{margin-top:clamp(2.4rem,5vw,3.4rem);padding-top:clamp(2rem,4vw,2.8rem);
  border-top:1px solid var(--cs-line)}
.svc-q{font-family:var(--serif);font-weight:700;
  font-size:clamp(1rem,1.8vw,1.15rem);line-height:1.8;color:var(--white);margin:0 0 1rem;
  letter-spacing:.04em}
.svc-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.svc-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.5rem;min-width:0;
  min-height:154px;border-radius:6px;padding:1.2rem 1.2rem 1.05rem;text-decoration:none;
  transition:transform .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease),
  box-shadow .22s var(--ease)}
.svc-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px}
.svc-card b{font-size:.82rem;font-weight:500;line-height:1.85}
.svc-card b::before{content:"";display:inline-block;width:1.1em;height:1px;vertical-align:.35em;
  margin-right:.45em;background:currentColor;opacity:.55}
.svc-card .nm{font-family:var(--serif);font-weight:700;font-size:clamp(.95rem,1.7vw,1.06rem);
  line-height:1.7;letter-spacing:.02em;margin-top:auto}
.svc-go{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin-top:.95rem;min-height:44px;padding:.6rem .85rem;border-radius:4px;
  font-size:.78rem;font-weight:700;letter-spacing:.06em;line-height:1.6}
.svc-go .ar{font-style:normal;font-size:1.05rem;line-height:1;transition:transform .22s var(--ease)}
a.svc-card:hover .svc-go .ar{transform:translateX(4px)}
a.svc-card:active .svc-go .ar{transform:translateX(4px)}
/* 現在のページ = 押せない。CTA と同じ位置に 赤〜オレンジの「このページ」バッジを置く。 */
.svc-go.is-now{justify-content:center;border:0;color:var(--white);
  background-color:#A32918;background-image:var(--grad-cta)}
.svc-card.is-current{cursor:default}
@media(max-width:860px){.svc-row{grid-template-columns:1fr}
  .svc-card{min-height:0}}
@media(prefers-reduced-motion:reduce){.svc-card,.svc-go .ar{transition:none}}
/* --- 暗い面(ネイビー)の配色 --- */
.svc-card{border:1.5px solid var(--cs-line);background:var(--cs-panel)}
.svc-card::before{background:var(--cs-line)}
.svc-card b{color:var(--cs-tx)}
.svc-card .nm{color:var(--white)}
.svc-go{color:var(--cs-accent);border:1px solid #F5A96B4d;background:rgba(240,122,46,.07)}
a.svc-card:hover{transform:translateY(-2px);background:#171B2C;border-color:#F5A96B66;
  box-shadow:0 22px 48px -30px rgba(0,0,0,.9)}
a.svc-card:active{transform:translateY(0) scale(.985);background:rgba(240,122,46,.14);
  border-color:#F5A96B99;box-shadow:none}
a.svc-card:focus-visible{outline:2px solid var(--cs-accent);outline-offset:3px}
/* 現在のページだけ 赤〜オレンジで強調 */
.svc-card.is-current{border-color:transparent;background:rgba(240,122,46,.12);
  box-shadow:0 0 0 1.5px rgba(240,122,46,.55),0 22px 54px -34px rgba(240,122,46,.6)}
.svc-card.is-current::before{background:var(--grad)}
.svc-card.is-current b{color:var(--cs-accent)}

/* =====================================================================
   モバイル最適化 (株主 2026-09-03 16:00「pcは確かに良い感じだけど、
   モバイル最適化がほとんど皆無」)。PC の見た目は変えない。
   ===================================================================== */
/* iOS Safari 対策: 枠内で確実に切る(変形した子・角丸の枠を持つ物) */
.cs-fvshot,.cs-steps .shot,.cs-miniboard,.cs-cards li,.cs-keeps li{contain:paint}
.cs-page img{max-width:100%}

@media(max-width:820px){
  /* 主要CTAは全幅 */
  .cs-page .hero-actions{display:grid;grid-template-columns:1fr}
  .cs-page .hero-actions .cta{width:100%;justify-content:center}
  /* 見出しは語の途中で折らないまま、行の座りを良くする */
  .cs-fv h1{font-size:clamp(1.62rem,7vw,2.1rem);line-height:1.6}
  .cs-sec h2{text-wrap:balance;max-width:none}
  .cs-fv .lead{line-height:1.95;max-width:none}
  .cs-oneline{font-size:1.02rem;line-height:1.85;padding-left:1rem}
  /* カードの内側余白を詰めて、1画面に入る量を増やす */
  .cs-cards li{padding:1.15rem 1.15rem 1.25rem;gap:.5rem}
  .cs-keeps li{padding:1.15rem 1.15rem 1.25rem}
  .cs-steps>li{padding:1.15rem 1.1rem 1.25rem}
  .cs-price>div{padding:1.35rem 1.2rem 1.45rem}
  /* バッジ・役割アイコンは折返す */
  .cs-badges{gap:.45rem}
  .cs-badges li{padding:.42rem .85rem;font-size:.76rem}
}
@media(max-width:820px){
  /* サービス比較のリンクは指で押せる高さ(44px)にする */
  .cs-diff a{min-height:44px;padding:.35rem 0}
}
@media(max-width:560px){
  .cs-fv{padding-top:clamp(6.2rem,13vh,8rem)}
  .cs-steps .shot figcaption{padding:.6rem .8rem .7rem}
  .cs-diff li{padding-top:.75rem}
}

/* =====================================================================
   2026-09-03 株主指示 —「同じセクション内でも内容が違うのに同じデザインだと分かりづらい」
   06 は「料金(読むだけ)」と「サービス選択欄(押せる)」が同じ実面カードだった。
   料金は実面をやめて破線の枠に落とし、3px --grad の上辺は
   押せるカードの現在地(.svc-card.is-current)だけの印にする。
   ===================================================================== */
.cs-price>div{background:transparent;border-style:dashed;border-color:var(--cs-line-2)}
.cs-price .pr-main{border-style:solid;border-color:color-mix(in srgb,var(--cs-accent) 42%,transparent)}
.cs-price .pr-main::before{height:2px;opacity:.6}