@charset "utf-8"; /** * ヘッダー 言語（エリア）切り替えプルダウン * * 日本語版・英語版の両方から読み込む共有スタイル。 * jp/css/common.css と en/css/common.css は別ファイル（18行の差分あり）のため、 * 両方に同じ記述を持たせず本ファイル1箇所に集約している。 * 読み込みは files/header.php 内で行う（groupHeader.css と同じ方式）。 * の common.css より後に読み込まれるため、CSS変数を参照でき上書きも効く。 * * DOM上にプルダウンを2つ置き、ブレークポイントで出し分ける。 * .lang-switch--pc-only … ヘッダー右上（769px以上で表示） * .lang-switch--in-menu … ハンバーガーメニュー内（768px以下で表示） * JSでDOMを移動させる方式は画面回転・リサイズで壊れるため採らない。 * * CSS変数は common.css の :root で定義済みだが、 * 万一読み込まれない場合に崩れないようフォールバック値を併記している。 */ /* ===== プルダウン本体 ===== */ .lang-switch__select { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 32px; margin: 0; padding: 0 30px 0 12px; border: 1px solid #707070; border-radius: 4px; background-color: #fff; /* 標準の矢印を消しているため、山形の矢印をdata-URIで描画する （画像ファイルを追加せず、共有CSSからの相対パス問題も回避できる） */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23130303' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px; color: var(--text-primary, #130303); font-family: inherit; font-size: 12px; font-weight: 700; line-height: 30px; cursor: pointer; transition: border-color 0.2s ease; } .lang-switch__select:hover { border-color: var(--text-primary, #130303); } .lang-switch__select:focus-visible { outline: 2px solid var(--color-primary, #e70014); outline-offset: 2px; } /* ===== ヘッダー右上（PC専用） ===== */ /* .header-main は position:relative なので絶対配置で右端に寄せる。 ハンバーガー（.mobile-menu）は768px以下でのみ表示されるため、PCでは競合しない。 */ .lang-switch--pc-only { position: absolute; right: var(--space-md, 15px); top: 50%; transform: translateY(-50%); width: 150px; z-index: 120; } @media (max-width: 768px) { .lang-switch--pc-only { display: none; } } /* ===== ハンバーガーメニュー内（SP専用） ===== */ .lang-switch--in-menu { display: none; } @media (max-width: 768px) { .lang-switch--in-menu { display: block; /* 展開パネルは align-items:flex-start のため幅を明示する。 左右のpaddingは .nav-item（0 30px）と左端を揃えるための値で、 プルダウン（width:100%）はこの内側の幅いっぱいに広がる。 */ width: 100%; padding: var(--space-lg, 30px) var(--space-lg, 30px) 0; border-top: 1px solid #e0e0e0; } } /* メニュー内の小見出し（.nav-subtitle と同じ体裁） */ .lang-switch__title { margin: 0 0 var(--space-xs, 5px); color: var(--color-primary, #e70014); font-size: 10px; font-weight: 400; line-height: 1.4; } /* ===== 英語版：メニュー内が言語切り替えのみのパターン ===== */ /* 英語版はナビ項目（Game Modes / Cars / Courses / Cabinet）が 該当ページ未作成のため非表示のままで、パネルには言語切り替えだけが入る。 */ @media (min-width: 769px) { /* 中身が言語切り替えだけのため、PCでは高さ60pxの空の白帯になってしまう。 ハンバーガー自体はPCで非表示なので、ナビ枠ごと隠してPC表示を従来どおりに保つ。 */ .header-nav--menu-only { display: none; } } @media (max-width: 768px) { /* 項目が1つだけなので、全画面パネル（height:100dvh）ではなく ヘッダー直下に開く小さなパネルにする。 common.css の .header-nav.mobile-active と詳細度が同じで、 本ファイルが後に読み込まれるため上書きが効く。 */ .header-nav--menu-only.mobile-active { height: auto; padding: var(--space-lg, 30px) 0; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12); } /* 上にナビ項目が無いため区切り線と上余白は不要 */ .header-nav--menu-only .lang-switch--in-menu { padding-top: 0; border-top: none; } }