:root{
  --yellow:#F6C243;
  --yellow-light:#FFD371;
  --green:#4E937E;
  --red:#FF4848;
  --mint:#C2FFD9;
  --mint-deep:#9DDAC6;
  --cream:#FFFDF4;
  --ink:#563F04;
  --ink-soft:#6E5309;
  --brown:#4A3526;
  --blue:#2E6DA4;
  --purple:#7B2D8E;
  --coral:#E06A52;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:70px;}
body{font-family:'Zen Kurenaido',sans-serif;background:var(--cream);color:var(--brown);font-size:17px;line-height:1.9;}
img{max-width:100%;display:block;}
a{color:var(--green);}

/* ハンバーガーメニュー（三本線） */
.menu-btn{position:fixed;top:16px;right:16px;z-index:100;width:58px;height:58px;border:3px solid var(--cream);border-radius:50%;background:var(--yellow);box-shadow:2px 3px 0 rgba(86,63,4,.3);cursor:pointer;transform:rotate(3deg);display:flex;align-items:center;justify-content:center;}
.menu-btn:hover{transform:rotate(3deg) scale(1.07);}
.menu-btn svg{width:30px;height:26px;}
.overlay{position:fixed;inset:0;z-index:90;background:var(--yellow);display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;overflow-y:auto;padding:70px 20px 40px;}
.overlay.open{display:flex;}
.overlay .en-title{font-family:'Caveat',cursive;font-size:34px;color:var(--ink);transform:rotate(-2deg);}
.overlay a{display:block;color:var(--ink);text-decoration:none;font-size:24px;padding:8px 18px;position:relative;}
.overlay a:nth-child(odd){transform:rotate(-1.2deg);}
.overlay a:nth-child(even){transform:rotate(1deg);}
.overlay a:hover{background:linear-gradient(transparent 62%,rgba(255,253,244,.75) 62%);}
.overlay a .num{font-family:'Caveat',cursive;color:var(--red);font-size:22px;margin-right:10px;}
.overlay .insta-link{font-size:17px;color:var(--ink-soft);margin-top:14px;border-bottom:2px dashed var(--ink-soft);}

/* サブページの「戻る」付箋 */
.back{position:fixed;top:26px;left:18px;z-index:80;color:var(--ink);background:var(--yellow);text-decoration:none;font-size:15px;padding:6px 16px;transform:rotate(-2deg);box-shadow:2px 3px 0 rgba(86,63,4,.25);}

/* ヒーロー（黄色背景に額縁入り写真） */
.hero{position:relative;background:var(--yellow);padding:0;}
.hero .frame{position:relative;margin:0;background:none;padding:0;box-shadow:none;transform:none;}
.hero img{display:block;width:100%;height:min(90vh,940px);min-height:420px;object-fit:cover;object-position:center bottom;}

/* お知らせの貼り紙 */
.news{position:absolute;bottom:20px;left:18px;z-index:3;max-width:min(330px,42%);transform:rotate(-2.5deg);background:var(--cream);padding:11px 18px 11px 14px;box-shadow:2px 3px 0 rgba(86,63,4,.3);font-size:15px;line-height:1.6;color:var(--brown);display:flex;align-items:center;gap:9px;}
.news::before{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-4deg);width:70px;height:20px;background:rgba(157,218,198,.85);}
.news .tag{background:var(--red);color:#fff;font-size:13px;padding:2px 12px;border-radius:999px;white-space:nowrap;}
@media(max-width:600px){.news{flex-direction:column;align-items:flex-start;gap:5px;font-size:13px;bottom:14px;left:10px;padding:8px 11px;max-width:40%;}}
/* ヒーローのロゴ文字：ラベルなし・白い筆文字が写真に直接載る。
   位置・大きさはすべてロゴ全体の基準サイズ --u（＝幅の13%）の倍数。画面が変わっても同じバランスになる。
   PCで広くなりすぎないよう、ロゴの入れ物は最大1461pxで中央寄せ */
.hero-label{--u:min(13vw,190px);position:absolute;left:50%;top:0;z-index:2;width:min(100%,1461px);height:0;margin:0;padding:0;background:none;box-shadow:none;transform:translateX(-50%);text-align:left;color:#FFFDF4;line-height:1;pointer-events:none;}
.hero-label .since,.hero-label .name .w{font-family:'Mr Dafoe','Caveat',cursive;font-weight:400;color:#FFFDF4;-webkit-text-stroke:.022em #FFFDF4;text-shadow:0 .018em .035em rgba(60,35,0,.55),0 .05em .16em rgba(0,0,0,.38);}
.hero-label .since{position:absolute;display:block;left:42%;top:calc(var(--u)*.42);font-size:calc(var(--u)*.27);line-height:1.15;white-space:nowrap;transform:rotate(-18deg);transform-origin:left bottom;-webkit-text-stroke:.012em #FFFDF4;}
.hero-label .name{display:block;}
.hero-label .name .w{position:absolute;display:block;line-height:.8;white-space:nowrap;transform:rotate(-22deg);transform-origin:left bottom;}
.hero-label .w1{font-size:calc(var(--u)*1.07);left:29.5%;top:calc(var(--u)*1.58);}
.hero-label .w2{font-size:var(--u);left:40.8%;top:calc(var(--u)*1.96);}
.hero-label .w3{font-size:calc(var(--u)*.66);left:50.8%;top:calc(var(--u)*2.4);}
.hero-label .w3::after{content:"";position:absolute;left:-.55em;right:-.55em;bottom:.12em;height:.05em;min-height:3px;background:#FFFDF4;border-radius:999px;transform:rotate(12deg);transform-origin:left center;box-shadow:0 .02em .05em rgba(60,35,0,.5);}
/* 日本語の見出しは画像に無いので、見た目は隠す（検索エンジン・読み上げ用に残す） */
.hero-label h1{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.hero-label p{position:absolute;left:36.8%;top:calc(var(--u)*2.95);margin:0;font-family:'Zen Kurenaido',sans-serif;font-size:max(12px,calc(var(--u)*.18));color:#FFFDF4;letter-spacing:.05em;white-space:nowrap;transform:rotate(-1deg);-webkit-text-stroke:.02em #FFFDF4;text-shadow:0 .04em .12em rgba(40,20,0,.75),0 .08em .5em rgba(0,0,0,.4);line-height:1.4;}

/* 共通セクション */
section{padding:90px 20px 70px;}
.inner{max-width:960px;margin:0 auto;}
h2{font-weight:400;font-size:clamp(24px,4.5vw,32px);text-align:center;color:var(--brown);letter-spacing:.08em;}
h2 .en{font-family:'Caveat',cursive;color:var(--green);display:block;font-size:22px;letter-spacing:.02em;}
.squiggle{display:block;margin:6px auto 46px;}

/* サブページの見出し（メニュー・ブログ一覧など） */
main{max-width:860px;margin:0 auto;padding:90px 20px 70px;text-align:center;}
main h1{font-weight:400;font-size:clamp(24px,4.5vw,32px);letter-spacing:.08em;}
main h1 .en{font-family:'Caveat',cursive;color:var(--green);display:block;font-size:24px;}
main h1.pacifico{font-family:'Pacifico',cursive;letter-spacing:.02em;}

/* ポラロイド写真 */
.polaroid{background:#fff;padding:10px 10px 16px;box-shadow:2px 3px 8px rgba(86,63,4,.22);position:relative;}
.polaroid::before{content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-3deg);width:86px;height:22px;background:rgba(157,218,198,.85);}
.polaroid figcaption{text-align:center;font-size:14px;color:var(--ink-soft);padding-top:8px;}
.tilt-l{transform:rotate(-2deg);}
.tilt-r{transform:rotate(1.6deg);}

/* こだわり */
.story{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-bottom:70px;}
.story:last-child{margin-bottom:0;}
.story h3{font-weight:400;font-size:22px;color:var(--green);margin-bottom:10px;display:inline-block;background:linear-gradient(transparent 65%,var(--yellow-light) 65%);padding:0 4px;}
.story .num{font-family:'Caveat',cursive;color:var(--red);font-size:26px;margin-right:6px;}
@media(max-width:720px){.story{grid-template-columns:1fr;gap:26px;}.story.rev .photo{order:-1;}}

blockquote{background:#fff;border-radius:4px;padding:22px 26px;margin:56px auto 0;max-width:640px;position:relative;transform:rotate(-.6deg);box-shadow:2px 3px 8px rgba(86,63,4,.18);font-size:18px;text-align:center;}
blockquote::before,blockquote::after{content:"";position:absolute;width:80px;height:20px;background:rgba(157,218,198,.7);}
blockquote::before{top:-10px;left:24px;transform:rotate(-4deg);}
blockquote::after{top:-10px;right:24px;transform:rotate(3deg);}
blockquote small{display:block;color:var(--ink-soft);font-size:13px;margin-top:8px;}

/* 垂れるチーズの区切り（看板メニューのチーズバーガーから・毎回違う垂れ方） */
.drip-wrap{display:block;width:100%;height:clamp(160px,20vw,290px);line-height:0;overflow:hidden;margin-top:-2px;margin-bottom:-2px;}
.drip{display:block;width:100%;height:clamp(160px,20vw,290px);}
.drip-wrap .drip{margin-top:-2px;height:calc(100% + 4px);transform-origin:top center;will-change:transform;}

/* スクロール演出（ライブラリ不使用・軽量）。JS有効時のみ隠す＝JSが失敗しても内容は必ず表示される */
@media (prefers-reduced-motion: no-preference){
  /* transition は「現れる」2つ＋「ホバーで浮く」2つ。JSの時間差(遅れ)は先頭2つにだけ付ける（scroll.js） */
  .js-anim [data-reveal]{opacity:0;translate:0 26px;transition:opacity .7s ease, translate .7s cubic-bezier(.2,.75,.25,1), transform .28s cubic-bezier(.2,.75,.25,1), box-shadow .28s ease;}
  .js-anim [data-reveal].is-visible{opacity:1;translate:none;}
}

/* チェキ・ポラロイドのホバー演出：傾きがまっすぐに近づき、少し浮いて影が濃くなる（マウスのある端末のみ・動きを減らす設定の人には付けない） */
@media (prefers-reduced-motion: no-preference){
  .polaroid,.cheki{transition:transform .28s cubic-bezier(.2,.75,.25,1), box-shadow .28s ease;}
  .polaroid::before,.cheki::before{transition:transform .28s cubic-bezier(.2,.75,.25,1);}
}
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .polaroid:hover,.gallery .polaroid:nth-child(n):hover,.cheki:nth-child(n):hover{transform:translateY(-8px) rotate(0deg) scale(1.03);box-shadow:4px 12px 20px rgba(86,63,4,.3);z-index:2;}
  .polaroid:hover::before{transform:translateX(-50%) rotate(-6deg);}
  .cheki:hover::before{transform:translateX(-50%) rotate(-6deg);}
}

/* メニュー */
.menu-sec{background:var(--yellow);}
.menu-sec h2,.menu-sec h2 .en{color:var(--ink);}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:34px;margin-bottom:52px;}
.cards .polaroid img{aspect-ratio:4/3;object-fit:cover;}
.center{text-align:center;}
.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font-size:18px;padding:13px 38px;border-radius:999px;box-shadow:2px 3px 0 rgba(86,63,4,.3);transform:rotate(-.5deg);}
.btn:hover{transform:rotate(-.5deg) scale(1.04);}
.btn-note{font-size:13px;color:var(--ink-soft);margin-top:10px;}
.btn-green{background:var(--green);}

.note{font-size:14px;color:var(--ink-soft);margin:16px 0 22px;}

/* ギャラリー */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;}
.gallery .polaroid img{aspect-ratio:1/1;object-fit:cover;}
.gallery .polaroid:nth-child(odd){transform:rotate(-1.8deg);}
.gallery .polaroid:nth-child(even){transform:rotate(1.4deg);}

/* ブログ（トップの抜粋カード・一覧・記事本文で共通） */
.blog-sec{background:var(--yellow);}
.blog-sec h2{color:var(--ink);}
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-bottom:44px;}
.post{background:#fff;padding:20px 22px;border-radius:4px;box-shadow:2px 3px 8px rgba(21,92,65,.15);text-decoration:none;color:var(--brown);display:block;}
.post:nth-child(3n+1){transform:rotate(-1deg);}
.post:nth-child(3n+3){transform:rotate(1deg);}
.post-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;}
.post-headtext{flex:1;min-width:0;}
.post-thumb{flex:none;width:58px;height:58px;border-radius:6px;overflow:hidden;box-shadow:1px 2px 5px rgba(86,63,4,.28);transform:rotate(3deg);border:2px solid #fff;}
.post-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.post time{font-family:'Caveat',cursive;color:var(--red);font-size:19px;}
.post h3{font-weight:400;font-size:19px;color:#155C41;margin:2px 0 6px;}
.post p{font-size:14px;color:#5c6b60;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* ブログ一覧ページ */
.post-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;text-align:left;margin-top:10px;}

/* トップページのチェキ風ブログカード（日付・タイトル・写真） */
.cheki{background:#fff;padding:10px 10px 18px;box-shadow:2px 3px 8px rgba(86,63,4,.2);text-decoration:none;color:var(--brown);display:block;position:relative;}
.cheki::before{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-3deg);width:70px;height:18px;background:rgba(157,218,198,.85);}
.cheki:nth-child(3n+1){transform:rotate(-1.5deg);}
.cheki:nth-child(3n+2){transform:rotate(1deg);}
.cheki:nth-child(3n+3){transform:rotate(-.8deg);}
.cheki .photo-wrap{aspect-ratio:16/9;overflow:hidden;background:var(--mint);margin-bottom:12px;}
.cheki .photo-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.cheki .photo-wrap.no-photo{display:flex;align-items:center;justify-content:center;}
.cheki .photo-wrap.no-photo i{font-size:28px;color:var(--mint-deep);}
.cheki time{font-family:'Caveat',cursive;color:var(--red);font-size:18px;display:block;text-align:center;}
.cheki h3{font-weight:400;font-size:17px;color:#155C41;text-align:center;margin-top:2px;}
.cheki .excerpt{font-size:13px;color:#5c6b60;text-align:center;margin-top:6px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* ブログ記事ページ本文 */
.post-header{text-align:center;margin-bottom:40px;}
.post-header time{font-family:'Caveat',cursive;color:var(--red);font-size:22px;display:block;margin-bottom:6px;}
.post-header h1{font-weight:400;font-size:clamp(22px,4.2vw,30px);letter-spacing:.05em;}
.post-body{text-align:left;max-width:640px;margin:0 auto;}
.post-body p{margin-bottom:1.1em;}
.post-body figure{margin:2em auto;max-width:520px;}
.post-body figure img{width:100%;}
.post-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;max-width:640px;margin:0 auto 8px;}
.post-photos figure{background:#fff;padding:8px 8px 10px;box-shadow:2px 3px 8px rgba(86,63,4,.18);}
.post-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.post-nav{display:flex;justify-content:center;gap:16px;margin-top:56px;flex-wrap:wrap;}

/* アクセス */
.access{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
@media(max-width:720px){.access{grid-template-columns:1fr;}}
.info dt{color:var(--green);font-size:15px;margin-top:14px;}
.info dd{font-size:17px;}
.map{border:0;width:100%;height:320px;border-radius:6px;box-shadow:2px 3px 8px rgba(86,63,4,.2);}
.insta{display:flex;align-items:center;gap:16px;margin-top:26px;background:#fff;padding:14px 18px;border-radius:6px;box-shadow:2px 3px 8px rgba(86,63,4,.15);}
.insta img{width:92px;}
.insta p{font-size:14px;color:var(--ink-soft);}

footer{background:var(--brown);color:#F5EDD8;text-align:center;padding:26px 20px;font-size:13px;}
footer .en{font-family:'Caveat',cursive;font-size:20px;display:block;color:var(--yellow);}

/* Today's Menu（データから自動組版） */
.menu-cat{margin-bottom:52px;}
.menu-cat-head{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.menu-cat-head .icon{width:26px;height:26px;flex-shrink:0;}
.cat-title{font-family:'Pacifico',cursive;font-size:28px;font-weight:400;letter-spacing:.02em;}
.cat-intro{font-size:13.5px;color:var(--ink-soft);margin-bottom:18px;text-align:left;line-height:1.7;}
.menu-cat.c-green .cat-title,.menu-cat.c-green .icon{color:var(--green);}
.menu-cat.c-brown .cat-title,.menu-cat.c-brown .icon{color:var(--brown);}
.menu-cat.c-red .cat-title,.menu-cat.c-red .icon{color:var(--red);}
.menu-cat.c-blue .cat-title,.menu-cat.c-blue .icon{color:var(--blue);}
.menu-cat.c-purple .cat-title,.menu-cat.c-purple .icon{color:var(--purple);}
.menu-cat.c-coral .cat-title,.menu-cat.c-coral .icon{color:var(--coral);}
.menu-item{background:#fff;border-radius:4px;padding:14px 18px;margin-bottom:12px;text-align:left;box-shadow:1px 2px 6px rgba(86,63,4,.12);border-left:4px solid transparent;}
.menu-cat.c-green .menu-item{border-left-color:var(--green);}
.menu-cat.c-brown .menu-item{border-left-color:var(--brown);}
.menu-cat.c-red .menu-item{border-left-color:var(--red);}
.menu-cat.c-blue .menu-item{border-left-color:var(--blue);}
.menu-cat.c-purple .menu-item{border-left-color:var(--purple);}
.menu-cat.c-coral .menu-item{border-left-color:var(--coral);}
.menu-item-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;}
.name-en{font-family:'Pacifico',cursive;font-size:19px;color:var(--brown);}
.price{font-family:'Caveat',cursive;font-weight:700;font-size:19px;color:var(--red);white-space:nowrap;}
.price small{font-size:12px;font-weight:400;margin-left:2px;}
.price-note{font-family:'Zen Kurenaido',sans-serif;font-weight:400;font-size:14px;}

/* ドリンクセットの吹き出し */
.drinkset{background:#FFF3C4;border-radius:18px;padding:14px 20px;margin:6px 0 18px;text-align:left;box-shadow:2px 3px 0 rgba(86,63,4,.15);position:relative;transform:rotate(-.5deg);}
.drinkset::before{content:"";position:absolute;top:-9px;left:28px;width:64px;height:18px;background:rgba(157,218,198,.85);transform:rotate(-3deg);}
.drinkset-title{margin:0;font-size:16px;color:var(--red);font-weight:700;}
.drinkset-body{margin:2px 0 0;font-size:13px;color:var(--ink-soft);}
.name-ja{font-size:13.5px;color:var(--ink-soft);margin-top:5px;}
.desc-en{font-size:12px;color:#8a8570;font-style:italic;margin-top:2px;}
.special-badge{display:inline-block;background:var(--red);color:#fff;font-size:10.5px;padding:1px 9px;border-radius:999px;margin-left:8px;vertical-align:middle;}
.menu-options{margin-top:8px;padding-top:8px;border-top:1px dashed #e6dcc0;list-style:none;}
.menu-options li{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-soft);padding:2px 0;gap:10px;}
.menu-pdf-link{margin:44px 0 0;}