@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

html, body {
  font-family: "Noto Sans JP", sans-serif !important;
}

:root {
    --primary: #0077b9;
    --primary-foreground: #fff;
    --secondary-foreground: #0077b9;
    --font-gothic: "Noto Sans JP", sans-serif;
    --font-mincho: "Noto Serif JP", serif;
}

.text-primary { color: var(--primary-foreground); }
.text-secondary { color: var(--secondary-foreground); }

.bg-primary { background-color: var(--primary); }

.font-gothic { font-family: var(--font-gothic); }
.font-mincho { font-family: var(--font-mincho); }

#pagetop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10;
}
#pagetop a {
  display: block;
  z-index: 999;
  width: 0px;
  border-color: #fff;
  border-style: solid;
  border-width: 20px;
  border-left-color: transparent;
  border-top-color: transparent;
  border-right-color: transparent;
}
#pagetop a:hover {
  text-decoration: none;
  opacity: 0.7;
}

/* ComingSoonの見た目 */
.btn-comingsoon {
    background-color: #787878;
    color: #FFFFFF;
    font-family: var(--font-gothic);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 10px 16px 10px 16px;
    font-size: 12px;
    text-decoration: none; 
}


/* ==========================================
   共通ボタンのスタイル（CSS変数による配色管理）
============================================ */

/* 通常時のボタンの見た目 */
.btn-common {
    /* デフォルト配色 */
    --btn-bg: var(--primary);
    --btn-bg-hover: #005a8c;
    --btn-color: var(--primary-foreground);

    /* 1. レイアウトとサイズ */
    display: inline-flex;           /* リンク内で文字と矢印を綺麗に並べるため */
    align-items: center;            /* 上下中央揃え */
    justify-content: center;        /* 左右中央揃え */
    position: relative;             /* 矢印（::after）の位置基準とするため */
    padding: 16px 64px 16px 48px;   /* 右側の余白を少し多めに確保（上 右 下 左） */
    text-align: center;             /* テキストを左右中央に配置 */
    text-decoration: none;          /* リンクの下線を消す */
    font-size: small;
    
    /* 2. 装飾と配色 */
    background-color: var(--btn-bg);
    color: var(--btn-color);
    font-family: var(--font-gothic);
    
    /* 3. アニメーション効果 */
    transition: background-color 0.3s ease, transform 0.2s ease; /* ホバー時の変化を滑らかにする */
}

/* ボタンの右端に矢印を追加する（疑似要素） */
.btn-common::after {
    content: "";                    /* 疑似要素表示のために必須 */
    position: absolute;             /* ボタン基準で絶対配置 */
    right: 24px;                    /* 右端からの距離 */
    width: 6px;                     /* 矢印の幅 */
    height: 6px;                    /* 矢印の高さ */
    border-top: 2px solid currentColor;  /* 上側の線（現在の文字色と同じにする） */
    border-right: 2px solid currentColor;/* 右側の線（現在の文字色と同じにする） */
    transform: rotate(45deg);       /* 45度回転させて「くの字」にする */
    transition: right 0.2s ease;    /* スライドの動きを滑らかにする */
}

/* マウスカーソルを乗せたとき（ホバー時）の見た目 */
.btn-common:hover {
    background-color: var(--btn-bg-hover); /* 変数に基づいた背景色に変化 */
    transform: translateY(-2px);    /* ボタンを上に2pxだけ浮かせる */
}

/* ホバー時に矢印を少し右にスライドさせる */
.btn-common:hover::after {
    right: 20px;
}

/* ボタンがクリックされた瞬間（アクティブ時）の見た目 */
.btn-common:active {
    transform: translateY(0);       /* 浮かせたボタンを元の位置に戻して「押した感」を出す */
}

/* ==========================================
   ボタンのカラーバリエーション（スキンクラス）
============================================ */

/* 配信リンクボタン（汎用） */
.btn-stream {
    --btn-bg: #004b86;
    --btn-bg-hover: #00335c;
    --btn-color: #fff;
}

/* ==========================================
   共通のセクション見出し背景（.h2-bg）
============================================ */ 
.h2-bg {
    width: 100%;
    height: auto;
    background-image:
        linear-gradient(#0077B9, #0077B9),
        url('../img/bg-top-10.png'),
        linear-gradient(#53A5CD1A, #53A5CD1A);
    position: relative;
    padding: 5% 3%;                 /* モバイル用の内側余白 */
    margin-bottom: 24px;            /* 下の要素との間隔（mb-6） */
    
    /* 各レイヤーに対応するサイズ・リピート・位置の設定（カンマ区切りで連動） */
    background-size: cover, auto 300px, cover;
    background-repeat: no-repeat, repeat, no-repeat;
    background-position: center, center, center;
    background-color: #fff;
    
    /* 各レイヤーの描画モードを上から順に指定 */
    background-blend-mode: overlay, normal, normal;
}

/* PCサイズ（画面幅 768px 以上）用の余白調整 */
@media (min-width: 768px) {
    .h2-bg {
        padding: 20px 10px;         /* PC用の余白 */
    }
}

/* ==========================================
   h2書き出し画像タイトルのスタイル
============================================ */
.h2-title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
}

/* タイトル画像自体のサイズ・アスペクト比をコントロール */
.h2-title img {
    max-height: 40px; /* モバイル時のタイトルの高さ */
    width: auto;
    height: auto;
    margin: auto 30px;
}

/* PCサイズ（画面幅 768px 以上）用の調整 */
@media (min-width: 768px) {
    .h2-title img {
        max-height: 60px; /* PCでのタイトルの高さ */
    }
}

/* ==========================================
   出演者（キャスト）カードのスタイル
   
   【レイアウトの設計背景】
   ・カード全体の要素（li）自体を傾斜（transform: skew）させてしまうと、
     中身の写真・テキスト・ボタンまで斜めに歪んでしまいます。
   ・これらを解決するため、親であるカード本体（.cast-card）は透明かつ「直立」させたままにし、
     疑似要素（::before, ::after）をレイヤーとして裏側に重ね合わせる【3層構造】にしています。
     - 1層目（最背面）: 疑似要素 ::before（左に少し傾いた、半透明の青背景）
     - 2層目（中　間）: 疑似要素 ::after（傾いていない、太さ1.6ptの白い枠線）
     - 3層目（最前面）: メインコンテンツ（通常配置された直立の写真、テキスト、ボタン）
============================================ */

/* カード全体の枠（liタグ） */
.cast-card {
    position: relative;             /* 疑似要素（背景・白枠）を絶対配置するための基準点 */
    background-color: transparent;  /* 本体背景は透明化（::before で背景レイヤーを描画するため） */
    padding: 16px 16px 24px;        /* 傾いた背景や白枠がはみ出してもコンテンツが収まるように余白を調整(下方向を24pxに) */
    display: flex;
    flex-direction: column;
    align-items: center;            /* 中の要素を横方向中央に揃える */
    text-align: center;
    z-index: 1;                     /* 疑似要素（z-index: -1, -2）より手前にメインコンテンツを表示するため */
}

/* 1層目：傾いた半透明の青背景
   ・画像やテキストへの傾斜干渉を防ぐため、この疑似要素のみを skewX で傾けています。 */
.cast-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 96%;
    height: 96%;
    background-color: rgb(0 119 185 / 30%); /* #0077b9 の 30%不透明度 */
    transform: rotate(-0.005turn);        /* 左に傾ける（回転） */
    z-index: -2;                    /* 最背面（白枠や通常コンテンツの裏）に配置 */
}

/* 2層目：傾かない白い境界線枠
   ・傾いた背景（::before）の上に、まっすぐ（傾けない）な白い境界線を描画します。 */
.cast-card::after {
    content: "";
    position: absolute;
    top: 4px;                       /* 少し内側に白い枠を配置するためのオフセット */
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1.6pt solid #fff;       /* 太さ1.6ptの白い線 */
    pointer-events: none;           /* マウスイベントを透過させ、前面のボタンやリンクのクリックを妨げないようにする */
    z-index: -1;                    /* 背景（::before）の上、かつ通常コンテンツの奥に配置 */
}

/* 顔写真の枠 */
.cast-img-wrap {
    width: 100%;
    overflow: hidden;
    margin-bottom: 8px;
}

/* 写真自体 */
.cast-img {
    width: 100%;
    height: 100%;
    object-fit: cover;              /* 写真のアスペクト比を保ったまま領域いっぱいに表示 */
}

.cast-arrow-img {
    width: 10%;
    height: 10%;
    object-fit: cover;              /* 写真のアスペクト比を保ったまま領域いっぱいに表示 */
}

/* 出演者名と日付の枠 */
.cast-txt-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-bottom: 8px;
    height: 55px;
}

.cast-txt-wrap .cast-img {
    width: 100%;                     /* 親の幅いっぱいに合わせる */
    max-width: 100%;
    height: auto;                    /* 縦横比を維持 */
    max-height: 45px;                /* 高さが大きくなりすぎないように制限 */
    object-fit: contain;             /* 枠内に収まらない場合は自動縮小 */
}

@media (min-width: 768px) {
    .cast-txt-wrap {
        height: 55px;
    }
    .cast-txt-wrap .cast-img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 45px;
        object-fit: contain;
    }
}

/* カード内に配置される共通ボタン（.btn-common）のサイズをカード用に最適化 */
.cast-card .btn-common {
    width: 100%;                     /* カード幅に合わせたサイズ */
    padding: 10px 32px 10px 16px;   /* パディングをカード用にコンパクト化（上 右 下 左） */
    font-size: 12px;
}

/* カード内ボタン用：矢印（::after）の位置調整 */
.cast-card .btn-common::after {
    right: 16px;
}
.cast-card .btn-common:hover::after {
    right: 12px;
}

/* ==========================================
   アンカー（キャスト9）専用の豪華スキン・レイアウト
   
   【レイアウトの設計背景】
   ・アンカー用の背景画像は、スマホ用（縦長）とPC用（極端な横長ワイド）でアスペクト比が大きく異なります。
   ・画像の不要な縦伸び（引き伸ばし歪み）を防ぐため、メディアクエリを使用してレイアウト自体をレスポンシブに可変させます。
     - スマホ（デフォルト）: 通常の縦並びレイアウトを維持し、縦長の「cast-9-bg-sp.png」をフィットさせます。
     - PC（768px以上）   : flex-direction: row（横並び）に切り替え、
                           [左: 写真] -> [中: 日付] -> [右: ボタン] の構成にすることで、
                           横長の豪華フレーム「cast-9-bg.png」に美しくフィットさせます。
============================================ */

.cast-card-anchor {
    /* 1. 通常キャストカード用の疑似要素（青背景・白枠）をリセットし、SP用背景を適用 */
    background-image: url('../img/cast-9-bg-sp.png');
    background-size: contain;       /* 縦横比を維持して枠線が綺麗に収まるように設定 */
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    padding: 32px 32px;             /* ゴールドフレームに文字が被らないよう余白を広めに確保 */
    aspect-ratio: 1381 / 1643;      /* SP用背景画像の解像度 (1381x1643) の比率を維持して歪みを防止 */
}

/* 通常キャストカード用の疑似要素を非表示化 */
.cast-card-anchor::before,
.cast-card-anchor::after {
    content: none !important;
}

/* スマホ用：名前画像サイズを拡大（共通制限45pxを上書き） */
.cast-card-anchor .cast-txt-wrap {
    height: auto;                   /* 共通の高さ（55px）を解除 */
    margin-bottom: 8px;
}
.cast-card-anchor .cast-txt-wrap .cast-img {
    height: 64px;                   /* モバイル時の高さを拡大 */
    max-height: 64px;               /* 共通の max-height: 45px; を上書き解除 */
    width: auto;                    /* 共通の width: 100%; を上書き解除 */
}

/* スマホ用：名前画像とボタンをラップして縦に並べるブロック */
.cast-info-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* スマホ用：ボタンのサイズ比率を調整 */
.cast-card-anchor .btn-common,
.cast-card-anchor .btn-comingsoon {
    width: 100%;                    /* 横幅いっぱいに表示 */
    height: 54px;                   /* 高さを確保して横伸び感を緩和 */
    font-size: 13px;                /* 文字サイズを少し拡大 */
    padding: 12px 36px 12px 20px;   /* 上下余白を調整 */
}

/* 2. PCサイズ（画面幅 768px 以上）用の横長ワイドレイアウト */
@media (min-width: 768px) {
    .cast-card-anchor {
        background-image: url('../img/cast-9-bg.png');
        display: flex;
        flex-direction: row;        /* 共通スタイルの縦並びを上書きし、横並びにする */
        align-items: center;
        justify-content: space-between; /* 両端に寄せる */
        gap: 8px; /* カラム間の余白 */
        padding: 28px 32px;
        aspect-ratio: 1844 / 743;
        max-width: 90%;             /* 全体の幅を90%に制限（内部要素は自動追従） */
    }

    /* アンカー用写真エリア（左カラム）の再定義 */
    .cast-card-anchor .cast-img-wrap {
        flex-shrink: 0;           /* 縮まないように設定 */
        flex-basis: 50%;          /* 比率を42%に引き上げて顔写真をさらに大きく */
        max-width: 420px;         /* ただし無限に大きくはならないように上限を設定 */
        margin: 0;                /* 不要なマージンをリセット */
    }
    
    /* 右側：情報ブロック（右カラム）の再定義 */
    .cast-card-anchor .cast-info-block {
        flex-grow: 1;             /* ★最重要: 残りのスペースを全て埋める */
        display: flex;
        flex-direction: column;
        align-items: center;      /* 中の要素を中央揃えにしてバランスを取る */
        justify-content: center;
        gap: 16px;                /* 名前とボタンの間の余白 */
    }
    
    .cast-card-anchor .cast-txt-wrap {
        width: 80%;               /* 情報エリアの中で80%の幅を持つ */
        max-width: 300px;         /* 上限を設定 */
        margin-bottom: 0;         /* gapで管理するため不要に */
        height: auto;             /* 共通の高さ（55px）を解除 */
    }
    
    .cast-card-anchor .cast-txt-wrap .cast-img {
        width: 80%;             /* 名前/日付画像の高さを調整（デフォルト45pxから80pxへ拡大） */
        max-width: 300x;         /* 共通の max-height: 45px; を上書き解除 */
        width: auto;              /* 共通の width: 100%; を上書き解除 */
    }

    .cast-card-anchor .btn-common,
    .cast-card-anchor .btn-comingsoon {
        width: 240px;               /* 横幅を少し抑えて縦横比を最適化 */
        font-size: 15px;            /* 文字サイズを大きく */
        padding: 15px 40px 15px 24px;/* 上下左右の余白を比例拡大して高さを確保 */
    }
}

.stream-button-container {
    width: 100%;
}