@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@400;500&family=Noto+Sans+JP:wght@400;500;600&display=swap');

:root { --cream:#fbf8ef; --cream-deep:#f3eddf; --paper:#fffdf7; --green:#789378; --green-soft:#91a88c; --green-pale:#e9f0e4; --terracotta:#bd805f; --gold:#c5a66b; --line:#e5dfcf; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--green); font-family:'Noto Sans JP',sans-serif; font-size:15px; font-weight:400; line-height:2.15; letter-spacing:.045em; }
img { display:block; width:100%; height:100%; object-fit:cover; }
a { color:inherit; text-decoration:none; }
.site-header { position:sticky; top:0; z-index:20; background:rgba(251,248,239,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.header-inner { width:min(1180px,calc(100% - 64px)); min-height:104px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:36px; }
.logo { color:var(--green); font-family:'Kiwi Maru',serif; font-size:20px; font-weight:500; line-height:1.45; letter-spacing:.06em; }
.logo span { display:block; margin-bottom:2px; color:var(--terracotta); font-family:'Noto Sans JP',sans-serif; font-size:10px; font-weight:500; letter-spacing:.24em; }
.global-nav { display:flex; align-items:center; gap:30px; color:var(--green-soft); font-size:12px; font-weight:500; letter-spacing:.11em; }
.global-nav a { position:relative; padding:12px 0; transition:color .25s ease; }
.global-nav a::after { position:absolute; bottom:4px; left:0; width:0; height:1px; background:var(--terracotta); content:''; transition:width .25s ease; }
.global-nav a:hover,.global-nav .active { color:var(--terracotta); }
.global-nav a:hover::after,.global-nav .active::after { width:100%; }
.menu-button { display:none; border:0; padding:4px; background:transparent; color:var(--green); font-size:25px; cursor:pointer; }
.top-hero { position:relative; min-height:calc(100vh - 104px); display:grid; align-items:center; overflow:hidden; background-image:linear-gradient(90deg,rgba(251,248,239,.91) 0%,rgba(251,248,239,.72) 39%,rgba(251,248,239,.1) 70%),url('images1/cafe-yakuzen-hero.png'); background-position:center; background-size:cover; }
.top-hero-inner { width:min(1180px,calc(100% - 64px)); margin:auto; padding:100px 0 112px; }
.top-hero h1 { max-width:650px; color:var(--green); font-size:clamp(42px,5.1vw,70px); line-height:1.48; letter-spacing:.11em; text-shadow:0 1px 16px rgba(255,253,247,.65); }
.top-hero .eyebrow { margin-bottom:19px; }
.top-hero-text { margin:25px 0 38px; color:var(--green); font-size:15px; line-height:2.2; }
.top-introduction { padding:148px 24px; background:var(--paper); text-align:center; }
.top-introduction-inner { width:min(760px,100%); margin:auto; }
.top-introduction h2 { margin-bottom:27px; font-size:clamp(29px,3.2vw,42px); }
.top-introduction h2 span { color:var(--terracotta); font-size:15px; letter-spacing:.12em; }
.top-introduction p:last-child { margin:0; color:var(--green-soft); }
.top-menu { padding-top:125px; }
.top-menu-heading { margin-bottom:48px; text-align:center; }
.hero { display:grid; min-height:690px; grid-template-columns:1.05fr .95fr; background:var(--cream-deep); }
.hero-copy { align-self:center; width:min(580px,100%); justify-self:end; padding:100px 88px 100px 30px; }
.eyebrow { margin:0 0 16px; color:var(--terracotta); font-size:11px; font-weight:500; letter-spacing:.28em; line-height:1.6; }
h1,h2,h3 { margin:0; color:var(--green); font-family:'Kiwi Maru',serif; font-weight:400; line-height:1.65; letter-spacing:.08em; }
h1 { font-size:clamp(36px,4.3vw,57px); }
h2 { font-size:clamp(27px,3vw,38px); }
.hero-copy > p:not(.eyebrow) { max-width:410px; margin:28px 0 38px; color:var(--green-soft); font-size:15px; }
.hero-image { min-height:690px; overflow:hidden; }
.hero-image img { filter:saturate(.82) brightness(1.06); }
.button { display:inline-block; padding:13px 30px; border:1px solid var(--terracotta); color:var(--terracotta); font-size:12px; font-weight:500; letter-spacing:.14em; line-height:1.6; transition:background .25s,color .25s,transform .25s; }
.button:hover { background:var(--terracotta); color:var(--paper); transform:translateY(-2px); }
.button:focus-visible,.global-nav a:focus-visible,.feature-card:focus-visible,.menu-button:focus-visible,.back-to-top:focus-visible { outline:2px solid var(--terracotta); outline-offset:4px; }
.section-wrap { width:min(1080px,calc(100% - 64px)); margin:auto; padding:128px 0; }
.intro { width:min(800px,calc(100% - 48px)); text-align:center; }
.intro h2 { margin-bottom:28px; }
.intro > p:last-child { margin:0; color:var(--green-soft); }
.feature-section { padding-top:40px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:48px; }
.section-heading > p { max-width:300px; margin:0 0 5px; color:var(--green-soft); font-size:13px; }
.card-grid,.recipe-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.recipe-grid--two { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:710px; }
.feature-card { display:block; overflow:hidden; background:var(--paper); transition:transform .3s ease,box-shadow .3s ease; }
.feature-card:hover { box-shadow:0 17px 38px rgba(121,142,112,.16); transform:translateY(-7px); }
.feature-card img { height:255px; filter:saturate(.82) brightness(1.05); transition:transform .5s ease; }
.feature-card--yakuzen img { background:var(--cream-deep); object-fit:contain; }
.feature-card:hover img { transform:scale(1.04); }
.feature-card > div { padding:25px 25px 29px; }
.card-number { margin:0; color:var(--gold); font-size:10px; letter-spacing:.22em; }
.feature-card h3 { margin:6px 0 9px; font-size:24px; }
.feature-card p:not(.card-number) { margin:0 0 17px; color:var(--green-soft); font-size:13px; line-height:1.95; }
.feature-card span { color:var(--terracotta); font-size:11px; font-weight:500; letter-spacing:.12em; }
.season-note { background:var(--green-pale); text-align:center; }
.season-note .section-wrap { width:min(720px,calc(100% - 48px)); padding:106px 0; }
.season-note h2 { margin-bottom:20px; }
.season-note p:last-child { margin:0; color:var(--green-soft); }
.page-hero { display:grid; min-height:440px; grid-template-columns:1.1fr .9fr; background:var(--cream-deep); }
.page-hero > div { align-self:center; width:min(655px,100%); justify-self:end; padding:82px 76px 82px 30px; }
.page-hero h1 { margin-bottom:10px; }
.page-hero p:last-child { margin:0; color:var(--green-soft); }
.page-hero img { min-height:440px; filter:saturate(.8) brightness(1.07); }
.article { padding-top:114px; }
.article-lead { max-width:720px; margin-bottom:58px; }
.article-lead h2 { margin-bottom:22px; }
.article-lead p { margin:0 0 14px; color:var(--green-soft); }
.notice { margin-top:25px !important; padding:16px 20px; background:#f8f1e5; color:#899582 !important; font-size:12px; line-height:1.95; }
.recipe { overflow:hidden; background:var(--paper); border:1px solid var(--line); }
.recipe { transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease; }
.recipe:hover { border-color:#d9c29c; box-shadow:0 15px 34px rgba(121,142,112,.13); transform:translateY(-5px); }
.recipe img { height:228px; background:var(--cream-deep); filter:saturate(.82) brightness(1.06); object-fit:contain; }
.recipe div { padding:23px 23px 28px; }
.tag { display:inline-block; margin:0 0 10px; padding:3px 10px; background:var(--green-pale); color:var(--green); font-size:10px; letter-spacing:.1em; line-height:1.65; }
.recipe h3 { margin-bottom:10px; font-size:23px; }
.recipe div > p:last-child { margin:0; color:var(--green-soft); font-size:13px; line-height:2; }
.site-footer { padding:43px 24px; background:#f0ebdc; color:var(--green); text-align:center; }
.site-footer p { margin:0; font-family:'Kiwi Maru',serif; font-size:14px; letter-spacing:.08em; }
.site-footer small { color:var(--terracotta); font-size:10px; letter-spacing:.16em; }
.back-to-top { position:fixed; right:25px; bottom:25px; z-index:15; display:grid; width:54px; height:54px; border:1px solid rgba(189,128,95,.72); border-radius:50%; padding:5px; background:rgba(255,253,247,.92); color:var(--terracotta); cursor:pointer; opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .25s ease,transform .25s ease,background .25s ease,color .25s ease; }
.back-to-top span { font-size:18px; line-height:17px; }
.back-to-top small { font-size:8px; font-weight:600; letter-spacing:.12em; }
.back-to-top.is-visible { opacity:1; pointer-events:auto; transform:translateY(0); }
.back-to-top:hover { background:var(--terracotta); color:var(--paper); transform:translateY(-3px); }
html.js-ready [data-reveal] { opacity:0; transform:translateY(20px); transition:opacity .7s ease var(--reveal-delay,0ms),transform .7s ease var(--reveal-delay,0ms); }
html.js-ready [data-reveal].is-revealed { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }
@media (max-width:760px) { body { font-size:14px; } .header-inner { width:calc(100% - 40px); min-height:76px; } .logo { font-size:15px; } .global-nav { position:absolute; top:76px; right:0; left:0; display:none; padding:18px 24px 25px; background:var(--cream); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; gap:2px; } .global-nav.open { display:flex; } .global-nav a { width:100%; padding:10px 0; } .menu-button { display:block; } .hero,.page-hero { grid-template-columns:1fr; } .hero { min-height:auto; } .hero-copy,.page-hero > div { width:100%; padding:76px 24px 56px; } .hero-image,.hero-image img { min-height:330px; } .page-hero img { min-height:280px; } .section-wrap { width:calc(100% - 44px); padding:82px 0; } .intro { width:calc(100% - 44px); } .feature-section { padding-top:20px; } .section-heading { display:block; margin-bottom:32px; } .section-heading > p { margin-top:14px; } .card-grid,.recipe-grid,.recipe-grid--two { grid-template-columns:1fr; gap:22px; max-width:none; } .feature-card { display:grid; grid-template-columns:42% 58%; } .feature-card img { height:100%; min-height:188px; } .feature-card > div { padding:17px; } .feature-card h3 { font-size:20px; } .feature-card p:not(.card-number) { margin-bottom:8px; font-size:12px; } .article { padding-top:80px; } .article-lead { margin-bottom:35px; } .season-note .section-wrap { padding:78px 0; } }
@media (max-width:760px) { .top-hero { min-height:610px; background-image:linear-gradient(90deg,rgba(251,248,239,.91),rgba(251,248,239,.52)),url('images1/cafe-yakuzen-hero.png'); background-position:61% center; } .top-hero-inner { width:calc(100% - 48px); padding:76px 0 88px; } .top-hero h1 { font-size:39px; } .top-hero-text { font-size:13px; } .top-introduction { padding:94px 24px; } .top-menu { padding-top:78px; } }