/* =========================================================
   とんだ日和 — あたたかく和やかなブランドサイト
   ========================================================= */

:root{
  --cream:      #FBF5E8;   /* ベース背景 */
  --cream-2:    #F4EAD4;   /* 交互セクション */
  --paper:      #FFFDF6;   /* カード地 */
  --ink:        #5E4B39;   /* 文字（こげ茶）*/
  --ink-soft:   #94815F;   /* 薄い文字 */
  --yellow:     #F0C85A;   /* ひよこ */
  --yellow-deep:#E0AE38;
  --green:      #86A965;   /* 双葉 */
  --pink:       #EDA3B3;   /* 小鳥 */
  --blue:       #9CC4D6;
  --line:       #DCC9A6;   /* 罫線 */
  --shadow:     rgba(120, 96, 60, .18);

  --font-display:'Yomogi', cursive;
  --font-body:'Zen Maru Gothic', sans-serif;
  --font-hand:'Klee One', cursive;

  --maxw: 1080px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* やさしい紙の質感（ごく薄いドット）*/
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(circle at 18% 22%, rgba(240,200,90,.10), transparent 38%),
    radial-gradient(circle at 82% 70%, rgba(156,196,214,.10), transparent 40%),
    var(--cream);
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; opacity:.5;
  background-image:radial-gradient(rgba(160,135,90,.06) 1px, transparent 1px);
  background-size:22px 22px;
  pointer-events:none;
}

.wrap{ width:min(92%, var(--maxw)); margin-inline:auto; }
section{ position:relative; padding:84px 0; }
/* 固定ヘッダー分、アンカー移動時に見出しが隠れないように */
section[id]{ scroll-margin-top:84px; }

/* ---------- 見出し ---------- */
.eyebrow{
  font-family:var(--font-hand);
  color:var(--ink-soft);
  letter-spacing:.18em;
  font-size:.92rem;
  margin:0 0 .4em;
}
h2.title{
  font-family:var(--font-display);
  font-size:clamp(1.7rem, 4.4vw, 2.6rem);
  margin:0 0 .6em;
  line-height:1.5;
}
.lead{ color:var(--ink-soft); max-width:34em; }
.center{ text-align:center; margin-inline:auto; }

/* 手書き風の下線 */
.u-wave{
  display:inline-block; position:relative;
}
.u-wave::after{
  content:""; position:absolute; left:-4%; right:-4%; bottom:-.22em; height:.5em;
  background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='14'%3E%3Cpath d='M2 8 Q 25 2 50 8 T 100 8 T 150 8 T 198 8' fill='none' stroke='%23F0C85A' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-body); font-weight:700;
  padding:.85em 1.8em; border-radius:999px;
  border:2px solid var(--ink);
  background:var(--yellow); color:var(--ink);
  box-shadow:0 4px 0 var(--yellow-deep);
  transition:transform .12s ease, box-shadow .12s ease;
  cursor:pointer;
}
.btn:hover{ transform:translateY(2px); box-shadow:0 2px 0 var(--yellow-deep); }
.btn--ghost{
  background:var(--paper); box-shadow:0 4px 0 var(--line);
}
.btn--ghost:hover{ box-shadow:0 2px 0 var(--line); }
.btn--lg{ font-size:1.1rem; padding:1em 2.4em; }

/* =========================================================
   ヘッダー
   ========================================================= */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(251,245,232,.82);
  backdrop-filter:blur(8px);
  border-bottom:2px dashed var(--line);
}
header.site .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; gap:1rem;
}
.brand{ display:flex; align-items:center; gap:.55rem; }
.brand img{ width:40px; height:40px; object-fit:contain; }
.brand b{
  font-family:var(--font-display); font-size:1.35rem; letter-spacing:.02em;
}
nav.site ul{
  display:flex; gap:1.4rem; list-style:none; margin:0; padding:0;
  font-size:.95rem;
}
nav.site a{ padding:.2em 0; border-bottom:2px solid transparent; transition:.2s; }
nav.site a:hover{ border-color:var(--yellow); }
.nav-toggle{ display:none; }

/* =========================================================
   ヒーロー
   ========================================================= */
.hero{ padding:54px 0 64px; }
.hero .wrap{
  display:grid; grid-template-columns:1.05fr .95fr; gap:2rem; align-items:center;
}
.hero-copy .logo-line{
  font-family:var(--font-display);
  font-size:clamp(2.6rem, 7vw, 4.4rem);
  line-height:1.25; margin:.1em 0 .3em;
}
.hero-copy .sprout{ color:var(--green); }
.hero-copy .tagline{
  font-family:var(--font-hand);
  font-size:clamp(1.05rem,2.4vw,1.35rem);
  color:var(--ink-soft); margin:0 0 1.4em;
}
.hero-copy .desc{ margin:0 0 2em; max-width:26em; }
.hero-cta{ display:flex; gap:.9rem; flex-wrap:wrap; }

.hero-art{ position:relative; display:grid; place-items:center; }
.hero-art .blob{
  position:absolute; width:86%; aspect-ratio:1; border-radius:48% 52% 55% 45%/52% 46% 54% 48%;
  background:radial-gradient(circle at 50% 45%, #FCE9AE, #F6D98B 60%, #F0C85A00 72%);
  filter:blur(2px); z-index:0;
}
.hero-art .main-chick{
  position:relative; z-index:1; width:min(86%, 380px);
  filter:drop-shadow(0 18px 16px var(--shadow));
  animation:bob 4.5s ease-in-out infinite;
}
.float-bird{
  position:absolute; z-index:2; width:92px;
  right:2%; top:8%;
  filter:drop-shadow(0 8px 8px var(--shadow));
  animation:bob 5.5s ease-in-out .6s infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-1deg);} 50%{ transform:translateY(-14px) rotate(1deg);} }

/* くもの吹き出し的なミニコピー */
.hero-badge{
  position:absolute; left:-2%; bottom:6%; z-index:3;
  background:var(--paper); border:2px solid var(--ink); border-radius:18px;
  padding:.5em 1em; font-family:var(--font-hand); font-size:.92rem;
  box-shadow:0 4px 0 var(--line); transform:rotate(-4deg);
}
.hero-badge::after{
  content:""; position:absolute; left:24px; bottom:-12px; width:16px; height:16px;
  background:var(--paper); border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(45deg);
}

/* =========================================================
   セクション区切り（波線）
   ========================================================= */
.divider{ height:34px; background:no-repeat center/auto 100%
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34'%3E%3Cpath d='M0 22 Q 30 6 60 22 T 120 22' fill='none' stroke='%23DCC9A6' stroke-width='3' stroke-dasharray='2 9' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:120px 34px; background-repeat:repeat-x; opacity:.9;
}

/* =========================================================
   世界観
   ========================================================= */
.about{ background:var(--cream-2); }
.about .intro{ text-align:center; margin-bottom:3rem; }
.kibun{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem;
}
.kibun figure{
  margin:0; background:var(--paper); border:2px solid var(--line);
  border-radius:26px; padding:18px 14px 14px; text-align:center;
  box-shadow:0 6px 0 var(--line);
  transition:transform .15s ease;
}
.kibun figure:hover{ transform:translateY(-4px) rotate(-1deg); }
.kibun img{ height:128px; object-fit:contain; margin:0 auto .4rem; }
.kibun figcaption{ font-family:var(--font-hand); font-size:.92rem; color:var(--ink-soft); }

/* =========================================================
   シリーズ
   ========================================================= */
.series .intro{ margin-bottom:2.6rem; }
.series-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;
}
.series-card{
  position:relative; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:.35rem;
  background:var(--paper); border:2px solid var(--line); border-radius:26px;
  padding:44px 22px 26px; box-shadow:0 6px 0 var(--line);
  transition:transform .15s ease;
}
a.series-card:hover{ transform:translateY(-5px) rotate(-.6deg); }
.series-card img{
  height:150px; object-fit:contain; margin-bottom:.6rem;
}
.series-card h3{
  margin:.2em 0 .1em; font-family:var(--font-display);
  font-size:1.3rem; color:var(--ink);
}
.series-card p{
  margin:0; font-size:.88rem; color:var(--ink-soft); line-height:1.8;
}
.series-tag{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(-2deg);
  font-family:var(--font-hand); font-size:.8rem; color:#fff;
  padding:.22em 1.1em; border-radius:999px; white-space:nowrap;
  box-shadow:0 3px 0 rgba(0,0,0,.07);
}
.series-more{
  margin-top:auto; padding-top:.9rem;
  font-family:var(--font-hand); font-size:.9rem; font-weight:600;
}
/* シリーズごとの差し色（紙・線・フォントは共通のまま） */
.series-card.is-fairy .series-tag{ background:var(--green); }
.series-card.is-fairy .series-more{ color:var(--green); }
.series-card.is-fairy{ border-color:#C8D3A8; box-shadow:0 6px 0 #C8D3A8; }
.series-card.is-cafe .series-tag{ background:var(--yellow-deep); }
.series-card.is-cafe .series-more{ color:var(--yellow-deep); }
.series-card.is-cafe{ border-color:#E3CB90; box-shadow:0 6px 0 #E3CB90; }
.series-card.is-next{ border-style:dashed; opacity:.85; }
.series-card.is-next .series-tag{ background:var(--ink-soft); }
.series-card.is-next img{ opacity:.9; }

/* =========================================================
   商品（メニュー表風）
   ========================================================= */
.product .wrap{
  display:grid; grid-template-columns:.95fr 1.05fr; gap:2.6rem; align-items:center;
}
.product-photo{ position:relative; display:grid; place-items:center; }
.product-photo .frame{
  background:var(--paper); padding:18px; border-radius:22px;
  border:2px solid var(--line); box-shadow:0 14px 28px var(--shadow);
  transform:rotate(-2deg); max-width:330px;
}
.product-photo .frame img{ border-radius:12px; }
.product-photo .ribbon{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(-2deg);
  background:var(--green); color:#fff; font-family:var(--font-hand);
  padding:.25em 1.1em; border-radius:999px; font-size:.85rem;
  box-shadow:0 4px 0 rgba(0,0,0,.08); z-index:2; white-space:nowrap;
}
.price{ display:flex; align-items:baseline; gap:.5rem; margin:.2em 0 .1em; }
.price .yen{ font-family:var(--font-display); font-size:2.4rem; color:var(--ink); }
.price .duck{ font-family:var(--font-hand); color:var(--ink-soft); font-size:1rem; }
.price-note{ font-size:.8rem; color:var(--ink-soft); margin:0 0 1.4em; }

.spec{ list-style:none; margin:0 0 1.8em; padding:0; }
.spec li{ position:relative; padding:.18em 0 .18em 1.7em; }
.spec li::before{
  content:"🌱"; position:absolute; left:0; font-size:.95em;
}
.buy-note{ font-size:.8rem; color:var(--ink-soft); margin:.9em 0 0; }

/* =========================================================
   ラインナップ
   ========================================================= */
.lineup{ background:var(--cream-2); }
.cards{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1.1rem; margin-top:2.4rem;
}
.cards figure{
  margin:0; background:var(--paper); border:2px solid var(--line);
  border-radius:18px; padding:12px 12px 14px; text-align:center;
  box-shadow:0 6px 0 var(--line); position:relative;
}
.cards img{ border-radius:10px; margin-bottom:.5rem; }
.cards .soon{
  position:absolute; top:-10px; right:-8px; background:var(--pink); color:#fff;
  font-family:var(--font-hand); font-size:.72rem; padding:.2em .7em; border-radius:999px;
  transform:rotate(6deg); box-shadow:0 3px 0 rgba(0,0,0,.06);
}
.cards figcaption b{ display:block; font-size:.92rem; }
.cards figcaption span{ font-family:var(--font-hand); font-size:.8rem; color:var(--ink-soft); }

/* =========================================================
   グッズ予告
   ========================================================= */
.teaser{ text-align:center; }
.teaser .row{
  display:flex; justify-content:center; gap:1.6rem; flex-wrap:wrap; margin-top:2rem;
}
.teaser .pill{
  background:var(--paper); border:2px dashed var(--line); border-radius:999px;
  padding:.6em 1.4em; font-family:var(--font-hand); color:var(--ink-soft);
}

/* =========================================================
   お問い合わせ / フッター
   ========================================================= */
.contact{ text-align:center; }
.contact .box{
  background:var(--paper); border:2px solid var(--line); border-radius:30px;
  padding:48px 24px; box-shadow:0 8px 0 var(--line); max-width:640px; margin:2rem auto 0;
  position:relative;
}
.contact .box img.deco{
  position:absolute; width:86px; right:18px; top:-46px; transform:rotate(8deg);
}
.sns{ display:flex; gap:1rem; justify-content:center; margin-top:1.4rem; }
.sns a{ border-bottom:2px solid var(--yellow); padding-bottom:2px; }

footer.site{
  background:var(--ink); color:#F3E8D4; text-align:center;
  padding:36px 0; font-size:.86rem;
}
footer.site .brand b{ color:#F3E8D4; }
footer.site .mini{ opacity:.7; margin-top:.4rem; }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 860px){
  section{ padding:60px 0; }
  .hero .wrap{ grid-template-columns:1fr; text-align:center; }
  .hero-copy .desc{ margin-inline:auto; }
  .hero-cta{ justify-content:center; }
  .hero-art{ order:-1; }
  .product .wrap{ grid-template-columns:1fr; }
  .product-photo{ order:-1; }
  .kibun{ grid-template-columns:repeat(2,1fr); }
  .series-cards{ grid-template-columns:1fr; gap:1.9rem; }
  .cards{ grid-template-columns:repeat(2,1fr); }

  nav.site ul{
    position:absolute; right:4%; top:64px; flex-direction:column; gap:.4rem;
    background:var(--paper); border:2px solid var(--line); border-radius:16px;
    padding:14px 18px; box-shadow:0 8px 18px var(--shadow);
    display:none;
  }
  nav.site ul.open{ display:flex; }
  .nav-toggle{
    display:inline-flex; background:var(--paper); border:2px solid var(--ink);
    border-radius:12px; width:44px; height:40px; align-items:center; justify-content:center;
    font-size:1.2rem; cursor:pointer;
  }
}
@media (max-width: 480px){
  .cards{ grid-template-columns:repeat(2,1fr); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; scroll-behavior:auto; }
}