/* ========================================================================== page-head.css — page-head パターン共通スタイル ABOUT で確立した「縦書き h1 三行 + 縦位置写真/SVG + 英訳三行」のヘッダーを works / news / contact 等に流用するための汎用版。 設計： - about.css 側はそのまま温存（`.about-section .about-philosophy-block ...` 連鎖の specificity が高いため、about.html ではこちらの汎用ルールに優先する） - 他ページは `.about-section` クラスを付けないため、ここの汎用ルールが当たる - 値は about.css と同一。HANDOFF §4 の page-head パターン定義を踏襲 読み込み：works.html / news.html / contact.html の から ========================================================================== */ /* ----- 冒頭セクションの hero 化（上余白を 50px ほど確保） ----- */ .section--with-page-head { padding-top: clamp(3.125rem, 6vw, 4.5rem); } /* ----- 共通 800 幅 wrapper（about.css の .about-philosophy-block と同じ役割） ----- */ .page-head-block { /* container（1280）に追従。内部要素が個別に max-width: 800px を持つ。 */ } /* ----- section-label とタイトルの間を 32-44px に詰める ----- */ .section--with-page-head .page-head-block .section-label { margin-bottom: clamp(2rem, 3vw, 2.75rem); } /* ========================================================================== 2 カラム：縦書きタイトル（左）/ 縦位置写真（右） PC: 53.125% : 46.875% / SP: 46.09% : 53.91%（右カラム ×1.15、center 揃え） ========================================================================== */ .page-head { display: grid; grid-template-columns: 53.125% 46.875%; gap: 0; align-items: start; max-width: 800px; } /* ----- 縦書き JP タイトル（左カラム） ----- */ .page-head-title-jp { grid-column: 1 / 2; grid-row: 1; justify-self: center; writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--font-jp); font-weight: 400; font-size: clamp(1rem, 0.65rem + 1.1vw, 1.5rem); line-height: 1.9; letter-spacing: clamp(0.24em, 0.18em + 0.4vw, 0.32em); color: var(--color-fg); margin: 0; padding: 0; } .page-head-title-line { display: block; /* vertical-rl 内では block 子要素が次のカラム */ } /* 縦書き内の半角数字（あれば）：縦中横で 1 字に組む */ .page-head-title-jp .page-title-num { font-family: inherit; font-style: normal; font-size: 1em; letter-spacing: 0; margin: 0; vertical-align: 0; text-combine-upright: all; -webkit-text-combine: horizontal; } /* ----- 縦位置写真 / SVG（右カラム） ----- */ .page-head-photo { grid-column: 2 / 3; grid-row: 1; margin: clamp(28px, 5vw, 50px) 0 0 0; aspect-ratio: 3 / 4; width: 100%; background: #f4f4f4; overflow: hidden; border-radius: 2px; } .page-head-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* インフォグラフィック版（SVG・背景透明） */ .page-head-photo--infographic { aspect-ratio: 261.84 / 313.36; background: transparent; border-radius: 0; } .page-head-photo--infographic > picture, .page-head-photo--infographic > picture > img, .page-head-photo--infographic > img { display: block; width: 100%; height: 100%; object-fit: contain; } @media (min-width: 769px) { .page-head-photo--infographic { aspect-ratio: 411.38 / 522.67; } } /* works ページ専用：page-head-pc.svg / page-head-sp.svg のアスペクトに合わせる */ .page-head-photo--works { aspect-ratio: 242.6 / 264.91; /* モバイル SVG */ overflow: visible; /* 拡大したイラストがはみ出して見えるように */ } .page-head-photo--works > picture > img, .page-head-photo--works > img { transform: scale(0.994); /* モバイル用：1.069×0.93 ≒ 0.994 */ transform-origin: center; opacity: 0.8; /* 80% アルファ */ } @media (min-width: 769px) { .page-head-photo--works { aspect-ratio: 475.98 / 338.71; /* PC SVG（横長） */ margin-top: 0; /* タイトルと天を揃える（PC のみ） */ } .page-head-photo--works > picture > img, .page-head-photo--works > img { transform: scale(1.235); /* PC はモバイルより少し大きく */ } } /* ----- タイトル英訳（アクセント）：page-head 直下 ----- typography は style.css の共通英文レギュレーション（.hero-lead-en ほか）に集約。 ここは配置と行内構造のみ。 */ .page-head-title-en { margin-top: clamp(1.5rem, 3vw, 2.5rem); max-width: 800px; text-align: left; } .page-head-title-en-line { display: block; /* 3 行を独立して縦並び */ } /* ----- page-head パターン下の主要リスト（news / works）の幅統一 ----- 既存 .news-list / .works-list はデフォルト 720px だが、page-head パターン下では page-head と同じ 800px に拡げて左端を揃える。 */ .section--with-page-head .news-list--all, .section--with-page-head .works-list--all { max-width: 800px; margin-top: clamp(1.5rem, 3vw, 2.5rem); } /* ========================================================================== レスポンシブ — 768px ブレークポイント ========================================================================== */ @media (max-width: 768px) { .page-head { grid-template-columns: 46.09% 53.91%; align-items: center; } /* works ページ：写真列を広げてイラスト全体を表示できるようにする */ .page-head:has(.page-head-photo--works) { grid-template-columns: 38% 62%; } .page-head-title-jp { justify-self: start; } .page-head-photo { margin-top: 0; } }