/* * Harashina Standard — Hero + Introduction（正式実装・Composition Group方式） * * 確定済みprototype（Harashina_Web_Project/prototypes/hero-ab-test/ * a.html, css/variant-a.css, css/common.css）の1440px版Hero/Introductionを * 「基準デザイン」とし、そのデザイン思想・構図・animation timing/easingを * 再設計せず維持したまま、あらゆるviewport幅で成立するよう内部実装を * 再設計したもの。今回はHero開始状態（Hero文字＋写真の配置）のみが対象。 * * ---- これまでの問題と、今回の設計変更（2026-09四次修正） ---- * 旧実装（三次修正まで）は、Hero文字と写真パネルを「それぞれ独立して * viewport/stageへ配置する」方式だった。文字はpadding-topの連続式、 * 写真はLandscapeでは.hero-aの下端からのbottom基準、Portraitでは * 「文字の高さを手計算で推定した定数」を使うtop基準、と別々の座標計算を * 行っており、 * - 文字と写真の「関係」が幅によって変わって見える * （広いPCほど離れ、狭いほど近づく＝関係が一定でない） * - Landscape/Portraitの座標計算方式そのものが899px/900pxで切り替わり、 * 写真位置が約130pxジャンプする * - 文字の高さの推定定数は近似に過ぎず、実際のレイアウトと厳密には * 一致しない * という問題があった。 * * 今回、Hero文字(.hero-a__text)と写真(.hero-a__photo-box)を * 「同じCSS Grid（.hero-a__composition）の子要素」として配置する方式に * 変更した。文字はgridの1行目（auto、＝実際のレイアウト結果に応じて * 自動的にサイズが決まる。近似定数は使わない）に、写真は2行目 * （残り全部の高さ、右カラム）に置かれ、写真は`align-self:start` * （文字のすぐ下から開始）・`justify-self:end`（右端に揃える）で * 位置が自動的に決まる。文字と写真の「間」は`row-gap`という * 単一のCSS変数だけで幅に応じて連続的に変化させており、Landscape用 * ／Portrait用という座標計算方式の区別（＝ジャンプの原因）自体が * 存在しない。 * * 将来、写真パネルが成長するanimationを実装する際も、写真の * grid上の位置（2行目・右カラム）はそのままに、`width`だけを * アニメーションさせればよい設計にしてある（align-self/justify-self * が常に右上基準の位置を自動的に保つため、成長時に別途top/right/bottom * を計算し直す必要がない）。 * * 色・フォントはtokens.css（--bg / --text / --text-muted / --accent / * --font-serif / --font-sans / --font-mono / --ease-in）を参照する。 * このファイルはtokens.cssの後に読み込む前提（functions.php参照）。 */ :root{ /* 実際のheader高さ。assets/js/hero.jsが実測して都度上書きする。 ここでの73pxはJS実行前のごく短い初期描画用のフォールバック値 （2026-09、Local実機で実測したheader高さと一致）。 */ --above-hero-height: 73px; } .hero-a{ position: relative; /* ---- Portrait(<900px)のheight決定ロジック（2026-09二十次修正で 100svh依存を廃止、写真＋Introduction geometry由来へ統一） ---- 以前はここが`calc(100svh - var(--above-hero-height) - 8px)`という viewport高さ駆動の式だった。写真・Introductionのサイズと無関係に Hero heightが決まるため、同じ幅でもviewport高さが変わるだけで Hero下部の余白が大きくばらつく問題があった（390×844では目立たず、 390×1426では本文下に約807pxもの空白が発生することが実測で判明）。 さらに821〜899px専用の暫定Tablet層（本修正で撤去）とロジックが 二重化していた。 今回、390〜899.98px全体を1本の式（下の--hero-photo-bottom-stage/ --hero-intro-block-h/--hero-bottom-gapを参照）に統一した。詳細は --hero-intro-block-h・--hero-bottom-gapのコメント参照。900px以上 （@media(min-width:900px)）はこの直後の宣言で従来通り上書きされる ため、Landscapeには一切影響しない。 */ height: calc( var(--hero-photo-bottom-stage) + 82px + var(--hero-intro-block-h) + var(--hero-bottom-gap) ); overflow: hidden; /* ---- Hero見出しの文字サイズ ---- 1440pxで5rem（承認済みPC版と同一）、375px前後で2.25rem （「暮らしと仕事に、」8文字が折り返さずに収まる下限として 実測調整）。幅に基づくbreakpointは使わず、単一のclamp()で 連続的に変化する。 */ --hero-headline-size: clamp(2.25rem, 1.15rem + 4.7vw, 5rem); /* ---- Hero文字ブロックの左右追加余白（水平方向、変更なし） ---- 1440pxでは実質130px分内側に寄る（旧max-width:1180px+margin:auto 中央寄せと同じ内側寄せ量）。1024px以下は追加余白0。垂直位置とは 独立した、水平方向だけの調整。 */ --hero-text-extra-inset: clamp(0px, 31.25vw - 320px, 130px); /* ---- ヘッダー→Hero composition開始までの上余白 ---- 「ヘッダー直下に大きな空白を作らない」という条件を反映し、 1440pxでの上余白を120px程度まで圧縮した（三次修正時点の170pxから さらに縮小。空けていた分は下のcomposition-gapへ、意味のある 「文字と写真の間」として再配分している）。375px側は42px （実測確認済みの良好な値）を維持。幅に基づくbreakpointは 使わない単一のclamp()。 */ --hero-composition-top-pad: clamp(42px, 13px + 7.43vw, 120px); /* ---- Hero文字ブロックと写真の「行間隔」（Composition Groupの核） ---- text-groupと写真をグリッドの別々の行に配置しているが、 .hero-a__photo-box側の負のmargin-topでこの行間隔の一部を 打ち消し、写真をsubcopy（HARASHINA — SINCE 1972）の帯域まで 引き上げている（実際の重なり量はmargin-top側で管理。 詳細は.hero-a__photo-boxのコメント参照）。この行間隔自体は 1440pxでは115px、375px前後では40pxまで、単一のclamp()で 連続的に変化する。Landscape/Portraitで計算方式そのものを 変えていないため、899px/900pxのような境界ジャンプが 構造的に発生しない。 */ --hero-composition-gap: clamp(40px, 12px + 7.14vw, 115px); /* ---- 写真を文字帯域へ引き寄せる量（負のmargin-topの大きさ） ---- 写真はcolumn2（右カラム）にしかないため、見出し・サブコピーの 実際の文字（左詰め、右カラムまでは伸びない）と水平方向で重なる ことは無い。そのため、見出し下端からの垂直クリアランスが 十分にある限り、この引き寄せ量を大きくしてよい。 PC（見出しが短く、右カラムまで大きく余裕がある）ほど強く 引き寄せ、Smartphone（見出しがほぼ全幅を使い、水平方向の 余裕が少ない）は控えめにする。全viewportで photo上端が見出し下端より下（＝重ならない）ことを実測確認済み。 */ --hero-composition-photo-pull: clamp(-134px, 3.1px - 9.52vw, -34px); /* ---- 写真パネルの初期幅 ---- 375pxで約190px、1440pxで360px（旧PC版の25%幅相当と同一）。 375〜1440pxを単一のclamp()でつなぎ、Landscape/Portrait共通の 1つの式のみを使用している（旧実装にあった2つの独立した式は 廃止）。高さはaspect-ratioにより自動的に決まる。 */ --hero-photo-w-start: clamp(188px, 189px + 11.9vw, 360px); /* ---- 写真パネルの開始right位置（named custom propertyとして 明示化。式自体は以前から.hero-a__compositionのpadding-rightと 共通のclamp(1.2rem,4vw,3rem)を再利用しており、変更していない） ---- */ --hero-photo-right-start: clamp(1.2rem, 4vw, 3rem); /* ---- 写真パネルの開始top位置（stage基準、2026-09六次修正でresponsive化） ---- 以前は1440px専用の固定値(366px)だった。Landscape(≥900px)/ Portrait(<900px)の2つの回帰式に分け、899px/900pxの境界で 連続するよう校正している（本ブロックの値はPortrait用のデフォルト。 Landscape用は下の@media (min-width:900px)で上書きする）。 1440pxでの値(366px、page基準439px)は承認済み開始状態と完全一致し、 375/390/768/899pxはComposition Group（grid）が算出していた 実測値と一致するよう校正した。 */ /* 2026-09十五次修正: Portrait（<900px）でIntroduction完成時の 「ヘッダー下端→写真上端」の空白が約131.5px（390pxで実測）と 大きく見えたため、Portrait構図全体（開始top・到達top）を86.5px 均等に上へシフトした（min/A/maxの3値すべてから86.5pxを引くだけ ＝傾き・カーブの形は変えず、平行移動のみ）。写真→Introductionの 82px gap（--hero-intro-top等がphoto-bottom-stage基準のため自動 追従）・width/right/aspect-ratio/animation timingは一切変更して いない。Landscape（≥900px、下の@media内）は対象外で不変。 */ --hero-photo-top-start: clamp(114.5px, 51.52px + 16.794vw, 202.5px); /* ---- 写真パネル成長の到達top位置（stage基準） ---- 1440pxの174px（page基準247px、Landscape側で別定義）は承認済み・ 確定値で今回対象外。Portrait側は上記と同じ2026-09十五次修正で 86.5px上へシフト済み。 */ --hero-photo-top-end: clamp(44.5px, 33.05px + 3.053vw, 60.5px); /* ---- 写真パネル成長の到達right位置（2026-09六次修正で新規追加） ---- 1440pxの80pxは承認済み・確定値。他のviewportは仮値。 */ --hero-photo-right-end: clamp(29px, 8.25px + 5.534vw, 58px); /* ---- 写真パネルの最終幅（成長animationの到達点、2026-09五次修正） ---- 写真はComposition Group（grid）の外へ出し、.hero-a__stage直下の 独立したanimation layerにした（詳細は.hero-a__photo-boxの コメント参照）。これにより、grid行の残りスペースという制約を 受けず、hero-a全体を使って成長できる。1440pxの到達点は720px （「文字が消えた後、写真がHeroの主役になる」と感じられる大きさを 優先しつつ、hero-a下端をクリップしない範囲で決定）。承認済み・ 確定値。他のviewportはtop-end/right-endと同様、Landscape/Portrait 2式構成の仮値（2026-09六次修正でresponsive化）。 */ --hero-photo-w-end: clamp(278px, 154.91px + 32.824vw, 450px); /* ---- 写真パネル成長の専用easing（2026-09八次修正） ---- width/height/top/rightすべてを単一のfrom→to keyframeで結び、 このeasing 1つだけで速度カーブを作る（途中でkeyframeの挙動を 切り替えない）。前回のcubic-bezier(0.66,0,0.86,0.24)は前半が ほぼ静止して見えたため、0%直後から視覚的に動き出し、途切れず 滑らかに育ち、終盤にかけてわずかに勢いを増して自然に着地する、 より穏やかなカーブへ調整した。 */ --hero-photo-grow-easing: cubic-bezier(0.22, 0.14, 0.6, 1); /* ---- 写真パネル下端（stage基準、Introduction配置用、2026-09七次修正で新規追加） ---- 写真の実際の成長到達位置(top-end)・到達幅(w-end)・実寸比(1536:904) から直接算出しているため、手で別式を作るより確実に写真と一致する （どのviewport幅でも自動的にずれない）。Portrait（写真の下に Introductionを置く）で使用。 */ --hero-photo-bottom-stage: calc(var(--hero-photo-top-end) + var(--hero-photo-w-end) * 904 / 1536); /* ---- Introduction本文ブロックの推定高さ（Portrait共通、2026-09 二十次修正で新規追加、390〜899.98px全域で使用） ---- eyebrow+見出し+本文の実高さは幅によって変わる（テキストの折り返し・ font-size clampの影響）が、390〜899px（450px・600px・700px・768px・ 821px・881px・899px等）で実測した結果、223.38px〜246.99pxの範囲に 収まることを確認した（最大は480px時の246.99px）。実測値の変動幅が 約24pxと小さいため、幅ごとの個別値ではなく単一定数として扱う （--hero-intro-topで使われている82px・300pxと同種の設計）。 260pxは実測最大値に約13px以上の安全マージンを加えた、視覚確認用の 第1試行値（最終確定値ではない）。 2026-09-18再校正: 確定本文（「1972年の創業以来...今日まで歩んできた 会社です。」）に変更したことで実高さが増加し、260pxでは390〜899px 全幅でクリップが発生することを実測で確認（クリップ量は390pxで 最大34.53px）。同じ8幅（390/450/600/700/768/821/881/899px）で .hero-a__intro-copy-innerの実高さを再測定した結果、273.19px〜 298.53pxの範囲（最大は390px時の298.53px）。この最大値に約13px以上の 安全マージンを加え、310pxへ更新した（測定方法・安全マージンの 考え方は初回設定時から変更していない）。 */ --hero-intro-block-h: 310px; /* ---- Introduction本文下端からHero下端までの余白（Portrait共通、 2026-09二十次修正で新規追加） ---- 20pxは視覚確認用の第1試行値（最終確定値ではない）。 */ --hero-bottom-gap: 20px; /* ---- Introduction文言の開始位置（Portrait、写真下の余白側、 2026-09十四次修正で116px→82pxへ短縮） ---- 写真とIntroductionが別セクションのように離れて見えるという 指摘を受け、写真下端からの余白を116px→82pxへ詰めた。overlayが 完全に不透明化する位置（--hero-intro-scrim-full、写真下端+100px） は変更していないため、veilの見え方自体は不変。 安全上限（899×800のような、幅がPortrait側でも高さが低い viewportでの実測でclippingが発生したため追加）: hero-a下端から 300px分は必ずIntroduction文言用に確保し、写真下端からの理想値が それを超える場合はより上（写真寄り）に詰める。300pxは本文言の 実測必要高さ（228〜275px、2026-09時点）に安全マージンを加えた値。 */ --hero-intro-top: min( calc(var(--hero-photo-bottom-stage) + 82px), calc(100svh - var(--above-hero-height) - 8px - 300px) ); /* ---- overlayの完全不透明化位置（2026-09十四次修正で--hero-intro-topへの 依存を解消） ---- 以前は「--hero-intro-top - 16px」を安全上限の分岐として使っていたが、 これは--hero-intro-topの内部offset（116px）と暗黙に連動しており、 82pxへ変更すると連動してveilのgradient停止位置まで変化してしまう （116-16=100と82-16=66は別の値のため）。veilの見た目は今回変更禁止 のため、安全上限の分岐先を--hero-intro-topではなく、その安全上限 自体が参照している式（100svh−ヘッダー高さ−8px−300px）に対して 直接-16pxする形へ変更した。通常時（899×800のような極端な低高さで ない限り）の計算結果（写真下端+100px）は完全に不変。 */ --hero-intro-scrim-full: min( calc(var(--hero-photo-bottom-stage) + 100px), calc(100svh - var(--above-hero-height) - 8px - 300px - 16px) ); /* ---- 写真全体にわたるベールの中間停止点（Portrait、2026-09十二次 修正で新規追加） ---- 写真の上端(--hero-photo-top-end)〜下端(--hero-photo-bottom-stage) の間を50%地点（写真中央）・85%地点（写真下部寄り）で区切り、 gradientのalphaをそこで指定することで「写真上部は非常に薄く、 下部（Introduction側）に近づくほど少し濃くなる」という連続的な 変化を作っている。写真の実際の高さから直接算出しているため、 どのviewportでも写真の実寸と自動的に一致する。 */ --hero-veil-photo-mid: calc(var(--hero-photo-top-end) + (var(--hero-photo-bottom-stage) - var(--hero-photo-top-end)) * 0.5); --hero-veil-photo-lower: calc(var(--hero-photo-top-end) + (var(--hero-photo-bottom-stage) - var(--hero-photo-top-end)) * 0.85); /* ---- Introduction本文の幅（Portraitのデフォルト、2026-09七次修正） ---- 写真の左右にはみ出す心配がない（写真の下に置くため）ので、読みやすさ だけを基準にした固定気味のclamp。Landscape用は下の @media (min-width:900px)で写真の左端から動的に算出する値に 上書きする。 */ --hero-intro-max-width: clamp(300px, 88vw, 460px); --hero-intro-h2-size: clamp(1.49rem, 1.34rem + 0.625vw, 1.9rem); } /* ---- Stage: Hero composition・overlay・Introductionが共有する外枠。 1440px（承認済み基準幅）を上限に中央寄せし、それを超えるviewportでは 構図をそのまま凍結して余白だけを増やす。 ---- */ .hero-a__stage{ position: absolute; inset: 0; max-width: 1440px; margin: 0 auto; } /* ---- 写真パネルのtop-start/top-end/right-end/w-end：Landscape(≥900px)用 上書き（2026-09六次修正）。:root側のデフォルトはPortrait(<900px)用。 899px/900pxの境界で両側の式が同じ値になるよう校正しているため、 この@media自体の切替はジャンプを生まない。 2026-09七次修正: Introduction用のLandscape変数もここに追加した （写真は右・Introductionは左という水平構図に切り替わるため）。 899px/900pxでは「写真の左端から動的に算出する」計算方式そのものが Portrait（写真下基準）からLandscape（写真左端基準）へ切り替わる。 900pxを境に構図が水平⇔垂直へ変わること自体はart directionとして 意図的な変更であり、写真animation側のようなpx単位の完全連続は 目的にしていない（899px/900pxそれぞれの画面で構図が単独で 成立することを優先。ユーザー承認済み）。 ---- */ @media (min-width: 900px){ .hero-a{ --hero-photo-top-start: clamp(289px, 160.67px + 14.259vw, 366px); --hero-photo-top-end: clamp(147px, 102px + 5vw, 174px); --hero-photo-right-end: clamp(58px, 21.333px + 4.074vw, 80px); /* ---- 写真パネル到達幅（2026-09二十一次修正、B2方式・第1試行） ---- 以前は900〜1439pxが`clamp(450px,50vw,720px)`、1440px以上が 別ブロックの固定828pxという2つの独立した式だったため、 1439→1440pxで約108.5px（719.5px→828px）急変し、それに連動して Hero heightも約63.9pxジャンプしていた。 今回、900〜1200pxは従来通りの`50vw`をそのまま維持し、1200px （50vwとの交点）以降だけ`95vw-540px`という急な直線に切り替えて 1440pxちょうどで828pxへ到達するようにした（`max()`で2本の 直線を合成。値自体は1200pxで連続、成長の傾きだけがそこで 切り替わる）。1440px以上は`clamp()`の上限828pxで自動的に 頭打ちになるため、後方の@media(min-width:1440px)ブロックの 828px固定上書きと矛盾なく両立する（今回は安全弁として そのブロックも残している）。1200pxは最終確定ではなく視覚確認用の 第1試行の交点。--hero-photo-top-end/--hero-photo-right-end・ Hero heightの計算式自体は無変更（--hero-photo-w-endを参照する 既存の式がそのまま新しい値に反応するだけ）。 */ --hero-photo-w-end: clamp( 450px, max(50vw, 95vw - 540px), 828px ); /* ---- Hero heightの写真geometry連動化（2026-09十八次修正、 固定pxの幅ごと個別調整を廃止） ---- 以前はheight自体を「900〜1439pxはviewport高さ(100svh)駆動」 「1440px以上は手動確定した固定px」という、写真サイズと無関係な 2つの式で決めていたため、幅によってHero下部の余白が大きく ばらついたり、1440px境界で不自然にジャンプする問題があった。 今回、写真の到達高さ(--hero-photo-h-end、aspect-ratio 1536:904 から算出)・到達top(--hero-photo-top-end)・下余白(--hero-bottom-gap) の合計から直接heightを算出する式に変更し、写真sizeが変われば heightも自動的に追従するようにした。--hero-photo-w-end自体は このブロックでは変更していない（1440px以上の828px上書きは 別ブロックのまま）ため、算出されるheightは1440px以上でも 自動的に正しい値になり、1440px専用のheight固定上書きは不要になった （撤去済み）。 */ --hero-photo-h-end: calc(var(--hero-photo-w-end) * 904 / 1536); --hero-bottom-gap: 20px; height: calc(var(--hero-photo-top-end) + var(--hero-photo-h-end) + var(--hero-bottom-gap)); /* 写真パネルの成長到達時の左端（viewport基準）。stageの max-width:1440px凍結と整合するようmin(100vw,1440px)を 基準にしている。 */ --hero-photo-left-edge: calc(min(100vw, 1440px) - var(--hero-photo-right-end) - var(--hero-photo-w-end)); /* Introductionの左位置。Hero見出しが実際にあったのと同じ 位置（--hero-composition-top-pad・padding式）を再利用し、 「同じ場所で状態が切り替わった」という視覚的連続性を作る。 */ --hero-intro-left: calc(clamp(1.2rem, 4vw, 3rem) + var(--hero-text-extra-inset)); /* ---- Introduction本文の最大幅（2026-09十次修正） ---- 承認済みprototype（variant-a.css）を再確認した結果、prototypeは 「Introduction文字領域と写真が完全に分離せず、写真左端に文字が 軽く重なり、その重なる部分だけをoff-whiteのveilが覆う」という 構成だった。以前の実装は写真左端との間に常に48px以上の clearanceを保証しており、この「軽い重なり」自体が失われていた ため廃止した。 --hero-intro-overlapは、Introduction文言の右端が写真左端から どれだけ写真内部へ入り込むかを表す（本文が写真上で読めなくなる ほど深く重ねないよう、控えめな値にしている）。写真の位置・ サイズ（--hero-photo-left-edge等）自体は一切変更していない。 */ --hero-intro-overlap: 64px; --hero-intro-max-width: max(240px, calc(var(--hero-photo-left-edge) + var(--hero-intro-overlap) - var(--hero-intro-left))); /* ---- ベールのgradient基準点（2026-09十次修正、維持） ---- Introduction文言の実際の右端（写真左端から64px重なる境界）。 この位置とその重なり構造自体は変更していない。 */ --hero-intro-scrim-solid: calc(var(--hero-intro-left) + var(--hero-intro-max-width)); /* ---- 写真全体にわたるベールの中間停止点・右端 （Landscape、2026-09十二次修正で新規追加） ---- 写真の左端(--hero-photo-left-edge)〜右端の間を25%地点 （写真左側寄り）・60%地点（写真中央）で区切り、gradientの alphaをそこで指定する。scrim-solid（64px重なり）より先の 区間だけが対象で、Introduction文言と重なる部分の見え方 （scrim-solidまでの0.72）自体は変更していない。 */ --hero-photo-right-edge: calc(min(100vw, 1440px) - var(--hero-photo-right-end)); --hero-veil-photo-quarter: calc(var(--hero-photo-left-edge) + var(--hero-photo-w-end) * 0.25); --hero-veil-photo-mid: calc(var(--hero-photo-left-edge) + var(--hero-photo-w-end) * 0.6); } } /* ---- 写真終了幅の1440px限定比較用上書き（2026-09十三次修正、一時的） ---- 1440×900のみを対象に、写真の終了width（成長animationの到達点）を 720px→828px（約15%増）へ変更する視覚比較。900〜1439pxの既存の clamp(450px,50vw,720px)には一切手を加えていない（このブロックより 前の@media(min-width:900px)がそのまま適用され続ける）。ソース順序上 このブロックは900px用ブロックより後ろにあるため、min-width:1440px も満たす1440px以上でのみ828pxが優先される。top(247px)・right(80px) ・開始状態・easing・keyframe・duration/delayは一切変更していない。 左端(--hero-photo-left-edge等、他のcustom propertyから自動算出)は width増加に伴い幾何学的に自動で変化するが、これは既存の計算式が そのまま新しいwidthに反応しているだけで、Introduction/veil側の 計算式自体（64px重なり構造・gradient停止式）は変更していない。 */ @media (min-width: 1440px){ .hero-a{ --hero-photo-w-end: 828px; /* heightは900px用ブロックの写真geometry連動式 （--hero-photo-top-end + --hero-photo-h-end + --hero-bottom-gap） がそのまま適用される（2026-09十八次修正でここにあった1440px 専用の固定px上書きは撤去した）。--hero-photo-h-endは --hero-photo-w-endを参照するcalc()のため、828pxへの変更に 自動的に追従し、1440px以上でも正しい高さになる。 */ } } /* ========================================================================= Composition Group — Hero文字の開始位置をCSS Gridで決める text-group(.hero-a__text)は1行目（auto＝実際の高さに自動的に一致）に 置かれ、上端の余白(--hero-composition-top-pad)だけが幅に応じて 変化する。文字の高さそのものはブラウザの実際のレイアウト結果 （gridのauto行）がそのまま使われる（手計算の近似定数は使用していない）。 2026-09五次修正: 写真(.hero-a__photo-box)はこのgridの外 （.hero-a__stage直下）へ移動した。以前はここに2行目・右カラムの grid itemとして置き、align-self:start・justify-self:endで 「文字のすぐ下・右端」を基準点にしていたが、成長animationの 到達サイズがgrid行の残りスペースに制約されてしまうため。 ただし写真の開始位置（top/right）は、このgridが算出していた値と 完全に一致する固定値を使っており、見た目の開始状態・899/900pxの 連続性を含め、Composition Groupで確定した構図は変更していない。 2列目・2行目（grid-template-columns/rowsのauto・1fr側）は現在 写真を置いていないため実質未使用だが、grid定義自体は変更していない。 ========================================================================= */ .hero-a__composition{ position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; row-gap: var(--hero-composition-gap); padding: var(--hero-composition-top-pad) clamp(1.2rem, 4vw, 3rem) 0 calc(clamp(1.2rem, 4vw, 3rem) + var(--hero-text-extra-inset)); } /* ---- 写真（Hero冒頭〜Introduction完了まで同一要素） ---- boxのaspect-ratioを写真の実寸比(1536:904)に固定しているため、 widthをどれだけ変えても内部再クロップは発生しない（内部zoomではなく、 写真を含む矩形パネルそのものが成長する方式）。 2026-09五次修正: .hero-a__stage直下の独立したanimation layerに 変更した（.hero-a__compositionのgridからは外れている）。 理由: gridの2行目（残りスペース）に収めたまま成長させると、 「文字が消えた後、写真がHeroの主役になる」演出に必要な大きさまで 育てられなかったため（1024〜1200px付近で縦方向の余地がもっとも 少なく、そこに合わせると1440pxでも小さすぎる結果になっていた）。 開始位置（top/right）は、Composition Group（grid）が算出していた 値と完全に一致する値を使っており、視覚的なジャンプは発生しない （2026-09時点、1440×900で実測: top=439px（stage基準366px）、 right=48px＝clamp(1.2rem,4vw,3rem)の1440px時点の値と同一）。 2026-09六次修正でtop/right/widthすべてを--hero-photo-*-start/-end custom propertyに置き換え、1440px以外のviewportでも同様に開始位置・ 成長到達位置を算出できるようにした（詳細は:root内の各変数の コメント参照）。 */ .hero-a__photo-box{ /* position:relativeが必須: 内部のがposition:absolute;inset:0で このbox自身を基準に敷き詰められる。 */ position: absolute; /* stage基準（stage上端＝hero-a上端＝header直下）。1440pxでは366px （＝承認済み開始状態の実測値439pxからheader高さ73pxを差し引いた 値）で、変更していない。他viewportはresponsive化済み。 */ top: var(--hero-photo-top-start); z-index: 1; aspect-ratio: 1536 / 904; opacity: 0; transform: scale(0.97); /* 写真パネルの成長（2026-09七次修正）。 以前は0%→79%でtopをほぼ止め、79%→100%で一気に上昇させる 3点keyframeにしていたが、これは「横に膨らんだ後、後から上へ スライドする」という二段階の不自然な動きに見えてしまった。 今回は0%→100%の単一のkeyframeに戻し、width/height/top/right すべてを同じ1本の補間・同じeasingで動かしている（＝常に同じ 比率で並行して変化するため、「1つの矩形が左・上方向へ連続的に 広がっている」ように見える）。文字が読める時間を確保するための 「特定時刻で挙動を切り替える」設計はやめ、代わりに --hero-photo-grow-easingという専用の強いease-inカーブ （前半は非常にゆるやかに、後半にかけて滑らかに加速する単一の 曲線）を使うことで、途中の速度変化を作らずに「前半は控えめ・ 後半で存在感を増す」という同じ意図を実現している。 0.3秒〜9.3秒のduration・文字fade開始7.4秒は変更していない。 */ animation: heroAPhotoIn 1.2s var(--ease-in) forwards 0.3s, heroAPhotoGrow 4.6s var(--hero-photo-grow-easing) forwards 0.45s; } @keyframes heroAPhotoIn{ from{ opacity: 0; transform: scale(0.97); } to{ opacity: 1; transform: scale(1); } } @keyframes heroAPhotoGrow{ from{ width: var(--hero-photo-w-start); right: var(--hero-photo-right-start); top: var(--hero-photo-top-start); } to{ width: var(--hero-photo-w-end); /* 成長完了時は右の余白も少し広げ、「着地した」落ち着きを出す （旧PC版の4%→6%と同じ考え方）。1440pxは承認済み・確定値(80px)、 他viewportは--hero-photo-right-endの仮値（2026-09六次修正）。 */ right: var(--hero-photo-right-end); /* 上辺は366px→174pxへ、192px上方向へ移動する （下辺の移動は約20pxのみ。「上方向への展開」を優先）。1440pxは 承認済み・確定値、他viewportは--hero-photo-top-endの仮値。 */ top: var(--hero-photo-top-end); } } .hero-a__photo-box img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ---- Hero文字（登場→保持→退場のすべてを時間ベースで） ---- Composition Group内のgrid item（1行目）。position:absoluteでは なくなったため、以前必要だったjustify-content:centerによる 垂直中央寄せ・独自のpadding-topは不要（gridの行送りと --hero-composition-top-padがその役割を担う）。 ---- */ .hero-a__text{ /* 1列目だけに収めると、2列目（写真用のauto列）が確保する幅の分だけ grid全体の列幅計算で1列目が圧迫され、見出しが意図せず折り返す 不具合があったため、行の全幅（1〜2列目）を使う。写真は2行目のみ （grid-row:2）に置かれているため、縦方向で重なることはない。 */ grid-column: 1 / -1; grid-row: 1; z-index: 2; /* 文字が十分読まれたあと3.8秒から、右へfade outさせる （2026-09十一次修正でHero全体を約7秒へ短縮。移動量・easingは 不変、duration/delayのみ圧縮）。 */ animation: heroATextExit 1.5s cubic-bezier(.25, .46, .45, .94) forwards 4.0s; } @keyframes heroATextExit{ from{ opacity: 1; transform: translateX(0); } to{ opacity: 0; transform: translateX(40px); } } .hero-a__headline{ font-family: var(--font-serif); font-weight: 800; font-size: var(--hero-headline-size); line-height: 1.28; margin: 0 0 1.6rem; color: var(--text); } /* 「暮らしと仕事に、」「必要なものを。」の視覚的な2行構成は、CSSの 折り返しに委ねず、HTML側で.line spanを2つ用意しdisplay:blockで 明示している。--hero-headline-sizeが下限（2.25rem）を割らない限り、 どのviewportでもこの2行構成を維持する。 */ .hero-a__headline .line{ display: block; opacity: 0; animation: heroALineIn 1.8s var(--ease-in) forwards; } .hero-a__headline .line:nth-child(1){ animation-delay: 0.1s; } .hero-a__headline .line:nth-child(2){ animation-delay: 0.65s; } @keyframes heroALineIn{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: translateY(0); } } .hero-a__sub{ font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--text-muted); opacity: 0; animation: heroAFadeIn 1.6s var(--ease-in) forwards; animation-delay: 1.35s; } @keyframes heroAFadeIn{ from{ opacity: 0; } to{ opacity: 1; } } /* 文字がすべて表示され終わるのは0.8秒。そこから3.8秒（退場開始）までの 3.0秒間を「文字が主役の保持時間」として確保している （2026-09十一次修正でHero全体を約7秒へ短縮）。 */ /* ---- Introductionへのベール（2026-09十二次修正：写真全体への グラデーション化） ---- これまでは写真の一部（Landscapeは左端、Portraitは下端）だけに ベールを重ねていたが、承認済みprototypeで感じられた「写真全体に 薄いベールが掛かってIntroductionへ切り替わる」空気感を再現するため、 写真の全高（Portrait）/全幅（Landscape）にわたって連続的にalphaが 変化する多段gradientへ変更した。Introduction側は従来どおり強い alpha（Portrait 0.55）を保ち、写真に入ってからは 下部→中央→上部の順に段階的に薄くなるが、写真上部でも完全な alpha 0にはせず、ごく薄いベールを残す（写真全体を均一に白くする ことはしない）。写真の位置・サイズ自体には一切影響しない （overlayは別要素として重なっているだけ）。 本ブロックはPortrait（<900px、写真は上・余白は下）のデフォルト。 ---- */ .hero-a__overlay{ position: absolute; inset: 0; z-index: 3; background: linear-gradient( to bottom, rgba(245, 244, 240, 0) 0%, rgba(245, 244, 240, 0.06) var(--hero-photo-top-end), rgba(245, 244, 240, 0.15) var(--hero-veil-photo-mid), rgba(245, 244, 240, 0.35) var(--hero-veil-photo-lower), rgba(245, 244, 240, 0.45) var(--hero-photo-bottom-stage), rgba(245, 244, 240, 0.55) var(--hero-intro-scrim-full) ); opacity: 0; animation: heroAOverlayIn 1.5s ease-in-out forwards 4.8s; } @keyframes heroAOverlayIn{ from{ opacity: 0; } to{ opacity: 1; } } /* ---- Introduction文言（2026-09七次修正で再設計） ---- 確定文言（見出し・本文とも）は変更していない。本ブロックはPortrait （<900px、写真の下の余白側）のデフォルト。写真の実際の下端から 116px（＝overlayが十分不透明化した16px先）から開始し、scrimの 上に文字が浮かび上がるように見せる。左右はHero文字と同じ clamp(1.2rem,4vw,3rem)のpadding相当をleft/rightで確保し、 カード化・境界線・独立した背景ブロックは一切作らない。 ---- */ .hero-a__intro-copy{ position: absolute; left: clamp(1.2rem, 4vw, 3rem); right: clamp(1.2rem, 4vw, 3rem); top: var(--hero-intro-top); z-index: 4; opacity: 0; transform: translateY(16px); animation: heroAIntroIn 2.0s var(--ease-in) forwards 5.2s; } @keyframes heroAIntroIn{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: translateY(0); } } .hero-a__intro-copy-inner{ max-width: var(--hero-intro-max-width); } .hero-a__intro-copy-inner .intro__eyebrow{ margin-bottom: 0.9rem; } .hero-a__intro-copy-inner h2{ font-family: var(--font-serif); font-weight: 700; font-size: var(--hero-intro-h2-size); line-height: 1.55; margin: 0 0 1.1rem; color: var(--text); } .hero-a__intro-copy-inner p{ font-size: 0.94rem; color: var(--text); opacity: 0.85; margin: 0; max-width: 52ch; } /* ---- overlay / intro-copy：Landscape(≥900px)用上書き（2026-09七次修正） ---- ソース順序上、必ずベースの.hero-a__overlay/.hero-a__intro-copyより 後ろに置くこと（同じ詳細度のため、後方の宣言が勝つ。実装当初、この @mediaを.hero-a__stage直後に置いていたためbase側のtop値に負けて Landscapeでも写真下用のtop位置が使われ、Introduction本文がhero-a 下端を大きく超えてclipする不具合が発生した。上のPortraitで写真は上・ 余白は下という縦構図から、写真は右・Introductionは左という横構図へ 切り替える。 ---- */ @media (min-width: 900px){ .hero-a__overlay{ /* 写真全体にわたる多段gradient（2026-09十二次修正）。 0%〜scrim-solid（Introduction文言の実際の右端、写真左端との 64px重なり構造は不変）までは承認済みprototypeのalpha(0.72)。 そこから先は写真内部を25%地点(quarter)・60%地点(mid)・ 右端(right-edge)の3点で区切り、0.72→0.35→0.15→0.07と 段階的に薄くしていく。写真右端でも0にはせず、写真全体に ごく薄い空気感を残す（写真全面を0.72で覆うわけではない）。 */ background: linear-gradient( to right, rgba(245, 244, 240, 0.72) 0%, rgba(245, 244, 240, 0.72) var(--hero-intro-scrim-solid), rgba(245, 244, 240, 0.35) var(--hero-veil-photo-quarter), rgba(245, 244, 240, 0.15) var(--hero-veil-photo-mid), rgba(245, 244, 240, 0.07) var(--hero-photo-right-edge) ); } .hero-a__intro-copy{ left: var(--hero-intro-left); right: auto; top: var(--hero-composition-top-pad); } } /* ---- eyebrowラベル（Introduction「Introduction」表記に使用） ---- */ .intro__eyebrow{ font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--accent); text-transform: uppercase; margin-bottom: 1rem; display: block; } /* ---- prefers-reduced-motion ---- 長いanimationは行わず、短い保持時間のあと素早く「文字は退場・ 写真は成長完了・Introductionは表示済み」の最終状態へ落ち着かせる （2026-09七次修正でIntroductionも即時表示に対応）。 ---- */ @media (prefers-reduced-motion: reduce){ .hero-a__photo-box{ opacity: 1; transform: none; width: var(--hero-photo-w-end); right: var(--hero-photo-right-end); top: var(--hero-photo-top-end); animation: none; } .hero-a__headline .line, .hero-a__sub{ opacity: 1; animation: none; } .hero-a__text{ animation: heroATextExitReduced 0.4s ease-in forwards 1.2s; } @keyframes heroATextExitReduced{ from{ opacity: 1; transform: translateX(0); } to{ opacity: 0; transform: translateX(40px); } } .hero-a__overlay{ animation: none; opacity: 1; } .hero-a__intro-copy{ animation: none; opacity: 1; transform: none; } }