/* ========================================================= つきじ治作 — Renewal Mock Night base (墨藍) × Day-shift (生成) for Cuisine section ========================================================= */ /* ===== Digits unified to Japanese (mincho) fonts site-wide ===== Scopes only U+0030–0039 so Latin letters keep their own family. */ @font-face{ font-family:'DigitJP'; src:local('Shippori Mincho Medium'),local('ShipporiMincho-Medium'), local('Shippori Mincho'),local('ShipporiMincho-Regular'), local('Noto Serif JP'),local('NotoSerifJP-Regular'), local('Hiragino Mincho ProN'),local('HiraMinProN-W3'), local('Yu Mincho'),local('YuMincho'),local('游明朝'), local('MS Mincho'),local('ＭＳ明朝'); unicode-range:U+0030-0039,U+002D,U+2010-2015,U+2212,U+FF0D; font-display:swap; } :root{ --ink:#0e1116; /* 墨藍 — Background */ --ink-2:#1c2028; /* Footer */ --paper:#faf7f2; /* Background Light */ --gold:#dfc07a; /* Gold highlights */ --gold-hi:#dfc07a; /* Gold highlights (accent) */ --black:#2a2f3a; /* Text on light */ --mute:#e8e2d4; /* Text on dark BG */ --mid:#5c5a54; /* Mid-tone neutral */ --caption:#8b8679; /* Captions / muted text */ --moss:#2f3b2d; /* 青苔 */ /* ===== オーバーレイの配色（ローダー／ハンバーガーモーダル） ===== どちらもページの地色と同じ面に見せる。既定は暗い地（--ink）。クリーム等、地色が違うページは側でこれらを差し替える（「loader / menu modal — 地色同期」の節を参照）。 */ --loader-bg:var(--ink); --mm-bg:var(--ink); --mm-fg:232,226,212; /* 罫線・弱テキストの基準色（R,G,B） */ --mm-text:#e8e2d4; /* モーダル本文 */ --mm-gold:var(--gold); --mm-gold-hi:var(--gold-hi); --mm-chip-fg:#e8e2d4; /* Occasions の漢字チップ（地は常に濃色なので明色で固定） */ --mm-logo-filter:brightness(0) invert(1) opacity(.85); --mm-photo-filter:saturate(.8) contrast(1.05) brightness(.85); --mm-photo-shadow:0 20px 60px rgba(0,0,0,.5); --mm-glow: radial-gradient(ellipse at 18% 20%, rgba(184,147,90,.08), transparent 55%), radial-gradient(ellipse at 82% 80%, rgba(47,59,45,.18), transparent 60%); --ease:cubic-bezier(.2,.7,.2,1); --bezier-quart:cubic-bezier(.165,.84,.44,1); --serif:'DigitJP',"Shippori Mincho","Noto Serif JP","Yu Mincho","游明朝",serif; --serif-display:'DigitJP',"Shippori Mincho","Noto Serif JP",serif; --sans:'DigitJP',"Shippori Mincho","Noto Serif JP","Yu Mincho","游明朝",serif; --en-serif:'DigitJP',"Cormorant Garamond",serif; --en-body:'DigitJP',"Cormorant Garamond",serif; /* ===== Unified heading scale (page-wide トンマナ) ===== One scale. One family. One letter-spacing system. h2=36px基準。36→26→20→14 の階層。 */ --fs-hero: clamp(30px, 3.2vw, 46px); /* Hero only */ --fs-h2-section: clamp(26px, 2.8vw, 36px); /* All h2 */ --fs-h3: clamp(19px, 1.8vw, 26px); /* Sub-section / grouping titles */ --fs-h4: clamp(15px, 1.4vw, 20px); /* Card / unit titles */ --ls-heading: .24em; /* All JP display headings */ --ls-heading-sub: .22em; /* Sub-headings (slightly tighter) */ --ls-heading-sm: .2em; /* H4-level */ --lh-heading: 1.5; /* Heading line-height across the board */ /* ===== Section container width system ===== Two reusable rules. Use --wrap-max-wide / --wrap-pad-wide for major hero/feature sections (occasions, dish, access, wedding). Use --wrap-max / --wrap-pad for default content (.wrap utility). Any page-scoped container (.biz__wrap, .culture-wrap, etc.) should reference these tokens to stay in sync with the homepage. */ --wrap-max: 1440px; --wrap-pad: clamp(24px, 8vw, 120px); --wrap-max-wide: 1600px; --wrap-pad-wide: clamp(24px, 5vw, 80px); } /* ===== Scrollable table wrapper — animated scroll-hint badge ===== */ .table-scroll{ position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch; } /* Floating circular arrow badge (dark theme default — cream badge + dark arrow) */ .table-scroll::before{ content:""; position:absolute; top:50%;right:16px; width:48px;height:48px; transform:translateY(-50%); pointer-events:none; z-index:3; background: url("data:image/svg+xml;utf8,") no-repeat center/26px 26px, #efe8d6; border-radius:50%; box-shadow:0 6px 18px rgba(0,0,0,.45); opacity:0; transition:opacity .4s ease; } .table-scroll.can-scroll-right::before{ opacity:1; animation:tableScrollHint 1.2s ease-in-out infinite; } @keyframes tableScrollHint{ 0%,100%{transform:translate(0,-50%) scale(1);} 50%{transform:translate(10px,-50%) scale(1.08);} } /* Cream theme — dark badge + white arrow */ body.le-day .table-scroll::before, body.dish-day .table-scroll::before{ background: url("data:image/svg+xml;utf8,") no-repeat center/26px 26px, #1a2638; box-shadow:0 6px 18px rgba(26,38,56,.35); } /* ===== Table column min-widths (max 3-line wrap on mobile) ===== */ .op-list__table,.ch-options__table,.wd-options__table,.ms-options__table,.lg-options__table,.mm-options__table,.gs-options__table,.bq-options__table,.dn-options__table,.kb-options__table,.tc-options__table{min-width:560px;} .op-list__table th,.ch-options__table th,.wd-options__table th,.ms-options__table th,.lg-options__table th,.mm-options__table th,.gs-options__table th,.bq-options__table th,.dn-options__table th,.kb-options__table th,.tc-options__table th{white-space:nowrap;} .mm-guide__table{min-width:640px;} .mm-guide__table td:first-child{white-space:nowrap;} .lg-milestone__table{min-width:480px;} .lg-milestone__table td:first-child{white-space:nowrap;} .recruit-table{min-width:480px;} .recruit-table th{white-space:nowrap;min-width:120px;} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;font-size:16px;scrollbar-gutter:stable;} body{ background:var(--ink); color:var(--mute); font-family:var(--serif); /* Smooth, symmetrical morph for up/down scroll. Expo-like deceleration keeps both the paper→ink and ink→paper directions cinematic. */ transition: background-color 1800ms cubic-bezier(.22,1,.36,1), color 1800ms cubic-bezier(.22,1,.36,1); font-weight:300; line-height:1.95; letter-spacing:.08em; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;height:auto} /* height:auto … width/height 属性を付けたので、枠に収めたときに縦横比が崩れないように（2026-09-11） */ a{color:inherit;text-decoration:none} button{font:inherit;background:none;border:none;color:inherit;cursor:pointer} /* ===== page-wide day/night palette (akagi-futokoro style smooth switch) ===== Non-dish day↔night transitions happen by swapping the body's bg color. Day-zone sections (wedding-wrapper, hospitality, insta, news) keep transparent backgrounds so the body color shows through and morphs smoothly. */ body.is-day{ background-color:var(--paper); color:var(--ink); } /* =================== utilities =================== */ .wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--wrap-pad);} /* Wide-wrap utility — used by major hero/feature sections. Apply class="wrap-wide" to any page-level container to inherit the same horizontal width rule used by .occasions / .dish / .access / .wedding. */ .vert{writing-mode:vertical-rl;} .en{font-family:var(--en-serif);letter-spacing:.3em;text-transform:uppercase;font-size:11px;color:var(--gold);} .en-body{font-family:var(--en-body);font-style:italic;letter-spacing:.04em;} /* reveal */ .reveal{opacity:0;transform:translateY(14px);transition:opacity 1200ms var(--bezier-quart),transform 1200ms var(--bezier-quart);} .reveal.is-in{opacity:1;transform:translateY(0);} /* section titles (standard "gold line + JP + EN label" pattern) */ .sec-title{display:flex;align-items:baseline;gap:20px;margin-bottom:40px;} .sec-title .line{width:56px;height:.5px;background:var(--gold);} .sec-title h2{ font-family:var(--serif-display); font-weight:500; font-size:var(--fs-h2-section); letter-spacing:var(--ls-heading); line-height:var(--lh-heading); } .sec-title .en{font-size:11px;} /* =================== loader =================== */ .loader{position:fixed;inset:0;z-index:2000;background:var(--loader-bg);display:flex;align-items:center;justify-content:center;transition:opacity 1000ms var(--ease),visibility 1000ms var(--ease);} /* Slow blur-up reveal — same curve as the prologue message but stretched so the logo drifts into focus with a deliberate 余韻 (afterglow), then a thin gold line draws itself underneath. */ .loader__stack{display:flex;flex-direction:column;align-items:center;gap:clamp(22px,3vh,36px);} .loader__logo-img{ display:block;width:clamp(160px,16vw,220px);height:auto; opacity:0;filter:blur(18px);transform:translateY(8px) scale(1.02); animation:loaderLogoBlurIn 2600ms var(--bezier-quart) 400ms forwards; } @keyframes loaderLogoBlurIn{ 60%{opacity:.92;filter:blur(1px);transform:translateY(0) scale(1.002);} to{opacity:1;filter:blur(0);transform:translateY(0) scale(1);} } /* Cream-bg variant — same curve, but every keyframe carries brightness(0) so the (white) logo PNG renders solid black on cream loaders. Used by body.le-day / body.dish-day via animation-name override. */ @keyframes loaderLogoBlurInBlack{ 0%{opacity:0;filter:blur(18px) brightness(0);transform:translateY(8px) scale(1.02);} 60%{opacity:.92;filter:blur(1px) brightness(0);transform:translateY(0) scale(1.002);} to{opacity:1;filter:blur(0) brightness(0);transform:translateY(0) scale(1);} } /* Hairline draws from center outward while the logo settles, then holds. */ .loader__line{ display:block;width:clamp(120px,13vw,180px);height:1px; background:linear-gradient(90deg,rgba(216,184,122,0) 0%,var(--gold) 50%,rgba(216,184,122,0) 100%); transform:scaleX(0);transform-origin:center; opacity:0; animation:loaderLineDraw 2200ms var(--bezier-quart) 1800ms forwards; } @keyframes loaderLineDraw{ 0%{transform:scaleX(0);opacity:0;} 20%{opacity:1;} 100%{transform:scaleX(1);opacity:1;} } .loader.hidden{opacity:0;visibility:hidden;} /* =================== header =================== */ .header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:22px clamp(24px,6vw,80px);display:flex;align-items:center;justify-content:space-between;transition:background 600ms var(--ease), backdrop-filter 600ms var(--ease);} .header.is-scrolled{background:rgba(14,17,22,.82);backdrop-filter:blur(14px);} .header__logo{display:inline-flex;align-items:center;color:var(--mute);flex-shrink:0;}/* 右側のボタンが増えてもロゴは縮めない */ .header__logo-img{display:block;width:clamp(120px,11vw,164px);height:auto;transition:opacity .3s;} .header__logo:hover .header__logo-img{opacity:.82;} .header__tools{display:flex;align-items:center;gap:14px;} .tel{font-family:var(--en-body);font-weight:500;font-size:15px;letter-spacing:.05em;color:var(--mute);white-space:nowrap;} .tel::before{content:"TEL. ";font-family:var(--en-serif);font-size:9px;letter-spacing:.3em;color:var(--gold);padding-right:6px;} /* unified stage-style link button — used for the header reserve CTA too */ .btn-reserve .arrow{ display:inline-block;width:20px;height:.5px;background:currentColor; transition:width .4s var(--ease); } .btn-reserve .arrow::after{display:none;} .btn-reserve:hover .arrow{width:30px;} /* language select (pulldown) */ /* English toggle button and sibling header chips (婚礼 / オンラインショップ) */ .lang-en{ font-family:var(--en-serif);font-size:10px;letter-spacing:.3em; color:var(--mute);padding:6px 12px;background:none; border:.5px solid rgba(232,226,212,.5);cursor:pointer; transition:color .3s,border-color .3s,background .3s; white-space:nowrap; display:inline-flex;align-items:center; } .lang-en:hover{color:var(--gold-hi);border-color:var(--gold-hi);background:rgba(184,147,90,.06);} /* 英語特設サイトの表示名が「English Site」（12文字）より長いとき（管理画面で変更可・2026-09-28）。ヘッダーはもともと 1,081〜1,400px で窮屈で、長い名前だとボタンが広がってロゴと予約ボタンがくっつき、 1,081〜1,180px ではメニューボタンが画面外へ押し出された。字間を詰めて「English Site」とほぼ同じ幅に収める（隠すと 1,366px などの一般的なノートPCで出なくなるため、隠さない）。 */ .lang-en.lang-en--long{letter-spacing:.06em;} @media (max-width:1280px){ .lang-en.lang-en--long{letter-spacing:.04em;} } /* Japanese-labelled chips get a slightly looser serif rhythm */ /* Frameless hamburger — three hairlines that collapse into an X on open. */ .menu-toggle{ width:30px;height:22px;position:relative;background:none;padding:0;cursor:pointer; margin-left:4px; } .menu-toggle span{ position:absolute;left:0;right:0;height:1px;background:var(--mute); transition:transform .4s var(--ease),opacity .3s var(--ease),top .4s var(--ease),bottom .4s var(--ease),background .3s; transform-origin:center; } .menu-toggle span:nth-child(1){top:4px;} .menu-toggle span:nth-child(2){top:calc(50% - .5px);} .menu-toggle span:nth-child(3){bottom:4px;} .menu-toggle:hover span{background:var(--gold-hi);} .menu-toggle.is-open span:nth-child(1){top:calc(50% - .5px);transform:rotate(45deg);} .menu-toggle.is-open span:nth-child(2){opacity:0;} .menu-toggle.is-open span:nth-child(3){bottom:calc(50% - .5px);transform:rotate(-45deg);} @media (max-width:1280px){ .tel{font-size:13px;} .lang-en{font-size:9px;padding:5px 10px;letter-spacing:.18em;} .header__tools{gap:14px;}/* ロゴとの間を空けるぶん、右側の並びを詰める */ } @media (max-width:1080px){ .tel{display:none;} .lang-en{display:none;} } /* =================== menu modal (akagi-futokoro inspired) =================== Full-viewport overlay, night-themed (墨藍 × 白磁). Z-index is set above the header (1000) so the header and its hamburger disappear underneath the modal, leaving only the modal's single close button visible. */ .menu-modal{ position:fixed;inset:0;z-index:1500; background:var(--mm-bg); color:var(--mm-text); opacity:0;visibility:hidden;pointer-events:none; transition:opacity 700ms var(--bezier-quart),visibility 0s linear 700ms; overflow-y:auto; } .menu-modal.is-open{ opacity:1;visibility:visible;pointer-events:auto; transition:opacity 700ms var(--bezier-quart),visibility 0s linear 0s; } /* subtle warm glow — two soft radials so the ink plane isn't dead flat */ .menu-modal::before{ content:"";position:absolute;inset:0;pointer-events:none; background:var(--mm-glow); } /* close button — two hairlines forming an X, top-right of the viewport */ .menu-modal__close{ position:fixed;top:28px;right:clamp(24px,4vw,56px); width:32px;height:32px;background:none;padding:0;cursor:pointer;z-index:3; opacity:0;transition:opacity 500ms var(--bezier-quart) 200ms; } .menu-modal.is-open .menu-modal__close{opacity:1;} .menu-modal__close span{ position:absolute;top:50%;left:50%;width:28px;height:1px;background:var(--mm-text); transform-origin:center;transition:background .3s; } .menu-modal__close span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg);} .menu-modal__close span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg);} .menu-modal__close:hover span{background:var(--mm-gold-hi);} /* ===== grid ===== */ .menu-modal__grid{ display:grid; grid-template-columns:minmax(280px,.9fr) minmax(360px,1.2fr) minmax(320px,1fr); min-height:100vh; position:relative; } .menu-modal__grid > *{ position:relative; padding:clamp(40px,10vh,120px) clamp(24px,4vw,56px) clamp(40px,6vh,80px); } /* hairline vertical dividers between columns */ .menu-modal__grid > *:not(:last-child)::after{ content:"";position:absolute;top:clamp(40px,6vh,80px);bottom:clamp(40px,6vh,80px);right:0; width:1px;background:rgba(var(--mm-fg),.12); } /* ===== photo column ===== */ .menu-modal__photo{margin:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;} .menu-modal__photo-top{display:flex;align-items:flex-start;gap:clamp(16px,2vw,28px);margin-bottom:clamp(20px,3vh,32px);} .menu-modal__photo-img{ flex:1;aspect-ratio:4/3;max-width:340px; background-size:cover;background-position:center; filter:var(--mm-photo-filter); box-shadow:var(--mm-photo-shadow); opacity:0;transform:scale(1.04); transition:opacity 1400ms var(--bezier-quart) 300ms,transform 1800ms var(--bezier-quart) 300ms; } .menu-modal.is-open .menu-modal__photo-img{opacity:1;transform:scale(1);} .menu-modal__photo-caption{ writing-mode:vertical-rl; font-family:var(--serif-display);font-weight:500; font-size:clamp(14px,1.2vw,18px);letter-spacing:.3em; color:var(--mm-gold-hi); opacity:0;transform:translateY(20px); transition:opacity 1000ms var(--bezier-quart) 600ms,transform 1000ms var(--bezier-quart) 600ms; } .menu-modal.is-open .menu-modal__photo-caption{opacity:1;transform:translateY(0);} /* ===== occasions links in left column ===== */ .menu-modal__occasions{ display:flex;flex-direction:column;gap:0; opacity:0;transform:translateY(12px); transition:opacity 800ms var(--bezier-quart) 700ms,transform 800ms var(--bezier-quart) 700ms; } .menu-modal.is-open .menu-modal__occasions{opacity:1;transform:translateY(0);} .menu-modal__occasions-kicker{ font-family:var(--en-serif);font-size:10px;letter-spacing:.4em;text-transform:uppercase; color:var(--mm-gold);margin-bottom:14px; } .menu-modal__occ{ display:flex;align-items:center;gap:12px; padding:12px 0; border-bottom:1px solid rgba(var(--mm-fg),.08); text-decoration:none;color:var(--mm-text); transition:color .3s var(--ease); } .menu-modal__occ:first-of-type{border-top:1px solid rgba(var(--mm-fg),.08);} .menu-modal__occ:hover{color:var(--mm-gold-hi);} .menu-modal__occ-kanji{ font-family:var(--serif-display);font-size:18px;font-weight:500; letter-spacing:.05em;color:var(--mm-chip-fg);opacity:.7; padding:3px 8px 3px 12px;flex-shrink:0; transition:opacity .3s var(--ease); } /* グループを増減できるので、色は inc/nav-menus.php が --occ-bg で渡す（2026-09-10）。既定は1つ目の色＝以前の nth-child(2) と同じ。 */ .menu-modal__occ .menu-modal__occ-kanji{background:var(--occ-bg,rgba(102,12,12,.80));} .menu-modal__occ:hover .menu-modal__occ-kanji{opacity:1;color:#fff;} .menu-modal__occ-label{display:flex;flex-direction:column;gap:2px;min-width:0;} .menu-modal__occ-jp{font-family:var(--serif);font-size:12px;letter-spacing:.16em;transition:color .3s var(--ease);} .menu-modal__occ:hover .menu-modal__occ-jp{color:var(--mm-gold-hi);} .menu-modal__occ-arrow{ display:inline-block;width:0;height:.5px;background:currentColor; margin-left:auto;flex-shrink:0;opacity:0; transition:opacity .3s var(--ease),width .3s var(--ease); } .menu-modal__occ:hover .menu-modal__occ-arrow{opacity:.6;width:20px;} .menu-modal__occ-detail{ list-style:none;margin:0;padding:4px 0 10px 42px; display:flex;flex-direction:column;gap:0; } .menu-modal__occ-detail li{border:none;} .menu-modal__occ-detail a{ display:block;padding:5px 0; font-family:var(--serif);font-size:11px;letter-spacing:.1em; color:rgba(var(--mm-fg),.5); transition:color .3s var(--ease),padding-left .3s var(--ease); } .menu-modal__occ-detail a:hover{color:var(--mm-gold-hi);padding-left:6px;} /* ===== nav column ===== */ .menu-modal__nav{display:flex;flex-direction:column;justify-content:flex-start;} .menu-modal__kicker{ display:block; font-family:var(--en-serif);font-size:10px;letter-spacing:.4em;text-transform:uppercase; color:var(--mm-gold);margin-bottom:24px; opacity:0;transform:translateY(8px); transition:opacity 800ms var(--bezier-quart) 200ms,transform 800ms var(--bezier-quart) 200ms; } .menu-modal.is-open .menu-modal__kicker{opacity:1;transform:translateY(0);} .menu-modal__list{list-style:none;margin:0 0 32px;padding:0;} .menu-modal__list li{ border-top:1px solid rgba(var(--mm-fg),.14); opacity:0;transform:translateY(14px); transition:opacity 900ms var(--bezier-quart),transform 900ms var(--bezier-quart); } .menu-modal__list li:last-child{border-bottom:1px solid rgba(var(--mm-fg),.14);} .menu-modal.is-open .menu-modal__list li{opacity:1;transform:translateY(0);} /* stagger each row */ /* 項目数を管理画面で増減できるので、順番は --i で受け取る（2026-09-10）。 1件目 250ms から 60ms ずつずらす＝以前の nth-child(1..7) と同じ値。 */ .menu-modal.is-open .menu-modal__list li{transition-delay:calc(250ms + var(--i,0) * 60ms);} /* Row: JP label 大 (left) + EN label 小 (right) + dot. */ .menu-modal__list a{ display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:clamp(12px,2vw,28px); padding:18px 4px; color:var(--mm-text); transition:color .3s,padding-left .4s var(--ease); } .menu-modal__list a:hover{color:var(--mm-gold-hi);padding-left:12px;} .menu-modal__jp{ font-family:var(--serif-display);font-weight:500; font-size:clamp(15px,1.25vw,18px);letter-spacing:.22em; } .menu-modal__en{ font-family:var(--en-serif);font-size:11px;letter-spacing:.3em; color:rgba(var(--mm-fg),.55);text-transform:uppercase; white-space:nowrap; } .menu-modal__dot{ width:6px;height:6px;border:1px solid currentColor;border-radius:50%;opacity:.6; transition:background .3s,border-color .3s,opacity .3s,transform .4s var(--ease); } .menu-modal__list a:hover .menu-modal__en{color:var(--mm-gold-hi);} .menu-modal__list a:hover .menu-modal__dot{background:var(--mm-gold-hi);border-color:var(--mm-gold-hi);opacity:1;transform:scale(1.25);} /* Sub-list — same JP-first / EN-second rhythm as the main list, smaller scale. */ .menu-modal__sublist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;} .menu-modal__sublist li{ border-top:1px solid rgba(var(--mm-fg),.08); opacity:0;transform:translateY(10px); transition:opacity 800ms var(--bezier-quart) 700ms,transform 800ms var(--bezier-quart) 700ms; } .menu-modal__sublist li:last-child{border-bottom:1px solid rgba(var(--mm-fg),.08);} .menu-modal.is-open .menu-modal__sublist li{opacity:1;transform:translateY(0);} .menu-modal.is-open .menu-modal__sublist li{transition-delay:calc(700ms + var(--i,0) * 50ms);} .menu-modal__sublist a{ display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:16px; padding:12px 4px; color:var(--mm-text); transition:color .3s,padding-left .4s var(--ease); } .menu-modal__sublist a .jp{ font-family:var(--serif);font-size:14px;letter-spacing:.22em; } .menu-modal__sublist a .en{ font-family:var(--en-serif);font-size:10px;letter-spacing:.3em;text-transform:uppercase; color:rgba(var(--mm-fg),.5); } .menu-modal__sublist a:hover{color:var(--mm-gold-hi);padding-left:10px;} .menu-modal__sublist a:hover .en{color:var(--mm-gold-hi);} /* ===== util column ===== */ .menu-modal__util{display:flex;flex-direction:column;gap:22px;justify-content:flex-start;} /* Logo — thin white silver over the ink plane */ .menu-modal__logo{ width:clamp(140px,11vw,180px);height:auto; filter:var(--mm-logo-filter); opacity:0;transform:translateY(10px); transition:opacity 1000ms var(--bezier-quart) 320ms,transform 1000ms var(--bezier-quart) 320ms; } .menu-modal.is-open .menu-modal__logo{opacity:1;transform:translateY(0);} /* Access block */ .menu-modal__block{ opacity:0;transform:translateY(10px); transition:opacity 1000ms var(--bezier-quart) 420ms,transform 1000ms var(--bezier-quart) 420ms; } .menu-modal.is-open .menu-modal__block{opacity:1;transform:translateY(0);} .menu-modal__block .menu-modal__kicker{margin-bottom:12px;color:var(--mm-gold);} .menu-modal__block p{ font-family:var(--serif);font-size:13px;letter-spacing:.14em;line-height:1.9; color:var(--mm-text);margin-bottom:12px; } .menu-modal__link{ display:inline-flex;align-items:center;gap:10px; font-family:var(--en-serif);font-size:11px;letter-spacing:.3em; color:var(--mm-text); padding-bottom:4px;border-bottom:1px solid rgba(var(--mm-fg),.4); transition:color .3s,border-color .3s,gap .3s; } .menu-modal__link .arrow{ width:18px;height:1px;background:currentColor;position:relative;display:inline-block; } .menu-modal__link .arrow::after{ content:"";position:absolute;right:-1px;top:-3px;width:7px;height:7px; border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg); } .menu-modal__link:hover{color:var(--mm-gold-hi);border-color:var(--mm-gold-hi);gap:14px;} /* "English Site" link — sits on the right of the SNS row, pushed to the edge. */ .menu-modal__link--en{ margin-left:auto; font-size:10px;letter-spacing:.26em; } /* Reserve / Consult / Tel — stacked cells with icon-left + main + sub */ .menu-modal__cta{ display:flex;flex-direction:column;gap:0; border:1px solid rgba(var(--mm-fg),.22); opacity:0;transform:translateY(10px); transition:opacity 1000ms var(--bezier-quart) 520ms,transform 1000ms var(--bezier-quart) 520ms; } .menu-modal.is-open .menu-modal__cta{opacity:1;transform:translateY(0);} .menu-modal__cell{ display:flex;align-items:center;gap:16px; padding:16px 18px; color:var(--mm-text); border-bottom:1px solid rgba(var(--mm-fg),.14); transition:background .3s,color .3s; } .menu-modal__cell:last-child{border-bottom:none;} .menu-modal__cell:hover{background:rgba(184,147,90,.06);color:var(--mm-gold-hi);} .menu-modal__cell-icon{ flex:none;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center; color:var(--mm-gold); transition:color .3s; } .menu-modal__cell:hover .menu-modal__cell-icon{color:var(--mm-gold-hi);} .menu-modal__cell-text{display:flex;flex-direction:column;gap:4px;min-width:0;} .menu-modal__cell-main{ font-family:var(--serif);font-size:13px;letter-spacing:.18em;font-weight:500;line-height:1.4; } .menu-modal__cell-sub{ font-family:var(--serif);font-size:10px;letter-spacing:.14em;line-height:1.5; color:rgba(var(--mm-fg),.55); } .menu-modal__cell--tel .menu-modal__cell-main{ font-family:var(--en-body);font-style:italic;font-size:20px;letter-spacing:.04em; } /* SNS row — Instagram / X / Facebook (circular icons) + English Site link (text link, right-aligned). Sits between the CTA bar and copyright. */ .menu-modal__sns{ display:flex;align-items:center;gap:14px;margin-top:4px; opacity:0;transform:translateY(10px); transition:opacity 900ms var(--bezier-quart) 680ms,transform 900ms var(--bezier-quart) 680ms; } .menu-modal.is-open .menu-modal__sns{opacity:1;transform:translateY(0);} /* Scope the circular button styling to icon-only anchors (they carry an aria-label but no text). The English Site link has no aria-label and keeps its underline-text-link treatment via .menu-modal__link--en. */ .menu-modal__sns > a[aria-label]{ width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center; border:1px solid rgba(var(--mm-fg),.3);border-radius:50%; color:var(--mm-text); transition:color .3s,border-color .3s,background .3s,transform .3s var(--ease); } .menu-modal__sns > a[aria-label]:hover{color:var(--mm-gold-hi);border-color:var(--mm-gold-hi);background:rgba(184,147,90,.08);transform:translateY(-2px);} .menu-modal__copy{ display:block;margin-top:12px; font-family:var(--en-serif);font-size:9px;letter-spacing:.24em;color:rgba(var(--mm-fg),.35); opacity:0;transition:opacity 1000ms var(--bezier-quart) 900ms; } .menu-modal.is-open .menu-modal__copy{opacity:1;} /* Body scroll-lock while the modal is open. scrollbar-gutter:stable on html keeps the reserved gutter so the page doesn't shift when overflow is hidden. */ body.menu-open{overflow:hidden;} /* ===== responsive ===== */ @media (max-width:960px){ .menu-modal__grid{ grid-template-columns:1fr; min-height:auto; } .menu-modal__grid > *:not(:last-child)::after{ top:auto;bottom:0;left:clamp(24px,4vw,56px);right:clamp(24px,4vw,56px); width:auto;height:1px; } .menu-modal__photo{order:-1;padding-top:clamp(70px,10vh,100px);} .menu-modal__photo-top{align-items:center;justify-content:center;} .menu-modal__photo-img{max-width:220px;} .menu-modal__photo-caption{writing-mode:horizontal-tb;} .menu-modal__occ-detail{padding-left:32px;} .menu-modal__nav{padding-top:40px;padding-bottom:40px;} .menu-modal__util{padding-bottom:80px;} } @media (max-width:640px){ .menu-modal__close{top:20px;right:20px;} .menu-modal__jp{font-size:17px;} .menu-modal__cell-main{font-size:12px;} } /* =================== loader / menu modal — 地色同期 =================== ローダーとメニューモーダルは、そのページの地色と同じ面に見せる。 --ink がページの地色と一致しているページ（トップ／culture／history／ unified-navy 系）は既定値のままで合うので、ここでは地色を別に宣言しているページだけを拾う。 */ /* 法人（business）— ページ地は #1a2638。--ink は既定のままなので明示する */ body.page-business, body.page-business-corporate-event, body.page-business-entertainment, body.page-business-mice-gala, body.page-business-overseas-guest, body.page-business-training, body.page-business-venue-rental{ --loader-bg:#1a2638; --mm-bg:#1a2638; } /* 95周年 — ページ地は #0a0a0a */ body.page-95th{ --loader-bg:#0a0a0a; --mm-bg:#0a0a0a; } /* 和紙クリームのページ — モーダルの内側も明地用に反転する。ご法要（page-lifeevent-memorial）は地が暗いので既定のまま。 */ body.le-day, body.page-dish, body.page-mizutaki.mz-hero-new, body.page-dish-detail.df-cream{ --loader-bg:#f4efe3; --mm-bg:#f4efe3; --mm-fg:31,27,22; --mm-text:#1f1b16; --mm-gold:#b89665; --mm-gold-hi:#8e6e3f; --mm-logo-filter:brightness(0) saturate(100%) opacity(.9); --mm-photo-filter:saturate(.9) contrast(1.02); --mm-photo-shadow:0 20px 60px rgba(120,100,70,.22); --mm-glow: radial-gradient(ellipse at 18% 20%, rgba(184,150,101,.10), transparent 55%), radial-gradient(ellipse at 82% 80%, rgba(120,100,70,.07), transparent 60%); } /* =================== hero =================== */ .hero{position:relative;height:100vh;min-height:640px;overflow:hidden;color:var(--mute);} .hero__media{position:absolute;inset:0;} .hero__slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 2000ms var(--ease);transform:scale(1.05);animation:heroBreath 18s var(--ease) infinite alternate;} .hero__slide.active{opacity:1;} @keyframes heroBreath{to{transform:scale(1.08);}} .hero__overlay{position:absolute;inset:0;background: radial-gradient(ellipse at 30% 40%, rgba(14,17,22,.3), rgba(14,17,22,.75) 75%), linear-gradient(180deg, rgba(14,17,22,.55) 0%, rgba(14,17,22,.3) 40%, rgba(14,17,22,.7) 100%);} .hero__vignette{position:absolute;inset:0;box-shadow:inset 0 0 260px rgba(0,0,0,.9);pointer-events:none;} .hero__video.is-ready{opacity:1;} .hero__content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;padding:0 clamp(24px,8vw,120px);} .hero__copy{display:flex;align-items:center;gap:28px;} .hero__sub{writing-mode:vertical-rl;font-family:var(--serif);font-size:clamp(13px,1vw,15px);letter-spacing:.4em;color:var(--gold);} .hero__title{ writing-mode:vertical-rl; font-family:var(--serif-display); font-weight:500; font-size:var(--fs-hero); letter-spacing:.3em; line-height:var(--lh-heading); color:var(--mute); text-shadow:0 4px 30px rgba(0,0,0,.5); } .hero__foot{position:absolute;z-index:3;left:clamp(24px,8vw,120px);right:clamp(24px,8vw,120px);bottom:48px;display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(24px,4vw,56px);pointer-events:none;} .hero__foot > *{pointer-events:auto;} /* 95th anniversary link — same underline-with-arrow treatment as .dish-cta__btn: hairline bottom border, letter-spacing hover. */ .hero__anniv{ display:inline-flex;align-items:center;gap:18px; padding:0 0 8px;border-bottom:.5px solid rgba(232,226,212,.7); color:var(--mute);background:none;white-space:nowrap; transition:letter-spacing .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease); } .hero__anniv:hover{color:var(--gold-hi);border-color:var(--gold-hi);} .hero__anniv-text{display:flex;flex-direction:column;gap:2px;line-height:1.4;} .hero__anniv-main{font-family:var(--en-serif);font-weight:500;font-size:13px;letter-spacing:.3em;} .hero__anniv-main sup{font-size:9px;letter-spacing:.1em;top:-6px;margin-right:2px;color:var(--gold);} .hero__anniv-sub{font-family:var(--serif);font-size:10px;letter-spacing:.22em;color:rgba(232,226,212,.72);} .hero__anniv .arrow{ display:inline-block;width:22px;height:.5px;background:currentColor;position:relative; transition:width .4s var(--ease); } .hero__anniv:hover .arrow{width:32px;} /* Hero info — compact fading news card, pinned bottom-right. */ .hero__info{ width:clamp(260px,24vw,340px); padding:10px 14px 8px; background:rgba(14,17,22,.48); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:.5px solid rgba(216,184,122,.28); color:var(--mute); } .hero__info-head{ display:flex;align-items:baseline;justify-content:space-between; padding-bottom:6px;margin-bottom:6px; border-bottom:.5px solid rgba(216,184,122,.28); } .hero__info-label{font-family:var(--en-serif);font-size:11px;letter-spacing:.36em;color:var(--gold);} .hero__info-jp{font-family:var(--serif);font-size:10px;letter-spacing:.22em;color:rgba(232,226,212,.72);} /* All items share the same grid cell so the list auto-sizes to the tallest natural height (prevents overflow when titles wrap) and the cross-fade happens in place without any absolute/inset hacks. */ .hero__info-list{list-style:none;display:grid;} .hero__info-item{ grid-area:1 / 1; opacity:0;visibility:hidden;transform:translateY(3px); transition:opacity 900ms var(--ease),transform 900ms var(--ease),visibility 0s 900ms; pointer-events:none; } .hero__info-item.is-active{ opacity:1;visibility:visible;transform:translateY(0); transition:opacity 900ms var(--ease),transform 900ms var(--ease),visibility 0s; pointer-events:auto; } .hero__info-item a{display:flex;flex-direction:column;gap:6px;color:inherit;} .hero__info-item a:hover .hero__info-title{color:var(--gold-hi);} .hero__info-meta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;} .hero__info-date{font-family:var(--en-body);font-style:italic;font-size:11px;letter-spacing:.04em;color:var(--gold);} .hero__info-cat{font-size:8px;letter-spacing:.24em;color:var(--gold);border:.5px solid rgba(216,184,122,.5);padding:1px 6px;} .hero__info-title{font-family:var(--serif);font-size:11px;letter-spacing:.12em;line-height:1.6;color:var(--mute);transition:color .3s;} @media (max-width:900px){ .hero__foot{flex-direction:column;align-items:stretch;gap:14px;bottom:24px;} .hero__anniv{align-self:flex-start;} .hero__info{width:auto;padding:10px 12px 8px;} } .hero__scroll{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;font-family:var(--en-serif);font-size:9px;letter-spacing:.4em;color:var(--mute);opacity:.8;} .hero__scroll::after{content:"";width:.5px;height:48px;background:var(--mute);animation:scrollLine 2.4s var(--ease) infinite;transform-origin:top;} @keyframes scrollLine{0%{transform:scaleY(0);}40%{transform:scaleY(1);transform-origin:top;}41%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}} /* =================== Hero Occasions — 左端の漢字ナビ =================== */ @keyframes occReveal{to{opacity:1;transform:translateY(0);}} /* Hover */ /* =================== prologue (byaku-inspired, full-height band) =================== */ .prologue{background:var(--ink);padding:0;position:relative;overflow:hidden;} /* full-height loop band — fills the viewport */ .prologue__loop{ position:relative;width:100%; height:100vh; min-height:680px; overflow:hidden; mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%); } @supports (height:100dvh){ .prologue__loop{height:100dvh;} } /* positioner — static layer that shifts the track so the first (msg) item sits at viewport center */ .loop__positioner{ position:relative;width:max-content;height:100%; transform:translateX(var(--loop-start-x, 0px)); will-change:transform; } .loop__track{ display:flex;align-items:center;width:max-content;height:100%; animation:jisakuMarquee 300s linear infinite; animation-play-state:paused; animation-delay:2800ms; /* fire exactly when the message finishes revealing */ will-change:transform; } .prologue__loop.is-active .loop__track{animation-play-state:running;} /* NOTE: no hover pause — the marquee keeps flowing even on mouseover */ @keyframes jisakuMarquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} } /* each item — scattered vertical positions, tight horizontal spacing Reveal = soft fade only (opacity + blur), no vertical slide. Items sit at their --offset-y from the start and simply fade into focus. --offset-scale keeps the scattered rhythm but shrinks the variance for taller items (vertical-rl JP headings and 3:4 portraits) so they never clip against the top/bottom of the 100vh band. */ .loop__item{ position:relative;flex:0 0 auto; display:flex;align-items:flex-start; margin-right:clamp(16px,1.8vw,38px); opacity:0; filter:blur(14px); --offset-scale:.55; transform:translateY(calc(var(--offset-y,0px) * var(--offset-scale))); transition:opacity 1200ms var(--bezier-quart), filter 1200ms var(--bezier-quart); } /* tall variants — pull toward center proportionally to their height */ .loop__item.item--jp.jp-xl, .loop__item.item--photo-p{--offset-scale:.25;} .loop__item.item--jp.jp-l, .loop__item.item--photo-l{--offset-scale:.38;} .loop__item.item--jp.jp-m, .loop__item.item--photo-s{--offset-scale:.45;} .prologue__loop.is-active .loop__item{ opacity:1; filter:blur(0); } /* The message itself doesn't fade as a block — only its characters animate. This keeps the centered message pin-sharp from the start. */ .loop__item.item--msg{ opacity:1; filter:none; transform:translateY(calc(var(--offset-y,0px) * var(--offset-scale))); transition:none; } /* scattered Y offsets (wide range — uses full viewport height) */ .loop__item[data-pos="0"]{--offset-y:0px;} .loop__item[data-pos="1"]{--offset-y:-280px;} .loop__item[data-pos="2"]{--offset-y:150px;} .loop__item[data-pos="3"]{--offset-y:320px;} .loop__item[data-pos="4"]{--offset-y:-130px;} .loop__item[data-pos="5"]{--offset-y:70px;} .loop__item[data-pos="6"]{--offset-y:-340px;} .loop__item[data-pos="7"]{--offset-y:240px;} .loop__item[data-pos="8"]{--offset-y:-190px;} .loop__item[data-pos="9"]{--offset-y:350px;} .loop__item[data-pos="10"]{--offset-y:-100px;} .loop__item[data-pos="11"]{--offset-y:280px;} .loop__item[data-pos="12"]{--offset-y:-310px;} .loop__item[data-pos="13"]{--offset-y:110px;} .loop__item[data-pos="14"]{--offset-y:-220px;} .loop__item[data-pos="15"]{--offset-y:360px;} .loop__item[data-pos="16"]{--offset-y:-60px;} .loop__item[data-pos="17"]{--offset-y:-250px;} .loop__item[data-pos="18"]{--offset-y:170px;} .loop__item[data-pos="19"]{--offset-y:-160px;} .loop__item[data-pos="20"]{--offset-y:310px;} .loop__item[data-pos="21"]{--offset-y:-90px;} .loop__item[data-pos="22"]{--offset-y:230px;} .loop__item[data-pos="23"]{--offset-y:-300px;} .loop__item[data-pos="24"]{--offset-y:130px;} .loop__item[data-pos="25"]{--offset-y:340px;} .loop__item[data-pos="26"]{--offset-y:-170px;} .loop__item[data-pos="27"]{--offset-y:-330px;} .loop__item[data-pos="28"]{--offset-y:290px;} .loop__item[data-pos="29"]{--offset-y:-80px;} .loop__item[data-pos="30"]{--offset-y:200px;} .loop__item[data-pos="31"]{--offset-y:-260px;} .loop__item[data-pos="32"]{--offset-y:100px;} /* reveal sequence. Message plays out its per-character animation 0 → ~2700ms. At 2800ms the first image appears AND the slide begins (see animation-delay on .loop__track). Subsequent items fade in with a 150ms stagger so they ride in behind the first. */ .prologue__loop.is-active .loop__item:nth-child(2){transition-delay:2800ms;} .prologue__loop.is-active .loop__item:nth-child(3){transition-delay:2950ms;} .prologue__loop.is-active .loop__item:nth-child(4){transition-delay:3100ms;} .prologue__loop.is-active .loop__item:nth-child(5){transition-delay:3250ms;} .prologue__loop.is-active .loop__item:nth-child(6){transition-delay:3400ms;} .prologue__loop.is-active .loop__item:nth-child(7){transition-delay:3550ms;} .prologue__loop.is-active .loop__item:nth-child(8){transition-delay:3700ms;} .prologue__loop.is-active .loop__item:nth-child(9){transition-delay:3850ms;} .prologue__loop.is-active .loop__item:nth-child(10){transition-delay:4000ms;} .prologue__loop.is-active .loop__item:nth-child(11){transition-delay:4150ms;} .prologue__loop.is-active .loop__item:nth-child(12){transition-delay:4300ms;} .prologue__loop.is-active .loop__item:nth-child(13){transition-delay:4450ms;} .prologue__loop.is-active .loop__item:nth-child(14){transition-delay:4600ms;} .prologue__loop.is-active .loop__item:nth-child(15){transition-delay:4750ms;} .prologue__loop.is-active .loop__item:nth-child(16){transition-delay:4900ms;} .prologue__loop.is-active .loop__item:nth-child(17){transition-delay:5050ms;} .prologue__loop.is-active .loop__item:nth-child(18){transition-delay:5200ms;} .prologue__loop.is-active .loop__item:nth-child(19){transition-delay:5350ms;} .prologue__loop.is-active .loop__item:nth-child(20){transition-delay:5500ms;} .prologue__loop.is-active .loop__item:nth-child(21){transition-delay:5650ms;} .prologue__loop.is-active .loop__item:nth-child(22){transition-delay:5800ms;} .prologue__loop.is-active .loop__item:nth-child(23){transition-delay:5950ms;} .prologue__loop.is-active .loop__item:nth-child(24){transition-delay:6100ms;} .prologue__loop.is-active .loop__item:nth-child(25){transition-delay:6250ms;} .prologue__loop.is-active .loop__item:nth-child(26){transition-delay:6400ms;} .prologue__loop.is-active .loop__item:nth-child(27){transition-delay:6550ms;} .prologue__loop.is-active .loop__item:nth-child(28){transition-delay:6700ms;} .prologue__loop.is-active .loop__item:nth-child(29){transition-delay:6850ms;} .prologue__loop.is-active .loop__item:nth-child(30){transition-delay:7000ms;} .prologue__loop.is-active .loop__item:nth-child(31){transition-delay:7150ms;} .prologue__loop.is-active .loop__item:nth-child(32){transition-delay:7300ms;} .prologue__loop.is-active .loop__item:nth-child(33){transition-delay:7450ms;} /* duplicate set B — ready before they wrap into view */ .prologue__loop.is-active .loop__item:nth-child(n+34){transition-delay:7600ms;} /* ===== item size variants (photos enlarged, text tight) ===== */ /* photos — enlarged for presence, fill more vertical space */ /* JP title items — different sizes, no photo (intrinsic width) */ .item--msg{width:clamp(280px,22vw,340px);align-items:flex-start;} /* ===== photo ===== */ /* photo sources */ .loop__item[data-img="1"] .loop__photo{background-image:url('../images/gallery_img08.jpg');} .loop__item[data-img="2"] .loop__photo{background-image:url('../images/kabuki.webp');} .loop__item[data-img="3"] .loop__photo{background-image:url('../images/gallery_img09.jpg');} .loop__item[data-img="4"] .loop__photo{background-image:url('../images/visual15.jpg');} .loop__item[data-img="5"] .loop__photo{background-image:url('../images/visual11.webp');} .loop__item[data-img="6"] .loop__photo{background-image:url('../images/Img24072.jpg');} .loop__item[data-img="7"] .loop__photo{background-image:url('../images/0045_xlarge-768x512.jpg.webp');} .loop__item[data-img="8"] .loop__photo{background-image:url('../images/visual06.webp');} .loop__item[data-img="9"] .loop__photo{background-image:url('../images/top/visual12-768.webp');} .loop__item[data-img="10"] .loop__photo{background-image:url('../images/hiroma005.jpg');} .loop__item[data-img="11"] .loop__photo{background-image:url('../images/top/MG_4820-1980x1320.jpg.webp');} .loop__item[data-img="12"] .loop__photo{background-image:url('../images/shamisen.webp');} /* ===== standalone JP title — varied sizes (jp-xl / jp-l / jp-m / jp-sm / jp-s) ===== */ /* ===== standalone English text ===== */ /* ===== message item ===== */ .loop__message{ display:flex;flex-direction:row-reverse;align-items:flex-start;gap:22px; padding:6px 10px; } .loop__kicker{ writing-mode:vertical-rl; font-family:var(--en-serif);font-size:11px;letter-spacing:.5em; color:var(--gold);text-transform:uppercase;opacity:.85;white-space:nowrap; } .loop__message-heading{ writing-mode:vertical-rl; font-family:var(--serif-display);font-weight:500; font-size:clamp(19px,2.05vw,26px); letter-spacing:.22em;line-height:1.85;color:var(--mute); } .loop__message-heading br{display:inline;} .loop__sign{ writing-mode:vertical-rl; font-family:var(--en-body);font-style:italic; font-size:13px;letter-spacing:.08em;color:var(--gold);opacity:.9; white-space:nowrap; align-self:flex-end; } /* per-character blur reveal inside the message (delay set per-char by JS) */ .item--msg .blur-char{ display:inline-block;opacity:0;filter:blur(12px);transform:translateY(4px); transition:opacity 1400ms var(--bezier-quart), filter 1400ms var(--bezier-quart), transform 1400ms var(--bezier-quart); } .prologue__loop.is-active .item--msg .blur-char{opacity:1;filter:blur(0);transform:translateY(0);} @media (max-width:1080px){ .prologue__loop{min-height:620px;} /* tighter envelope for smaller viewports */ .loop__item{--offset-scale:.45;} .loop__item.item--jp.jp-xl, .loop__item.item--photo-p{--offset-scale:.2;} .loop__item.item--jp.jp-l, .loop__item.item--photo-l{--offset-scale:.3;} .loop__item.item--jp.jp-m, .loop__item.item--photo-s{--offset-scale:.38;} .loop__item[data-pos="1"]{--offset-y:-200px;} .loop__item[data-pos="2"]{--offset-y:110px;} .loop__item[data-pos="3"]{--offset-y:230px;} .loop__item[data-pos="4"]{--offset-y:-90px;} .loop__item[data-pos="5"]{--offset-y:46px;} .loop__item[data-pos="6"]{--offset-y:-240px;} .loop__item[data-pos="7"]{--offset-y:170px;} .loop__item[data-pos="8"]{--offset-y:-140px;} .loop__item[data-pos="9"]{--offset-y:250px;} .loop__item[data-pos="10"]{--offset-y:-70px;} .loop__item[data-pos="11"]{--offset-y:200px;} .loop__item[data-pos="12"]{--offset-y:-220px;} .loop__item[data-pos="13"]{--offset-y:80px;} .loop__item[data-pos="14"]{--offset-y:-150px;} .loop__item[data-pos="15"]{--offset-y:260px;} .loop__item[data-pos="16"]{--offset-y:-50px;} .loop__item[data-pos="17"]{--offset-y:-180px;} .loop__item[data-pos="18"]{--offset-y:120px;} .loop__item[data-pos="19"]{--offset-y:-110px;} .loop__item[data-pos="20"]{--offset-y:220px;} .loop__item[data-pos="21"]{--offset-y:-66px;} .loop__item[data-pos="22"]{--offset-y:160px;} .loop__item[data-pos="23"]{--offset-y:-210px;} .loop__item[data-pos="24"]{--offset-y:90px;} .loop__item[data-pos="25"]{--offset-y:240px;} .loop__item[data-pos="26"]{--offset-y:-120px;} .loop__item[data-pos="27"]{--offset-y:-230px;} .loop__item[data-pos="28"]{--offset-y:210px;} .loop__item[data-pos="29"]{--offset-y:-60px;} .loop__item[data-pos="30"]{--offset-y:140px;} .loop__item[data-pos="31"]{--offset-y:-190px;} .loop__item[data-pos="32"]{--offset-y:70px;} } @media (max-width:768px){ .prologue__loop{min-height:560px;} .loop__track{animation-duration:230s;} .loop__item{margin-right:16px;--offset-scale:.3;} /* tall items hug the center on mobile (560px band leaves little margin) */ .loop__item.item--jp.jp-xl, .loop__item.item--photo-p{--offset-scale:.14;} .loop__item.item--jp.jp-l, .loop__item.item--photo-l{--offset-scale:.2;} .loop__item.item--jp.jp-m, .loop__item.item--photo-s{--offset-scale:.24;} .item--msg{width:248px;} .loop__message-heading{letter-spacing:.2em;line-height:1.85;} .loop__item[data-pos="1"]{--offset-y:-150px;} .loop__item[data-pos="2"]{--offset-y:80px;} .loop__item[data-pos="3"]{--offset-y:170px;} .loop__item[data-pos="4"]{--offset-y:-66px;} .loop__item[data-pos="5"]{--offset-y:40px;} .loop__item[data-pos="6"]{--offset-y:-180px;} .loop__item[data-pos="7"]{--offset-y:126px;} .loop__item[data-pos="8"]{--offset-y:-100px;} .loop__item[data-pos="9"]{--offset-y:190px;} .loop__item[data-pos="10"]{--offset-y:-54px;} .loop__item[data-pos="11"]{--offset-y:150px;} .loop__item[data-pos="12"]{--offset-y:-166px;} .loop__item[data-pos="13"]{--offset-y:60px;} .loop__item[data-pos="14"]{--offset-y:-116px;} .loop__item[data-pos="15"]{--offset-y:200px;} .loop__item[data-pos="16"]{--offset-y:-36px;} .loop__item[data-pos="17"]{--offset-y:-136px;} .loop__item[data-pos="18"]{--offset-y:90px;} .loop__item[data-pos="19"]{--offset-y:-84px;} .loop__item[data-pos="20"]{--offset-y:166px;} .loop__item[data-pos="21"]{--offset-y:-50px;} .loop__item[data-pos="22"]{--offset-y:120px;} .loop__item[data-pos="23"]{--offset-y:-160px;} .loop__item[data-pos="24"]{--offset-y:70px;} .loop__item[data-pos="25"]{--offset-y:180px;} .loop__item[data-pos="26"]{--offset-y:-90px;} .loop__item[data-pos="27"]{--offset-y:-176px;} .loop__item[data-pos="28"]{--offset-y:156px;} .loop__item[data-pos="29"]{--offset-y:-40px;} .loop__item[data-pos="30"]{--offset-y:100px;} .loop__item[data-pos="31"]{--offset-y:-140px;} .loop__item[data-pos="32"]{--offset-y:50px;} } @media (prefers-reduced-motion:reduce){ .loop__track{animation:none;} .loop__item{opacity:1;filter:none;transform:translateY(calc(var(--offset-y,0px) * var(--offset-scale)));transition:none;} .item--msg .blur-char{opacity:1;filter:none;transform:none;transition:none;} } /* =================== occasions =================== */ .occasions{padding:clamp(140px,20vh,220px) 0;background:var(--ink);} .occasions > .wrap{max-width:var(--wrap-max-wide);padding:0 var(--wrap-pad-wide);} .hospitality > .wrap, .news > .wrap, .access > .wrap{max-width:var(--wrap-max-wide);padding:0 var(--wrap-pad-wide);} .occasions__head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:64px;flex-wrap:wrap;gap:24px;} .occasions__title{display:flex;flex-direction:column;gap:14px;} .occasions__title h2{ font-family:var(--serif-display); font-weight:500; font-size:var(--fs-h2-section); letter-spacing:var(--ls-heading); line-height:var(--lh-heading); color:var(--mute); } .occasions__lead{max-width:30em;font-family:var(--serif);font-size:14px;color:rgba(232,226,212,.75);line-height:2;} /* Use fr units across every state so grid-template-columns interpolates smoothly in all directions. Mixing fr → % caused a visible jump when hovering a card from top/bottom (the first default→active transition); sideways moves between active states were fine because both ends were %. */ .deck{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;height:clamp(480px,68vh,680px);transition:grid-template-columns 900ms var(--ease);} .deck.is-A{grid-template-columns:3fr 1fr 1fr;} .deck.is-B{grid-template-columns:1fr 3fr 1fr;} .deck.is-C{grid-template-columns:1fr 1fr 3fr;} .o-card{position:relative;overflow:hidden;border:.5px solid rgba(216,184,122,.22);cursor:default;transition:all 900ms var(--ease);} .o-card .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1200ms var(--ease), filter 900ms var(--ease);transform:scale(1.05);} .o-card .bg::after{content:"";position:absolute;inset:0;background:rgba(14,17,22,.6);transition:background 900ms var(--ease);} .o-card.is-active .bg::after{background:rgba(14,17,22,.55);} .o-card:not(.is-active) .bg{filter:grayscale(35%) brightness(.85);} .o-card:hover .bg{transform:scale(1.1);} .o-card__inner{position:relative;z-index:2;height:100%;padding:44px 40px;display:flex;flex-direction:column;justify-content:space-between;color:var(--mute);transition:opacity .6s var(--ease);pointer-events:none;} .deck.is-A .o-card:not(.is-active) .o-card__inner, .deck.is-B .o-card:not(.is-active) .o-card__inner, .deck.is-C .o-card:not(.is-active) .o-card__inner{opacity:0;} /* top — kanji + lead phrase, vertical writing, one column, left-aligned */ .o-card__head{writing-mode:vertical-rl;display:inline-block;align-self:flex-start;margin-bottom:auto;line-height:1.15;} .o-card__kanji{font-family:var(--serif-display);font-weight:500;font-size:clamp(44px,4.4vw,64px);letter-spacing:.05em;color:var(--mute);text-shadow:0 4px 22px rgba(0,0,0,.5);} .o-card__lead{font-family:var(--serif);font-weight:500;font-size:clamp(18px,1.5vw,24px);letter-spacing:.22em;color:var(--mute);} /* bottom — category name, number below */ .o-card__meta{display:flex;flex-direction:column;gap:6px;} .o-card__num{font-family:var(--en-body);font-style:italic;font-size:14px;color:var(--gold);opacity:.85;letter-spacing:.08em;margin-bottom:4px;} .o-card__num::before{content:"— ";} .o-card__jp{font-family:var(--serif);font-weight:500;font-size:17px;letter-spacing:.22em;} .o-card__en{font-family:var(--en-serif);letter-spacing:.3em;font-size:11px;color:var(--gold);margin-top:4px;} /* mini vertical label for collapsed (non-active while deck is A/B/C) */ .o-card__mini{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);writing-mode:vertical-rl;font-family:var(--serif);font-size:13px;letter-spacing:.3em;color:var(--mute);opacity:0;transition:opacity .5s;pointer-events:none;} .deck.is-A .o-card:not(.is-active) .o-card__mini, .deck.is-B .o-card:not(.is-active) .o-card__mini, .deck.is-C .o-card:not(.is-active) .o-card__mini{opacity:.85;} /* detail panel — only shown when card is active. Opening: delayed smooth fade-in (runs after the card has widened a bit). Closing: snap off instantly. Keeping it visible while the card shrinks caused text reflow as the 56%-wide panel got squeezed, which registered as a jerky "カクカク" flicker. Cutting the content the moment the card leaves is-active hides that reflow entirely. */ .o-card__detail{ position:absolute;right:40px;top:40px;bottom:40px;width:56%;z-index:3; display:flex;flex-direction:column;justify-content:center;gap:8px; opacity:0;visibility:hidden;transform:translateX(24px);pointer-events:none; transition:opacity 0s, visibility 0s, transform 0s; } .o-card.is-active .o-card__detail{ opacity:1;visibility:visible;transform:translateX(0);pointer-events:auto; transition: opacity 900ms var(--ease) 240ms, visibility 0s 240ms, transform 900ms var(--ease) 240ms; } /* cleaner single-column list with gold tick */ .o-card__list{list-style:none;border-top:.5px solid rgba(216,184,122,.28);} .o-card__list li{border-bottom:.5px solid rgba(216,184,122,.12);} .o-card__list li a{ position:relative;display:block; padding:14px 0 14px 28px; font-family:var(--serif);font-weight:400;font-size:14px;letter-spacing:.14em; color:var(--mute);line-height:1.5;text-decoration:none; transition:padding-left .35s var(--ease),color .35s; } .o-card__list li a::before{content:"";position:absolute;left:0;top:50%;width:16px;height:.5px;background:var(--gold);transition:width .35s var(--ease);} .o-card__list li a:hover{padding-left:36px;color:var(--gold-hi);} .o-card__list li a:hover::before{width:24px;} .o-card__list li a:focus-visible{outline:none;color:var(--gold-hi);padding-left:36px;} .o-card__list li a:focus-visible::before{width:24px;} /* chips — only within detail (so already hidden until active) */ .o-card__chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px;} .o-card__chips span{font-size:10px;letter-spacing:.2em;color:var(--ink);background:var(--gold);border:.5px solid var(--gold);padding:6px 12px;line-height:1;} /* occasions card CTA — unified stage-style link button */ .o-card__btn{ align-self:flex-start; display:inline-flex;align-items:center;gap:18px; font-family:var(--serif);font-weight:400;font-size:13px;letter-spacing:.3em; color:var(--mute);background:none; padding:0 0 8px;border:none;border-bottom:.5px solid rgba(232,226,212,.7); text-decoration:none;cursor:pointer; transition:letter-spacing .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease); } .o-card__btn:hover{letter-spacing:.34em;color:var(--gold-hi);border-color:var(--gold-hi);transform:none;box-shadow:none;} .o-card__btn:focus-visible{outline:none;color:var(--gold-hi);border-color:var(--gold-hi);} .o-card__btn .arrow{ display:inline-block;width:22px;height:.5px;background:currentColor;position:relative; transition:width .4s var(--ease); } .o-card__btn .arrow::after{display:none;} .o-card__btn:hover .arrow{width:32px;} /* card backgrounds (placeholder gradients + public photos) */ .card-A .bg{background-image: linear-gradient(135deg, rgba(14,17,22,.6), rgba(14,17,22,.2)), url('../images/top/business-cover.jpg');} .card-B .bg{background-image: linear-gradient(135deg, rgba(14,17,22,.55), rgba(14,17,22,.25)), url('../images/top/visual12-768.webp');} .card-C .bg{background-image: linear-gradient(135deg, rgba(14,17,22,.55), rgba(14,17,22,.3)), url('../images/top/culture-cover.jpg');} /* =================== dish (night -> day) =================== */ /* =================== dish (day, fades in) =================== */ .dish{position:relative;color:var(--black);background:var(--ink);transition:background-color 1600ms linear, color 1600ms linear;padding:clamp(160px,24vh,260px) 0;overflow:hidden;} .dish > .wrap{max-width:var(--wrap-max-wide);padding:0 var(--wrap-pad-wide);position:relative;z-index:2;} .dish.is-day{background:var(--paper);color:var(--black);} .dish .sec-title h2{color:inherit;} /* day atmosphere layer — soft sunlit garden fades in with scroll */ .dish__daylayer{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--day-progress,0);transition:opacity 400ms linear;} .dish__daylayer::before{content:"";position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1528360983277-13d401cdc186?auto=format&fit=crop&w=2400&q=80') center/cover no-repeat;opacity:.14;filter:saturate(.85) brightness(1.1);} .dish__daylayer::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(244,239,230,.55) 0%, rgba(244,239,230,.9) 40%, rgba(244,239,230,1) 100%);} .dish__head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:100px;gap:60px;flex-wrap:wrap;} .dish__head .main{flex:1;min-width:280px;} .dish__kicker{font-family:var(--en-serif);letter-spacing:.4em;font-size:11px;color:var(--gold);margin-bottom:18px;} .dish__title{ font-family:var(--serif-display); font-weight:400; font-size:var(--fs-h2-section); letter-spacing:var(--ls-heading); line-height:var(--lh-heading); color:var(--black); } .dish__title .em{color:var(--gold);} .dish__lead{max-width:32em;font-family:var(--serif);font-size:14px;letter-spacing:.16em;line-height:2.4;color:var(--black);opacity:.88;} /* Foot tweaks for day mode */ .dish .dish__foot p{color:var(--black);} .dish .vessels .v::after{color:var(--paper);background:rgba(14,17,22,.58);} /* ====== Cuisine Hero (panorama) ====== */ .dish-hero{position:relative;width:100%;aspect-ratio:21/9;overflow:hidden;margin-bottom:clamp(100px,12vw,160px);} .dish-hero__img{position:absolute;inset:0;background:url('../images/top/cuisine-mizutaki.webp') center/cover no-repeat;transform:scale(1.04);transition:transform 2200ms var(--ease),filter 1200ms var(--ease);filter:saturate(.95) brightness(1.02);} .dish-hero.is-in .dish-hero__img{transform:scale(1);} /* Bottom-shadow gradient + corner radial for caption legibility, plus a subtle uniform mask across the entire image so the 名物水たき copy reads cleanly on PC and mobile. The flat layer sits beneath the directional gradients so the bottom-right caption area still gets extra darkening. */ .dish-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,12,0) 45%, rgba(20,16,12,.28) 75%, rgba(20,16,12,.62) 100%),radial-gradient(ellipse 70% 55% at 85% 100%, rgba(20,16,12,.55) 0%, rgba(20,16,12,0) 70%),linear-gradient(rgba(20,16,12,.22),rgba(20,16,12,.22));pointer-events:none;} .dish-hero__cap{position:absolute;right:clamp(28px,4vw,56px);bottom:clamp(28px,4vw,56px);z-index:2;text-align:right;color:#f4efe6;text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 14px rgba(0,0,0,.35);} .dish-hero__cap .en{display:block;font-family:var(--en-serif);font-size:11px;letter-spacing:.4em;color:#e8c98a;margin-bottom:14px;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.5);} .dish-hero__cap .jp{ font-family:var(--serif-display); font-weight:500; font-size:var(--fs-h3); letter-spacing:var(--ls-heading-sub); line-height:var(--lh-heading); color:#f4efe6; } /* ====== Signature Short Intro (image + copy, no price) ====== */ .sig-intro{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(40px,6vw,96px);align-items:center;margin-bottom:clamp(100px,12vw,160px);} .sig-intro__copy{padding:clamp(0px,2vw,24px) 0;} .sig-intro__kicker{display:flex;align-items:center;gap:14px;margin-bottom:20px;} .sig-intro__kicker .line{display:inline-block;width:44px;height:.5px;background:var(--gold);} .sig-intro__kicker .en{font-family:var(--en-serif);font-size:11px;letter-spacing:.4em;color:var(--gold);} .sig-intro__title{ font-family:var(--serif-display); font-weight:500; font-size:var(--fs-h3); letter-spacing:var(--ls-heading-sub); line-height:var(--lh-heading); margin-bottom:28px; } .sig-intro__desc{font-family:var(--serif);font-size:14px;letter-spacing:.14em;line-height:2.3;max-width:32em;} .sig-intro__img{aspect-ratio:4/3;background:url('../images/mizutaki_tate.jpg') center/cover no-repeat;filter:saturate(.95) brightness(1.02);transform:scale(1.02);transition:transform 2000ms var(--ease);} .sig-intro.is-in .sig-intro__img{transform:scale(1);} /* ====== Three Pillars ====== */ .pillars{margin-bottom:clamp(100px,12vw,160px);} .pillars__head{display:flex;align-items:flex-end;gap:28px;margin-bottom:70px;} .pillars__head .rule{flex:1;height:.5px;background:linear-gradient(90deg,transparent, var(--gold));max-width:240px;margin-bottom:12px;} .pillars__head .en{font-family:var(--en-serif);font-size:11px;letter-spacing:.4em;color:var(--gold);display:block;margin-bottom:12px;} .pillars__head h3{ font-family:var(--serif-display); font-weight:500; font-size:var(--fs-h3); letter-spacing:var(--ls-heading-sub); line-height:var(--lh-heading); } .pillar-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,3vw,56px);} .pillar{position:relative;display:flex;flex-direction:column;opacity:0;transform:translateY(24px);transition:opacity 1400ms var(--bezier-quart),transform 1400ms var(--bezier-quart);} .pillars.is-in .pillar{opacity:1;transform:translateY(0);} .pillars.is-in .pillar:nth-child(1){transition-delay:120ms;} .pillars.is-in .pillar:nth-child(2){transition-delay:320ms;} .pillars.is-in .pillar:nth-child(3){transition-delay:520ms;} .pillar__img{position:relative;aspect-ratio:4/3;margin-bottom:30px;background-size:cover;background-position:center;overflow:hidden;transform:scale(1.02);transition:transform 1600ms var(--ease),filter 1200ms var(--ease);filter:saturate(.95) brightness(1.02);} .pillar:hover .pillar__img{transform:scale(1.06);} .pillar__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 70%, rgba(0,0,0,.1));pointer-events:none;} .pillar-1 .pillar__img{background-image:url('../images/mizutaki-img03.jpg');} .pillar-2 .pillar__img{background-image:url('../images/visual11.webp');} .pillar-3 .pillar__img{background-image:url('../images/gallery_img08.jpg');} .pillar__body{padding:0 4px;} .pillar__no{display:flex;align-items:center;gap:16px;margin-bottom:18px;} .pillar__no .kanji{font-family:var(--serif-display);font-weight:700;font-size:26px;letter-spacing:.1em;color:var(--gold);} .pillar__no .en{font-family:var(--en-serif);font-size:11px;letter-spacing:.36em;color:var(--gold);text-transform:uppercase;} .pillar__no .en::before{content:"";display:inline-block;width:22px;height:.5px;background:var(--gold);vertical-align:middle;margin-right:10px;opacity:.6;} .pillar__title{ font-family:var(--serif-display); font-weight:500; font-size:var(--fs-h4); letter-spacing:var(--ls-heading-sm); line-height:var(--lh-heading); margin-bottom:18px; } .pillar__desc{font-family:var(--serif);font-size:14px;letter-spacing:.12em;line-height:2.2;opacity:.88;} /* ====== Cuisine CTA ====== */ .dish-cta{position:relative;margin-top:clamp(80px,10vw,140px);margin-bottom:clamp(80px,10vw,140px);} .dish-cta__inner{display:grid;grid-template-columns:1.1fr auto;gap:clamp(30px,4vw,80px);align-items:center;} .dish-cta__copy .en{font-family:var(--en-serif);font-size:11px;letter-spacing:.4em;color:var(--gold);display:block;margin-bottom:14px;} .dish-cta__copy h3{ font-family:var(--serif-display); font-weight:500; font-size:var(--fs-h3); letter-spacing:var(--ls-heading-sub); line-height:var(--lh-heading); margin-bottom:18px; } .dish-cta__copy p{font-family:var(--serif);font-size:13px;letter-spacing:.12em;line-height:2.1;opacity:.85;max-width:42em;} /* dish CTA — unified stage-style link button (on paper background) */ .dish-cta__btn{ display:inline-flex;align-items:center;gap:18px; font-family:var(--serif);font-weight:400;font-size:13px;letter-spacing:.3em; color:var(--ink);background:none; padding:0 0 8px;border-bottom:.5px solid rgba(26,26,26,.55); white-space:nowrap; transition:letter-spacing .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease); } .dish-cta__btn:hover{letter-spacing:.34em;color:var(--gold);border-color:var(--gold);background:none;transform:none;box-shadow:none;} .dish-cta__btn .arrow{ display:inline-block;width:22px;height:.5px;background:currentColor;position:relative; transition:width .4s var(--ease); } .dish-cta__btn .arrow::after{display:none;} .dish-cta__btn:hover .arrow{width:32px;} .dish__foot{text-align:center;} .dish__foot .line{display:inline-block;width:80px;height:.5px;background:var(--gold);margin-bottom:20px;} .dish__foot p{font-family:var(--serif);font-size:15px;letter-spacing:.2em;} /* =================== rooms — faithful reproduction of happo-en home-garden =================== */ .rooms{background:var(--ink);color:var(--mute);padding:0;} /* ---- TOP: centered vertical heading with corner kicker ---- */ .home-garden__top{ position:relative; margin:0 clamp(2rem,10vw,24rem); padding:clamp(11rem,20vh,17rem) 0 clamp(6rem,10vh,10rem); } .home-garden__top .section-sub-heading{ position:absolute;top:0;left:0; font-family:var(--en-serif);font-size:11px;letter-spacing:.4em; color:var(--gold); opacity:0;transform:translateY(12px); transition:opacity 1000ms var(--bezier-quart),transform 1000ms var(--bezier-quart); } .home-garden__top .section-sub-heading.is-anim-active{opacity:1;transform:translateY(0);} .home-garden__top-heading{ display:flex;flex-direction:column;align-items:center;gap:1.8rem; margin:0 auto; opacity:0;transform:translateX(14px); transition:opacity 1400ms var(--bezier-quart),transform 1400ms var(--bezier-quart); } .home-garden__top-heading.is-anim-active{opacity:1;transform:translateX(0);} .home-garden__top-heading-main{ writing-mode:vertical-rl; font-family:var(--serif-display);font-weight:400; font-size:var(--fs-h2-section); line-height:var(--lh-heading); letter-spacing:var(--ls-heading); margin:0;color:var(--mute); } .home-garden__top-heading-sub{ font-family:var(--en-serif);font-style:normal; font-size:11px;letter-spacing:.4em;line-height:1; text-transform:uppercase; color:var(--gold); margin:0; } /* ---- BOTTOM: cinematic zoom-in reveal ---- */ .home-garden__bottom{ margin:0;height:100vh;position:relative; transition:height 2s; overflow:hidden; } .home-garden__bottom-container{ position:sticky;top:0; scale:.8958; transition:scale 2s var(--ease); height:100vh; } .home-garden__bottom.is-zoom-in-active .home-garden__bottom-container{scale:1;} .home-garden__container-list, .home-garden__list-item{position:relative;z-index:1;height:100vh;} .home-garden__item-content{ color:#fff; height:100vh;width:100%; padding-left:clamp(2rem,6vw,8rem); padding-bottom:clamp(3rem,8vh,7.5rem); display:grid; pointer-events:none;visibility:hidden;opacity:0; align-content:end;justify-items:start; transition:visibility .6s .2s,opacity .6s .2s; /* Bottom-left vignette so heading + paragraph + CTA remain legible over any photo. Sits above the image (z-index:-1) but below text. */ background: linear-gradient(105deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 42%, rgba(0,0,0,0) 68%), linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.35) 100%); } .home-garden__bottom.is-zoom-in-active .home-garden__item-content{ pointer-events:auto;visibility:visible;opacity:1; } .home-garden__content-heading{margin-bottom:clamp(2rem,5vh,6rem);} .home-garden__content-heading-main{ font-family:var(--serif-display);font-weight:500; font-size:var(--fs-h3); line-height:var(--lh-heading); letter-spacing:var(--ls-heading); margin:0 0 1.7rem;color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.6); } .home-garden__content-heading-sub{ font-family:var(--en-body);font-style:italic; font-size:var(--fs-h4);line-height:2;letter-spacing:.1em;color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.5); } .home-garden__content-text{ font-family:var(--serif);font-weight:300; font-size:14px;letter-spacing:.14em;line-height:2.3; max-width:48rem;width:100%; margin-bottom:clamp(2rem,6vh,8rem); color:#fff; text-shadow:0 1px 14px rgba(0,0,0,.55); } .home-garden__item-content .link-btn{ display:inline-flex;align-items:center;gap:18px; font-family:var(--serif);font-weight:400;font-size:13px;letter-spacing:.3em; color:#fff; padding-bottom:8px;border-bottom:.5px solid rgba(255,255,255,.8); transition:letter-spacing .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease); text-shadow:0 1px 10px rgba(0,0,0,.45); } .home-garden__item-content .link-btn::after{ content:"";display:inline-block; width:22px;height:.5px;background:currentColor;position:relative; transition:width .4s var(--ease); } .home-garden__item-content .link-btn:hover{ letter-spacing:.34em;color:var(--gold-hi);border-color:var(--gold-hi); } .home-garden__item-content .link-btn:hover::after{width:32px;} .home-garden__item-img{ position:absolute;bottom:0;left:0; width:100%;height:100vh;z-index:-1; display:block; } .home-garden__item-img img{ width:100%;height:100%; object-fit:cover;display:block; } /* ---- mobile override (faithful to happo-en's <=767 rules) ---- */ @media (max-width:767px){ .home-garden__top{margin:0 clamp(1rem,4vw,4rem);padding:10rem 0 6rem;} /* heading sizes are unified via the root scale (--fs-h2-section), no per-breakpoint overrides needed. */ .home-garden__top-heading-sub{font-size:1rem;letter-spacing:.04em;} .home-garden__content-heading{text-align:center;} .home-garden__content-heading-main{margin:0 0 1.2rem;} .home-garden__item-content{ padding-left:0;padding-bottom:0; justify-items:center;align-content:center; /* Mobile: solid dark tint replaces the PC vignette for center-aligned legibility (faithful to happo-en mobile behavior). */ background:rgba(0,0,0,.45); text-align:center; } .home-garden__content-text{ max-width:31rem;width:auto; margin-bottom:3rem; padding:0 clamp(1rem,5vw,2rem); } } /* =================== wedding — day-bright full-bleed banner (happo-en home-cat__item) =================== */ /* This section sits in the day zone: the body bg has already morphed to `--paper` by the time the reader arrives, so the wedding frame is transparent (paper shows as the outer band) and the imagery is bright, outdoor, daytime. */ .wedding{ position:relative;width:100%; padding:0; background:transparent; } .wedding__link{ position:relative;display:block;width:100%; height:clamp(520px,78vh,780px); overflow:hidden;color:#fff; } .wedding__bg{ position:absolute;inset:0; /* Bright outdoor wedding photograph — white flowers / daylight garden */ background-image:url('../images/top/wedding-1600.jpg'); background-size:cover;background-position:center; transform:scale(1.04); transition:transform 1800ms var(--ease); will-change:transform; } .wedding.is-in .wedding__bg{transform:scale(1);} .wedding__link:hover .wedding__bg{transform:scale(1.08);} /* Light overlay: a soft warm wash + a bottom-left gradient so the white copy remains legible against the bright imagery. */ .wedding__overlay{ position:absolute;inset:0; background: linear-gradient(110deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.18) 42%, rgba(0,0,0,0) 70%), linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.25) 100%); transition:background .6s var(--ease); } /* On hover, deepen the overlay slightly so the white typography stays crisp even as the background photo zooms (contrast rises by ~15%). */ .wedding__link:hover .wedding__overlay{ background: linear-gradient(110deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.32) 42%, rgba(0,0,0,.08) 72%), linear-gradient(180deg, rgba(0,0,0,.06) 30%, rgba(0,0,0,.4) 100%); } /* Strengthen text shadows on hover for extra legibility */ .wedding__link:hover .wedding__en, .wedding__link:hover .wedding__title, .wedding__link:hover .wedding__lead{ text-shadow:0 2px 22px rgba(0,0,0,.75),0 0 6px rgba(0,0,0,.35); } .wedding__link:hover .wedding__more{ text-shadow:0 2px 14px rgba(0,0,0,.6); } .wedding__inner{ position:relative;z-index:2;height:100%; max-width:var(--wrap-max-wide);margin:0 auto; padding:clamp(40px,6vw,80px) clamp(28px,6vw,96px); display:flex;flex-direction:column;justify-content:center;align-items:flex-start; text-align:left; } .wedding__en{ font-family:var(--en-serif);font-size:11px;letter-spacing:.55em; color:#fff;opacity:.95; margin-bottom:22px; text-shadow:0 1px 12px rgba(0,0,0,.45); } .wedding__title{ font-family:var(--serif-display);font-weight:400; font-size:var(--fs-h2-section); letter-spacing:var(--ls-heading); line-height:var(--lh-heading); color:#fff; margin-bottom:26px;padding-right:var(--ls-heading); text-shadow:0 2px 20px rgba(0,0,0,.55); } .wedding__lead{ font-family:var(--serif);font-size:14px;letter-spacing:.14em; line-height:2.3;max-width:32em;margin-bottom:36px; color:rgba(255,255,255,.95); text-shadow:0 1px 12px rgba(0,0,0,.45); } .wedding__more{ display:inline-flex;align-items:center;gap:18px; font-family:var(--serif);font-weight:400;font-size:13px;letter-spacing:.3em; color:#fff; padding-bottom:8px;border-bottom:.5px solid rgba(255,255,255,.8); transition:letter-spacing .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease); text-shadow:0 1px 10px rgba(0,0,0,.4); } .wedding__more .arrow{width:22px;height:.5px;background:currentColor;position:relative;transition:width .4s var(--ease);} .wedding__more .arrow::after{display:none;} .wedding__link:hover .wedding__more{letter-spacing:.34em;color:var(--gold-hi);border-color:var(--gold-hi);} .wedding__link:hover .wedding__more .arrow{width:32px;} /* =================== hospitality (byaku-style asymmetric) =================== */ .hospitality{ background:var(--ink); color:var(--mute); padding:clamp(140px,20vh,220px) 0; } .hospitality .sec-title h2{color:var(--mute);} /* 3-image asymmetric strip — each item is a positioning box; the photo is absolutely placed inside with its own width/top offset so item-2 drops down and item-3 clings to the top-right, reproducing byaku top-about top-about__image-list staircase rhythm. */ .hospi-list{ margin:clamp(60px,8vh,100px) 0 clamp(70px,9vh,110px); display:flex;justify-content:space-between;align-items:flex-start; flex-wrap:nowrap;width:100%; } .hospi-item{position:relative;margin:0;} /* item-1 — left, widest photo, sits near the top. Using explicit top/left/right/height rather than aspect-ratio to avoid edge cases where an empty absolutely-positioned div can collapse. */ .hospi-item-1{width:32%;aspect-ratio:1 / .96;} .hospi-item-1 .hospi-photo{top:6%;left:0;right:-2%;height:78%;} .hospi-item-1 .hospi-caption{bottom:2%;right:-22px;} /* item-2 — middle, tallest box, photo offset downward */ .hospi-item-2{width:26%;aspect-ratio:1 / 1.7;} .hospi-item-2 .hospi-photo{top:28%;left:0;right:0;height:68%;} .hospi-item-2 .hospi-caption{top:4%;left:-24px;} /* item-3 — right, photo clings to the top-right */ .hospi-item-3{width:30%;aspect-ratio:1 / 1.38;align-self:flex-start;} .hospi-item-3 .hospi-photo{top:0;left:4%;right:-4%;height:78%;} .hospi-item-3 .hospi-caption{bottom:2%;left:-14px;} .hospi-photo{ position:absolute; background-size:cover;background-position:center; filter:saturate(.9) brightness(.92); transition:transform 1400ms var(--ease),filter 1000ms var(--ease); } .hospi-item:hover .hospi-photo{transform:scale(1.03);filter:saturate(1) brightness(1);} .hospi-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,17,22,0) 55%, rgba(14,17,22,.45));pointer-events:none;} .hospi-item-1 .hospi-photo{background-image:url('../images/top/MG_4820-1980x1320.jpg.webp');} .hospi-item-2 .hospi-photo{background-image:url('../images/top/omotenashi02.jpg');} .hospi-item-3 .hospi-photo{background-image:url('../images/top/_sending_off.jpg');} .hospi-caption{ position:absolute;writing-mode:vertical-rl; color:var(--mute); } .hospi-caption .jp{ font-family:var(--serif-display);font-weight:500; font-size:clamp(17px,1.5vw,22px);letter-spacing:.32em;line-height:1.4; text-shadow:0 1px 14px rgba(0,0,0,.5); } /* description + CTA — centered narrow column (byaku top-about__container) */ .hospi-container{ margin:clamp(40px,6vh,80px) auto 0; width:100%;max-width:530px; display:flex;flex-direction:column;align-items:center;text-align:left; } .hospi-container__text{ font-family:var(--serif);font-weight:300; font-size:14px;letter-spacing:.14em;line-height:2.3; color:rgba(232,226,212,.9); margin-bottom:1.8em;width:100%; } .hospi-container__text:last-of-type{margin-bottom:2.4em;} .hospi-container__btns{display:flex;gap:clamp(20px,3vw,44px);flex-wrap:wrap;justify-content:center;align-self:center;} @media (max-width:640px){ .hospi-container__btns{flex-direction:column;align-items:center;gap:18px;} } .hospi-container__btn.link-btn{ display:inline-flex;align-items:center;gap:18px; font-family:var(--serif);font-weight:400;font-size:13px;letter-spacing:.3em; color:var(--mute); padding-bottom:8px;border-bottom:.5px solid rgba(232,226,212,.7); transition:letter-spacing .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease); text-decoration:none;align-self:center; } .hospi-container__btn.link-btn::after{ content:"";display:inline-block; width:22px;height:.5px;background:currentColor; transition:width .4s var(--ease); } .hospi-container__btn.link-btn:hover{letter-spacing:.34em;color:var(--gold-hi);border-color:var(--gold-hi);} .hospi-container__btn.link-btn:hover::after{width:32px;} /* =================== instagram (day zone, transparent bg) =================== */ /* =================== news (day zone, transparent bg) =================== */ .news{background:transparent;color:inherit;padding:clamp(140px,20vh,220px) 0;} .news .sec-title h2{color:var(--ink);} .news__grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;} .news__col h3{ font-family:var(--serif-display); font-weight:500; font-size:var(--fs-h3); letter-spacing:var(--ls-heading-sub); line-height:var(--lh-heading); padding-bottom:16px; border-bottom:.5px solid var(--gold); margin-bottom:8px; display:flex;justify-content:space-between;align-items:baseline; color:var(--ink); } .news__col h3 .en{font-family:var(--en-serif);font-size:11px;color:var(--gold);letter-spacing:.3em;} .news__list{list-style:none;} .news__list li{padding:20px 0;border-bottom:.5px solid rgba(184,147,90,.25);display:grid;grid-template-columns:96px 86px 1fr;gap:14px;align-items:baseline;transition:color .3s;cursor:pointer;color:var(--ink);} .news__list li:hover{color:var(--gold);} .news__list .date{font-family:var(--en-body);font-style:italic;color:var(--gold);font-size:13px;letter-spacing:.05em;} .news__list .tag{font-size:10px;letter-spacing:.2em;color:var(--gold);border:.5px solid rgba(184,147,90,.5);padding:3px 8px;text-align:center;white-space:nowrap;} .news__list .title{font-family:var(--serif);font-size:14px;letter-spacing:.14em;line-height:1.8;} .column__list{display:flex;flex-direction:column;gap:24px;} .col-card{display:grid;grid-template-columns:140px 1fr;gap:20px;padding-bottom:20px;border-bottom:.5px solid rgba(184,147,90,.25);cursor:pointer;color:var(--ink);} .col-card .thumb{aspect-ratio:1/1;background-size:cover;background-position:center;} .col-card .body .date{font-family:var(--en-body);font-style:italic;color:var(--gold);font-size:12px;} .col-card .body h4{ font-family:var(--serif-display); font-weight:500; font-size:var(--fs-h4); letter-spacing:var(--ls-heading-sm); line-height:var(--lh-heading); margin-top:8px; color:var(--ink); } .col-card .body p{margin-top:10px;font-size:12px;color:rgba(26,26,26,.68);line-height:1.8;} .col-1 .thumb{background-image:url('../images/top/Img26166.jpg');} .col-2 .thumb{background-image:url('../images/top/Img26166.jpg');} .col-3 .thumb{background-image:url('../images/top/Img26166.jpg');} /* =================== access =================== */ .access{ background:var(--ink);color:var(--mute); padding:clamp(140px,20vh,220px) 0 0; } .access__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center;} .access__map{aspect-ratio:4/5;position:relative;border:.5px solid rgba(216,184,122,.25);background:#0f1a24;overflow:hidden;} .access__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;filter:grayscale(.45) contrast(1.02) brightness(.9);transition:filter 700ms var(--ease);} .access__map:hover iframe{filter:grayscale(0) contrast(1) brightness(1);} .access__info h3{ font-family:var(--serif-display); font-weight:500; font-size:var(--fs-h3); letter-spacing:var(--ls-heading-sub); line-height:var(--lh-heading); margin-bottom:28px; } .access__info dl{border-top:.5px solid rgba(216,184,122,.25);} .access__info dt{font-family:var(--en-serif);font-size:11px;color:var(--gold);letter-spacing:.3em;padding:18px 0 8px;border-top:.5px solid rgba(216,184,122,.15);} .access__info dt:first-of-type{border-top:none;} .access__info dd{font-family:var(--serif);font-size:15px;letter-spacing:.14em;padding-bottom:18px;border-bottom:.5px solid rgba(216,184,122,.15);line-height:1.9;} .access__info dd small{display:block;font-family:var(--en-body);font-style:italic;color:#b7b0a2;font-size:12px;margin-top:4px;} .access__icons{display:flex;gap:24px;margin-top:32px;} .access__icons .ic{flex:1;text-align:center;padding:18px 12px;border:.5px solid rgba(216,184,122,.3);} .access__icons .ic .l{font-family:var(--serif);font-size:13px;letter-spacing:.2em;} .access__icons .ic .s{margin-top:6px;font-size:11px;color:rgba(232,226,212,.7);letter-spacing:.1em;} /* =================== footer =================== */ .footer{background:var(--ink-2);color:var(--mute);padding:80px 0 32px;border-top:.5px solid rgba(184,147,90,.35);margin-top:120px;} .footer__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:60px;} .footer__logo-img{display:block;width:clamp(160px,15vw,220px);height:auto;} .footer__brand .since{font-family:var(--en-body);font-style:italic;font-size:14px;color:#b7b0a2;margin-top:16px;letter-spacing:.08em;} .footer__brand .vert{margin-top:24px;font-family:var(--serif);font-size:13px;letter-spacing:.24em;line-height:2.2;} .footer h5{ font-family:var(--serif-display); font-weight:500; font-size:13px; letter-spacing:var(--ls-heading-sub); line-height:var(--lh-heading); color:var(--gold); margin-bottom:18px; padding-bottom:10px; border-bottom:.5px solid rgba(184,147,90,.3); } .footer ul{list-style:none;} .footer li{padding:6px 0;font-size:12px;letter-spacing:.14em;color:rgba(232,226,212,.82);} .footer li a:hover{color:var(--gold-hi);} .footer__bottom{margin-top:72px;padding-top:24px;border-top:.5px solid rgba(184,147,90,.2);display:flex;justify-content:flex-start;gap:16px;flex-wrap:wrap;font-size:11px;color:#888;letter-spacing:.14em;} .footer__bottom .en{font-family:var(--en-serif);letter-spacing:.3em;} /* ── Footer brand address ── */ .footer__address{ margin-top:24px;font-family:var(--serif);font-size:13px; letter-spacing:.12em;line-height:2;color:rgba(232,226,212,.78); } /* 適格事業者登録番号（住所の下） */ .footer__invoice{margin-top:8px;font-size:11px;letter-spacing:.06em;color:var(--mute);opacity:.75;} /* ── Footer CTA cells (match menu-modal__cta, always visible) ── */ .footer__cta{ display:flex;flex-direction:column;gap:0; border:1px solid rgba(232,226,212,.22); margin-bottom:18px; } .footer__cell{ display:flex;align-items:center;gap:14px; padding:13px 16px;text-decoration:none;color:var(--mute); border-bottom:1px solid rgba(232,226,212,.14); transition:background .3s,color .3s; } .footer__cell:last-child{border-bottom:none;} .footer__cell:hover{background:rgba(184,147,90,.06);color:var(--gold-hi);} .footer__cell-icon{ flex:none;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center; color:var(--gold);transition:color .3s; } .footer__cell:hover .footer__cell-icon{color:var(--gold-hi);} .footer__cell-text{display:flex;flex-direction:column;gap:3px;min-width:0;} .footer__cell-main{ font-family:var(--serif);font-size:12px;letter-spacing:.16em;font-weight:500;line-height:1.4; } .footer__cell-sub{ font-family:var(--serif);font-size:10px;letter-spacing:.14em;line-height:1.5; color:rgba(232,226,212,.55); } .footer__cell--tel .footer__cell-main{ font-family:var(--en-body);font-style:normal;font-size:17px;letter-spacing:.04em; } /* ── Footer SNS row + English link ── */ .footer__sns{ display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap; } .footer__sns > a[aria-label]{ width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center; border:1px solid rgba(232,226,212,.3);border-radius:50%; color:var(--mute); transition:color .3s,border-color .3s,background .3s,transform .3s var(--ease); } .footer__sns > a[aria-label]:hover{color:var(--gold-hi);border-color:var(--gold-hi);background:rgba(184,147,90,.08);transform:translateY(-2px);} .footer__sns .footer__lang-en{ font-family:var(--serif);font-size:11px;letter-spacing:.2em; color:var(--mute);text-decoration:none;padding-left:6px; transition:color .3s; } .footer__sns .footer__lang-en:hover{color:var(--gold-hi);} /* =================== responsive =================== */ @media (max-width:1080px){ .deck,.deck.is-A,.deck.is-B,.deck.is-C{grid-template-columns:1fr;height:auto;} /* Mobile/tablet: keep every card permanently expanded. The expand-on-tap interaction caused scroll-jank from max-height transitions and made content discovery harder, so we drop the toggle entirely and show all three plan lists at once. */ .o-card{min-height:320px;display:flex;flex-direction:column;cursor:default;} .o-card__inner{height:auto;flex:1 0 auto;opacity:1 !important;} .o-card .bg{filter:none !important;transform:scale(1.05) !important;} .o-card .bg::after{background:rgba(14,17,22,.55) !important;} .o-card__mini{display:none !important;} .o-card__detail{ position:relative;right:auto;top:auto;bottom:auto;width:100%; flex:0 0 auto;transform:none; opacity:1;visibility:visible;pointer-events:auto; max-height:none;overflow:visible; transition:none;margin-top:0; /* Match the inner's horizontal rhythm and leave breathing room at the bottom so the chips and CTA never sit flush against the card edge. 40px aligns with the default .o-card__inner padding used 768–1080. */ padding:0 40px 36px; } /* hospitality — trim asymmetric scale on tablet */ .hospi-list{align-items:flex-start;} .hospi-item-1{width:34%;aspect-ratio:1/1;} .hospi-item-2{width:28%;aspect-ratio:1/1.6;} .hospi-item-3{width:32%;aspect-ratio:1/1.3;} .hospi-caption .jp{font-size:16px;letter-spacing:.28em;} .access__grid,.news__grid{grid-template-columns:1fr;} .footer__grid{grid-template-columns:1fr 1fr;} .course{grid-template-columns:1fr;} /* dish brush-up */ .dish-hero{aspect-ratio:16/9;} .sig-intro{grid-template-columns:1fr;gap:44px;} .sig-intro__img{aspect-ratio:16/9;} .pillar-grid{grid-template-columns:1fr 1fr;} .pillar-3{grid-column:1 / -1;} .pillar-3 .pillar__img{aspect-ratio:21/9;} .dish-cta__inner{grid-template-columns:1fr;gap:30px;} } @media (max-width:640px){ .hero__copy{gap:20px;} /* hospitality — collapse asymmetric layout to cleanly stacked frames on mobile. Each photo becomes a full-width 4/3 card; captions switch to horizontal text docked inside the bottom-left with a soft shadow so they stay legible over any photo. */ .hospi-list{flex-direction:column;align-items:stretch;gap:20px;margin:40px 0 52px;} .hospi-item, .hospi-item-1, .hospi-item-2, .hospi-item-3{ width:100%;aspect-ratio:4/3;margin:0;align-self:stretch; } .hospi-item-1 .hospi-photo, .hospi-item-2 .hospi-photo, .hospi-item-3 .hospi-photo{ position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto; top:0;left:0;right:0;height:100%; } /* Captions — horizontal, bottom-left, with a subtle text-shadow for contrast so we don't need a colored plate */ .hospi-caption, .hospi-item-1 .hospi-caption, .hospi-item-2 .hospi-caption, .hospi-item-3 .hospi-caption{ writing-mode:horizontal-tb; top:auto;right:auto; left:18px;bottom:16px; } .hospi-caption .jp{ font-size:15px;letter-spacing:.24em;line-height:1.5; text-shadow:0 2px 12px rgba(0,0,0,.6),0 0 4px rgba(0,0,0,.35); } .hospi-container{margin-top:40px;padding:0 4px;} .hospi-container__text{font-size:13px;line-height:2.1;letter-spacing:.12em;} .footer__grid{grid-template-columns:1fr;} .course__item .en{grid-column:1/-1;text-align:left;} /* dish brush-up — mobile */ .dish__head{margin-bottom:60px;} .dish-hero{aspect-ratio:4/3;margin-bottom:80px;} .sig-intro{margin-bottom:80px;} .sig-intro__desc{font-size:14px;line-height:2.1;} .pillars{margin-bottom:30px;} .pillars__head{flex-direction:column;align-items:flex-start;gap:14px;} .pillars__head .rule{width:80px;max-width:80px;} .pillar-grid{grid-template-columns:1fr;gap:48px;} .pillar-3{grid-column:auto;} .pillar-3 .pillar__img{aspect-ratio:4/3;} .dish-cta__btn{font-size:12px;letter-spacing:.28em;} } /* =================== follow nav (fixed bottom-right) =================== */ /* Horizontal floating bar in the spirit of akagi-futokoro's followNav: a small SNS cluster sits just left of a single solid card that packs three icon+two-line-text cells separated by hairline dividers. Fades in once the user is well past the hero. */ .follow-nav{ position:fixed;right:clamp(16px,2vw,28px);bottom:clamp(16px,2.4vw,28px); z-index:900; display:flex;align-items:stretch;gap:6px; color:#fff; opacity:0;visibility:hidden;transform:translateY(14px); transition:opacity .6s var(--ease),transform .6s var(--ease),visibility 0s .6s; pointer-events:none; } .follow-nav.is-visible{ opacity:1;visibility:visible;transform:translateY(0); transition:opacity .6s var(--ease),transform .6s var(--ease),visibility 0s; pointer-events:auto; } /* SNS cluster — separate from the main card, 6px gap */ .follow-nav__sns{ list-style:none;display:flex;gap:4px;align-items:stretch; } .follow-nav__sns a{ display:inline-flex;align-items:center;justify-content:center; width:56px;min-height:100%;padding:0 10px; background:#1e1a18;color:#fff; transition:opacity .3s,background .3s; } .follow-nav__sns a:hover{opacity:.65;} /* Main bar — three cells with vertical hairline dividers */ .follow-nav__bar{ display:flex;align-items:stretch; background:#1e1a18; padding:10px 4px; } .follow-nav__cell{ display:flex;align-items:center;gap:12px; padding:8px 20px; color:#fff; transition:opacity .3s; position:relative; } .follow-nav__cell + .follow-nav__cell::before{ content:"";position:absolute;left:0;top:12%;bottom:12%; width:1px;background:rgba(255,255,255,.22); } .follow-nav__cell:hover{opacity:.7;} .follow-nav__icon{ flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:28px;height:28px;color:#fff; } .follow-nav__text{display:flex;flex-direction:column;gap:2px;line-height:1.35;} .follow-nav__main{ font-family:var(--serif);font-weight:500;font-size:14px; letter-spacing:.08em;color:#fff; } .follow-nav__sub{ font-family:var(--serif);font-size:10px;letter-spacing:.06em; color:rgba(255,255,255,.7); } .follow-nav__tel-num{ font-family:var(--en-body);font-weight:500;font-size:17px;letter-spacing:.04em; } /* Tablet — drop the longer sub labels, tighten cells */ @media (max-width:1200px){ .follow-nav__cell{padding:8px 14px;gap:10px;} .follow-nav__main{font-size:13px;} .follow-nav__sub{font-size:9px;} .follow-nav__sns a{width:48px;} } /* Mobile — full-bleed bar docked to the bottom edge; hide SNS cluster */ @media (max-width:900px){ .follow-nav{ left:0;right:0;bottom:0;gap:0; transform:translateY(100%); } .follow-nav.is-visible{transform:translateY(0);} .follow-nav__sns{display:none;} .follow-nav__bar{flex:1;padding:0;} .follow-nav__cell{flex:1;padding:10px 10px;justify-content:center;text-align:left;} .follow-nav__cell + .follow-nav__cell::before{top:0;bottom:0;} .follow-nav__icon{width:22px;height:22px;} .follow-nav__icon svg{width:18px;height:18px;} .follow-nav__main{font-size:11px;letter-spacing:.04em;} .follow-nav__sub{display:none;} .follow-nav__tel-num{font-size:13px;} } @media (max-width:520px){ .follow-nav__cell{padding:10px 6px;gap:6px;} .follow-nav__icon{width:20px;height:20px;} .follow-nav__icon svg{width:16px;height:16px;} .follow-nav__main{font-size:10px;} .follow-nav__tel-num{font-size:12px;} } /* =================== responsive polish =================== Consolidated tablet / phone / small-phone overrides. Previous media queries handle the big structural shifts (deck→1col, grids→stacks, follow-nav docking). This block fine-tunes typography scale, padding, and narrow-column layouts that were still assuming desktop widths. */ /* ---- Tablet (≤960) ---- */ @media (max-width:960px){ .sec-title{margin-bottom:32px;gap:16px;} .sec-title .line{width:44px;} /* Occasions head stacks naturally (already flex-wrap) — trim spacing */ .occasions__head{margin-bottom:44px;} /* Cuisine head breathing room */ .dish__head{margin-bottom:70px;gap:36px;} /* Rooms content text — tighter on tablet */ .home-garden__content-text{font-size:13px;line-height:2.1;} } /* ---- Narrow tablet / large phone (≤767) ---- */ @media (max-width:767px){ /* Section titles — stack vertically with the EN kicker ABOVE the JP heading (line → EN → JP). Prevents the long "News & Column" label from being squeezed to the right of お知らせ・コラム on narrow widths. */ .sec-title{ flex-direction:column;align-items:flex-start;gap:8px; margin-bottom:28px; } .sec-title .line{order:0;width:44px;margin-bottom:2px;} .sec-title .en{order:1;font-size:10px;letter-spacing:.36em;} .sec-title h2{order:2;} /* Header — keep only logo + reserve pill + hamburger */ .header{padding:16px clamp(18px,5vw,32px);} .header__logo-img{width:clamp(108px,26vw,136px);} .btn-reserve .arrow{width:16px;} /* Hero — gentler scale + shadow, avoid gold line crowding the title */ .hero{min-height:560px;} .hero__content{padding:0 20px;} .hero__copy{gap:18px;} .hero__sub{font-size:11px;letter-spacing:.32em;} .hero__title{letter-spacing:.22em;line-height:1.55;} .hero__scroll{display:none;} .hero__anniv-main{font-size:11px;letter-spacing:.22em;} .hero__anniv-sub{font-size:9px;letter-spacing:.18em;} .hero__info{padding:10px 12px 6px;} .hero__info-label{font-size:9px;letter-spacing:.28em;} .hero__info-jp{font-size:9px;} .hero__info-title{font-size:11px;line-height:1.6;} /* Prologue — smaller loop band on phones (fits one-handed grip) */ .prologue__loop{min-height:520px;} /* Occasions — softer card padding */ .o-card__inner{padding:32px 26px;} .o-card__detail{padding:0 26px 32px;} .o-card__kanji{font-size:44px;} .o-card__lead{font-size:16px;letter-spacing:.2em;} .o-card__list li a{font-size:13px;padding:13px 0 13px 22px;letter-spacing:.12em;} .o-card__chips{margin:16px 0 20px;gap:6px;} .o-card__chips span{font-size:9px;padding:5px 10px;letter-spacing:.16em;} .o-card__btn{font-size:12px;letter-spacing:.26em;gap:14px;} /* Wedding — fit phone viewport */ .wedding__link{height:clamp(420px,68vh,560px);} .wedding__inner{padding:56px 28px;} .wedding__en{font-size:10px;letter-spacing:.42em;margin-bottom:18px;} .wedding__title{margin-bottom:22px;} .wedding__lead{font-size:13px;line-height:2.1;margin-bottom:28px;} .wedding__more{font-size:12px;letter-spacing:.26em;} /* News — two-row compact rows; the fixed 140/60/1fr grid was too rigid */ .news__grid{grid-template-columns:1fr;gap:60px;} .news__list li{ grid-template-columns:auto auto; grid-template-rows:auto auto; row-gap:8px;column-gap:12px; padding:16px 0; } .news__list .date{grid-column:1;grid-row:1;} .news__list .tag{grid-column:2;grid-row:1;justify-self:start;} .news__list .title{grid-column:1/-1;grid-row:2;font-size:13px;letter-spacing:.12em;} .col-card{grid-template-columns:112px 1fr;gap:14px;padding-bottom:18px;} .col-card .body h4{margin-top:6px;} .col-card .body p{margin-top:8px;font-size:11px;line-height:1.7;} /* Access — stack map on top, ease field paddings */ .access__map{aspect-ratio:4/3;} .access__info h3{font-size:18px;margin-bottom:20px;} .access__info dt{font-size:9px;letter-spacing:.26em;padding:14px 0 6px;} .access__info dd{font-size:14px;letter-spacing:.12em;padding-bottom:14px;line-height:1.85;} .access__info dd small{font-size:11px;} .access__icons{gap:10px;margin-top:24px;} .access__icons .ic{padding:12px 8px;} .access__icons .ic .l{font-size:12px;letter-spacing:.14em;} .access__icons .ic .s{font-size:10px;letter-spacing:.06em;} /* Footer — 1-col already, loosen and right-size */ .footer{padding:60px 0 28px;margin-top:80px;} .footer__grid{gap:36px;} .footer__brand .vert{writing-mode:horizontal-tb;letter-spacing:.22em;margin-top:14px;font-size:12px;line-height:1.9;} .footer h5{margin-bottom:14px;padding-bottom:8px;} .footer__bottom{margin-top:48px;flex-direction:column;align-items:flex-start;gap:10px;} } /* ---- Phone (≤480) ---- */ @media (max-width:480px){ /* Tighter page gutters on tiny viewports */ .wrap{padding:0 20px;} .occasions > .wrap, .hospitality > .wrap, .news > .wrap, .access > .wrap, .dish > .wrap{padding:0 20px;} /* Header — squeeze the right cluster */ .header{padding:14px 16px;} .header__logo-img{width:104px;} .menu-toggle{width:26px;height:20px;} /* Hero — one last downshift so the vertical title doesn't feel cramped */ .hero__copy{gap:14px;} .hero__sub{font-size:10px;letter-spacing:.28em;} .hero__foot{bottom:18px;} /* Sections — reduce vertical rhythm on phones where 140px+ is too tall */ .occasions, .hospitality, .access{padding-top:100px;padding-bottom:100px;} .access{padding-bottom:0;} .news{padding:90px 0;} .dish{padding:100px 0;} /* Prologue — one size further down */ .prologue__loop{min-height:480px;} .item--msg{width:220px;} .loop__message-heading{letter-spacing:.18em;line-height:1.8;} .loop__kicker{font-size:9px;letter-spacing:.42em;} .loop__sign{font-size:11px;} /* Occasions — even lighter */ .o-card__inner{padding:26px 22px;} .o-card__detail{padding:0 22px 32px;} .o-card__kanji{font-size:38px;} .o-card__lead{font-size:15px;} .o-card__jp{font-size:15px;letter-spacing:.18em;} .o-card__list li a{font-size:12px;padding:12px 0 12px 20px;} /* Wedding — smallest banner */ .wedding__inner{padding:44px 22px;} .wedding__lead{font-size:12.5px;line-height:2;margin-bottom:22px;} /* Instagram — drop to 2 cols (matches existing 640 rule, kept for clarity) */ /* Access info — tighter */ .access__info dd{font-size:13px;} .access__icons{flex-wrap:wrap;} .access__icons .ic{flex:1 1 calc(50% - 6px);} /* Footer bottom stack */ .footer__bottom .en{letter-spacing:.24em;} } /* reduced motion */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;} .hero__slide{animation:none;} } /* 紹介動画のモーダル（固定バーのYouTubeアイコンから開く） */ .video-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);} .video-modal[hidden]{display:none;} .video-modal__backdrop{position:absolute;inset:0;background:rgba(10,10,12,.82);backdrop-filter:blur(2px);} .video-modal__inner{position:relative;width:min(1000px,100%);} .video-modal__frame{position:relative;aspect-ratio:16/9;background:#000;box-shadow:0 24px 60px rgba(0,0,0,.5);} .video-modal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} .video-modal__close{position:absolute;top:-44px;right:0;width:40px;height:40px;display:inline-flex; align-items:center;justify-content:center;background:none;border:0;color:#fff;cursor:pointer; opacity:.85;transition:opacity .3s;} .video-modal__close:hover{opacity:1;} .video-modal__close:focus-visible{outline:1px solid rgba(184,147,90,.7);outline-offset:2px;} body.is-video-open{overflow:hidden;} @media(max-width:640px){ .video-modal__close{top:-40px;} }