@charset "UTF-8"; /* ========================================================= style_en.css — 英語版のみの調整・style.css の後に読み込む。style.css / script.js は変更しない。・英語版Figma（HONDA×ONITSUKA / Design（ENGLIGH） PC = frame 915（1440幅） / SP = frame 916（375幅））をレイアウトの正として、実装との差分だけを補正する。・Figma の数値をそのまま絶対配置で貼り直すことはしない。既存のレスポンシブ構造（%・vw・em・中央寄せ計算）を使って同じ見え方になるように指定する。 ■ 差分が出る原因日本語版は複数のブロックで
によって折り返し位置を作っており、 CSS 側に幅指定が無い。英語版は Figma に合わせて自然折り返しにしたため
を外しており、幅指定の無いブロックだけがコンテナ幅いっぱいまで広がる。 ■ 補正対象（Figma 実測値） PC BRAND STORY リード幅300 / 上369 / 左395 / 24px・行間180% BRAND STORY Honda本文幅557（見出し519） GOAL 見出し幅506（24px） GOAL 本文幅533（16px） SP BRAND STORY リード幅247 / 上169.59 / 左17 / 14px・行間150%・字間6% BRAND STORY 縦組み左253 / 幅57 ■ 補正しないもの（別途報告）・Technology / Philosophy の行数差（サイトが Noto Sans JP を読み込んでおらず、Figma とフォントメトリクスが異なるため）・セクション高さの日本語版由来の差 ========================================================= */ @media (min-width: 1024px) { /* --- BRAND STORY / Honda 紹介 ------------------------------ 英語版Figma（PC frame 1440）のテキストボックス幅を再現するための EN固有調整。Figma が実装仕様の正。見出し 519px / 本文 557px 42% = 545px（.brand_honda_wrap の内容幅 1297px 基準）で、 Figma の 519〜557px のレンジを満たす。なお style.css 側の width:100% は section.section_brand-story > (.brand_honda_wrap, .brand_onitsuka_wrap) > .story_text_wrap という入れ子で詳細度 (0,3,1) を持つため、同等以上で上書きしている。 */ section.section_brand-story .brand_honda_wrap .story_text_wrap { width: 42%; } /* --- GOAL 下部 --------------------------------------------- 日本語版は
のみで組んでいたため幅指定が無い。英語版Figmaのテキストボックス幅に合わせる。見出し 506px ÷ 24px = 21.084em 本文 533px ÷ 16px = 33.313em */ .section_goal .goal_bottom .text_wrap .title { max-width: 21.084em; } .section_goal .goal_bottom .text_wrap .text { max-width: 33.313em; } /* --- BRAND STORY リード（縦組み「Brand Story」とリード文） --------- 英語版Figma PC / Frame 11（1440 × 810）実測：リード文幅300px / 高さ172px / 上369px / 左395px Bold 24px / 行間180% / 文字間隔15% / 4行縦LINE 幅30px / 左705px 日本語版は width:317px・line-height:1.7。英文では Figma より横に広く・上へ寄って組まれるため、Figma のボックスに合わせる。中央寄せの式（left:0 / right:N / width / margin:auto）はそのまま使い、 right だけ変えて Figma の左位置を再現する。 left = (1440 - 345 - 300) / 2 = 397.5px ≒ Figma 395px 上位置は Frame 11 の高さ比 369 ÷ 810 = 45.56%。 */ section.section_brand-story .title_area .brand_copy { width: 300px; right: 345px; top: 45.56%; line-height: 1.8; } /* --- PHILOSOPHY セクションの高さ確保 ------------------------------- style.css は PC（1024px以上）で .philosophy_wrap に height: 833px; padding: 103px 60px; を固定している。 .text_wrap の幅は 36.6% の可変指定のため、画面幅が狭いほど英文の行数が増える（実測：1440px=10行 → 1180px=13行 → 1024px=15行）。日本語版より英文が縦に長いこともあり、1024〜1200px 付近では本文が 833px に収まりきらず、下余白が消えたうえで次の History セクション／History タイトルに重なる。実測（修正前）1024px：本文が wrap 下端を 117.2px 超過、 History タイトルへ 68.2px 食い込み 1180px：wrap 下端を 51.3px 超過、タイトルへ 2.3px 食い込み固定 height をやめ、min-height + padding-bottom へ置き換えて「本文の下に必ず一定の余白」を確保する。 padding-bottom は 1440px の現行下余白 87.4px に合わせた 87px。これにより 1366 / 1440px では min-height:833px 側が勝ち、従来のレイアウトが 1px も変わらない（実測で確認済み）。なお .badge / .photo1 / .photo2 は top を % で指定しているため、 wrap の高さが伸びると一緒に下へ流れてしまう。 833px 基準の実数値へ固定して位置を据え置く。 badge top 9% × 833 = 74.97px photo1 top 20% × 833 = 166.60px photo2 top 39% × 833 = 324.87px （.title は top:104px の実数指定のため対応不要） */ section.section_story-detail .philosophy_wrap { height: auto; min-height: 833px; padding-bottom: 87px; } section.section_story-detail .philosophy_wrap .badge { top: 74.97px; } section.section_story-detail .philosophy_wrap .photo1 { top: 166.6px; } section.section_story-detail .philosophy_wrap .photo2 { top: 324.87px; } /* --- BRAND STORY Honda / Onitsuka の本文を上下中央へ ----------------- style.css は PC でこの2ブロックに padding-top と min-height だけを与えており、padding-bottom は 0・align-items も既定（stretch）。 .brand_honda_wrap padding-top:66px / min-height:599px .brand_onitsuka_wrap padding-top:110px / min-height:597px そのため本文は写真の上寄りに置かれ、さらに .story_text_wrap の幅が 42% の可変指定で画面幅が狭いほど英文の行数が増える（実測 1440px:2+3+2=7行 → 1080px:3+4+2=9行）ため、 min-height を超えると本文最終行と写真下端がほぼ接してしまう。修正前の下余白 1080px：Honda 7.3px / Onitsuka 7.3px 1440px：Honda 24.8px / Onitsuka 42.8px 英語版は本文を写真の上下中央に置く。・align-items: center で .story_text_wrap を垂直中央へ・padding を上下対称（24px）にして、本文が min-height を超える幅でも上下に同じ余白が残るようにするこれにより英文の行数が変わっても常に上下対称になり、下だけ詰まる状態が発生しない。 ※ .bg（写真）は position:absolute のため flex item ではなく、この指定の影響を受けない。 ※ SP（〜1023px）は flex-direction:column の別レイアウトのため対象外。 */ section.section_brand-story .brand_honda_wrap, section.section_brand-story .brand_onitsuka_wrap { align-items: center; padding-top: 24px; padding-bottom: 24px; } /* --- BRAND バイク画像（STORY DETAIL 内 2点）の上余白 ------------------ style.css 側の .-story01 / .-story02 の margin-top は、日本語版の Technology / Philosophy 末尾の余白を差し引いて Figma の 160px を作る値になっている。英語版は本文が長く、その末尾余白が日本語版と異なるため（PC 1440px 実測：Technology 末尾 +31.6px / Philosophy 末尾 -15px）、同じ 160px になるよう EN 側で差分だけ補正する。下余白（②125px / ④195px）は EN でも一致しているため触らない。 SP は①〜④とも 120px で一致しているため対象外。 */ .bike_photo_wrap.-story01 { margin-top: 86px; /* 118 - 31.6 */ } .bike_photo_wrap.-story02 { margin-top: 73px; /* 58 + 15 */ } } /* ========================================================= SP（〜1023px） ========================================================= */ @media (width < 1024px) { /* --- BRAND STORY リード ------------------------------------------- 支給デザイン（SP）の見え方を正とする。帯幅を100%としたときの比率：縦LINE 中心 ≈ 51% リード文左 ≈ 5.8%（22px） / 右 ≈ 42%（157px）／左揃え・4行縦組みタイトル左 ≈ 53%（199px。LINE のすぐ右）日本語版はリード文に幅指定がなく（text-align:center + padding-left:3vw）、英文が長いためカラム全幅へ広がり、縦組み「Brand Story」に重なる。 LINE より左の領域へ収め、デザインどおり左揃え4行で組む。縦組みタイトルの位置は日本語版（right:32vw ＝左198.75px）がデザインと一致するため上書きしない。 */ section.section_brand-story .title_area .brand_copy { width: 40vw; /* 約150px。1行目は "Wearing freedom" で折り返り、 3行目に "The origins of two" が収まる幅。
があるため2行目は必ず "and challenge." で終わる */ margin-left: 5.8vw; /* 約22px */ padding-left: 0; text-align: left; font-size: 3.733vw; /* 14px */ line-height: 1.5; /* 150% */ letter-spacing: 0.06em; /* 6% */ } } .unit { display: inline-block; }