@charset "UTF-8";
/* =========================================================
   BLACK FAMILY  キャストプロフィール
   全キャストページ共通のスタイル
   クラス名はすべて bf- 始まりなので既存CSSと衝突しません
   ========================================================= */

.bf-profile{
  --bf-red:#e11d3c;          /* 発光レッド（アクセント） */
  --bf-red-deep:#7a0a1e;     /* 枠線・罫線の暗いレッド */
  --bf-gold:#c8a45c;         /* ゴールド */
  --bf-text:#efe6e8;         /* 本文の白 */
  --bf-muted:#9c8f92;        /* 補助テキスト */

  padding:clamp(44px,7vw,96px) clamp(20px,5vw,48px) clamp(56px,8vw,110px);
  color:var(--bf-text);
}

.bf-profile__inner{
  width:100%;
  max-width:520px;
  margin:0 auto;
  text-align:center;
}

/* ---------- ポートレート ---------- */
.bf-portrait{
  position:relative;
  margin:0;
  padding-left:38px;          /* 縦組みのCAST番号ぶん */
}
.bf-portrait__no{
  position:absolute;
  left:2px; top:6px;
  writing-mode:vertical-rl;
  font-size:13px;
  letter-spacing:.42em;
  color:var(--bf-gold);
  opacity:.85;
}
.bf-portrait__no::after{        /* 番号から下に伸びる細い線 */
  content:"";
  display:block;
  width:1px;
  height:90px;
  margin:14px auto 0;
  background:linear-gradient(to bottom,var(--bf-gold),transparent);
}
.bf-portrait__frame{
  border:1px solid rgba(225,29,60,.55);
  padding:10px;
  box-shadow:0 0 28px rgba(225,29,60,.22), inset 0 0 40px rgba(0,0,0,.6);
}
.bf-portrait__frame img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
}

/* ---------- 名前まわり ---------- */
.bf-detail{
  margin-top:clamp(28px,4vw,44px);
  padding-left:38px;            /* 写真の中心と揃える */
}
.bf-detail__role{
  margin:0 0 18px;
  font-size:13px;
  letter-spacing:.24em;
  color:var(--bf-red);
}
.bf-detail__name{
  margin:0;
  font-size:clamp(40px,6vw,58px);
  font-weight:600;
  line-height:1.15;
  letter-spacing:.14em;
  text-indent:.14em;            /* 字送りぶんの見た目のズレを補正 */
  text-shadow:0 0 26px rgba(225,29,60,.45);
}
.bf-detail__name small{
  display:block;
  margin-top:14px;
  font-size:13px;
  font-weight:400;
  letter-spacing:.3em;
  text-indent:.3em;
  color:var(--bf-muted);
}

/* ---------- SNS ---------- */
.bf-sns{
  margin:30px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  justify-content:center;
  gap:14px;
}
.bf-sns a{
  display:grid;
  place-items:center;
  width:44px; height:44px;
  border:1px solid rgba(200,164,92,.4);
  border-radius:50%;
  color:var(--bf-gold);
  transition:color .25s, border-color .25s, background-color .25s;
}
.bf-sns a:hover,.bf-sns a:focus-visible{
  color:#fff;
  border-color:var(--bf-red);
  background:rgba(225,29,60,.18);
}
.bf-sns svg{width:18px;height:18px;fill:currentColor;}

/* ---------- 一覧へ戻る（不要なら削除OK） ---------- */
.bf-back{
  margin:clamp(36px,5vw,56px) 0 0;
  padding-top:26px;
  padding-left:38px;
  border-top:1px solid rgba(122,10,30,.75);
  font-size:13px;
  letter-spacing:.2em;
}
.bf-back a{
  color:var(--bf-gold);
  text-decoration:none;
  transition:color .25s;
}
.bf-back a:hover,.bf-back a:focus-visible{color:#fff;}

/* ---------- モバイル ---------- */
@media (max-width:600px){
  .bf-portrait{padding-left:28px;}
  .bf-detail,.bf-back{padding-left:28px;}
  .bf-portrait__no{font-size:12px;}
}
@media (prefers-reduced-motion:reduce){
  .bf-sns a,.bf-back a{transition:none;}
}