/* =============================================================
   動画一覧ページ(/movies)用スタイル(PC/SP統合版)

   レスポンシブ統合前はPC専用CSSとSP専用CSSの2ファイルに分かれており、
   サーバーサイドのUA判定でどちらか一方だけが読み込まれていた。
   css/style.css・css/enter.css と同じ方針で1ファイルに統合している。

   構成:
     1. 全幅共通ルール(宣言が完全一致していたもの)
     2. @media (max-width: 991.98px) … 統合前のSP専用CSS
     3. @media (min-width: 992px) … 統合前のPC専用CSS

   #casts_wrapper_ver2 という同じIDが /casts・/schedule(子要素は
   .cast-box)でも使われており、css/style.css側にも同名セレクタの
   ルールが存在する(css/style.cssの「4. タブレット幅の調整」
   セクションのコメントを参照)。
   本ファイルの #casts_wrapper_ver2 { ... }(コンテナのflex配置)は
   style.css側の同名ルールと値が完全に一致しており、実質的な重複
   (どちらが後勝ちしても見た目は変わらない)。あえて残しているのは
   movies.css単体でも/moviesページの見た目が完結して読めるように
   するため。#casts_wrapper_ver2 .movie-box 以下は .movie-box という
   クラス名でスコープされているため .cast-box 側とは衝突しない。

   タブレット幅(576-991px)での #casts_wrapper_ver2 .movie-box の扱い
   について: style.css側は同じ576-991px帯で #casts_wrapper_ver2 の
   子が .cast-box の場合だけ3〜4列に列数を増やす調整を
   :has(.cast-box) で追加しているが(.cast-boxはaspect-ratioで縦長に
   固定されているため、SPの2列幅のまま991pxまで引き伸ばすとカードが
   極端に縦長になってしまうのを防ぐため)、.movie-box 側には同種の
   追加ルールをあえて置いていない。.movie-box の高さは
   `.movie { height: auto }` で中身の動画(YouTube埋め込み)の
   アスペクト比に追従するだけで、.cast-box のような固定
   aspect-ratioによる強制縦長化は起きない。そのため、下の
   @media (max-width: 991.98px) ブロック(統合前のSP専用CSS)の
   「1カラム・ほぼ全幅」というレイアウトがそのまま576px〜991pxの
   タブレット幅まで伸びても、動画カードが横長のまま大きくなるだけで
   見た目が破綻しない。よってタブレット幅専用の列数調整は不要と
   判断し、意図的に追加していない(見落としではない)。
   ============================================================= */

/* 1. 全幅共通ルール(統合前のPC専用CSS / SP専用CSSで宣言が完全一致) */

#casts_wrapper_ver2 .movie {
    position: relative;
    width: 100%;
    height: auto;
}

/* 2. @media (max-width: 991.98px) … 統合前のSP専用CSS

   上限が 991px ではなく 991.98px なのは(この .98 は消さないこと):
   境界を (max-width: 991px) / (min-width: 992px) の整数ペアにすると、
   ブラウザのCSSピクセル幅が小数になったとき(ズーム・OSの拡大縮小等)
   どちらの @media にも一致しない隙間ができ、このファイルはほぼ全ての
   宣言を下記2ブロックのどちらかに入れているため /movies の
   レイアウト指定がまるごと失われる。詳しい理由は css/style.css 冒頭の
   同名コメントを参照。下限側の (min-width: 992px) は変更してはいけない。 */

@media (max-width: 991.98px) {

    #casts_wrapper_ver2 {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-bottom: 15rem;
        padding:0 1% ;
        box-sizing: border-box;
        justify-content:space-between;
    }

    #casts_wrapper_ver2 .movie-box {
        width: calc((100% ) - (0.25%));
        position: relative;
        transition: all 0.2s;
        margin-top:1%;
    }

    #fixed_footer_menu{
        z-index: 999;
    }

    #casts_wrapper_ver2 .movie::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 30%;
        bottom: 0;
        left: 0;
        background: linear-gradient(0deg, #000000b7, transparent 70%, transparent);
        pointer-events: none;
    }

    #casts_wrapper_ver2 .movie-box .data {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding:0;
        color:#fff;
        pointer-events: none;

        h3{
            text-align: center;
            font-weight: 400;
            font-size:1.8rem;
            margin:0;
            margin-bottom: 0.4rem;
            padding:0;
        }
        h3 a {
            pointer-events:auto;
            text-decoration: none;
            color: #fff;
        }
        .size{
            font-size: 1.2rem;
            display:none;
        }
        .schedule{
            font-size: 1.3rem;
            margin-top:0.4rem;
            .time{
                margin-left:0.8rem;
            }
        }
    }

}

/* 3. @media (min-width: 992px) … 統合前のPC専用CSS */

@media (min-width: 992px) {

    #casts_wrapper_ver2 {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-bottom: 200px;
    }

    #casts_wrapper_ver2 .movie-box {
        width: calc(100% / 2);
        overflow: hidden;
        position: relative;
        transition: all 0.2s;
    }

    #casts_wrapper_ver2 .movie-box:hover{
        opacity: .8;
    }

    #casts_wrapper_ver2 .movie::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        pointer-events: none;
        top: 0;
        left: 0;
        background: linear-gradient(0deg, #000000b7, transparent 50%, transparent);
    }
    #casts_wrapper_ver2 .movie-box .data {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 2rem 50px;
        color:#fff;
        pointer-events: none;
        .newface{
            font-size:1.3rem;
            margin:0;
        }
        h3{
            font-weight: 400;
            font-size:2.6rem;
            margin:0;
            margin-bottom: 0.8rem;
            padding:0;
            letter-spacing: 0.05rem;
        }
        h3 a {
            pointer-events:auto;
            text-decoration: none;
            color: #fff;
            border-bottom: 1px solid #fff ;
            padding-bottom: -1px;
        }
        .size{
            font-size: 1.4rem;
        }
        .schedule{
            font-size: 1.7rem;
            margin-top:0.8rem;
            .time{
                margin-left:0.8rem;
            }
        }
    }

}