@charset "UTF-8";
/*
===============================================================================
css/common.css — カールスJr. サイトリニューアル（design-to-theme Stage4統合）
全ページ（top / sub）共通の基盤CSS。
出典: design-to-theme-work/site-launch/stage2_output/_foundation/foundation.css
（Stage2で全10ページに複製されていた基盤ブロックを本ファイルへ一本化）
統合方針:
- サイト全体で確定した共通ルール（リセット・@font-face・カラー変数・
site-header/site-footer/section-heading/pill-button等）はこのファイルに1回だけ記載し、
top.css/sub.cssでは重複させない。
- 言語差分（フォントファミリー等）は html[lang="ja"] / html[lang="en"] セレクタで出し分ける
（Stage2で確立された既存の慣習を踏襲）。
- フォント実体ファイルは本テーマの /fonts/ フォルダへ配置済み。相対パスは
css/common.css から見て ../fonts/ のまま変更不要（Stage2時点の構成と同一階層関係）。
===============================================================================
*/
/*
---リセット
---------------------------------------------------------------------------*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%; /* 1rem = 10px 基準 */
/* 【2026-08-18追記】スクロールバーの有無でbodyの実効幅が変わり、.site-header-inner
（max-width指定+margin:0 auto中央寄せ）の位置がページごとに左右へ数px揺れる問題への対策。
news（長いアーカイブ一覧でスクロールバーが出る）とlocation（短くスクロールバーが出ない）
を見比べるとロゴ〜ナビが左右にずれて見えることを確認。scrollbar-gutter:stableで
コンテンツの長さに関わらずスクロールバー分の幅を常時確保し、中央寄せ位置を固定する。 */
scrollbar-gutter: stable;
}
/*
---@font-face
---------------------------------------------------------------------------*/
/* 【2026-08-02追記・真因対応】ヘッダーナビのテキストが遷移直後に一瞬「大きく→小さく」見える
不具合の実測（Playwright + rAFフレーム単位計測）で、原因は
transition:all（既に2026-08-02の先行修正でcolorのみに絞り込み済み・無害だが根治ではなかった）
ではなく、フォールバック体（sans-serif実体）からNoto Sans JP本体へのfont-display:swap
スワップ時に、.site-header-nav-item a のwidth（auto）がフォールバック時33.7px→
スワップ後31.7pxへ「瞬時に」スナップすること（CSS Transitionsの仕様上widthのauto由来変化は
そもそも補間されないため、スナップ自体はtransition指定の有無に関わらず起きる）と判明した。
スワップが視認される時間窓は「フォント実体のダウンロード時間」に比例するため、根治には
フォント自体を軽量化しダウンロード時間を縮めることが必要。元のTTF/OTFは非サブセットの
フルセットで数MB（Noto Sans JP各ウェイト約5.2〜5.5MB）あり、単純format変換のWOFF2化だけで
文字セットは一切変えずに約59%の削減（5.2MB→約2.2MB）を確認済み（fontTools
`python3 -m fontTools.ttLib.woff2 compress` で生成・グリフ欠落リスクなし）。
src の先頭にwoff2を追加しwoff2対応ブラウザはそちらを優先取得、既存のttf/otfはそのまま
フォールバックとして残す（後方互換・グリフ欠落ゼロ・変更範囲はcss/fontsのみ）。
【2026-08-05追記・STG移行v1.1・patch-fontface.shにより自動適用】上記の
「ttf/otfをフォールバックとして残す」方針を変更した。本テーマをSTGへ反映するにあたり、
woff2非対応ブラウザ（IE11以前・2022-06サポート終了済み）向けのttf/otfフォールバックを
廃止しwoff2のみとした（デプロイ物 26.41MiB削減）。詳細は
doc/02_新サーバー/02_手順書/migrations/2026-08-05-theme-sync/ を参照。
本コメントはRenewリポジトリのみに適用（0801側の本ファイルは変更していない）。 */
/* SansBeam Head（欧文見出し・日英共通） */
@font-face {
font-family: 'SansBeam Head';
src: url('../fonts/stawix-sansbeamhead-heavy.woff2') format('woff2');
font-weight: 900;
font-style: normal;
/* 【2026-08-05】swap→block。.section-heading-title 等の見出しが読み込み直後に細いフォールバック体で
出てから実体に差し替わり高さが変わる（実測: JA /menu/ で47.05px→42.00px・CLS 0.0286）ため、
到着まで非表示にして「実体で1回だけ描画」させる。header.php / header-en.php で本woff2（37KB）を
preload済みなのでブロック時間は極めて短い（block期間の上限3秒に達する前に到着する）。
italic(900)/semibold(600)はpreload対象外（TOP限定・ページ下部の要素のみ使用）のため、
非表示時間が長くなるリスクを避けてswapのまま据え置く。 */
font-display: block;
}
@font-face {
font-family: 'SansBeam Head';
src: url('../fonts/stawix-sansbeamhead-heavyitalic.woff2') format('woff2');
font-weight: 900;
font-style: italic;
/* 【2026-08-05】swap→block。TOPの .whats-made-fresh 見出しが読み込み直後にフォールバック体で
描画され2行に折返してから実体で1行に縮む（実測: 高さ190px→95px、JA TOPで5624ms・EN TOPで3228ms）
ため、到着まで非表示にして「実体で1回だけ描画」させる。heavyitalic.woff2（37KB）は
header.php（is_front_page()）/ header-en.php（is_page_template('template-pages/top-en.php')）で
TOP限定にpreloadしているのでblock期間は実測1秒程度で済む。
italicを使わない下層ページではそもそもこの@font-faceが起動しないため影響しない。
semibold(600)はpreload対象外なのでswapのまま据え置く（preloadしない面にblockを付けると
実体到着まで最大3秒テキストが見えなくなる劣化になるため）。 */
font-display: block;
}
@font-face {
font-family: 'SansBeam Head';
src: url('../fonts/stawix-sansbeamhead-semibold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
/* Noto Sans JP（日本語版・本文/和文見出し/ナビ） */
@font-face {
font-family: 'Noto Sans JP';
src: url('../fonts/NotoSansJP-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Noto Sans JP';
src: url('../fonts/NotoSansJP-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Noto Sans JP';
src: url('../fonts/NotoSansJP-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Noto Sans JP';
src: url('../fonts/NotoSansJP-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Noto Sans JP';
src: url('../fonts/NotoSansJP-ExtraBold.woff2') format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
}
/* Roboto（英語版本文・EN版全般 / JP版404の英語原文併記部）
【2026-08-06】従来はEN版テンプレート（header-en.php）とJP版404（404.php）のから
Google Fonts の で外部読み込みしていたが、外部依存の排除と、nginxのCSPから
style-src の fonts.googleapis.com / font-src の fonts.gstatic.com を削除するため、
実体を本テーマの /fonts/ へ同梱して自前ホスティングへ切り替えた。は両テンプレートから
削除済み（出典・ライセンスは fonts/Roboto-NOTICE.txt・fonts/Roboto-LICENSE.txt）。
同梱したのは Google Fonts が配信する9サブセットのうち latin / latin-ext の2つのみ
（英語ページ用途のため。cyrillic・greek・math・symbols・vietnamese は不要）。
実体は可変フォント（wght軸）のwoff2で、1ファイルが400/700の両方を兼ねる。Google Fonts が
返すCSSと同一構造（同じファイルをweight別の@font-faceで固定）にしてあるため、
従来の描画（500→400・600→700へ丸められる2段階の見え方）はそのまま維持される。
font-display は当初 移行前の 指定（display=optional）を踏襲していたが、
2026-09-14 に latin を block へ変更した（理由は各@font-face内のコメント）。 */
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-latin.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: block; /* 2026-09-14修正: optional→block。optional は初回描画に間に合わなければ
そのページ表示中フォントを一切使わないため、ネットワーク遅延のあるSTG/本番では
初回だけフォールバック体で固定され「初回と再読み込みで文字幅が違う」症状になっていた。
blockなら実体到着まで不可視→必ずRobotoで描画され、サイズが変わること自体が起きない。
header-en.php でプリロード済みのため不可視時間は短い。
同じ理由でSansBeam Headも2026-08-05にswap→blockへ変更済み。 */
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-latin.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: block; /* 2026-09-14修正: optional→block。optional は初回描画に間に合わなければ
そのページ表示中フォントを一切使わないため、ネットワーク遅延のあるSTG/本番では
初回だけフォールバック体で固定され「初回と再読み込みで文字幅が違う」症状になっていた。
blockなら実体到着まで不可視→必ずRobotoで描画され、サイズが変わること自体が起きない。
header-en.php でプリロード済みのため不可視時間は短い。
同じ理由でSansBeam Headも2026-08-05にswap→blockへ変更済み。 */
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-latin-ext.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap; /* 2026-09-14: latin-ext はプリロードしていないため block にしない
（実体到着まで最大3秒不可視になる）。latin と違い英語本文では
ほぼ使われないので swap で十分。 */
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-latin-ext.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap; /* 2026-09-14: latin-ext はプリロードしていないため block にしない
（実体到着まで最大3秒不可視になる）。latin と違い英語本文では
ほぼ使われないので swap で十分。 */
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Webフォント読み込み中のフォールバック体メトリクス調整（size-adjust/ascent-override等）
【2026-08-18追記】.category-tab a・.site-header-nav-item a 等で、フォント未読込時の
フォールバック体（システムsans-serif）からWebフォントへのswap時に文字幅・行高が変わり
レイアウトがずれる問題（EN版で動画報告）への根治策。プリロードはタイミング短縮に
留まりswap自体は無くならないため、フォールバック体側の疑似メトリクスを実フォントに
合わせることでswapが起きても見た目上の幅・高さが変化しないようにする。
数値は各woff2実体をfontTools（Python）でOS/2・hheaテーブルを実測し算出。
基準フォールバックはArialの公開値（unitsPerEm 2048 / ascent 1854 / descent -434 /
lineGap 67 / capHeight 1467 / xAvgCharWidth 904）を使用。
Noto Sans JPはCJK全角込みのOS/2.xAvgCharWidthがLatin文字の実サイズと乖離するため
（実測983/1000em＝98.3%は通常のLatinフォントの40〜50%台と比べ明らかに異常値。
本サイトのNoto Sans JP適用箇所は".category-tab a"等いずれもLatin文字表示のため）、
xAvgCharWidthではなくcapHeight比（733/1000 vs Arial 1467/2048）で算出した。
SansBeam Head・RobotoはxAvgCharWidth比の値が妥当範囲のためそちらで算出。
計算式: size-adjust = 実フォント基準値/em ÷ Arial基準値/em
ascent-override = (実フォントascent/em) ÷ size-adjust（descent/line-gapも同様） */
@font-face {
font-family: 'SansBeam Head Fallback';
src: local('Arial'), local('Helvetica');
/* 2026-09-14修正: size-adjust 100.81%→71.79%。旧値は xAvgCharWidth 比という
比較できない指標で出していた（Roboto と同じ誤り。詳細はRobotoの@font-faceのコメント）。
実測（6文字列合計・900）: SansBeam 444.5px / Arial 619.1px → 71.79%。
旧値では**フォールバック体が 38.3% も太く**なっていた。font-display:block のため
通常は表示されないが、フォント取得に失敗した場合やblock期間(3秒)を超えた場合に露出する。
縦メトリクスは実測（hhea: upm1000 / ascender750 / descender-250 / lineGap200）から再計算。 */
size-adjust: 71.79%;
ascent-override: 104.47%; /* 0.75 / 0.7179 */
descent-override: 34.82%; /* 0.25 / 0.7179 */
line-gap-override: 27.86%; /* 0.20 / 0.7179 */
}
/* Noto Sans JP のフォールバック。
2026-09-14修正: 旧実装は font-weight 記述子の無い1面（実質400）だけだったため、
どのウェイトを要求しても同じ幅(624.4px)になり、実体（500=586.3 / 600=594.8 / 700=603.1 /
800=611.4）と 2.1〜6.5% ずれていた。実体と同じ5ウェイトに分け、各ウェイトで実測した比を入れる。
size-adjust は「実体の幅 ÷ 同ウェイトでArialが描画した幅」（実測・6文字列合計）。
縦メトリクスは実測（hhea: upm1000 / ascender1160 / descender-288 / lineGap0）÷ size-adjust。
※日本語グリフは Arial に無いため、和文ではこのフェイスは使われず素のsans-serif（システム和文）へ
落ちる。したがってこの調整が効くのは「Notoで描画される欧文」— EN版のナビ・タブ・
ボタン・価格などに限られる。 */
@font-face {
font-family: 'Noto Sans JP Fallback';
src: local('Arial'), local('Helvetica');
font-weight: 400;
size-adjust: 93.96%; /* 573.5 / 610.3 */
ascent-override: 123.46%; /* 1.160 / 0.9396 */
descent-override: 30.65%; /* 0.288 / 0.9396 */
line-gap-override: 0%;
}
@font-face {
font-family: 'Noto Sans JP Fallback';
src: local('Arial'), local('Helvetica');
font-weight: 500;
size-adjust: 96.06%; /* 586.3 / 610.3 */
ascent-override: 120.76%;
descent-override: 29.98%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Noto Sans JP Fallback';
src: local('Arial Bold'), local('Arial'), local('Helvetica');
font-weight: 600;
size-adjust: 96.07%; /* 594.8 / 619.1 */
ascent-override: 120.75%;
descent-override: 29.98%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Noto Sans JP Fallback';
src: local('Arial Bold'), local('Arial'), local('Helvetica');
font-weight: 700;
size-adjust: 97.42%; /* 603.1 / 619.1 */
ascent-override: 119.07%;
descent-override: 29.56%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Noto Sans JP Fallback';
src: local('Arial Bold'), local('Arial'), local('Helvetica');
font-weight: 800;
size-adjust: 98.75%; /* 611.4 / 619.1 */
ascent-override: 117.47%;
descent-override: 29.16%;
line-gap-override: 0%;
}
/* 【2026-09-14修正・前澤さん報告】EN下層の .menu-card-name 等が「初回に開いた時と再読み込みで
文字サイズが違う」。原因はこのフォールバックの size-adjust が過大だったこと。
旧値 118.69% は「Roboto の OS/2 xAvgCharWidth(1073/2048=0.5239) ÷ Arial の公開値(904/2048=0.4414)」
で算出していたが、**xAvgCharWidth はフォント間で比較できない**。Arial の公開値は旧 OS/2 v1 の
定義（小文字の加重平均）、Roboto の値は v3 以降の定義（全グリフの算術平均）で、別物を割っていた。
実測（Chromium・16px・700・"BEVERAGE BAR FREE REFILLS"）: Roboto 246.72px / Arial 247.14px。
Arial は**無調整で Roboto と 0.2% 差**しかなく、118.69% は 16.4% 太らせるだけの害だった。
Roboto は font-display:optional のため、キャッシュに無い初回はフォールバックが
そのページ表示の最後まで使われ続ける（swap しない）。結果、初回だけ 16% 太く見えていた。
新しい値は実測比から算出: size-adjust = 246.72/247.14 = 99.83%。
縦メトリクスは size-adjust 連動のため再計算した（Roboto hhea 実測 ascender 1900/2048=0.9277・
descender 500/2048=0.2441・lineGap 0）: ascent 0.9277/0.9983=92.93% / descent 0.2441/0.9983=24.45%。
⚠️ 同じ誤った式で算出した 'SansBeam Head Fallback'（現 100.81%・実測のあるべき値は約 67.6%）も
ずれているが、あちらは font-display:block でフォールバックが表示されないため本件とは切り離す。 */
/* 実体の Roboto が 400/700 で別ファイスなのに対し、旧実装はフォールバックを1面しか定義して
いなかった（font-weight 記述子なし＝400のみ）。そのため太字を要求しても Arial Bold が使われず、
実測で400/700とも同じ幅(241.41px)になり、1つの size-adjust では両ウェイトを揃えられなかった。
実体に合わせてウェイトごとに分け、それぞれ実測比から size-adjust を出す。 */
@font-face {
font-family: 'Roboto Fallback';
src: local('Arial'), local('Helvetica');
font-weight: 400;
/* 実測（6文字列の合計幅）: Roboto400 1561.39px / Arial Regular 1652.13px → 94.51% */
size-adjust: 94.51%;
ascent-override: 98.16%; /* 0.9277 / 0.9451 */
descent-override: 25.83%; /* 0.2441 / 0.9451 */
line-gap-override: 0%;
}
@font-face {
font-family: 'Roboto Fallback';
src: local('Arial Bold'), local('Arial'), local('Helvetica');
font-weight: 700;
/* 実測（同）: Roboto700 1587.77px / Arial Bold 1719.41px → 92.34% */
size-adjust: 92.34%;
ascent-override: 100.47%; /* 0.9277 / 0.9234 */
descent-override: 26.43%; /* 0.2441 / 0.9234 */
line-gap-override: 0%;
}
/*
---CSSカスタムプロパティ
---------------------------------------------------------------------------*/
:root {
/* カラーパレット */
--color-black: #000000; /* ブランドブラック */
--color-yellow: #FFC72C; /* ブランドイエロー */
--color-white: #FFFFFF; /* ホワイト */
--color-red: #C8102E; /* ブランドレッド（ロゴ星の輪郭・EN版タグ等の限定使用） */
--color-gray: #B3B3B3; /* グレー（category-tab非currentの文字色。白背景でのcolor-black opacity0.3と同等の見え方） */
/* フォントファミリー（欧文見出しは日英共通、本文は言語別） */
--font-heading: 'SansBeam Head', 'SansBeam Head Fallback', sans-serif;
--font-body-jp: 'Noto Sans JP', 'Noto Sans JP Fallback', sans-serif;
--font-body-en: 'Roboto', 'Roboto Fallback', sans-serif;
}
/*
===============================================================================
全ページ共通の細部（bodyの基本文字設定・img既定値）
出典: 各ページ css/style.css の「page base」ブロック（10ページ中9ページで同一パターン）。
font-familyのみ言語別のため html[lang] で出し分ける。
===============================================================================
*/
body {
color: var(--color-black);
background-color: var(--color-white);
overflow-x: hidden;
}
img {
max-width: 100%;
}
html[lang="ja"] body {
font-family: var(--font-body-jp);
font-feature-settings: "palt" 1; /* 2026-08-12 前澤さん指示: 日本語文章全体にpalt(プロポーショナル
メトリクス)を適用。継承プロパティのためbody基点1箇所で全ページの日本語テキストに波及する。
既存の.location-lead等への個別指定(top.css)は重複となるが実害がないため残置 */
}
html[lang="en"] body {
font-family: var(--font-body-en);
}
/*
===============================================================================
共通コンポーネント
===============================================================================
*/
/*
---site-header（グローバルヘッダー）
---------------------------------------------------------------------------*/
/* 出典: stage1_spec.md 3-1節 site-header。PC高さは内部パディングの積み上げで表現し、
実機検証で数px調整が入っても構造を崩さない設計。
【2026-08-01追記】.site-header-nav-overlay の z-index欠落バグ（SPハンバーガー展開時、
.site-headerと後続の position:relative 要素（.hero-media等）がともに z-index:auto のため、
DOM順で後に出現する要素がスタッキング上位に来てオーバーレイが隠れる不具合）を、jp-top/en-top/
jp-menu/en-menu の各担当が独立に発見・修正していた。ページ側で個別に上書きするのではなく、
基盤側の恒久対応として本ファイルの .site-header に z-index:100 を直接持たせることで解消する
（en-menu担当のコメントで明示的に「根本対応は foundation.css 側への追加を推奨」とされていた対応）。
【2026-08-02追記】SPハンバーガーメニュー展開時、オーバーレイ上部に白い隙間が出る不具合を修正。
原因はCSSマージン相殺（margin collapsing）: .is-nav-open時に .site-header-inner が
display:noneになり .site-header 自体がpadding/borderを持たない「空の」ボックスになるため、
後続要素（TOPページ.hero等、.hero{margin-top:30px}）のtop marginがborder/paddingのない
空要素の連鎖（svg.SvgIcon → .filter → .site-header）を突き抜けてbodyの外側まで相殺され、
ページ最上部（の直前）に隙間として可視化されていた（Playwrightで
body.getBoundingClientRect().topが開閉で0→30pxに変化することを実測して特定）。
.site-header に display:flow-root を持たせて単独のBFC（ブロック整形コンテキスト）を
確立させることで、子要素側のtop marginがheaderを突き抜けて外に相殺されるのを遮断する
（position:absoluteの.site-header-nav-overlayはflow-rootでもクリップされないため、
オーバーレイ表示自体には影響しない）。 */
.site-header {
position: relative;
z-index: 100;
display: flow-root;
background-color: var(--color-black);
width: 100%;
}
.site-header-inner {
display: flex;
align-items: center;
justify-content: flex-start; /* 【2026-08-03 C1修正】space-between → flex-start。ロゴ/ナビ/SNS+言語切替の3分割均等配置をやめ、
「ロゴ+ナビ」左グループ・「SNS+言語切替」右グループの2グループ構成に変更（デザイン実測に基づく）。
右グループの寄せは.site-header-utilityのmargin-left:autoで実現（@media (min-width:768px)ブロック側）。 */
max-width: 1100px;
margin: 0 auto;
padding: 33px 0; /* [ESTIMATE: 33px / 目標118.5px（実測118〜119pxへの収束値）に対し、行内最大の子要素であるロゴ画像(実測高52.7px)を基準に逆算] */
}
@media (min-width: 768px) and (max-width: 1099px) {
.site-header-inner {
padding-left: 28px;
padding-right: 28px;
}
}
.site-header-logo {
display: block;
width: 170px;
line-height: 0;
}
.site-header-logo img {
display: block;
width: 100%;
height: auto;
}
.site-header-nav-list {
display: flex;
align-items: center;
gap: 16px; /* 2026-08-23修正: 20px→16px（top_pc.png実測: ナビ各項目のインク列 TOP345-374/MENU391-431/LOCATION450-521/NEWS540-580/RECRUIT598-659。項目間の空きがデザイン17-19pxに対しライブ22-23pxだった。.site-header-navはSPでdisplay:noneのためSPへの影響なし） */
list-style: none;
}
.site-header-nav-item a {
display: block;
color: var(--color-white);
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
/* 【2026-08-02追記】style.css側の汎用 a{transition:all .5s;} をそのまま継承すると、
ページ遷移直後のWebフォント切替（font-display:swapによるフォールバック→
Noto Sans JP/Robotoへのスワップでグリフ幅がわずかに変わりナビ項目の幅が
再計算される一瞬のリフロー）まで「全プロパティ0.5秒アニメーション」の対象に
なってしまい、本来一瞬で収束するはずの幅の変化が目に見える速度で
「大きく→縮小」に見えてしまう不具合の原因になっていた（Playwrightでキャッシュ
未取得の初回読み込みを実測し、幅が33.7px→31.7px等へ数百msかけて変化する
ことを確認）。hoverで実際に必要なのは色の変化のみのため、transitionを
colorだけに明示的に絞り込み、幅変化が瞬時に反映されるようにする。 */
transition: color 0.2s ease;
}
/* 2026-08-23: 等倍デザイン(top_pc.png / CJ_HP_top_E_v1_pc.png)では現在ページ(TOP)のナビ文字が
黄色 rgb(255,199,44) で描かれているが、前澤さん判断により**採用しない**。ヘッダーの黄色は
マウスオーバー時のみとし、現在ページの常時強調は行わない（.site-header-lang-item.is-current が
inherit で無強調なのと同じ扱い）。デザイン画像に合わせて .site-header-nav-item.is-current a を
黄色にする変更を再度入れないこと。 */
.site-header-nav-item a:hover {
color: var(--color-yellow);
}
/* グローバルナビ文字仕様（JP/EN完全共通・単一情報源）
【2026-08-05追記】前澤さん決定により書体と太さを言語共通化した。旧EN仕様は
Roboto / fw400 で、JP（Noto Sans JP / fw500）より明らかに細く見えていたため。
Robotoは400≡500・600≡700の2段階しか実体が無く500を指定しても400へ丸められるので、
EN側だけ太さを上げる手段が無く、書体ごとJPへ寄せるほかなかった。
【2026-08-05追記】font-size も前澤さん決定により 1.6rem へ統一（旧EN 1.5rem）。
書体・太さがJPと同一になった以上ENだけ小さく保つ根拠が無くなったため。実測で各項目幅が
JPと小数点まで一致することを確認済み（TOP 31.70 / MENU 46.36 / LOCATION 78.09 /
JP 19.16 / EN 21.36）。これで言語別の分岐が不要になったため4セレクタを1ルールへ統合した。
スコープ軸は html[lang] ではなく header要素のモディファイア .site-header--jp/--en。
SPドロワー(.site-header-nav-overlay-item)は別クラスのため対象外。ドロワー側の
文字仕様は @media (max-width:767px) 内の .site-header-nav-overlay-item に同値
（Noto Sans JP / 500 / 1.6rem）で別途定義してある（2026-08-05）。 */
.site-header--jp .site-header-nav-item a,
.site-header--jp .site-header-lang-item,
.site-header--en .site-header-nav-item a,
.site-header--en .site-header-lang-item {
font-family: var(--font-body-jp);
font-weight: 500;
font-size: 1.6rem;
}
/* 2026-08-23修正: グローバルナビ項目のみ 1.6rem(16px)→15px。JP/EN両デザインで実測した
インク幅比が LOCATION 72/76=0.947・RECRUIT 62/66=0.939（JP）、TOP/MENU/LOCATION 0.968/0.955/0.961（EN）
と一致し、16×0.94〜0.96≒15px。JP｜EN切替(.site-header-lang-item)はデザインどおり16pxのままにする
必要があるため、上の共通ルールから font-size だけを分離した（言語別の分岐は増やしていない）。
.site-header-navはSPでdisplay:noneのためSPへの影響なし。 */
.site-header--jp .site-header-nav-item a,
.site-header--en .site-header-nav-item a {
font-size: 15px;
}
.site-header-utility {
display: flex;
align-items: center;
gap: 18px; /* 2026-08-23修正: 25px→18px（top_pc.png実測: Xアイコン左端1105 / Instagram 1150-1175 / JP 1195-1212。ライブはX左端1083でクラスタ全体が16px内側へ広がっていた。SPでは.site-header-snsがdisplay:noneのため実質SPへの影響なし） */
}
.site-header-sns {
display: flex;
align-items: center;
gap: 20px;
list-style: none;
}
.site-header-sns-link img {
display: block;
/* 2026-08-23修正: 25px→27px（CJ_HP_top_E_v1_pc.png実測: SNSアイコンのインクが
x=1104..1130 / 1149..1175 でいずれも27px。ライブは25px。
.site-header-snsはSPでdisplay:none（ドロワーは別クラス.site-header-nav-overlay-sns img）のためSPへの影響なし） */
width: 27px;
height: 27px;
}
.site-header-lang {
display: flex;
align-items: center;
gap: 0px; /* 2026-08-23修正: 8px→0px（top_pc.png実測: JP 1195-1212 /「｜」1221-1222 / EN 1233-1249。区切りが全角「｜」でアドバンス16pxあり左右にgapが二重に効いてブロック幅が design 55px に対し live 71px だった。SPは@media(max-width:767px)側で既に gap:0px を明示上書き済みのためSPへの影響なし） */
color: var(--color-white);
}
.site-header-lang-item {
color: inherit;
text-decoration: none;
/* 【2026-08-02追記】.site-header-nav-item a と同じ理由（style.css由来の
a{transition:all .5s;}継承によるフォントスワップ時リフローの意図しない
アニメーション化）でここもcolorのみに絞る。 */
transition: color 0.2s ease;
}
.site-header-lang-item.is-current {
color: inherit; /* 変更: var(--color-yellow) → inherit（JP/ENとも無強調に統一） */
}
/* 2026-08-23追記: PDF改修指示「JP | EN はマウスオーバーで黄色に（全て共通）」対応。
.site-header-nav-item a:hover と同じ扱いにする。.is-current（詳細度0,2,0）と同点のため
カスケード順で勝てるよう必ずこの直後に置く（現在ページ側のJP/ENもhoverで黄色になる）。 */
.site-header-lang-item:hover {
color: var(--color-yellow);
}
/* SP専用トグルボタン（ハンバーガー / 閉じる）はPCでは非表示 */
.site-header-hamburger {
display: none;
flex-direction: column;
justify-content: space-between;
width: 26px;
height: 16px;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.site-header-hamburger-line {
display: block;
width: 100%;
height: 2px;
background-color: var(--color-white);
}
/* SPハンバーガーメニュー展開時のオーバーレイパネル */
/* 【2026-08-02追記 → 2026-08-23に取り消し】かつて「オーバーレイがコンテンツの実高さ
（約280px）にしか広がらず、展開時に画面下部から背景が透けて見える」ことを不具合と判断し
min-height:100vh を入れていたが、支給PDF(CJ_SP_back_0821.pdf)の指示により
『中身の高さで終わるドロップダウン』が正と確定したため2026-08-23に削除した。
同じ見た目を再び不具合とみなして100vhを入れ直さないこと。 */
.site-header-nav-overlay {
display: none;
}
@media (min-width: 768px) {
.site-header-nav-overlay {
display: none !important;
}
/* 【2026-08-03 C1修正】ロゴ→ナビ間隔（デザイン実測）と、SNS+言語切替を右端に
固定するためのmargin-left:auto。⚠️必ずこのmin-width:768pxブロック内に置くこと
（.site-header-utility{margin-left:auto}をグローバルに書くと、SP側の
common.css:337-341 .site-header-inner{justify-content:space-between} と
flexboxの優先順位が競合し、SPの言語切替配置が崩れる）。 */
.site-header-nav {
margin-left: 24px; /* 2026-08-23修正: 34px→24px（top_pc.png / CJ_HP_top_E_v1_pc.png 実測: ロゴインク終端319→TOPインク左端345＝26px。ライブは35px。font-size15px化と併せてナビ全体の位置がデザインと2px以内で一致する） */
}
.site-header-utility {
margin-left: auto;
}
}
@media (max-width: 767px) {
.site-header-inner {
padding: 20px 28px;
justify-content: space-between;
}
.site-header-nav,
.site-header-sns {
display: none;
}
.site-header-logo {
width: 106px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.site-header-lang {
order: -1;
gap: 0px;
}
/* 2026-08-06 前澤さん指示: EN・SPのみJP｜EN言語切替の文字サイズを縮小（1.6rem→1.4rem）。
ベース値（common.css内 .site-header--jp/--en 共通ルール）にはSP用の上書きが無かったため新規追加。
rem基準（16px→14px）。JP/EN両方のが.site-header-lang-itemクラスを共有するため
このセレクタ1つで両リンクに等しく適用される（header-en.php実装を確認済み・絞り込みなし）。 */
.site-header--en .site-header-lang-item {
font-size: 1.4rem;
}
.site-header-hamburger {
display: flex;
}
.site-header.is-nav-open .site-header-inner {
display: none;
}
.site-header-nav-overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
/* 2026-08-23: min-height:100vh を削除。支給PDF(CJ_SP_back_0821.pdf)の指示
「SNSアイコンより下の黒ベタは不要・背景が見えるようにしてください」への対応。
2026-08-02に「画面下部から背景が透ける不具合」として100vhを入れた経緯があるが、
今回デザイン側の意図として『中身の高さで終わるドロップダウン』が正であると
確定したため取り消す（バグの再発ではない）。ヘッダーはposition:relativeで
固定ヘッダーではないため、パネルはヘッダー直下に留まるドロップダウンとして振る舞う。 */
z-index: 100;
background-color: var(--color-black);
}
.site-header-nav-overlay.is-open {
display: block;
}
.site-header-nav-overlay-top {
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 70px;
}
.site-header-nav-overlay-logo {
display: block;
width: 106px;
}
.site-header-nav-overlay-logo img {
display: block;
width: 100%;
height: auto;
}
.site-header-nav-overlay-close {
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
width: 25px;
height: 25px;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.site-header-nav-overlay-close-line {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: var(--color-white);
}
.site-header-nav-overlay-close-line:nth-child(1) {
transform: rotate(45deg);
}
.site-header-nav-overlay-close-line:nth-child(2) {
transform: rotate(-45deg);
}
.site-header-nav-overlay-list {
list-style: none;
}
.site-header-nav-overlay-row {
display: flex;
height: 40px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.site-header-nav-overlay-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
text-decoration: none;
text-transform: uppercase;
/* SPドロワー文字仕様（JP/EN完全共通・単一情報源）
【2026-08-05追記】前澤さん決定により書体と太さを言語共通化した。従来はここに
font-family / font-weight / font-size の指定が無く body から継承していたため、
JP＝Noto Sans JP / fw400、EN＝Roboto / fw400 と言語で書体が食い違い、さらに
PCヘッダーナビ（.site-header-nav-item a ＝ Noto Sans JP / fw500 / 1.6rem）とも
書体・太さの両方がズレていた。
fw400ではなくfw500を選んだ理由は2つ。(1) ENは既にNotoSansJP-Medium(500)を
取得済みのため追加ダウンロードがゼロだが、400にするとNotoSansJP-Regular
(2,211,188 B)がEN全8ページで新規ダウンロードになる。(2) 500ならPCヘッダーナビと
書体・太さ・サイズまで完全一致し、「PCはNoto・SPはRoboto」「PCは500・SPは400」の
二重の段差が同時に解消される。
副作用としてJPドロワーが fw400→fw500 へわずかに太くなるが前澤さん了承済み。
JP/EN同値のため言語分岐は作らず1ルールで指定する。 */
font-family: var(--font-body-jp);
font-weight: 500;
font-size: 1.6rem;
/* 【2026-08-02追記】.site-header-nav-item a と同じ理由でcolorのみに絞る
（SPハンバーガードロワー側のナビ項目も同じ a{transition:all .5s;} を
style.cssから継承しているため）。 */
transition: color 0.2s ease;
}
.site-header-nav-overlay-row--split .site-header-nav-overlay-item:first-child {
border-right: 1px solid rgba(255, 255, 255, 0.3);
}
.site-header-nav-overlay-sns {
padding-top: 20px; /* 2026-08-24追記: 前澤さん指示 */
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
list-style: none;
height: 40px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.site-header-nav-overlay-sns img {
display: block;
width: 20px;
height: 20px;
}
.site-header-nav-overlay {
padding-bottom: 20px; /* 2026-08-24修正: 30px→20px（前澤さん指示） */
}
}
/*
---site-footer（グローバルフッター・日英共通構成）
---------------------------------------------------------------------------*/
.site-footer {
background-color: var(--color-black);
width: 100%;
padding: 50px 0 54px; /* 2026-08-23修正: 下paddingのみ 60px→54px。等倍デザイン(jp/menu_pc.png 1653..1852・
eng/CJ_HP_menu_tobira_E_v1_pc.png 1623..1822・jp/top_pc.png 6353..6552)はいずれもフッター黒帯の高さが200pxで、
ライブは212.92pxだった。内訳の実測: padding-top 50px＋ロゴ52.73px＋.site-footer-bottom margin-top 18px（下記）
＋下段行高25.19px＝145.92 → 下padding 200−145.92＝54.08px。padding-top 50pxは top_pc.png のロゴインク上端
オフセット50pxと一致しているため据え置く（menu_pc.png / EN扉は48pxで、等倍コンプ2枚の間に2pxの不一致がある）。
SPは下の@media(max-width:767px)で padding:22px 0 21px を上書き済み */
}
.site-footer-inner {
display: flex;
flex-direction: column;
align-items: center;
max-width: 1100px;
margin: 0 auto;
padding: 0 28px;
}
.site-footer-logo {
display: block;
width: 170px;
line-height: 0;
}
.site-footer-logo img {
display: block;
width: 100%;
height: auto;
}
.site-footer-bottom {
display: flex;
align-items: center;
justify-content: center;
gap: 34px; /* 2026-08-23修正: 20px→34px（デザイン実測: コピーライトのインク終端683→区切り罫720＝37px。ライブは22pxだった）。SPは@media(max-width:767px)でgap:0を上書き済み */
margin-top: 18px; /* 2026-08-23修正: 25px→18px。等倍デザイン3枚(jp/menu_pc.png・eng/CJ_HP_menu_tobira_E_v1_pc.png・
jp/top_pc.png)とも コピーライトのインク上端がフッター上端+127px で一致するのに対し、ライブは+134pxだった。
箱換算（コピーライト箱内のインク上端オフセット6.26px）で 箱上端 127−6.26＝120.74 ＝ padding-top 50＋ロゴ52.73＋18.0。
SPは@media(max-width:767px)で margin-top:9px を上書き済み */
flex-wrap: wrap;
}
.site-footer-copyright {
color: var(--color-white);
white-space: nowrap;
font-size: 14px; /* 2026-08-23修正: 1.5rem(=15px)→14px（top_pc.png / CJ_HP_top_E_v1_pc.png 実測: コピーライトのインク幅317px・インク高16px。Noto Sans JPの単独描画実測は fw400/15px→324px・fw700/14px→322px で、太さ実測(下記font-weight:700)と併せて14pxが最も近い）。SPは@media(max-width:767px)で12pxを上書き済み */
}
.site-footer-links {
display: flex;
align-items: center;
font-size: 14px; /* 2026-08-23追記: 下の line-height:1 とセット。指定が無く body の16pxを継承していたため、
li の行ボックス(strut)が 16px×1.5＝24px になり、その高さがそのまま border-left（コピーライトとリンク群の
区切り罫）の長さになっていた。子の .site-footer-links-item a は font-size:14px を明示済みのため、
この指定で文字サイズは変わらない（strutだけを14pxにする）。 */
line-height: 1; /* 2026-08-23追記: 区切り罫の長さをデザインに合わせる。等倍デザイン3枚とも罫は x=720列で
y＝フッター上端+126.55〜140.91（被覆率から算出。実効長14.36px）、ライブは24.0pxだった。
14px×1＝14px。R3に従い単位なしで指定する。SPは@media(max-width:767px)で line-height:1.2 を上書き済み
（SPは border-left:none のため罫自体が無い） */
gap: 29px; /* 2026-08-23修正: 20px→29px（デザイン実測: COMPANY OVERVIEWインク終端896→PRIVACY POLICYインク左端927＝31px。ライブは項目間罫線込みで43pxだった）。SPは下の@media(max-width:767px)で20pxを明示維持 */
list-style: none;
padding-left: 34px; /* 2026-08-23修正: 20px→34px（デザイン実測: 区切り罫720→COMPANY OVERVIEWインク左端757＝37px。ライブは21pxだった）。SPは@media(max-width:767px)でpadding-left:0を上書き済み */
border-left: 1px solid var(--color-white);
}
.site-footer-links-item {
line-height: inherit; /* 2026-08-23追記: 上の .site-footer-links の line-height:1 を li まで届かせる。
style.css:329 の li{line-height:1.5} が li に直接当たっているため継承が届かず、li の行ボックス(strut)が
14px×1.5＝21px のままで border-left（区切り罫）が21pxになっていた。
SPは下の@media(max-width:767px)で 1.5 を明示維持する（SPは border-left:none で罫が無く、
フッター段組の高さが2026-08-23のSP合わせ込み値のままになるようにするため）。 */
}
.site-footer-links-item a {
color: var(--color-white);
text-decoration: none;
white-space: nowrap;
font-size: 14px; /* 2026-08-23修正: 1.3rem(=13px)→14px（同デザイン実測: COMPANY OVERVIEWインク幅140px / PRIVACY POLICY 108px。ライブ13px時は125px/96px。Noto Sans JP fw700/14px の単独描画実測 141px/110px が最も近い）。SPは@media(max-width:767px)で12pxを上書き済み */
}
/* 2026-08-18 Phase3-a: JP/EN完全一致（2026-08-06前澤さん指示によりEN側もvar(--font-body-jp)に
変更済みのため値が一致）のため html[lang="ja"] / html[lang="en"] の重複ブロックを統合 */
.site-footer-copyright,
.site-footer-links-item a {
font-family: var(--font-body-jp);
font-weight: 500; /* 2026-09-08修正: 700→500（支給PDF CJ_PC_back_0827.pdf p1「少し文字を細くしてください。
上のLOCATIONの『ダイバーシティ東京プラザレストラン』と同じ太さでOKです。※他ページ共通」。EN側の
「太さ日本語版に合わせてください」も同じフッター最下行を指しており、この宣言はJP/EN共通のため1箇所で両方に効く。
値はクライアントが名指しした比較対象 .location-card-name-ja（top.css:867）の font-weight:500 をそのまま採用した。
旧700は2026-08-23にPC等倍デザイン(top_pc.png)のインク幅実測から決めた値だが、8/27にその結果を見た
クライアントから「太い」と差し戻された。SPは下の@media(max-width:767px)で400を明示維持（今回変更なし） */
}
/* 2026-08-23修正: リンク項目間の縦罫線を廃止（PCデザイン実測: top_pc.png / CJ_HP_top_E_v1_pc.png とも
フッター最下行のインク列は コピーライト367-683 /「｜」720（1px）/ COMPANY OVERVIEW 757-896 /
PRIVACY POLICY 927-1034 で、区切り罫はコピーライトとリンク群の間の1本だけ。ライブはリンク項目間にも
1本あり計2本だった）。SP（top_smp.png / CJ_HP_top_E_v1_smp.png）は逆に項目間の罫線が存在する
（COMPANY 74-184 /罫線201/ PRIVACY 219-304）ため、下の@media(max-width:767px)で従来値を復元する。 */
.site-footer-links-item + .site-footer-links-item {
padding-left: 0;
border-left: none;
}
@media (max-width: 767px) {
/* 2026-08-23修正: SPフッターがデザインの約2倍の高さ(246.7px)になっていたため、
等倍デザイン実測（jp/top_smp.png・eng/CJ_HP_top_E_v1_smp.png いずれもフッター黒帯の高さ120px、
ロゴインク106×33px、コピーライトインク幅252px、ナビインク y=フッター上端+84px）に合わせて
SP専用の上書きを新設する。JP/ENでデザイン実測値が完全に一致したため言語別の分岐は設けない。 */
.site-footer {
padding: 22px 0 21px; /* 2026-08-23修正: PC値50px/60pxを継承していた。デザイン実測: フッター上端→ロゴインク上端22.5px、ナビインク下端→フッター下端26px */
}
.site-footer-logo {
width: 106px; /* 2026-08-23修正: 170px→106px（デザイン実測: ロゴインクx138..243=幅106px／高さ33px。ライブのアスペクト比3.224で106/3.224=32.9pxと一致） */
}
.site-footer-bottom {
flex-direction: column;
gap: 0; /* 2026-08-23修正: 8px→0（デザイン実測: コピーライトインク下端y5395→ナビインク上端y5402＝7px。行ボックス由来で既に約7px入るため0とする） */
margin-top: 9px; /* 2026-08-23修正: PC値25pxを継承していた。デザイン実測: ロゴインク下端y5371→コピーライトインク上端y5384＝13px */
}
.site-footer-copyright {
font-size: 12px; /* 2026-08-23修正: 1.5rem(=15px)→12px（デザイン実測: インク幅252px。15×252/325=11.63px。キリのよい12pxを採用） */
line-height: 1.4; /* 2026-08-23修正: 明示指定が無く継承値1.8(27px)だったものを明示。単位規約R3により単位なし比率 */
}
.site-footer-links {
border-left: none;
padding-left: 0;
font-size: 12px; /* 2026-08-23修正: 指定が無く16px/24pxのstrutが残り、コピーライトとの間隔（7px）が詰まらなかったため明示 */
line-height: 1.2; /* 2026-08-23修正: 同上。単位規約R3により単位なし比率 */
}
.site-footer-links-item a {
font-size: 12px; /* 2026-08-23修正: 1.3rem(=13px)→12px（デザイン実測: "COMPANY OVERVIEW"インク幅112px。13×112/125=11.65px） */
line-height: 1.2; /* 2026-08-23修正: 新規（単位規約R3により単位なし比率） */
}
/* 2026-08-23追記: 同日のPC等倍合わせ（font-weight:700 / .site-footer-links gap:29px / 項目間罫線の廃止）が
SPへ波及しないよう、SPの従来値を明示的に維持する。SPデザイン(top_smp.png・CJ_HP_top_E_v1_smp.png)は
コピーライト・リンクとも細字で、リンク項目間の罫線も存在するため。 */
.site-footer-copyright,
.site-footer-links-item a {
font-weight: 400;
}
.site-footer-links {
gap: 20px;
}
.site-footer-links-item {
line-height: 1.5; /* 2026-08-23追記: PC側で .site-footer-links-item に line-height:inherit を入れたため、
SPでは style.css:329 の li 既定値(1.5＝12px×1.5＝18px)を明示的に維持する（before/after完全一致を実測）。 */
}
.site-footer-links-item + .site-footer-links-item {
/* 2026-09-08修正: 支給PDF CJ_SP_back_0828.pdf p1「もう少し天地短くなりますか？（全て共通です）」。
注記の枠は COMPANY OVERVIEW と PRIVACY POLICY の間の区切り罫「｜」だけを囲んでおり、
指摘対象はこの罫の縦の長さ（実測18px＝font-size 12px × line-height 1.5）。前澤さん指示により50%＝9pxとする。
border-left は必ず li の高さ全体に伸びて長さを指定できないため、擬似要素の矩形に置き換えた。
padding-left を 20px→21px にしているのは、無くなった border 1px 分を足して
文字の開始位置を従来と同じ（li 左端から21px）に保つため。 */
position: relative;
padding-left: 21px;
border-left: none;
}
.site-footer-links-item + .site-footer-links-item::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 9px;
background-color: var(--color-white);
}
}
/*
---section-heading（セクション見出し ＋ ★★★装飾）
---------------------------------------------------------------------------*/
.section-heading {
text-align: center;
}
.section-heading-title {
font-family: var(--font-heading);
font-weight: 900;
font-size: 63px; /* 2026-08-23修正: 6rem(=60px)→63px（top_pc.png / CJ_HP_top_E_v1_pc.png 実測のインク幅比: PICK UP MENU 321/306=1.049・GRAND MENU(CAMPAIGN) 244/233=1.047・LOCATION 223/212=1.052 → 60×1.049≒63px。63px適用後のPICK UP MENUインクは322px×46pxでデザイン321px×46pxと一致）。SPは@media(max-width:767px)で3.2remを上書き済み */
color: var(--color-black);
text-transform: uppercase;
line-height: 1;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
.section-heading-stars {
margin-top: 15px; /* 2026-08-23修正: 15px→12px（top_pc.png実測: 見出しインク下端1017→★インク上端1031＝空き13px。ライブは16px。.section-heading-titleはtext-box-trimでボックス下端＝インク下端のためmargin-topがそのまま視覚差になる）。SPは下の@media(max-width:767px)で15pxを明示維持 / 2026-08-24修正: 12px→15px（前澤さん指示） */
color: var(--color-yellow);
font-size: 1.6rem;
line-height: 1;
letter-spacing: 6.4px; /* 単位規約R2: emをpxへ置換。0.4em(=6.4px) → 6.4px（PC 1400pxで実効値一致。SPは下の@media(max-width:767px)内で2pxへ明示上書き済みのため本置換の影響を受けない） */
}
@media (max-width: 767px) {
.section-heading-title {
font-size: 3.2rem;
}
.section-heading-stars {
margin-top: 7px; /* 2026-09-08修正: 15px→7px（前澤さん指示）。MENU扉/カテゴリ/LOCATION(sub.css:173)・NEWS一覧/詳細(sub-news.css:44,212)が既に7pxで、上書きの無いページ(TOP等)だけ15pxのまま取り残されていたため、SP全ページを7pxに統一する */
font-size: 0.9rem; /* デザイン実測(location_smp.png、★★★の可視高さ約9px)に合わせて縮小 */
letter-spacing: 2px; /* 2026-08-23修正: ベースの 0.4em（SP実効3.6px）→2px（R2: emをpxへ置換）。
デザインの★★★インク全幅は menu_smp.png x=174..202(29px)・location_smp.png x=173..201(29px)・
top_smp.png x=174..202(29px) と全ページ一致するのに対し、ライブは約31〜33pxと広かった。
letter-spacingは3文字分すべてに掛かるため、1.6px縮めると全幅が約3.2px縮む。 */
}
}
/*
---pill-button（角丸ピルボタン・yellow/whiteバリエーション）
---------------------------------------------------------------------------*/
.pill-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px; /* 2026-08-04: height固定→min-heightに変更。折り返して2行になった場合に
高さが自動で伸びるようにする（1行に収まる場合は見た目上のボタン高のまま変わらない）。
2026-08-23修正: 36px→30px（top_pc.png / CJ_HP_top_E_v1_pc.png 実測: 黄色ピルの矩形が162×30px。
ライブは168×36pxだった）。SPは下の@media(max-width:767px)で36pxを明示維持 */
padding: 0 35px;
border-radius: 999px;
/* 【2026-08-05追記】前澤さん決定により書体を JP/EN 共通化した。旧EN仕様は
Roboto だったが、Robotoは 400≡500・600≡700 の2実体しか無く、本ボタンの
font-weight: 700 では JA（Noto Sans JP / 700）と字形・字幅が揃わなかったため。
これで言語別の分岐が不要になったため html[lang="ja"]/[lang="en"] の
2ブロックを廃止し、ベースの .pill-button 1本に統合した。実測で EN の
VIEW ALL 幅が JA と完全一致（146.6px）し、折り返し行数も増えないことを確認済み。 */
font-family: var(--font-body-jp);
font-weight: 700;
font-size: 16px; /* 2026-08-23修正: 1.7rem(=17px)→16px（同デザイン実測: ピル幅162px＝テキスト幅+左右padding35px×2。ライブのテキスト幅98.125pxを16/17倍すると92.35px→92.35+70=162.35pxでデザインと一致。文字インク幅もデザイン91px/ライブ95px＝17×0.958≒16px）。SPは下の@media(max-width:767px)で17pxを明示維持 */
color: var(--color-black);
text-decoration: none;
text-align: center;
max-width: 100%; /* 2026-08-04: 親コンテナ幅を超えてはみ出さないようにする安全策 */
border: none;
transition: background-color 0.2s ease; /* 2026-08-21修正: ホバーを半透明フェードから背景赤への変化に変更するため */
}
.pill-button:hover {
background-color: var(--color-red); /* 2026-08-21修正: opacity:0.4の半透明ホバーを廃止し、ブランドレッドへの背景色変化に置き換え */
color: var(--color-white); /* 2026-08-23追記: 支給PDF CJ_PC_back_0821.pdf p.2「マウスオーバーで上記カラーに」の
見本ピル（200dpiレンダで y=1670..1706, x=379..838 の赤ベタ）内の輝度max=255＝文字は白。
2026-08-21のcommit 3bb3a90でホバー背景の赤化だけが入り、文字色の指定が抜けていた。 */
}
.pill-button--yellow {
background-color: var(--color-yellow);
}
/* 2026-08-23追記: .pill-button には @media による上書きが1つも無く、上のPC等倍合わせ
（min-height 36→30px / font-size 17→16px）がそのままSP全ページへ波及してしまうため、
SPの従来値を明示的に維持する（SPデザインでのピル寸法は本ユニットでは未実測のため現状維持）。 */
@media (max-width: 767px) {
.pill-button {
min-height: 36px;
font-size: 17px;
}
}
.pill-button--white {
background-color: var(--color-white);
/* 【2026-08-18削除】font-size:1em を削除。.pill-button の 1.7rem と詳細度が同点でカスケード
衝突し意図した17pxではなく16pxになっていたバグ修正（.pill-buttonのremをそのまま継承させる）。 */
}
/*
===============================================================================
以下: maintheme本体由来の既存 common.css（変更前の内容をそのまま保持）
go_page_top（スクロールトップボタン）等、本テーマの他JS/PHPから参照され得る
既存セレクタを壊さないよう削除せず残す。上記のStage2統合内容とクラス名の重複は無い。
===============================================================================
*/
@media screen and (min-width: 1024px) {
.scrolled header{
}
}
/*
---
---------------------------------------------------------------------------*/
body{
}
header{
}
header #logo{
}
header #logo a{
display: block;
position: relative;
}
header #logo img{
display: block;
}
header .menu_global{
-js-display: flex;
display: flex;
}
header .menu_global > li{
-js-display: flex;
display: flex;
border: 1px solid #000;
position: relative;
flex-basis: 100%;
}
header .menu_global > li > a{
-js-display: flex;
display: flex;
align-items: center;
/* flex-basis: 100%;*/
flex: 1;
}
header .menu_global > li > a > span{
}
header .menu_global > li > .sub-menu{
position: absolute;
top: 100%;
left: 0;
}
/*
---
---------------------------------------------------------------------------*/
section:after,
.contents_body-sb:after{
content: '';
display: table;
clear: both;
}
.contents_body-sb{
max-width: 1040px;
margin-left: auto;
margin-right: auto;
padding-right: 20px;
padding-left: 20px;
}
.contents_body-sb > :first-child{
margin-top: 0 !important;
}
.contents_body-sb > :last-child{
margin-bottom: 0 !important;
}
.container {
margin-left: auto;
margin-right: auto;
padding-right: 20px;
padding-left: 20px;
}
.container > :first-child{
margin-top: 0 !important;
}
.container > :last-child{
margin-bottom: 0 !important;
}
.container--700 {
max-width: 740px;
}
.container--800 {
max-width: 840px;
}
.container--900 {
max-width: 940px;
}
.container--1000 {
max-width: 1040px;
}
.container--1100 {
max-width: 1140px;
}
.container--1200 {
max-width: 1240px;
}
.container--1300 {
max-width: 1340px;
}
.container--1400 {
max-width: 1440px;
}
.block {
margin-top: 50px;
}
/*
---
---------------------------------------------------------------------------*/
.top-news-wrapper{
display: none;
}
.top-news-wrapper.active{
display: block;
}
/*
---
---------------------------------------------------------------------------*/
footer{
}
.footer-logo {
max-width: 222px;
margin: 0 auto;
position: relative;
}
.footer-logo:before {
content: "";
display: block;
padding-bottom: calc(40 / 222 * 100%);
}
.footer-logo svg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.googlemap-wrapper{
position: relative;
padding-bottom: 50%;
}
.googlemap-wrapper iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.copy{
text-align: center;
font-size: 1rem;
}
/*
---
---------------------------------------------------------------------------*/
.go_page_top{
position: fixed;
bottom: 5px;
right: 5px;
opacity: 0;
z-index: 100;
cursor: pointer;
width: 85px;
height: 85px;
transition: all .5s;
border-radius: 5px;
background-color: rgba(77,77,77,1);
}
.go_page_top img{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.scrolled .go_page_top{
opacity: 0.65;
}
.notouch.scrolled .go_page_top:hover{
opacity: 1;
}
@media only screen and (max-width: 1279px) {
header #logo{
}
}
@media only screen and (max-width: 1023px) {
/*
---
---------------------------------------------------------------------------*/
body{
}
header{
}
/*
---
---------------------------------------------------------------------------*/
}
@media only screen and (max-width: 767px) {
body{
}
/*
---
---------------------------------------------------------------------------*/
/*
---
---------------------------------------------------------------------------*/
footer{
}
.go_page_top{
width: 50px;
height: 50px;
}
}
@media only screen and (max-width: 450px) {
body{
}
}