@charset "UTF-8";
/* =========================================================
   スマホ表示用の上書きCSS（style_r18.css の後に読み込む）
   - 767px以下の画面だけに効く。PC表示には一切影響しない
   - 元に戻すときは index.html の style_sp.css を読み込む <link> 1行を消すだけ
   - 仕組み：各セクションを「画面幅 × --sp-k 倍」の幅で描画して中央に寄せ、
     左右の装飾を画面外にはみ出させる（.page-feature の overflow:hidden で切れる）。
     セクション内は cqi 基準なので、中身はすべて --sp-k 倍に拡大される。
   - このファイルは Android版ページ(index_sp.html)だけが読み込む
   ========================================================= */

/* キャラクター紹介：Android版用に調整した画像へ差し替え（画面幅に関係なく適用）
   並びは style_sp_r18.css の illustration1〜8 と同じ（1枚目から 01,03,05,04,06,02,07,08） */
.page-feature .illustration1 { background-image: url(https://iv-n-tight.webaccel.saikyo.biz/dmm4web/pre_registration/img/pic_char01_android.webp) !important; }
.page-feature .illustration2 { background-image: url(https://iv-n-tight.webaccel.saikyo.biz/dmm4web/pre_registration/img/pic_char03_android.webp) !important; }
.page-feature .illustration3 { background-image: url(https://iv-n-tight.webaccel.saikyo.biz/dmm4web/pre_registration/img/pic_char05_android.webp) !important; }
.page-feature .illustration4 { background-image: url(https://iv-n-tight.webaccel.saikyo.biz/dmm4web/pre_registration/img/pic_char04_android.webp) !important; }
.page-feature .illustration5 { background-image: url(https://iv-n-tight.webaccel.saikyo.biz/dmm4web/pre_registration/img/pic_char06_android.webp) !important; }
.page-feature .illustration6 { background-image: url(https://iv-n-tight.webaccel.saikyo.biz/dmm4web/pre_registration/img/pic_char02_android.webp) !important; }
.page-feature .illustration7 { background-image: url(https://iv-n-tight.webaccel.saikyo.biz/dmm4web/pre_registration/img/pic_char07_android.webp) !important; }
.page-feature .illustration8 { background-image: url(https://iv-n-tight.webaccel.saikyo.biz/dmm4web/pre_registration/img/pic_char08_android.webp) !important; }

@media screen and (max-width: 767px) {

    /* 高さ固定(9570)をやめ、拡大後のセクション高さの合計にする */
    .page-feature .template {
        height: auto !important;
    }

    /* 各セクションを --sp-k 倍の幅のコンテナにして中央寄せ */
    .page-feature .feature-header,
    .page-feature .gallery-introduction,
    .page-feature .movie-introduction,
    .page-feature .story-introduction,
    .page-feature .character-introduction,
    .page-feature .system-introduction,
    .page-feature .campaign-introduction,
    .page-feature .official-x-introduction {
        container-type: inline-size;
        width: calc(var(--sp-k) * 100%) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin-left: calc((1 - var(--sp-k)) * 50%) !important;
    }

    /* 倍率は「見せたい中央部分の幅」から決めている（1920 ÷ 中央部分の幅） */
    .page-feature .feature-header           { --sp-k: 1.7;  aspect-ratio: 1920 / 900; }
    .page-feature .gallery-introduction     { --sp-k: 1.75; aspect-ratio: 1920 / 1375; }
    .page-feature .movie-introduction       { --sp-k: 2.0;  aspect-ratio: 1920 / 1200; }
    .page-feature .story-introduction       { --sp-k: 1.7;  aspect-ratio: 1920 / 1265; }
    .page-feature .character-introduction   { --sp-k: 1.3;  aspect-ratio: 1920 / 2214; }
    .page-feature .system-introduction      { --sp-k: 1.9;  aspect-ratio: 1920 / 1352; }
    .page-feature .campaign-introduction    { --sp-k: 1.72; aspect-ratio: 1920 / 1111; }
    /* フッターはゲーム情報をロゴの下に回すため、元(1312)より縦に伸ばす */
    .page-feature .official-x-introduction  { --sp-k: 1.6;  aspect-ratio: 1920 / 1900; }

    /* トップ：元の位置(250)だと左端が画面外で切れるので、見えている範囲の左上に寄せる
       （倍率1.7のとき画面左端はデザイン上の約395の位置） */
    .page-feature .title-logo {
        left: calc(440 * 100cqi / 1920) !important;
    }

    /* ストーリー：本文（画像）を画面の真ん中に置き、大きくする
       元は左寄せで幅591。スマホでは見出しの下・左右中央に幅1000で表示する */
    .page-feature .story-text {
        top: calc(360 * 100cqi / 1920) !important;
        left: 50% !important;
        width: auto !important;
        height: auto !important;
        transform: translateX(-50%) !important;
    }
    .page-feature .story-text img {
        width: calc(1000 * 100cqi / 1920) !important;
    }

    /* 事前登録ボタン下のチェックボックス：枠を広げ、文字を読める大きさに戻す */
    .page-feature .checkbox.type-oblong {
        width: 260px !important;
        margin: 0 0 0 calc(50% - 130px) !important;
        padding: 6px 10px !important;
        gap: 4px 0 !important;
    }
    .page-feature .checkbox.type-oblong .box-info,
    .page-feature .checkbox.type-oblong .box-prof,
    .page-feature .checkbox.type-oblong .box-name {
        font-size: 10px !important;
    }
    .page-feature .checkbox.type-oblong .box-name {
        width: 100% !important;
    }

    /* フッター：ロゴを中央に、ゲーム情報はロゴの下に縦並びで配置 */
    .page-feature .official-x-introduction .logo-white {
        margin-left: calc(-284 * 100cqi / 1920);
    }
    .page-feature .official-x-introduction .game-details {
        top: calc(960 * 100cqi / 1920);
        left: 50%;
        margin-left: calc(-500 * 100cqi / 1920);
        width: calc(1000 * 100cqi / 1920);
    }
    .page-feature .official-x-introduction .game-details dl {
        font-size: 9px;
        grid-template-columns: 60px 1fr;
    }
    .page-feature .official-x-introduction .final-footer-bar p {
        font-size: 10px;
    }

    /* ムービー：スマホのブラウザは動画中央に標準の再生ボタンを出すため、
       装飾の再生ボタン画像と二重に見える。スマホでは装飾側を消す */
    .page-feature .movie-play-btn {
        display: none !important;
    }

    /* 右下の「報酬ページへ」ボタンを押しやすい大きさに */
    .page-feature .sticky-reward-btn img {
        width: 90px;
        height: auto;
    }
}