/* 実績の個別ページ /case/{slug}/ の見た目と動き（2026-09-26 オーナー「下層ページのデザインもマイクロアニメーション、アニメーション含めて最高のuiuxに」）
   トップと同じ決まり: 白地＋blue-ink・カード角丸 16・同じ影・同じ曲線。動きは一度だけ・動きを減らす設定では出さない。 */
:root{--cd-ease:cubic-bezier(.22,.61,.36,1)}

/* ---- 最初の画面: 題とひとことと、いちばんの数字 ＋ 実際の画面 ---- */
.bcs-cd-key{margin:22px 0 0;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 28px -18px rgba(15,23,42,.22);display:grid;gap:2px}
.bcs-cd-key .k{font-size:12px;letter-spacing:.06em;color:var(--muted);font-weight:700}
.bcs-cd-key .v{font-family:var(--font-head);font-size:clamp(20px,1.2vw + 14px,26px);font-weight:700;color:var(--blue-ink);font-feature-settings:"tnum";line-height:1.4}
.bcs-cd-key .n{font-size:12px;color:var(--muted)}
.bcs-cd-tags{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.bcs-cd-tags span{padding:5px 11px;border-radius:999px;background:var(--blue-pale,#F3F7FA);border:1px solid var(--line);font-size:12px;color:var(--ink-soft)}
/* 実際の画面（2026-09-26 オーナー「なんか画像の表示へんだね」）
   ・窓の飾り（点の帯）をやめる＝基準 C3。枠と画像の二重の角丸もやめ、画像そのものを 1 枚のカードにする。
   ・16:10 で切ると横長の画面（1200×636 など）の右端が欠けていた（電話のボタンが切れていた）＝元の比率のまま出す。 */
.bcs-cd .bcs-cd-shot{background:none;border:0;border-radius:16px;box-shadow:0 24px 48px -28px rgba(15,23,42,.35),0 0 0 1px #E8EDF0}
.bcs-cd .bcs-cd-shot::before{display:none}
.bcs-cd .bcs-cd-shot img{border-radius:16px;aspect-ratio:auto;height:auto;object-fit:initial}
@media (min-width:1100px){
  .bcs-cd-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;align-items:center;margin-top:24px}
  .bcs-cd .bcs-cd-top .bcs-cd-hero{margin:0}
  .bcs-cd .bcs-cd-top .bcs-cd-shot{margin:0;max-width:none}
}

/* ---- 数字: カードで大きく。前→後の「後」を強く ---- */
.bcs-cd .bcs-cd-stats > div{padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 28px -18px rgba(15,23,42,.22)}
.bcs-cd .bcs-cd-stats dt{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.bcs-cd .bcs-cd-stats dd{margin:6px 0 0;font-family:var(--font-head);font-size:clamp(20px,1vw + 15px,26px);font-weight:700;line-height:1.35;color:var(--ink);font-feature-settings:"tnum"}
.bcs-cd .bcs-cd-stats dd .from{color:var(--muted);font-weight:500}
.bcs-cd .bcs-cd-stats dd .arr{margin:0 .3em;color:var(--muted);font-weight:400}
.bcs-cd .bcs-cd-stats dd .to{color:var(--blue-ink)}
.bcs-cd .bcs-cd-stats > div > p{margin:8px 0 0;font-size:12px;line-height:1.7;color:var(--muted)}

/* ---- 似た選ばれ方の事例: 触ると少し浮く ---- */
@media (hover:hover) and (pointer:fine){
  .bcs-cd-others > li{transition:transform .35s var(--cd-ease)}
  .bcs-cd-others > li:hover{transform:translateY(-3px)}
}

/* ---- 目次（広い画面だけ・読み進めた位置が分かる） ---- */
.bcs-cd-toc{display:none}
@media (min-width:1180px){
  .bcs-cd .bcs-cd-sec,.bcs-cd .bcs-sv-alt{margin-left:272px;margin-right:0}
  .bcs-cd-toc{display:block;position:fixed;top:112px;left:max(24px, calc(50% - 536px));width:200px;z-index:5;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .35s var(--cd-ease),transform .35s var(--cd-ease)}
  .bcs-cd-toc.is-show{opacity:1;transform:none;pointer-events:auto}
  .bcs-cd-toc p{margin:0 0 12px;font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;color:var(--brass-ink,#7E6330)}
  .bcs-cd-toc ol{list-style:none;margin:0;padding:0 0 0 14px;position:relative;display:grid;gap:2px}
  .bcs-cd-toc ol::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--line);border-radius:2px}
  .bcs-cd-toc .bar{position:absolute;left:0;top:4px;width:2px;background:var(--blue-ink);border-radius:2px;height:0;transition:height .3s var(--cd-ease)}
  .bcs-cd-toc a{display:flex;gap:8px;padding:5px 0;font-size:13px;line-height:1.5;color:var(--muted);text-decoration:none;transition:color .2s ease}
  .bcs-cd-toc a span{font-family:var(--font-mono);font-size:12px;padding-top:2px;opacity:.7}
  .bcs-cd-toc a:hover{color:var(--ink)}
  .bcs-cd-toc a.is-cur{color:var(--blue-ink);font-weight:700}
}

/* ---- 読み進めた量（上端の細い線・全幅） ---- */
.bcs-cd-prog{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--blue-ink);transform-origin:0 50%;transform:scaleX(0);z-index:9999;pointer-events:none}

/* ---- 現れ方（JS が is-armed を付けたときだけ隠す） ---- */
.bcs-cd.is-armed .bcs-cd-sec{opacity:0;transform:translateY(14px)}
.bcs-cd.is-armed .bcs-cd-sec.is-in{opacity:1;transform:none;transition:opacity .55s var(--cd-ease),transform .6s var(--cd-ease)}
.bcs-cd.is-armed .bcs-cd-shot img,.bcs-cd.is-armed .bcs-cd-ev img{clip-path:inset(0 0 100% 0 round 16px)}
.bcs-cd.is-armed .is-in .bcs-cd-shot img,.bcs-cd.is-armed .bcs-cd-shot.is-in img,.bcs-cd.is-armed .is-in .bcs-cd-ev img{clip-path:inset(0 0 0 0 round 16px);transition:clip-path .9s var(--cd-ease) .1s}
.bcs-cd.is-armed .bcs-cd-stats > div,.bcs-cd.is-armed .bcs-cd-duties > li,.bcs-cd.is-armed .bcs-cd-before > li,.bcs-cd.is-armed .bcs-cd-others > li{opacity:0;transform:translateY(10px)}
.bcs-cd.is-armed .is-in .bcs-cd-stats > div,.bcs-cd.is-armed .is-in .bcs-cd-duties > li,.bcs-cd.is-armed .is-in .bcs-cd-before > li,.bcs-cd.is-armed .is-in .bcs-cd-others > li{opacity:1;transform:none;transition:opacity .5s var(--cd-ease),transform .55s var(--cd-ease);transition-delay:calc(var(--i,0) * 60ms)}
@media (prefers-reduced-motion:reduce){
  .bcs-cd-prog{display:none}
  .bcs-cd-toc,.bcs-cd-others > li{transition:none}
}

/* PDCA 2（2026-09-26）: 最初の画面の左端を本文の器にそろえる・前→後は塊ごと折る・目次の字組み */
.bcs-cd .bcs-cd-top{max-width:none;margin-left:0;margin-right:0}
.bcs-cd-meta{line-height:1.8}
.bcs-cd-stats dd .from,.bcs-cd-stats dd .to,.bcs-cd-key .v .from,.bcs-cd-key .v .to{white-space:nowrap}
.bcs-cd-key .v .from{color:var(--muted);font-weight:500;font-size:.8em}
.bcs-cd-key .v .arr{margin:0 .25em;color:var(--muted);font-weight:400;font-size:.8em}
.bcs-cd-key .v .to{color:var(--blue-ink)}
@media (min-width:1180px){
  .bcs-cd .bcs-breadcrumb{margin-left:0}
  .bcs-cd-toc{width:220px}
  .bcs-cd-toc a{align-items:baseline;word-break:keep-all}
  .bcs-cd-toc a span{flex:none;width:18px}
}

/* このプロジェクトで実装した仕組み: 見た目の指定が無く、題・説明・補足・リンクが 1 つの段落のように続いていた（2026-10-02 オーナー「ここどうにかならない？」）
   ＝1 項目を 1 つのかたまりにし、題／説明／補足（小さく薄く）／リンクを行で分け、項目のあいだを線と余白で区切る */
.bcs-cd-fnlist{list-style:none;margin:18px 0 0;padding:0}
.bcs-cd-fnlist>li{padding:18px 0;border-top:1px solid var(--line)}
.bcs-cd-fnlist>li:last-child{border-bottom:1px solid var(--line)}
.bcs-cd-fnlist>li>b{display:block;font-size:var(--s3);font-weight:700;color:var(--ink);line-height:1.6}
.bcs-cd-fnlist>li>span{display:block;margin:6px 0 0;color:var(--ink-soft);line-height:1.85}
.bcs-cd-fnlist>li>small{display:block;margin:8px 0 0;font-size:var(--s1);color:var(--muted);line-height:1.7}
.bcs-cd-fnlist>li>a{display:inline-block;margin:10px 0 0;font-size:var(--s2);color:var(--blue-ink);text-decoration:none}
.bcs-cd-fnlist>li>a::after{content:" →"}
.bcs-cd-fnlist>li>a:hover{text-decoration:underline}