/* ==========================================================================
   common.css
   サイト全体で使い回す共通スタイル。
   - リセット / ベース
   - レイアウト共通クラス (l-*)
   - 部品共通クラス (c-*)
   新しいセクション/ページを追加するときは、まずここに定義済みの
   共通クラスで実現できないか確認してから、固有クラスを追加すること。
   ========================================================================== */


   /*font*/
   .font-hiragino__300{
font-family: "hiragino-kaku-gothic-pron", sans-serif;
font-weight: 300;
font-style: normal;
   }

   .font-hiragino__600{
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
font-weight: 600;
font-style: normal;
   }
/* ---------- reset / base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  /* .l-page(body)側の overflow-x: hidden だけでなく html 側にも保険で指定。
     わずかな幅のはみ出しが実機でだけ横スクロールを許してしまい、
     ページ全体が右にずれて見える不具合を防ぐ */
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS PMincho", serif;
  color: #f5f4f0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

/* ---------- l-page: 全ページ共通の星空背景レイヤー ----------
   background-attachment: fixed はiOS Safariなど多くのスマホブラウザで
   正しく機能せず、スクロールで背景画像が動いてしまうため使用しない。
   代わりに position: fixed の疑似要素を背景として敷くことで、
   モバイル実機でも背景を画面に固定する。 */
.l-page {
  position: relative;
  /* overflow-x: hidden はあえて指定しない。
     bodyにoverflow-x: hiddenを付けると、iOS Safariのネイティブなスクロール処理と
     競合し、ページの上端・下端でスクロールが一瞬詰まる不具合が実機で確認されたため
     （横方向のはみ出し対策は html側の overflow-x: hidden だけで足りている） */
  background-color: #0b0c1a;
}

.l-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("../image/bg__star.jpg") center top / cover no-repeat;
  pointer-events: none;
}

.l-page__sparkles {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* きらめく星（star-dec.png）。（２つ表示ありver）2026-audition_aQ9387gj の
   .twinkle と同じ見た目になるよう、サイズ・mix-blend-mode・回転を合わせている。
   位置・タイミングはHTML側に固定で並べている（JSでのランダム生成はしない） */
.c-sparkle {
  position: absolute;
  width: 64px;
  height: 52px;
  background: url("../image/star-dec.png") center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  animation-name: c-sparkle-twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.c-sparkle--lg {
  width: 96px;
  height: 78px;
}

/* SPだけ星のサイズを少し小さくする */
@media (max-width: 960px) {
  .c-sparkle {
    width: 48px;
    height: 39px;
  }

  .c-sparkle--lg {
    width: 72px;
    height: 58px;
  }


}

@keyframes c-sparkle-twinkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.15) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(25deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .l-page__sparkles {
    display: none;
  }
}

/* ---------- c-panel: 半透明のガラス風パネル枠 ---------- */
.c-panel {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---------- c-heading: セクション大見出し（例:「出演者」） ---------- */
.c-heading {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: #fff;
}

/* ---------- c-divider: 見出し下の飾り罫線（decoration.png） ---------- */
.c-divider {
  width: 220px;
  height: auto;
}

/* ---------- c-corner-dec: 角の飾り（box-dec.png）
   元画像は右下向き（右辺・下辺に線、右下に装飾）の意匠のため、
   左上に置く場合は180度回転させて向きを揃え、同じ画像を使い回す ---------- */
.c-corner-dec {
  position: absolute;
  width: 80px;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.c-corner-dec--top {
  top: -2px;
  left: -20px;
  transform: rotate(180deg);
}

.c-corner-dec--bottom {
  bottom: -50px;
  right: -16px;
  width: 60px;
}

/* ---------- c-photo-frame: 写真の縁取り枠 ---------- */
.c-photo-frame {
  padding: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.c-photo-frame__img {
  width: 100%;
  height: auto;
}

/* ---------- c-info-list: ラベル + 点線 + 値 の項目リスト ---------- */
.c-info-list__item {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 0;
  border-bottom: 0.5px solid;
  justify-content: space-between;
}

.c-info-list__term {
  flex: 0 0 auto;
  min-width: 4em;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-align: left; /* 親.cast__infoのtext-align:centerを打ち消し、min-width分の余白があっても左揃えにする */
}

.c-info-list__connector {
  flex: 1 1 auto;
  height: 0;
  margin-bottom: 5px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.6);
}

/* 線の右端に添える、きらめく星（star-dec.png） */
.c-info-list__star {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0 4px 5px -8px;
  background: url("../image/star-dec.png") center / contain no-repeat;
}

.c-info-list__desc {
  /* 趣味・特技など内容が長い項目でも枠からはみ出さないよう、
     残り幅いっぱいまで伸縮させて折り返す */
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.9);
  text-align: right;
  /* word-break: break-word だとどこでも改行できてしまい、「学ぶ」→「学/ぶ」のように
     送り仮名の途中で不自然に切れてしまう。keep-all で単語（漢字+かな等の連続）の
     途中では改行しないようにし、「・」などの区切りを優先して折り返す。
     overflow-wrap は、区切りの無い長い連続文字列がどうしても収まらない場合の保険 */
  /* word-break: keep-all; */
  /* overflow-wrap: break-word; */
  /* 区切りの無い長い文字列がoverflow-wrapで機械的に改行されると、
     最後の1文字だけが次の行に孤立する「孤立行」が起きやすいため、
     対応ブラウザではそれを避けるよう改行位置を最適化する
     （非対応ブラウザは無視されるだけで、今まで通りの折り返しになる） */
  /* text-wrap: pretty; */
}

/* ---------- c-btn: ボタン共通 ---------- */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  transition: opacity 0.2s ease;
}

.c-btn:hover {
  opacity: 0.75;
}

/* TOPに戻るボタン（back_btn.png） */
.c-btn--back {
  width: 260px;
  aspect-ratio: 642 / 177;
  background: url("../image/back_btn.png") center / contain no-repeat;
}

/*footer*/
/* ---------- サイトリンク / フッター ---------- */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  margin-top: 150px;
  text-align: center;
}

.site-links__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 14px 28px;
}

.site-links__item img {
  width: 140px;
}

.site-footer__copyright {
  margin: 12px 0 30px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

.reveal {
  opacity: 1;
  transform: translateY(32px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 960px){
    .c-info-list__desc {
  font-size: 0.8rem;
}

.c-info-list__term {
    min-width: 2em;
}
}