/* キャストページ(/cast/<cid>・tools/gen_cast_pages.py が生成)の見た目(2026-11-01 オーナー「簡素すぎる・パンくずがずれる」の作り直し)。
   店舗ページのキャストシート(store.css .card-sheet・cast-card.js)と同じ部品を使う:
   店舗ごとの手書きフォント(--cs-font / --cs-weight・body の style で渡す)・飾り 3 枚(assets/card/<店舗>-{corner,bow,bottom}.webp)・
   すりガラスのパネル・Q 番号つきの自己紹介・X の黒い丸ボタン。地は店舗ページ(body[data-skin])のまま。
   PC(900px〜)は 2 列(左に写真・右に名前と主要項目)、スマホは 写真 → 名前 → プロフィール の縦。
   パンくず・h1 の共通部分は sub.css、基本情報は store.css の .s-basic をそのまま使う。 */
.cp-main{max-width:1040px;}

/* ---- 最初の画面(写真+名前) ---- */
.cp-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-top:6px;align-items:start;}
.cp-figure{position:relative;margin:0 auto;width:min(100%, 42vh);max-width:440px;}
.cp-photo{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:6px;
  border:1px solid var(--hair, var(--line));background:color-mix(in srgb, var(--sc) 10%, #fff);}
.cp-corner{position:absolute;top:-3%;right:-6%;width:38%;height:auto;pointer-events:none;filter:drop-shadow(0 3px 7px rgba(0,0,0,.18));}
.cp-id{min-width:0;text-align:center;}
.cp-eyebrow{margin:0;font-family:'Montserrat',sans-serif;font-weight:300;font-size:11px;letter-spacing:.34em;color:#5F5862;padding-left:.34em;}
.cp-name{margin:6px 0 0;font-size:inherit;font-weight:inherit;line-height:1.1;color:#2E2A31;overflow-wrap:anywhere;}
.cp-name .cp-nm{font-family:var(--cs-font, 'Zen Kaku Gothic New'),'Zen Kaku Gothic New',sans-serif;font-weight:var(--cs-weight, 700);
  font-size:46px;letter-spacing:.02em;}
.cp-name .cp-yomi{display:inline-block;margin-left:.3em;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:500;font-size:15px;letter-spacing:.1em;color:#5F5862;vertical-align:.35em;}
.cp-badge{display:inline-flex;align-items:center;gap:10px;margin-top:12px;min-height:44px;padding:0 18px;border:1px solid var(--hair, var(--line));
  border-radius:999px;background:#fff;text-decoration:none;color:#2E2A31;transition:border-color .2s;}
.cp-badge:hover{border-color:var(--sc);}
.cp-badge b{font-family:'Montserrat',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.24em;padding-left:.24em;}
.cp-badge span{font-size:11.5px;letter-spacing:.1em;color:#5F5862;border-left:1px solid var(--hair, var(--line));padding-left:10px;}
.cp-lead{margin:16px 0 0;font-size:13.5px;line-height:2;letter-spacing:.04em;color:#5F5862;}
/* 主要項目(誕生日・血液型など最大 6 つ。全項目は下の PROFILE) */
.cp-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;margin:18px 0 0;text-align:left;border-top:1px solid var(--hair, var(--line));}
.cp-facts>div{min-width:0;padding:10px 0 11px;border-bottom:1px solid var(--hair, var(--line));}
.cp-facts dt{font-size:11px;font-weight:500;letter-spacing:.2em;color:#5F5862;}
.cp-facts dd{margin:3px 0 0;font-size:15px;line-height:1.6;color:#2E2A31;overflow-wrap:anywhere;}
.cp-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0 0;}
.cp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:8px 24px;border-radius:999px;
  font-size:13px;font-weight:600;letter-spacing:.06em;text-decoration:none;transition:transform .2s, background-color .2s;}
.cp-btn:active{transform:scale(.97);}
.cp-btn svg{width:14px;height:14px;fill:currentColor;flex:0 0 14px;}
.cp-x{background:var(--ink);color:#fff;}                       /* 店舗ページのシートの X ボタンと同じ */
.cp-visit{background:var(--sc);color:#fff;}
.cp-visit:hover{background:color-mix(in srgb, var(--sc) 85%, #000);}
.cp-visit small{font-weight:500;font-size:11px;letter-spacing:.1em;opacity:.9;border-left:1px solid rgba(255,255,255,.5);padding-left:9px;}

/* ---- 自己紹介(シートと同じ: 写真のぼかしの上にすりガラスのパネル・リボン・下の飾り) ---- */
.cp-profile{margin-top:48px;}
.cp-stage{position:relative;isolation:isolate;overflow:hidden;border-radius:8px;margin-top:18px;padding:64px 14px 10px;
  background:color-mix(in srgb, var(--sc) 35%, #fff);}
.cp-blur{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center;
  filter:blur(40px) saturate(1.3);transform:scale(1.25);opacity:.9;}
.cp-stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--sc) 20%, transparent), color-mix(in srgb, var(--sc) 45%, rgba(255,255,255,.3)) 100%);}
.cp-panel{position:relative;padding:18px 18px 20px;border-radius:22px;
  background:rgba(255,255,255,.72);box-shadow:0 5px 20px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.7);}
.cp-bow{position:absolute;right:4%;top:0;width:24%;max-width:130px;height:auto;transform:translateY(-85%);pointer-events:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.2));}
.cp-qa{margin:0;font-family:'Zen Kurenaido','Zen Kaku Gothic New',sans-serif;}
.cp-qa>div{display:grid;grid-template-columns:8.6em 1fr;gap:10px;padding:10px 0;align-items:baseline;border-bottom:1px solid color-mix(in srgb, var(--sc) 18%, transparent);}
.cp-qa dt{display:flex;gap:4px;font-size:13px;font-weight:400;color:#6b5a60;line-height:1.6;}
.cp-q{flex:0 0 2.6em;color:color-mix(in srgb, var(--sc) 75%, #000);font-weight:700;}
.cp-qa dd{margin:0;font-size:15.5px;line-height:1.7;color:#2f2428;word-break:break-word;white-space:pre-line;}
.cp-bottom{display:block;position:relative;width:92%;max-width:520px;height:auto;margin:-12px auto 0;pointer-events:none;filter:drop-shadow(0 3px 7px rgba(0,0,0,.18));}

/* フッターのリンクもこのページでは押せる高さ 44px に(store.css の様式は変えない) */
.cast-page footer .flinks a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;}

/* ---- 同じ店の他のキャスト(店舗ページのカードと同じ部品 .cast-grid / .cast-card) ---- */
.cp-others{margin-top:48px;}
.cp-others .cast-grid{margin-top:22px;}
.cp-others .cast-card{text-decoration:none;color:inherit;}
.cp-back{margin:22px 0 0;text-align:center;font-size:13px;}
.cp-back a{color:var(--sc);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 6px;letter-spacing:.06em;}
.cp-back a:hover{text-decoration:underline;}

@media (min-width:900px){
  .cp-hero{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:56px;margin-top:10px;}
  .cp-figure{width:100%;max-width:none;margin:0;}
  .cp-id{text-align:left;padding-top:8px;}
  .cp-eyebrow{padding-left:0;}
  .cp-name .cp-nm{font-size:64px;}
  .cp-name .cp-yomi{font-size:17px;}
  .cp-lead{font-size:14px;}
  .cp-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 22px;margin-top:22px;}
  .cp-actions{justify-content:flex-start;margin-top:26px;}
  .cp-profile{margin-top:64px;}
  .cp-stage{padding:72px 24px 16px;border-radius:10px;}
  .cp-panel{padding:22px 28px 26px;}
  .cp-qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;}
  .cp-others{margin-top:64px;}
}
@media (max-width:379px){
  .cp-name .cp-nm{font-size:40px;}
  .cp-qa>div{grid-template-columns:7.2em 1fr;}
  .cp-badge span{display:none;}
}
@media (prefers-reduced-motion: reduce){ .cp-btn{transition:none;} }