/* =========================================================
   事例詳細 案A「事例ファイル」（白い紙面・一覧の続き）
   ・事例一覧 case/final.html（.case-b / cb-）の部品を ca- に付け替えて流用
   ・すべて .cd-a の内側に限定（共通ヘッダー・フッターに影響させない）
   ・CSSで初期非表示にする指定は置かない（JS無効・reduced-motion でも全要素が見える）
   ========================================================= */
/* 差し込まれるヘッダーに無いスキップリンク（このページの1本だけを対象にする） */
a.na-skip[href="#cd-a"]{position:fixed;left:12px;top:-60px;z-index:200;padding:10px 16px;border-radius:6px;background:#10161b;color:#fff;font:700 14px/1.5 'Noto Sans JP',sans-serif;text-decoration:none}
a.na-skip[href="#cd-a"]:focus{top:12px}

.cd-a{
  --blue:#479CD9;
  --deep:#1E5F8C;
  --ink:#10161b;
  --muted:#4b5a63;
  --line:#cddce8;
  --paper:#f8fbfd;
  --rule:rgba(16,22,27,.9);
  --hair:rgba(16,22,27,.16);
  --sky:#a9d6f5;
  --en:'Barlow Condensed','Noto Sans JP',sans-serif;
  --ja:'Noto Sans JP',sans-serif;
  /* 共通ヘッダーのいまの高さ（スクロールで縮むと自動で追従） */
  --header-h:var(--na-hh, 74px);
  display:block;margin:0;
  font-family:var(--ja);font-size:16px;font-weight:400;line-height:1.85;letter-spacing:normal;
  color:var(--ink);background:#fff;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
.cd-a:focus{outline:none}
.cd-a,.cd-a *,.cd-a *::before,.cd-a *::after{box-sizing:border-box}
.cd-a :where(h1,h2,h3,p,ul,ol,li,figure,figcaption,blockquote,dl,dt,dd){margin:0}
/* site.css の h1/h2/h3（色・書体・字間）を打ち消す */
.cd-a h1,.cd-a h2,.cd-a h3{color:inherit;font-family:inherit;font-weight:900;letter-spacing:normal}
.cd-a ul,.cd-a ol{padding:0;list-style:none}
.cd-a a{color:inherit;text-decoration:none}
.cd-a svg{display:block}
.cd-a img{max-width:100%}
.cd-a img.is-missing{visibility:hidden}
.cd-a [hidden]{display:none !important}
.cd-a .ca-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cd-a .ca-wrap{width:min(1200px, 100% - 48px);margin-inline:auto}
@supports (word-break:auto-phrase){ .cd-a .ap{word-break:auto-phrase} }
.cd-a .ca-ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.cd-a .ca-ln-in{display:block}
.cd-a .ca-rule{display:block;height:2px;background:var(--rule);transform-origin:0 50%}
.cd-a .ca-rule--hair{height:1px;background:var(--hair)}

/* ---------- 読み込み中・エラー ---------- */
.cd-a .ca-status{padding:clamp(96px, 14vw, 180px) 0;text-align:center;font-size:15px;font-weight:700;color:var(--muted)}

/* ---------- ボタン（一覧の cb-btn と同じ） ---------- */
.cd-a .ca-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:58px;padding:14px 28px;border-radius:999px;
  font-weight:700;font-size:16px;line-height:1.4;text-align:center;
  transition:transform .2s, box-shadow .2s, background-color .2s, color .2s;
}
.cd-a .ca-btn .arr{display:inline-block;font-family:var(--en);font-weight:800;font-size:1.15em;line-height:1;transition:transform .2s}
.cd-a .ca-btn:hover .arr{transform:translateX(4px)}
.cd-a .ca-btn .arr--down{transform:none}
.cd-a .ca-btn:hover .arr--down{transform:translateY(3px)}
.cd-a .ca-btn .arr--back{order:-1}
.cd-a .ca-btn:hover .arr--back{transform:translateX(-4px)}
.cd-a .ca-btn--deep{background:var(--deep);color:#fff;box-shadow:0 12px 26px -14px rgba(30,95,140,.8)}
.cd-a .ca-btn--deep:hover{background:#174e75;transform:translateY(-2px)}
.cd-a .ca-btn--outline{border:1.5px solid var(--ink);color:var(--ink);background:#fff;font-size:15px}
.cd-a .ca-btn--outline:hover{background:var(--paper)}
.cd-a .ca-btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.cd-a .ca-btn svg{flex:0 0 20px;width:20px;height:20px}

/* ---------- 共通の見出し（一覧の cb-label / cb-h2） ---------- */
.cd-a .ca-label{display:flex;align-items:center;gap:12px;font-family:var(--en);font-weight:700;font-size:14px;line-height:1.4;letter-spacing:.26em;color:var(--deep)}
.cd-a .ca-label i{font-style:normal;color:var(--blue)}
.cd-a .ca-label::after{content:"";flex:1 1 auto;height:1px;background:var(--hair)}
.cd-a .ca-h2{margin-top:16px;font-weight:900;font-size:clamp(26px, 2.2vw + 6px, 40px);line-height:1.4;letter-spacing:.02em}
.cd-a .ca-text{font-size:16px;line-height:2;color:var(--muted)}

/* 支援タグ（一覧の cb-tags と同じ） */
.cd-a .ca-tags{display:flex;flex-wrap:wrap;gap:6px}
.cd-a .ca-tags li{padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:12px;font-weight:700;line-height:1.6;color:var(--deep)}

/* =========================================================
   01 ヒーロー（masthead → CASE番号・h1・lead ／ 図版＋仕様表）
   ========================================================= */
.cd-a .ca-hero{padding:24px 0 clamp(56px, 7vw, 96px);background:#fff}
.cd-a .ca-masthead{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:12px 0 11px;
  font-family:var(--en);font-weight:700;font-size:13px;line-height:1.4;letter-spacing:.26em;color:var(--ink);
}
.cd-a .ca-masthead b{font-weight:800;color:var(--blue)}
.cd-a .ca-masthead span:nth-child(2){text-align:center;color:var(--deep);font-family:var(--ja);letter-spacing:.3em}
.cd-a .ca-masthead span:last-child{text-align:right;color:var(--muted)}
.cd-a .ca-hero-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px, 5vw, 72px);align-items:start;margin-top:clamp(32px, 4vw, 56px)}
.cd-a .ca-hero-text{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
/* 巨大な CASE 番号 */
.cd-a .ca-no{display:flex;align-items:baseline;gap:14px;font-family:var(--en);line-height:1}
.cd-a .ca-no-k{font-weight:800;font-size:clamp(18px, 1.2vw + 6px, 24px);letter-spacing:.24em;color:var(--ink)}
.cd-a .ca-no-n{font-weight:900;font-size:clamp(108px, 11vw, 180px);line-height:.78;letter-spacing:-.01em;color:var(--deep);font-variant-numeric:tabular-nums}
.cd-a .ca-no-of{font-weight:800;font-size:clamp(16px, 1vw + 6px, 20px);letter-spacing:.14em;color:var(--muted)}
.cd-a .ca-cat{display:inline-flex;align-items:center;gap:10px;margin-top:30px;font-size:14px;font-weight:700;line-height:1.5;color:var(--deep);letter-spacing:.04em}
.cd-a .ca-cat::before{content:"";width:22px;height:2px;background:var(--blue)}
.cd-a .ca-h1{margin-top:14px;line-height:1.38;letter-spacing:.02em}
.cd-a .ca-h1-main{font-size:clamp(30px, 2.2vw + 10px, 46px);line-height:1.38}
.cd-a .ca-h1-sub{margin-top:14px;font-size:clamp(17px, .7vw + 11px, 21px);font-weight:700;line-height:1.7;color:var(--deep)}
.cd-a .ca-lead{margin-top:26px;max-width:36em}
.cd-a .ca-lead p{font-size:16px;font-weight:500;line-height:2;color:#2c3a44}
.cd-a .ca-lead p + p{margin-top:.7em}
.cd-a .ca-hero-actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
/* 右：図版＋仕様表 */
.cd-a .ca-hero-side{min-width:0}
.cd-a .ca-fig-frame{padding:8px;border:1px solid var(--hair);background:#fff}
.cd-a .ca-fig-img{position:relative;aspect-ratio:1040 / 582;overflow:hidden;background:var(--paper)}
.cd-a .ca-fig-img img{display:block;width:100%;height:100%;object-fit:cover}
.cd-a .ca-figcap{display:flex;gap:12px;align-items:baseline;margin-top:12px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.cd-a .ca-figcap b{flex:0 0 auto;font-family:var(--en);font-weight:800;font-size:12px;letter-spacing:.16em;color:var(--ink)}
.cd-a .ca-spec{margin-top:30px;border-top:2px solid var(--rule)}
.cd-a .ca-spec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0 10px;border-bottom:1px solid var(--hair);font-family:var(--en);font-weight:700;font-size:13px;line-height:1.4;letter-spacing:.26em}
.cd-a .ca-spec-head span:last-child{font-family:var(--ja);font-size:12.5px;letter-spacing:.06em;color:var(--muted)}
.cd-a .ca-spec-row{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:16px;padding:14px 0;border-bottom:1px solid var(--hair)}
.cd-a .ca-spec-row dt{font-size:13px;font-weight:700;line-height:1.6}
.cd-a .ca-spec-row dt span{display:block;font-family:var(--en);font-weight:700;font-size:11.5px;letter-spacing:.22em;color:var(--deep);line-height:1.4}
.cd-a .ca-spec-row dd{min-width:0;font-size:14.5px;font-weight:700;line-height:1.75}
.cd-a .ca-support{display:flex;flex-wrap:wrap;row-gap:2px}
.cd-a .ca-support li + li::before{content:"/";margin:0 .55em;font-family:var(--en);font-weight:700;color:#9fb3c2}

/* =========================================================
   02 本文（一覧の見開きを1件ぶん広げた紙面）
   ========================================================= */
.cd-a .ca-main{padding:clamp(48px, 6vw, 88px) 0 clamp(64px, 8vw, 112px);background:var(--paper);border-top:1px solid var(--hair)}
.cd-a .ca-sheet{
  background:#fff;border:1px solid var(--hair);
  box-shadow:0 30px 60px -44px rgba(16,22,27,.35);
  padding:clamp(22px, 3vw, 36px) clamp(22px, 3.6vw, 52px) clamp(36px, 4.4vw, 64px);
}
/* 柱（フォリオ） */
.cd-a .ca-folio{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;column-gap:20px;padding-bottom:12px}
.cd-a .ca-folio-no{font-family:var(--en);font-weight:900;font-size:clamp(30px, 2.6vw, 40px);line-height:.9;color:var(--deep);letter-spacing:.02em}
.cd-a .ca-folio-no small{font-size:.42em;letter-spacing:.24em;color:var(--ink);margin-right:8px;vertical-align:.5em}
.cd-a .ca-folio-t{min-width:0;font-size:14px;font-weight:700;line-height:1.5}
.cd-a .ca-folio-ind{font-size:12.5px;font-weight:700;line-height:1.5;color:var(--muted);text-align:right}
.cd-a .ca-sheet-in{display:grid;grid-template-columns:184px minmax(0,1fr);column-gap:clamp(32px, 4.4vw, 64px);margin-top:clamp(32px, 3.6vw, 48px)}
/* 左：sticky の小目次 */
.cd-a .ca-side{min-width:0}
.cd-a .ca-toc{position:sticky;top:calc(var(--header-h) + 28px)}
.cd-a .ca-toc-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:12px 0 10px;border-top:2px solid var(--rule);border-bottom:1px solid var(--hair);font-family:var(--en);font-weight:700;font-size:12.5px;line-height:1.4;letter-spacing:.26em}
.cd-a .ca-toc-head span:last-child{font-family:var(--ja);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.cd-a .ca-toc li{border-bottom:1px solid var(--hair)}
.cd-a .ca-toc li a{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);align-items:baseline;column-gap:8px;padding:13px 0 13px 12px;transition:background-color .2s}
.cd-a .ca-toc li a::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:transparent;transition:background-color .25s}
.cd-a .ca-toc li a:hover{background:var(--paper)}
.cd-a .ca-toc li a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.cd-a .ca-toc-no{font-family:var(--en);font-weight:900;font-size:24px;line-height:1;color:#9fb3c2;transition:color .25s}
.cd-a .ca-toc-t{font-size:14.5px;font-weight:700;line-height:1.5;color:var(--muted);transition:color .25s}
.cd-a .ca-toc li a.is-current::before{background:var(--blue)}
.cd-a .ca-toc li a.is-current .ca-toc-no{color:var(--blue)}
.cd-a .ca-toc li a.is-current .ca-toc-t{color:var(--ink)}
.cd-a .ca-toc-cta{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:3px 0;border-bottom:2px solid var(--ink);font-size:13.5px;font-weight:700;line-height:1.6;white-space:nowrap;transition:color .2s, border-color .2s}
.cd-a .ca-toc-cta .arr{font-family:var(--en);font-weight:800;font-size:16px;transition:transform .2s}
.cd-a .ca-toc-cta:hover{color:var(--deep);border-color:var(--deep)}
.cd-a .ca-toc-cta:hover .arr{transform:translateX(4px)}
.cd-a .ca-toc-cta:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
/* 右：本文 */
.cd-a .ca-content{min-width:0;display:grid;row-gap:clamp(64px, 7vw, 96px)}
.cd-a .ca-sec{min-width:0;scroll-margin-top:calc(var(--header-h) + 24px)}
.cd-a .ca-sec-head{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;align-items:end;padding-bottom:16px}
.cd-a .ca-sec-no{font-family:var(--en);font-weight:900;font-size:clamp(52px, 4.6vw, 68px);line-height:.8;color:var(--blue)}
.cd-a .ca-sec-en{display:block;font-family:var(--en);font-weight:700;font-size:13px;line-height:1.4;letter-spacing:.26em;color:var(--deep)}
.cd-a .ca-sec-head h2{margin-top:4px;font-size:clamp(24px, 1.5vw + 10px, 34px);line-height:1.4;letter-spacing:.02em}

/* 01 Before / After：左右の見開き（左＝改善前の課題、右＝実施した改善）＋欄外メモ */
.cd-a .ca-ba{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:stretch;margin-top:0;border-bottom:1px solid var(--hair)}
.cd-a .ca-ba-col{min-width:0;padding:22px 0 26px}
.cd-a .ca-ba-col--before{padding-left:clamp(16px, 1.8vw, 24px);padding-right:clamp(16px, 1.8vw, 24px);background:#f2f5f8}
.cd-a .ca-ba-col--after{padding-left:4px}
.cd-a .ca-ba-k{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding-bottom:12px;border-bottom:1px solid var(--hair)}
.cd-a .ca-ba-en{font-family:var(--en);font-weight:900;font-size:clamp(30px, 2.2vw + 6px, 40px);line-height:1;letter-spacing:.04em}
.cd-a .ca-ba-col--before .ca-ba-en{color:#93a7b6}
.cd-a .ca-ba-col--after .ca-ba-en{color:var(--blue)}
.cd-a .ca-ba-ja{font-size:15px;font-weight:700;line-height:1.5}
.cd-a .ca-ba-col--before .ca-ba-ja{color:var(--muted)}
.cd-a .ca-ba-col--before .ca-issues li{color:#3d4a53}
.cd-a .ca-ba-col--before .ca-issues li:last-child{border-bottom:0}
.cd-a .ca-ba-arrow{position:relative;display:flex;justify-content:center}
.cd-a .ca-ba-arrow::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--hair)}
.cd-a .ca-ba-arrow span{position:sticky;top:calc(var(--header-h) + 45vh);z-index:1;display:grid;place-items:center;width:46px;height:46px;margin-top:96px;border-radius:50%;background:var(--deep);color:#fff;font-family:var(--en);font-weight:800;font-size:22px;line-height:1;box-shadow:0 10px 22px -12px rgba(30,95,140,.9)}
.cd-a .ca-done li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:10px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--hair);font-size:16px;font-weight:700;line-height:1.7}
.cd-a .ca-done-no{font-family:var(--en);font-weight:900;font-size:22px;line-height:1;color:var(--blue)}
.cd-a .ca-change{margin-top:20px;padding:16px 18px 18px;border:1.5px solid var(--deep);background:#fff}
.cd-a .ca-change-k{display:flex;align-items:baseline;gap:10px;font-family:var(--en);font-weight:800;font-size:13px;line-height:1.4;letter-spacing:.24em;color:var(--deep)}
.cd-a .ca-change-k span{font-family:var(--ja);font-weight:700;font-size:12.5px;letter-spacing:.04em;color:var(--ink)}
.cd-a .ca-change-t{margin-top:8px;font-size:16px;font-weight:700;line-height:1.85}
.cd-a .ca-change a{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding-bottom:2px;border-bottom:1.5px solid var(--ink);font-size:13.5px;font-weight:700;line-height:1.6;white-space:nowrap;transition:color .2s, border-color .2s}
.cd-a .ca-change a:hover{color:var(--deep);border-color:var(--deep)}
.cd-a .ca-change a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.cd-a .ca-ba-note{display:grid;grid-template-columns:minmax(0,1fr);margin-top:28px;max-width:44em}
.cd-a .ca-issues li{position:relative;padding:15px 0 15px 34px;border-bottom:1px solid var(--hair);font-size:16px;font-weight:500;line-height:1.8}
.cd-a .ca-issues li::before{content:"—";position:absolute;left:0;top:15px;font-weight:700;color:#9fb3c2}
.cd-a .ca-note{position:relative;margin-top:22px;padding:2px 0 4px 22px;border-left:1px solid var(--rule)}
.cd-a .ca-note::before{content:"";position:absolute;left:-4px;top:0;width:7px;height:7px;background:var(--blue)}
.cd-a .ca-note-k{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-family:var(--en);font-weight:800;font-size:13px;line-height:1.4;letter-spacing:.24em;color:var(--deep)}
.cd-a .ca-note-k span{font-family:var(--ja);font-weight:700;font-size:12.5px;letter-spacing:.04em;color:var(--ink)}
.cd-a .ca-note-t{margin-top:12px;font-size:14.5px;font-weight:500;line-height:2;color:#2c3a44}
.cd-a .ca-note-by{display:flex;align-items:center;gap:10px;margin-top:14px;font-family:var(--en);font-weight:800;font-size:19px;line-height:1;letter-spacing:.02em}
.cd-a .ca-note-by::before{content:"";width:18px;height:1px;background:var(--ink)}

/* 02 実施したこと：番号＋縦線のタイムライン（一覧の cb-steps と同じ考え方） */
.cd-a .ca-tl{margin-top:4px}
.cd-a .ca-tl li{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:28px}
.cd-a .ca-tl-no{position:relative;z-index:1;align-self:start;margin-top:20px;padding:4px 0;background:#fff;text-align:center;font-family:var(--en);font-weight:900;font-size:32px;line-height:1;color:var(--blue)}
.cd-a .ca-tl-no small{display:block;margin-bottom:4px;font-weight:700;font-size:10.5px;letter-spacing:.2em;color:var(--muted)}
.cd-a .ca-tl-seg{position:absolute;left:23px;top:78px;bottom:-16px;width:2px;background:linear-gradient(180deg, var(--blue) 0%, rgba(71,156,217,.4) 100%);transform-origin:50% 0}
.cd-a .ca-tl-body{min-width:0;padding:24px 0 28px}
.cd-a .ca-tl li + li .ca-tl-body{border-top:1px solid var(--hair)}
.cd-a .ca-tl-body h3{font-size:clamp(18px, .5vw + 15px, 21px);line-height:1.55;letter-spacing:.02em}
.cd-a .ca-tl-body p{margin-top:8px;font-size:15.5px;line-height:1.95;color:var(--muted)}

/* 03 お客様の声：太罫で挟んだ大きな引用 */
.cd-a .ca-voice{margin-top:8px}
.cd-a .ca-voice-in{position:relative;padding:clamp(30px, 3.6vw, 48px) 0 clamp(28px, 3.4vw, 44px) clamp(0px, 4vw, 64px)}
.cd-a .ca-voice-mark{display:block;height:.46em;font-family:Georgia,serif;font-weight:700;font-size:clamp(76px, 6.4vw, 108px);line-height:.9;color:var(--blue)}
.cd-a .ca-voice-t{margin-top:16px;font-size:clamp(20px, 1vw + 13px, 27px);font-weight:700;line-height:1.85;letter-spacing:.02em}
.cd-a .ca-voice-by{display:flex;align-items:flex-start;gap:12px;margin-top:24px}
.cd-a .ca-voice-by::before{content:"";flex:0 0 24px;height:1px;margin-top:.85em;background:var(--ink)}
.cd-a .ca-voice-by span{display:block;font-size:14px;font-weight:700;line-height:1.7}
.cd-a .ca-voice-by span + span{font-size:13px;font-weight:500;color:var(--muted)}

/* =========================================================
   03 関連サービス（3列の罫線区切り）
   ========================================================= */
.cd-a .ca-rel-sec{padding:clamp(64px, 8vw, 104px) 0 clamp(56px, 7vw, 88px)}
.cd-a .ca-rel{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));margin-top:clamp(28px, 3vw, 40px);border-top:2px solid var(--rule);border-bottom:1px solid var(--hair)}
.cd-a .ca-rel li{min-width:0}
.cd-a .ca-rel li + li{border-left:1px solid var(--hair)}
.cd-a .ca-rel a{display:flex;flex-direction:column;height:100%;padding:24px 28px 26px;transition:background-color .2s}
.cd-a .ca-rel a:hover{background:var(--paper)}
.cd-a .ca-rel a:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.cd-a .ca-rel-no{font-family:var(--en);font-weight:800;font-size:14px;line-height:1.4;letter-spacing:.22em;color:var(--blue)}
.cd-a .ca-rel h3{margin-top:10px;font-size:20px;line-height:1.5;letter-spacing:.02em}
.cd-a .ca-rel p{margin-top:8px;font-size:14.5px;line-height:1.9;color:var(--muted)}
.cd-a .ca-rel-go{margin-top:auto;padding-top:18px;font-family:var(--en);font-weight:800;font-size:20px;line-height:1;color:var(--deep);transition:transform .2s}
.cd-a .ca-rel a:hover .ca-rel-go{transform:translateX(5px)}

/* =========================================================
   04 NEXT CASE（紙面いっぱいの帯）
   ========================================================= */
.cd-a .ca-next-sec{border-top:2px solid var(--rule);border-bottom:2px solid var(--rule)}
.cd-a .ca-next{display:block;transition:background-color .35s, color .35s}
.cd-a .ca-next:hover{background:var(--deep);color:#fff}
.cd-a .ca-next:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.cd-a .ca-next-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);column-gap:clamp(28px, 4vw, 64px);align-items:center;padding:clamp(32px, 4.4vw, 60px) 0}
.cd-a .ca-next-k{display:flex;flex-wrap:wrap;align-items:center;column-gap:.2em;font-family:var(--en);font-weight:900;font-size:clamp(46px, 8.6vw, 132px);line-height:.88;letter-spacing:.005em}
.cd-a .ca-next-k .no{color:var(--blue);transition:color .35s}
.cd-a .ca-next:hover .ca-next-k .no{color:var(--sky)}
.cd-a .ca-next-k .arr{display:inline-block;transition:transform .35s}
.cd-a .ca-next:hover .ca-next-k .arr{transform:translateX(14px)}
.cd-a .ca-next-meta{display:block;margin-top:clamp(16px, 2vw, 24px)}
.cd-a .ca-next-ind{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;line-height:1.5;color:var(--muted);transition:color .35s}
.cd-a .ca-next-ind::before{content:"";width:18px;height:2px;background:var(--blue)}
.cd-a .ca-next:hover .ca-next-ind{color:rgba(255,255,255,.82)}
.cd-a .ca-next-t{display:block;margin-top:6px;font-size:clamp(18px, .9vw + 12px, 24px);font-weight:900;line-height:1.5;letter-spacing:.02em}
.cd-a .ca-next-fig{display:block;padding:6px;border:1px solid var(--hair);background:#fff;transition:border-color .35s}
.cd-a .ca-next:hover .ca-next-fig{border-color:rgba(255,255,255,.4)}
.cd-a .ca-next-fig span{display:block;aspect-ratio:1040 / 582;overflow:hidden;background:var(--paper)}
.cd-a .ca-next-fig img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.cd-a .ca-next:hover .ca-next-fig img{transform:scale(1.04)}

/* =========================================================
   05 他の事例（一覧の目次 cb-toc と同じ行スタイル）＋一覧へ戻る
   ========================================================= */
.cd-a .ca-others-sec{padding:clamp(56px, 7vw, 96px) 0 clamp(56px, 7vw, 88px)}
.cd-a .ca-others-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-areas:"head list" "back list";grid-template-rows:auto 1fr;column-gap:clamp(40px, 5vw, 72px)}
.cd-a .ca-others-head{grid-area:head}
.cd-a .ca-others-back{grid-area:back;align-self:start;margin-top:28px}
.cd-a .ca-olist{grid-area:list;border-top:2px solid var(--rule)}
.cd-a .ca-olist li{border-bottom:1px solid var(--hair)}
.cd-a .ca-olist a{display:grid;grid-template-columns:52px 132px minmax(0,1fr) 24px;align-items:center;column-gap:18px;padding:14px 0;transition:background-color .2s}
.cd-a .ca-olist a:hover{background:var(--paper)}
.cd-a .ca-olist a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.cd-a .ca-olist-no{font-family:var(--en);font-weight:900;font-size:30px;line-height:1;color:var(--blue)}
.cd-a .ca-olist-fig{display:block;aspect-ratio:1040 / 582;overflow:hidden;border:1px solid var(--hair);background:var(--paper)}
.cd-a .ca-olist-fig img{display:block;width:100%;height:100%;object-fit:cover}
.cd-a .ca-olist-ind{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted);line-height:1.5}
.cd-a .ca-olist-t{display:block;margin-top:2px;font-size:15.5px;font-weight:700;line-height:1.55}
.cd-a .ca-olist-arr{font-family:var(--en);font-weight:800;font-size:18px;color:var(--deep);transition:transform .2s}
.cd-a .ca-olist a:hover .ca-olist-arr{transform:translateX(4px)}

/* =========================================================
   06 最終CTA（白地＋黒罫の紙面）
   ========================================================= */
.cd-a .ca-final{padding:clamp(16px, 2vw, 24px) 0 clamp(72px, 9vw, 112px)}
.cd-a .ca-final-mast{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:12px 0 11px;font-family:var(--en);font-weight:700;font-size:13px;line-height:1.4;letter-spacing:.26em}
.cd-a .ca-final-mast span:nth-child(2){text-align:center;color:var(--deep);font-family:var(--ja);letter-spacing:.3em}
.cd-a .ca-final-mast span:last-child{text-align:right;color:var(--muted)}
.cd-a .ca-final-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:64px;align-items:start;padding:clamp(40px, 5vw, 64px) 0 clamp(44px, 5vw, 64px)}
.cd-a .ca-final .ca-h2{margin-top:0;font-size:clamp(28px, 2.6vw + 6px, 44px);line-height:1.38}
.cd-a .ca-final .ca-text{margin-top:20px}
.cd-a .ca-fpoints{border-top:2px solid var(--rule)}
.cd-a .ca-fpoints li{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:baseline;padding:18px 0;border-bottom:1px solid var(--hair);font-size:17px;font-weight:700;line-height:1.5}
.cd-a .ca-fpoints i{font-style:normal;font-family:var(--en);font-weight:900;font-size:28px;line-height:1;color:var(--blue)}
.cd-a .ca-final-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.cd-a .ca-final-note{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:13.5px;font-weight:700;line-height:1.6;color:var(--muted)}
.cd-a .ca-final-note svg{flex:0 0 16px;width:16px;height:16px;color:var(--deep)}

/* =========================================================
   比較用ラベル（本番では data-review-only ごと削除）
   ========================================================= */
.cd-a .ca-review{
  position:fixed;left:12px;bottom:12px;z-index:60;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;max-width:calc(100% - 24px);
  padding:8px 10px 8px 16px;border-radius:999px;
  background:var(--ink);color:#fff;box-shadow:0 12px 30px -12px rgba(16,22,27,.5);
  font-size:12.5px;font-weight:700;line-height:1.4;
}
.cd-a .ca-review select{
  appearance:auto;min-height:30px;max-width:100%;padding:3px 8px;border:0;border-radius:999px;
  background:#fff;color:var(--ink);font:inherit;font-size:12px;cursor:pointer;
}
.cd-a .ca-review select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---------- レスポンシブ ---------- */
@media (max-width: 1080px){
  .cd-a .ca-sheet-in{grid-template-columns:150px minmax(0,1fr)}
}
@media (max-width: 760px){
  .cd-a .ca-ba{grid-template-columns:minmax(0,1fr);border-bottom:0}
  .cd-a .ca-ba-col--after{padding:6px 0 0}
  .cd-a .ca-ba-arrow{height:56px}
  .cd-a .ca-ba-arrow::before{display:none}
  .cd-a .ca-ba-arrow span{position:static;margin-top:-23px;transform:rotate(90deg)}
}
@media (max-width: 899px){
  .cd-a .ca-hero-in{grid-template-columns:minmax(0,1fr);row-gap:44px}
  .cd-a .ca-sheet-in{grid-template-columns:minmax(0,1fr);row-gap:36px}
  .cd-a .ca-toc{position:static}
  .cd-a .ca-toc-head{display:none}
  .cd-a .ca-toc ol{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));border-top:2px solid var(--rule);border-bottom:1px solid var(--hair)}
  .cd-a .ca-toc li{border-bottom:0}
  .cd-a .ca-toc li + li{border-left:1px solid var(--hair)}
  .cd-a .ca-toc li a{grid-template-columns:minmax(0,1fr);row-gap:4px;padding:12px 10px 12px 14px}
  .cd-a .ca-toc li a::before{left:0;right:0;top:auto;bottom:-1px;width:auto;height:2px}
  .cd-a .ca-toc-cta{display:none}
  .cd-a .ca-folio{grid-template-columns:auto minmax(0,1fr)}
  .cd-a .ca-folio-ind{display:none}
  .cd-a .ca-rel{grid-template-columns:minmax(0,1fr)}
  .cd-a .ca-rel li + li{border-left:0;border-top:1px solid var(--hair)}
  .cd-a .ca-rel a{padding:22px 4px 22px 0}
  .cd-a .ca-rel a:hover{background:transparent}
  .cd-a .ca-next-in{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .cd-a .ca-next-fig{max-width:420px}
  .cd-a .ca-others-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "list" "back";grid-template-rows:auto}
  .cd-a .ca-olist{margin-top:28px}
  .cd-a .ca-final-in{grid-template-columns:minmax(0,1fr);row-gap:36px}
}
@media (max-width: 600px){
  .cd-a .ca-wrap{width:calc(100% - 40px)}
  .cd-a .ca-btn{min-height:54px;padding:13px 22px}
  .cd-a .ca-hero{padding-top:14px}
  .cd-a .ca-masthead{grid-template-columns:1fr auto;font-size:11.5px;letter-spacing:.2em}
  .cd-a .ca-masthead span:last-child{display:none}
  .cd-a .ca-hero-in{margin-top:22px;row-gap:36px}
  .cd-a .ca-no{gap:10px}
  .cd-a .ca-no-n{font-size:84px}
  .cd-a .ca-cat{margin-top:20px;font-size:13px}
  .cd-a .ca-h1{margin-top:10px}
  .cd-a .ca-h1-main{font-size:27px;line-height:1.42}
  .cd-a .ca-h1-sub{margin-top:10px;font-size:16px;line-height:1.7}
  /* スマホは見出しの直後にCTA（ファーストビューに入れる）→ lead の順 */
  .cd-a .ca-hero-actions{order:4;width:100%;flex-direction:column;gap:10px;margin-top:20px}
  .cd-a .ca-hero-actions .ca-btn{width:100%}
  .cd-a .ca-lead{order:5;margin-top:28px}
  .cd-a .ca-lead p{font-size:15px;line-height:1.95}
  .cd-a .ca-spec-row{grid-template-columns:88px minmax(0,1fr);column-gap:12px}
  .cd-a .ca-spec-row dd{font-size:14px}
  .cd-a .ca-main{padding:36px 0 56px}
  .cd-a .ca-sheet{padding:18px 18px 32px}
  .cd-a .ca-folio-t{font-size:13px}
  .cd-a .ca-toc li a{padding:10px 6px 10px 10px}
  .cd-a .ca-toc-no{font-size:20px}
  .cd-a .ca-toc-t{font-size:12.5px}
  .cd-a .ca-sec-head{column-gap:14px}
  .cd-a .ca-sec-no{font-size:46px}
  .cd-a .ca-sec-head h2{font-size:23px}
  .cd-a .ca-issues li{padding:13px 0 13px 28px;font-size:15px}
  .cd-a .ca-issues li::before{top:13px}
  .cd-a .ca-note-t{font-size:14px}
  .cd-a .ca-tl li{grid-template-columns:40px minmax(0,1fr);column-gap:16px}
  .cd-a .ca-tl-no{font-size:27px;margin-top:18px}
  .cd-a .ca-tl-seg{left:19px;top:70px}
  .cd-a .ca-tl-body{padding:20px 0 22px}
  .cd-a .ca-tl-body h3{font-size:17px}
  .cd-a .ca-tl-body p{font-size:14.5px}
  .cd-a .ca-voice-in{padding:28px 0 26px}
  .cd-a .ca-voice-mark{font-size:64px}
  .cd-a .ca-voice-t{font-size:18.5px}
  .cd-a .ca-next-k{font-size:min(13vw, 54px)}
  .cd-a .ca-olist a{grid-template-columns:34px 86px minmax(0,1fr);column-gap:12px;padding:12px 0}
  .cd-a .ca-olist-no{font-size:24px}
  .cd-a .ca-olist-arr{display:none}
  .cd-a .ca-olist-t{font-size:14px}
  .cd-a .ca-others-back .ca-btn{width:100%}
  .cd-a .ca-final-mast{grid-template-columns:1fr auto;font-size:11.5px;letter-spacing:.2em}
  .cd-a .ca-final-mast span:last-child{display:none}
  .cd-a .ca-fpoints li{font-size:16px}
  .cd-a .ca-final-actions .ca-btn{width:100%}
  .cd-a .ca-review{left:8px;bottom:8px;padding:6px 8px 6px 12px;font-size:11px;border-radius:14px}
}
@media (prefers-reduced-motion: reduce){
  .cd-a *,.cd-a *::before,.cd-a *::after{transition-duration:0s !important}
}
/* 日本語見出しの改行：文節で折り返し、最終行が1文字にならないよう整える */ :where(h1,h2,h3){text-wrap:balance;word-break:auto-phrase} :where(h1,h2,h3) .kp, :where(h1,h2,h3).kp{word-break:auto-phrase}
/* 小さい画面での見出しの折り返し調整 */ @media (max-width:420px){#ca-final-title{font-size:min(6.6vw,27px)!important}}