/* * Harashina Standard — SHOP（正式実装） * * 確定済みprototype（Harashina_Web_Project/prototypes/hero-ab-test/ * a.html, css/variant-a.css）のSHOPセクションをそのまま正式移植した * もの。トップページでは商品個別カードを並べず、3カテゴリー * （自社オリジナル／RISE／TOWA）を1枚の横長ビジュアルとして見せ、 * 領域の境界だけを斜めにカットする（写真自体は回転させない）。 * 通常時は3等分、hoverした領域だけ横に広がり隣の2領域が狭くなる。 * * ---- JSを使わない実装について ---- * prototypeはjs/shop-visual.jsで、各zoneのleft/width/clip-pathを * 実ピクセル（固定40px skew）から動的に計算していた。本実装では、 * 3つのzoneすべてを.shop__visual全体（position:absolute;inset:0）に * 重ねて配置し、clip-path（polygon、container全体に対する%のみ）だけで * 各zoneの見える範囲を切り出す方式に変更した。境界のズレ量を固定pxでは * なくcontainer幅に対する%（3%）で表現しているため、どのzoneのclip-path * 座標も「同じ.shop__visual全体を基準にした%」のみで完結し、 * 追加のJS計算なしでhover時の境界移動を`:has()`＋CSS transitionだけで * 再現できる（承認済みの「hoverした領域は約40%、他は約30%ずつ」という * 挙動・0.5秒のtransitionは維持。写真自体をtransform:rotate()等で * 傾けることは一切していない）。 * * 色・フォントはtokens.css（--bg-alt/--text/--text-muted/--accent/ * --font-serif/--font-mono/--photo-frame/--ease-in）を参照する。 */ .shop{ /* ---- 背景交互配色＋vertical rhythm構造（比較試作・再修正） ---- SHOP自身の色（--bg）は変更していない。Business→SHOPの遷移は、 下の.shop::beforeという独立した疑似要素（--transition-inの 高さぶんのgradient専用）が担当する。 コンテンツ自身の上下solid余白は、新設した.shop__inner （front-page.php側に追加した最小限のwrapper。.shop__headと .shop__visualを1つに包むだけで、既存の見た目・レイアウトは 変更していない）のpadding-top/padding-bottomに分離した （同値、以前のpadding-bottom値をそのまま踏襲）。 SHOP→Informationの遷移はInformation側の::beforeが担当する。 SHOP自体のレイアウト・写真は変更していない。 */ --pad-h: clamp(1.2rem, 4vw, 3rem); --transition-in: clamp(4rem, 9vw, 6rem); background: var(--bg); padding: 0 var(--pad-h); } .shop::before{ content: ""; display: block; height: var(--transition-in); margin: 0 calc(-1 * var(--pad-h)); background: linear-gradient(to bottom, var(--bg-dark) 0%, var(--bg) 100%); } .shop__inner{ --own-pad: clamp(2.5rem, 6vw, 4rem); padding-top: var(--own-pad); padding-bottom: var(--own-pad); } .shop__head{ max-width: 1180px; margin: 0 auto 2rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .shop__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; } .shop__title{ font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin: 0.6rem 0 0; line-height: 1.5; color: var(--text); } .shop__all-link{ font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--text-muted); white-space: nowrap; padding-bottom: 0.3rem; border-bottom: 1px solid transparent; transition: color 0.3s var(--ease-in), border-color 0.3s var(--ease-in); } .shop__all-link:hover, .shop__all-link:focus-visible{ color: var(--accent); border-color: var(--accent); } /* ---- 3カテゴリーの横長ビジュアル ---- 各.shop__zoneは自分自身の担当範囲だけのleft/widthを持つ（container 全体に重ねてclip-pathだけで出し分ける方式ではない）。理由: 全zoneを 同じ全幅boxに重ねてclip-pathだけで切り出す方式だと、 .shop__zone-label（left:0;right:0;text-align:centerでzone自身の box中心に文字を置く仕組み）が「container全体の中心」を基準にしてしまい、 両端のzoneのラベルがそのzone自身の可視範囲の外に出て消えてしまう 不具合が生じたため。各zoneが実際に自分の担当幅ぶんのboxを持てば、 ラベルは常にそのzone自身の中心に正しく表示される。 境界の斜め量はcontainer幅の3%（skew）とし、hover時は境界位置 （left/width）と、そのzone自身のローカル座標系に変換したclip-path の両方を書き換える（数値はprototype同様、事前に計算した定数。 写真そのものの傾き＝rotateは一切使用していない）。 */ .shop__visual{ position: relative; max-width: 1180px; margin: 0 auto; height: clamp(320px, 32vw, 440px); overflow: hidden; /* 計算誤差の保険。通常は境界のclip-pathで隙間なく分かれる */ background: var(--photo-frame); } .shop__zone{ position: absolute; top: 0; height: 100%; overflow: hidden; text-decoration: none; color: #fff; transition: left 0.5s var(--ease-in), width 0.5s var(--ease-in), clip-path 0.5s var(--ease-in); } /* ---- 境界位置の補正について（2026-09二十三次修正） ---- read-only調査の結果、両端zone（自社オリジナル・TOWA）は「container端に 接する側が垂直・反対側だけ斜め」という形状のため、実際に画面上で 見える面積（可視幅）の平均が、境界を単純に33.3333%/66.6667%（＝ 均等3分割の名目位置）に置いただけでは、名目値からskew量の半分 （3%÷2=1.5%）だけずれてしまうことが判明した （自社オリジナルは実際より広く、TOWAは実際より狭く見える）。 中央zone（RISE）は両側とも斜めなので平行四辺形になり、このズレが 相殺されて名目値どおりに見えていた。 対策として、境界位置そのものを両方ともskew量の半分（1.5%）だけ 左へ平行移動させた。境界同士の間隔（＝中央zoneの幅）はそのまま なので中央zoneの実可視幅は変わらず、両端zoneの実可視幅の平均が 名目値と一致するようになる。skew量自体（3%）・斜めの角度・ visual全体のwidth/height・写真のtransform（rotateなし）は変更して いない。 */ /* 初期（通常時）: 境界は31.8333%/65.1667%（名目33.3333%/66.6667%から 1.5%左へ補正済み）。各zoneのclip-pathは「自分自身のbox」を基準にした 値（toLocal変換済み）。 */ .shop__zone:nth-of-type(1){ left: 0%; width: 34.8333%; clip-path: polygon(0% 0, 91.3876% 0, 100% 100%, 0% 100%); } .shop__zone:nth-of-type(2){ left: 31.8333%; width: 36.3334%; clip-path: polygon(0% 0, 91.7433% 0, 100% 100%, 8.2568% 100%); } .shop__zone:nth-of-type(3){ left: 65.1667%; width: 34.8333%; clip-path: polygon(0% 0, 100% 0, 100% 100%, 8.6124% 100%); } /* ---- hover/focus時: hoverした領域の実可視幅が約40%、他の2領域が 約30%ずつになるよう境界位置を補正済み（承認済みprototypeの挙動と 同じ比率）。:has()で「container内のどのzoneがhover/focusされて いるか」を判定し、3つのzoneすべてのleft/width/clip-pathを連動して 書き換える。 ---- */ /* ---- タップでのhover固定対策 ---- iOS Safari（WebKit）は、リンクではない
でも一度タップすると :hoverが「固定」されたままになる（次にどこか別の場所をタップする まで解除されない）。この固定は下の@media(max-width:820px)側の 打ち消しルールでは防げない: そちらは.shop__zone:hoverという zone番号を問わない汎用セレクタのためCSS詳細度が低く、下記の zone番号付きセレクタ（.shop__visual:has(.shop__zone:nth-of-type(N):hover)…） より詳細度が低いため、@media内であってもこちらの拡張ルールが 優先されてしまう。hoverそのものをマウス使用時のみに限定する ことで、詳細度の問題に関係なくタップでは発火しないようにする。 ---- */ @media (hover: hover) and (pointer: fine) and (min-width: 821px){ .shop__visual:has(.shop__zone:nth-of-type(1):hover) .shop__zone:nth-of-type(1), .shop__visual:has(.shop__zone:nth-of-type(1):focus-visible) .shop__zone:nth-of-type(1){ left: 0%; width: 41.5%; clip-path: polygon(0% 0, 92.7711% 0, 100% 100%, 0% 100%); } .shop__visual:has(.shop__zone:nth-of-type(1):hover) .shop__zone:nth-of-type(2), .shop__visual:has(.shop__zone:nth-of-type(1):focus-visible) .shop__zone:nth-of-type(2){ left: 38.5%; width: 33%; clip-path: polygon(0% 0, 90.9091% 0, 100% 100%, 9.0909% 100%); } .shop__visual:has(.shop__zone:nth-of-type(1):hover) .shop__zone:nth-of-type(3), .shop__visual:has(.shop__zone:nth-of-type(1):focus-visible) .shop__zone:nth-of-type(3){ left: 68.5%; width: 31.5%; clip-path: polygon(0% 0, 100% 0, 100% 100%, 9.5238% 100%); } .shop__visual:has(.shop__zone:nth-of-type(2):hover) .shop__zone:nth-of-type(1), .shop__visual:has(.shop__zone:nth-of-type(2):focus-visible) .shop__zone:nth-of-type(1){ left: 0%; width: 31.5%; clip-path: polygon(0% 0, 90.4762% 0, 100% 100%, 0% 100%); } .shop__visual:has(.shop__zone:nth-of-type(2):hover) .shop__zone:nth-of-type(2), .shop__visual:has(.shop__zone:nth-of-type(2):focus-visible) .shop__zone:nth-of-type(2){ left: 28.5%; width: 43%; clip-path: polygon(0% 0, 93.0233% 0, 100% 100%, 6.9767% 100%); } .shop__visual:has(.shop__zone:nth-of-type(2):hover) .shop__zone:nth-of-type(3), .shop__visual:has(.shop__zone:nth-of-type(2):focus-visible) .shop__zone:nth-of-type(3){ left: 68.5%; width: 31.5%; clip-path: polygon(0% 0, 100% 0, 100% 100%, 9.5238% 100%); } .shop__visual:has(.shop__zone:nth-of-type(3):hover) .shop__zone:nth-of-type(1), .shop__visual:has(.shop__zone:nth-of-type(3):focus-visible) .shop__zone:nth-of-type(1){ left: 0%; width: 31.5%; clip-path: polygon(0% 0, 90.4762% 0, 100% 100%, 0% 100%); } .shop__visual:has(.shop__zone:nth-of-type(3):hover) .shop__zone:nth-of-type(2), .shop__visual:has(.shop__zone:nth-of-type(3):focus-visible) .shop__zone:nth-of-type(2){ left: 28.5%; width: 33%; clip-path: polygon(0% 0, 90.9091% 0, 100% 100%, 9.0909% 100%); } .shop__visual:has(.shop__zone:nth-of-type(3):hover) .shop__zone:nth-of-type(3), .shop__visual:has(.shop__zone:nth-of-type(3):focus-visible) .shop__zone:nth-of-type(3){ left: 58.5%; width: 41.5%; clip-path: polygon(0% 0, 100% 0, 100% 100%, 7.2289% 100%); } } .shop__zone img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* 写真をやや暗くし、白文字ラベルの可読性を確保する（Businessの白veilとは 異なり、SHOPは常時写真が主役のため、控えめな単一トーンのみ）。 */ .shop__zone::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.05) 55%, rgba(0, 0, 0, 0.15) 100%); pointer-events: none; } .shop__zone-label{ position: absolute; left: 0; right: 0; bottom: clamp(1.2rem, 3vw, 2rem); display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; z-index: 1; } .shop__zone-name{ font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.35rem); letter-spacing: 0.04em; } .shop__zone-note{ font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; opacity: 0.85; } /* ---- スマホ（820px以下）: 斜め3分割・hover拡張をやめ、3カテゴリーを 縦に並べる。各写真は横長（高さ44vw基準）。PC用のclip-path・hover 拡張は完全に解除する。 ---- */ @media (max-width: 820px){ .shop__visual{ position: static; height: auto; background: none; display: flex; flex-direction: column; gap: 0.9rem; } .shop__zone, .shop__zone:nth-of-type(1), .shop__zone:nth-of-type(2), .shop__zone:nth-of-type(3), .shop__visual:has(.shop__zone:hover) .shop__zone, .shop__visual:has(.shop__zone:hover) .shop__zone:nth-of-type(1), .shop__visual:has(.shop__zone:hover) .shop__zone:nth-of-type(2), .shop__visual:has(.shop__zone:hover) .shop__zone:nth-of-type(3), .shop__visual:has(.shop__zone:focus-visible) .shop__zone, .shop__visual:has(.shop__zone:focus-visible) .shop__zone:nth-of-type(1), .shop__visual:has(.shop__zone:focus-visible) .shop__zone:nth-of-type(2), .shop__visual:has(.shop__zone:focus-visible) .shop__zone:nth-of-type(3){ position: relative; top: auto; left: auto; width: auto; height: 44vw; max-height: 260px; min-height: 170px; clip-path: none; } .shop__zone-label{ bottom: 1rem; } } @media (prefers-reduced-motion: reduce){ .shop__zone{ transition: none; } .shop__all-link{ transition: none; } }