/* =====================================================================
   株式会社タルムード HP v5 — /ai-solutions/adoption/ 専用スタイル
   AI導入設計・初期構築 (株主 2026-09-03 14:0x 見直し指示 = v3)
   ・アイボリー背景 / ネイビー文字 / 赤〜オレンジは「判断箇所」だけ
   ・資料が主役。人物キャラクターは使わない。図は4種類だけ:
     FVの簡略図 / 4ステップの1本の図 / 成果物4点の実物サムネイル / BEFORE→AI→AFTER＋実画面
   ・色は site.css のトークンだけを使う(新しい色相を足さない)。
     淡い階調は color-mix() で site.css のトークンから作る。
   ・このファイルは /ai-solutions/adoption/ だけが読み込む。共有CSSは変更しない。
   ===================================================================== */

.ba{
  --ba-ivory:var(--plate);
  --ba-ivory-2:color-mix(in srgb,var(--plate) 46%,var(--white));
  --ba-line:#1012182e;
  --ba-line-2:#10121818;
  --ba-a:var(--night-2);                 /* 標準            = ネイビー */
  --ba-b:var(--orange);                  /* 現在地・強調    = オレンジ */
  --ba-c:var(--red-t);                   /* 判断箇所        = 赤 */
  --ba-b-bg:color-mix(in srgb,var(--orange) 14%,var(--white));
  --ba-c-bg:color-mix(in srgb,var(--red-t) 11%,var(--white));
  --ba-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Noto Sans Mono","Roboto Mono",monospace;
  background:var(--ba-ivory);
}
.ba main{background:var(--ba-ivory)}

/* ---------- 節の型 ---------------------------------------------------- */
.ba-sec{padding:clamp(2rem,5.4vw,4.6rem) 0;position:relative}
.ba-sec-w{background:var(--white)}
.ba-sec>.wrap>.ba-hd{max-width:54rem;margin-bottom:clamp(1rem,2.4vw,1.6rem)}
.ba-sec h2{color:var(--night)}
.ba-lead{color:var(--ink-2);max-width:42rem;line-height:2.05;margin-bottom:0}
.ba-hd .ba-lead{margin-top:.4rem}

/* 見出しの直下に置く断定文 */
.ba-claim{font-family:var(--serif);font-weight:700;color:var(--night);
  font-size:clamp(1.02rem,2.1vw,1.34rem);line-height:1.9;letter-spacing:.03em;
  border-left:1px solid var(--red-t);padding:.15rem 0 .15rem 1.05rem;margin:.9rem 0 0;max-width:36rem}

/* ---------- FV -------------------------------------------------------- */
.ba-fv{background:var(--ba-ivory);padding:clamp(6.2rem,11vh,9rem) 0 clamp(1.8rem,4.4vw,3.2rem)}
.ba-fv h1{font-size:clamp(1.72rem,4.4vw,3rem);line-height:1.55;margin-bottom:1.2rem;
  color:var(--night);max-width:16em}
.ba-fv h1 .ac{color:var(--red-t);display:inline-block}
.ba-fv .ba-lead{font-size:clamp(.95rem,1.35vw,1.06rem);max-width:34rem}
.ba-fv-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1.8rem}

/* 補助表示3つ */
.ba-pills{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem;margin:1.3rem 0 0;padding:0}
.ba-pills li{font-family:var(--ba-mono);font-size:.74rem;letter-spacing:.04em;line-height:1.9;
  color:var(--ink-2);background:var(--white);border:1px solid var(--ba-line);
  border-radius:999px;padding:.24rem .9rem;white-space:nowrap}
.ba-pills li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--ba-c);vertical-align:.18em;margin-right:.5em}

/* ---------- FV の簡略図(4要素) ---------------------------------------- */
.ba-flow{margin:clamp(2.2rem,5vw,3.2rem) 0 0;display:grid;align-items:center;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:.6rem;
  background:var(--white);border:1px solid var(--ba-line);border-radius:6px;
  padding:clamp(1.1rem,2.4vw,1.7rem) clamp(.9rem,2vw,1.5rem)}
.ba-flow-i{display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center;min-width:0}
.ba-flow-i .d{display:block;width:100%;max-width:104px}
.ba-flow-i .d svg{display:block;width:100%;height:auto}
.ba-flow-i .t{font-family:var(--serif);font-weight:700;font-size:clamp(.8rem,1.15vw,.94rem);
  line-height:1.7;color:var(--night);letter-spacing:.01em}
.ba-flow svg rect{fill:none;stroke:var(--muted);stroke-width:2.4}
.ba-flow svg rect.pick{stroke:var(--ba-c);stroke-width:3;fill:var(--ba-c-bg)}
.ba-flow svg .ln{fill:none;stroke:var(--muted);stroke-width:2.4;stroke-linecap:round}
.ba-flow svg .ln.dash{stroke-dasharray:5 5}
.ba-flow svg .mk{fill:none;stroke:var(--ba-c);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ba-flow svg .dot{fill:none;stroke:var(--muted);stroke-width:2.4}
.ba-flow svg .dot.mkf{stroke:var(--ba-c);fill:var(--ba-c)}
.ba-flow svg .ck{fill:none;stroke:var(--ba-c);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.ba-flow-a{width:26px;height:1px;background:var(--ba-line);position:relative;justify-self:center}
.ba-flow-a::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid var(--muted);border-right:1px solid var(--muted);transform:rotate(45deg)}
@media(max-width:860px){
  .ba-flow{grid-template-columns:1fr;gap:0;padding:1.2rem 1.1rem}
  .ba-flow-i{flex-direction:row;align-items:center;gap:1rem;text-align:left;width:100%}
  .ba-flow-i .d{width:46px;flex:none}
  .ba-flow-a{width:1px;height:20px;margin:.15rem 0 .15rem 27px;justify-self:start}
  .ba-flow-a::after{right:-3px;top:auto;bottom:0;transform:rotate(135deg)}
}

/* ---------- サービス選択欄(3ページ共通・05 の後) -----------------------
   株主 2026-09-03 17:2x「押せる物に見えない」→ ボタン型(枠+背景+「このページを見る →」)。
   現在のページは <a> ではなく <span aria-current="page"> = 押せない + 「このページ」バッジ。 */
.ba-sec-sel{padding-top:0}
.svc-select{background:var(--white);border:1px solid var(--ba-line);border-radius:6px;
  padding:clamp(1.1rem,2.4vw,1.6rem)}
.svc-q{font-family:var(--serif);font-weight:700;color:var(--night);
  font-size:clamp(1rem,2vw,1.16rem);line-height:1.8;margin:0 0 1rem}
.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(--ba-line);background:var(--ba-ivory-2)}
.svc-card::before{background:var(--ba-line)}
.svc-card b{color:var(--ink-2)}
.svc-card .nm{color:var(--night)}
.svc-go{color:var(--red-d);border:1px solid color-mix(in srgb,var(--ba-c) 40%,transparent);
  background:var(--white)}
a.svc-card:hover{transform:translateY(-2px);background:var(--white);
  border-color:color-mix(in srgb,var(--ba-c) 55%,transparent);
  box-shadow:0 18px 40px -26px rgba(16,18,24,.45)}
a.svc-card:active{transform:translateY(0) scale(.985);background:var(--ba-c-bg);
  border-color:color-mix(in srgb,var(--ba-c) 70%,transparent);box-shadow:none}
a.svc-card:focus-visible{outline:2px solid var(--red-t);outline-offset:3px}
/* 現在のページだけ 赤〜オレンジで強調 */
.svc-card.is-current{background:var(--ba-c-bg);
  border-color:color-mix(in srgb,var(--ba-c) 60%,transparent)}
.svc-card.is-current::before{background:var(--grad-cta)}
.svc-card.is-current b{color:var(--red-d)}

/* ---------- 01: 3枚のカード ------------------------------------------- */
.ba-cards{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.ba-cards li{background:var(--ba-ivory-2);border:1px solid var(--ba-line);border-radius:6px;
  border-top:3px solid var(--ba-c);padding:1.3rem 1.35rem 1.45rem;min-width:0;
  display:flex;flex-direction:column;gap:.6rem}
.ba-cards b{font-family:var(--serif);font-weight:700;font-size:clamp(1rem,1.6vw,1.1rem);
  line-height:1.75;color:var(--night)}
.ba-cards span{font-size:.87rem;line-height:1.95;color:var(--ink-2)}
/* 3枚の線画アイコン(株主 2026-09-03 16:00「イラストあると良いよね」)。
   生成画像は使わない。開発ページ 01 の 6 枚と同じ作法(丸チップ + currentColor の線画)。 */
.ba-cards .ic{width:44px;height:44px;flex:none;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;color:var(--ba-c);
  background:var(--ba-c-bg);border:1px solid color-mix(in srgb,var(--ba-c) 26%,transparent);
  margin-bottom:.15rem}
.ba-cards .ic svg{width:24px;height:24px;display:block}
.ba-cards .ic svg rect,.ba-cards .ic svg path,.ba-cards .ic svg circle{stroke:var(--muted)}
.ba-cards .ic svg .pick,.ba-cards .ic svg .mk,.ba-cards .ic svg .ck,.ba-cards .ic svg .dot{stroke:var(--ba-c)}
.ba-cards .ic svg .pick{fill:color-mix(in srgb,var(--ba-c) 12%,transparent)}
.ba-cards .ic svg .dot{fill:var(--ba-c)}
@media(max-width:820px){.ba-cards{grid-template-columns:1fr;gap:.7rem}
  .ba-cards li{padding:1.05rem 1.15rem 1.2rem;
    /* SP は アイコンを見出しの左に置いて縦を詰める */
    display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.45rem .85rem}
  .ba-cards .ic{width:40px;height:40px;margin:0}
  .ba-cards .ic svg{width:22px;height:22px}
  .ba-cards b{flex:1 1 0;min-width:0;font-size:1.02rem;line-height:1.7}
  .ba-cards span{flex:1 1 100%;font-size:.85rem;line-height:1.9}}

/* ---------- 02: 横につながった1本の図 ---------------------------------- */
.ba-rail{list-style:none;margin:2rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative}
.ba-rail::before{content:"";position:absolute;left:6%;right:6%;top:26px;height:2px;
  background:linear-gradient(90deg,var(--ba-a) 0%,var(--ba-a) 62%,var(--ba-b) 100%);opacity:.32}
.ba-rail li{position:relative;padding:0 .9rem;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:.5rem;min-width:0}
.ba-rail .no{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;
  border-radius:50%;background:var(--white);border:2px solid var(--ba-a);
  font-family:var(--ba-mono);font-size:.82rem;font-weight:700;color:var(--night)}
.ba-rail li:last-child .no{border-color:var(--ba-b);background:var(--ba-b-bg)}
.ba-rail .key{font-family:var(--ba-mono);font-size:.7rem;letter-spacing:.08em;line-height:1.8;
  color:var(--red-d);background:var(--ba-c-bg);border-radius:999px;padding:.1rem .7rem;margin-top:.2rem}
.ba-rail .nm{font-family:var(--serif);font-weight:700;font-size:clamp(.95rem,1.5vw,1.06rem);
  line-height:1.7;color:var(--night)}
.ba-rail .tx{font-size:.84rem;line-height:1.95;color:var(--ink-2)}
@media(max-width:860px){
  .ba-rail{grid-template-columns:1fr;gap:.15rem;margin-top:1.5rem}
  .ba-rail::before{left:25px;right:auto;top:14px;bottom:14px;width:2px;height:auto}
  .ba-rail li{flex-direction:row;flex-wrap:wrap;align-items:center;text-align:left;
    padding:.55rem 0;gap:.45rem .8rem}
  .ba-rail .no{width:52px;height:52px;flex:none}
  .ba-rail .key{order:3;margin:0}
  .ba-rail .nm{flex:1 1 auto;min-width:0}
  .ba-rail .tx{flex:1 1 100%;max-width:none;padding-left:calc(52px + .8rem)}
}

/* ---------- 03: 成果物4点(実物サムネイル 2×2) -------------------------- */
.ba-src{font-family:var(--ba-mono);font-size:.72rem;letter-spacing:.04em;line-height:1.9;
  color:var(--ink-2);margin:0 0 .9rem}
.ba-src::before{content:"";display:inline-block;width:1.4em;height:1px;vertical-align:.35em;
  margin-right:.5em;background:var(--ba-c)}
.ba-docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.7rem,1.6vw,1.2rem)}
.ba-doc{margin:0;background:var(--ba-ivory-2);border:1px solid var(--ba-line);border-radius:6px;
  overflow:hidden;display:flex;flex-direction:column;min-width:0;
  transition:transform .3s var(--ease),box-shadow .3s}
.ba-doc:hover{transform:translateY(-3px);box-shadow:0 20px 44px -30px rgba(16,18,24,.4)}
.ba-doc-b{display:block;position:relative;width:100%;padding:0;border:0;
  border-bottom:1px solid var(--ba-line);background:var(--ba-ivory);cursor:zoom-in;
  aspect-ratio:4 / 3;overflow:hidden}
.ba-doc-b img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.ba-doc-b::after{content:"";position:absolute;right:.5rem;bottom:.5rem;width:26px;height:26px;border-radius:50%;
  background:var(--white);border:1px solid var(--ba-line);
  background-image:linear-gradient(var(--red-d),var(--red-d)),linear-gradient(var(--red-d),var(--red-d));
  background-size:11px 1.5px,1.5px 11px;background-position:center,center;background-repeat:no-repeat}
.ba-doc figcaption{padding:.85rem .95rem 1rem;display:flex;flex-direction:column;gap:.35rem}
.ba-doc figcaption b{font-family:var(--serif);font-weight:700;font-size:clamp(.9rem,1.5vw,1.04rem);
  line-height:1.7;color:var(--night)}
.ba-doc figcaption span{font-size:.8rem;line-height:1.85;color:var(--ink-2)}
@media(max-width:520px){
  .ba-doc figcaption{padding:.6rem .65rem .75rem}
  .ba-doc figcaption span{font-size:.74rem;line-height:1.75}
}

/* ---------- 04: BEFORE → AI → AFTER (3列の図) -------------------------- */
.ba-baa{margin:2rem 0 0;display:grid;align-items:stretch;
  grid-template-columns:1fr auto 1fr auto 1fr;gap:.5rem}
.ba-baa-c{background:var(--white);border:1px solid var(--ba-line);border-radius:6px;
  padding:1.1rem 1.15rem 1.25rem;min-width:0;display:flex;flex-direction:column;gap:.7rem}
.ba-baa-c .h{font-family:var(--ba-mono);font-weight:700;font-size:.74rem;letter-spacing:.14em;
  line-height:1.8;color:var(--muted);margin:0;padding-bottom:.55rem;
  border-bottom:1px solid var(--ba-line-2)}
.ba-baa-c.mid{background:var(--ba-c-bg);border-color:color-mix(in srgb,var(--ba-c) 34%,transparent)}
.ba-baa-c.mid .h{color:var(--red-d)}
.ba-baa-c.out{background:var(--ba-b-bg);border-color:color-mix(in srgb,var(--ba-b) 34%,transparent)}
.ba-baa-c.out .h{color:var(--ink-2)}
.ba-baa-c ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.ba-baa-c li{position:relative;padding-left:1.1rem;font-size:.86rem;line-height:1.9;color:var(--ink-2)}
.ba-baa-c li::before{content:"";position:absolute;left:.05rem;top:.95em;width:6px;height:1px;background:var(--muted)}
.ba-baa-c.mid li::before,.ba-baa-c.out li::before{background:var(--ba-c);height:2px}
.ba-baa-a{align-self:center;width:22px;height:1px;background:var(--ba-line);position:relative}
.ba-baa-a::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid var(--muted);border-right:1px solid var(--muted);transform:rotate(45deg)}
@media(max-width:820px){
  .ba-baa{grid-template-columns:1fr;gap:0}
  .ba-baa-a{width:1px;height:18px;margin:.3rem 0 .3rem 1.15rem}
  .ba-baa-a::after{right:-3px;top:auto;bottom:0;transform:rotate(135deg)}
}

/* ---------- 04: 実画面カルーセル --------------------------------------- */
.ba-car{margin:1.4rem 0 0;background:var(--white);border:1px solid var(--ba-line);border-radius:6px;
  padding:clamp(.8rem,1.8vw,1.1rem);max-width:520px}
.ba-car-tr{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:0;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ba-car-tr::-webkit-scrollbar{display:none}
.ba-car-s{margin:0;scroll-snap-align:start;min-width:0;display:flex;flex-direction:column;gap:.7rem}
.ba-car-s .fr{display:block;width:100%;padding:.5rem;border:1px solid var(--ba-line-2);
  border-radius:4px;background:var(--ba-ivory-2);cursor:zoom-in}
.ba-car-s .fr img{display:block;width:100%;height:auto;border-radius:2px}
.ba-car-s figcaption{font-family:var(--ba-mono);font-size:.74rem;letter-spacing:.05em;line-height:1.9;
  color:var(--night);text-align:center}
.ba-car-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:.9rem}
.ba-car-b{position:relative;width:34px;height:34px;border-radius:50%;border:1px solid var(--ba-line);
  background:var(--white);cursor:pointer;transition:border-color .25s,background .25s}
.ba-car-b::before{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;
  border-top:1.5px solid var(--night);border-right:1.5px solid var(--night)}
.ba-car-b.next::before{transform:translate(-65%,-50%) rotate(45deg)}
.ba-car-b.prev::before{transform:translate(-35%,-50%) rotate(-135deg)}
.ba-car-b:hover{border-color:color-mix(in srgb,var(--ba-c) 50%,transparent);background:var(--ba-c-bg)}
.ba-car-dots{display:inline-flex;align-items:center;gap:.5rem}
.ba-car-dots button{width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--muted);background:transparent;transition:background .25s,border-color .25s}
.ba-car-dots button[aria-current="true"]{background:var(--ba-c);border-color:var(--ba-c)}

/* 一言 + /lab/ への小さな導線 */
.ba-one-line{margin:1.8rem 0 0;padding-top:1.2rem;border-top:1px dashed var(--ba-line);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.2rem}
.ba-one-line p{margin:0;font-size:.9rem;line-height:1.95;color:var(--ink-2)}
.ba-one-line .go.sm{font-size:.78rem}

/* ---------- 05: 期間と費用 -------------------------------------------- */
/* 料金カード — SNS mate の料金節(プラン名 / 大きい値 / 補足)と同じ組み立てを
   法人HPのトークンで作る。文面は株主原文のまま、配置と見た目だけを変える。 */
.ba-terms{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;align-items:stretch}
.ba-terms li{position:relative;background:var(--ba-ivory-2);border:1px solid var(--ba-line);
  border-radius:6px;padding:1.25rem 1.3rem 1.35rem;min-width:0;
  display:flex;flex-direction:column;gap:.45rem}
.ba-terms li::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:6px 6px 0 0;background:var(--ba-line)}
.ba-terms .k{font-size:.76rem;line-height:1.8;letter-spacing:.08em;color:var(--ink-2)}
.ba-terms b{font-weight:700;color:var(--night)}
.ba-terms .v{font-family:var(--serif);font-weight:700;color:var(--night);
  font-size:clamp(1.02rem,1.9vw,1.2rem);line-height:1.6;letter-spacing:.03em;margin-top:auto}
/* 「費用」だけ主カード(SNS mate の RECOMMENDED プランと同じ扱い) */
.ba-terms .is-main{background:var(--white);
  border-color:color-mix(in srgb,var(--ba-c) 34%,transparent);
  box-shadow:0 22px 50px -34px rgba(16,18,24,.4)}
.ba-terms .is-main::before{background:var(--grad-cta)}
.ba-terms .is-main .k{color:var(--red-d)}
.ba-terms .is-main .v{font-size:clamp(1.32rem,3vw,1.72rem);line-height:1.5}
@media(max-width:760px){.ba-terms{grid-template-columns:1fr;gap:.55rem}
  .ba-terms li{padding:1rem 1.1rem 1.1rem;gap:.3rem}
  .ba-terms .is-main .v{font-size:1.5rem}}

.ba-next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:1.6rem}
.ba-next a{display:flex;flex-direction:column;gap:.3rem;min-width:0;text-decoration:none;
  background:var(--white);border:1px solid var(--ba-line);border-radius:5px;padding:.9rem 1.1rem 1rem;
  transition:transform .25s var(--ease),border-color .25s}
.ba-next a:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--ba-c) 40%,transparent)}
.ba-next b{font-size:.78rem;font-weight:500;line-height:1.85;color:var(--ink-2)}
.ba-next span{font-family:var(--serif);font-weight:700;font-size:clamp(.9rem,1.5vw,1rem);
  line-height:1.7;color:var(--night)}
.ba-next .ar{color:var(--red-t)}
@media(max-width:760px){.ba-next{grid-template-columns:1fr}}

/* ---------- 06: FAQ / 相談 -------------------------------------------- */
.ba-faq{margin-top:1rem;border-top:1px solid var(--ba-line);max-width:52rem}
.ba-faq details{border-bottom:1px solid var(--ba-line)}
.ba-faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:.9rem;
  padding:.95rem .2rem;font-family:var(--serif);font-weight:700;font-size:clamp(.93rem,1.6vw,1.02rem);
  line-height:1.85;color:var(--night)}
.ba-faq summary::-webkit-details-marker{display:none}
.ba-faq summary::before{content:"Q";font-family:var(--ba-mono);font-size:.76rem;font-weight:800;
  color:var(--red-t);line-height:2.2;flex:none}
.ba-faq summary::after{content:"+";margin-left:auto;font-family:var(--ba-mono);font-weight:700;
  color:var(--muted);line-height:1.9;flex:none}
.ba-faq details[open] summary::after{content:"−"}
.ba-faq details p{margin:0 0 1.05rem;padding-left:1.65rem;font-size:.87rem;line-height:2.05;color:var(--ink-2);max-width:44em}

.ba-contact{margin-top:clamp(2rem,4.5vw,3rem);background:var(--ba-ivory-2);
  border:1px solid var(--ba-line);border-left:1px solid var(--red-t);border-radius:6px;
  padding:clamp(1.3rem,3vw,2rem)}
.ba-contact h3{font-family:var(--serif);font-weight:700;color:var(--night);
  font-size:clamp(1.06rem,2.3vw,1.44rem);line-height:1.85;margin:0 0 1.3rem}

/* ---------- 拡大モーダル ---------------------------------------------- */
.ba-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(.8rem,3vw,2rem)}
.ba-modal[hidden]{display:none}
.ba-modal-bd{position:absolute;inset:0;background:rgba(11,13,20,.82);cursor:zoom-out}
.ba-modal-box{position:relative;width:min(100%,1080px);max-height:92vh;display:flex;flex-direction:column;
  background:var(--white);border-radius:6px;overflow:hidden}
.ba-modal-x{align-self:flex-end;margin:.5rem .6rem 0;border:1px solid var(--ba-line);border-radius:999px;
  background:var(--white);color:var(--night);font-size:.76rem;line-height:1.8;padding:.2rem .8rem;cursor:pointer}
.ba-modal-scroll{flex:1 1 auto;overflow:auto;padding:.6rem;display:flex;justify-content:center;
  align-items:flex-start;background:var(--ba-ivory)}
.ba-modal-scroll img{display:block;max-width:100%;height:auto}
.ba-modal-cap{margin:0;padding:.7rem 1rem .9rem;font-size:.8rem;line-height:1.9;color:var(--ink-2);
  border-top:1px solid var(--ba-line)}

/* ---------- 縮小時に横へはみ出さない ---------------------------------- */
.ba img,.ba table{max-width:100%}
.ba .wrap{overflow-x:clip}

/* ---------- アプリの実アイコン (株主 2026-09-03 16:14) ------------------ */
.ba img.ba-appic{display:block;width:22px;height:22px;flex:none;border-radius:6px;
  background:var(--white);border:1px solid var(--ba-line)}
.ba-car-s figcaption{display:flex;align-items:center;justify-content:center;gap:.5rem}

/* =====================================================================
   モバイル最適化 (株主 2026-09-03 16:00「モバイル最適化がほとんど皆無」)
   PC の見た目は変えない。
   ===================================================================== */
/* iOS Safari 対策: 角丸の枠は中身を確実に切る */
.ba-doc,.ba-doc-b,.ba-car,.ba-car-tr,.ba-flow,.ba-cards li{contain:paint}

@media(max-width:820px){
  /* 主要CTAは全幅 */
  .ba-fv-actions,.ba-contact .hero-actions{display:grid;grid-template-columns:1fr}
  .ba-fv-actions .cta,.ba-contact .hero-actions .cta{width:100%;justify-content:center}
  /* 見出しの折返し */
  .ba-fv h1{font-size:clamp(1.68rem,7.2vw,2.15rem);line-height:1.6;max-width:none}
  .ba-sec h2{text-wrap:balance;max-width:none}
  .ba-claim{font-size:1.06rem;line-height:1.85;padding-left:1rem;max-width:none}
  .ba-lead{line-height:1.95;max-width:none}
  /* 資料4点は1画面に1枚(潰れると読めない) */
  .ba-docs{grid-template-columns:1fr}
  .ba-doc-b{aspect-ratio:3 / 2}
  /* カルーセルは 44px のタップ領域 */
  .ba-car{max-width:none}
  .ba-car-b{width:44px;height:44px}
  .ba-car-dots{gap:0}
  .ba-car-dots button{width:44px;height:44px;border:0;background:transparent;position:relative}
  .ba-car-dots button::before{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;
    margin:-4.5px 0 0 -4.5px;border-radius:50%;border:1px solid var(--muted);background:transparent}
  .ba-car-dots button[aria-current="true"]{background:transparent}
  .ba-car-dots button[aria-current="true"]::before{background:var(--ba-c);border-color:var(--ba-c)}
  /* アコーディオンのタップ領域 */
  .ba-faq summary{padding:1.05rem .2rem;min-height:48px}
}
@media(max-width:560px){
  .ba-fv{padding-top:clamp(5.8rem,12vh,7.6rem)}
  .ba-one-line{gap:.5rem}
}

/* =====================================================================
   2026-09-03 株主指示 — 役割ごとに見た目を分ける
   05「期間と費用」は読むだけのカード、その直後の .ba-next / .svc-card は押せるカード。
   同型だったので、読むだけの方は実面と上辺3pxを外して破線の枠にする。
   選択欄は 05 と地続きに見えていたので、上に罫と余白を入れて別の欄にする。
   ===================================================================== */
.ba-terms li{background:transparent;border-style:dashed}
.ba-terms li::before{content:none}
.ba-terms .is-main{background:var(--white);border-style:solid;
  border-color:color-mix(in srgb,var(--ba-c) 34%,transparent)}
.ba-sec-sel{padding-top:clamp(2rem,4.4vw,3.4rem);border-top:1px solid var(--ba-line)}
