/* ====== 配色（最小） ====== */
/* ==== Chips（ミニマル＆整列） ==== */
:root{
  --gold:#bfa264;        /* 枠・ハート */
  --gold-weak:#e3d6b2;   /* チップ境界のゴールド寄り */
  --chip-h: 34px;              /* 行の高さ（=全チップの高さ） */
  --chip-bg: #faf7ef;          /* 落ち着いたアイボリー */
  --chip-bd: #d9caa0;          /* ゴールド寄りのボーダー */
  --chip-txt:#4a4540;          /* やや深めの文字色 */
  --pink:#f3c4d7;        /* 仕切り・リボンのピンク */
  --ribbon:#f2a7c3;
}




/* ====== レイアウト ====== */
#section2.section{ padding-left:16; padding-right:5; }   /* ここで左右MAXに */
.cast-grid{
  display:flex;
  grid-template-columns:repeat(4,minmax(0,1fr));  /* PC=4列 */
  gap:5px;              /* 少し詰めてカードをワイドに */
  align-items:start;
  width:100%;
}
@media (max-width:480px){
  .cast-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } /* SP=2列 */
}

/* ====== カード（角丸なし） ====== */
.cast-card{
  background:#fff;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  transition:transform .25s, box-shadow .25s;
}
.cast-card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.12); }

/* サムネ共通 */
.cast-thumb{ position:relative; aspect-ratio:3/4; background:#f3f3f3; overflow:hidden; }
.cast-thumb img,.cast-thumb video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; transition:transform .5s, filter .5s;
}
.cast-card:hover .cast-thumb img,.cast-card:hover .cast-thumb video{ transform:scale(1.05); filter:contrast(1.05); }

/* バッジ/リボン */
.badge-new,.badge-check{
  position:absolute; top:10px; left:10px;
  font:700 12px/1 system-ui,-apple-system,sans-serif;
  padding:6px 10px; background:#fff; color:#d06a84;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.badge-check{ color:#7a6ad0; }
.ribbon-time{
  position:absolute; left:12px; right:12px; bottom:12px;
  text-align:center; font-weight:700;
  padding:8px 12px; color:#fff; background:var(--ribbon);
  box-shadow:0 6px 16px rgba(244,168,196,.45);
}

/* ====== 本文エリア（ゴールド寄せ） ====== */
.cast-meta{
  margin: 8px; /* ← 上下余白を小さく */
  padding: 12px 14px 14px; /* ← 内側の上下パディングを減らす */
  background:#fff;
  border:2px dashed var(--gold);     /* 金寄りのドット枠 */
  color:#333;
}
.cast-name {
  margin: 0 0 3px; /* ← 下の余白をさらに半減 */
  font-weight: 800;
  font-size: 19px; /* ← 少しだけ小さくして行間圧縮 */
  text-align: center;
  letter-spacing: .03em;
}

.cast-jname {
  margin: 0 0 2px; /* ← 名前と次の行の距離を縮める */
  text-align: center;
  font-size: 14.5px;
  color: #444;
  line-height: 1.2; /* ← 行間も詰める */
}

.cast-jname .age{ color:#666; }

.cast-stats {
  margin: 0; /* ← 完全に詰める */
  font-size: 10px; /* ← 横に見えるように */
  color: #000000;
  text-align: center;
  line-height: 1.2;
}

/* 薄ピンクの仕切り */
.cast-div{
  height:1px; border:0; margin:8px 0 10px; opacity:.95;
  background:linear-gradient(90deg,var(--pink) 0,var(--pink) 60%,transparent 60%);
  background-size:8px 1px;
}

/* ハート＋キャッチコピー行 */
.cast-catchrow {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #5a5353;
  font-weight: 200;
  font-size: 10px;   /* ← テキストを少し小さく（1pt程度） */
  line-height: 0.5;  /* ← 上下の行間を詰める */
}

/* 2列グリッド＋行高固定で“面”が揃う */
.cast-chips{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: var(--chip-h);     /* ← 行の高さを固定＝整列 */
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}


/* シンプル＆スタイリッシュ：角丸なし・陰影だけで立体感 */
.cast-chips .chip{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 10px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-bd);
  box-shadow:
    0 1px 0 rgba(0,0,0,.04),        /* 外側のごく薄い影 */
    inset 0 1px 0 rgba(255,255,255,.6); /* 内側のハイライト */
  color: var(--chip-txt);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;          /* 長文は自然に省略 */
}

/* ホバー時は少しだけ存在感（PCのみ） */
@media (hover:hover){
  .cast-chips .chip:hover{
    box-shadow:
      0 1px 0 rgba(0,0,0,.06),
      inset 0 1px 0 rgba(255,255,255,.55);
  }
}

/* モバイルは少しコンパクトに */
@media (max-width:480px){
  :root{ --chip-h: 32px; }
  .cast-chips .chip{ font-size: 12.5px; padding: 0 8px; }
}



/* ===== 横スライダー化（PC=4枚/SP=2枚見せ） ===== */
/* トラック化：横並び＋スナップ＋スムーズスクロール */
.cast-grid{
  display:flex;
  gap:18px;                          /* PCのカード間隔 */
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:0 0 6px;                   /* 末尾のスナップ余白対策の小さな余白 */
}
.cast-grid::-webkit-scrollbar{ height:8px; }
.cast-grid::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); }
.cast-grid{ scrollbar-color: rgba(0,0,0,.12) transparent; scrollbar-width: thin; }

/* 子要素はカード幅を固定＝PCで4枚分、SPで2枚分 */
.cast-card{
  flex:0 0 calc((100% - 3*18px)/4); /* 4枚＋隙間3つをちょうど収める */
  scroll-snap-align:start;
}
@media (max-width:480px){
  .cast-grid{ gap:14px; }
  .cast-card{ flex:0 0 calc((100% - 1*14px)/2); } /* 2枚＋隙間1つ */
}

/* スライダーボタン（最小デザイン） */
.cast-slider{ position:relative; }
.cast-btn{
  position:absolute; top:40%;
  width:36px; height:48px; line-height:48px; text-align:center;
  background:rgba(255,255,255,.85);
  color:#333; border:1px solid rgba(0,0,0,.1);
  cursor:pointer; user-select:none;
  transform:translateY(-50%);
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.cast-btn.prev{ left:6px; }
.cast-btn.next{ right:6px; }
.cast-btn:hover{ background:#fff; }
@media (hover:none){ .cast-btn{ display:none; } } /* タッチ端末では隠す */



/* ===== キャッチ：動画風スムースマルチ（幅自動・一定速度） ===== */
.cast-catchrow{ display:flex; align-items:center; gap:8px; color:#5a5353; font-weight:50; font-size:12px; }

.catch-marquee{
  position:relative; flex:1; overflow:hidden; white-space:nowrap;
  line-height:1.2; min-height:1.2em;
}
.catch-marquee::before,
.catch-marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:18px; pointer-events:none;
}
/* 背景色に合わせて必要なら #fff を変更 */
.catch-marquee::before{ left:0;  background:linear-gradient(90deg,#fff 0%, rgba(255,255,255,0) 100%); }
.catch-marquee::after { right:0; background:linear-gradient(-90deg,#fff 0%, rgba(255,255,255,0) 100%); }

.catch-marquee .mq{
  display:inline-flex; align-items:center; white-space:nowrap; will-change:transform;
  /* JSが --duration と --shift をセットします */
  animation: cast-marquee var(--duration, 12s) linear infinite;
}
.catch-marquee .mq span{ padding-right:2rem; } /* 区切りの余白 */

@keyframes cast-marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(calc(-1 * var(--shift, 100%))); }
}

/* ユーザーが「動き少なめ」を選んでる場合は止める */
@media (prefers-reduced-motion: reduce){
  .catch-marquee .mq{ animation: none; }
}