/* ============================================================
   基礎ロングライフシステム（独立サービスページ）
   構成の参考: syslife.co.jp/solution/transportation
   ・ファーストビューに食い込む「追従アンカータブ」
   ・プラン部はもう一段の追従タブ（top をずらして二段重ね）
   ============================================================ */

:root{
  /* 追従タブの貼り付き位置。ヘッダー高さが変わったらここだけ直す */
  --kiso-hdr:  129px;              /* 縮む前のヘッダー高（JSが実測値で上書き） */
  --kiso-stick: var(--kiso-hdr);   /* 現在のヘッダー高。スクロールで縮むぶんに追従する */
  /* ヘッダーの真下にぴったり貼り付ける。+8px すると白い隙間ができる。 */
  --kiso-tab1: var(--kiso-stick);
  --kiso-tab2: calc(var(--kiso-tab1) + 62px);
}
@media(max-width:820px){ :root{ --kiso-hdr:64px; } }

/* ---------- ファーストビュー ---------- */
.kiso-fv{ position:relative; min-height:min(78vh, 660px); display:flex; align-items:center;
  padding:calc(var(--kiso-hdr) + 48px) 0 110px; overflow:hidden;
  background:
    radial-gradient(100% 92% at 84% -8%, rgba(53,82,143,.55) 0%, transparent 52%),
    radial-gradient(85% 80% at 2% 108%, rgba(28,111,184,.30) 0%, transparent 48%),
    linear-gradient(158deg, var(--navy) 0%, #0B1730 72%); }
/* 方眼テクスチャ（アイキャッチ未設定時の既定背景。既存サイトのヒーローと同じ処理） */
.kiso-fv:not(.has-photo)::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(125% 105% at 72% 15%, #000 28%, transparent 76%);
          mask-image:radial-gradient(125% 105% at 72% 15%, #000 28%, transparent 76%); }
.kiso-fv::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:2;
  background:linear-gradient(90deg, transparent, var(--gold), transparent); }
.kiso-fv__bg{ position:absolute; inset:0; }
.kiso-fv__bg img{ width:100%; height:100%; object-fit:cover; }
/* 写真は「素材感」として敷く程度に沈める。追従タブ（白カード）が読める濃さを保つ。 */
.kiso-fv.has-photo .kiso-fv__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(10,16,30,.95) 0%, rgba(10,16,30,.88) 46%, rgba(10,16,30,.66) 100%); }
.kiso-fv__inner{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 380px; gap:48px; align-items:center; }
.kiso-fv__crumb{ color:rgba(255,255,255,.6); margin-bottom:22px; }
.kiso-fv__crumb a{ color:rgba(255,255,255,.8); }
.kiso-fv__eyebrow{ margin:0 0 10px; color:var(--gold); font-weight:700; letter-spacing:.1em; font-size:.82rem; }
/* 「家を支える「基礎」まで、守る。」15字が1行（696px）に収まる字送り */
.kiso-fv__h1{ margin:0 0 20px; color:#fff; font-size:clamp(1.9rem, 3.2vw, 2.8rem); line-height:1.34; letter-spacing:.01em; }
.kiso-fv__lead{ margin:0 0 24px; color:rgba(255,255,255,.86); font-size:.98rem; line-height:2; max-width:44em; }

.kiso-tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.kiso-tags li{ padding:0 13px; line-height:28px; font-size:.74rem; font-weight:500; color:#fff;
  background:var(--navy); border-radius:3px; }

/* 右のCTAカード */
.kiso-fv__r{ background:linear-gradient(150deg, var(--navy) 0%, #24406f 100%); border-radius:14px;
  padding:28px 24px 30px; box-shadow:0 18px 44px rgba(0,0,0,.34); }
.kiso-cta__title{ margin:0 0 22px; color:#fff; font-weight:700; text-align:center; line-height:1.7; font-size:1rem; }
.kiso-cta{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px; }
.kiso-cta li{ position:relative; }
.kiso-cta em{ display:block; position:relative; margin-bottom:12px; padding:7px 10px; border-radius:6px;
  background:var(--charcoal,#1B1C1A); color:#fff; font-style:normal; font-size:.72rem; font-weight:700;
  text-align:center; line-height:1.5; }
.kiso-cta em::after{ content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  border:7px solid transparent; border-top-color:var(--charcoal,#1B1C1A); border-bottom:0; }
.kiso-cta a{ display:flex; align-items:center; justify-content:center; gap:9px; min-height:56px; padding:0 18px;
  border-radius:30px; background:#fff; color:var(--ink); font-weight:700; font-size:.95rem;
  box-shadow:0 4px 14px rgba(0,0,0,.18); transition:var(--tr); }
.kiso-cta a:hover{ background:var(--gold); color:#fff; }
.kiso-cta .ic{ width:19px; height:19px; color:var(--red); transition:var(--tr); }
.kiso-cta a:hover .ic{ color:#fff; }

@media(max-width:1000px){
  .kiso-fv__inner{ grid-template-columns:1fr; gap:32px; }
  .kiso-fv__r{ max-width:420px; }
}

/* ---------- 追従アンカータブ（syslife の comAnchorList 相当） ----------
   ヒーローの上では浮いたカード、ヘッダーに貼り付いたら白帯に切り替える。
   浮いたままだと本文がカードの隙間を通り抜け、ヘッダーの影と重なって濁るため。 */
.kiso-anchors{ position:sticky; top:var(--kiso-tab1); z-index:900; margin-top:-58px; margin-bottom:8px;
  padding:6px 0; transition:background .25s, box-shadow .25s, padding .25s; }
.kiso-anchors ul{ list-style:none; margin:0; padding:0; display:flex; gap:8px; }
.kiso-anchors li{ flex:1; min-width:0; }
.kiso-anchors a{ position:relative; display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:56px; padding:10px 8px 20px; border-radius:8px; background:#fff; color:var(--ink);
  font-size:.82rem; font-weight:700; line-height:1.4; white-space:nowrap;
  box-shadow:0 2px 12px rgba(0,0,0,.14); transition:background .3s, color .3s, box-shadow .25s, min-height .25s; }
.kiso-anchors a::after{ content:""; position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--gold); border-bottom:0; transition:border-color .3s; }
/* 現在地はゴールド。ネイビーだとヒーロー背景に沈んで見えなくなる。 */
.kiso-anchors a:hover,
.kiso-anchors li.is-on a{ background:var(--gold); color:#fff; }
.kiso-anchors a:hover::after,
.kiso-anchors li.is-on a::after{ border-top-color:#fff; }

/* 貼り付いた状態：ヘッダーに続く白帯にする（間に隙間を作らない） */
.kiso-anchors.is-stuck{ background:#fff; border-bottom:1px solid var(--line);
  box-shadow:0 4px 12px rgba(0,0,0,.06); padding:7px 0; }
.kiso-anchors.is-stuck a{ min-height:44px; padding:8px 8px 18px; box-shadow:none;
  border:1px solid var(--line); }
.kiso-anchors.is-stuck a:hover,
.kiso-anchors.is-stuck li.is-on a{ border-color:var(--gold); }

@media(max-width:900px){
  .kiso-anchors{ margin-top:-38px; }
  .kiso-anchors .container{ padding-right:0; }
  .kiso-anchors ul{ overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
  .kiso-anchors li{ flex:0 0 auto; scroll-snap-align:start; }
  .kiso-anchors a{ min-height:44px; padding:8px 18px 16px; font-size:.78rem; }
  .kiso-anchors ul::after{ content:""; flex:0 0 20px; }
}

/* アンカー位置の逃がし（追従ヘッダーの下に隠れないように） */
.kiso-sec{ scroll-margin-top:calc(var(--kiso-tab1) + 72px); }
.kiso-plan{ scroll-margin-top:calc(var(--kiso-tab2) + 66px); }

/* ---------- セクション共通 ---------- */
.kiso-sec--alt{ background:var(--gray-100); padding:78px 0; }
.kiso-sec--plans{ background:var(--gray-100); padding:78px 0 90px; border-radius:22px 22px 0 0; }
.section-head .section-title small{ display:block; margin-top:12px; font-size:.86rem; font-weight:500;
  color:var(--gray-600); line-height:1.9; letter-spacing:0; }

/* ---------- 概要：劣化の4要因 ---------- */
.kiso-problems{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.kiso-problem{ position:relative; background:#fff; border:1px solid var(--line); border-radius:12px; padding:26px 22px 24px; }
.kiso-problem__n{ display:block; margin-bottom:10px; color:var(--gold); font-weight:700; font-size:.86rem; letter-spacing:.1em; }
.kiso-problem h3{ margin:0 0 8px; font-size:1.06rem; color:var(--ink); }
.kiso-problem p{ margin:0; font-size:.85rem; color:var(--gray-600); line-height:1.85; }
@media(max-width:900px){ .kiso-problems{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .kiso-problems{ grid-template-columns:1fr; } }

/* 劣化プロセス */
.kiso-decay{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.kiso-decay__step{ position:relative; background:var(--gray-100); border-radius:10px; padding:22px 18px; }
.kiso-decay__step:not(:last-child)::after{ content:""; position:absolute; right:-11px; top:50%; transform:translateY(-50%);
  border:7px solid transparent; border-left-color:var(--gray-300,#d8d8d8); border-right:0; }
.kiso-decay__n{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:var(--navy); color:#fff; font-size:.78rem; font-weight:700; margin-bottom:10px; }
.kiso-decay__step b{ display:block; margin-bottom:6px; font-size:.95rem; color:var(--ink); }
.kiso-decay__step p{ margin:0; font-size:.8rem; color:var(--gray-600); line-height:1.8; }
@media(max-width:900px){ .kiso-decay{ grid-template-columns:repeat(2,1fr); } .kiso-decay__step::after{ display:none !important; } }
@media(max-width:520px){ .kiso-decay{ grid-template-columns:1fr; } }

/* ---------- 解決（ダーク帯） ---------- */
.kiso-solve{ background:var(--charcoal,#1B1C1A); padding:82px 0 88px; color:#fff; }
.kiso-perf{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.kiso-perf__item{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:24px 20px; }
.kiso-perf__n{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
  background:var(--gold); color:#fff; font-weight:700; font-size:.86rem; margin-bottom:12px; }
.kiso-perf__item b{ display:block; margin-bottom:8px; font-size:.96rem; color:#fff; line-height:1.6; }
.kiso-perf__item p{ margin:0; font-size:.82rem; color:rgba(255,255,255,.72); line-height:1.9; }
@media(max-width:900px){ .kiso-perf{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .kiso-perf{ grid-template-columns:1fr; } }

.kiso-compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.kiso-comp{ border-radius:12px; padding:26px 24px; }
.kiso-comp__h{ font-weight:700; margin-bottom:14px; font-size:.95rem; }
.kiso-comp__h span{ font-weight:500; font-size:.8em; opacity:.75; }
.kiso-comp__lead{ margin:0 0 14px; font-size:1.14rem; font-weight:700; }
.kiso-comp ul{ margin:0; padding-left:1.2em; }
.kiso-comp li{ font-size:.86rem; line-height:2; }
.kiso-comp--bad{ background:rgba(255,255,255,.06); color:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.12); }
.kiso-comp--good{ background:#fff; color:var(--ink); }
.kiso-comp--good .kiso-comp__lead{ color:var(--navy); }
@media(max-width:760px){ .kiso-compare{ grid-template-columns:1fr; } }

/* ---------- プラン：二段目の追従タブ ---------- */
.kiso-subtabs{ position:sticky; top:var(--kiso-tab2); z-index:800; margin:26px 0 34px; }
.kiso-subtabs ul{ list-style:none; margin:0; padding:10px 26px; display:flex; justify-content:center; gap:34px;
  background:#3d3f3c; border-radius:8px; box-shadow:0 2px 14px rgba(0,0,0,.24); }
.kiso-subtabs a{ display:inline-flex; align-items:center; gap:9px; color:rgba(255,255,255,.9);
  font-size:.85rem; font-weight:500; white-space:nowrap; transition:var(--tr); }
.kiso-subtabs a .n{ color:var(--gold); font-weight:700; }
.kiso-subtabs a:hover, .kiso-subtabs li.is-on a{ color:var(--gold); }
@media(max-width:900px){
  .kiso-subtabs{ position:static; }
  .kiso-subtabs .container{ padding-right:0; }
  .kiso-subtabs ul{ justify-content:flex-start; gap:20px; overflow-x:auto; padding:10px 16px; }
}

.kiso-plan{ background:#fff; border-radius:12px; overflow:hidden; margin-bottom:22px; box-shadow:var(--shadow-sm); }
.kiso-plan__h{ display:flex; align-items:center; gap:18px; margin:0; padding:16px 28px;
  background:var(--charcoal,#1B1C1A); color:#fff; font-size:1.14rem; }
.kiso-plan__h .n{ color:var(--gold); font-weight:700; }
.kiso-plan__b{ padding:30px 30px 32px; }
.kiso-plan__spec{ display:inline-block; margin:0 0 16px; padding:5px 12px; border-radius:4px;
  background:var(--gray-100); color:var(--gray-600); font-size:.78rem; font-weight:700; }
.kiso-plan__b h4{ margin:0 0 12px; font-size:1.06rem; color:var(--navy); line-height:1.6; }
.kiso-plan__b p{ margin:0 0 6px; font-size:.9rem; color:var(--gray-600); line-height:2; }
.kiso-plan__note{ margin-top:14px !important; font-size:.84rem !important; }

/* 参考価格・収益モデル（ログインで開示） */
.kiso-locked{ margin:34px 0 0; padding:30px 30px 32px; border-radius:12px;
  background:#fff; border:1px dashed var(--gold-soft, #d9c9a8); }
.kiso-locked.is-open{ border-style:solid; }
.kiso-locked h3{ display:flex; align-items:center; gap:10px; margin:0 0 10px; font-size:1.06rem; color:var(--navy); }
.kiso-locked h3 .ic{ width:19px; height:19px; color:var(--gold); }
.kiso-locked p{ margin:0 0 18px; font-size:.88rem; color:var(--gray-600); line-height:1.95; }

.kiso-merits{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:34px; }
.kiso-merit{ background:#fff; border-radius:10px; padding:22px 22px 20px; border:1px solid var(--line); }
.kiso-merit b{ display:block; margin-bottom:8px; color:var(--ink); font-size:.98rem; }
.kiso-merit p{ margin:0; font-size:.85rem; color:var(--gray-600); line-height:1.9; }
@media(max-width:760px){ .kiso-merits{ grid-template-columns:1fr; } }

/* ---------- 効果・データ ---------- */
.kiso-evidence{ display:flex; flex-direction:column; gap:26px; }
.kiso-ev{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:32px 32px 28px; }
.kiso-ev__key{ display:inline-flex; align-items:center; gap:10px; margin-bottom:14px; padding:5px 14px;
  border-radius:99px; background:var(--navy); color:#fff; font-size:.74rem; font-weight:700; letter-spacing:.06em; }
.kiso-ev__key span{ color:var(--gold-soft,#e2c98f); }
.kiso-ev h3{ margin:0 0 12px; font-size:1.34rem; color:var(--ink); line-height:1.5; }
.kiso-ev__lead{ margin:0 0 22px; font-size:.9rem; color:var(--gray-600); line-height:2; }
.kiso-ev__note{ margin:20px 0 0; font-size:.74rem; color:var(--gray-500); line-height:1.8; }
/* スマホでは左右32pxの余白が効きすぎて本文が細くなるので詰める */
@media(max-width:560px){
  .kiso-ev{ padding:24px 18px 22px; }
  .kiso-ev h3{ font-size:1.16rem; }
  .kiso-plan__h{ padding:14px 18px; font-size:1rem; gap:12px; }
  .kiso-plan__b{ padding:22px 18px 24px; }
  .kiso-locked{ padding:24px 18px 26px; }
}

.kiso-ev__stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.kiso-ev__stats > div{ background:var(--gray-100); border-radius:10px; padding:20px; text-align:center; }
.kiso-ev__stats .v{ display:block; font-size:1.9rem; font-weight:700; color:var(--navy); line-height:1.2; font-variant-numeric:tabular-nums; }
.kiso-ev__stats .l{ display:block; margin-top:8px; font-size:.78rem; color:var(--gray-600); }
@media(max-width:560px){ .kiso-ev__stats{ grid-template-columns:1fr; } }

.kiso-bars__cap{ margin:0 0 14px; font-size:.78rem; color:var(--gray-500); }
.kiso-bar{ display:grid; grid-template-columns:170px 1fr 62px; align-items:center; gap:12px; margin-bottom:9px; }
.kiso-bar__l{ font-size:.82rem; color:var(--gray-600); }
.kiso-bar__t{ height:20px; border-radius:4px; background:var(--gray-100); overflow:hidden; }
.kiso-bar__t > span{ display:block; height:100%; background:var(--gray-300,#cfcfcf); border-radius:4px; }
.kiso-bar__v{ font-size:.82rem; color:var(--gray-600); text-align:right; font-variant-numeric:tabular-nums; }
.kiso-bar.is-own .kiso-bar__l,
.kiso-bar.is-own .kiso-bar__v{ color:var(--navy); font-weight:700; }
.kiso-bar.is-own .kiso-bar__t > span{ background:var(--navy); }
@media(max-width:640px){ .kiso-bar{ grid-template-columns:110px 1fr 54px; gap:8px; } .kiso-bar__l{ font-size:.74rem; } }

/* ---------- FAQ ---------- */
.kiso-faq{ display:flex; flex-direction:column; gap:10px; }
.kiso-faq__i{ background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.kiso-faq__i summary{ display:flex; align-items:flex-start; gap:14px; padding:18px 46px 18px 20px; cursor:pointer;
  font-weight:700; color:var(--ink); font-size:.95rem; line-height:1.7; position:relative; list-style:none; }
.kiso-faq__i summary::-webkit-details-marker{ display:none; }
.kiso-faq__i summary .q{ flex:none; width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.76rem; }
.kiso-faq__i summary::after{ content:""; position:absolute; right:22px; top:26px; width:9px; height:9px;
  border-right:2px solid var(--gray-500); border-bottom:2px solid var(--gray-500);
  transform:rotate(45deg); transition:transform .25s; }
.kiso-faq__i[open] summary::after{ transform:rotate(-135deg); }
.kiso-faq__a{ padding:0 22px 22px 58px; font-size:.88rem; color:var(--gray-600); line-height:2.05; }
@media(max-width:560px){ .kiso-faq__a{ padding-left:22px; } }

/* プランカード: 注記→ボタン 6px→20px／ログイン案内: 説明文→ボタン 18px→24px（2026-09-06 計測して修正） */
.kiso-plan__b .btn-group{ margin-top:20px; }
.kiso-locked p{ margin-bottom:24px; }