:root{
  --paper:#fbf7ee; --ink:#3b3226; --green:#8cc152; --leaf:#4f7a2c; --mist:#eef5e0; --crust:#c98a45; --bark:#5a4230;
  --hand:"Yusei Magic",sans-serif; --round:YuGothic,"Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--round);font-weight:500;font-size:16px;line-height:1.95;letter-spacing:.04em;-webkit-text-size-adjust:100%;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible{outline:3px solid var(--leaf);outline-offset:3px}
h1,h2,h3,p,ul,dl,dd{margin:0;padding:0}
ul{list-style:none}
.ln{display:block;text-wrap:balance}
.nb{display:inline-block;max-width:100%;word-break:keep-all;overflow-wrap:anywhere}
.nw{white-space:nowrap}
h1,h2,h3{font-family:var(--hand);font-weight:400}
h2{font-size:clamp(1.65rem,4.4vw,2.5rem);line-height:1.55;margin-bottom:24px;color:var(--leaf)}
p+p{margin-top:1.1em}
.en{font-family:var(--round);font-weight:700;font-size:.82rem;letter-spacing:.24em;color:var(--crust);margin-bottom:8px}
.drop{clip-path:url(#drop);object-fit:cover}
.btn{display:inline-block;background:var(--leaf);color:#fff;font-weight:700;text-decoration:none;padding:13px 30px;border-radius:999px;line-height:1.6;text-align:center}
.btn:hover{background:#3f6522}
.btn.light{background:#fff;color:var(--bark)}
.btn.light:hover{background:var(--mist)}

/* MENUボタン（右上に固定） */
.menu-btn{position:fixed;top:14px;right:16px;z-index:30}
.menu-btn summary{list-style:none;width:64px;height:64px;border-radius:50%;background:var(--bark);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:.62rem;font-weight:700;letter-spacing:.06em;cursor:pointer;line-height:1}
.menu-btn summary::-webkit-details-marker{display:none}
.menu-btn summary:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.bars{width:26px;height:10px;border-top:2px solid #fff;border-bottom:2px solid #fff}
.menu-btn nav{position:absolute;right:0;top:72px;background:#fff;border-radius:18px;padding:10px 8px;display:grid;min-width:190px;box-shadow:0 8px 24px rgba(60,40,20,.2)}
.menu-btn nav a{text-decoration:none;padding:9px 16px;border-radius:10px;font-weight:700}
.menu-btn nav a:hover{background:var(--mist)}

/* トップ：大きな写真に、ふちを少しでこぼこに。ロゴは上の真ん中、言葉は左下 */
.hero{position:relative;padding:14px 100px 34px 110px}
.hero-box{position:relative;height:min(calc(100svh - 48px),860px);min-height:500px}
.hero-frame{position:absolute;inset:0;overflow:hidden;border-radius:64px;filter:url(#rough);background:#c98a45}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(26px);transform:scale(1.15)}
.hero-p{position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;width:auto;max-width:none;aspect-ratio:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.hero-shade{position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(50,30,10,.55))}
.logo{position:absolute;z-index:3;left:50%;top:6px;transform:translateX(-50%);line-height:0}
.logo img{width:118px;height:118px}
.hero-t{position:absolute;z-index:2;left:clamp(28px,8%,90px);bottom:clamp(30px,8%,64px);right:24px;color:#fff;text-shadow:0 2px 12px rgba(40,20,0,.55)}
.hero h1{font-size:clamp(1.5rem,3.4vw,2.7rem);line-height:1.6;letter-spacing:.08em}
.sub{font-size:clamp(.9rem,1.5vw,1.1rem);font-weight:700;margin-bottom:8px}
.follow{position:absolute;z-index:3;left:30px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--ink)}
.fw{writing-mode:vertical-rl;font-size:.86rem;letter-spacing:.1em}
.follow::before{content:"";order:1;width:1px;height:34px;background:var(--ink)}
.follow a{order:2;line-height:0}
.igi{width:26px;height:26px;flex:none}
.float{position:fixed;z-index:25;right:0;bottom:20px;display:grid;gap:10px;justify-items:end}
.fl{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;font-weight:700;font-size:.9rem;line-height:1.5;padding:10px 22px 10px 14px;border-radius:999px 0 0 999px;border:2px solid rgba(255,255,255,.7);border-right:0;box-shadow:0 4px 14px rgba(60,40,20,.2)}
.fl.ig{background:var(--leaf)}
.fl.map2{background:var(--crust)}
.fl img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.fl .igi{width:44px;height:44px;padding:9px;background:#fff;color:var(--leaf);border-radius:12px}

/* 波の区切り */
.wave{position:absolute;left:0;top:-1px;width:100%;height:clamp(36px,6vw,70px);transform:scaleY(-1)}
.wave path{fill:var(--paper)}

/* しずくのこと：緑の帯に、しずく形の写真を散らす */
.about{position:relative;background:var(--green);color:#fff;padding:clamp(80px,11vw,130px) 22px clamp(60px,8vw,100px)}
.about-in{position:relative;max-width:1040px;margin:0 auto;display:grid;grid-template-columns:150px 1fr 150px;grid-template-rows:auto auto;gap:18px 30px;align-items:center;justify-items:center}
.about-t{grid-column:2;grid-row:1/3;text-align:center;font-weight:700;text-shadow:0 1px 2px rgba(60,90,20,.28)}
.about h2{color:#fff}
.about .cut{width:150px;aspect-ratio:1;border-radius:50%;object-fit:cover}
.f1{grid-column:1;grid-row:1;transform:rotate(-6deg)}
.f2{grid-column:1;grid-row:2;transform:rotate(5deg)}
.f3{grid-column:3;grid-row:1;transform:rotate(6deg)}
.f4{grid-column:3;grid-row:2;transform:rotate(-5deg)}

/* 畑のこと */
.field{padding:clamp(64px,9vw,110px) 22px}
.field-in{max-width:900px;margin:0 auto;display:grid;grid-template-columns:5fr 6fr;gap:clamp(24px,6vw,70px);align-items:center}
.field-p{width:100%;max-width:370px;justify-self:center;aspect-ratio:542/720;border-radius:32px}

/* おやつ */
.menu{background:var(--mist);padding:clamp(64px,9vw,110px) 22px;text-align:center}
.menu h2{margin-bottom:12px}
.lead{margin-bottom:40px}
.items{max-width:1000px;margin:0 auto 56px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px}
.items img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:24px}
.items h3{font-size:1.14rem;line-height:1.6;margin:16px 0 6px;color:var(--bark)}
.items p{font-size:.9rem;line-height:1.8;color:#6a5d4b}
.grid{max-width:760px;margin:0 auto 32px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px}

/* お店 */
.shop{position:relative;background:var(--bark);color:#fff;padding:clamp(84px,11vw,130px) 22px clamp(56px,8vw,90px)}
.shop .wave path{fill:var(--mist)}
.shop h2{color:#fff}
.shop .en{color:#e8c38f}
.shop-in{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:start}
.shop dl{display:grid;grid-template-columns:5.5em 1fr;gap:12px 10px;margin-bottom:28px}
.shop dt{font-weight:700;color:#e8c38f}
.shop dd{line-height:1.8}
.shop-m{position:relative}
.shop-p{width:150px;aspect-ratio:.86;position:absolute;right:-14px;top:-74px;z-index:2}
.map{aspect-ratio:4/3.4;border-radius:24px;overflow:hidden;background:#6d5442}
.map iframe{width:100%;height:100%;border:0;display:block}

footer{background:var(--bark);border-top:1px solid rgba(255,255,255,.15);color:#fff;text-align:center;padding:32px 20px 28px;font-family:var(--hand)}
footer img{margin:0 auto 8px}
footer small{display:block;margin-top:6px;font-family:var(--round);font-size:.76rem;opacity:.8}

@media (min-width:561px){
  .items p .ln{display:inline}
  .items p{text-wrap:balance}
}
@media (max-width:820px){
  .field-in,.shop-in{grid-template-columns:1fr}
  .hero{padding:74px 14px 18px}
  .follow{display:none}
  .logo{top:4px}.logo img{width:66px;height:66px}
  .hero-box{height:auto;min-height:0;aspect-ratio:1}
  .hero-frame{border-radius:36px}
  .hero-p{-webkit-mask-image:none;mask-image:none}
  .hero-t{left:20px;bottom:18px;right:12px}
  .menu-btn{top:6px;right:10px}
  .menu-btn summary{width:56px;height:56px}
  .float{position:static;grid-template-columns:1fr 1fr;margin-top:14px}
  .fl{border-radius:999px;border:0;padding:8px 12px 8px 8px;font-size:.8rem;width:100%;gap:8px}
  .fl img,.fl .igi{width:38px;height:38px}
  .fl .igi{padding:7px}
  .about-in{grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto auto;gap:10px}
  .about-t{grid-column:1/5;grid-row:2;margin:22px 0}
  .about .cut{width:100%;max-width:84px}
  .f1{grid-column:1;grid-row:1}.f2{grid-column:2;grid-row:1}
  .f3{grid-column:3;grid-row:3}.f4{grid-column:4;grid-row:3}
  .field-p{max-width:280px}
  .field-in>div{text-align:center}
  .shop-p{top:-56px;right:-6px;width:112px}
  .shop-m{margin-top:60px}
}
@media (max-width:560px){
  .items{grid-template-columns:repeat(2,1fr);gap:30px 14px}
  .items h3{font-size:1rem}
  .items p{font-size:.82rem}
  .btn{padding:12px 22px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:360px){.float{grid-template-columns:1fr}}