@charset "UTF-8"; /* =============================================================================== css/top.css — カールスJr. サイトリニューアル TOPページ専用CSS（design-to-theme Stage4統合） 出典: stage2_output/jp-top/css/style.css・stage2_output/en-top/css/style.css の 「→ top.css候補」ブロック（page base本文フォント/hero/news-bar/pickup-menu/ grand-menu-banner/campaign/whats-carls-jr/location各セクション） 統合方針: - site-header/site-footer/section-heading/pill-button等の全ページ共通コンポーネントは common.cssに1回だけ記載済みのため、ここでは重複させない（curlsjr0801_is_mytop()判定時のみ本ファイルを 追加読込する運用は functions.php の curlsjr0801_twentysixteen_scripts() 側で既存実装済み）。 - JP版(jp-top)とEN版(en-top)は同名クラスを使うが、Stage2の実測・見積りがそれぞれ独立しており ほぼ全プロパティで数値が異なる（en-top側コメントに「en-top独自の実測値を維持」と明記）。 フォント切替だけでなく余白・サイズも大半が言語固有の値のため、無理に1つのルールへ統合せず html[lang="ja"] / html[lang="en"] で全体をスコープして出し分ける （Stage2側で独立に確定した数値を統合時に誤って混同・上書きしないための方針）。 - body/imgの基本設定は10ページ共通のため既にcommon.cssへ統合済み。 =============================================================================== */ /* =============================================================================== JP版（html[lang="ja"]） — 出典: stage1_drafts/01_jp_top_menu.md §8 S-01〜S-10 =============================================================================== */ html[lang="ja"] { .section-inner { max-width: 1100px; margin: 0 auto; padding: 0 28px; } } @media (min-width: 768px) { html[lang="ja"] .section-inner { padding: 0; } } /* ---hero（メインビジュアル） ---------------------------------------------------------------------------*/ html[lang="ja"] { .hero { margin-top: 60px; /* 出典: 01_jp_top_menu.md S-03「ヘッダーからの空き60px」 */ } .hero-media { position: relative; width: 100%; max-width: 1100px; margin: 0 auto; aspect-ratio: 1100 / 619; /* 出典: S-03「1100×619px（16:9）」 */ border-radius: 15px; overflow: hidden; background-color: var(--color-black); } .hero-media video { display: block; width: 100%; height: 100%; object-fit: cover; } /* PC/SP動画の出し分け（既定=PC表示）。SP側は下記@media(max-width:767px)で反転させる。 `.hero-media video`より詳細度を上げるため`.hero-media`を親に含めて指定する。 */ .hero-media .hero-media-video--sp { display: none; } .hero-copy { position: absolute; left: 40px; /* 出典: S-03「左内側余白 約40px」実測 */ bottom: 40px; /* 出典: S-03「下内側余白 約40px」実測 */ color: var(--color-white); font-family: var(--font-heading); font-weight: 900; font-size: 9.5rem; /* [ESTIMATE: 95px / SansBeam Head の実キャップ比が未確定] */ line-height: 9.6rem; /* 出典: S-03「行送り約96px」実測 */ text-transform: uppercase; margin: 0; } /* 実機確認でB-8解消（動画側に焼き込み済みと判明）。h1は視覚的に隠しaccessible textとしてのみ残す */ .hero-copy--visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; left: auto; bottom: auto; } } @media (max-width: 767px) { html[lang="ja"] .hero { margin-top: 30px; padding: 0 28px; } html[lang="ja"] .hero-media { aspect-ratio: 319 / 320; border-radius: 5px; } html[lang="ja"] .hero-media .hero-media-video--pc { display: none; } html[lang="ja"] .hero-media .hero-media-video--sp { display: block; } html[lang="ja"] .hero-copy { left: 30px; bottom: 24px; font-size: 4.7rem; line-height: 4.8rem; } } /* ---news-bar（新着情報） ---------------------------------------------------------------------------*/ html[lang="ja"] { .news-bar { margin-top: 33px; /* 2026-08-23修正: 40px→33px（top_pc.png実測: ヒーロー下端797はライブと一致、日付1行目インク行はデザイン841-853に対しライブ848-859で7px下。ボックス上端+10.27pxがインク上端のため 841-10.27-797.73≒33px）。SPは@media(max-width:767px)で25pxを上書き済み */ } .news-bar-inner { display: flex; align-items: flex-start; gap: 30px; /* 出典: S-04「ラベル→日付30px」 */ } .news-bar-label { display: flex; align-items: center; gap: 27px; /* 2026-08-23修正: 30px→27px（top_pc.png実測: 罫線x150 → NEWSインク左端179 → 罫線x251-252。適用後ライブは 150 / 179-223 / 252 で一致） */ flex-shrink: 0; /* 2026-08-23修正: NEWSラベルの書体を見出し用の圧縮体(SansBeam Head)から本文用(Noto Sans JP)へ。 top_pc.png実測: NEWSのインク幅45px・インク高13px・区切り罫は x=150 と x=251-252。 ライブ(SansBeam Head 18px)はインク幅35pxしか無く、書体候補26通りのNCC比較でも Noto Sans JP fw900 16px が最良(0.9864)だった。line-heightも45px→30pxにすることで デザインどおりラベルと日付1行目のベースラインが揃う。 SPは下の@media(max-width:767px)で従来の書体・太さを明示維持する。 */ font-family: var(--font-body-jp); font-weight: 900; font-size: 16px; line-height: 1.875; /* =30px。単位規約R3により単位なし比率（.news-itemのline-height:3rem=30pxと一致） */ color: var(--color-black); } .news-bar-label-rule { display: inline-block; width: 1px; height: 1.6rem; background-color: var(--color-black); } .news-bar-list { list-style: none; flex: 1; } .news-item { display: flex; align-items: baseline; gap: 20px; /* 出典: S-04「日付→タイトル20px」 */ font-family: var(--font-body-jp); font-weight: 400; font-size: 1.6rem; line-height: 3rem; /* 出典: S-04「行送り30px」実測 */ color: var(--color-black); } .news-item-title { color: inherit; text-decoration: none; transition: opacity 0.2s ease; } .news-item-title:hover { opacity: 0.4; } } @media (max-width: 767px) { html[lang="ja"] .news-bar { margin-top: 25px; } html[lang="ja"] .news-bar-inner { flex-direction: column; align-items: center; gap: 10px; } html[lang="ja"] .news-bar-label { /* 2026-08-23追記: PC側の書体変更(SansBeam Head→Noto Sans JP / 500→900)がSPへ波及しないよう SPの従来値を明示的に維持する（SPデザインでのNEWSラベル書体は本ユニットでは未実測）。 */ font-family: var(--font-heading); font-weight: 500; gap: 10px; /* PC化(gap:30px)の影響を受けないよう明示的に既存値を維持 */ font-size: 1.5rem; line-height: 1; } html[lang="ja"] .news-bar-list { width: 100%; } html[lang="ja"] .news-item { flex-direction: row; align-items: baseline; gap: 14px; /* 2026-08-11 前澤さん指示: 0.25em→1em。2026-08-24追記: 単位規約R2によりemをpxへ置換。1em(=14px) → 14px（JP SP 375pxで実効値一致。PCのgapは別宣言由来のため本置換の影響を受けない） */ flex-wrap: nowrap; height: auto; font-size: 1.4rem; line-height: 2.15rem; margin-bottom: 6px; /* 2026-08-06 前澤さん指示: 20px→6px */ } html[lang="ja"] .news-item-date { flex-shrink: 0; } html[lang="ja"] .news-item-title { overflow: hidden; text-overflow: ellipsis; /* white-space: nowrap; 2026-08-11 前澤さん指示によりコメントアウト: gap拡大に伴いタイトルの折り返しを許可 */ min-width: 0; } } /* ---section-heading の上下余白（TOPページ専用の間隔値） ---------------------------------------------------------------------------*/ html[lang="ja"] { .pickup-menu { margin-top: 82px; /* 2026-08-23修正: 90px→82px（top_pc.png実測: NEWSバーのボックス下端890.73→PICK UP MENU見出しインク上端972＝81.3px。news-barのmargin-top 33px化と合わせてデザインと一致する） */ } } @media (max-width: 767px) { html[lang="ja"] .pickup-menu { margin-top: 50px; } } /* 2026-08-18 Phase3-a: JP/EN完全一致（PC 110px・SP 50px）のため html[lang="ja"]/html[lang="en"] の 重複ブロックを統合。出典(JP): S-07/S-08/S-09 各セクションの直前間隔 */ .campaign, .whats-carls-jr, .location { margin-top: 110px; } @media (max-width: 767px) { .campaign, .whats-carls-jr, .location { margin-top: 50px; } } /* 2026-08-23 検証メモ: 改修候補にあった「EN版PCのLOCATION上余白を110px→144pxへ」は実装しない。 CJ_HP_top_E_v1_pc.png を再実測したところ WHAT'S CARL'S JR. の黒パネル下端は y=5536（x=150..1249の 黒帯の下端。角丸により5525-5535は端が丸まる）で、LOCATION見出しのインク上端5643との差は約107pxだった。 候補側が根拠にしていた「パネル下端5499」は誤りで、現状の110pxがデザインどおりのため変更しない。 */ /* ---pickup-menu（PICK UP MENU スライダー） ---------------------------------------------------------------------------*/ /* 2026-08-18 Phase3-a: JP/EN完全一致のため html[lang="ja"]/html[lang="en"] の重複ブロックを統合。 出典(JP): 2026-08-03 T1修正: デザイン等倍画像(top_pc.png)実測で★下端→パネル上端は約17-19pxのため 90pxは過大。EN版実測値16pxに統一。2026-08-04微調整: 16px→15px */ .pickup-menu-panel-wrap { margin-top: 15px; } /* 2026-08-18 Phase3-a: JP/EN完全一致（PC 420px・SP 145px）のため統合。出典: S-05「商品画像の高さ約420px」実測 */ .pickup-card-photo { height: 420px; } @media (max-width: 767px) { .pickup-card-photo { /* 2026-09-18修正: 145px→240px（支給PDF CJ_PC_SP_back_0918_2.pdf p2「もう少し大きく表示したいです（全て共通）」）。 PCでは画像幅460px＝カード内容幅460pxで“内容幅いっぱい”に置かれているのに対し、SPは158.8px／内容幅263px＝60.4%しか使えていなかった。 imgはwidth未指定でheightから縦横比(920:840)で幅が決まるため、240px指定で幅262.9px≒内容幅263pxとなりPCと同じ扱いに揃う。 JP/EN共通のブロックのため1箇所で両言語に効く。 2026-09-18再修正: 240px→192px（前澤さん指摘「写真大きすぎです。20%程度小さくして」）。240×0.8=192px。 幅は縦横比で262.8px→210.2pxになる。 */ height: 192px; } } html[lang="ja"] { .pickup-menu-panel { max-width: 1100px; margin: 0 auto; background-color: var(--color-yellow); border-radius: 15px; padding: 60px 0 50px; /* 出典: S-05「パネル上パディング60px」「ドット→パネル下端50px」 */ position: relative; } .pickup-slider { position: relative; } .pickup-slider-viewport { overflow: hidden; width: 100%; } .pickup-slider-track { display: flex; align-items: flex-start; will-change: transform; transition: transform 0.5s ease; } .pickup-card { position: relative; /* 【2026-08-18追記】.pickup-card-descを絶対配置する基準にする */ flex: 0 0 520px; /* 出典: S-05「中央カード幅520px」 */ width: 520px; padding: 0 30px; box-sizing: border-box; text-align: center; min-height: 700px; /* 【2026-08-18追記】.pickup-card-descが絶対配置で通常フローから外れるため、 カード自体の高さを明示的に確保する（実測680px+説明文が長い場合の余裕を加算） */ } .pickup-card-photo { display: block; margin: 0 auto; object-fit: contain; } .pickup-card-title-en { margin-top: 30px; /* 出典: S-05「画像→英語商品名30px」 */ font-family: var(--font-heading); font-weight: 900; font-size: var(--pickup-title-en-fontsize, 77px); /* 2026-08-11 前澤さん指示: 管理画面フォントサイズ入力欄に対応 / 2026-08-23修正: フォールバック値 7.7em→77px。7.7remの意図に対し実効123.2px(=16px×7.7)になっていた単位取り違えの是正。top_pc.pngの「FAMOUS STAR」インク幅381px・高さ56pxはSansBeam Head 900 の77px描画(377px/56px)と一致する（単位規約R2） */ line-height: 1; color: var(--color-black); text-box-trim: trim-both; text-box-edge: cap alphabetic; } .pickup-card-title-ja { margin-top: 10px; /* 出典: S-05「英語名→和名20px」 */ font-family: var(--font-body-jp); font-weight: 900; font-size: 19px; /* 2026-08-23修正: 1.75rem(=17.5px)→19px（top_pc.png実測: 中央カード和名「フェイマス」インク84px・「スター」52pxに対し、Noto Sans JP fw900 17.5pxの単独描画は77px/47px → 17.5×1.09≒19px。インク行高もデザイン18pxに対し19px時17pxで整合）。SPは@media(max-width:767px)で1.4remを上書き済み */ color: var(--color-black); } .pickup-card-desc { /* 【2026-08-18変更】バックログ⑤対応: 商品名(.pickup-card-title-en)が1行か2行かで margin-top方式だと開始位置が最大52.8pxずれる問題があったため、絶対配置に変更。 topの612.5pxは商品名が1行の場合の現状の正しい開始位置をPlaywrightで実測した値 （2026-08-18実測: /（JP）で商品名1行時のdesc_top=612.5px）。今後、商品名が3行以上に なるような極端に長い商品名が登録された場合はこの値の見直しが必要（現状は商品名を 2行以内に収める運用のため考慮不要）。 */ position: absolute; top: 612.5px; left: 30px; right: 30px; font-family: var(--font-body-jp); font-weight: 400; /* 2026-08-21修正: 700→400（EN版と統一） */ font-size: 16px; /* 2026-08-23修正: 1.5rem(=15px)→16px（top_pc.png実測: 1行目「直火焼きのビーフパティを引き立てる」インク幅250px。Noto Sans JP fw400の単独描画は15px→233px / 16px→249px。2行目も design 354px に対し16pxで352px。行送りもデザイン24px＝16×1.5と一致）。SPは@media(max-width:767px)で1.4remを上書き済み */ line-height: 1.5; color: var(--color-black); } .pickup-slider-arrow { /* 【2026-08-19再修正】前澤さん指摘: 文字ベースの矢印(‹›)は見出し用フォント(SansBeam Head) で太く崩れて見えるため、フォント非依存のSVG細線アイコンに置き換えた。 font-family/font-sizeは不要になったため削除し、svgのwidth/height/strokeで サイズ・太さを直接制御する（詳細はlayout-pickup-menu.phpのsvg要素参照）。 */ position: absolute; /* 2026-08-23修正: top 220px→187.5px / ボタン48px→71px（top_pc.png実測: シェブロンのインクは 左 x=375-399・右 x=1005-1030、行はいずれも 1325-1367＝インク中心はパネル上端から283px下・ パネル左端から237px内側／右端から232.5px内側。テーマSVG(viewBox 0 0 24 24 / path 幅7・高さ14)では インク高 = 14/24×S + 実効ストローク。デザインのストローク実測は約1.7px（45°線上の水平ラン2-3px） なので S=71px・stroke-width 0.58（実効1.72px）でインク高43pxがデザインと一致する。 top = 283 - パネルpadding-top60 - ボタン高の半分35.5 = 187.5px）。 SPは下の@media(max-width:767px)で従来値(top52px/40px/svg32px/left・right20px/stroke1.75)を維持 */ top: 187.5px; width: 71px; height: 71px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--color-black); /* svgのstroke="currentColor"がこの色を継承する */ z-index: 2; } .pickup-slider-arrow svg { width: 71px; /* 2026-08-23修正: 42px→71px（上記.pickup-slider-arrowのコメント参照） */ height: 71px; flex: 0 0 auto; /* 2026-08-23追記: flexコンテナ(ボタン)にsvgが押し潰されて幅が切り詰められるのを防ぐ */ display: block; } .pickup-slider-arrow svg path { stroke-width: 0.58; /* 2026-08-23追記: viewBox(0 0 24 24)単位。71px時の実効1.72pxがデザイン実測のストローク（45°線上の水平ラン2-3px＝垂直太さ約1.7px）と一致する。既定の1.75では実効5.18pxになり線が太くなりすぎる */ } .pickup-slider-arrow--prev { left: 262px; /* 2026-08-23修正: 20px→202px（デザインのシェブロンはパネル左端から237px内側。237 - ボタン幅の半分35.5 = 201.5≒202px） / 2026-08-24修正: 202px→262px（前澤さん指示） */ } .pickup-slider-arrow--next { right: 257px; /* 2026-08-23修正: 20px→197px（同・パネル右端から232.5px内側。232.5 - 35.5 = 197px） / 2026-08-24修正: 197px→257px（前澤さん指示） */ } .pickup-slider-dots { display: flex; align-items: center; justify-content: center; gap: 12px; /* 2026-08-23修正: 10px→12px（top_pc.png実測: ドット列653-662/674-683/696-705/718-726/740-748＝直径10px・ピッチ約21.7px）。SPは下の@media(max-width:767px)で10pxを明示維持 */ margin-top: 25px; list-style: none; } .pickup-slider-dot { width: 10px; /* 2026-08-23修正: 9px→10px（top_pc.png実測: ドットのインク直径10px・インク行1754-1763）。SPは下の@media(max-width:767px)で9pxを明示維持 */ height: 10px; border-radius: 50%; border: none; padding: 0; background-color: rgba(0, 0, 0, 0.3); cursor: pointer; } .pickup-slider-dot.is-active { background-color: var(--color-black); } } @media (max-width: 767px) { /* 2026-09-08修正: 15px→8px（前澤さん指示）。あわせて html[lang="ja"] 限定を外し言語中立化した （EN版にはSP用の上書きが存在せずベース(:255)の15pxを継承していたため、ja限定のままだと SPで JP=8px / EN=15px と食い違う）。2026-08-18 Phase3-a「JP/EN完全一致なら統合」の方針に沿う。 詳細度は (0,1,0) でベースと同値だが、ソース順が後のため SP でこちらが優先される。 出典: 2026-08-03 T1修正: デザイン等倍画像(top_smp.png)実測で★下端→パネル上端は約9pxのため 30pxは過大。EN版に統一。2026-08-04微調整: 16px→15px */ .pickup-menu-panel-wrap { margin-top: 8px; } html[lang="ja"] .pickup-menu-panel { max-width: 319px; padding: 10px 0 20px; /* 2026-09-24修正: 天20px→10px（前澤さん指示・JP/EN共通） / 2026-09-18修正: 天30px→20px（支給PDF p2「天幅少し詰めていただけますでしょうか」）。下20pxは指摘が無いため据え置き */ border-radius: 5px; } html[lang="ja"] .pickup-card { flex: 0 0 100%; width: 100%; padding: 0 28px; min-height: 377px; /* 2026-09-18修正: 362px→425px（支給PDF CJ_PC_SP_back_0918_2.pdf p2「ピックアップの下の空きスペースⒶを詰めたく…」）。 min-heightは全カードを同じ高さに揃えるための値で、これが最も背の高いカードの自然高より大きいと、その差がそのままⒶ（カード下の空き）になる。 同日の商品画像拡大(145→240px)と商品名SP出し分けで各カードの自然高が変わったため、実測し直した最大自然高424.9px（HAND-SCOOPED…）に合わせた。 これでⒶは「カード間の自然高の差」だけになる（実測: 最小11.3px／最大32.3px。変更前は43.3〜64.3px）。 2026-09-18再修正: 425px→377px（同日の写真192px化に追随）。写真が48px縮んだぶん自然高も下がり、 425pxのままだとその48pxがそのままⒶに戻ってしまう。再実測した最大自然高376.9px（HAND-SCOOPED…）に合わせた。 旧: 【2026-08-18追記】SP版の絶対配置に伴うカード高さ確保 / 2026-08-23修正: 380px→362px（説明コピー最終行→ドット間隔をtop_smp.png実測23pxへ近づける） */ } html[lang="ja"] .pickup-card-title-en { margin-top: 20px; /* 2026-09-18修正: 3.5rem(=35px)固定 → 商品ごとの出し分けへ（支給PDF CJ_PC_SP_back_0918_2.pdf p2 「PC版同様に、商品名の大きさを変えて（3種？）調整いただけると助かります。（英語版も同様）」）。 SPは固定値だったため全商品が35pxで並び、名前の短い商品でカード下に空きⒶが出ていた。 2026-09-18 前澤さん指示により、SPのサイズは管理画面の「商品名（英語）フォントサイズ・SP」でpx指定する。 未入力時のフォールバック35pxは従来の固定値と同じなので、値を入れていない商品の見え方は変わらない。 */ font-size: var(--pickup-title-en-fontsize-sp, 35px); line-height: 0.9; /* 2026-10-15 1014 No.11: 1→0.9（日本語版SPのみ。PC基底の1は変更しない） */ } html[lang="ja"] .pickup-card-title-ja { margin-top: 4px; /* 2026-08-21修正: 8px→4px */ font-size: 1.4rem; } html[lang="ja"] .pickup-card-desc { /* 【2026-08-18変更】PC同様、商品名1行時の実測値(257.7px)で絶対配置に固定。 【2026-08-23変更】絶対配置(top:270px)を全カード共通固定していたため、商品名1行カードでは 商品名→説明コピーが62px開き、2行カードでは27pxしかないという相反する状態になっていた （top_smp.png実測: .pickup-card-title-jaインク下端y850→.pickup-card-desc1行目インク上端y885＝35px）。 通常フロー＋margin-topへ戻すことで1行/2行どちらも35pxになる。 */ position: static; /* 2026-08-23修正: absolute→static（top_smp.png実測35pxを1行/2行両カードで満たすため） */ margin-top: 16px; /* 2026-08-29修正: 24px→16px（支給PDF T-2「間隔もう少しだけ詰めてください(5〜10px)」。 指示は範囲指定のみで正確な目標値の支給は無いため、範囲の中央値8pxを詰め幅として採用。 再調整が必要な場合は前澤さんへ具体的な目標pxを確認する） */ top: auto; left: auto; right: auto; font-size: 1.4rem; line-height: 1.5; text-align: left; br { display: none; } } html[lang="ja"] .pickup-slider-arrow { top: 96px; /* 2026-09-24修正: 76px→96px（前澤さん指示・JP/EN同値） / 2026-08-23修正: 90px→52px（top_smp.png実測: 矢印グリフ中心y=720.5が中央カード写真インク中心y=727の6.5px上。旧90pxは写真インク中心より31px下だった） / 2026-09-18修正: 52px→76px（前澤さん指摘「矢印が上過ぎる、商品の真横に来るように」）。旧52pxは写真145px時代の値で、 写真を192pxにした結果ボタン中心72pxが写真中心96pxより24px上にあった。76 + ボタン高の半分20 = 96px で写真中心に一致する */ /* 2026-08-21修正: PC側をSVG拡大(42px)+ボタン48pxへ変更したため、SPは従来サイズ(40px)を明示的に維持 */ width: 40px; height: 40px; } html[lang="ja"] .pickup-slider-arrow svg { width: 32px; /* 2026-08-23修正: 22px→32px（top_smp.png実測: シェブロン実寸12w×22h。svg22pxでは9w×16hしか出ず、32pxで12×22に一致） */ height: 32px; /* 2026-08-23修正: 22px→32px（同上） */ } /* 2026-08-23追記: 同日のPC等倍合わせ（矢印をカード外側へ移動・SVG71px化・ストローク細線化・ドット拡大）が SPへ波及しないよう、SPの従来値を明示的に維持する。 */ html[lang="ja"] .pickup-slider-arrow svg path { stroke-width: 1.75; } html[lang="ja"] .pickup-slider-arrow--prev { left: 20px; } html[lang="ja"] .pickup-slider-arrow--next { right: 20px; } html[lang="ja"] .pickup-slider-dot { width: 9px; height: 9px; } html[lang="ja"] .pickup-slider-dots { gap: 10px; /* 2026-08-23追記: PC側を12pxへ変更したためSPの従来値を明示維持 */ margin-top: 0; /* 2026-08-21修正: 20px→0 */ } } /* ---grand-menu-banner（GRAND MENUへの導線） ---------------------------------------------------------------------------*/ /* 2026-08-18 Phase3-a: JP/EN完全一致（PC 50px・SP 25px）のため統合。出典: S-06「パネル→GRAND MENUバナー50px」 */ .grand-menu-banner { margin-top: 50px; } @media (max-width: 767px) { .grand-menu-banner { margin-top: 25px; } } html[lang="ja"] { .grand-menu-banner-link { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 1100px; height: 250px; margin: 0 auto; background-color: var(--color-black); /* PC/SP背景画像の出し分け（既定=PC表示）。SP用未設定時は下記@media(max-width:767px)側の var()フォールバックにより自動でPC用画像に戻る（ACF: bg_image / bg_image_sp）。 */ background-image: var(--grand-menu-banner-bg-pc, none); background-size: cover; background-position: center; border-radius: 15px; text-decoration: none; transition: opacity 0.2s ease; } .grand-menu-banner-link:hover { opacity: 0.4; } .grand-menu-banner-lead { font-family: var(--font-body-jp); font-weight: 500; /* 2026-08-06 前澤さん指示: 700→500 */ font-size: 20px; /* 2026-08-11 前澤さん指示: 1.7rem→2em / 2026-08-23修正: 1.2em(実測19.2px)→20px（top_pc.png実測: リードの白抜きインク幅186pxに対しライブ179px → 19.2×1.039≒20px。単位規約R2によりemをpxへ置換）。SPは下の@media(max-width:767px)で従来の実効値19.2pxを明示維持 */ color: var(--color-white); text-box-trim: trim-both; text-box-edge: cap alphabetic; } .grand-menu-banner-title { margin-top: 8px; font-family: var(--font-heading); font-weight: 900; font-size: 77px; /* 2026-08-23修正: 5em(実測80px)→77px（top_pc.png実測: タイトルの白抜きインク幅371pxに対しライブ387px → 80×0.959≒77px。単位規約R2によりemをpxへ置換）。SPは@media(max-width:767px)で2.8emを上書き済み */ color: var(--color-white); line-height: 1; } } @media (max-width: 767px) { html[lang="ja"] .grand-menu-banner-link { max-width: 319px; height: 205px; border-radius: 5px; justify-content: flex-start; padding-top: 20px; background-image: var(--grand-menu-banner-bg-sp, var(--grand-menu-banner-bg-pc, none)); } html[lang="ja"] .grand-menu-banner-lead { font-size: 19.2px; /* 2026-08-23追記: PC側を1.2em→20pxへ置換したため、SPは従来の実効値(1.2em＝親16px基準で19.2px)を明示的に維持する（SPデザインでのリード文サイズは本ユニットでは未実測） */ } html[lang="ja"] .grand-menu-banner-title { font-size: 44.8px; /* 2026-08-06 前澤さん指示: 2.4em→2.8em。2026-08-24追記: 単位規約R2によりemをpxへ置換。2.8em(=44.8px) → 44.8px（JP SP 375pxで実効値一致。PCは別宣言77pxのため本置換の影響を受けない） */ text-align: center; line-height: 1; } } /* ---campaign（CAMPAIGN バナー2枚） ---------------------------------------------------------------------------*/ html[lang="ja"] { .campaign-panel-wrap { margin-top: 15px; /* 出典: S-07「見出し→バナー1: 90px」 */ } .campaign-banner { display: block; max-width: 1100px; margin: 0 auto; border-radius: 15px; overflow: hidden; transition: opacity 0.2s ease; } .campaign-banner:hover { opacity: 0.4; } .campaign-banner img { display: block; width: 100%; height: auto; } .campaign-banner + .campaign-banner { margin-top: 35px; /* 出典: S-07「バナー間35px」 */ } } @media (max-width: 767px) { html[lang="ja"] .campaign-panel-wrap { margin-top: 8px; /* 2026-09-08修正: 15px→8px（前澤さん指示「CAMPAIGN下の★とその下のフレームとの間が空きすぎ。 PICK UP MENUと同じ間隔に」「WHAT'S CARL'S JR.の下部も同じ」）。SPのみ。同日の .pickup-menu-panel-wrap(:406) の8pxに揃える。PC側は4セクションとも15pxで既に揃っているため変更しない。 2026-09-08 再調整: 8px→6px→4px。LOCATIONの次要素は .location-lead というテキストで、 行ボックス上端と文字のインク上端の間にハーフレディング分の余白が入るため、 他3セクション（フレーム＝箱が直接くる）と同じ8pxでは視覚的に広く見えるため。 最終的に4pxとしたのは、ハーフレディング実測(JP 4.5px / EN 3.2px)を足した見た目の空きが JP約8.5px / EN約7.2px となり、他3セクションの8pxとほぼ一致するため。 */ } html[lang="ja"] .campaign-banner { max-width: 319px; border-radius: 5px; } html[lang="ja"] .campaign-banner + .campaign-banner { margin-top: 20px; } } /* ---whats-carls-jr（WHAT'S CARL'S JR. 黒パネル） ---------------------------------------------------------------------------*/ html[lang="ja"] { .whats-panel-wrap { margin-top: 15px; /* 出典: S-08「見出し→パネル90px」 */ } .whats-panel { max-width: 1100px; margin: 0 auto; background-color: var(--color-black); border-radius: 15px; padding: 90px 0 110px; } .whats-made-fresh { text-align: center; font-family: var(--font-heading); font-weight: 900; font-style: italic; transform: skewX(-5deg); font-size: 9.5rem; /* 2026-08-03 T3修正: EN版(line 1076)と同じサイズに統一。旧7.4remはデザイン比23-28%小さかった */ letter-spacing: 4px; /* 2026-08-23追記: top_pc.png実測でインク全幅がデザイン861px（x=280-1140）に対しライブ791pxと70px狭い一方、インク行高は70px/69pxでほぼ同一＝字間だけの差。70px÷18字間≒3.9px。SPは下の@media(max-width:767px)でnormalを明示維持 */ color: var(--color-yellow); line-height: 1; } .whats-made-fresh-break { display: none; } .whats-lead { margin-top: 13px; /* 2026-08-23修正: 45px→13px（top_pc.png実測: MADE FRESHインク下端3466→リード1行目インク上端3513＝視覚47px。ライブは79px。見出し側の行ボックス余白24.3px＋リード側9.7pxが上乗せされるため 47-34=13px）。SPは@media(max-width:767px)で10pxを上書き済み */ text-align: center; font-family: var(--font-body-jp); font-weight: 400; font-size: 17px; /* 2026-08-23修正: 1.6rem(=16px)→17px（top_pc.png実測: 特殊文字を含まない3行目「いつも出来立てをお客様のお席までお運びします。」のインク幅360pxに対しライブ339px → 16×1.062≒17px） */ line-height: 1.5; /* 2026-09-08修正: 2→1.5（前澤さん指示「.whats-lead の行間は文字サイズの1.5倍」）。行送り 17×2=34px → 17×1.5=25.5px。 注意: 同じ指示は2026-08-02にも出ており、2026-08-23のデザイン等倍合わせで行ピッチ実測値へ戻されていた（この履歴は下記の旧コメントに残る）。今回の再指示は8/28の差し戻しPDFを見た上でのものなので、以後デザイン実測を根拠に1.5を上書きしないこと。 */ /* 旧: 2026-08-23修正: 3.4rem(=34px)→2（単位規約R3により単位なし比率。17×2=34pxでデザインの行送り34pxを維持） */ color: var(--color-white); } .whats-h3 { margin-top: 73px; /* 2026-08-23修正: 90px→73px（top_pc.png実測: リード最終行インク下端3597→h3インク上端3688＝視覚91px。ライブは108px＝行ボックス由来の18pxが上乗せされていた）。SPは@media(max-width:767px)で40pxを上書き済み */ /* 2026-09-18修正: 支給PDF CJ_PC_SP_back_0918_2.pdf p1「罫線の長さ上のコピーに合わせてください」。 子の.whats-h3-ruleは固定px幅だったため、コピーが変わるたびに罫線とズレる（実測: PC 罫線710px 対しコピー594.6px＝115px余り／SP 259px 対し185.5px＝74px余り）。h3自身をコピー幅に縮めて 中央寄せし、罫線をwidth:100%でそれに追随させる。以後コピーが変わっても自動で一致する。 */ width: fit-content; margin-inline: auto; text-align: center; font-family: var(--font-body-jp); font-weight: 700; font-size: 44px; /* 2026-08-23修正: 4.2rem(=42px)→44px（top_pc.png実測: インク幅711pxに対しライブ679px → 42×1.047≒44px。44px適用後のインク幅711pxはデザインと一致し、罫線幅710pxとも整合） */ color: var(--color-white); } .whats-h3-rule { /* 2026-08-03 T4実測修正: デザインは全幅ではなく見出しテキスト幅相当(約710px)の 短い罫線＋末尾に「／」状の斜め切れ込みがある。crops/design_h3rule.png実測 (1400px幅キャプチャ=CSS px等倍): 罫線全体193〜904(container基準・幅711px) ≒見出しテキスト幅707px、切れ込み(ギャップ)は罫線内343〜374px(幅31px)。 斜め線は右セグメント開始点(374px, 罫線と同じ高さ)から左下へdx26px/dy24px (長さ約35px, 水平から約47°)伸びる。実装は::beforeでギャップ位置をパネル 背景色(黒)でマスクし、::afterで斜め線(回転させた細い矩形)を重ねる。 */ /* 2026-09-08修正: 擬似要素による組み立てをやめ images/whats-h3-rule-pc.svg の1本のpathに置換した。 支給PDF CJ_PC_back_0827.pdf p1「罫線の太さを統一してください／ここだけ太くなっています」への対応。 旧実装は 水平線＝要素のheight:1px・斜め線＝::afterの矩形幅2px と別々に太さを持っていたため、 斜め線だけが水平線の2倍で描かれていた（実測: 水平線 rgb(255,255,255) 1px / 斜め線 2px）。 SVGなら stroke-width 1本で両方の太さが決まるので、以後ずれようがない。 height を 1px→25px にした分は margin-bottom:-24px で相殺するため、後続要素の位置は変わらない （旧実装の斜め線は絶対配置でレイアウト高さに寄与していなかったため）。 */ display: block; width: 100%; /* 2026-09-18修正: 710px→100%（親.whats-h3をwidth:fit-contentにしたためコピー幅に一致する。経緯は.whats-h3側のコメント参照） */ height: 25px; margin: 7px auto -24px; /* 2026-08-18 Phase3-b: EN側(25px)に統一 / 2026-08-21修正: whats-h3とsvg罫線の間隔を5px縮小 / 2026-08-23修正: 20px→7px（top_pc.png実測: h3インク下端3728→罫線3742＝視覚14px。ライブは26px＝h3の行ボックス下余白約7pxが上乗せ）。SPは@media(max-width:767px)で12pxを上書き済み */ background: url("../images/whats-h3-rule-pc.svg") no-repeat; background-size: 100% 100%; } .story-row { display: flex; align-items: flex-start; /* 2026-08-21修正: center→flex-start（リード文章を上寄せに） */ justify-content: flex-start; gap: 50px; /* 出典: 8-2「画像↔テキストの溝50px」 */ margin-top: 95px; /* 出典: S-08「→記事1: 95px」（記事1のみ） */ } .story-row + .story-row { margin-top: 110px; /* 出典: 8-2「行間110px」 */ } .story-row--reverse { flex-direction: row-reverse; justify-content: flex-start; } .story-row-photo { flex: 2.24 1 650px; width: 650px; max-width: 650px; aspect-ratio: 650 / 330; height: auto; min-height: 0; min-width: 0; /* 2026-08-02 前澤さん指摘: 角丸はテキスト側の角のみ（外側＝白背景境界は直角）。 通常配置（画像左・テキスト右）は右側2角のみ角丸。カンプ8.png「角丸15Px」注記に基づく。 */ border-radius: 0 15px 15px 0; object-fit: cover; } .story-row--reverse .story-row-photo { /* 反転配置（画像右・テキスト左）は左側2角のみ角丸 */ border-radius: 15px 0 0 15px; } .story-row-body { flex: 1 1 290px; width: 290px; max-width: 290px; min-width: 0; } .story-row-title { font-family: var(--font-body-jp); font-weight: 700; font-size: 23px; /* 2026-09-18修正: 25px→23px（0918改修リスト。前澤さん確認: PCの日本語版のみ。PC英語版28px・SP JP20px・SP EN22pxは据え置き）。 旧: 2026-08-23修正: 2.4rem(=24px)→25px（top_pc.png実測: 1段目見出し1行目「定番も贅沢も選べる」インク幅218pxに対しライブ210px → 24×1.038≒25px） */ line-height: 1.64; /* 2026-08-23修正: 4rem(=40px)→1.64（単位規約R3により単位なし比率。25×1.64=41pxでデザインの行送り41pxと一致） */ /* 2026-08-23追記: デザインでは見出し1行目のインク上端が写真上端と完全に一致している（design y=3839で差0px） のに対しライブは行ボックスのハーフレディング分9px下がっていた。テーマ内で既に採用している text-box-trim（.section-heading-title / .pickup-card-title-en）と同じ手法で上側のレディングを削る。 SPは下の@media(max-width:767px)で text-box-trim:none を明示し従来の見え方を維持する。 */ text-box-trim: trim-start; text-box-edge: cap alphabetic; margin-top: 4px; /* 2026-08-23追記: text-box-trim適用後の実測で見出し1行目のインク上端が写真上端より3px上に出た（和文グリフがLatinのキャップ高より上に伸びるため）。デザインはインク上端＝写真上端+1pxのため4px戻す。SPは下の@media(max-width:767px)で0を明示維持 */ color: var(--color-yellow); } .story-row-rule { display: block; width: 100%; height: 1px; margin: 18px 0 15px; /* 2026-08-23修正: 25px 0→18px 0 15px（top_pc.png実測: 見出し最終行インク下端3901→罫線3929＝28px、罫線→本文1行目インク上端3955＝26px。ライブは35px/36pxで行ボックス由来の余白が上10px・下11px乗るため 28-10=18px / 26-11=15px）。SPは@media(max-width:767px)で15px 0を上書き済み */ background-color: var(--color-yellow); } .story-row-text { font-family: var(--font-body-jp); font-weight: 400; font-size: 1.6rem; line-height: 3.4rem; color: var(--color-white); text-align: justify; /* 2026-08-21修正: 黄色い罫線幅と文字幅を近づけるため追加 */ } } @media (max-width: 767px) { html[lang="ja"] .whats-panel-wrap { margin-top: 8px; /* 2026-09-08修正: 15px→8px（前澤さん指示「CAMPAIGN下の★とその下のフレームとの間が空きすぎ。 PICK UP MENUと同じ間隔に」「WHAT'S CARL'S JR.の下部も同じ」）。SPのみ。同日の .pickup-menu-panel-wrap(:406) の8pxに揃える。PC側は4セクションとも15pxで既に揃っているため変更しない。 2026-09-08 再調整: 8px→6px→4px。LOCATIONの次要素は .location-lead というテキストで、 行ボックス上端と文字のインク上端の間にハーフレディング分の余白が入るため、 他3セクション（フレーム＝箱が直接くる）と同じ8pxでは視覚的に広く見えるため。 最終的に4pxとしたのは、ハーフレディング実測(JP 4.5px / EN 3.2px)を足した見た目の空きが JP約8.5px / EN約7.2px となり、他3セクションの8pxとほぼ一致するため。 */ } html[lang="ja"] .whats-panel { border-radius: 5px; /* 2026-08-29修正: 支給PDF(CJ_SP_back_0828) T-4「角丸を5pxで統一」。 EN側(html[lang="en"] .whats-panel、SP)は既に5pxだがJP側だけ基底の15pxのまま 据え置かれていたため、EN側の既存値に合わせて5pxを明示。 */ padding: 40px 0 50px; } html[lang="ja"] .whats-made-fresh { font-size: 4.4rem; /* 2026-08-03 T3修正: EN版(line 1198)と同じサイズに統一。旧3.6remはデザイン比23-30%小さかった */ line-height: 1; /* 2026-09-08修正: 1.2→1.0（前澤さん指示）。単位規約R3により単位なし比率 */ letter-spacing: normal; /* 2026-08-23追記: PC側に letter-spacing:4px を追加したため、SPは従来値(normal)を明示的に維持する */ } html[lang="ja"] .whats-made-fresh-break { display: block; } html[lang="ja"] .whats-lead { margin-top: 10px; /* 2026-08-21修正: 25px→10px */ text-align: left; padding: 0 28px; font-size: 1.5rem; line-height: 2.6rem; /* 2026-09-24修正: 1.5→2.6rem（前澤さん指示「行間を広げる」。JPのみ・ENは1.5据え置き） / 2026-09-08修正: 2rem(=20px)→1.5（前澤さん指示「.whats-lead の行間は文字サイズの1.5倍」）。行送り 20px → 15×1.5=22.5px。単位規約R3により単位なし比率。 注意: 同じ指示は2026-08-02にも出ており、2026-08-23のデザイン等倍合わせで行ピッチ実測値へ戻されていた（この履歴は下記の旧コメントに残る）。今回の再指示は8/28の差し戻しPDFを見た上でのものなので、以後デザイン実測を根拠に1.5を上書きしないこと。 */ /* 旧: 2026-08-21修正: 2.6rem→2rem */ } /* 2026-08-06 前澤さん指示: SPのみlead_text（ACF new_lines=br）内の強制改行
を無効化し 自然な折り返しにする。PCは現状のまま（改行を維持）。左寄せ自体は既存のtext-align:leftを維持。
はACFフィールド値由来でテンプレート側に直書きの要素が無いため、テンプレート側で
を付与し、ここで非表示にする方式（br.smpの逆パターン）。 */ html[lang="ja"] .whats-lead-br { display: none; } html[lang="ja"] .whats-h3 { margin-top: 40px; font-size: 2.4rem; /* 2026-10-15 No.10修正: 画面幅連動の縮小（09-24）をやめ固定に戻した。縮小で常に1行に収めると改行が起きないため。 収まらない幅では .whats-h3-part の境目（「ハンバーガーの話」の前）で折り返す */ } html[lang="ja"] .whats-h3-part { display: inline-block; } html[lang="ja"] .whats-h3-rule { /* 2026-08-03 T4実測修正(SP): top_smp.png実測(375px幅=CSS px等倍)。 罫線全体57〜316px(幅259px)、ギャップ119〜142px(幅23px)、 斜め線は右セグメント開始点(143px)からdx16.5px/dy17px(長さ約24px, 約44°)。 */ /* 2026-09-08修正: PC同様、擬似要素から images/whats-h3-rule-sp.svg へ置換（経緯はPC側のコメント参照） */ /* 2026-09-18修正: 固定幅259pxを撤去。PC基底のwidth:100%を継承し、親.whats-h3のfit-content＝コピー幅に追随する */ height: 19px; margin-top: 12px; /* 2026-08-23修正: PC基底の20pxを継承していたのをSPのみ12pxへ（支給PDF「15px」＝視覚ギャップ。top_smp.png実測は.whats-h3 2行目インク下端y2394→罫線y2406の12px。ライブは 視覚ギャップ＝margin-top+2.8px） */ margin-bottom: -18px; /* 2026-09-08追記: height 1px→19px の増分を相殺し、後続要素の位置を変えない */ background-image: url("../images/whats-h3-rule-sp.svg"); } html[lang="ja"] .story-row, html[lang="ja"] .story-row--reverse { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 40px; padding: 0 28px; } html[lang="ja"] .story-row + .story-row { margin-top: 50px; } html[lang="ja"] .story-row-photo, html[lang="ja"] .story-row--reverse .story-row-photo { flex: none; width: 100%; height: 150px; /* 2026-08-02 前澤さん指摘: SPは画像が縦積み（上：画像／下：テキスト）で 画面外側の角という概念が無いため4角とも直角。カンプTOP_スマホ@2x実測で 角丸なしを確認（旧5pxは誤り）。 */ border-radius: 5px; /* 2026-08-21修正: 0→5px */ } html[lang="ja"] .story-row-body { flex: none; width: 100%; } html[lang="ja"] .story-row-title { text-box-trim: none; /* 2026-08-23追記: PC側で text-box-trim:trim-start を追加したため、SPは従来の見え方（ハーフレディングあり）を明示的に維持する */ margin-top: 0; /* 2026-08-23追記: 同上（PC側の margin-top:4px をSPへ波及させない） */ font-size: 20px; /* 2026-08-06 前澤さん指示: 2rem→2.3rem / 2026-08-21修正: 2.3rem→1.9em / 2026-08-23修正: 1.9em(=30.4px)→20px（top_smp.png実測:「ハンバーガー」インク幅112px、ライブ30.4px時172px → 30.4×112/172=19.8px。単位規約R2によりemをpxへ置換） */ line-height: 1.4; } html[lang="ja"] .story-row-rule { margin: 15px 0; } html[lang="ja"] .story-row-text { font-size: 1.5rem; line-height: 2.6rem; } } /* ---location（LOCATION 店舗カード） ---------------------------------------------------------------------------*/ html[lang="ja"] { .location-lead { margin-top: 15px; text-align: center; font-family: var(--font-body-jp); font-weight: 700; font-size: 16.8px; /* 2026-08-23修正: 1.6rem(=16px)→16.8px（top_pc.png実測: リード1行目インク幅468px／2行目395pxに対し適用前ライブ449px／375px → 平均比1.047・16×1.047＝16.8px。実測比較でも 16.8px→471px / 17px→477px / 16px+paltなし→478px と16.8pxが最も近い） */ line-height: 1.49; /* 2026-08-23修正: 2.2rem(=22px)→1.49（単位規約R3により単位なし比率。16.8×1.49≒25pxでデザインの行送り25pxと一致。適用前ライブは22pxで3px詰まっていた） */ color: var(--color-black); font-feature-settings: "palt" 1; } .location-cards { display: flex; list-style: none; } .location-card { flex: 1; text-align: center; } .location-card-photo { display: block; width: 100%; height: 220px; border-radius: 10px; object-fit: cover; } .location-card-name-en { margin-top: 25px; font-family: var(--font-heading); font-weight: 900; font-size: 3.4rem; color: var(--color-black); text-box-trim: trim-both; text-box-edge: cap alphabetic; } .location-card-name-ja { margin-top: 8px; font-family: var(--font-body-jp); font-weight: 500; font-size: 1.6rem; color: var(--color-black); font-feature-settings: "palt" 1; } /* 2026-08-21修正: common.css側の.pill-button:hoverを赤くする修正が、詳細度の高いこの重複定義に 上書きされてしまうため削除（common.css側の指定をそのまま効かせる） */ } /* 2026-08-18 Phase3-a: JP/EN完全一致のため html[lang="ja"]/html[lang="en"] の重複ブロックを統合 */ .location-cards { gap: 55px; /* 出典: S-09「カード間の溝55px」 */ } /* 2026-08-23修正: マークアップが