/* ================================================================ KUNISTEIN — Brand Site CSS Architecture: @layer / OKLCH / Logical Props ================================================================ */ @layer reset, tokens, base, layout, components, utilities; /* ================================================================ RESET ================================================================ */ @layer reset { *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } } /* ================================================================ DESIGN TOKENS ================================================================ */ @layer tokens { :root { /* Primitive Colors (OKLCH) */ --gray-950: oklch(0.13 0 0); --gray-900: oklch(0.18 0 0); --gray-850: oklch(0.19 0 0); --gray-800: oklch(0.21 0 0); --gray-600: oklch(0.38 0 0); --warm-50: oklch(0.94 0.01 85); --warm-400: oklch(0.67 0.02 75); --warm-600: oklch(0.49 0.02 55); --gold-500: oklch(0.63 0.07 75); --gold-300: oklch(0.74 0.07 80); --gold-600: oklch(0.55 0.07 70); --white: oklch(1 0 0); --off-white: oklch(0.99 0 0); /* Semantic Colors */ --color-bg-primary: var(--gray-800); --color-bg-deep: var(--gray-900); --color-bg-darkest: var(--gray-950); --color-bg-section-alt: var(--gray-850); --color-text-primary: var(--warm-50); --color-text-secondary: var(--warm-400); --color-text-muted: var(--warm-600); --color-accent: var(--gold-500); --color-accent-light: var(--gold-300); --color-border: oklch(1 0 0 / 0.08); --color-border-light: oklch(1 0 0 / 0.12); /* Typography — unified to Shippori Mincho */ --font-en: 'Shippori Mincho', '游明朝', 'YuMincho', serif; --font-jp: 'Shippori Mincho', '游明朝', 'YuMincho', serif; --font-jp-sans: 'Shippori Mincho', '游明朝', 'YuMincho', serif; --font-size-hero-brand: clamp(3rem, 1.27rem + 8vw, 7rem); --font-size-hero-tagline: clamp(1.1rem, 0.81rem + 2.5vw, 1.6rem); --font-size-section-title: clamp(1.4rem, 0.87rem + 2.5vw, 2.4rem); --font-size-body: clamp(0.875rem, 0.8rem + 1.2vw, 1rem); --font-size-small: clamp(0.75rem, 0.7rem + 1vw, 0.85rem); --font-size-label: clamp(0.65rem, 0.6rem + 0.9vw, 0.75rem); /* Spacing */ --section-padding: clamp(5rem, 12vw, 10rem); --container-width: 75rem; --container-padding: clamp(1.5rem, 5vw, 3.75rem); /* Header height (padding 4rem × 2 + logo 2rem ≈ 10rem). Used to vertically center hero content below the fixed header. */ --header-height: 10rem; --hero-content-offset: calc(var(--header-height) / 2); /* Motion */ --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --transition-base: 0.6s var(--ease-out-expo); --transition-slow: 1.2s var(--ease-out-expo); /* === Global Stacking Layers === セクション間 / オーバーレイ間の前後関係を決めるグローバル z-index。 小さい順に記述。section 内のローカル重なり順 (0〜20 など) は対象外。 新しいレイヤーを足すときは「どの値の上 / 下に置くか」を意識して間に挟む。 collection-stack 直上の cta-v2 のように +1 ステップ運用も可。 */ --z-hero-tagline: 998; --z-hero-copy: 999; --z-hero-video-window: 1000; --z-bg-cover: 1050; --z-collection-stack: 1100; --z-cta-v2: 1101; --z-craftsmanship: 1500; --z-craftsmanship-stack: 1501; --z-gallery: 1600; --z-footer: 3000; --z-mobile-menu: 9500; --z-header: 9999; } } /* ================================================================ BASE ================================================================ */ @layer base { html { scrollbar-gutter: stable; /* iOS Safari の text auto-inflation を無効化。 未指定だと長い本文ブロックが自動拡大されて中途半端に折り返す。 */ text-size-adjust: 100%; -webkit-text-size-adjust: 100%; /* position: fixed の cta-v2__slider が負 inset で viewport 外に はみ出した時、body の overflow-x: clip だけでは右側に水平スクロール が出るブラウザがあるので html 側にも clip を効かせる。 */ overflow-x: clip; } body { font-family: var(--font-jp); font-weight: 300; font-size: var(--font-size-body); line-height: 2; color: var(--color-text-primary); background-color: oklch(0.976 0 0); /* overflow-x: clip で brand-intro の negative margin をクリップする。 hidden にすると iOS Safari が body をスクロールコンテナ扱いして hero 内の position: sticky が壊れる (hero-bg が流れて下に白が出る)。 clip はスクロールコンテナを作らないので sticky が正常動作する。 */ overflow-x: clip; } a { color: inherit; text-decoration: none; } img { max-inline-size: 100%; block-size: auto; display: block; } ul { list-style: none; } em { font-style: normal; color: var(--color-accent-light); } ::selection { background-color: oklch(0.63 0.07 75 / 0.3); color: var(--color-text-primary); } :is(h1, h2, h3, h4) { text-wrap: balance; } p { text-wrap: pretty; } /* === 全画面 white cover ================================================== hero を抜けたら (is-past-hero = gallery 到達) 不透明化し、hero 由来の position: fixed 要素 (tagline z-998 / scatter-pics z-5 / video-window z-1000 / copy z-999) を完全マスクする。 z-1050: tagline / video-window / copy より上、gallery (1600) / craftsmanship (1500 SP/TB) / collection-stack (1100) より下 → 各セクション in viewport 時はそれぞれの演出が cover の上に乗る。 */ .bg-cover { position: fixed; inset: 0; z-index: var(--z-bg-cover); background-color: oklch(0.976 0 0); pointer-events: none; opacity: 0; transition: opacity 0.6s cubic-bezier(0.79, 0.01, 0.03, 1); } .bg-cover.is-active { opacity: 1; } } /* ================================================================ COMPONENTS ================================================================ */ @layer components { /* ---------------------------------------------------------------- HEADER / NAVIGATION ---------------------------------------------------------------- */ .header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-header); padding-block: 4rem; padding-inline: clamp(2rem, 6vw, 5rem); mix-blend-mode: difference; } /* スクロールダウンで上へスライドして隠れる / スクロールアップで降ってくる */ @media (prefers-reduced-motion: no-preference) { .header { transition: translate 0.45s var(--ease-out-expo, ease); } } .header.is-hidden { translate: 0 -110%; } /* SP/TB スクロール性能対策: position:fixed の常時表示要素に mix-blend-mode を付けると、iOS Safari は スクロール毎にヘッダー背後の全画面を再合成し、コンポジタ高速経路を失って ページ全体が「カクン」と止まる主因になる。SP/TB では blend を切り、白い ロゴ/ナビの可読性は上部の静的グラデ scrim で確保する (scrim は再合成コスト ゼロ)。PC では従来どおり difference blend を維持。 */ @media (width < 1024px) { .header { mix-blend-mode: normal; background-image: linear-gradient( to bottom, oklch(0 0 0 / 0.30), oklch(0 0 0 / 0) ); } /* 同じ理由 (iOS Safari の毎フレーム再合成によるスクロール停止) で、画面に 出てくる difference blend を SP/TB では全て normal にする。いずれも白文字 (color: white) で、背後が暗い hero / gallery / cta なので blend なしでも 可読性は保たれる。PC では各要素の difference を維持。 */ .hero__copy, .hero__copy-en, .gallery__text-group, .cta__title, .cta__lead { mix-blend-mode: normal; } } .header__inner { display: flex; align-items: center; justify-content: space-between; inline-size: 100%; } .header__nav { display: none; transition: opacity 0.3s var(--ease-out-expo, ease), visibility 0.3s; } /* Scroll すると nav だけフェードアウト（ロゴ・バーガーは残る） */ .header.is-scrolled .header__nav { opacity: 0; visibility: hidden; pointer-events: none; } .header__nav-list { display: flex; gap: clamp(1rem, 2vw, 2rem); list-style: none; margin: 0; padding: 0; font-family: var(--font-en); font-size: 1rem; letter-spacing: 0.12em; } .header__nav-list li { overflow: hidden; } .header__nav-list a { display: inline-block; color: oklch(1 0 0); text-decoration: none; transition: opacity var(--transition-base); transform: rotate(7deg) translate3d(0, 100%, 0); transform-origin: 0% 100%; } .header__nav-list a:hover { opacity: 0.7; } .header__logo { display: inline-block; overflow: hidden; color: var(--color-text-primary); transition: opacity var(--transition-base); } .header__logo:hover { opacity: 0.7; } .header__logo-img { block-size: 2rem; inline-size: auto; display: block; filter: brightness(0) invert(1); transform: rotate(7deg) translate3d(0, 100%, 0); transform-origin: 0% 100%; } .header__burger { display: inline-flex; align-items: center; gap: 0.75rem; background: none; border: none; cursor: pointer; padding: 0; z-index: 1001; } .header__burger-label { font-family: var(--font-en); font-size: 0.875rem; font-weight: 400; letter-spacing: 0.1em; color: oklch(1 0 0); /* Menu / Close の文字幅差を吸収して dot grid の位置がブレないよう 固定幅。メニュー開閉で gap がガタつくのを防ぐ。 */ inline-size: 3.2em; text-align: end; } .header__burger-grid { display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(3, auto); justify-content: center; align-content: center; gap: 0.35rem; inline-size: 2.5rem; block-size: 2.5rem; } .header__burger-dot { display: block; inline-size: 0.28rem; block-size: 0.28rem; aspect-ratio: 1 / 1; background-color: oklch(1 0 0); transition: scale 0.3s var(--ease-out-expo), opacity 0.3s ease; } .header__burger--active .header__burger-dot { scale: 0.6; opacity: 0.5; } /* active 状態: 中央 (5) と四隅 (1, 3, 7, 9) が拡大、辺 4 点 (2, 4, 6, 8) は scale 0.6 のままサブ扱い。 */ .header__burger--active .header__burger-dot:nth-child(5) { scale: 1.4; opacity: 1; } .header__burger--active .header__burger-dot:is(:nth-child(1), :nth-child(3), :nth-child(7), :nth-child(9)) { scale: 1.2; opacity: 1; } @media (width >= 1024px) { .header__nav { display: flex; margin-inline-start: auto; margin-inline-end: clamp(1rem, 2vw, 2rem); } } /* ---------------------------------------------------------------- MOBILE MENU ---------------------------------------------------------------- */ .mobile-menu { position: fixed; inset: 0; /* bg-cover より高くしてメニュー開時に最前面に出す。header より下を維持。 */ z-index: var(--z-mobile-menu); background-color: oklch(0.13 0 0 / 0.97); backdrop-filter: blur(0.75rem); display: flex; align-items: center; justify-content: center; /* header 高さぶんを上に確保。SP (header padding 2rem) でも PC (4rem) でも バーガーに被らない値を fluid で指定。下は中央揃え content を上寄りに 押し上げるため 12vh を base 余白に (PC は別途 22vh 前後でさらに上)。 */ padding-block: clamp(7rem, 14vw, 11rem) 12vh; /* SP/TB/PC 共通で両軸スクロール不可。viewport に収まらない要素 (hand の負 inset、 SP/TB の 1.5x scale、横方向の scale はみ出し等) は両軸 hidden で単純クリップ。 */ overflow: hidden; overscroll-behavior: contain; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; } .mobile-menu--active { opacity: 1; visibility: visible; } /* 5 項目を 3 + 2 の 2 行レイアウトに。各 item は content 幅、 mobile-menu__break (3 番目と 4 番目の間に挿入した空 li) が flex-basis: 100% で行を強制改行。justify-content: center で どちらの行も中央寄せされる。 */ .mobile-menu__list { display: flex; flex-wrap: wrap; justify-content: center; /* 横 gap は 0 にして margin/padding で間隔を作る (= 中央に縦線を置くため)。 */ gap: 0.5rem 0; text-align: center; } .mobile-menu__item { overflow: hidden; flex: 0 0 auto; } /* 同じ行内の隣接 item 間に縦線。__break は __item ではないので、 __item + __item セレクタは行頭 (item 1 / Experience) を自動的にスキップ。 border ではなく ::before で短めの縦棒を作って item 中央に置く。 */ .mobile-menu__item + .mobile-menu__item { position: relative; margin-inline-start: 1.75rem; padding-inline-start: 1.75rem; } /* PC: 隣接 item 間隔を広げる。1024px で 2.5rem、1440px で 4rem。 */ @media (width >= 1024px) { .mobile-menu__item + .mobile-menu__item { margin-inline-start: clamp(2.5rem, -1.19rem + 5.77vw, 4rem); padding-inline-start: clamp(2.5rem, -1.19rem + 5.77vw, 4rem); } /* 中央揃えのまま下余白を広げて、list の見た目位置を viewport の上寄りへ。 */ .mobile-menu { padding-block-end: clamp(18vh, 22vh, 28vh); } } /* SP (< 768px): 1列縦積み。横並びの margin/padding と縦区切りを無効化、 __break (flex-basis: 100% 改行用) も非表示。 */ @media (width < 768px) { .mobile-menu__list { flex-direction: column; gap: 0.25rem; } .mobile-menu__item + .mobile-menu__item { margin-inline-start: 0; padding-inline-start: 0; } .mobile-menu__item + .mobile-menu__item::before { display: none; } .mobile-menu__break { display: none; } } .mobile-menu__item + .mobile-menu__item::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 50%; translate: 0 -50%; inline-size: 1px; block-size: 60%; background-color: oklch(1 0 0 / 0.2); } .mobile-menu__break { flex-basis: 100%; block-size: 0; overflow: hidden; } /* footer__nav-list と同じ JP + EN 縦並び。dark BG なので色は反転。 アニメーションは collection h2 と同じマスク方式: __jp / __en が overflow hidden の枠、内側 .mobile-menu__line が translateY 100% → 0 で下から 上に上がってくる。 */ .mobile-menu__item a { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding-block: 0.8em; transition: color 0.3s ease; } /* テキストの長さにマスク枠を揃える: inline-block + width: max-content。 anchor 側 align-items: center で各行はそれぞれ中央寄せされる。 */ .mobile-menu__jp, .mobile-menu__en { display: inline-block; inline-size: max-content; overflow: hidden; line-height: 1.4; } .mobile-menu__jp { font-family: var(--font-jp); font-size: clamp(1.125rem, 0.75rem + 0.78vw, 1.25rem); font-weight: 600; letter-spacing: 0.1em; color: var(--color-text-primary); } .mobile-menu__en { font-family: var(--font-en); font-size: clamp(0.75rem, 0.65rem + 0.5vw, 0.8125rem); font-weight: 400; letter-spacing: 0.15em; color: var(--warm-400); } .mobile-menu__line { display: block; transform: translate3d(0, 110%, 0); transition: transform 1s cubic-bezier(0.87, 0, 0.13, 1); } .mobile-menu--active .mobile-menu__line { transform: translate3d(0, 0, 0); } /* 各 item の cascade delay。--item-delay を CSS 変数で持たせて、 jp は item-delay、en は item-delay + 0.08s で適用される。 nth-child(4) は break li なので飛ばし、Experience(5) と Contact(6) を 1-3 から 0.08s 刻みで連続させる。 */ .mobile-menu__item:nth-child(1) { --item-delay: 0.1s; } .mobile-menu__item:nth-child(2) { --item-delay: 0.18s; } .mobile-menu__item:nth-child(3) { --item-delay: 0.26s; } .mobile-menu__item:nth-child(5) { --item-delay: 0.34s; } .mobile-menu__item:nth-child(6) { --item-delay: 0.42s; } .mobile-menu--active .mobile-menu__jp .mobile-menu__line { transition-delay: var(--item-delay, 0s); } .mobile-menu--active .mobile-menu__en .mobile-menu__line { transition-delay: calc(var(--item-delay, 0s) + 0.08s); } .mobile-menu__item a:hover { color: var(--color-accent-light); } /* メニュー下部の SNS アイコン (Instagram + Facebook)。 */ .mobile-menu__sns { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-block-start: 1.5rem; } .mobile-menu__sns-link { display: inline-flex; inline-size: 36px; block-size: 36px; transition: opacity var(--transition-base); } .mobile-menu__sns-link:hover { opacity: 0.7; } .mobile-menu__sns-icon { inline-size: 100%; block-size: 100%; display: block; } /* メニュー画面下端に viewport 幅いっぱいで配置する hand 画像。 SNS と被るので底辺より少し下へオフセットさせる。 */ .mobile-menu__hand { position: absolute; inset-inline: 0; inset-block-end: -2.5rem; display: block; pointer-events: none; } .mobile-menu__hand img { inline-size: 100%; block-size: auto; display: block; } /* SP + TB (<1024): hand を 1.5x にスケール。transform 使用なので layout は 変わらず、底辺中央 origin で上方向に大きくなる (inset-block-end: -2.5rem 維持)。 既存 @2x 画像で 1.5x 描画は 1.3x 密度相当 — 十分シャープ。 */ @media (width < 1024px) { .mobile-menu__hand img { transform: scale(1.5); transform-origin: center bottom; } } /* ---------------------------------------------------------------- SHARED: TEXT LINK ---------------------------------------------------------------- */ .text-link { display: inline-flex; align-items: center; gap: 0.8rem; margin-block-start: 2.5rem; font-family: var(--font-en); font-size: var(--font-size-small); letter-spacing: 0.1em; color: var(--color-text-secondary); transition: color var(--transition-base); } .text-link:hover { color: var(--color-accent-light); } .text-link__arrow { display: inline-block; transition: translate var(--transition-base); } .text-link:hover .text-link__arrow { translate: 0.375rem 0; } /* ---------------------------------------------------------------- SHARED: FADE-IN ANIMATION ---------------------------------------------------------------- */ .fade-in { opacity: 0; translate: 0 1.875rem; transition: opacity 0.9s var(--ease-out-quart), translate 0.9s var(--ease-out-quart); } .fade-in--visible { opacity: 1; translate: 0 0; } .fade-in--visible.fade-in:nth-child(2) { transition-delay: 0.1s; } .fade-in--visible.fade-in:nth-child(3) { transition-delay: 0.2s; } .fade-in--visible.fade-in:nth-child(4) { transition-delay: 0.3s; } /* ---------------------------------------------------------------- SEC.1: HERO ---------------------------------------------------------------- */ .hero { position: relative; z-index: 3; inline-size: 100%; /* tagline-group が独立 section 化されたので hero は scenery 用の 1 viewport だけ。 hero__sticky の pin range = 0 (hero.height == sticky.height で実質 pin なし)。 scenery は普通に上にスクロールして消える。 */ min-block-size: 100svh; background-color: oklch(0.20 0.005 68); } /* ---------------------------------------------------------------- SEC.2: BRAND-INTRO (video + text) - bg-sticky: 100lvh の video bg を pin - hero__video-text: natural flow で上を流れるテキスト/写真群 - craftsmanship 側の margin-block-start: -100svh で末端 100lvh が overlap される ---------------------------------------------------------------- */ .brand-intro { position: relative; /* z-index は auto。stacking context を作らないことで、子の hero__video-text (z-1001) を root レベルで効かせて hand photo を craftsmanship (z-20) の 上に表示できるようにする。bg-sticky (z-0) は root で z-0 → craftsmanship の 下に潜るので video の覆いは維持。 */ z-index: auto; z-index: 2; /* sticky pin range = min-block-size - 100lvh。 「100svh + 固定px」にすることで pin range（= スクロール距離 = 動画セクション 下部の余白）を viewport 高さに依存しない一定値 (1900px) にする。 100svh は動画を覆うのに必要な分なので残す。1900px は 1024×600 (1800px) と 1920×1080 (1944px) で違和感のなかったスクロール距離の中間値。 */ /* min-block-size: calc(100svh + 1900px); */ background-color: oklch(0.20 0.005 68); overflow-y: clip; } /* sticky 用 wrapper。flow には乗せない (margin-block-end: -100lvh) */ .brand-intro__bg-sticky { position: sticky; inset-block-start: 0; inset-inline: 0; block-size: 100lvh; margin-block-end: -100lvh; z-index: 0; /* 動画の真後ろを上の section と同じダーク色で塗り、境目の隙間を埋める。 */ background-color: oklch(0.20 0.005 68); } /* brand-intro 内では .hero__video-window は bg-sticky 内の absolute box として動く。 既存の position:absolute inset:0 がそのまま使える。 */ .hero__sticky { position: sticky; inset-block-start: 0; inline-size: 100%; block-size: 100lvh; display: grid; grid-template: 1fr / 1fr; overflow: hidden; } .hero__sticky > * { grid-area: 1 / 1; } .hero__bg { inline-size: 60vw; block-size: 100lvh; justify-self: start; overflow: hidden; position: relative; } /* hero__bg (60vw 左) の右側 40vw に bg5 / bg6 を上下分割で配置。 */ .hero__bg-side { inline-size: 40vw; block-size: 100lvh; justify-self: end; display: grid; grid-template-rows: 1fr 1fr; overflow: hidden; position: relative; } /* TB / SP では bg5 / bg6 を非表示。PC レイアウト専用。 */ @media (width < 1024px) { .hero__bg-side { display: none; } } .hero__bg-side-item { overflow: hidden; position: relative; } .hero__bg-side-item img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; display: block; } /* PC: hero scroll 開始時 (is-hero-scrolled) に hero__copy を position:fixed 化のみ。 3方向 wipe-out (mask + is-hero-scrolled の bg/bg-side fixed) は廃止 → tagline は natural flow で下からスクロールしてくる方式に変更。 */ @media (width >= 1024px) { .hero.is-hero-scrolled .hero__copy, .hero.is-hero-scrolled .hero__copy-en { position: fixed; } } /* hero__bg の scroll 連動減光は廃止 (tagline 独立 section 化で不要)。 */ /* 4枚の picture を全画面で重ねて opacity crossfade。初期は全て opacity 0、 keyframe で 4枚が順番に visible になる (1サイクル 24s)。 */ .hero__bg picture { position: absolute; inset: 0; display: block; opacity: 0; } .hero__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; /* 各 picture 内の img に slow zoom (Ken Burns) を当てる。 transform-origin は中央。crossfade 中も zoom は連続的に進む。 */ transform-origin: center center; } /* PC の hero→tagline wipe-out アニメ用。--tagline-progress (0→1) を 0%→120% に変換した値が入る。 */ @property --hero-wipeout { syntax: ''; initial-value: 0%; inherits: false; } /* hero スクラブ用: scroll progress を JS が .hero に書き込む。 0→1 の数値で、CSS 側で transform / opacity / mask に変換して使う。 */ @property --tagline-progress { syntax: ''; initial-value: 0; inherits: true; } /* tagline image / text の遅延出現用。--tagline-progress の後半でようやく 0→1 になる遅延付き progress (JS 側で計算)。 */ @property --tagline-reveal { syntax: ''; initial-value: 0; inherits: true; } /* tagline reveal=1 以降のスクロール量 (px)。tagline image / text の transform に -px で乗せて疑似 natural-scroll (上方向へ流す)。 hero__sticky の中で sticky-pin される tagline を、視覚的に scroll と 一緒に動いてるように見せるためのトリック。 */ @property --tagline-natural-y-px { syntax: ''; initial-value: 0px; inherits: true; } /* hero__bg / bg-side の mask wipe out 用。 として登録することで transition でアニメーション可能になり、scroll back 時も逆再生される。 */ @property --hero-wipeout { syntax: ''; initial-value: 0%; inherits: false; } /* mahora-style: 4枚の hero__bg picture を crossfade で循環。 - 1サイクル 24s、各画像が 6s ずつターン - opacity 0 → 1 (1s) → 1 (4s) → 0 (1s) → 0 (18s 待機) - img には slow Ken Burns (scale 1 → 1.08 を 7s かけて) */ @media (prefers-reduced-motion: no-preference) { .hero__bg picture { animation: heroCrossfade 24s infinite linear; } .hero__bg picture img { animation: heroKenBurns 24s infinite linear; } /* 6s ごとに 4枚が順番にフェードイン。delay で位相をずらす。 picture:nth-child(1) は -1s で開始 (= 即座に fade-in 完了状態) → ページロード時から visible。 */ .hero__bg picture:nth-child(1), .hero__bg picture:nth-child(1) img { animation-delay: -1s; } .hero__bg picture:nth-child(2), .hero__bg picture:nth-child(2) img { animation-delay: 5s; } .hero__bg picture:nth-child(3), .hero__bg picture:nth-child(3) img { animation-delay: 11s; } .hero__bg picture:nth-child(4), .hero__bg picture:nth-child(4) img { animation-delay: 17s; } @keyframes heroCrossfade { 0% { opacity: 0; } 4.17% { opacity: 1; } /* 1s でフェードイン完了 */ 25% { opacity: 1; } /* 6s 地点まで visible */ 29.17% { opacity: 0; } /* 7s でフェードアウト完了 */ 100% { opacity: 0; } } @keyframes heroKenBurns { 0% { transform: scale(1); } 29.17% { transform: scale(1.08); } /* visible 区間中だけ zoom 進む */ 100% { transform: scale(1.08); } /* フェードアウト後は据え置き */ } } .hero__gallery { inline-size: 100%; display: grid; } .hero__gallery-row { grid-area: 1 / 1; inline-size: 100%; block-size: 100lvh; overflow: hidden; } .hero__gallery-row--pair { display: grid; grid-template-columns: 50.05% 50.05%; z-index: 1; } .hero__gallery-item { overflow: hidden; will-change: clip-path; min-inline-size: 0; margin-inline-end: -1px; transition: clip-path 1s linear; } .hero__parallax { inline-size: 120%; block-size: 120%; margin-inline-start: -10%; margin-block-start: -10%; } .hero__parallax img { inline-size: 100%; block-size: 100%; object-fit: cover; } /* === 2nd row === */ .hero__gallery-row--pair .hero__gallery-item:first-child { clip-path: inset(0 0 100% 0); } .hero__gallery-row--pair .hero__gallery-item:last-child { clip-path: inset(100% 0 0 0); } /* === Cover row === */ .hero__gallery-row--cover { display: block; z-index: 2; } .hero__gallery-row--cover .hero__gallery-item { block-size: 100%; } .hero__gallery-row--cover .hero__parallax { inline-size: 100%; block-size: 110%; margin-inline-start: 0; margin-block-start: 0; } .hero__gallery-row--cover .hero__parallax img { object-position: top center; } .hero__gallery-row--cover .hero__gallery-item { clip-path: inset(100% 0 0 0); } /* Visible state */ .hero__gallery-row--pair.is-visible .hero__gallery-item, .hero__gallery-row--cover.is-visible .hero__gallery-item { clip-path: inset(0 0 0 0); } /* === Filmstrip (scroll-driven 5-column layout) === */ .hero__filmstrip { position: absolute; inset: 0; z-index: 10; opacity: 0; pointer-events: none; } .hero__filmstrip-item { position: absolute; overflow: hidden; } .hero__filmstrip-item img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; } /* === Video window (full-screen opacity fade-in) === 旧: clip-path 中央マスク開きの登場演出 新: マスクをやめ、フルスクリーンのまま opacity だけでふわっとフェードイン。 philosophy-stage の overlay fade に揃えたソフトな入り方。 */ /* brand-intro__bg-sticky (100lvh sticky) の中で absolute fill。 brand-intro section が viewport に入った瞬間から見える。 */ .hero__video-window { position: absolute; inset: 0; z-index: var(--z-hero-video-window); opacity: 1; pointer-events: none; /* 上の tagline section と同じダーク色を動画の真後ろに敷き、セクション境目の サブピクセル隙間から body の白 (oklch(0.976 0 0)) が透けるのを防ぐ。 */ background-color: oklch(0.20 0.005 68); } .hero__video { inline-size: 100vw; block-size: 100lvh; object-fit: cover; display: block; } .hero__video-blur { position: absolute; inset: 0; backdrop-filter: blur(1px); opacity: 1; pointer-events: none; } .hero__video-overlay { position: absolute; inset: 0; background-image: linear-gradient( to top right, oklch(0 0 0 / 0.85), oklch(0.32 0.018 70 / 0.55) ); opacity: 1; pointer-events: none; } /* PC: hero__sticky の外に出して natural flow。ページスクロールに 1:1 で流れる。 padding-block-start: tagline と「ひとつの頂へ」の間の distance。 padding-block-end: 絶対配置の写真 (hand / brand-intro が text-inner より下) が セクション末尾を超えないよう、余白を確保。 */ .hero__video-text { position: relative; z-index: 1001; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-inline: var(--container-padding); padding-block: 250px 20px; opacity: 1; pointer-events: auto; } .hero__video-text-inner { display: flex; flex-direction: column; gap: 4.2em; /* craftsmanship__inner と統一: 固定 inline-size + translate -15rem で 両ブロックの content 左端を完全に揃える。48rem は craftsmanship タイトル 「削ぎ落とした先に、」(4.8rem × 9文字 × ls 0.12em) を収めるための値。 */ inline-size: 48rem; max-inline-size: calc(100vw - var(--container-padding) * 2); } .hero__video-heading { display: flex; flex-direction: column; gap: 0.4em; /* タイトル＋サブタイトル本体だけ左へ ~240px シフト (本文は動かさない)。 1024〜1440px の narrow PC では下の @media で -5rem に上書きして画面外に 逃さないようにする。 */ translate: -15rem 0; } /* PC narrow (1024〜1440): -15rem だと heading 左端が viewport を出るので シフト量を -5rem (-80px) に縮める。1440px 以上は基本ルールに戻る。 */ @media (width >= 1024px) and (width < 1440px) { .hero__video-heading { translate: -5rem 0; } } .hero__video-title { font-family: var(--font-jp); /* SP 2.8rem (44.8px) → PC 4.8rem (76.8px) の fluid。スロープ 3vw でゆるやかに スケールさせ 1440px で上限に達するので、1024px 時点では約 4rem (64px) に 自然に縮む。 */ font-size: clamp(2.8rem, 2.1rem + 3vw, 4.8rem); font-weight: 600; letter-spacing: 0.15em; line-height: 1.6; color: oklch(1 0 0); } .hero__video-subtitle { font-family: var(--font-en); font-size: 1rem; font-weight: 400; letter-spacing: 0.2em; color: oklch(1 0 0 / 0.7); } .hero__video-photos { position: absolute; inset-block: 0; inline-size: 1920px; inset-inline-start: 50%; margin-inline-start: -960px; pointer-events: none; } .hero__video-photo { position: absolute; display: block; overflow: hidden; filter: drop-shadow(10px 10px 18px oklch(0 0 0 / 0.35)); } .hero__video-photo img { inline-size: 120%; block-size: 120%; margin-inline-start: -10%; margin-block-start: -10%; object-fit: cover; display: block; } /* 左上: mountain — left 160px, 80px below title (旧 leather スロット)。 縦比は元画像 700x992 に合わせる。 */ .hero__video-photo--mountain { inset-inline-start: 160px; inline-size: 400px; aspect-ratio: 700 / 992; } /* pocket は SP 限定。PC では tagline-text の右下に元の decoration として表示するので brand-intro 側の複製は隠す。 */ .hero__video-photo--pocket { display: none; } /* 右下: craftman — 400x280, right 184px, 280px below belt */ .hero__video-photo--craftman { inset-inline-end: 184px; inline-size: 400px; aspect-ratio: 400 / 280; } /* 左下: hand — 300x200, left 400px, 144px below text-inner bottom */ .hero__video-photo--hand { inset-inline-start: 400px; inline-size: 300px; aspect-ratio: 300 / 200; } .hero__video-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.8rem; inline-size: 240px; padding-block: 0.5rem; font-family: var(--font-jp); font-size: 1rem; font-weight: 600; letter-spacing: 0.1em; color: oklch(1 0 0); border-block-end: 1px solid oklch(1 0 0); transition: opacity 0.4s var(--ease-out-expo); } .hero__video-link:hover { opacity: 0.6; } .hero__video-link__label { color: oklch(1 0 0); } .hero__video-link-arrow-wrap { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 24px; background-color: oklch(1 0 0); border-radius: 9999px; flex-shrink: 0; } .hero__video-link-arrow { display: block; inline-size: 21px; block-size: auto; filter: invert(1); } .hero__video-text-group { display: flex; flex-direction: column; gap: 1.8em; } /* 3 つの .hero__video-text-group をラップして「本文全体」を 1 ブロック扱いに。 max-content + align-self:center で text-inner (48rem) 内に中央寄せ。 各 group は body の幅 (=最長行) に揃うので、group 間で左端ズレが起きない。 text-align: start は維持し本文は左寄せのまま。 */ .hero__video-text-body { display: flex; flex-direction: column; gap: 4.2em; inline-size: max-content; max-inline-size: 100%; align-self: center; } .hero__video-text p { font-family: var(--font-jp); font-size: 1rem; font-weight: 400; line-height: 2.2; color: oklch(1 0 0); letter-spacing: 0.05em; text-align: start; text-wrap: pretty; } .hero__video-text em { font-style: normal; color: var(--color-accent-light); } /* Text elements: slide up from below through an overflow-hidden slot (matches tagline) */ .hero__video-text .hero__video-title, .hero__video-text .hero__video-subtitle, .hero__video-text .hero__video-text-group p { overflow: hidden; } /* natural flow なので line / link は常に visible (reveal アニメ撤廃) */ .hero__video-text__line { display: block; } /* hero title (「ひとつの頂へ。」) だけ philosophy 同型の行 rise reveal を再付与。 親 .hero__video-title は overflow:hidden (上の 1205) でマスク済み、 .is-revealed は cinematic 演出 (triggerReveals) が付与する。 */ .hero__video-title .hero__video-text__line { transform: translate3d(0, 100%, 0); transition: transform 1.2s cubic-bezier(0.87, 0, 0.13, 1); } .hero__video-title.is-revealed .hero__video-text__line { transform: translate3d(0, 0, 0); } @media (prefers-reduced-motion: reduce) { .hero__video-title .hero__video-text__line { transform: none; transition: none; } } .hero__video-text .hero__video-link { opacity: 1; } /* natural flow なので photo は常時 visible (wipe アニメ撤廃) */ .hero__video-text .hero__video-photo { clip-path: inset(-60px); } .hero__video-window.is-cinematic .hero__video-blur { opacity: 1; } .hero__video-window.is-cinematic .hero__video-overlay { opacity: 1; } .hero__video-text.is-visible { opacity: 1; pointer-events: auto; } /* hero__video-window を scroll で opacity 0 → 1 にふわっとフェードイン。 画面全体で fade させるには、 video-window が viewport top に pin されている ことが前提。 .brand-intro__bg-sticky は position:sticky+block-size:100lvh で、 brand-intro の top が viewport top に達した瞬間 (= entry 100%) に pin する。 - timeline は .brand-intro の view-timeline をそのまま使う (descendant の video-window から名前で見えるので timeline-scope 不要)。 - animation-range は "pin され始める entry 100% → cover 30% (pin 後 ~80lvh)" に設定。 これで fade が走るタイミングは常に video-window が viewport を 完全に覆っている状態なので、 画面全体にふわっと現れる。 - 非対応ブラウザは @supports でスキップ、 既存の opacity: 1 をそのまま採用。 */ @supports (animation-timeline: view()) { .brand-intro { view-timeline-name: --brand-intro-tl; } .hero__video-window { opacity: 0; animation: hero-video-fade-in linear forwards; animation-timeline: --brand-intro-tl; animation-range: entry 100% cover 30%; will-change: opacity; } } @keyframes hero-video-fade-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { @supports (animation-timeline: view()) { .hero__video-window { animation: none; opacity: 1; } } } /* hero__copy: 時間ベースで自動フェードアウト。 base は opacity 1、is-hero-scrolled で opacity 0 へ 1.4s transition。 戻り (class 削除) は同じ transition で 1 に戻る。 */ .hero__copy { position: absolute; top: 50%; left: 50%; translate: -50% -50%; writing-mode: vertical-rl; font-family: 'Shippori Mincho', serif; /* font-size: clamp(2rem, calc(2rem + (100vw - 1024px) / 416px * 0.8rem), 2.8rem); */ font-size: clamp(2rem, 2rem + (100vw - 1024px) / 416 * 12.8, 2.8rem); font-weight: 400; line-height: 1.8; letter-spacing: 0.2em; color: var(--white); z-index: var(--z-hero-copy); mix-blend-mode: difference; margin: 0; white-space: nowrap; opacity: 1; transition: opacity 1.4s cubic-bezier(0.79, 0.01, 0.03, 1); } .hero.is-hero-scrolled .hero__copy { opacity: 0; } .hero__copy-en { position: absolute; inset-block-end: 32px; inset-inline-start: calc(60vw + 32px); font-family: var(--font-en); font-size: 12px; line-height: 1.5; letter-spacing: 0.1em; color: var(--white); mix-blend-mode: difference; z-index: var(--z-hero-copy); margin: 0; white-space: nowrap; opacity: 1; transition: opacity 1.4s cubic-bezier(0.79, 0.01, 0.03, 1); } .hero.is-hero-scrolled .hero__copy-en { opacity: 0; } /* ---------------------------------------------------------------- SEC.1B: TAGLINE (hero と brand-intro の間の独立 section) - 上端 200px は transparent → black (#181614) の gradient - margin-block-start: -200px で hero に被せ、padding-block-start: 200px で content を gradient zone の下に押し込む - z-index: 5 で hero の上に乗せる (gradient 透明部から hero のシーナリーが透ける) - PC は画像右 + テキスト左 の 2 カラム ---------------------------------------------------------------- */ .tagline { position: relative; z-index: 11; margin-block-start: -200px; /* 200px は margin-block-start: -200px の補償。+12svh は group の natural 位置を下に 押して、hero から scroll 直後に group が即出現するのを防ぐ余白。 */ padding-block-start: calc(200px + 12svh); /* pocket (270svh + 高さ ~25svh = ~295svh) の下に上 padding と同じくらいの 12svh だけ余白を残して section が閉じる。 */ min-block-size: 305svh; background: linear-gradient( to bottom, transparent 0, oklch(0.20 0.005 68) 200px, oklch(0.20 0.005 68) 100% ); } /* tagline-group: メイン画像 + テキスト。sticky で viewport y 中央に pin、3 つの 装飾画像 (man / hand / pocket) が下から上へスクロールして通過する。 translate Y を使わず、inset-block-start に「50dvh − group 高さの半分」を入れて、 固定前は section の自然位置、固定後は viewport 中央 (group center が 50dvh) になる。 */ .hero__tagline-group { --tagline-group-h: 900px; position: sticky; /* dvh → svh: スクロール中の URL バー伸縮で pin 位置が動かないよう不変単位に固定。 */ inset-block-start: calc(50svh - var(--tagline-group-h) / 2); z-index: 2; display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; gap: clamp(6rem, 14vw, 16rem); padding-inline: clamp(1.5rem, 5vw, 5rem); max-inline-size: 1000px; margin-inline: auto; translate: -3rem 0; } .hero__tagline { position: relative; z-index: 2; inline-size: clamp(26rem, 36vw, 42rem); order: 1; filter: drop-shadow(20px 20px 35px oklch(0 0 0 / 0.40)); } /* 装飾画像 (man / hand) base */ .hero__tagline-decor { position: absolute; display: block; pointer-events: none; } .hero__tagline-decor img { display: block; inline-size: 100%; block-size: auto; } /* 装飾 3 枚は .tagline section 直下の absolute。section min-block-size:230svh の 中で下から上へ通過する。% 指定は containing block 高さが min-block-size 由来の ときに解決しないことがあるので、svh で絶対値指定する。z-index: 1 で sticky group (z:2) より背面。 */ .hero__tagline-decor--man { inset-block-start: 180svh; inset-inline-end: 6rem; inline-size: clamp(9rem, 14vw, 15rem); z-index: 1; } .hero__tagline-decor--hand { inset-block-start: 225svh; /* 元の位置 (.hero__tagline-group 内 left: 28% of 1000px) を viewport 中央基準に 置き換え: center - 240px。narrow viewport では 2rem を下限に。 */ inset-inline-start: max(2rem, calc(50% - 240px)); inline-size: clamp(12rem, 18vw, 20rem); z-index: 1; } .hero__tagline-decor--pocket { inset-block-start: 270svh; inset-inline-end: 4%; inline-size: clamp(14rem, 21vw, 23rem); z-index: 1; } /* bg5 / bg6 は SP/TB 専用装飾。PC では非表示。 */ .hero__tagline-decor--bg5, .hero__tagline-decor--bg6 { display: none; } /* PC large (1920+): pocket をさらに 80px (5rem) 下に。 */ @media (width >= 1920px) { .hero__tagline-decor--pocket { inset-block-end: -19rem; } } /* PC narrow (1024-1279): メイン画像を一段小さくして余白とのバランスを整える。 */ @media (width >= 1024px) and (width < 1280px) { .hero__tagline { inline-size: clamp(24rem, 8rem + 25vw, 28rem); } .hero__tagline-decor--man { inline-size: 11rem; } } .hero__tagline-text { position: relative; isolation: isolate; inline-size: clamp(18rem, 26vw, 28rem); order: 2; /* グリッドの行いっぱいに伸ばして、 本文 (内側 children) を縦中央配置にする。 こうすると container の上端は行の上端と一致し、 absolute 配置の kicker を container の上端 (= 行の上端) に置けば、 ちょうど本文の "上の空きスペース" に "Tagline" を浮かせられる。 */ align-self: stretch; display: flex; flex-direction: column; justify-content: center; margin-inline-start: clamp(2rem, 5vw, 6rem); margin-block-start: clamp(3rem, 6vw, 5rem); text-align: start; color: var(--white); font-family: var(--font-jp); /* font-size: clamp(1rem, calc(1rem + (100vw - 1024px) / 416px * 0.5rem), 1.5rem); */ font-size: clamp(1rem, 1rem + (100vw - 1024px) / 416 * 8, 1.5rem); font-weight: 300; line-height: 2.2; letter-spacing: 0.08em; } /* Each paragraph acts as a slot — inner span slides up from below. Logo similarly. */ .hero__tagline-text p { margin: 0; } .hero__tagline-text p + p { margin-block-start: 1.5em; } /* 3rd paragraph has an absolute-positioned ruby that extends above the line; add top padding so it isn't clipped by overflow: hidden, and reduce the preceding margin so overall vertical rhythm stays at 1.5em. */ .hero__tagline-text p:nth-of-type(3) { padding-block-start: 1em; margin-block-start: 0.5em; } .hero__tagline-text__logo-wrap { margin-block-start: 2.5em; display: flex; justify-content: flex-start; overflow: hidden; } .hero__tagline-text__logo { block-size: 2rem; inline-size: auto; display: block; } /* tagline-text 登場アニメーション削除済み: 以前は taglineReveal (clip-path + blur) を line/logo に stagger で当て、 ruby ::before も opacity 同期させていたが、登場演出を全廃して即時表示に統一。 */ .hero__tagline-text__line, .hero__tagline-text__logo { display: block; line-height: 1.8; } .hero__tagline picture, .hero__tagline img { display: block; inline-size: 100%; block-size: auto; } /* tagline natural flow 化に伴い、scale / blur overlay / is-hero-scrolled アニメ廃止。 img は picture/img base rule で 100% 表示。 */ .hero__char { position: relative; display: inline-block; transform-origin: 0% 100%; } /* Ruby (furigana) rendered absolutely so it does not affect line spacing */ .hero__ruby { position: relative; display: inline-block; } .hero__ruby::before { content: attr(data-ruby); position: absolute; left: 100%; top: 50%; transform: translate(-100%, -50%); writing-mode: vertical-rl; font-size: 11px; letter-spacing: 0.2em; line-height: 1; white-space: nowrap; color: inherit; pointer-events: none; } /* ---------------------------------------------------------------- HERO: SP/TB (1023以下) — フルスクリーン構成。 中間: .hero__bg 内の picture 群がフルスクリーンで cover 表示 前面: .hero__copy + .hero__copy-en をオーバーレイ ---------------------------------------------------------------- */ @media (width < 1024px) { /* SP: hero は PC と同じく scenery 用に 1 viewport だけ。tagline は別 section なので hero の高さに含めない。lvh を使うことで iOS Safari の URL バー収縮時に 下端で白い隙間ができる問題を回避する。 */ .hero { block-size: auto; min-block-size: 100lvh; position: relative; background-color: oklch(0.20 0.005 68); } /* hero__sticky は SP では "透明" にして、子要素をそれぞれ hero 直下のように扱う。 これで bg / video-window を個別に sticky 化し、video-text を natural flow にできる。 */ .hero__sticky { display: contents; } .hero__sticky > * { grid-area: auto; } /* .hero__bg は PC と同じく自然スクロール (sticky 不使用)。hero 末端で tagline section が margin-block-start: -200px で被さって自然に隠す。 */ .hero__bg { position: relative; inline-size: 100%; block-size: 100lvh; justify-self: unset; overflow: hidden; clip-path: none; } /* 前面: テキストを上部にオーバーレイ（縦書きは PC と同じ vertical-rl を維持） base の transition をここで無効化することで、最上部に戻った時 (is-hero-scrolled 解除) に hero__copy が即座に元位置へスナップ戻る。is-hero-scrolled 付与時だけ transition を 再有効化して下方フェードを animate させる。 */ /* SP/TB: hero__copy / hero__copy-en は移動せず、その場で opacity のみフェード。 transition を base 側に置くことで scroll down / up 両方向にアニメーション。 */ .hero__copy { position: absolute; top: 50%; left: 50%; translate: -50% -50%; transform: none; color: var(--white); font-size: clamp(2rem, 8vw, 2.75rem); z-index: 4; transition: opacity 1.8s cubic-bezier(0.79, 0.01, 0.03, 1); } .hero__copy-en { transition: opacity 1.8s cubic-bezier(0.79, 0.01, 0.03, 1); } /* 付与時: opacity 0 にフェードアウト。解除時: base の opacity 1 に戻る = フェードイン。 */ .hero.is-hero-scrolled .hero__copy { opacity: 0; } .hero.is-hero-scrolled .hero__copy-en { opacity: 0; } /* SP/TB でも base ルール (opacity:0, translate3d(40%,0,0), blur(12px)) を継承して 初期非表示にする。JS の revealChars() で 1 文字ずつフェードイン(PC と同じ動作)。 以前ここで opacity:1 等に強制リセットしてたので、それを削除。 */ .hero__copy-en { position: absolute; top: auto; left: auto; inset-block-end: clamp(1rem, 4vw, 2rem); inset-inline-start: clamp(1rem, 4vw, 2rem); inset-inline-end: auto; translate: none; color: var(--white); text-align: start; white-space: normal; z-index: 4; } /* filmstrip は PC 専用演出なので SP/TB では非表示のまま。 video-window と video-text は SP でも表示し、別途 JS で起動トリガーを変える。 */ .hero__filmstrip { display: none; } /* video-window: SP/TB では fixed で viewport 上部に pin する。 sticky だと hero 末端で unpin されて「上へ流れて消える」挙動になるため。 hero 通過後は .hero.is-past-hero (JS が付与) の CSS が display:none にして craftsmanship / gallery に被らないようにする。 */ .hero__video-window { /* position: fixed; */ inset-block-start: 0; inline-size: 100%; block-size: 100lvh; } /* video-text: natural flow。brand-intro section 内で普通にスクロール。 padding-block-start: mountain margin で十分なので 12svh まで縮める。 padding-block-end: 0 — overlap 撤廃後は craftsmanship 側の padding/margin で 距離を取るので不要。 */ .hero__video-text { position: relative; inset: auto; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; inline-size: 100%; block-size: auto; padding-block: 12svh 0; /* philosophy ページなどと共通の --container-padding (clamp(1.5rem, 5vw, 3.75rem)) で揃える。 */ padding-inline: var(--container-padding); /* PC で当てた translate: 0 100px を SP では無効化 */ translate: none; opacity: 1; pointer-events: auto; z-index: 1001; } /* PC で当てた左シフト (translate: -15rem) は SP では打ち消し、左揃えに統一。 */ .hero__video-heading { translate: none; text-align: start; } /* TB (768〜1023px): タイトル + サブタイトルの左シフトを fluid 補間。 768px で -5rem (-80px)、1023px で -7.5rem (-120px)。 40px の差を 255px (= 1023-768) のスパンで線形に縮める。 */ @media (width >= 768px) and (width < 1024px) { .hero__video-heading { translate: clamp(-7.5rem, calc(-5rem - 40px * (100vw - 768px) / 255px), -5rem) 0; } } /* video-photos は "透明コンテナ" にして、中の 6 枚を video-text の直接の flex 子として 扱う。そのうえで order で上 3 枚 / text / 下 3 枚 の並びに再構成する。 */ .hero__video-photos { display: contents; } /* 個別 picture: PC 用の絶対座標をリセットして natural flow の flex 子要素に。 枠 (picture) は固定で、中の img だけ translate する parallax 方式 (PC と同じ)。 */ .hero__video-photo { position: static; inset: auto; display: block; filter: drop-shadow(4px 6px 12px oklch(0 0 0 / 0.35)); margin-block: 1.5rem; } /* SP では parallax 廃止: JS が --parallax-y を書き込んでも CSS 側で使わない。 img は枠ぴったりで固定表示。PC で当てた 120% サイズ + -10% offset (parallax の はみ出し領域) は不要なので 100% に戻して元画像をフル表示。 */ .hero__video-text .hero__video-photo img { translate: none; inline-size: 100%; block-size: 100%; margin-inline-start: 0; margin-block-start: 0; } /* mountain (order 1): 左端 (viewport 端) まで bleed する大判縦長画像。 親 .hero__video-text の padding-inline: 1.5rem を margin-inline-start: -1.5rem で 打ち消して画面左端にピタッと接地させる。新画像 (700x992) のアスペクトに合わせる。 */ .hero__video-photo--mountain { order: 1; align-self: flex-start; inline-size: 68vw; max-inline-size: 360px; aspect-ratio: 700 / 992; margin-block-start: 6rem; margin-inline-start: -1.5rem; } /* pocket スロット (中身は man 画像): mountain の右斜め下にオーバーラップ配置。 align-self: flex-end で右寄せ、margin-block-start: 負値で mountain の下半分に かぶせる。aspect-ratio は man 画像 (700x900) に合わせる。 */ .hero__video-photo--pocket { display: block; order: 1; align-self: flex-end; inline-size: 42vw; max-inline-size: 240px; aspect-ratio: 700 / 900; margin-block-start: -12.5rem; margin-inline-end: 1rem; } /* TB (768〜1023px): pocket の右端 offset を 767 時点の値で固定。 767 では合計 offset = container-padding (5vw=38.35px) + margin-inline-end (1rem=16px) = 約 54.35px。TB では container-padding が 5vw で増えるので margin-inline-end を 計算式で減らして合計を 54.35px に保つ。 */ @media (width >= 768px) and (width < 1024px) { .hero__video-photo--pocket { margin-inline-end: calc(54.35px - var(--container-padding)); } } /* SP では tagline-text 内の pocket デコレーションは隠して、brand-intro 側 (mountain 近傍) のものだけを見せる。 */ /* SP/TB: pocket は流れる画像の 3 つ目として表示。 */ .hero__tagline-decor--pocket { display: block; inset-block-start: 215svh; inset-inline-start: 4vw; inline-size: 40vw; max-inline-size: 240px; z-index: 1; } .hero__video-photo--craftman { order: 4; align-self: flex-end; inline-size: 60vw; max-inline-size: 375px; aspect-ratio: 400 / 280; /* 親 .hero__video-text の padding-inline (var(--container-padding)) を打ち消して viewport の右端まで bleed。 */ margin-inline-end: calc(var(--container-padding) * -1); } /* text-inner (order 2): mountain の後、その他写真の前に入る。 SP/TB ではブロック自体を画面水平中央に配置する。 - inline-size は viewport 単位で計算 (100vw - 3rem を上限に 32rem)。 flex の 100% 解決や align-self 経由だと Safari が min-content に縮めるため。 - 中央寄せは margin-inline: auto で行う (align-self: center は Safari で explicit inline-size との組み合わせが不安定)。 - text-wrap: pretty の過剰再折り返しを防ぐため word-break: keep-all に (br でのみ改行)。 */ .hero__video-text-inner { order: 2; position: relative; margin-block: 3rem; /* 中央寄せ (Vercel デプロイ版に揃える)。 */ margin-inline: auto; inline-size: min(calc(100vw - 3rem), 32rem); max-inline-size: none; /* SP のみ heading と body の間隔を PC の 3/4 (4.2em × 3/4 = 3.15em) に。 */ gap: 3.15em; } /* SP/TB で CJK の自由改行を止め、
でのみ改行させる。 text-wrap: pretty と重なると Safari で予期せず縮む。 */ .hero__video-text-inner p, .hero__video-text-inner .hero__video-title, .hero__video-text-inner .hero__video-subtitle { text-wrap: wrap; word-break: normal; } /* SP のとき title / subtitle のみ line 単位で約 10% 縮小。 本文 (.hero__video-text-group 内) は 1rem を維持。 */ .hero__video-title .hero__video-text__line, .hero__video-subtitle .hero__video-text__line { font-size: 0.9em; } /* SP では本文 (hero__video-text-group 内の
) を無効化して コンテナ幅に応じた自然な折り返しに任せる。 */ .hero__video-text-group br { display: none; } /* SP では本文 p 間の gap を 0 に。 */ .hero__video-text-group { gap: 0; } /* SP では body wrapper の max-content centering を解除し、text-inner 幅いっぱいに。 */ .hero__video-text-body { inline-size: auto; align-self: stretch; gap: 3.15em; } .hero__video-photo--hand { order: 3; align-self: flex-start; inline-size: 50vw; max-inline-size: 330px; aspect-ratio: 300 / 200; } /* tagline 画像 + テキスト + ロゴはひとかたまり。natural flow で hero__bg の下に続く。 group 自体には animation / transform を当てない。 初期は visibility:hidden + opacity:0 で非表示 (レイアウト空間は保持して hero 高さ安定)、 is-tagline-in 付与で fade-in。visibility の transition-delay でフェード終了まで remain hidden せず即座に visible 化。 */ /* SP/TB: group の box を解除して、main image / text を section の直接子として それぞれ独立にレイアウトできるようにする。これで text だけを sticky pin、 main image を absolute で流す、が両立する。 */ .hero__tagline-group { display: contents; } /* group の visibility/opacity reveal を子要素 (image + text) に移植。 SP/TB では .is-tagline-in が立った瞬間に両方フェードイン。 */ .hero__tagline, .hero__tagline-text { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.6s ease-out, visibility 0s linear 0.6s; } .hero__tagline-group.is-tagline-in > .hero__tagline, .hero__tagline-group.is-tagline-in > .hero__tagline-text { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 0.6s ease-out, visibility 0s linear 0s; } /* SP/TB: man は非表示。hand / pocket と hero-bg5 / bg6 の 4 枚を staggered に 配置して下から上へ通過させる。 */ .hero__tagline-decor--man { display: none; } .hero__tagline-decor--hand { display: block; inset-block-start: 115svh; inset-inline-start: 4vw; /* PC で当てた calc は SP/TB では使わない。 */ inline-size: 45vw; max-inline-size: 260px; z-index: 1; } /* hero で 使われている bg5 / bg6 を SP/TB の tagline 装飾として再利用。 */ .hero__tagline-decor--bg5 { display: block; inset-block-start: 165svh; inset-inline-end: 6vw; inline-size: 38vw; max-inline-size: 220px; z-index: 1; } .hero__tagline-decor--bg6 { display: block; inset-block-start: 265svh; inset-inline-end: 8vw; inline-size: 42vw; max-inline-size: 240px; z-index: 1; } /* メイン画像は SP/TB では normal flow で text の上に配置 (DOM 順そのまま)。 group は display: contents で解除されてるので、画像は section の直接子として in-flow で text の前に並ぶ。scroll で text より先に通過する。 */ .hero__tagline { position: relative; inset: auto; inline-size: 70vw; max-inline-size: 460px; margin-inline: auto; margin-block-end: clamp(4rem, 12vw, 8rem); translate: none; transform: none; z-index: 1; overflow: hidden; filter: none; } /* PC で付けた img の filter: blur + scale transition は SP では使わない。 SP は ::after の backdrop-blur + radial-mask による heroBlurReveal を使用。 */ .hero__tagline img { filter: none; transition: none; } /* tagline image のアニメ (heroWipe / heroZoom / heroBlurReveal) は全廃。 画像はそのまま表示。 */ /* SP では is-tagline-active 不要 (natural flow で常時表示) */ .hero__tagline-text__line, .hero__tagline-text__logo { clip-path: none; filter: none; } .hero__tagline-text .tagline__ruby::before { opacity: 1; } /* hero を抜けた後 (is-past-hero JS 付与) は .hero__bg / video-window を非表示にして gallery / collection への被さりを防ぐ。SP/TB で video-window は position:fixed のため。 */ .hero.is-past-hero .hero__bg, .hero.is-past-hero .hero__video-window { display: none; } /* tagline-text も flex 子要素 */ .hero__tagline-text { /* SP/TB: text だけが viewport y 中央に sticky pin。 JS が実測した --tagline-text-h を使って中央揃え。 */ position: sticky; /* svh (small viewport = URL バー表示時の高さ・スクロール中も不変) を使う。 dvh だと iOS Safari の URL バー伸縮で pin 位置が再計算され、hero→tagline 遷移中にガクつくため svh に固定。 */ inset-block-start: calc(50svh - var(--tagline-text-h, 280px) / 2); inline-size: max-content; max-inline-size: 96vw; translate: none; transform: none; writing-mode: horizontal-tb; text-align: center; align-self: center; margin-inline: auto; margin-block-start: 0; z-index: 2; /* font-size: clamp(1.125rem, calc(1.125rem + (100vw - 375px) / 392px * 0.25rem), 1.375rem); */ font-size: clamp(1.125rem, 1.125rem + (100vw - 375px) / 392 * 4, 1.375rem); line-height: 2.8; letter-spacing: 0.06em; /* opacity transition は上の reveal rule (line ~1829) が制御。 */ } /*
以外での自動折り返しを抑止（意図した改行位置のみを使う）。 base の line-height: 1.8 を上書きして SP では行間を広く。 */ .hero__tagline-text__line { white-space: nowrap; line-height: 2.5; } /* ロゴ wrap は中央揃え（PC は左寄せ） */ .hero__tagline-text__logo-wrap { justify-content: center; } /* header の上下余白を半分に */ .header { padding-block: 2rem; } } /* PC (1024+): hero を抜けた後、is-hero-scrolled で position:fixed 化された hero 内の子要素 (bg-base / bg / bg-side / copy / tagline / filmstrip / video-window / video-text) は .bg-cover で視覚的に覆われているだけで、 依然 layout / paint / scrub アニメーション / 動画デコードが走り続けている。 .hero__sticky 自体に display:none を当てて descendants ごと rendering を 切り離し、無駄な作業を止める (SP/TB は上の @media (width < 1024px) で hero__bg / hero__video-window 個別に同等の処理を済ませている)。 */ @media (width >= 1024px) { .hero.is-past-hero .hero__sticky { display: none; } } /* TB (768〜1023) だけ hero__copy をさらに大きくする (位置は SP/TB 共通で縦中央)。 SP の max をミニマムとして 1024 付近で font-size 4rem まで伸びる。 */ @media (width >= 768px) and (width < 1024px) { .hero__copy { /* font-size: clamp(2.75rem, calc(2.75rem + (100vw - 768px) / 256px * 1.25rem), 4rem); */ font-size: clamp(2.75rem, 2.75rem + (100vw - 768px) / 256 * 20, 4rem); } } /* ---------------------------------------------------------------- SEC.4: CRAFTSMANSHIP (新規実装中 — 旧実装は craftsmanship-backup.css に退避済み) - PC: margin-block-start: -100svh で hero の末端 100svh に被せる。 hero__sticky pin がまだ active な区間で craftsmanship が下から rise up、 結果として「video は固定、上から craftsmanship が覆い被さる」が成立。 - SP: overlap なし (natural flow)。 ---------------------------------------------------------------- */ .craftsmanship { position: relative; z-index: 20; /* hero の末端 100lvh と overlap させて rise up。hero__sticky pin がまだ active な 区間で craftsmanship が下から覆い被さるので、pin release の瞬間 (= craftsmanship が viewport を完全に覆ってる瞬間) に video が裏側で動いても見えない。 */ /* margin-block-start: -100svh; */ margin-block-start: 500px; /* 上 300px は transparent → off-white のフェード。 overlap 区間中は背後に video が pinned で見えるので、transparent エリアは video が透けて見える → 「video の上に白が被さってくる」visual が成立。 */ padding-block-start: 300px; padding-block-end: 14rem; /* #E2E1DA 相当のベタ塗り (scroll-driven animation 非対応ブラウザ用の静的 フォールバック)。対応ブラウザは下方の @supports ブロック (craftsmanship-bg-in) で「transparent → この色」の全画面フェードに置き換わる。 */ background-color: oklch(0.909 0.009 100); } /* craftsmanship__layout PC: body (左, sticky) + cards (右, 縦並び) の 2 カラム。 cards の縦に長い高さが scroll 距離となり、body は sticky で viewport 中央付近に pin される。cards の末尾に達したら一緒に release される。 */ .craftsmanship__layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; max-inline-size: 90rem; margin-inline: auto; padding-inline: var(--container-padding); /* グラデ領域の下にさらに余白を入れて layout を下げる。 */ margin-block-start: clamp(4rem, 8vw, 8rem); } /* craftsmanship__inner PC layout: 左カラム。sticky で viewport 中央に pin。 translate は使わず、inset-block-start に直接「50dvh − body 高さの半分」を入れる。 固定前は grid セルの top に置かれて card-image top と揃い、固定後は body の中央が viewport 中央に来る。--craft-body-h は body の推定高さ (高さが変われば要調整)。 */ .craftsmanship__inner { --craft-body-h: 300px; display: flex; flex-direction: column; align-items: flex-start; text-align: start; gap: clamp(1.5rem, 2vw, 2.5rem); position: sticky; /* dvh → svh: スクロール中の URL バー伸縮で pin 位置が動かないよう不変単位に固定。 */ inset-block-start: calc(50svh - var(--craft-body-h) / 2); } .craftsmanship__inner .craftsmanship__body { display: flex; flex-direction: column; align-items: flex-start; /* 幅によらず固定 (1024/1920 で同じ距離にする)。 */ gap: 2.5rem; } .craftsmanship__inner .craftsmanship__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4em; } .craftsmanship__inner .craftsmanship__text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; } .craftsmanship__inner .craftsmanship__title { font-family: var(--font-jp); /* hero__video-title の 3/4 サイズ (SP 2.1rem → PC 3.6rem)。 */ font-size: clamp(2.1rem, 1.575rem + 2.25vw, 3.6rem); font-weight: 600; letter-spacing: 0.12em; line-height: 1.6; color: var(--gray-900); margin: 0; /* philosophy 同型の行 rise reveal 用マスク (__line を overflow で切る)。 */ overflow: hidden; padding-block-end: 0.1em; } .craftsmanship__inner .craftsmanship__subtitle { font-family: var(--font-en); font-size: 1rem; font-weight: 400; letter-spacing: 0.2em; color: var(--gray-900); margin: 0; } .craftsmanship__inner .craftsmanship__lead { font-family: var(--font-jp); font-weight: 400; font-size: 1rem; line-height: 2.2; color: var(--gray-900); letter-spacing: 0.04em; margin: 0; } .craftsmanship__inner .craftsmanship__line { display: block; } /* rise reveal の hidden 状態は「タイトルの行」だけに当てる。 (.craftsmanship__inner .craftsmanship__line 全体に当てると subtitle / lead の テキストまで 100% 下にずれたまま戻らなくなる — title 以外に復帰ルールが無いため) */ .craftsmanship__inner .craftsmanship__title .craftsmanship__line { transform: translate3d(0, 100%, 0); transition: transform 1.2s cubic-bezier(0.87, 0, 0.13, 1); } .craftsmanship__title.is-revealed .craftsmanship__line { transform: translate3d(0, 0, 0); } @media (prefers-reduced-motion: reduce) { .craftsmanship__inner .craftsmanship__title .craftsmanship__line { transform: none; transition: none; } } .craftsmanship__link { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.8rem; inline-size: 240px; padding-block: 0.5rem; font-family: var(--font-jp); font-size: 1.125rem; font-weight: 600; letter-spacing: 0.1em; color: var(--gray-900); border-block-end: 2px solid var(--gray-900); text-decoration: none; transition: opacity 0.4s var(--ease-out-expo); } .craftsmanship__link:hover { opacity: 0.6; } .craftsmanship__link-arrow-wrap { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 24px; background-color: var(--gray-900); border-radius: 9999px; flex-shrink: 0; } .craftsmanship__link-arrow { display: block; inline-size: 21px; block-size: auto; } /* link は __layout (grid 2 cols) の 3 つ目の子。cards (col 2) の下に配置するため grid-column: 2 を明示。justify-self: end で右寄せ、margin-block-start で cards との余白。 */ .craftsmanship__link--card { grid-column: 2; justify-self: flex-end; margin-block-start: clamp(1.5rem, 3vw, 2.5rem); } /* card の caption-title の上に置く 01/02/03 ナンバー。 craftsmanship ページの craftsmanship-leather__detail-num と同サイズに揃える。 */ .craftsmanship__caption-num { display: block; font-family: var(--font-en); font-size: 0.875rem; font-weight: 400; letter-spacing: 0.16em; color: oklch(0.2 0.005 70); line-height: 1; margin-block-end: 0.75rem; } /* PC: 3 つの card を縦に積み重ねる (右カラム)。gap は使わず、各 card の padding-block + border-block-start で「線がカード間の中央」になる構成。 */ .craftsmanship__cards { display: flex; flex-direction: column; gap: 0; } /* PC: 各 card を 左:画像 右:テキスト の横並びに。テキストは画像の下端揃え。 上線 + padding-block で card 間に区切り線。最後の card だけ下線も追加して スタック末端の閉じ線にする。position: relative は最後の card 内の craftsmanship__link--card の絶対配置基準。 */ .craftsmanship__card { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(1.5rem, 2.5vw, 2.5rem); /* caption を card 高さに stretch。caption 内で num は上端、title 以降は下端に 寄せる (title に margin-block-start: auto)。 */ align-items: stretch; padding-block: clamp(2rem, 4vw, 3rem); border-block-start: 1px solid oklch(0 0 0 / 0.2); } /* caption-num の下に空白を、title から下を card 下端に寄せる。 */ .craftsmanship__card-caption .craftsmanship__caption-title { margin-block-start: auto; } /* :last-of-type: 後ろに link (a) が来ても最後の div = 最後の card を捉える。 */ .craftsmanship__card:last-of-type { border-block-end: 1px solid oklch(0 0 0 / 0.2); } .craftsmanship__card-image { position: relative; inline-size: 100%; overflow: hidden; } .craftsmanship__card-image picture, .craftsmanship__card-image img { display: block; inline-size: 100%; block-size: auto; } .craftsmanship__card-caption { display: flex; flex-direction: column; inline-size: 100%; text-align: start; } .craftsmanship__caption-title { font-family: var(--font-jp); font-size: clamp(1.125rem, 0.85rem + 0.55vw, 1.4rem); font-weight: 600; letter-spacing: 0.12em; line-height: 1.6; color: var(--gray-900); margin: 0 0 1rem 0; } .craftsmanship__caption-title .craftsmanship__line { display: block; padding-block-end: 0.4em; border-block-end: 1px solid var(--gray-900); } .craftsmanship__caption-text { font-family: var(--font-jp); font-size: 1rem; font-weight: 400; line-height: 1.9; letter-spacing: 0.04em; color: var(--gray-900); margin: 0; text-wrap: pretty; } .craftsmanship__caption-text .craftsmanship__line { display: block; } @media (width < 1024px) { /* SP/TB は brand-intro と craftsmanship の overlap (margin-block-start: -100svh) を 撤廃して natural flow に切替。これで brand-intro 末尾の画像サイズが viewport 幅で 変動しても、画像下端から craftsmanship タイトルまでの距離が固定値 (svh 一定) になる。 PC は元の重ねデザインを維持。 */ .brand-intro { min-block-size: auto; } .craftsmanship { margin-block-start: 0; padding-block-start: 180px; /* #E2E1DA 相当のベタ塗り (静的フォールバック)。対応ブラウザは @supports の scroll-driven fade が上書きする。 */ background-color: oklch(0.909 0.009 100); } /* SP/TB は 2 カラム grid を解除して block stack に戻す。overlap 撤廃に合わせ margin-block-start を svh ベース → 固定 rem に変更 (距離一定化)。 */ .craftsmanship__layout { display: block; max-inline-size: none; padding-inline: 0; margin-block-start: 5.2rem; } .craftsmanship__inner { display: flex; flex-direction: column; align-items: flex-start; inline-size: 100%; max-inline-size: 500px; /* 左端を craftsmanship__cards (padding-inline: var(--container-padding) で 左端を viewport から container-padding 分内側に揃える) と合わせるため、 margin-inline: auto による中央寄せをやめて左寄せに変更。 */ margin-inline: 0; padding-inline: var(--container-padding); gap: 0.75rem; /* PC の sticky を解除 */ position: static; inset-block-start: auto; } /* TB: card-image (650px) と x 軸を揃えるためコンテナ幅を広げる */ @media (width >= 768px) and (width < 1024px) { .craftsmanship__inner { max-inline-size: 650px; } } .craftsmanship__body { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; inline-size: 100%; } .craftsmanship__heading { display: flex; flex-direction: column; gap: 0.4em; } .craftsmanship__text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; } .craftsmanship__inner .craftsmanship__title { font-family: var(--font-jp); /* SP/TB のみ hero__video-title と同サイズに揃える (SP 2.8rem → 1023px で約 4rem)。 line の 0.9em は両者で揃っているので実表示も一致。 PC スコープの .craftsmanship__inner .craftsmanship__title (specificity 2) を 上書きするため、SP/TB 側も同じ specificity に揃える。 */ font-size: clamp(2.8rem, 2.1rem + 3vw, 4.8rem); font-weight: 600; letter-spacing: 0.12em; line-height: 1.5; color: var(--gray-900); margin: 0; } .craftsmanship__subtitle { font-family: var(--font-en); font-size: 1rem; font-weight: 400; letter-spacing: 0.18em; color: var(--gray-900); margin: 0; } .craftsmanship__lead { font-family: var(--font-jp); font-weight: 400; font-size: 1rem; line-height: 2.2; color: var(--gray-900); letter-spacing: 0.04em; margin: 0; } .craftsmanship__line { display: block; } /* SP: title / subtitle / caption-title 内の line を 0.9em で約 10% 縮小。 hero__video-text__line の SP ルールに揃えた。本文 (lead / caption-text) は 1em のまま。 */ .craftsmanship__title .craftsmanship__line, .craftsmanship__subtitle .craftsmanship__line, .craftsmanship__caption-title .craftsmanship__line { font-size: 0.9em; } .craftsmanship__link { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.8rem; inline-size: 200px; padding-block: 0.5rem; font-family: var(--font-jp); font-size: 1.125rem; font-weight: 600; letter-spacing: 0.1em; color: var(--gray-900); border-block-end: 2px solid var(--gray-900); text-decoration: none; transition: opacity 0.4s var(--ease-out-expo); } .craftsmanship__link:hover { opacity: 0.6; } .craftsmanship__link-arrow-wrap { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 24px; background-color: var(--gray-900); border-radius: 9999px; flex-shrink: 0; } .craftsmanship__link-arrow { display: block; inline-size: 21px; block-size: auto; } /* ====== Craftsmanship 横スワイプ carousel (SP/TB only) ====== */ /* cards コンテナ: 横並び + overflow-x scroll + scroll-snap で 1 枚ずつ snap。 padding-inline で先頭/末尾の余白を取り、scrollbar は非表示。 */ .craftsmanship__cards { display: flex; flex-direction: row; align-items: stretch; gap: 2.5rem; inline-size: 100%; max-inline-size: none; margin-inline: 0; margin-block-start: 4.5rem; padding-inline: var(--container-padding); overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-padding-inline: var(--container-padding); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .craftsmanship__cards::-webkit-scrollbar { display: none; } @media (width >= 768px) and (width < 1024px) { .craftsmanship__cards { gap: 3.5rem; } } /* 1 枚カード: 固定幅、スクロール snap target。 PC で付いている border-block-start (card 上の区切り線) と padding-block は carousel デザインに不要なので解除。 */ .craftsmanship__card { flex: 0 0 auto; inline-size: 75vw; max-inline-size: 320px; display: flex; flex-direction: column; align-items: stretch; gap: 2rem; scroll-snap-align: start; border-block-start: none; padding-block: 0; } /* 最後のカード (美錠) の下罫線も carousel では不要。:last-of-type の詳細度を 上書きするため同じセレクタで none を指定。 */ .craftsmanship__card:last-of-type { border-block-end: none; } /* 数字 (caption 先頭) → タイトル間の距離も 2 倍。 */ .craftsmanship__caption-num { margin-block-end: 1.5rem; } @media (width >= 768px) and (width < 1024px) { .craftsmanship__card { inline-size: 45vw; max-inline-size: 380px; } } .craftsmanship__card-image { position: relative; inline-size: 100%; max-inline-size: none; margin-inline: 0; } .craftsmanship__card-image picture, .craftsmanship__card-image img { display: block; inline-size: 100%; block-size: auto; } /* card caption: 画像の下、card 幅いっぱい。 */ .craftsmanship__card-caption { inline-size: 100%; max-inline-size: none; margin-inline: 0; text-align: start; } .craftsmanship__caption-title { font-family: var(--font-jp); font-size: 1.25rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1.6; color: var(--gray-900); margin: 0 0 1rem 0; } @media (width >= 768px) and (width < 1024px) { .craftsmanship__card-caption .craftsmanship__caption-title { font-size: clamp(1.25rem, 0.497rem + 1.569vw, 1.5rem); } } .craftsmanship__caption-title .craftsmanship__line { padding-block-end: 0.4em; border-block-end: 1px solid var(--gray-900); } /* link は __cards の外側、__layout 直下の natural flow 子。 cards の下に左寄せで配置。PC の grid-column: 2 / justify-self: end も解除。 */ .craftsmanship__link--card { grid-column: auto; justify-self: auto; margin-block-start: 3.75rem; margin-inline-start: var(--container-padding); } .craftsmanship__caption-text { font-family: var(--font-jp); font-size: 1rem; font-weight: 400; line-height: 1.9; letter-spacing: 0.04em; color: var(--gray-900); margin: 0; text-wrap: wrap; } } /* ---------------------------------------------------------------- SEC.NEW: GALLERY (between craftsmanship and collection) ---------------------------------------------------------------- */ .gallery { position: relative; /* craftsmanship が SP で stacking context を作り、その中の .craftsmanship__bg (position: fixed) が事実上 craftsmanship レイヤーとして描画される。gallery が その bg に被らないよう、それより 1 段上の値を使う。 */ z-index: var(--z-gallery); padding-block: clamp(5rem, 10vw, 10rem); } .gallery__inner { position: relative; min-block-size: 1110px; } .gallery__text-group { position: absolute; top: 120px; left: calc(50% + clamp(0px, -650.24px + 63.49vw, 200px)); translate: -50% 0; inline-size: fit-content; z-index: 10; pointer-events: none; color: oklch(1 0 0); mix-blend-mode: difference; text-align: right; } .gallery__text { margin: 0; /* craftsmanship__line と同じ rise reveal を成立させるため overflow: hidden で 実マスク。子で --gallery-line-bleed を上書きすると下端を bleed 量だけ 延長して descender (例: _) を救済できる (offset は line transform 側で吸収)。 */ overflow: hidden; padding-block-end: var(--gallery-line-bleed, 0px); } /* Rise-from-bottom reveal, mirroring .craftsmanship__line. The inner span starts translated 100% down (clipped by the parent's overflow), then slides up to its natural position when .gallery gains .is-revealed (added by initCraftsmanshipExit's gallery ScrollTrigger). */ .gallery__line { display: block; /* 100% + bleed で初期は parent (= 1em + bleed の clip 領域) の外に置く。 --gallery-line-bleed が 0 なら従来通り 100%。 */ transform: translate3d(0, calc(100% + var(--gallery-line-bleed, 0px)), 0); transition: transform 1.2s cubic-bezier(0.87, 0, 0.13, 1); } .gallery.is-revealed .gallery__line { transform: translate3d(0, 0, 0); } .gallery.is-revealed .gallery__text--en .gallery__line { transition-delay: 0s; } .gallery.is-revealed .gallery__text--jp .gallery__line { transition-delay: 0.15s; } /* collection-stack を bg-cover (z-1050) より上に置き、collection 区間で cover を覆って カードや mask の演出を見せる。view-timeline / timeline-scope は SP/TB から universal に引き上げ、PC でも sticky bg + mask reveal が動くようにする。 */ .collection-stack { position: relative; z-index: var(--z-collection-stack); /* craftsmanship の bg と連結させて間に白い隙間が出ないように、色を完全一致させる (craftsmanship: oklch(0.909 0.009 100))。以前は 0.95 0.006 85 でわずかにズレていた。 */ background-color: oklch(0.909 0.009 100); /* 新 collection-bg をセクション底面に原寸 (拡大縮小なし) で敷く。 image-set 非対応エンジン向けに plain url() を先に置きフォールバック。 */ background-image: url("../images/collection/collection-bg.webp?v=20260612d"); background-image: image-set( url("../images/collection/collection-bg.webp?v=20260612d") 1x, url("../images/collection/collection-bg@2x.webp?v=20260612d") 2x ); background-repeat: no-repeat; background-position: center bottom; background-size: auto; view-timeline: --collection-mask block; timeline-scope: --ostrich-arrival, --crocodile-arrival; } /* SP/TB (<1024): collection-bg は PC 用 (1920px) の中央クロップだと収まりが悪いため、 SP 専用に用意した画像 (768px) に差し替える。位置・サイズ等は base のまま継承。 */ @media (width < 1024px) { .collection-stack { background-image: url("../images/collection/collection-bg-sp.webp?v=20260612d"); background-image: image-set( url("../images/collection/collection-bg-sp.webp?v=20260612d") 1x, url("../images/collection/collection-bg-sp@2x.webp?v=20260612d") 2x ); } } /* TB (768〜1023): SP 画像 (768px) を原寸で置くと viewport より狭く左右に隙間が出るため、 横幅いっぱいに伸ばす (height は比率維持で auto)。SP (<768) は原寸クロップのまま。 */ @media (width >= 768px) and (width < 1024px) { .collection-stack { background-size: 100% auto; } } /* === Sticky background wrapper (universal) ================================ bg は collection-stack の最初の sticky レイヤー。heading の sticky inset と同じ計算で pin 位置を揃え、heading より上には bg が展開しないようにする。 mask が初期は bg 全体を白で覆い、scroll 進行で上へ抜けて bg を露わにする。 */ .collection-stack__bg { position: sticky; /* heading の sticky inset と同じ式で pin 位置を揃える。これで bg は entry 100% (= mask 完抜けの瞬間) ぴったりに viewport top で pin され、 それ以降は scroll に追従しない (= 「mask の中の画像」が固定で見える)。 */ inset-block-start: max(0px, calc( 50dvh - var(--calf-block-size, 0px) / 2 - 4rem - var(--heading-block-size, 0px) )); inline-size: 100%; block-size: 120vh; block-size: 120dvh; z-index: 0; /* 背景画像を一時的に外して craftsmanship section と同じオフホワイトに統一。 */ background-color: oklch(0.95 0.006 85); margin-block-end: -120vh; margin-block-end: -120dvh; } /* parallax 完了タイミングで is-pinned-bottom を付与し、bg を fixed 化。 位置がジャンプしないよう JS が pin 直前の getBoundingClientRect().top を inline style で渡す (inset-block-start)。bg はその位置に貼り付き続ける。 */ .collection-stack__bg.is-pinned-bottom { position: fixed; inset-inline: 0; inline-size: 100vw; block-size: 120dvh; animation: none; translate: 0 0; } .collection-stack__mask { /* Fallback: scroll-driven animation 非対応ブラウザでは mask を無効化し bg を直接見せる */ display: none; } @supports (animation-timeline: scroll()) { .collection-stack__mask { /* 白マスクの wipe 演出を廃止: ちらつき防止のため非表示固定。 */ display: none; position: sticky; inset-block-start: 0; inline-size: 100%; block-size: 100vh; block-size: 100dvh; z-index: 1; background-color: oklch(0.976 0 0); margin-block-end: -100vh; margin-block-end: -100dvh; animation: collection-mask-rise linear both; animation-timeline: --collection-mask; /* entry 20% entry 100%: entry phase のほぼ全域 (80% 区間) を使って mask が ゆっくり抜けて bg を露出 (元 20% 区間比で 1/4 速)。 */ animation-range: entry 20% entry 100%; will-change: translate; } .collection-stack__bg { /* forwards: range より手前 (= entry phase 中) は from-state を当てず、 要素本来の translate (0) を保つ。これにより mask が wipe する前に parallax 補間が走って bg が h2 より上に peek するのを防ぐ。 */ animation: collection-bg-parallax linear forwards; animation-timeline: --collection-mask; animation-range: entry 100% cover 100%; will-change: translate; } } @keyframes collection-mask-rise { from { translate: 0 0; } to { translate: 0 -100%; } } @keyframes collection-bg-parallax { /* bg は viewport top に sticky pin される。下方向 translate にすると上端が 不足するので、parallax 方向を上 (0 → -16%) に反転。bg の block-size 120dvh は viewport より 20dvh 大きいため、上方向 -19.2dvh の drift では下端が露出しない。 */ from { translate: 0 0%; } to { translate: 0 -16%; } } /* heading は static 配置、fade-out なし。 */ .collection-stack__heading { display: grid; grid-template-columns: 1fr; justify-items: center; padding-inline: clamp(1rem, 2vw, 2rem); margin-block-end: 0; text-align: center; } /* === Collection 遷移ボタン (最後のカードの「外」右下に追従) ================== crocodile section (.collection-v2) は position: sticky なので、中に absolute で 配置すれば card と一緒に viewport 中央へ追従する。 top: calc(100% + gap) で section の bbox の「下」へ突き出す → カード本体の さらに下 (= カード外) に着地。inline 側は section の padding-inline と同値で カード右辺と揃える。craftsmanship__link / hero__video-link と同じ 240px pill + 矢印 wrap スタイル。bg は sky 画像なので dark color、pill 内矢印だけ filter: invert(1) で白に。 */ .collection-stack__cta-link { position: absolute; top: calc(100% + clamp(1rem, 2vw, 1.75rem)); /* card 右端と button 右端を揃える。card は max-inline-size 90rem で margin-inline: auto 中央寄せされているので、viewport > 90rem のとき 左右の gutter は (100% - 90rem) / 2。これを最小値 (元の clamp) と max() で取り、狭い画面では従来通り 1-2rem 余白を保つ。 */ inset-inline-end: max(clamp(1rem, 2vw, 2rem), calc((100% - 90rem) / 2)); z-index: 4; display: inline-flex; align-items: center; justify-content: space-between; gap: 0.8rem; inline-size: 240px; padding-block: 0.5rem; font-family: var(--font-jp); font-size: 1.125rem; font-weight: 600; letter-spacing: 0.1em; color: var(--gray-900); text-decoration: none; border-block-end: 2px solid var(--gray-900); transition: opacity 0.4s var(--ease-out-expo); } .collection-stack__cta-link:hover { opacity: 0.6; } .collection-stack__cta-link-label { display: inline-block; } .collection-stack__cta-link-arrow-wrap { display: inline-flex; align-items: center; justify-content: center; inline-size: 50px; block-size: 24px; background-color: var(--gray-900); border-radius: 9999px; flex-shrink: 0; } .collection-stack__cta-link-arrow { display: block; inline-size: 21px; block-size: auto; /* SVG の stroke は元から白なので invert(1) は適用しない (適用すると白→黒になる)。 */ } .collection-stack__heading-text { padding-inline: clamp(2rem, 3vw, 3rem); padding-block-start: clamp(1.25rem, 2.5vw, 2rem); } .collection-stack__heading-title { font-family: var(--font-jp); /* craftsmanship__title と同じサイズ・太さ (hero__video-title の 3/4)。 */ font-size: clamp(2.1rem, 1.575rem + 2.25vw, 3.6rem); font-weight: 600; letter-spacing: 0.12em; line-height: 1.4; color: var(--gray-900); /* 文字間の自動改行を止め、改行は （読点の後）でのみ起こす。 text-wrap: balance だと CJK が 4/4 等分されて語の途中で折れる。 */ word-break: keep-all; margin: 0; } .collection-stack__heading-subtitle { font-family: var(--font-en); font-size: 0.875rem; font-weight: 400; letter-spacing: 0.15em; color: var(--gray-600); margin-block-start: 0.5rem; margin-block-end: 0; } /* === Cards sticky stacking (universal) =================================== 各カードを viewport 中央 (50dvh から自身の半分上 = -50% translate) に sticky pin。後続カードが先行カードの上にスタックされる演出。 */ .collection-v2 { position: sticky; /* dvh → svh: スクロール中の URL バー伸縮で pin 位置が動かないよう不変単位に固定。 */ inset-block-start: 50svh; translate: 0 -50%; z-index: 2; display: grid; background-color: transparent; padding-block: clamp(1rem, 2vw, 2rem); padding-inline: clamp(1rem, 2vw, 2rem); } /* 各 card 左カラムの左上に置く小さい装飾画像 (material 別: calf/ostrich/croco)。 親 .collection-v2__left に対して absolute で左上配置。 上辺は右カラム display の上辺 (= 各 viewport での column padding-block-start) と揃える。 左辺は左 column の padding-inline-start と揃える。 */ .collection-v2__left-img { display: none; } /* SP/TB (<1024): 左カラム左上の装飾画像はカード幅が狭く可読性に寄与しないため非表示。 */ @media (width < 1024px) { .collection-v2__left-img { display: none; } } /* === Collection heading rise reveal — universal (PC + SP + TB) ================= 旧: SP/TB の @media (width < 1024px) ブロック内にのみ定義されていたため PC では reveal が走らなかった。craftsmanship/gallery と同じ overflow: hidden + translate3d 方式で全幅対応に揃える。 IO で fade-in--visible が付与される (initScrollReveal が監視)。 */ .collection-stack__heading-title, .collection-stack__heading-subtitle { overflow: hidden; /* gallery と同様、descender bleed を任意に渡せるようにしておく (現在 0)。 */ padding-block-end: var(--collection-heading-bleed, 0px); } /* heading-line を philosophy 同型の rise reveal に。親 (__heading-title) の overflow:hidden でマスクし、.is-revealed (JS: initTitleLineReveal) で立ち上がる。 */ .collection-stack__heading-line { display: block; transform: translate3d(0, 100%, 0); transition: transform 1.2s cubic-bezier(0.87, 0, 0.13, 1); } .collection-stack__heading-title.is-revealed .collection-stack__heading-line { transform: translate3d(0, 0, 0); } /* 英字サブタイトル ("Collection") の line は __heading-subtitle 配下にあり、 上の __heading-title.is-revealed セレクタに含まれず取り残されて隠れていた。 兄 h2 (__heading-title) が is-revealed になったら subtitle line も立ち上げる (JP 見出しの直後に出るよう僅かに遅延)。 */ .collection-stack__heading-text:has(.collection-stack__heading-title.is-revealed) .collection-stack__heading-subtitle .collection-stack__heading-line { transform: translate3d(0, 0, 0); transition-delay: 0.12s; } @media (prefers-reduced-motion: reduce) { .collection-stack__heading-line { transform: none; transition: none; } } .collection-stack__heading-text.fade-in { opacity: 1; translate: 0 0; transition: none; } .gallery__text--en { font-family: var(--font-en); font-size: clamp(6rem, 2.714rem + 3.571vw, 7rem); font-weight: 400; letter-spacing: 0.05em; line-height: 1; /* underscore (_) の descender が line-height: 1 の line-box を超えて落ちる ため、parent の overflow: hidden で切れていた。bleed 0.2em で底面を延長し、 同じ量だけ初期 transform をオフセットして reveal mask を維持。 */ --gallery-line-bleed: 0.2em; } .gallery__text--jp { font-family: var(--font-jp); font-size: 3rem; font-weight: 400; line-height: 1; margin-block-start: 32px; } /* Mask-vs-image differential parallax: items clip their imgs, imgs are scaled 1.15 to gain ~7.5% overflow slack on each axis, and JS drives --gallery-img-y (a yPercent value) so the img drifts inside the frame while the frame itself parallaxes via GSAP's y. Same pattern as the brand-intro photo strip. */ .gallery__item { overflow: hidden; } .gallery__item img { display: block; inline-size: 100%; block-size: auto; transform: scale(1.15) translateY(var(--gallery-img-y, 0%)); } /* Gallery アニメーション削除済み: 以前は clip-path wipe / scale zoom / blur reveal (::after) の 3 本立てで is-revealed 発火時に順次走らせていたが、SP で blur overlay が画像を完全に隠す 不具合があり全撤去。画像は静的に表示されるのみ。 */ .gallery__item--man { position: relative; inline-size: min(1100px, calc(249.84px + 63.49vw)); margin-inline-start: 0; } .gallery__item--hand { position: absolute; inline-size: 500px; inset-block-start: 510px; /* 700 (man height) + 200 (gap below man) - 390 (hand height) */ inset-inline-end: 40px; } .gallery__item--belt { position: absolute; inline-size: 250px; inset-block-start: 860px; inset-inline-start: clamp(64px, -172.31px + 23.08vw, 160px); } /* SP + TB (under 1024px): percentage-based scaled layout shared between phones and tablets. The PC absolute-pixel layout only kicks in ≥1024px. */ @media (width < 1024px) { .gallery { /* craftsmanship のカルーセル直下。section 高さの min が解除された分、 gallery 側の上余白で物理的な距離を確保する。 */ padding-block-start: clamp(4.5rem, 14vw, 7rem); padding-block-end: clamp(3rem, 10vw, 5rem); } .gallery__inner { min-block-size: 0; /* margin は viewport 幅に応じて 4vw 〜 3rem まで可変。 narrow では現状のまま (8vw = 両端 4vw)、wider では最大 6rem (両端 3rem) のマージン。 inner 幅は最大 650px。 */ inline-size: min(calc(100vw - clamp(8vw, 12vw, 6rem)), 650px); aspect-ratio: 1 / 1.35; margin-inline: auto; } .gallery__text-group { top: 12%; left: auto; right: 0; translate: 0; } .gallery__text--en { font-size: clamp(2rem, 9vw, 3rem); } .gallery__text--jp { font-size: clamp(1rem, 4vw, 1.5rem); margin-block-start: 0.5rem; } .gallery__item--man { inline-size: 80%; aspect-ratio: 3 / 4; overflow: hidden; /* Outward drift: 0 at 768vw, -8rem at 1024vw. Pushes man toward the left viewport edge as TB widens. */ margin-inline-start: clamp(-8rem, calc(384px - 50vw), 0px); } .gallery__item--man img { inline-size: 100%; block-size: 100%; object-fit: cover; /* transform: scale(1.15) translateY(...) inherited from base. transform-origin shifts the focal point to the bottom-right of the cropped frame on SP/TB. */ transform-origin: bottom right; } .gallery__item--hand { inline-size: 52%; inset-block-start: 44%; /* Outward drift: 0 at 768vw, -8rem at 1024vw. Pushes hand toward the right viewport edge as TB widens. */ inset-inline-end: clamp(-8rem, calc(384px - 50vw), 0px); aspect-ratio: 3 / 4; overflow: hidden; } .gallery__item--hand img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 40% center; } .gallery__item--belt { inline-size: 30%; inset-block-start: 88%; inset-inline-start: 8%; aspect-ratio: 3 / 4; overflow: hidden; } .gallery__item--belt img { inline-size: 100%; block-size: 100%; object-fit: cover; } } /* ---------------------------------------------------------------- SEC.5 (v2 NEW): COLLECTION — new build Base styles apply for ALL viewports. Display composition (rotated belts, diagonal cross, mockup) scales proportionally via percentage transforms. SP override below switches grid to 1-column and reorders display first. BEM block: collection-v2 (isolated from existing .collection*) ---------------------------------------------------------------- */ /* .collection-stack / __bg / __mask + 関連 keyframes は universal に移管済み (line 3432~ 付近)。SP/TB 専用の上書きが必要な場合だけ追記する。 */ /* Cards in natural flow. 3 cards line up vertically and scroll normally。 */ .collection-v2 { position: static; translate: none; z-index: 2; display: grid; background-color: transparent; padding-block: 0; padding-inline: 0; } /* heading は section 上部に static 配置。calf との gap は moderate。 */ .collection-stack__heading { display: grid; grid-template-columns: 1fr; justify-items: center; padding-inline: clamp(1rem, 2vw, 2rem); margin-block-end: clamp(2rem, 4vw, 4rem); text-align: center; } .collection-stack__heading-text { padding-inline: clamp(2rem, 3vw, 3rem); padding-block-start: clamp(1.25rem, 2.5vw, 2rem); } .collection-stack__heading-title { font-family: var(--font-jp); /* craftsmanship__title と同じサイズ・太さ (hero__video-title の 3/4)。 */ font-size: clamp(2.1rem, 1.575rem + 2.25vw, 3.6rem); font-weight: 600; letter-spacing: 0.12em; line-height: 1.4; color: var(--gray-900); /* 自動改行を止め、改行は （読点の後）でのみ。balance だと 4/4 等分される。 */ word-break: keep-all; margin: 0; /* Mask the rise reveal of the inner span. Inline ends bleed so wide glyphs aren't cropped; block ends bleed slightly for descenders. */ clip-path: inset(-0.2em -1.5em -0.2em -1.5em); } .collection-stack__heading-subtitle { font-family: var(--font-en); font-size: 0.875rem; font-weight: 400; letter-spacing: 0.15em; color: var(--gray-600); margin-block-start: 0.5rem; margin-block-end: 0; clip-path: inset(-0.2em -1.5em -0.2em -1.5em); } /* heading-line / fade-in--visible 系の rise reveal は universal scope (style.css 3398 付近) に統一済み。ここで重複定義していた古い rule は削除 — SP では universal の rule がそのまま走るので、PC と同じアニメーションになる。 */ /* Card title becomes a navigation link to its material detail page. Arrow icon (matching site CTA pattern) sits on the right of the title label. Underline (on the parent h3) darkens on hover. */ .collection-v2__title-link { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 0.75rem; color: inherit; text-decoration: none; transition: opacity 0.3s var(--ease-out-expo); } .collection-v2__title-link:hover { opacity: 0.6; } .collection-v2__title:has(.collection-v2__title-link:hover) { border-block-end-color: var(--gray-900); } .collection-v2__title-link-arrow-wrap { display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 20px; /* gray-600 (0.38) より薄い中グレー。白矢印とのコントラストを保てる範囲で軽め。 */ background-color: oklch(0.62 0 0); border-radius: 9999px; flex-shrink: 0; } .collection-v2__title-link-arrow { display: block; inline-size: 17px; block-size: auto; } .collection-v2__title-link-label { display: inline-block; } /* Card 間は隙間なく接続 (craftmanship__cards: gap 0 と同パターン)。 隣接 card の border-block-start が次セクションの境界線になるため、 上下の余白は card 自身の padding-block で対称に保たれる。 */ .collection-v2 + .collection-v2 { margin-block-start: 0; } /* section 自体に左右 60px (3.75rem) の余白を確保 (craftsmanship__layout と同パターン)。 内側で card を max 90rem + margin: auto で中央寄せにすると、どんな viewport でも craftsmanship と同じ位置で線が引かれる。 */ .collection-v2 { padding-inline: 3.75rem; } /* 全 collection-v2 セクション: text-left / image-right (HTML 自然順) で統一。 線は card 全幅 (border-block-start) で 1 本引かれる。 右カラムは clamp で元の 1fr:2fr 相当の挙動 (1024〜1560px で 37→57rem) を再現、 max-inline-size を 110rem に広げて、左カラムが余裕分を吸収する。 */ .collection-v2__card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(32rem, 1rem + 49vw, 49rem); max-inline-size: 110rem; margin-inline: auto; padding-inline: 0; border-block-start: 1px solid oklch(0 0 0 / 0.2); } .collection-v2:last-of-type .collection-v2__card { border-block-end: 1px solid oklch(0 0 0 / 0.2); } .collection-v2__left, .collection-v2__right { position: relative; z-index: 1; } .collection-v2__left { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding-block: clamp(2rem, 4vw, 3rem); padding-inline: 0; } /* 左カラム左上に 01-03 のナンバー。 大きめ + 太字で存在感を出す。 flex item の margin-block-end: auto で上端に押し上げ、本文は下端寄せ (justify-content: flex-end) を維持。 */ .collection-v2__left::before { content: ""; font-family: var(--font-en); font-size: 2.625rem; font-weight: 600; letter-spacing: 0.12em; color: oklch(0.2 0.005 70); line-height: 1; margin-block-end: auto; } #collection-v2-crocodile .collection-v2__left::before { content: "01"; } #collection-v2-croco-side .collection-v2__left::before { content: "02"; } #collection-v2-croco-matt .collection-v2__left::before { content: "03"; } #collection-v2-calf .collection-v2__left::before { content: "04"; } #collection-v2-ostrich .collection-v2__left::before { content: "05"; } #collection-v2-ostrich-leg-center .collection-v2__left::before { content: "06"; } #collection-v2-ostrich-leg-side .collection-v2__left::before { content: "07"; } /* thumbs を display の左側に縦並び配置。上辺で揃える。 線は card 全幅 (border-block-start on __card) で 1 本引かれる。 */ .collection-v2__right { display: flex; flex-direction: row; align-items: flex-start; gap: clamp(1rem, 2vw, 1.5rem); padding-block: clamp(2rem, 4vw, 3rem); padding-inline: 0; } /* 最後のカード (croco-matt) のみ下 padding を大きく取る。 collection-stack の終端と cta-v2 の境界にゆとりを持たせるため。 */ #collection-v2-croco-matt .collection-v2__left, #collection-v2-croco-matt .collection-v2__right { padding-block-end: clamp(7rem, 14vw, 10.5rem); } .collection-v2__content { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1.5rem, 2vw, 2.25rem); inline-size: 100%; max-inline-size: 28rem; } .collection-v2__color-switch { display: flex; gap: 0.75rem; } .collection-v2__color-button { inline-size: 1.25rem; block-size: 1.25rem; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 9999px; display: grid; place-items: center; outline: 1px solid transparent; outline-offset: 3px; transition: outline-color 0.3s var(--ease-out-expo); } .collection-v2__color-button:hover .collection-v2__color-dot { transform: scale(1.12); } .collection-v2__color-button.is-active { outline-color: oklch(0 0 0 / 0.2); } .collection-v2__color-dot { inline-size: 100%; block-size: 100%; border-radius: 9999px; display: block; transition: transform 0.25s var(--ease-out-expo); } .collection-v2__color-dot--black { background-color: oklch(0.18 0 0); } .collection-v2__color-dot--brown { background-color: oklch(0.32 0.04 50); } .collection-v2__display { position: relative; flex: 1 0 0; min-inline-size: 22rem; aspect-ratio: 5 / 4; background-color: oklch(1 0 0); } /* Display images: both long+short always visible, composition changes via data-state on parent (.collection-v2__display). */ .collection-v2__display { overflow: hidden; } .collection-v2__display-img { position: absolute; top: 50%; left: 50%; inline-size: auto; block-size: auto; object-fit: contain; transform: translate(-50%, -50%); transform-origin: center center; filter: drop-shadow(2px 2px 3px oklch(0 0 0 / 0.3)); transition: transform 1.3s var(--ease-out-expo), block-size 1.3s var(--ease-out-expo), filter 1.3s var(--ease-out-expo), opacity 0.8s var(--ease-out-expo); } /* State "left": both rotated 90deg (vertical), side by side */ /* Shadow override: stronger shadow on screen-bottom (= local +X after 90deg rotation) */ .collection-v2__display[data-state="left"] .collection-v2__display-img { filter: drop-shadow(35px 20px 10px oklch(0 0 0 / 0.22)); } .collection-v2__display[data-state="left"] .collection-v2__display-img--long { block-size: 210%; inline-size: auto; max-inline-size: none; transform: translate(-50%, -50%) translateX(-200%) translateY(-8.5%) rotate(90deg); z-index: 2; } .collection-v2__display[data-state="left"] .collection-v2__display-img--short { block-size: 127%; inline-size: auto; max-inline-size: none; transform: translate(-50%, -50%) translateX(-91%) translateY(16.5%) rotate(90deg); z-index: 1; } /* State "center": diagonal cross */ /* Shadow override: shift shadow to screen-left (local -X + small +Y) */ .collection-v2__display[data-state="center"] .collection-v2__display-img { filter: drop-shadow(-3px 5px 2px oklch(0 0 0 / 0.3)); } .collection-v2__display[data-state="center"] .collection-v2__display-img--long { block-size: 95%; inline-size: auto; max-inline-size: none; transform: translate(-50%, -50%) translateX(-14%) rotate(32deg); z-index: 2; } .collection-v2__display[data-state="center"] .collection-v2__display-img--short { block-size: 65%; inline-size: auto; max-inline-size: none; transform: translate(-50%, -50%) translateX(18%) rotate(52deg); z-index: 1; } /* Per-state visibility: mockup hidden in left/center, long/short hidden in right */ .collection-v2__display[data-state="left"] .collection-v2__display-img--mockup, .collection-v2__display[data-state="center"] .collection-v2__display-img--mockup { opacity: 0; pointer-events: none; } .collection-v2__display[data-state="right"] .collection-v2__display-img--long, .collection-v2__display[data-state="right"] .collection-v2__display-img--short { opacity: 0; pointer-events: none; /* Override the base transform/block-size transition so the previous state's rotation doesn't animate back to vertical while fading out. Hold transform at its prior value during the opacity fade, then snap (0s) once it's invisible. */ transition: opacity 0.5s var(--ease-out-expo), transform 0s linear 0.5s, block-size 0s linear 0.5s, filter 0s linear 0.5s; } /* State "right": mockup fills the display area */ .collection-v2__display[data-state="right"] .collection-v2__display-img--mockup { inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; transform: translate(-50%, -50%); z-index: 2; } .collection-v2__thumbs { display: flex; flex-direction: column; gap: clamp(0.375rem, 0.75vw, 0.75rem); flex-shrink: 0; } /* 非選択を full、選択中を薄く (選択中サムネを dim する方式)。 */ .collection-v2__thumb { display: block; inline-size: 3rem; padding: 0; border: 0; background: none; cursor: pointer; opacity: 1; transition: opacity 0.3s var(--ease-out-expo); } .collection-v2__thumb:not([data-state="right"]) { background-color: oklch(0.976 0 0); } .collection-v2__thumb:not(.is-active):hover { opacity: 0.7; } .collection-v2__thumb.is-active { opacity: 0.4; cursor: default; } .collection-v2__thumb img { inline-size: 100%; block-size: auto; display: block; } .collection-v2__title { font-family: var(--font-jp); font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.5rem); font-weight: 700; letter-spacing: 0.1em; line-height: 1.4; color: var(--gray-900); text-align: start; text-wrap: balance; inline-size: 100%; padding-block-end: clamp(0.75rem, 1vw, 1rem); border-block-end: 1px solid oklch(0.62 0 0); } .collection-v2__title-en { font-family: var(--font-jp); font-size: 0.55em; font-weight: 400; letter-spacing: 0.08em; color: var(--gray-600); margin-inline-start: 0.6em; vertical-align: 0.15em; } .collection-v2__body { font-family: var(--font-jp); font-weight: 300; font-size: var(--font-size-body); line-height: 2; letter-spacing: 0.08em; color: var(--gray-900); text-align: start; /* Safari は text-wrap: pretty を当てると block 幅を意図せず縮める。 デフォルト wrap に固定して回避（hero__video-text-inner の対処と同じ）。 */ text-wrap: wrap; inline-size: 100%; } /* ---------------------------------------------------------------- SEC.5 TB (768px–1023px): keep 2-column layout but give the card a bit more vertical breathing room. Padding-block is the simplest lever — left/right columns grow taller, display は aspect-ratio 固定 なのでそのまま、結果として card 全体の縦幅が増える。 */ @media (width >= 768px) and (width < 1024px) { .collection-v2__left, .collection-v2__right { padding-block: clamp(5rem, 10vw, 8rem); } /* TB: content (color-switch / title / body) を下方向に少しずらす。 左カラムは flex-end 配置なので content は下端に貼り付いている。 translate Y で純粋に視覚位置だけ下げる (兄弟やレイアウトに影響なし)。 */ .collection-v2__content { translate: 0 2rem; } } /* ---------------------------------------------------------------- SEC.5 SP (<768px): 1-column card layout Display + thumbs (right column DOM) move to TOP, then color-switch + title + body (left column DOM) below. Stacking, mask reveal, h2 tracking, shrink/exit animations are inherited from base styles. */ @media (width < 768px) { /* Wider side gutters on SP so the card doesn't sit too close to the viewport edges. */ .collection-v2 { padding-inline: clamp(1.5rem, 5vw, 3rem); } /* Card width: 20rem floor, grows with viewport, capped at 650px. overflow: clip ensures display image transforms (rotated belts at 210% block-size etc.) cannot bleed beyond the card panel. */ .collection-v2__card { grid-template-columns: 1fr; min-inline-size: 20rem; max-inline-size: 650px; margin-inline: auto; overflow: clip; } /* Right column (display + thumbs) shows first, left column below. */ .collection-v2__right { order: -1; } /* Compact vertical padding for mobile so the card fits a typical SP viewport without overflowing past viewport center when sticky. */ .collection-v2__left, .collection-v2__right { padding-block: clamp(1.5rem, 5vw, 2.5rem); padding-inline: clamp(1.25rem, 4vw, 2rem); } /* Right column (display + thumbs) drops side padding so the display fills the full card width — needed because the card itself is now capped at 20rem, and the display composition (rotated belts) needs enough horizontal room to read clearly. Top padding is also dropped so the display sits flush with the top of the card. */ .collection-v2__right { padding-inline: 0; padding-block-start: 0; } /* Drop min-inline-size: 22rem on display AND thumbs — both would force the card to exceed its 20rem max-width, causing the card to overflow beyond its boundaries on small viewports. */ .collection-v2__display, .collection-v2__thumbs { min-inline-size: 0; } /* Align thumbs' left edge with .collection-v2__content (which inherits its inline-start offset from .collection-v2__left's padding). */ .collection-v2__thumbs { align-self: stretch; justify-content: flex-start; padding-inline-start: clamp(1.25rem, 4vw, 2rem); } } /* ---------------------------------------------------------------- SEC.4: Craftsmanship BG fade-in (philosophy-history と同型の scroll-driven) 全ブレークポイント対象。craftsmanship 自身の view-timeline を使い、 entry 100% (= section が viewport を埋め切った瞬間 = PC は背後に pin された動画) から 25dvh スクロールする間に bg を transparent → #E2E1DA 相当へ全画面フェード。 bg が transparent の間は文字を白にし、bg 到達と同時に通常のダーク字へ スナップ (steps(1, end)) — philosophy-history と同じ手法。 ※ SP/TB はフェード前の背後が明るい hero 写真になる瞬間があり、白文字の 可読性が落ちる場面があり得る (ユーザー了承の上で全幅適用)。 非対応ブラウザは static な background-color (即 opaque) + ダーク字に フォールバック。craftsmanship の全 static ルールより後ろに置くこと (同詳細度のためソース順で勝つ必要がある)。 */ @supports (animation-timeline: view()) { .craftsmanship { background-color: oklch(0.909 0.009 100 / 0); color: oklch(0.98 0 0); /* アニメ発火前 (entry 中) も白字を確保 */ view-timeline-name: --craftsmanship-bg-tl; animation: craftsmanship-bg-in linear forwards, craftsmanship-color-in steps(1, end) forwards; animation-timeline: --craftsmanship-bg-tl; animation-range: entry 100% contain 25dvh; } /* color を個別指定している first-screen の子要素 (title / subtitle / lead) を 同じ timeline で白 → ダークへスナップさせる。 */ .craftsmanship__inner .craftsmanship__title, .craftsmanship__inner .craftsmanship__subtitle, .craftsmanship__inner .craftsmanship__lead { color: oklch(0.98 0 0); animation: craftsmanship-color-in steps(1, end) forwards; animation-timeline: --craftsmanship-bg-tl; animation-range: entry 100% contain 25dvh; } /* カード (01 へり返し仕立て / 02 隠しミシン / 03 美錠) の文字も同様に 白 → 各 static 色へスナップ。 */ .craftsmanship__caption-title, .craftsmanship__caption-text { color: oklch(0.98 0 0); animation: craftsmanship-color-in steps(1, end) forwards; animation-timeline: --craftsmanship-bg-tl; animation-range: entry 100% contain 25dvh; } .craftsmanship__caption-num { color: oklch(0.98 0 0); animation: craftsmanship-num-color-in steps(1, end) forwards; animation-timeline: --craftsmanship-bg-tl; animation-range: entry 100% contain 25dvh; } /* カードタイトルの下線も白 → gray-900 へ。 */ .craftsmanship__caption-title .craftsmanship__line { border-block-end-color: oklch(0.98 0 0); animation: craftsmanship-title-line-in steps(1, end) forwards; animation-timeline: --craftsmanship-bg-tl; animation-range: entry 100% contain 25dvh; } /* カード上下の区切り罫線。dark 0.2 alpha 相当の視覚ウェイトを保つため 白も 0.45 alpha にする。SP/TB carousel は border-style: none のため無影響。 */ .craftsmanship__card { border-block-start-color: oklch(0.98 0 0 / 0.45); animation: craftsmanship-card-sep-in steps(1, end) forwards; animation-timeline: --craftsmanship-bg-tl; animation-range: entry 100% contain 25dvh; } .craftsmanship__card:last-of-type { border-block-end-color: oklch(0.98 0 0 / 0.45); animation: craftsmanship-card-sep-in steps(1, end) forwards, craftsmanship-card-sep-end-in steps(1, end) forwards; animation-timeline: --craftsmanship-bg-tl; animation-range: entry 100% contain 25dvh; } } @keyframes craftsmanship-bg-in { from { background-color: oklch(0.909 0.009 100 / 0); } to { background-color: oklch(0.909 0.009 100); } } @keyframes craftsmanship-color-in { from { color: oklch(0.98 0 0); } to { color: var(--gray-900); } } @keyframes craftsmanship-num-color-in { from { color: oklch(0.98 0 0); } to { color: oklch(0.2 0.005 70); } } @keyframes craftsmanship-title-line-in { from { border-block-end-color: oklch(0.98 0 0); } to { border-block-end-color: var(--gray-900); } } @keyframes craftsmanship-card-sep-in { from { border-block-start-color: oklch(0.98 0 0 / 0.45); } to { border-block-start-color: oklch(0 0 0 / 0.2); } } @keyframes craftsmanship-card-sep-end-in { from { border-block-end-color: oklch(0.98 0 0 / 0.45); } to { border-block-end-color: oklch(0 0 0 / 0.2); } } /* ---------------------------------------------------------------- SEC.4B: Craftmanship BG window (parallax fixed-pin slider) 画面幅 (100vw) の帯。中の track (縦長画像 5 枚 × 2 セット) は JS (initCraftWindowParallax) が scroll 毎に transform で viewport 固定し、 CSS の translate アニメ (craft-window-slide) が右→左の無限ループを担当。 transform (固定) と translate (流し) は別プロパティなので合成され、 「固定されたまま流れ続けるスライダーを窓から覗く」が成立する (cta-v2--window と同じ手法の横方向版)。 */ /* wrap: full-bleed の下地。clip-path で窓が刈り込まれている間、左右の帯に craftsmanship セクションと同じ背景色 (#E2E1DA 相当) を見せる。 */ .craftmanship-bg-window-wrap { position: relative; z-index: 1; display: block; inline-size: 100vw; /* main コンテンツの container-padding を打ち消して viewport 端まで bleed */ margin-inline-start: calc(50% - 50vw); background-color: oklch(0.909 0.009 100); } .craftmanship-bg-window { display: block; position: relative; inline-size: 100%; /* 窓の高さ = 画面の縦幅いっぱい (track と同じ 100lvh) → 画像が全面で見える。 */ block-size: 100lvh; overflow: hidden; } /* track: viewport の高さ (100lvh) で画像を敷き、窓はそのスライスを見せる。 画像は 768x1284 (約 3:5 縦長) → 高さ 100lvh・幅 auto で隙間なく横に並ぶ。 */ .craftmanship-bg-window__track { /* position: absolute; */ position: fixed; inset-block-start: 0; inset-inline-start: 0; display: flex; block-size: 100lvh; will-change: transform, translate; animation: craft-window-slide 120s linear infinite; } @media (width < 768px) { .craftmanship-bg-window__track { animation-duration: 60s; } } .craftmanship-bg-window__track img { flex: none; display: block; block-size: 100%; inline-size: auto; max-inline-size: none; aspect-ratio: 768 / 1284; } /* set 2 が set 1 の完全複製なので -50% でシームレスループ。←廃止 */ /* set 2 が set 1 の完全複製なので 768×1284の画像が5枚×2セット でシームレスループ。 */ @keyframes craft-window-slide { from { translate: 0 0; } to { translate: -50% 0; } to { translate: calc(-100svh * 768 / 1284 * 5) 0; } } /* 窓が左右から全幅へ広がる scroll-driven 演出。 旧実装は clip-path: inset を scroll でアニメさせていたが、iOS Safari では clip-path のアニメが GPU 合成されず毎フレーム再描画されてカクつく。 代わりに左右の帯 (::before / ::after, wrap と同じオフホワイト) を transform: translateX で外側へスライドさせて窓を露出する。transform は GPU で 合成されるため Safari でも滑らか。見た目 (帯が縮んで窓が全幅化) は同一。 range: entry 0% (窓上端が viewport 下端) → entry 50% (窓上端が画面中央)。 */ @supports (animation-timeline: view()) { .craftmanship-bg-window { view-timeline-name: --craft-window-tl; } .craftmanship-bg-window::before, .craftmanship-bg-window::after { content: ""; position: absolute; inset-block: 0; inline-size: clamp(2rem, 12vw, 12rem); z-index: 2; background-color: oklch(0.909 0.009 100); pointer-events: none; will-change: transform; animation-timing-function: linear; animation-fill-mode: forwards; animation-timeline: --craft-window-tl; animation-range: entry 0% entry 50%; } .craftmanship-bg-window::before { inset-inline-start: 0; animation-name: craft-window-panel-left; } .craftmanship-bg-window::after { inset-inline-end: 0; animation-name: craft-window-panel-right; } } @keyframes craft-window-panel-left { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes craft-window-panel-right { from { transform: translateX(0); } to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .craftmanship-bg-window__track { animation: none; } .craftmanship-bg-window { animation: none; clip-path: none; } /* reduced-motion ではスライドしないので帯を消して窓を全幅表示にする。 */ .craftmanship-bg-window::before, .craftmanship-bg-window::after { display: none; } } /* SEC.4B TB/SP (<1024px): この窓 (と下地 wrap) は z-index 未指定 (auto) だと、SP/TB で fixed 表示される hero 動画 (--z-hero-video-window: 1000) / --z-bg-cover: 1050 の下に潜って 動画が透ける。wrap ごと固定レイヤーの上に出す (wrap の背景色も見せるため)。 */ @media (width < 1024px) { .craftmanship-bg-window-wrap { /* position: relative; */ /* z-index: var(--z-craftsmanship); */ } } /* ---------------------------------------------------------------- SEC.5 PC: Collection を 3+2 grid layout に再構成 - sticky stack 演出を撤廃 (cards は既に static、bg/view-timeline も解除) - heading: 全幅 1 行目 - row 2 (3 cols): crocodile, croco-side, croco-matt (スタッガー) - row 3 (2 cols): calf, ostrich (スタッガー) - 各 card: image (正方形) 上、thumbs / title / body / color 下 - 既存の display state アニメ (long/short 回転、mockup フェード) はそのまま ---------------------------------------------------------------- */ @media (width >= 1024px) { /* === Sticky bg / view-timeline shrink 解除 === */ .collection-stack__bg { display: none; } #collection-v2-calf, #collection-v2-ostrich, #collection-v2-ostrich-leg-center, #collection-v2-ostrich-leg-side, #collection-v2-crocodile, #collection-v2-croco-side { animation: none; } /* === Collection-stack: 2 col、独立した縦並び。 row の高さ依存をなくすため、HTML を 2 つの wrapper (__col--left / --right) に分割。 各 col 内は flex column で同じ gap → 左右で section 間距離が完全に一致。 */ .collection-stack { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 5rem); /* row-major grid: heading(全幅) / croco|side / matt|calf / ostrich|cta */ row-gap: 8rem; align-items: start; max-inline-size: none; margin-inline: auto; padding-inline: clamp(2rem, 5vw, 5rem); padding-block-start: 14rem; /* 下端の「白→CTA画像」溶け込みは画像 (collection-bg) 側にグラデを焼き込む方式に 変更したため、cta-v2 を重ねる処理は撤去済み。 下 padding を厚くすると、底面揃え (background-position: bottom / origin padding-box) の collection-bg もその分だけ下へ移動する。 */ padding-block-end: 36rem; } /* row-major 配置のため col wrapper を flatten。 section / heading / cta が collection-stack の直接 grid item になり、 ID 単位で明示配置する (DOM 順には依存しない)。 */ .collection-stack__col { display: contents; } /* Heading: 全幅 1 行目、右寄せ (従来の右上位置を踏襲) */ .collection-stack__heading { grid-column: 1 / -1; grid-row: 1; justify-self: end; text-align: end; margin-block-end: 0; } /* 7 カードを上から左右に折り返す row-major で明示配置。 row2: croco | side / row3: matt | calf row4: ostrich | leg-center / row5: leg-side | (cta) */ #collection-v2-crocodile { grid-column: 1; grid-row: 2; } #collection-v2-croco-side { grid-column: 2; grid-row: 2; } #collection-v2-croco-matt { grid-column: 1; grid-row: 3; } #collection-v2-calf { grid-column: 2; grid-row: 3; } #collection-v2-ostrich { grid-column: 1; grid-row: 4; } #collection-v2-ostrich-leg-center { grid-column: 2; grid-row: 4; } #collection-v2-ostrich-leg-side { grid-column: 1; grid-row: 5; } /* CTA は右下 (leg-side の隣) の空きセルに配置 */ .collection-stack__cta-link { grid-column: 2; grid-row: 5; } /* ジグザグ: 右カラム (side / calf / leg-center / cta) を半カードぶん下へずらし、 左カラムと互い違いにする。row-major の読み順は維持。 */ #collection-v2-croco-side, #collection-v2-calf, #collection-v2-ostrich-leg-center, .collection-stack__cta-link { transform: translateY(40%); } /* === Section: padding 解除 === */ .collection-v2 { padding-inline: 0; padding-block: 0; } /* === Card: grid layout (display + color-switch を同じ cell に重ねるため flex から変更) === inline-size: 88% で各 card を cell 幅の 0.88 倍に縮小、margin-inline: auto で中央寄せ。 */ .collection-v2__card { display: grid; grid-template-columns: 1fr; gap: 1.25rem; inline-size: 88%; max-inline-size: none; margin-inline: auto; border-block-start: none; } .collection-v2:last-of-type .collection-v2__card { border-block-end: none; } /* 番号 (01-05) 非表示 */ .collection-v2__left::before { display: none; } /* Wrapper flatten: children を card の直接 flex 子に */ .collection-v2__left, .collection-v2__right, .collection-v2__content { display: contents; } /* === Card 内の grid 配置: title → display (+ color-switch overlay) → thumbs → body === */ .collection-v2__title { grid-row: 1; grid-column: 1; inline-size: 100%; max-inline-size: none; /* タイトル下線 (border-block-end) も解除して plain text 風に。 */ border-block-end: none; padding-block-end: 0; } .collection-v2__display { grid-row: 2; grid-column: 1; aspect-ratio: 5 / 4; inline-size: 100%; min-inline-size: 0; flex: none; /* セクション背景 (oklch 0.909 0.009 100) より「ほんの少し濃い」グレーに。 */ background-color: oklch(0.89 0.009 100); cursor: pointer; transition: opacity 0.4s var(--ease-out-expo); } .collection-v2__display:hover { opacity: 0.7; } /* color-switch は thumbs と同じ row、右側に配置。 display (row 2) の直下に置き、grid gap (1.25rem) ぶんだけ離す。 2 つのボタンを display と同じグレーの角丸長方形で囲む。 */ .collection-v2__color-switch { grid-row: 3; grid-column: 1; justify-self: end; align-self: center; margin-block-start: 0; padding-block: 0.75rem; padding-inline: 1.5rem; border-radius: 9999px; } .collection-v2__thumbs { grid-row: 3; grid-column: 1; flex-direction: row; gap: 0.5rem; margin-block-start: 0; /* cell 全幅に stretch せず content 幅だけ占める → 右側の color-switch のクリックを邪魔しない */ justify-self: start; } /* サムネイル背景を display 背景と同じグレーに。 */ .collection-v2__thumb:not([data-state="right"]) { background-color: oklch(0.92 0.006 85); } /* サムネイルを強制正方形に (3rem × 3rem)。 calf の mockup webp が 100×101 (1px 縦長) で起こる不揃いを CSS 側で補正。 */ .collection-v2__thumb { inline-size: 3rem; block-size: 3rem; aspect-ratio: 1 / 1; overflow: hidden; } .collection-v2__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } /* 本文は thumbs / color-switch (row 3) の下へ。 thumbs 行との距離を card gap (1.25rem) + 1.25rem = 2.5rem に。 */ .collection-v2__body { grid-row: 4; grid-column: 1; inline-size: 100%; max-inline-size: none; margin-block-start: 1.25rem; } /* title 内の link を「ただのテキスト」表示に: 矢印アイコン非表示、 クリック無効、リンクスタイル解除、左寄せ。あとで新しいボタンを作る予定。 */ .collection-v2__title-link { pointer-events: none; display: block; text-align: start; } .collection-v2__title-link-arrow-wrap { display: none; } /* color-button: 元のサイズに戻す (白背景なし)。 */ .collection-v2__color-button { inline-size: 1.25rem; block-size: 1.25rem; background: none; } .collection-v2__color-dot { inline-size: 100%; block-size: 100%; } /* === CTA link: 右カラム (side / calf 列) の X 軸中央に配置 === grid では justify-self が inline 軸 (横)。card は inline-size 88% で セル中央寄せなので、justify-self: center = カード列の中心と一致する。 align-self: center は block 軸 (縦) で row 4 内の縦位置を中央に。 */ .collection-stack__cta-link { position: static; margin-block-start: 2rem; justify-self: center; align-self: center; } /* 最後カード (croco-matt) の bottom padding 解除 */ #collection-v2-croco-matt .collection-v2__left, #collection-v2-croco-matt .collection-v2__right { padding-block-end: 0; } } /* 1920+ ではカードが大きく余白も広がるので、CTA ボタンを calf からもう少し下げる (実距離 = gap 8rem + 5rem = 13rem)。 */ @media (width >= 1920px) { .collection-stack__cta-link { margin-block-start: 5rem; } } /* ---------------------------------------------------------------- SEC.5 SP/TB: Collection を 1 col 縦並びに統一 (PC と同じ新カード構造) - heading → crocodile → croco-side → croco-matt → calf → ostrich の順 - 各 card は title 上、display、body、thumbs + color の grid - 旧 sticky stack 演出は完全に撤廃 ---------------------------------------------------------------- */ @media (width < 1024px) { .collection-stack__bg, .collection-stack__mask { display: none; } #collection-v2-calf, #collection-v2-ostrich, #collection-v2-ostrich-leg-center, #collection-v2-ostrich-leg-side, #collection-v2-crocodile, #collection-v2-croco-side { animation: none; } .collection-stack { display: flex; flex-direction: column; gap: clamp(4rem, 10vw, 7rem); padding-inline: var(--container-padding); padding-block-start: clamp(6rem, 14vw, 12rem); /* SP/TB: 下背景 (底面の余白 + collection-bg) を約 3 倍に伸ばす。 */ padding-block-end: clamp(18rem, 42vw, 36rem); } /* col wrapper を flatten。中の section が stack の直接子として並ぶ。 */ .collection-stack__col { display: contents; } /* DOM 順: crocodile, croco-matt, ostrich (col-left), heading, croco-side, calf (col-right)。 order で視覚順序を「heading → crocodile → croco-side → croco-matt → calf → ostrich」に。 */ .collection-stack__heading { order: 0; justify-self: start; text-align: start; margin-block-end: 2rem; } #collection-v2-crocodile { order: 1; } #collection-v2-croco-side { order: 2; } #collection-v2-croco-matt { order: 3; } #collection-v2-calf { order: 4; } #collection-v2-ostrich { order: 5; } #collection-v2-ostrich-leg-center { order: 6; } #collection-v2-ostrich-leg-side { order: 7; } /* section: sticky 撤廃、padding 解除。 inline-size: 100% を明示しないと、margin-inline: auto により flex item の stretch が無効化され「内容幅に縮む」→ カードごとに本文量で幅がバラつき、 display 箱 (inline-size: 100%) のサイズも不揃いになる。100% で上限幅まで 均一に広げ、margin-inline: auto は超過分を中央寄せにするだけにする。 */ .collection-v2 { position: static; inset-block-start: auto; translate: none; padding: 0; margin: 0; inline-size: 100%; max-inline-size: 500px; margin-inline: auto; } /* Card: PC と同じ grid 4-row 構造 */ .collection-v2__card { display: grid; grid-template-columns: 1fr; gap: 1rem; inline-size: 100%; min-inline-size: 0; max-inline-size: none; margin-inline: 0; padding: 0; border-block-start: none; border-block-end: none; } .collection-v2:last-of-type .collection-v2__card { border-block-end: none; } .collection-v2__left::before { display: none; } /* 内側 wrapper を flatten */ .collection-v2__left, .collection-v2__right, .collection-v2__content { display: contents; } /* Title */ .collection-v2__title { grid-row: 1; grid-column: 1; inline-size: 100%; max-inline-size: none; border-block-end: none; padding-block-end: 0; } .collection-v2__title-link { pointer-events: none; display: block; text-align: start; } .collection-v2__title-link-arrow-wrap { display: none; } /* Display */ .collection-v2__display { grid-row: 2; grid-column: 1; aspect-ratio: 5 / 4; inline-size: 100%; min-inline-size: 0; flex: none; /* セクション背景より「ほんの少し濃い」グレー (PC と揃える)。 */ background-color: oklch(0.89 0.009 100); cursor: pointer; transition: opacity 0.4s var(--ease-out-expo); } .collection-v2__display:hover { opacity: 0.7; } /* Body */ .collection-v2__body { grid-row: 3; grid-column: 1; inline-size: 100%; max-inline-size: none; } /* Thumbs (左) と color-switch (右) を同じ row 4 に配置 */ .collection-v2__thumbs { grid-row: 4; grid-column: 1; display: flex; flex-direction: row; gap: 0.5rem; margin-block-start: 1.25rem; justify-self: start; align-self: center; padding: 0; } .collection-v2__thumb { inline-size: 3rem; block-size: 3rem; aspect-ratio: 1 / 1; overflow: hidden; padding: 0; } .collection-v2__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .collection-v2__thumb:not([data-state="right"]) { background-color: oklch(0.92 0.006 85); } .collection-v2__color-switch { grid-row: 4; grid-column: 1; justify-self: end; align-self: center; margin-block-start: 1.25rem; } .collection-v2__color-button { inline-size: 1.25rem; block-size: 1.25rem; background: none; } .collection-v2__color-dot { inline-size: 100%; block-size: 100%; } /* CTA link を stack の最後に普通に配置 */ .collection-stack__cta-link { position: relative; top: auto; bottom: auto; inset-inline: auto; align-self: flex-start; order: 99; } } /* ---------------------------------------------------------------- SEC.5 SP/TB (<1024px): collection 見出し (h2 + 英字 subtitle) を craftsmanship セクション見出しと揃える。SP/TB 共通: - collection は右詰め (SP/TB の justify-self: start を上書き) - 横 padding をシンプル化: heading-text の余分な padding-inline を消し、 親 .collection-stack の var(--container-padding) + 共通追加インセットだけに - フォントサイズを craftsmanship 見出し (<1024 共通値) に合わせる h2: clamp(2.8rem, 2.1rem + 3vw, 4.8rem) / 英字: 1rem */ @media (width < 1024px) { .collection-stack__heading { justify-items: end; text-align: end; } .collection-stack__heading-text { padding-inline: 0; } /* 767〜1023px 付近で両見出しを少し内側へ。container-padding に加えて vw 比例の 追加インセット。collection=右詰め / craftsmanship=左詰めなので end / start 側が 内側に寄る。craftsmanship はリード文も見出しと端を揃えるため同じインセットを適用。 */ .collection-stack__heading, .craftsmanship__heading, .craftsmanship__lead { padding-inline: clamp(0rem, 5vw - 1.5rem, 1.5rem); } .collection-stack__heading-title { font-size: clamp(2.8rem, 2.1rem + 3vw, 4.8rem); } .collection-stack__heading-subtitle { font-size: 1rem; } } /* SEC.5 SP (<768px): section / display を 600px 上限で中央寄せ (TB は別途下のブロックで 900px まで拡大するため、ここは SP 限定)。 */ @media (width < 768px) { /* section の幅上限を 500px → 600px に広げる (SP/TB の max-inline-size: 500px が display を 500px で頭打ちにしていたため)。card / display は 100% で追従。 */ .collection-v2 { max-inline-size: 600px; } /* display の最大幅を 600px に制限し、カード内で中央寄せ。 カード幅が 600px 未満のときは inline-size: 100% のまま。 */ .collection-v2__display { max-inline-size: 600px; justify-self: center; } } /* ---------------------------------------------------------------- SEC.5 TB (768–1023px): SP と同様に section へ可動の最大幅を与え、 display を拡大する。768px で 600px → 1024px で 900px に線形に伸びる。 slope = (900-600)/(1024-768) = 1.171875/px → 117.19vw intercept = -300px card / display は inline-size: 100% で section に追従。section は margin-inline: auto で中央寄せ (SP/TB 共通ルールから継承)。 */ @media (width >= 768px) and (width < 1024px) { .collection-v2 { max-inline-size: clamp(600px, 117.19vw - 300px, 900px); } } /* Small ruby used in the hero tagline text (above base, does not affect line-height) */ .tagline__ruby { position: relative; white-space: nowrap; } .tagline__ruby::before { content: attr(data-ruby); position: absolute; inset-inline-start: 50%; inset-block-end: 100%; translate: -50% -0.2em; font-size: 10px; letter-spacing: 0.05em; line-height: 1; white-space: nowrap; color: inherit; pointer-events: none; } /* ---------------------------------------------------------------- SEC.6: CTA v2 (footer の直前に新規追加、中身はこれから作る) セクションに到達した時点で footer と同じ画像をフルスクリーン背景として 表示する。section は最低 100lvh 確保し、bg は cover で全面を覆う。 ---------------------------------------------------------------- */ /* cta-v2 は 100lvh の natural-scroll section。bg / inner / slider は section 内に absolute で閉じ込めて、ページと一緒に流れる。fixed-pin / release / fade-in の機構は撤廃。 */ .cta-v2 { position: relative; /* stacking context root にして absolute 子要素を cta-v2 のレイヤーに閉じ込める。 collection-stack より 1 段上。craftsmanship / gallery / footer より下を維持。 */ z-index: var(--z-cta-v2); min-block-size: 100lvh; padding-block: 0; padding-inline: 0; overflow: hidden; } /* CTA 本文 (title / lead / buttons) は section に absolute 全面で配置、 flex 縦中央寄せで中央に出す。 */ .cta-v2__inner { position: absolute; inset: 0; /* veil (.cta-v2::after, z1) より前面に本文を保つ。 */ z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-block: 5rem; padding-inline: var(--container-padding); } /* スライダー前面の veil: 背景と同色 (--gray-950) を上 = 不透明、下へ向かって透明に。 bg / slider (z0) より前面、本文 (inner, z2) より背面 (z1)。 */ .cta-v2::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, var(--gray-950) 0%, transparent 100%); } /* bg は section 全面の absolute レイヤー。 */ .cta-v2__bg { position: absolute; inset: 0; background: radial-gradient( ellipse at center, oklch(0.22 0 0) 0%, var(--gray-950) 100% ); z-index: 0; pointer-events: none; } /* 左右の縦型スライダー: bg と inner の中間レイヤー (z-index 0、DOM 順で inner より背面)。左は下→上、右は上→下に無限ループ。 画像は同じセットを 2 回繰り返してあるので translate -50% で seamless loop。 */ .cta-v2__slider { position: absolute; inset-block: 0; inline-size: clamp(13rem, 28vw, 26rem); z-index: 0; pointer-events: none; overflow: hidden; } .cta-v2__slider--left { inset-inline-start: 0; } .cta-v2__slider--right { inset-inline-end: 0; } .cta-v2__slider-track { display: flex; flex-direction: column; /* gap は使わず img の margin-block-end で間隔を取る。 gap だと最後の img の後に gap が入らないので、translate -50% が 1 セット分とぴったり一致せず、ループの繋ぎ目で 0.5gap 分ガクッと戻る。 */ inline-size: 100%; will-change: transform; } .cta-v2__slider-track img { inline-size: 100%; block-size: auto; display: block; /* gap 相当の間隔。最後の img にも入れることで track 高さ = 6 × (h + margin)、 translate -50% = 3 × (h + margin) = 1 セット分でシームレスループ。 */ margin-block-end: 1.5rem; /* 10% 透過 = opacity 0.9。slider 親の fade-in (opacity 0→1) は別レイヤー。 */ opacity: 0.9; } /* 25s で 1 セットぶんスクロール。18s だと少し速すぎる。 */ .cta-v2__slider--left .cta-v2__slider-track { animation: cta-slider-up 25s linear infinite; } .cta-v2__slider--right .cta-v2__slider-track { animation: cta-slider-down 25s linear infinite; } /* transform 版で記述。standalone `translate` プロパティだと一部ブラウザで アニメーション補間が効かないケースがあったため。 */ @keyframes cta-slider-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } } @keyframes cta-slider-down { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } } /* SP: スライダーを viewport 外側にずらして、画面端から見切れるように する。中央の hand 画像 / テキストとの干渉を抑える狙い。 */ @media (width < 768px) { .cta-v2__slider--left { inset-inline-start: -5rem; } .cta-v2__slider--right { inset-inline-end: -5rem; } } /* ---------------------------------------------------------------- CTA-V2 slider — TOP ページ専用「散らし」バリアント (.--scatter) 左右 2 本 → 1 本に統合。section 全幅に画像を大小・縦横・左右位置を ランダムに散らし、下から上へ無限ループ。 他ページ (旧 --left/--right の 2 本構造) を壊さないため、全て --scatter 配下にスコープし、既存ルールには一切手を入れない。 旧 .cta-v2__slider-track img (詳細度 0,1,1) を上書きするため variant は 必ず 2 クラス (0,2,0) で指定する。 */ .cta-v2__slider--scatter { inset-inline: 0; inline-size: 100%; } .cta-v2__slider--scatter .cta-v2__slider-track { align-items: flex-start; /* 6 枚に増えた分ゆっくりめ。set 2 が set 1 の完全複製なので -50% で seamless。 */ animation: cta-slider-up 42s linear infinite; } /* 各画像: object-fit: cover で aspect-ratio どおりにトリミング → 縦長/横長を生成。 幅・aspect・左右オフセット (align-self + margin-inline) を variant 別に変えて散らす。 */ .cta-v2__slider--scatter .cta-v2__slide { flex: none; display: block; block-size: auto; object-fit: cover; opacity: 0.75; /* 旧 .cta-v2__slider-track img の margin-block-end:1.5rem を打ち消す (縦間隔は variant の margin-block-start で vw 基準に統一)。 */ margin-block-end: 0; } /* 配置ロジック (参考: naturehood-pj.com/zinen homeConceptImages): 幅を vw で <50vw に抑え、align-self で左右に振り、負の margin-block-start で 直前の画像の「隣」に引き上げる → 横並びペアが生まれる。寸法は全て vw 基準。 9 枚にして、サイズ・横位置・縦間隔・ペア/単独の出方を不規則にし、パターンを消す。 縦の流れ: [a左+b右] c左 [d右+e左] f右 [g左+h右] i中央 — ペアと単独を不等間隔で混在。 ペアの次の画像は、ペアの「背の高い側」の下端を越える margin で重なりを回避。 */ /* 「真横にピッタリ揃う」「左端が縦一直線」を避けるため: - 各ペアは margin-block-start でわざと上下に段差をつける (片方を高く) - 同じ側 (左/右) の画像は margin-inline をバラけさせ、端が揃わないように - 単独 (c / f / i) は中央寄りに置いて縦のラインを断ち切る */ .cta-v2__slider--scatter .cta-v2__slide--a { /* 縦長・左 (b と段違い横並び) */ align-self: flex-start; inline-size: 40vw; aspect-ratio: 3 / 4; margin-inline-start: 12vw; margin-block-start: 8vw; } .cta-v2__slider--scatter .cta-v2__slide--b { /* 横長・右・小 (a より下にずらして隣へ) */ align-self: flex-end; inline-size: 28vw; aspect-ratio: 4 / 3; margin-inline-end: 6vw; margin-block-start: -30vw; } .cta-v2__slider--scatter .cta-v2__slide--c { /* 小・正方・中央右 単独 (下の e が上へ引き上がるので、x 方向で離して重なりを回避) */ align-self: flex-start; inline-size: 18vw; aspect-ratio: 1 / 1; margin-inline-start: 50vw; margin-block-start: 16vw; } .cta-v2__slider--scatter .cta-v2__slide--d { /* 大きい横長・右 (e と段違い横並び) */ align-self: flex-end; inline-size: 48vw; aspect-ratio: 16 / 9; margin-inline-end: 0; margin-block-start: 7vw; } .cta-v2__slider--scatter .cta-v2__slide--e { /* 細い縦長・左 (d とペア・左下寄りへ) margin-inline-start を減らして左へ、margin-block-start の負を弱めて少し下へ。 左端が a(12vw)/g(3vw) と揃わない 8vw に。 */ align-self: flex-start; inline-size: 26vw; aspect-ratio: 9 / 16; margin-inline-start: 8vw; margin-block-start: -32vw; } .cta-v2__slider--scatter .cta-v2__slide--f { /* 横長・中央右 単独 */ align-self: flex-end; inline-size: 34vw; aspect-ratio: 4 / 3; margin-inline-end: 18vw; margin-block-start: 9vw; } .cta-v2__slider--scatter .cta-v2__slide--g { /* 横長・左 (h と段違い横並び) */ align-self: flex-start; inline-size: 42vw; aspect-ratio: 4 / 3; margin-inline-start: 3vw; margin-block-start: 7vw; } .cta-v2__slider--scatter .cta-v2__slide--h { /* 小・正方・右 (g より下にずらして隣へ) */ align-self: flex-end; inline-size: 22vw; aspect-ratio: 1 / 1; margin-inline-end: 10vw; margin-block-start: -16vw; } .cta-v2__slider--scatter .cta-v2__slide--i { /* 縦長・中央 単独 */ align-self: flex-start; inline-size: 30vw; aspect-ratio: 3 / 4; margin-inline-start: 36vw; margin-block-start: 12vw; } /* ---------------------------------------------------------------- CTA-V2 「窓式」バリアント (.--window, TOP ページ専用) — オーバーレイ構成: 1. 背景 = 暗一色 (--gray-950, 見出し背景と同じ)。collage の隙間から覗く色。 2. その上を collage が「viewport 固定 (JS transform) + 上昇 (translate アニメ)」で流れる。 3. さらに前面に見出し / リード / ボタンを重ねる。 slider / inner / section は base (絶対オーバーレイ) をそのまま使い、--window では 背景色と collage の流し方だけ差し替える。他ページ (旧オーバーレイ) は無変更。 */ .cta-v2--window .cta-v2__bg { /* radial-gradient → 暗一色。= 見出し/リード/ボタンの背景と同じ色。 */ background: var(--gray-950); } /* viewport 固定 (JS transform) は slider に当てるので、ここではループだけ。 Safari で確実に GPU 合成させるため、ループは transform で記述 (1 要素 1 transform)。 */ .cta-v2--window .cta-v2__slider { will-change: transform; } .cta-v2--window .cta-v2__slider-track { animation: cta-slider-up-win 42s linear infinite; will-change: transform; } @keyframes cta-slider-up-win { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } } /* 旧 SEC.6: footer 内 CTA — そのまま維持 */ .cta { text-align: center; margin-block-end: 4rem; } .cta__inner { max-inline-size: 1600px; margin-inline: auto; } .cta__title { font-family: var(--font-jp); /* SP 下限 (375px〜) で 20px、624px で 1.25rem 切れて漸増、1024px で 24px、 1824px で 32px キャップ。 */ font-size: clamp(1.25rem, 0.86rem + 1vw, 2rem); font-weight: 300; letter-spacing: 0.2em; line-height: 1.8; /* writing-mode: vertical-rl だと margin-block-end は title 自身の block axis (左方向) に効いてしまうので、物理 margin-bottom で title 下 (= 親 flex column の次要素 lead との距離) を確保。 PC (>=1024px) は専用 media query で 1.5rem に詰める (下方で上書き)。 */ margin-bottom: 3rem; color: oklch(1 0 0); /* hero-copy と同じ縦書き。
で改行された 2 行が右→左の 2 列縦書きに。 親 (.cta-v2__inner) の text-align: center は縦書きでは「縦方向中央寄せ」 として作用するので、start に上書きして 2 列とも上端揃えにする。 */ writing-mode: vertical-rl; text-align: start; /* lead と同じ「白 × difference」反転ブレンドで、暗背景・hand 画像の 明るい部分どちらでも自然にコントラストが付く。 */ mix-blend-mode: difference; } /* PC: 縦書きタイトルと lead の距離を少し詰める。 */ @media (width >= 1024px) { .cta__title { margin-bottom: 1.5rem; } } .cta__lead { font-family: var(--font-jp); font-weight: 300; /* 375px で 16px、1440px で 18px の fluid。 */ font-size: clamp(1rem, 0.96rem + 0.19vw, 1.125rem); line-height: 1.6; color: oklch(1 0 0); letter-spacing: 0.05em; margin-block-end: 2rem; /* 白文字 × difference: header と同じ「常に読める反転」。暗背景では 白のまま、明るい部分 (hand 画像のハイライト) では黒に反転。 */ mix-blend-mode: difference; } .cta__buttons { display: flex; flex-direction: column; gap: 1rem; align-items: center; } @media (width >= 600px) { .cta__buttons { flex-direction: row; justify-content: center; gap: 0.75rem; } } /* ---------------------------------------------------------------- BUTTONS ---------------------------------------------------------------- */ .btn { position: relative; display: flex; align-items: center; justify-content: center; inline-size: 350px; padding-block: 1rem; padding-inline: 3.5rem; border: none; border-radius: 9999px; transition: opacity var(--transition-base); text-align: center; } .btn:hover { opacity: 0.6; } /* 他の CTA / 詳細リンクと揃えた → アイコン (白丸 + 反転矢印)。ボタン右端に 絶対配置、テキストはボタン中央のまま。 */ .btn__arrow-wrap { position: absolute; inset-inline-end: 1.5rem; inset-block-start: 50%; translate: 0 -50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .btn__arrow { display: block; inline-size: 21px; block-size: auto; } .btn__text { font-family: var(--font-jp); font-size: var(--font-size-body); font-weight: 400; letter-spacing: 0.1em; color: var(--color-text-primary); } .btn--primary { background-color: var(--gray-600); } .btn--secondary { background-color: oklch(0.27 0 0); } @media (width <= 768px) { .btn { /* 375px viewport で 340px まで広げる。viewport - 2rem (32px) を 上限にして、横ハミ出しを防ぎつつ最大 340px。 */ inline-size: min(340px, calc(100vw - 2rem)); } } /* TB: ボタン幅を viewport で線形補間。768 で 320px → 1023 で 350px。 1024 以上は base の 350px と一致。式: 230px + 11.75vw を clamp。 */ @media (width >= 768px) and (width < 1024px) { .btn { inline-size: clamp(280px, calc(230px + 11.75vw), 350px); } .btn__text { white-space: nowrap; } } /* ---------------------------------------------------------------- SEC.7: FOOTER フルスクリーン (100lvh) で表示。CTA を上部、footer__main を下部に 振り分けて余白を取る。 ---------------------------------------------------------------- */ .footer { position: relative; /* gallery / craftsmanship SP / cta-v2 fixed 子要素より上。header / mobile-menu より下を維持。 */ z-index: var(--z-footer); isolation: isolate; padding: 4rem var(--container-padding); overflow: hidden; background-color: oklch(1 0 0); display: flex; } .footer__inner { position: relative; z-index: 1; max-inline-size: 1600px; margin-inline: auto; inline-size: 100%; display: flex; flex-direction: column; } /* CTA は cta-v2 に移植済み、footer は content 高で nav + logo だけ表示。 */ .footer__nav-list { /* 上 4 項目 (Philosophy / Craftsmanship / Collection / Experience) を 横並び。最後の .footer__nav-sub だけ flex-basis: 100% で改行させて Philosophy の真下に左揃えで配置。 */ display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 2.75rem 2.5rem; } .footer__nav-list > .footer__nav-sub { flex-basis: 100%; } /* 上 4 項目 (Philosophy / Craftsmanship / Collection / Experience) 間にだけ 区切り線を入れる。.footer__nav-sub は除外。flex の gap 中央に絶対配置で 描く。PC は横並びなので縦線、SP は縦積みなので横線（SP 用は < 768px ブロック で上書き）。 */ .footer__nav-list > li:not(.footer__nav-sub) + li:not(.footer__nav-sub) { position: relative; } .footer__nav-list > li:not(.footer__nav-sub) + li:not(.footer__nav-sub)::before { content: ''; position: absolute; /* column-gap 2.5rem の中央 = -1.25rem */ inset-inline-start: -1.25rem; inset-block: 0; inline-size: 1px; background: oklch(0 0 0 / 0.2); } .footer__nav-list a { display: flex; flex-direction: column; transition: opacity var(--transition-base); } .footer__nav-list a:hover { opacity: 0.7; } .footer__nav-jp { font-family: var(--font-jp); line-height: 1.4; font-size: 1rem; /* 16px 固定 (全デバイス共通) */ font-weight: 500; color: var(--gray-900); } .footer__nav-sub { display: flex; flex-direction: row; align-items: center; gap: 1.5rem; } .footer__nav-sub .footer__nav-jp { font-size: 0.9375rem; /* 15px 固定 (全デバイス共通) */ font-weight: 500; } .footer__nav-sub a + a { border-inline-start: 2px solid oklch(0 0 0 / 0.2); padding-inline-start: 1.5rem; } .footer__nav-en { font-family: var(--font-en); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.12em; color: var(--gray-600); } .footer__main { display: flex; justify-content: space-between; align-items: center; gap: 2rem; inline-size: min(100%, 1600px); margin-inline: auto; } /* 〜1000px: nav (4 項目 + sub) と footer__end (logo + copyright) を縦積み。 1000〜1023 は元の横並びを維持して PC との橋渡し。 */ @media (width < 1000px) { .footer__main { flex-direction: column; align-items: stretch; gap: 0; } .footer__end { align-items: flex-start; /* nav-list との間を負マージンで詰める。CSS では padding は負値不可 なので margin-block-start でマイナス。 */ margin-block-start: -1.5rem; } } /* SP (〜767px): 旧仕様に戻す。 - nav 4 項目を縦積み + 中央寄せ - sub の 3 項目も縦積み + 中央寄せ（border 区切り線は外す） - footer__end (SNS / logo / copyright) も中央寄せ */ @media (width < 768px) { .footer__nav-list { flex-direction: column; align-items: center; gap: 2rem; } .footer__nav-list a { align-items: center; text-align: center; } /* SP では横線。row-gap 2rem の中央 = -1rem に配置。 */ .footer__nav-list > li:not(.footer__nav-sub) + li:not(.footer__nav-sub)::before { inset-inline-start: 50%; inset-inline-end: auto; inset-block-start: -1rem; inset-block-end: auto; translate: -50% 0; inline-size: 300px; block-size: 1px; } .footer__nav-sub { flex-direction: column; align-items: center; gap: 0.75rem; inline-size: 100%; margin-block-start: 0.5rem; } .footer__nav-sub a + a { border-inline-start: none; padding-inline-start: 0; } .footer__main { align-items: center; } .footer__end { inline-size: 100%; align-items: center; text-align: center; margin-block-start: 3.5rem; } .footer__sns { justify-content: center; align-self: center; } .footer__logo { align-self: center; } .footer__copyright { align-self: center; text-align: center; /* ロゴとコピーライトの間に追加マージン。base の gap: 1rem に上乗せして合計 2rem。 */ margin-block-start: 1rem; } } .footer__end { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; /* nav が広がっても footer__end (logo + copyright) は content 幅を維持。 flex-shrink: 0 で潰さず、copyright は 1 行で収まる。 */ flex-shrink: 0; } /* Instagram / Facebook を KUNISTEIN ロゴの上に横並び。footer__end は flex-direction: column / align-items: flex-end なので、SNS 行も右寄せに 配置される。 */ .footer__sns { display: flex; gap: 1rem; align-items: center; /* SNS 行と下の KUNISTEIN ロゴの間隔を 1rem (gap) + 1rem (margin) = 2rem に。 */ margin-block-end: 1rem; } .footer__sns-link { display: inline-flex; inline-size: 30px; block-size: 30px; transition: opacity var(--transition-base); } .footer__sns-link:hover { opacity: 0.7; } .footer__sns-icon { inline-size: 100%; block-size: 100%; display: block; } .footer__logo { display: block; transition: opacity var(--transition-base); } .footer__logo:hover { opacity: 0.7; } .footer__logo-img { block-size: 1.6rem; inline-size: auto; display: block; /* SVG が fill="white" 固定なので invert で黒に反転。ロゴは単色なので そのまま白 → 黒に転換できる。 */ filter: invert(1); } .footer__copyright { font-family: var(--font-en); line-height: 1.4; font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--gray-900); white-space: nowrap; } /* ---------------------------------------------------------------- STATIC SUB-PAGES (contact, privacy-policy, …) index.html の hero に依存しない素直な縦組みページ。背景は body と 同じ off-white、本文は --gray-900 系のダークで読ませる。 ---------------------------------------------------------------- */ .page-static { background-color: oklch(0.976 0 0); } /* ---------------------------------------------------------------- BREADCRUMB 固定ヘッダー高さ分の余白を確保しつつ、コンテンツ領域の左端に揃える。 現在ページは a ではなく span にして非インタラクティブに。 ---------------------------------------------------------------- */ .breadcrumb { padding-block: clamp(6.5rem, 12vw, 9rem) 0; padding-inline: var(--container-padding); } .breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0; padding: 0; list-style: none; font-family: var(--font-en); font-size: var(--font-size-small); letter-spacing: 0.18em; line-height: 1.4; color: var(--warm-600); } .breadcrumb__item { display: inline-flex; align-items: center; gap: 0.75rem; } .breadcrumb__item + .breadcrumb__item::before { content: "/"; color: oklch(0 0 0 / 0.25); font-weight: 300; } .breadcrumb__link { color: var(--warm-600); text-decoration: none; transition: color var(--transition-base); } .breadcrumb__link:hover { color: var(--gray-900); } .breadcrumb__current { color: var(--gray-900); } /* PHILOSOPHY 固有の hero / 見出しは assets/css/pages/philosophy.css へ 切り出し。下層ページ追加時は同様に pages/.css を作って index.html から style.css の後にロードする運用。 */ .page-hero { padding-block: clamp(8rem, 14vw, 13rem) clamp(2.5rem, 6vw, 4.5rem); padding-inline: var(--container-padding); text-align: center; } .page-hero__inner { display: flex; flex-direction: column; align-items: center; max-inline-size: 48rem; margin-inline: auto; } /* 順序: title (h1) → subtitle (en) → lead。flex column で並べ、 個別の margin-block-end ではなく要素ごとに必要な余白を直接指定する。 */ .page-hero__title { order: 1; font-family: var(--font-jp); font-size: var(--font-size-section-title); font-weight: 600; letter-spacing: 0.2em; line-height: 1.5; color: var(--gray-900); margin: 0; } .page-hero__subtitle { order: 2; font-family: var(--font-en); font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.9375rem); font-weight: 400; letter-spacing: 0.32em; color: var(--warm-600); margin: 0; margin-block-start: 0.75rem; } .page-hero__lead { order: 3; font-family: var(--font-jp); font-size: var(--font-size-body); font-weight: 300; line-height: 2; letter-spacing: 0.06em; color: var(--gray-800); text-wrap: pretty; margin: 0; margin-block-start: clamp(1.5rem, 3vw, 2.5rem); } /* ---------------------------------------------------------------- CONTACT FORM ---------------------------------------------------------------- */ .contact-form-wrap { padding-inline: var(--container-padding); padding-block-end: clamp(5rem, 10vw, 9rem); } .contact-form { max-inline-size: 60rem; margin-inline: auto; } .contact-form__note { font-family: var(--font-jp); font-size: var(--font-size-small); line-height: 1.6; letter-spacing: 0.06em; color: var(--warm-600); margin-block-end: clamp(1.5rem, 3vw, 2.5rem); display: inline-flex; align-items: center; gap: 0.5rem; } .form-required { display: inline-block; font-family: var(--font-jp); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.14em; line-height: 1; color: oklch(1 0 0); background-color: var(--warm-600); padding-inline: 0.55rem; padding-block: 0.35rem; border-radius: 0.125rem; vertical-align: middle; } .form-field { display: grid; grid-template-columns: 1fr; gap: 0.65rem; padding-block: clamp(0.85rem, 1.6vw, 1.25rem); border-block-start: 1px solid oklch(0 0 0 / 0.08); } .form-field:last-of-type { border-block-end: 1px solid oklch(0 0 0 / 0.08); } @media (width >= 768px) { .form-field { grid-template-columns: 13rem 1fr; column-gap: 2.5rem; align-items: center; padding-block: 1.5rem; } .form-field--align-top { align-items: start; } .form-field--align-top .form-field__label { padding-block-start: 0.75rem; } } .form-field__label { font-family: var(--font-jp); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.14em; line-height: 1.4; color: var(--gray-900); display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; } .form-field__control { inline-size: 100%; min-inline-size: 0; } /* Inputs / select / textarea — 共通の素 (off-white bg + warm 細枠) */ .form-input, .form-select, .form-textarea { inline-size: 100%; font-family: var(--font-jp); font-size: 1rem; font-weight: 300; line-height: 1.6; letter-spacing: 0.04em; color: var(--gray-900); background-color: oklch(1 0 0); border: 1px solid oklch(0 0 0 / 0.18); border-radius: 0.125rem; padding-block: 0.85rem; padding-inline: 1.1rem; transition: border-color var(--transition-base), box-shadow var(--transition-base); } .form-input::placeholder, .form-textarea::placeholder { color: var(--warm-400); font-weight: 300; letter-spacing: 0.04em; } .form-input:hover, .form-select:hover, .form-textarea:hover { border-color: oklch(0 0 0 / 0.32); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--gray-900); box-shadow: 0 0 0 1px var(--gray-900); } .form-input:user-invalid, .form-select:user-invalid, .form-textarea:user-invalid { border-color: oklch(0.5 0.13 25); } .form-textarea { min-block-size: 12rem; resize: vertical; font-family: var(--font-jp); } /* Select は native chevron を消して、SVG 矢印を背景で描く */ .form-select-wrap { position: relative; } .form-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gray-900) 50%), linear-gradient(135deg, var(--gray-900) 50%, transparent 50%); background-position: calc(100% - 1.5rem) calc(50% - 3px), calc(100% - 1.1rem) calc(50% - 3px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-inline-end: 2.75rem; cursor: pointer; } /* default の "選択してください" 状態でも黒のまま (placeholder 風にしない) */ .form-select:has(option[value=""]:checked) { color: var(--gray-900); } /* 郵便番号 / 電話番号: 細い数値入力を横並び */ .form-zip, .form-tel { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .form-zip__mark { font-family: var(--font-jp); font-size: 1rem; color: var(--warm-600); } .form-zip__sep, .form-tel__sep { font-family: var(--font-jp); color: var(--warm-600); font-size: 1rem; user-select: none; } .form-input--zip { inline-size: clamp(5rem, 18vw, 7rem); text-align: center; letter-spacing: 0.1em; } .form-input--tel { inline-size: clamp(4.5rem, 16vw, 7rem); text-align: center; letter-spacing: 0.1em; padding-inline: 0.5rem; } /* wpcf7 */ .contact-form .wpcf7-response-output { color: var(--gray-900); } /* ---------------------------------------------------------------- PRIVACY ROW (link button + checkbox) ---------------------------------------------------------------- */ .form-privacy { margin-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } /* チェックボックスの文言中、"プライバシーポリシー" だけ太字＋下線で リンク化。クリックで /privacy-policy/ に遷移。 */ .form-checkbox__link { font-weight: 700; text-decoration: underline; text-underline-offset: 0.25em; color: inherit; transition: opacity var(--transition-base); } .form-checkbox__link:hover { opacity: 0.6; } .form-checkbox { display: inline-flex; align-items: center; gap: 0.85rem; cursor: pointer; font-family: var(--font-jp); font-size: 0.95rem; line-height: 1.6; letter-spacing: 0.08em; color: var(--gray-900); } .form-checkbox input { appearance: none; position: absolute; inline-size: 0; block-size: 0; opacity: 0; pointer-events: none; } .form-checkbox__box { position: relative; display: inline-block; vertical-align: bottom; inline-size: 1.25rem; block-size: 1.25rem; border: 1px solid var(--warm-600); background-color: oklch(1 0 0); border-radius: 0.125rem; flex-shrink: 0; transition: background-color var(--transition-base), border-color var(--transition-base); } .form-checkbox:has(input:checked) .form-checkbox__box { background-color: var(--gray-900); border-color: var(--gray-900); } .form-checkbox:has(input:checked) .form-checkbox__box::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 6px; inline-size: 6px; block-size: 11px; border-inline-end: 2px solid oklch(1 0 0); border-block-end: 2px solid oklch(1 0 0); rotate: 45deg; } .form-checkbox input:focus-visible + .form-checkbox__box { outline: 2px solid var(--color-accent); outline-offset: 2px; } .form-checkbox:hover .form-checkbox__box { border-color: var(--gray-900); } /* ---------------------------------------------------------------- SUBMIT ---------------------------------------------------------------- */ .form-submit { display: flex; justify-content: center; margin-block-start: clamp(1.5rem, 3vw, 2.5rem); } .form-submit__btn { cursor: pointer; font-family: var(--font-jp); /* native button の余計な default を消す */ appearance: none; } .form-submit__btn:disabled { opacity: 0.4; cursor: not-allowed; } /* 送信 / 修正の 2 ボタン並び (確認ページ) — 縦並び固定 */ .form-submit--pair { flex-direction: column; gap: 1.25rem; align-items: center; } /* 「記入内容を修正する」用の text-only 変種。背景なし・本文色は dark、 既存の白矢印 SVG を invert(1) で黒に反転して文字右横に置く。 */ .btn--text { background-color: transparent; } .btn--text:hover { opacity: 0.6; } .btn--text .btn__text { color: var(--gray-900); } .btn--text .btn__arrow { filter: invert(1); } /* ---------------------------------------------------------------- CONFIRM LIST (送信内容のご確認) form-field と同じ 2 列グリッドで読みやすさを揃える。 ---------------------------------------------------------------- */ .confirm-list { margin: 0; } .confirm-list__row { display: grid; grid-template-columns: 1fr; gap: 0.65rem; padding-block: clamp(1rem, 2vw, 1.5rem); border-block-start: 1px solid oklch(0 0 0 / 0.08); } .confirm-list__row:last-child { border-block-end: 1px solid oklch(0 0 0 / 0.08); } @media (width >= 768px) { .confirm-list__row { grid-template-columns: 13rem 1fr; column-gap: 2.5rem; align-items: start; padding-block: 1.5rem; } } .confirm-list__label { font-family: var(--font-jp); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.14em; line-height: 1.4; color: var(--gray-900); margin: 0; } .confirm-list__value { font-family: var(--font-jp); font-size: 1rem; font-weight: 400; line-height: 1.8; letter-spacing: 0.04em; color: var(--gray-900); margin: 0; word-break: break-word; } .confirm-list__value--multiline { /* 改行をそのまま反映 (textarea の入力を維持) */ white-space: pre-wrap; } /* 任意項目が未入力で
が空のまま出力された時のフォールバック。 WP (CF7 等) で空のショートコード値が入った場合、自動的に「ー」を表示。 */ .confirm-list__value:empty::before { content: "ー"; color: var(--warm-600); } /* ---------------------------------------------------------------- THANKS PAGE ---------------------------------------------------------------- */ .thanks-block { padding-inline: var(--container-padding); padding-block-end: clamp(5rem, 10vw, 9rem); } .thanks-block__actions { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; margin-block-start: clamp(1rem, 3vw, 2rem); } /* .btn--text は「文字 + 矢印」を 1 グループとしてボタン中央に寄せ、 テキストと矢印を近接させる。.btn--primary など base の絶対配置を そのまま使うバリアントには影響しない。 */ .btn--text .btn__arrow-wrap { position: static; translate: none; margin-inline-start: 0.85rem; } /* 矢印を文字の左に置き、向きを反転 (戻る系のアクション用) */ .btn--text-reverse .btn__arrow-wrap { margin-inline-start: 0; margin-inline-end: 0.85rem; } .btn--text-reverse .btn__arrow { rotate: 180deg; } /* SP のみ改行を効かせる br (PC では非表示) */ .thanks-br-sp { display: inline; } @media (width >= 768px) { .thanks-br-sp { display: none; } } /* ---------------------------------------------------------------- LEGAL DOC (privacy-policy など長文の規約系ページ) ---------------------------------------------------------------- */ .legal-section { padding-inline: var(--container-padding); padding-block-end: clamp(5rem, 10vw, 9rem); } .legal-doc { max-inline-size: 52rem; margin-inline: auto; color: var(--gray-900); /* h2 の連番カウンター。01. / 02. … で自動採番。 */ counter-reset: legal-h2; } .legal-doc__h2 { font-family: var(--font-jp); font-size: clamp(1.125rem, 0.95rem + 0.75vw, 1.5rem); font-weight: 600; letter-spacing: 0.16em; line-height: 1.6; color: var(--gray-900); margin-block-start: clamp(2.5rem, 5vw, 4rem); margin-block-end: clamp(1rem, 2vw, 1.5rem); padding-block-end: 0.75rem; border-block-end: 1px solid oklch(0 0 0 / 0.15); counter-increment: legal-h2; display: flex; align-items: baseline; gap: 0.7em; /* base の text-wrap: balance を解除。balance は狭い幅で日本語の助詞や 句読点の前で不自然に折り返すため。pretty + auto-phrase で文節単位の 自然な改行に。 */ text-wrap: pretty; word-break: auto-phrase; } .legal-doc__h2::before { content: counter(legal-h2, decimal-leading-zero) "."; font-family: var(--font-en); font-size: 0.85em; font-weight: 400; letter-spacing: 0.08em; color: var(--warm-600); flex-shrink: 0; } .legal-doc__h2:first-child { margin-block-start: 0; } .legal-doc__h3 { font-family: var(--font-jp); font-size: clamp(1rem, 0.92rem + 0.4vw, 1.125rem); font-weight: 600; letter-spacing: 0.12em; line-height: 1.6; color: var(--gray-900); margin-block-start: clamp(1.75rem, 3.5vw, 2.5rem); margin-block-end: 0.85rem; text-wrap: pretty; word-break: auto-phrase; } .legal-doc p { font-family: var(--font-jp); font-size: var(--font-size-body); font-weight: 300; line-height: 2; letter-spacing: 0.06em; color: var(--gray-800); margin-block-end: 1rem; text-wrap: pretty; } .legal-doc p:last-child { margin-block-end: 0; } .legal-doc__list { /* base reset で list-style: none が当たっているので戻す */ list-style: disc; margin-block: 1rem 1.5rem; padding-inline-start: 1.5rem; } .legal-doc__list li { font-family: var(--font-jp); font-size: var(--font-size-body); font-weight: 300; line-height: 2; letter-spacing: 0.06em; color: var(--gray-800); } .legal-doc a { color: var(--gray-900); text-decoration: underline; text-underline-offset: 0.25em; transition: opacity var(--transition-base); } .legal-doc a:hover { opacity: 0.6; } /* ---------------------------------------------------------------- STORES (取扱店舗ページ) SP/TB: 縦積み (page-hero → map → list)。 PC (>=1024px): 2 カラム grid。左 3fr が viewport 全高の sticky 地図、 右 2fr (page-hero + 店舗リスト) は body スクロールに従って流れる。 ---------------------------------------------------------------- */ .stores-section { display: flex; flex-direction: column; /* SP/TB ではマップを viewport 幅一杯にしたいので、section レベルでは padding-inline を持たない。代わりに page-hero / stores-list 個別に padding-inline を設定して、マップだけ edge-to-edge にする。 */ padding-inline: 0; padding-block-end: clamp(5rem, 10vw, 9rem); } /* SP では .stores-side を box ツリーから消す → 中の page-hero と stores-list が stores-section の直接 flex item になり、order で並べ替え。 */ .stores-side { display: contents; } /* SP/TB order: map → page-hero → list */ .stores-section > .stores-map-wrap { order: 1; } .stores-section .page-hero { order: 2; } .stores-section .stores-list { order: 3; } .stores-map-wrap { /* SP/TB は viewport 幅 edge-to-edge。flex column 配下では inline-size: 100% を明示しないと幅が潰れるため必須。 */ inline-size: 100%; margin-block-end: clamp(3rem, 6vw, 5rem); /* explicit block-size を持たせて Leaflet が container サイズを取れる 状態を保証する。中の .stores-map に block-size: 100% を効かせるため。 */ block-size: clamp(360px, 60dvh, 580px); } .stores-map { block-size: 100%; inline-size: 100%; min-block-size: 360px; border: 1px solid oklch(0 0 0 / 0.12); background: oklch(0.95 0 0); overflow: hidden; /* Leaflet の地図 fall-back 表示 */ z-index: 0; position: relative; } /* SP/TB ではマップが先 → page-hero (h1) → リスト の順なので、 page-hero デフォルトの「fixed-header 回避用」大きい上余白は不要。 section 間隔 (3〜4rem) だけ確保する。PC は @media で別途上書き。 */ .stores-section .page-hero { padding-block-start: clamp(2.5rem, 5vw, 4rem); } .stores-list { inline-size: 100%; max-inline-size: 64rem; margin-inline: auto; list-style: none; padding-block: 0; /* section が padding-inline: 0 になったので、リスト側に padding を 戻す。マップ (edge-to-edge) と差別化。 */ padding-inline: var(--container-padding); } /* ----- PC: 2 カラムレイアウト ----- */ @media (width >= 1024px) { .stores-section { display: grid; grid-template-columns: 3fr 2fr; grid-template-areas: "map side"; column-gap: 0; align-items: start; padding-inline: 0; padding-block-end: 0; } .stores-map-wrap { grid-area: map; max-inline-size: none; margin: 0; /* viewport 全高の sticky 地図。 */ position: sticky; inset-block-start: 0; block-size: 100dvh; align-self: start; } .stores-map { block-size: 100%; min-block-size: 0; border: none; border-inline-end: 1px solid oklch(0 0 0 / 0.1); } /* SP の display: contents を解除して通常の flex column に。 page-hero と stores-list が縦に並ぶ。stores-side 自体は body と一緒に スクロールするので、店舗リストが画面内をスクロールする見た目になる。 */ .stores-side { display: flex; flex-direction: column; grid-area: side; padding-inline: clamp(2rem, 3.5vw, 4rem); padding-block-end: clamp(4rem, 7vw, 6rem); } /* page-hero を side 内部用に再調整。デフォルトの中央寄せ大余白を解除し、 左寄せ + ヘッダー高 (10rem) 分の上余白に詰める。 */ .stores-side .page-hero { padding-inline: 0; padding-block: calc(var(--header-height) + 1rem) clamp(2rem, 3.5vw, 3rem); text-align: start; } .stores-side .page-hero__inner { align-items: flex-start; max-inline-size: none; } .stores-side .page-hero__lead { text-align: start; } /* 右カラム (約 40vw) では section-title 既定サイズだと大きすぎるので、 PC のみ少しトーンダウン。SP/TB の縦積みでは中央寄せの page-hero としてベースサイズのまま使う。 */ .stores-side .page-hero__title { font-size: clamp(1.5rem, 0.9rem + 1.1vw, 2rem); } /* PC では .stores-side が padding-inline を持つので、stores-list 側の padding-inline / max-inline-size は不要 (二重余白を防ぐ)。 */ .stores-side .stores-list { padding-inline: 0; max-inline-size: none; margin-inline: 0; } } .stores-list-group { margin-block-end: clamp(2.5rem, 5vw, 4rem); } .stores-list-group:last-child { margin-block-end: 0; } .stores-list-group-title { font-family: var(--font-jp); font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); font-weight: 600; letter-spacing: 0.16em; line-height: 1.6; color: var(--gray-900); margin: 0; margin-block-end: clamp(1rem, 2vw, 1.5rem); padding-block-end: 0.75rem; border-block-end: 1px solid oklch(0 0 0 / 0.35); text-wrap: pretty; } .stores-list-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .stores-list-item { border-block-start: 1px solid oklch(0 0 0 / 0.08); display: flex; flex-direction: column; gap: 0.85rem; padding-block: clamp(1.25rem, 2.5vw, 1.75rem); padding-inline: clamp(0rem, 1.5vw, 1rem); transition: background-color var(--transition-base); } .stores-list-item:last-child { border-block-end: 1px solid oklch(0 0 0 / 0.08); } .stores-list-item.is-active { background-color: oklch(0 0 0 / 0.04); } .stores-list-item-btn { appearance: none; background: transparent; border: none; padding: 0; text-align: start; cursor: pointer; font-family: var(--font-jp); color: var(--gray-900); display: flex; flex-direction: column; gap: 0.6rem; transition: opacity var(--transition-base); } .stores-list-item-btn:hover { opacity: 0.7; } .stores-list-item-name { font-family: var(--font-jp); font-size: 1rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1.5; color: var(--gray-900); margin: 0; } .stores-list-item-body { display: flex; flex-direction: column; gap: 0.25rem; } .stores-list-item-address, .stores-list-item-tel { font-family: var(--font-jp); font-size: 1rem; font-weight: 300; line-height: 1.8; letter-spacing: 0.04em; color: var(--warm-600); margin: 0; } .stores-list-item-link { display: inline-flex; align-items: center; gap: 0.6rem; align-self: flex-start; font-family: var(--font-jp); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.1em; color: var(--gray-900); transition: opacity var(--transition-base); } .stores-list-item-link:hover { opacity: 0.6; } .stores-list-item-link-arrow-wrap { display: inline-flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 18px; /* index の collection-v2 カードの矢印背景と同じ中グレー */ background-color: oklch(0.62 0 0); border-radius: 9999px; flex-shrink: 0; } .stores-list-item-link-arrow { display: block; inline-size: 16px; block-size: auto; } /* ---------------------------------------------------------------- LEAFLET POPUP — ブランドトーン合わせ ---------------------------------------------------------------- */ .leaflet-popup-content-wrapper { border-radius: 2px; background: oklch(0.99 0 0); box-shadow: 0 4px 20px oklch(0 0 0 / 0.15); } .leaflet-popup-content { margin: 1rem 1.25rem; font-family: var(--font-jp); font-size: var(--font-size-small); font-weight: 300; line-height: 1.7; color: var(--gray-900); letter-spacing: 0.04em; } .leaflet-popup-content strong { display: block; font-family: var(--font-jp); font-weight: 600; margin-block-end: 0.4rem; font-size: 0.95rem; letter-spacing: 0.08em; } .leaflet-popup-tip { background: oklch(0.99 0 0); } .leaflet-container { font-family: var(--font-jp); } .leaflet-control-attribution { font-size: 10px; background: oklch(1 0 0 / 0.85); } /* ---------------------------------------------------------------- CTA-V2 — STATIC PAGE OVERRIDE index.html の cta-v2 は collection-stack のスクロールに連動して fade-in / release する設計だが、static page (contact など) では その依存元が無いので、常に「is-released + is-visible」相当の状態に 固定して footer 直前に通常フローで積む。 ---------------------------------------------------------------- */ .page-static .cta-v2 { min-block-size: 100lvh; } .page-static .cta-v2__inner, .page-static .cta-v2__bg, .page-static .cta-v2__slider { /* fixed → absolute に変えて cta-v2 内に閉じ込める。 transition を無効化して初期描画から表示状態へ。 */ position: absolute; inset-block-start: auto; inset-block-end: 0; block-size: 100lvh; opacity: 1; visibility: visible; transition: none; } .page-static .cta-v2__inner { inset-inline: 0; pointer-events: auto; } .page-static .cta-v2__bg { inset-inline: 0; inline-size: 100%; } .page-static .cta-v2__slider--left { inset-inline-start: 0; } .page-static .cta-v2__slider--right { inset-inline-end: 0; } /* SP: ベース定義の負 inset (-5rem) を維持して画面端から見切れさせる。 */ @media (width < 768px) { .page-static .cta-v2__slider--left { inset-inline-start: -5rem; } .page-static .cta-v2__slider--right { inset-inline-end: -5rem; } } } /* ================================================================ UTILITIES ================================================================ */ @layer utilities { .sp-only { display: none; } .pc-only { display: inline; } @media (width <= 768px) { .sp-only { display: inline; } .pc-only { display: none; } } /* Native scroll lock — tagline 登場アニメ中に SP のタッチスクロールも止めるため。 Lenis は smoothTouch: false なのでタッチは native、overflow + touch-action で抑える。 */ html.is-scroll-locked, html.is-scroll-locked body { overflow: hidden; touch-action: none; overscroll-behavior: none; } } /* ================================================================ ACCESSIBILITY & PRINT (outside @layer for override) ================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; } html { scroll-behavior: auto; } .fade-in { opacity: 1; translate: none; } /* cta-v2 の左右スライダーは装飾的なループのみで読書妨害にならないので、 reduced-motion 下でも回し続ける (一律 0.01ms 化の例外)。 */ .cta-v2__slider--left .cta-v2__slider-track { animation: cta-slider-up 25s linear infinite !important; } .cta-v2__slider--right .cta-v2__slider-track { animation: cta-slider-down 25s linear infinite !important; } } a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 0.25rem; } @media print { .header, .mobile-menu { display: none; } body { color: oklch(0 0 0); background: oklch(1 0 0); } }