@charset "utf-8";
/**
 * 言語（ゲームバージョン）選択ページ 固有スタイル
 *
 * 配色・フォント・背景・セクション見出し・フッター、および言語選択ボタンの見た目は
 * jp/css/common.css をそのまま読み込んで踏襲している。
 * ボタンは日本語版・英語版の「ニュース一覧」等と同じ .cta-button を使用しているため、
 * 本ファイルでは配置（デスクトップ横並び／SP縦並び）と余白の調整のみを定義する。
 *
 * CSS変数（--space-lg 等）は common.css の :root で定義済み。
 */

/* サイトヘッダー（ナビ）を持たないため、余白は main 側で確保する。
   2026-09-09：ボタン下の余白を広げるお戻しに合わせて padding-bottom を増量。 */
.lang-select main {
    padding-bottom: calc(var(--space-xl) + var(--space-lg));
}

/* ===== 最上部の赤ライン =====
   common.css の .accent-line-red は 10px（黒ラインとの2本組み前提）だが、
   本ページは赤1本のみのため「細め」の 5px に落とす。 */
.lang-select .accent-decoration--top .accent-line-red {
    height: 5px;
}

/* common.css の .accent-decoration+.section:before による装飾画像は
   本ページではメインビジュアルと干渉するため無効化する */
.lang-select .accent-decoration + .section:before {
    content: none;
}

/* ===== キービジュアル =====
   背景（img/main-visual.jpg 2732x1434）とロゴ（img/logo.png 1184x502）を重ねる。
   ロゴの配置は添付デザインからの実測値。
     ・横位置 … 中央
     ・ロゴ幅 … ビジュアル幅の 42.4%
     ・上位置 … 3.0%（logo.png は上53px・下59pxの余白を含むため、
                      ロゴ実体の上端はビジュアル高さの 6.6% に来る）
   器に背景と同じ比率を持たせることで、この%指定が常に正確に効く。
   中央寄せは left + width で行い、transform はスライドアニメーション専用に空けている。 */
.hero {
    position: relative;
    aspect-ratio: 2732 / 1434;
    overflow: hidden;
    background-color: #000;   /* 読み込み前の下地 */
    line-height: 1;

    /* ===== 下端を徐々に透明化 =====
       2026-09-09 のお戻し「グラデーションをかけれますか？／徐々に透明化に」。
       単色へのフェードではなくマスクで実体を透過させるため、
       背景（body の --bg-light）の上に自然に溶ける。
       --hero-fade-start … ここから下がフェード開始位置（0%=上端／100%=下端）
       mask と -webkit-mask の両方を指定（Safari 15 以前は接頭辞必須）。

       開始位置は「車にグラデーションをかけない」ため車体の下端より下に置く。
       車体下端の実測値（画像高さに対する位置）
         PC  main-visual.jpg    … 90.3%
         SP  main-visual_sp.jpg … 86.0%
       器の比率は画像と同じ（PC）／高さ基準の cover（SP）なので、
       画像内の縦位置の％はそのまま器の高さの％として使える。 */
    --hero-fade-start: 91%;
    -webkit-mask-image: linear-gradient(to bottom, #000 var(--hero-fade-start), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 var(--hero-fade-start), transparent 100%);
}

.hero__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2026-09-09 のお戻し「ロゴを少し小さめに」「上部を少し広めに」により、
   幅 42.4% → 36%、上位置 3% → 6% に変更（left は中央維持のため (100-36)/2）。 */
.hero__logo {
    position: absolute;
    top: 6%;
    left: 32%;
    width: 36%;
}

/* ----- 読み込み完了までは非表示 ----- */
.hero__bg {
    opacity: 0;
}

.hero__logo {
    opacity: 0;
    transform: translateX(-40px);
}

/* ----- is-ready（index.php のスクリプトが両画像の読み込み完了後に付与）で開始 -----
   ① 背景が 0s から 1.1s かけてふわっとフェードイン
   ② ロゴが 0.45s 遅延して、左40pxの位置から 0.9s かけてスライドイン＋フェードイン */
.hero.is-ready .hero__bg {
    opacity: 1;
    transition: opacity 1.1s ease-out;
}

.hero.is-ready .hero__logo {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.9s ease-out 0.45s,
                transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.45s;
}

/* 視差効果を控える設定の利用者にはアニメーションを適用せず、即座に表示する */
@media (prefers-reduced-motion: reduce) {
    .hero.is-ready .hero__bg,
    .hero.is-ready .hero__logo {
        transition: none;
        transform: none;
    }
}

/* ----- SP -----
   背景はSP専用画像（img/main-visual_sp.jpg 2732x2164）に切り替わる（index.php の <picture>）。
   器の比率も同画像に合わせるため、トリミングは発生しない。
   ロゴの配置はSP版添付デザインからの実測値。
     ・ロゴ幅 … ビジュアル幅の 85.7%
     ・上位置 … 1.8%（ロゴ実体の上端がビジュアル高さの 6.6% に来る。PC版と同じ位置）
   ブレークポイント 768px は index.php の <source media> と一致させること。 */
@media (max-width: 768px) {
    /* 2026-09-09 のお戻し「上部を少し広めに」「下部も少し広めに」により、
       器を SP 画像より縦長（2732:2520）にしてロゴ上下の抜けを広げる。
       背景は object-fit:cover のため左右がわずかにトリミングされる。 */
    .hero {
        aspect-ratio: 2732 / 2520;
        --hero-fade-start: 87%;   /* SP は車体下端 86.0% の直下から */
    }

    /* 幅 85.7% → 72%、上位置 1.8% → 5%（left は中央維持のため (100-72)/2） */
    .hero__logo {
        top: 5%;
        left: 14%;
        width: 72%;
    }
}

/* ===== Game Version セクション =====
   2026-09-09 のお戻し「少し下げて、車にかからないようにしてください」＋
   「Game Version の縦中心がグラデーションの境界あたりに来るように」。

   見出し（.section-header）の"縦中心"を、キービジュアルの下端
   ＝グラデーションが透明になりきる位置に合わせる。
   ％マージンはビジュアル「幅」に対して解決され、画面幅ごとにズレるため使わない。
   キービジュアル下端を基準に、見出しの高さの半分だけ引き上げている。
   これにより画面幅が変わっても縦中心は常に境界上に来る。

   .section-header の高さ ＝ .section-title の行送り（font-size × line-height 1.6）
     PC … 34px × 1.6 = 54.4px → 半分 27.2px
     SP … 26px × 1.6 = 41.6px → 半分 20.8px
   common.css 側で .section-title の font-size を変えたら、この値も追従させること。 */
.lang-select .hero + .section {
    --section-header-half: 27.2px;
    margin-top: calc(var(--section-header-half) * -1);
    padding-top: 0;
}

@media (max-width: 768px) {
    .lang-select .hero + .section {
        --section-header-half: 20.8px;
    }
}

/* ===== SNSアイコン =====
   Facebook アイコンは英語版のみに配置していたため、common.css（jp）側に定義がない。
   画像は複製せず英語版の実体を絶対パスで参照する。
   円形マークのため四隅まで届くXグリフと視覚的に揃うよう約17%拡大（英語版と同値）。 */
.lang-select .social-icon.facebook {
    background-image: url("/am/vg/wmsi/en/img/Facebook_Logo_Primary.png");
    width: 28px;
    height: 28px;
}

/* ゲームバージョン選択：デスクトップは横並び
   grid-auto-columns:1fr と width:max-content の組み合わせにより、
   ボタンの幅は「最も広いラベルの幅」に自動で揃う。
   固定値を持たないため、ラベルを変更しても等幅のまま崩れない。 */
.lang-menu {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    justify-items: stretch;
    gap: var(--space-lg);
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* .cta-button は単独配置を前提に margin を持つため、
   横並び時の間隔は gap に委ねて margin を打ち消す */
.lang-menu .cta-button {
    margin: 0;
}

/* キーボード操作時のフォーカス位置を明示する */
.lang-menu .cta-button:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

/* SP は縦並び（1カラムになるため幅は自動的に揃う） */
@media (max-width: 768px) {
    .lang-menu {
        grid-auto-flow: row;
        gap: var(--space-md);
    }
}