/* ========================================================= SHE SAID SO — style.css コンクリート／黒／白 ＋ 電球色 写真は実寸が小さいため、原寸を超えて引き伸ばさない設計にしている ========================================================= */ :root{ --ink: #14110E; --ink-2: #1E1A16; --paper: #F0EEE9; --concrete: #D9D6D0; --mute: #8C8781; --lamp: #F0C68A; --f-disp: "Archivo Black", "Zen Kaku Gothic New", sans-serif; --f-body: "Archivo", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; --f-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; --pad: clamp(20px, 5vw, 90px); --maxw: 1180px; --sheet: 980px; /* 写真グリッドの最大幅（原寸を超えないため） */ --ease: cubic-bezier(.16,1,.3,1); /* 時間帯による光（JS が を切り替える） */ --tint:#ffffff; --tint-a:.05; --img-b:1; --img-s:1; --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); } /* 一日の光の実際の値は main.js の RAMP が持ち、スクロールに応じて --ink / --paper / --concrete / --lamp / --tint を直接書き換える。 上の :root はその初期値（＝JS が動かないときの見た目）。 は現在の時間帯の名前が入るだけで、見た目は制御していない。 */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--ink); color:var(--paper); font-family:var(--f-body); font-size:16px; line-height:1.9; letter-spacing:.02em; overflow-x:hidden; font-feature-settings:"palt" 1; } body.is-locked{ overflow:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } h1,h2,h3,p,dl,dd,figure,ul{ margin:0; padding:0; } ul{ list-style:none; } ::selection{ background:var(--ink); color:var(--paper); } /* ---------- 粒子・周辺光量落ち ---------- */ .grain{ position:fixed; inset:-50%; z-index:9998; pointer-events:none; opacity:.05; background-image:var(--noise); animation:grain 1.1s steps(4) infinite; } @keyframes grain{ 0%{transform:translate(0,0)} 25%{transform:translate(-2%,1%)} 50%{transform:translate(1%,-2%)} 75%{transform:translate(-1%,-1%)} 100%{transform:translate(0,0)} } .vignette{ position:fixed; inset:0; z-index:9996; pointer-events:none; background:radial-gradient(130% 110% at 50% 50%, transparent 52%, rgba(0,0,0,.42) 100%); } /* 一日の光は、重ね合成ではなく地色そのものを差し替える方式にしている （soft-light は中間色にしか効かず、この黒×白の配色ではほぼ無変化だった）。 JS が --ink / --paper / --concrete / --lamp を書き換える。 */ /* ---------- スクロール進捗 ---------- */ .progress{ position:fixed; top:0; left:0; width:100%; height:2px; z-index:950; background:#fff; mix-blend-mode:difference; pointer-events:none; transform:scaleX(0); transform-origin:left; } /* ---------- カーソル（マウス環境のみ） ---------- */ .cursor{ display:none; } @media (hover:hover) and (pointer:fine){ .cursor{ display:block; position:fixed; top:0; left:0; width:34px; height:34px; border:1px solid rgba(255,255,255,.9); border-radius:50%; mix-blend-mode:difference; pointer-events:none; z-index:9997; opacity:0; transform:translate(-50%,-50%); transition:width .35s var(--ease), height .35s var(--ease), opacity .3s, background-color .35s; } .cursor.is-on{ opacity:1; } .cursor.is-big{ width:78px; height:78px; background:rgba(255,255,255,.14); } } /* ---------- 時計ナビ ---------- ページ上の位置を「店の一日（8:00→17:00）」として表示し、 つまんで動かすとその時刻の場所へ移動する。 */ .dial{ display:none; } .js .dial{ display:flex; flex-direction:column; align-items:center; gap:16px; position:fixed; right:clamp(18px,2.4vw,42px); top:50%; transform:translateY(-50%); z-index:880; color:#fff; mix-blend-mode:difference; } @media (max-width:1120px){ .js .dial{ display:none; } } .dial__cap{ font-size:8.5px; letter-spacing:.28em; font-weight:700; line-height:1.9; text-align:center; opacity:.75; } .dial__ends{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:8px; letter-spacing:.22em; font-weight:700; opacity:.55; } .dial__track{ position:relative; width:2px; height:min(46vh,420px); background:rgba(255,255,255,.28); cursor:ns-resize; touch-action:none; } .dial__track:focus-visible{ outline:2px solid #fff; outline-offset:9px; } .dial__fill{ position:absolute; left:0; top:0; width:100%; height:0; background:#fff; } /* 1時間ごとの目盛り */ .dial__tick{ position:absolute; left:50%; width:7px; height:1px; margin-top:-.5px; background:rgba(255,255,255,.45); transform:translateX(-50%); } .dial__tick.is-major{ width:15px; background:rgba(255,255,255,.8); } /* セクション名 */ .dial__mark{ position:absolute; right:16px; transform:translateY(-50%); font-size:8.5px; letter-spacing:.2em; font-weight:700; white-space:nowrap; opacity:.5; transition:opacity .35s; cursor:pointer; background:none; border:0; color:inherit; padding:3px 0; font-family:inherit; } .dial__mark:hover,.dial__mark.is-near{ opacity:1; } /* つまみ */ .dial__handle{ position:absolute; left:50%; top:0; width:26px; height:2px; background:#fff; transform:translate(-50%,-50%); pointer-events:none; } .dial__handle b{ position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%); font-family:var(--f-disp); font-size:17px; letter-spacing:-.01em; font-weight:400; font-variant-numeric:tabular-nums; } /* いまの函館 */ .dial__now{ position:absolute; left:50%; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%; background:#fff; border:0; padding:0; cursor:pointer; color:inherit; } .dial__now b,.dial__now span{ position:absolute; left:calc(100% + 9px); font-size:8px; letter-spacing:.18em; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; } .dial__now b{ top:-9px; } .dial__now span{ top:1px; opacity:.6; } .dial__now.is-out{ opacity:.4; } /* ---------- ロゴ ---------- */ .mark{ font-family:var(--f-disp); letter-spacing:-.085em; line-height:1; font-size:22px; display:block; } .mark__sub{ display:block; font-family:var(--f-body); font-weight:700; font-size:7.5px; letter-spacing:.34em; line-height:1; margin-top:4px; } /* ---------- ローダー ---------- */ .loader{ position:fixed; inset:0; z-index:9999; background:var(--ink); display:grid; place-content:center; gap:30px; justify-items:center; transition:opacity .7s var(--ease), visibility .7s; } .loader.is-done{ opacity:0; visibility:hidden; } .loader__mark{ font-family:var(--f-disp); font-size:clamp(46px,12vw,96px); letter-spacing:-.085em; line-height:1; opacity:0; animation:lm .9s var(--ease) forwards; } @keyframes lm{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:none; } } .loader__bar{ width:min(180px,40vw); height:1px; background:rgba(240,238,233,.2); overflow:hidden; } .loader__bar i{ display:block; height:100%; background:var(--paper); transform:scaleX(0); transform-origin:left; animation:lb 1.4s var(--ease) forwards; } @keyframes lb{ to{ transform:scaleX(1); } } html:not(.js) .loader{ display:none; } /* ---------- ナビ ---------- */ .nav{ position:fixed; top:0; left:0; right:0; z-index:900; display:flex; align-items:center; justify-content:space-between; padding:18px var(--pad); mix-blend-mode:difference; color:#fff; transition:transform .5s var(--ease); } .nav.is-hidden{ transform:translateY(-130%); } .nav__logo{ color:#fff; } .nav__logo .mark{ transition:letter-spacing .4s var(--ease); } .nav__logo:hover .mark{ letter-spacing:-.02em; } .nav__links{ display:flex; gap:30px; position:absolute; left:50%; transform:translateX(-50%); } .nav__links a{ position:relative; display:block; padding-bottom:5px; font-size:11px; letter-spacing:.22em; font-weight:700; color:#fff; } .nav__links a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1.5px; background:#fff; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); } .nav__links a:hover::after,.nav__links a.is-active::after{ transform:scaleX(1); transform-origin:left; } .nav__right{ display:flex; align-items:center; gap:16px; } .status{ display:inline-flex; align-items:center; gap:7px; font-size:10px; letter-spacing:.16em; font-weight:700; color:#fff; } .status__dot{ width:6px; height:6px; border-radius:50%; background:#666; display:block; } .status.is-open .status__dot{ background:#3ddc84; animation:pulse 2.4s infinite; } @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(61,220,132,.6)} 70%{box-shadow:0 0 0 7px rgba(61,220,132,0)} 100%{box-shadow:0 0 0 0 rgba(61,220,132,0)} } .nav__ig{ width:19px; color:#fff; } .nav__ig svg{ width:100%; fill:currentColor; transition:transform .4s var(--ease); } .nav__ig:hover svg{ transform:rotate(-12deg) scale(1.14); } .burger{ display:none; width:26px; height:18px; background:none; border:0; padding:0; cursor:pointer; position:relative; } .burger i{ position:absolute; left:0; width:100%; height:2px; background:#fff; transition:.4s var(--ease); } .burger i:nth-child(1){ top:3px; } .burger i:nth-child(2){ bottom:3px; } .burger.is-on i:nth-child(1){ top:8px; transform:rotate(45deg); } .burger.is-on i:nth-child(2){ bottom:8px; transform:rotate(-45deg); } /* ---------- ドロワー ---------- */ .drawer{ position:fixed; inset:0; z-index:880; background:var(--ink-2); display:flex; flex-direction:column; justify-content:center; gap:38px; padding:110px var(--pad) 40px; clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease); visibility:hidden; } .drawer.is-open{ clip-path:inset(0 0 0 0); visibility:visible; } .drawer__nav{ display:flex; flex-direction:column; } .drawer__nav a{ display:flex; align-items:baseline; gap:16px; padding:16px 0; border-top:1px solid rgba(240,238,233,.14); font-family:var(--f-disp); font-size:clamp(28px,8vw,52px); line-height:1.1; letter-spacing:-.01em; transition:color .35s, padding-left .45s var(--ease); } .drawer__nav a:last-child{ border-bottom:1px solid rgba(240,238,233,.14); } .drawer__nav a:hover{ color:var(--lamp); padding-left:14px; } .drawer__nav em{ font-family:var(--f-body); font-size:11px; font-style:normal; font-weight:700; letter-spacing:.2em; color:var(--mute); } .drawer__nav span{ font-family:var(--f-jp); font-size:11px; letter-spacing:.14em; color:var(--mute); } .drawer__foot{ display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; font-size:12px; line-height:1.9; color:var(--mute); } /* ========================================================= HERO ========================================================= */ .hero{ position:relative; background:var(--ink); overflow:hidden; } /* 外観写真を全面に敷く */ .hero__media{ position:absolute; inset:0; z-index:1; overflow:hidden; } /* 色の変化はスクロールに追従させるので、transition は付けない（遅れて見えるため） */ .hero__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 46%; filter:brightness(var(--img-b)) saturate(var(--img-s)); animation:heroZoom 14s var(--ease) forwards; } @keyframes heroZoom{ from{ transform:scale(1.07); } to{ transform:scale(1); } } /* 時間帯の色かぶり */ .hero__media::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:var(--tint); opacity:var(--tint-a); mix-blend-mode:overlay; } .hero__media::after{ content:""; position:absolute; inset:0; z-index:3; background:linear-gradient(180deg, rgba(10,9,8,.62) 0%, rgba(10,9,8,.14) 24%, rgba(10,9,8,0) 42%, rgba(10,9,8,.32) 64%, rgba(10,9,8,.85) 100%); } /* 時刻表示 */ .hero__clock{ display:inline-flex; align-items:baseline; gap:7px; margin-left:auto; font-variant-numeric:tabular-nums; letter-spacing:.14em; color:var(--lamp); } .hero__clock b{ font-family:var(--f-disp); font-size:13px; letter-spacing:.02em; font-weight:400; } .hero__phase{ color:var(--lamp); } .hero__in{ position:relative; z-index:2; min-height:100svh; color:#fff; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(94px,12vh,140px) var(--pad) clamp(40px,6vh,64px); max-width:var(--maxw); margin-inline:auto; } .hero__eyebrow{ display:flex; align-items:center; gap:10px; font-size:10px; letter-spacing:.3em; font-weight:700; color:rgba(255,255,255,.82); } .hero__eyebrow i{ width:40px; height:1.5px; background:#fff; display:block; } /* 大きな COFFEE はスマホでのみ出す（PC は写真の看板が主役） */ .hero__word{ display:none; font-family:var(--f-disp); font-weight:400; font-size:clamp(62px,16.5vw,150px); line-height:.85; letter-spacing:-.035em; margin-left:-.02em; } .hero__word .l{ display:inline-block; transform:translateY(110%); animation:up 1s var(--ease) forwards; } .hero__word .l:nth-child(1){ animation-delay:.05s } .hero__word .l:nth-child(2){ animation-delay:.11s } .hero__word .l:nth-child(3){ animation-delay:.17s } .hero__word .l:nth-child(4){ animation-delay:.23s } .hero__word .l:nth-child(5){ animation-delay:.29s } .hero__word .l:nth-child(6){ animation-delay:.35s } @keyframes up{ to{ transform:none; } } .hero__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; } .hero__id{ display:flex; flex-direction:column; gap:14px; } .hero__mark .sss{ display:block; font-family:var(--f-disp); font-size:clamp(32px,5.2vw,62px); letter-spacing:-.085em; line-height:.9; } .hero__mark .sss__cap{ display:block; font-weight:700; font-size:clamp(8px,.9vw,10px); letter-spacing:.42em; margin-top:7px; } .hero__jp{ font-family:var(--f-jp); font-weight:700; letter-spacing:.06em; font-size:clamp(17px,2.1vw,26px); line-height:1.6; } .hero__en{ font-size:10px; letter-spacing:.2em; font-weight:600; line-height:2; color:rgba(255,255,255,.72); } .hero__scroll{ display:flex; align-items:center; gap:12px; font-size:10px; letter-spacing:.26em; font-weight:700; color:#fff; padding-bottom:6px; } .hero__scroll i{ width:52px; height:1.5px; background:rgba(255,255,255,.35); position:relative; overflow:hidden; } .hero__scroll i::after{ content:""; position:absolute; inset:0; background:#fff; transform:translateX(-100%); animation:sc 2.2s linear infinite; } @keyframes sc{ 50%{transform:translateX(0)} 100%{transform:translateX(100%)} } /* ========================================================= ステンシル帯 ========================================================= */ .stencil{ position:relative; background:var(--ink); color:var(--paper); padding:clamp(70px,11vw,150px) var(--pad); } .stencil::before{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none; background-image:var(--noise); background-size:240px; } .stencil__in{ position:relative; z-index:2; max-width:var(--maxw); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; } .stencil__txt{ font-family:var(--f-disp); font-size:clamp(28px,6.2vw,84px); line-height:1.06; letter-spacing:-.02em; -webkit-mask-image:var(--noise); mask-image:var(--noise); -webkit-mask-size:260px; mask-size:260px; } .stencil__txt span{ display:block; } .stencil__mark{ font-family:var(--f-disp); font-size:clamp(34px,7vw,92px); letter-spacing:-.085em; line-height:.9; opacity:.9; -webkit-mask-image:var(--noise); mask-image:var(--noise); -webkit-mask-size:200px; mask-size:200px; } /* ---------- マーキー ---------- */ .marquee{ background:var(--paper); color:var(--ink); padding:12px 0; overflow:hidden; } .marquee__track{ display:flex; align-items:center; gap:26px; width:max-content; animation:mq 36s linear infinite; } .marquee__track span{ font-family:var(--f-disp); font-size:14px; letter-spacing:.02em; white-space:nowrap; } .marquee__track b{ font-size:12px; opacity:.4; } @keyframes mq{ to{ transform:translateX(-50%); } } /* ========================================================= セクション共通 ========================================================= */ .sec{ padding:clamp(76px,11vw,150px) var(--pad); position:relative; } .sec > *{ max-width:var(--maxw); margin-inline:auto; position:relative; z-index:1; } /* 背景に薄く沈む大きな番号 */ .sec[data-n]::after{ content:attr(data-n); position:absolute; z-index:0; pointer-events:none; right:var(--pad); top:clamp(30px,5vw,72px); font-family:var(--f-disp); font-size:clamp(90px,17vw,250px); line-height:.78; letter-spacing:-.05em; color:currentColor; opacity:.055; } @media (max-width:900px){ .sec[data-n]::after{ font-size:clamp(70px,20vw,120px); opacity:.05; } } .sec__head{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:clamp(36px,6vw,68px); } .sec__num{ font-size:11px; letter-spacing:.24em; font-weight:700; opacity:.5; } /* そのセクションが「一日のうち何時にあたるか」 */ .sec__time{ margin-left:auto; display:flex; align-items:baseline; gap:8px; font-size:9.5px; letter-spacing:.22em; font-weight:700; opacity:.75; } .sec__time b{ font-family:var(--f-disp); font-size:20px; letter-spacing:-.01em; font-weight:400; font-variant-numeric:tabular-nums; color:var(--lamp); } @media (max-width:700px){ .sec__time{ margin-left:0; width:100%; } } .sec__title{ font-family:var(--f-disp); font-weight:400; font-size:clamp(42px,8.6vw,124px); line-height:.88; letter-spacing:-.04em; } .sec__ja{ font-family:var(--f-jp); font-size:11.5px; letter-spacing:.2em; opacity:.6; } .js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); } .js .reveal.is-in{ opacity:1; transform:none; } /* 見出しは下からせり上がるマスク送り */ .js .sec__title.reveal{ opacity:1; transform:none; overflow:hidden; padding-bottom:.06em; } .js .sec__title span{ display:inline-block; transform:translateY(108%); transition:transform 1.05s var(--ease); } .js .sec__title.is-in span{ transform:none; } /* ========================================================= 画像 ========================================================= */ .ph{ position:relative; overflow:hidden; background:var(--ink-2); aspect-ratio:var(--ar, 1); } .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; filter:brightness(var(--img-b)) saturate(var(--img-s)); transition:transform 1.4s var(--ease); } /* 一日の光を写真にも乗せる。写真には中間色があるので overlay がよく効く （平坦な黒・白の面には効かないため、そちらは地色ごと差し替えている） */ .ph__day{ position:absolute; inset:0; z-index:3; pointer-events:none; background:var(--tint); opacity:var(--tint-a); mix-blend-mode:overlay; } .ph__art{ position:absolute; inset:0; z-index:1; } /* 下から開くリビール（フェードではなく“めくれ上がる”） */ .js .ph.reveal{ opacity:1; transform:none; clip-path:inset(0 0 100% 0); transition:clip-path 1.15s var(--ease); } .js .ph.reveal img{ transform:scale(1.16); } .js .ph.reveal.is-in{ clip-path:inset(0 0 0 0); } .js .ph.reveal.is-in img{ transform:scale(1); } .ph.is-in:hover img{ transform:scale(1.045); } /* キャプションはホバーでせり上がる */ .ph::before{ content:""; position:absolute; inset:auto 0 0 0; height:44%; z-index:4; pointer-events:none; background:linear-gradient(180deg, transparent, rgba(20,17,14,.62)); opacity:0; transition:opacity .5s var(--ease); } .ph::after{ content:attr(data-cap); position:absolute; left:14px; bottom:13px; z-index:5; font-size:9px; letter-spacing:.2em; font-weight:700; color:#fff; transform:translateY(140%); transition:transform .55s var(--ease); } .ph:hover::before{ opacity:1; } .ph:hover::after{ transform:none; } @media (hover:none){ .ph::before{ opacity:1; } .ph::after{ transform:none; } } /* 写真が無いときのダミー */ .ph__art--facade{ background:linear-gradient(180deg,#cfccc6 0%,#a9a59e 46%,#2a2724 47%,#171412 100%); } .ph__art--interior{ background:linear-gradient(180deg,#e7e4de,#b7b2aa 55%,#4a443d 100%); } .ph__art--counter{ background:linear-gradient(190deg,#3a332c,#241f1a 55%,#15120f 100%); } .ph__art--ice{ background:linear-gradient(200deg,#7d654c,#241c15); } .ph__art--cookie{ background:linear-gradient(160deg,#c8a276,#5f3f22); } .ph__art--cups{ background:linear-gradient(180deg,#8f8b85,#2c2925); } .ph__art--mug{ background:linear-gradient(160deg,#3b3733,#111 70%); } .ph__art--wall{ background:linear-gradient(150deg,#d3cfc8,#a8a49d); } .ph__art--board{ background:linear-gradient(160deg,#dedad3,#b0aca5); } /* 写真グリッド（原寸を超えないよう幅を絞る） */ .sheet{ max-width:var(--sheet); margin-inline:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,16px); } /* ========================================================= ABOUT ========================================================= */ .about{ background:var(--paper); color:var(--ink); } .about__grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(34px,6vw,80px); align-items:start; } .about__copy p{ font-family:var(--f-jp); font-size:14.5px; line-height:2.2; margin-bottom:20px; color:#3B3630; max-width:62ch; } .about__copy .lead{ font-family:var(--f-jp); font-weight:900; color:var(--ink); font-size:clamp(22px,3.3vw,40px); line-height:1.45; letter-spacing:.02em; margin-bottom:28px; } .about__copy em{ font-style:normal; font-weight:700; color:var(--ink); background:linear-gradient(transparent 64%, rgba(20,17,14,.14) 0); } .sign{ font-family:var(--f-disp) !important; font-size:12px !important; letter-spacing:.06em; margin-top:30px; color:var(--ink) !important; } .about__side{ position:sticky; top:96px; display:flex; flex-direction:column; gap:20px; max-width:387px; } /* counter.jpg の原寸 */ .facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .facts li{ border-top:2px solid var(--ink); padding-top:12px; } .facts b{ display:block; font-family:var(--f-disp); font-size:clamp(26px,3.4vw,40px); line-height:1; letter-spacing:-.03em; } .facts span{ font-family:var(--f-jp); font-size:10px; letter-spacing:.12em; line-height:1.7; color:#6C6760; display:block; margin-top:6px; } /* ========================================================= MENU ========================================================= */ .menu{ background:var(--ink); } .menu__wrap{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:clamp(30px,5vw,70px); align-items:start; } .menu__board{ position:sticky; top:96px; } .menu__board .ph{ box-shadow:0 24px 56px -24px rgba(0,0,0,.75); } .menu__board-cap{ font-family:var(--f-jp); font-size:10.5px; letter-spacing:.14em; color:var(--mute); margin-top:12px; } .menu__cat{ display:flex; align-items:baseline; gap:12px; padding-bottom:12px; border-bottom:2px solid rgba(240,238,233,.85); margin-bottom:4px; } .menu__cat--mt{ margin-top:44px; } .menu__cat span{ font-family:var(--f-disp); font-size:clamp(17px,2vw,22px); letter-spacing:-.01em; } .menu__cat em{ font-family:var(--f-jp); font-style:normal; font-size:10px; letter-spacing:.18em; color:var(--mute); } .menu__list li{ padding:16px 0; border-bottom:1px solid rgba(240,238,233,.1); transition:padding-left .5s var(--ease); } .menu__list li:hover{ padding-left:14px; } .menu__list li:hover .mi__p{ color:var(--lamp); } .menu__list li:hover .mi__dots{ border-bottom-color:rgba(240,238,233,.5); } .mi{ display:flex; align-items:baseline; gap:10px; } .mi__n{ font-family:var(--f-jp); font-size:14.5px; font-weight:500; line-height:1.5; } .mi__n i{ display:block; font-family:var(--f-body); font-style:normal; font-size:9px; letter-spacing:.2em; font-weight:600; color:var(--mute); margin-top:4px; } .mi__dots{ flex:1; border-bottom:1px dotted rgba(240,238,233,.25); transform:translateY(-4px); } .mi__p{ font-family:var(--f-disp); font-size:16px; letter-spacing:-.01em; white-space:nowrap; transition:color .4s; } .mi__d{ font-family:var(--f-jp); font-size:11.5px; line-height:1.85; color:var(--mute); margin-top:7px; max-width:38ch; } .menu__foot{ margin-top:26px; font-family:var(--f-jp); font-size:11px; color:var(--mute); } .menu__foot a{ color:var(--paper); border-bottom:1px solid currentColor; } .menu__shots{ margin-top:clamp(34px,5vw,64px); } .menu__shots .ph{ aspect-ratio:1/1; } /* ========================================================= GALLERY ========================================================= */ .gallery{ background:var(--ink); padding-top:0; } /* ---------- 横に流れる SHOP ---------- 基本はただの横スクロール領域（JS が死んでも指で送れる）。 JS が動いているときだけ、縦スクロールに連動して自動で横に流れる。 */ .pan{ position:relative; max-width:none; margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1); } .pan__stick{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; } .pan__stick::-webkit-scrollbar{ display:none; } /* JS が横位置を制御する間はスナップを切る（吸着と制御が競合してカクつくため） */ .js .pan__stick{ position:sticky; top:0; height:100svh; display:flex; align-items:center; scroll-snap-type:none; } .pan__track{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); padding-inline:var(--pad); width:max-content; } .pan__item{ flex:0 0 auto; scroll-snap-align:center; height:clamp(230px,42vh,340px); } /* 340px = interior.jpg の原寸高さ */ .pan__note{ display:flex; flex-direction:column; justify-content:center; gap:16px; width:clamp(280px,34vw,470px); padding-right:clamp(10px,2vw,30px); } .pan__big{ font-family:var(--f-disp); font-size:clamp(34px,5.4vw,72px); line-height:.94; letter-spacing:-.035em; -webkit-mask-image:var(--noise); mask-image:var(--noise); -webkit-mask-size:220px; mask-size:220px; } .pan__small{ font-family:var(--f-jp); font-size:11.5px; line-height:2; letter-spacing:.1em; color:var(--mute); } .pan__sss{ font-family:var(--f-disp); font-size:clamp(56px,9vw,120px); letter-spacing:-.085em; line-height:.86; color:transparent; -webkit-text-stroke:1.5px rgba(240,238,233,.45); } .pan__hint{ display:flex; align-items:center; gap:12px; padding:18px var(--pad) 0; font-size:9.5px; letter-spacing:.26em; font-weight:700; color:var(--mute); } .pan__hint i{ width:44px; height:1.5px; background:var(--mute); display:block; position:relative; overflow:hidden; } .pan__hint i::after{ content:""; position:absolute; inset:0; background:var(--paper); transform:translateX(-100%); animation:sc 2.4s linear infinite; } .js .pan__hint{ position:absolute; left:0; bottom:clamp(24px,6vh,60px); z-index:4; padding-top:0; } .ig-cta{ margin-top:clamp(30px,5vw,56px); display:flex; align-items:center; justify-content:space-between; gap:20px; padding:clamp(22px,3vw,34px) clamp(20px,3vw,38px); border:1.5px solid rgba(240,238,233,.28); position:relative; overflow:hidden; } .ig-cta::before{ content:""; position:absolute; inset:0; background:var(--paper); transform:translateY(101%); transition:transform .6s var(--ease); } .ig-cta:hover::before{ transform:none; } .ig-cta > *{ position:relative; z-index:2; transition:color .4s; } .ig-cta:hover > *{ color:var(--ink); } .ig-cta__l{ font-size:10px; letter-spacing:.26em; font-weight:700; color:var(--mute); } .ig-cta__m{ font-family:var(--f-disp); font-size:clamp(19px,4.2vw,42px); letter-spacing:-.02em; } .ig-cta__r{ font-size:clamp(20px,3vw,32px); } /* ========================================================= INFO ========================================================= */ .info{ background:var(--concrete); color:var(--ink); } .info::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.45; background-image:var(--noise); background-size:220px; mix-blend-mode:multiply; } .info > *{ position:relative; z-index:2; } .info__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,70px); align-items:start; } .info__list > div{ display:grid; grid-template-columns:110px 1fr; gap:16px; padding:16px 0; border-top:1px solid rgba(20,17,14,.2); } .info__list > div:last-child{ border-bottom:1px solid rgba(20,17,14,.2); } .info__list dt{ font-size:10px; letter-spacing:.2em; font-weight:700; padding-top:5px; } .info__list dd{ font-family:var(--f-jp); font-size:14px; line-height:1.9; color:#37322C; } .info__list dd span{ display:block; font-size:11px; color:#6C6760; margin-top:2px; } .info__list dd a{ border-bottom:1px solid rgba(20,17,14,.35); } .info__list dd a:hover{ opacity:.6; } .info__map{ position:sticky; top:96px; } .info__map iframe{ width:100%; height:clamp(280px,44vh,430px); border:0; display:block; filter:grayscale(1) contrast(1.08); transition:filter .5s; background:#c9c6c0; } .info__map:hover iframe{ filter:grayscale(0); } .btn{ margin-top:14px; display:inline-flex; align-items:center; gap:12px; padding:15px 24px; background:var(--ink); color:var(--paper); font-size:11px; letter-spacing:.18em; font-weight:700; position:relative; overflow:hidden; } .btn::before{ content:""; position:absolute; inset:0; background:var(--paper); transform:translateX(-101%); transition:transform .5s var(--ease); } .btn:hover::before{ transform:none; } .btn:hover{ color:var(--ink); } .btn > *{ position:relative; z-index:2; } .btn i{ font-style:normal; } /* ========================================================= FOOTER ========================================================= */ .footer{ background:var(--ink); padding:clamp(60px,8vw,110px) var(--pad) 28px; overflow:hidden; } .footer > *{ max-width:var(--maxw); margin-inline:auto; } /* 一日の終わり。ページ末尾に近づくと出る */ .footer__closed{ display:flex; align-items:center; gap:14px; margin-bottom:clamp(24px,4vw,44px); font-size:10px; letter-spacing:.3em; font-weight:700; color:var(--lamp); border-top:1.5px solid currentColor; border-bottom:1.5px solid currentColor; padding:14px 0; } .footer__closed b{ font-family:var(--f-disp); font-size:clamp(22px,3.4vw,38px); letter-spacing:-.02em; font-weight:400; font-variant-numeric:tabular-nums; } .js .footer__closed{ opacity:0; transform:translateY(14px); transition:opacity .9s var(--ease), transform .9s var(--ease); } .js .footer__closed.is-on{ opacity:1; transform:none; } .footer__quote{ font-family:var(--f-disp); font-size:clamp(24px,5.2vw,68px); line-height:1.1; letter-spacing:-.03em; margin-bottom:clamp(36px,6vw,66px); -webkit-mask-image:var(--noise); mask-image:var(--noise); -webkit-mask-size:240px; mask-size:240px; } .footer__big{ line-height:.8; margin-bottom:26px; } .footer__big span{ display:block; font-family:var(--f-disp); font-size:clamp(80px,22vw,300px); letter-spacing:-.085em; color:transparent; -webkit-text-stroke:1.5px rgba(240,238,233,.3); } .footer__row{ display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between; padding-top:22px; border-top:1px solid rgba(240,238,233,.15); } .footer__c{ font-size:10.5px; letter-spacing:.1em; color:var(--mute); } .footer__nav{ display:flex; flex-wrap:wrap; gap:20px; } .footer__nav a{ font-size:10px; letter-spacing:.2em; font-weight:700; color:var(--mute); transition:color .3s; } .footer__nav a:hover{ color:var(--paper); } .footer__top{ font-size:10px; letter-spacing:.2em; font-weight:700; } /* ========================================================= レスポンシブ ========================================================= */ @media (max-width:1000px){ .about__grid{ grid-template-columns:1fr; } .about__side{ position:static; max-width:387px; } .info__grid{ grid-template-columns:1fr; } .info__map{ position:static; } .menu__wrap{ grid-template-columns:1fr; } .menu__board{ position:static; max-width:281px; } } @media (max-width:760px){ .nav__links{ display:none; } .burger{ display:block; } .status{ display:none; } .sheet{ grid-template-columns:repeat(2,1fr); } /* グリッド項目は justify-self で寄せる。margin:auto だと中身が絶対配置のため幅が 0 に潰れる */ .menu__shots .ph:last-child{ grid-column:1/-1; aspect-ratio:16/10; width:100%; max-width:497px; justify-self:center; } /* スマホでは縦連動をやめ、指で送るカルーセルにする */ .js .pan{ height:auto !important; } .js .pan__stick{ position:static; height:auto; display:block; scroll-snap-type:x mandatory; } .js .pan__hint{ position:static; padding-top:16px; } .pan__item{ height:clamp(240px,66vw,320px); } .pan__note{ width:clamp(240px,70vw,310px); } /* スマホは看板が切れないよう、写真を 3:2 のまま上に置いて文字を下に積む */ .hero__media{ position:relative; inset:auto; aspect-ratio:3/2; } .hero__media img{ animation:none; } .hero__media::after{ background:linear-gradient(180deg,rgba(10,9,8,.5) 0%,rgba(10,9,8,0) 34%); } .hero__in{ min-height:0; color:var(--ink); background:var(--concrete); padding:clamp(24px,6vw,36px) var(--pad) clamp(32px,8vw,44px); gap:22px; } .hero__eyebrow{ color:#5E5A54; } .hero__eyebrow i{ background:var(--ink); } .hero__word{ display:flex; } .hero__en{ color:#5E5A54; } .hero__scroll{ display:none; } .info__list > div{ grid-template-columns:1fr; gap:4px; } .ig-cta{ flex-wrap:wrap; } .stencil__in{ flex-direction:column; align-items:flex-start; } } @media (prefers-reduced-motion:reduce){ *{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; } html{ scroll-behavior:auto; } .js .reveal{ opacity:1; transform:none; } .js .ph.reveal{ clip-path:none; } .js .ph.reveal img{ transform:none; } .js .sec__title span{ transform:none; } .hero__word .l{ transform:none; } .cursor{ display:none !important; } }