@charset "utf-8";
/* =====================================================================
   ふるさと剣淵 ウェブサイト ── 見た目の設定
   （ふだんの更新では、このファイルを触る必要はありません）

   デザインの方針（2026-08-17 改訂）
   - 色数を絞って「面」で塗る。セクションごとに背景色を反転させる
   - 角は丸め切る。枠線は太く、影はぼかさない（シールのような立体感）
   - 見出しは丸ゴシックの極太。英字ラベルを添えてリズムを作る
   ===================================================================== */

:root{
  --icons-n:11;   /* map-icons.png に入っているアイコンの数（tools/アイコンを作る.py の 並び と同じ） */
  --cream:    #FFF8E7;
  --white:    #FFFFFF;
  --ink:      #1F2A20;
  --ink-soft: #5B6A5C;
  --green:    #14663F;
  --green-d:  #0E4B2E;
  --yellow:   #FFC93C;
  --yellow-l: #FFE49B;
  --orange:   #FF6B35;
  --sky:      #35A7D9;

  --round:   20px;
  --round-l: 28px;
  --pop:     5px 5px 0 var(--ink);
  --pop-sm:  3px 3px 0 var(--ink);

  --maru: "Zen Maru Gothic","Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN W4","Yu Gothic",sans-serif;
  --kaku: "Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  --en:   "Outfit","Zen Kaku Gothic New",sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

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

body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--kaku);
  font-size:16px;
  line-height:1.9;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  text-size-adjust:100%;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
ul,ol{ list-style:none; }

/* スマホで押したときに出る、灰色のもや（ブラウザの標準動作）を消す。
   押した合図は、開く動きやボタンの見た目の変化で伝わるので不要。
   ★キーボードで操作している人向けの枠（下の :focus-visible）は残すこと。消すと操作できなくなります。 */
html{ -webkit-tap-highlight-color:transparent; }
button, a, summary, [role="button"]{ -webkit-tap-highlight-color:transparent; }

/* キーボードで送っているときだけ出る枠（マウスやタップでは出ません） */
:focus-visible{ outline:4px solid var(--sky); outline-offset:3px; border-radius:8px; }

.wrap{ width:min(100% - 36px, 1000px); margin-inline:auto; }

/* ── 下書きの帯 ─────────────────────────────────── */
.draft-bar{
  background:var(--ink); color:var(--cream);
  font-size:13px; line-height:1.6; font-weight:700;
  padding:10px 18px; text-align:center;
}
.draft-bar strong{
  background:var(--orange); color:var(--ink);
  padding:2px 10px; border-radius:99px; margin-right:8px;
}

/* ── 共通パーツ ─────────────────────────────────── */
.label{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--kaku); font-weight:700; font-size:14px;
  color:var(--ink);
}
.label b{
  font-family:var(--en); font-weight:900; font-size:13px; letter-spacing:.14em;
  background:var(--ink); color:var(--yellow);
  padding:5px 14px; border-radius:99px;
}
.label--onDark{ color:var(--cream); }
.label--onDark b{ background:var(--yellow); color:var(--ink); }

.h2{
  font-family:var(--maru); font-weight:900;
  font-size:clamp(26px, 6.6vw, 44px);
  line-height:1.35; letter-spacing:.005em;
  margin-top:18px;
}
.h2--paper{ color:var(--cream); }

.h3{
  font-family:var(--maru); font-size:21px; font-weight:900;
  margin:52px 0 18px;
  display:flex; align-items:center; gap:12px;
}
.h3__mark{
  width:46px; height:46px; flex:none;
  display:grid; place-items:center;
  background:var(--yellow); border:3px solid var(--ink); border-radius:50%;
  font-size:21px; box-shadow:var(--pop-sm);
}
.sub{ color:var(--ink-soft); font-size:15px; margin-top:14px; }
.sub--paper{ color:#CFE3D3; }
.footnote{ color:var(--ink-soft); font-size:12.5px; line-height:1.85; margin-top:26px; }

.section{ padding:72px 0; }
.section--cream{ background:var(--cream); }
.section--green{ background:var(--green); color:var(--cream); }
.section--yellow{ background:var(--yellow); }
.section--join{ background:var(--green-d); color:var(--cream); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--maru); font-weight:900; font-size:17px;
  padding:16px 32px; border-radius:99px;
  text-decoration:none; color:var(--ink);
  border:3px solid var(--ink); box-shadow:var(--pop);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translate(2px,2px); box-shadow:var(--pop-sm); }
.btn:active{ transform:translate(5px,5px); box-shadow:0 0 0 var(--ink); }
.btn--dark{ background:var(--green); color:var(--cream); }
.btn--outline{ background:var(--white); }
.btn--yellow{ background:var(--yellow); }

.tag{
  display:inline-block;
  font-size:12px; font-weight:700; line-height:1.6;
  color:var(--ink); background:var(--yellow-l);
  border:2px solid var(--ink); border-radius:99px; padding:2px 12px;
}
.tag--check{ background:var(--orange); color:var(--white); }

/* ── メニュー（スクロール追従） ─────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--ink);
  border-bottom:4px solid var(--ink);
}
.nav__inner{ display:flex; align-items:center; justify-content:center; gap:16px; }
.nav__logo{ display:none; flex:none; }
.nav__logo img{ height:30px; width:auto; }

.nav__list{
  display:flex; gap:8px;
  justify-content:center;
  justify-content:safe center;   /* はみ出すときは左端から（切れないように） */
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:10px 0;
  scrollbar-width:none;
}
.nav__list::-webkit-scrollbar{ display:none; }
.nav__list li{ flex:none; }

.nav__link{
  display:flex; align-items:center; gap:7px;
  font-family:var(--maru); font-weight:900; font-size:13.5px;
  color:var(--cream); text-decoration:none;
  background:transparent; border:2px solid rgba(255,248,231,.35);
  border-radius:99px; padding:7px 15px;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.nav__link b{
  font-family:var(--en); font-weight:900; font-size:10.5px; letter-spacing:.1em;
  opacity:.7;
}
.nav__link:hover{ border-color:var(--yellow); }
.nav__link[aria-current="true"]{
  background:var(--yellow); color:var(--ink); border-color:var(--yellow);
}
.nav__link[aria-current="true"] b{ opacity:.65; }
.nav__link--join{ border-color:var(--yellow); }

/* 飛び先は、メニューのすぐ下にぴったり付ける
   （手前のブロックの背景色が、メニューの下にのぞかないように） */
.section, .hero{ scroll-margin-top:calc(var(--nav-h, 68px) - 1px); }

/* ── ヒーロー ───────────────────────────────────── */
.hero{
  background:var(--yellow);
  border-bottom:4px solid var(--ink);
  padding:52px 0 60px;
  position:relative; overflow:hidden;
  text-align:center;
}
/* 背景の丸（ロゴのうしろに、太陽のように置く）。写真が出ているときは消す */
.hero::after{
  content:""; position:absolute;
  left:50%; top:14%; transform:translateX(-50%);
  width:min(84vw, 520px); aspect-ratio:1;
  border-radius:50%;
  background:var(--yellow-l); z-index:0;
}
.hero.has-photo::after{ display:none; }

/* 背景写真（ゆっくり入れ替わる） */
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__bg img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.4s ease;
}
.hero__bg img.is-on{ opacity:1; }
/* 文字を読みやすくするための「かすみ」。数字を小さくすると写真が濃くなる */
.hero.has-photo .hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(closest-side at 50% 46%,
      rgba(255,248,231,.90) 0%,
      rgba(255,248,231,.62) 62%,
      rgba(255,248,231,.30) 100%),
    linear-gradient(180deg, rgba(255,201,60,.20), rgba(255,201,60,.34));
}
.hero__inner{ position:relative; z-index:1; }

.hero__eyebrow{
  font-family:var(--en); font-weight:900; font-size:13px; letter-spacing:.22em;
  color:var(--green);
}

/* ロゴマーク（オープンチャットと同じワードマーク） */
.wordmark{ margin-top:16px; }
.wordmark img{
  width:min(100%, 420px); height:auto;
  margin-inline:auto;
  filter:drop-shadow(6px 6px 0 var(--white));
}

.catch{
  font-family:var(--maru); font-weight:900;
  font-size:clamp(20px, 5.6vw, 30px);
  line-height:1.6; margin-top:22px;
}
.lede{
  margin:18px auto 0; max-width:26em;
  font-size:15.5px; font-weight:500;
  text-wrap:balance;
}
.nb{ white-space:nowrap; }
.hero__cta{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

/* ── 流れる帯 ───────────────────────────────────── */
.marquee{
  background:var(--orange);
  border-bottom:4px solid var(--ink);
  overflow:hidden; padding:12px 0;
  --m-gap:26px;                     /* 文字と文字のあき。スマホでは下で狭める */
}
.marquee__track{
  /* ★あきは gap ではなく、span の margin-right でとっています。
       gap でとると「同じものを2組ならべて -50% 動かす」やり方と噛み合わず、
       1周するたびに“あきの半分”（13px）だけ文字が飛びます。
       margin なら1組の幅にあきが含まれるので、継ぎ目がぴたりと合います。
       （2026-08-29 修正。スマホで文字が切れて見えた原因はこれ） */
  display:flex; width:max-content;
  animation:slide 26s linear infinite;
}
.marquee__track span{
  font-family:var(--maru); font-weight:900; font-size:18px;
  color:var(--white); white-space:nowrap;
  margin-right:var(--m-gap);
}
.marquee__track .m-weather{
  background:var(--white); color:var(--ink);
  border-radius:99px; padding:1px 18px;
}
.footer a{ color:#CFC7B6; }

/* 画面には出さないが、読み上げには渡す */
.sr-only{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ── 地図 ───────────────────────────────────────── */
.legend{
  margin-top:24px; display:flex; gap:10px; flex-wrap:wrap;
}
/* 「まちなかを閉じる」ボタン */
.mapback{ margin-top:12px; }
.mapback button{
  font-family:var(--maru); font-weight:900; font-size:12.5px;
  background:var(--orange); color:var(--white); cursor:pointer;
  border:3px solid var(--ink); border-radius:99px; padding:5px 15px;
  box-shadow:3px 3px 0 var(--ink);
}
.mapback button:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }

/* 凡例＝地図の絞り込みボタン。色は地図のアイコンの足もとの台座と同じ */
.legendbtn{
  font-family:var(--maru); font-weight:900; font-size:13px;
  border:3px solid var(--ink); border-radius:99px;
  padding:5px 16px 5px 12px;
  display:flex; align-items:center; gap:8px;
  background:var(--white); color:var(--ink); cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.legendbtn::before{
  content:""; width:14px; height:14px; border-radius:50%;
  border:2.5px solid var(--ink); background:var(--white);
}
.legendbtn.is-eat::before{ background:var(--yellow); }
.legendbtn.is-buy::before{ background:#7FD3A0; }
.legendbtn.is-make::before{ background:#CDEBD6; }
.legendbtn.is-all::before{ display:none; }
.legendbtn:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.legendbtn[aria-pressed="true"]{
  background:var(--yellow); transform:translate(3px,3px); box-shadow:0 0 0 var(--ink);
}

.mapstage{ margin-top:26px; display:grid; gap:26px; }
.mapstage__frame{
  /* 480px ＝ 地図の160ドット×3。ドットがきれいな正方形になる大きさ */
  width:100%; max-width:480px; aspect-ratio:160 / 185;     /* map-dot.png の縦横比 */
  margin-inline:auto; position:relative;
  border:3px solid var(--ink); box-shadow:var(--pop); border-radius:6px;
  container-type:inline-size;
  /* アイコンは16ドット、地図は160ドット幅。10% にすると地図のドットとぴったり同じ粒になる */
  --icon:44px;
  --icon:10cqw;
}
/* 地図の紙。切り替えのときに絵が外へはみ出さないよう、ここで切り取る */
.mapstage__paper{
  position:absolute; inset:0; overflow:hidden; border-radius:3px;
  background:var(--cream);
}
.townmap{
  position:absolute; inset:0;
  width:100%; height:100%; display:block;
  image-rendering:crisp-edges;
  image-rendering:pixelated;      /* ドットをぼかさずに拡大する */
  will-change:transform, opacity;
}
/* 切り替え中だけ使う「前の地図」 */
.townmap--prev{ opacity:0; pointer-events:none; }

/* まちなかへ寄る／もどるときの動き。
   アイコンは、地図が落ち着いたころに順番にぽんぽんと出てくる */
@keyframes ぽんと出る{
  from{ opacity:0; transform:translate(-50%,-50%) scale(.5); }
  70% { opacity:1; transform:translate(-50%,-50%) scale(1.12); }
  to  { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
@keyframes ふわり{ from{ opacity:0; } to{ opacity:1; } }
.pins.is-arriving .pin{
  animation:ぽんと出る 300ms cubic-bezier(.2,1.2,.35,1) backwards;
  animation-delay:calc(110ms + var(--n, 0) * 34ms);
}
.leaders.is-arriving, .truedots.is-arriving{
  animation:ふわり 260ms ease 320ms backwards;
}

/* 地図の下の「名前のボタン」 */
.placelist{ margin-top:18px; display:flex; gap:8px; flex-wrap:wrap; }
.placebtn{
  font-family:var(--maru); font-weight:900; font-size:13px;
  background:var(--white); color:var(--ink); cursor:pointer;
  border:3px solid var(--ink); border-radius:99px;
  box-shadow:var(--pop-sm); padding:6px 14px;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.placebtn:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.placebtn[aria-pressed="true"]{ background:var(--yellow); transform:translate(3px,3px); box-shadow:0 0 0 var(--ink); }
.placebtn.is-buy{ background:#EAF7EF; }
.placebtn.is-buy[aria-pressed="true"]{ background:var(--yellow); }

.placecard__links{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }
/* 「食べる」のカードに出す、お店のリンク */
.card__links{ margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; }
.card__link{
  display:inline-block;
  font-family:var(--maru); font-size:12.5px; font-weight:700;
  background:var(--yellow); color:var(--ink); text-decoration:none;
  border:2px solid var(--ink); border-radius:99px; padding:6px 14px;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .14s ease, box-shadow .14s ease;
}
.card__link:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.placecard__link{
  font-family:var(--maru); font-weight:900; font-size:14px;
  background:var(--yellow); color:var(--ink); text-decoration:none;
  border:3px solid var(--ink); border-radius:99px;
  box-shadow:var(--pop-sm); padding:9px 20px;
}
.placecard__link--sub{ background:var(--white); }
.placecard__link:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }

.pins{ position:absolute; inset:0; z-index:3; }

/* 引き出し線（アイコン → そのお店の本当の位置）
   1本ずつ、そのお店自身の場所へ引いています。
   地図の色に負けないよう、白い線を下に敷いた上から同じ線を重ねる（app.js が2重に描いています） */
.leaders{ position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }
.leaders line{ vector-effect:non-scaling-stroke; stroke-linecap:round; }
.leaders__halo line{ stroke:var(--white); stroke-width:6;   opacity:.95; }
.leaders__ink  line{ stroke:var(--ink);   stroke-width:2.6; opacity:.9; }
.leaders__ink  line.is-on{ stroke:var(--orange); stroke-width:4; opacity:1; }

/* 「本当はここ」を指すオレンジの点 */
.truedots{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.truedot{
  position:absolute; transform:translate(-50%,-50%);
  width:12px; height:12px; border-radius:50%;
  background:var(--orange);
  border:2.5px solid var(--white);
  box-shadow:0 0 0 2px var(--ink);
}
.truedot.is-on{
  width:16px; height:16px; z-index:1;
  box-shadow:0 0 0 2px var(--ink);
}

/* まちなかを開いているあいだ、ほかの場所はうすく下がる（開いたほうを読みやすくするため） */
.pin--faint{ opacity:.34; }
.pin--faint:hover, .pin--faint:focus-visible{ opacity:1; }
.pin--faint .pin__name{ display:none; }
.pin--faint:hover .pin__name, .pin--faint:focus-visible .pin__name{ display:block; }
.leaders line.is-faint{ opacity:.22; }
.truedot.is-faint{ opacity:.3; }
.pin{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:0; cursor:pointer;
  padding:7px;              /* 見た目は変えずに、指で押せる大きさを確保する */
  font-family:var(--maru);
  --plate:var(--white);
}
/* 足もとの台座。色が「食べる／見る／買う」の目印になります（上の凡例と同じ色） */
.pin::before{
  content:""; position:absolute; left:50%; top:calc(var(--icon) * .80 + 7px);
  transform:translateX(-50%);
  width:calc(var(--icon) * .62); height:6px; border-radius:99px;
  background:var(--plate); border:2px solid var(--ink);
  transition:transform .1s steps(2);
}
.pin.is-eat{ --plate:var(--yellow); }
.pin.is-buy{ --plate:#7FD3A0; }
.pin.is-make{ --plate:#CDEBD6; }
.pin__dot{
  position:relative; z-index:1;
  width:var(--icon); height:var(--icon);
  background-image:url("map-icons.png"); background-repeat:no-repeat;
  background-size:calc(var(--icon) * var(--icons-n)) var(--icon);
  background-position:calc(var(--i) * var(--icon) * -1) 0;
  image-rendering:crisp-edges;
  image-rendering:pixelated;
  /* 地図の絵が細かいので、まわりにクリーム色のふちを付けて浮き上がらせる */
  filter:drop-shadow(2px 0 0 var(--cream, #FFF8E7)) drop-shadow(-2px 0 0 var(--cream, #FFF8E7))
         drop-shadow(0 2px 0 var(--cream, #FFF8E7)) drop-shadow(0 -2px 0 var(--cream, #FFF8E7))
         drop-shadow(0 3px 2px rgba(14,46,34,.45));
  transition:transform .1s steps(2);
}
.pin:hover .pin__dot{ transform:translateY(-4px); }
.pin[aria-pressed="true"] .pin__dot{ transform:translateY(-6px) scale(1.12); }
.pin[aria-pressed="true"]::before{ transform:translateX(-50%) scaleX(1.25); }
.pin[aria-pressed="true"] .pin__name{ background:var(--orange); }
.pin__name{
  /* ★ボタンの中に置くと、名前の幅のぶんだけ「押せる範囲」が広がってしまい、
     となりのアイコンと重なって押しにくくなる。
     浮かせて（position:absolute）、指にも反応しないようにしている。 */
  position:absolute; left:50%; top:calc(100% + 3px);
  transform:translateX(-50%);
  pointer-events:none;
  font-size:11px; font-weight:700; line-height:1.4;
  background:var(--ink); color:var(--white);
  border-radius:99px; padding:2px 9px; white-space:nowrap;
  transition:background .14s ease;
}
/* アイコンが近いので、名前はふだん隠しておいて、
   カーソルを合わせたとき・押したときだけ出す（お店のアイコンは同じ絵なので、これがないと見分けられない） */
.pin__name{ display:none; }
.pin:hover .pin__name,
.pin:focus-visible .pin__name,
.pin--group .pin__name,
.pin[aria-pressed="true"] .pin__name{ display:block; }
.pin--group .pin__name{ background:var(--orange); }

/* まちなかを開いているあいだ、ほかの場所はうすくして後ろに下げる
   （消さないのは、町のどのへんの話なのかを見失わないため） */
.pin--faint{ opacity:.42; z-index:0; }
.pin--faint .pin__dot{ filter:none; }
.pin--faint:hover, .pin--faint:focus-visible{ opacity:1; z-index:3; }
.pin--faint:hover .pin__dot, .pin--faint:focus-visible .pin__dot{
  filter:drop-shadow(2px 0 0 var(--cream, #FFF8E7)) drop-shadow(-2px 0 0 var(--cream, #FFF8E7))
         drop-shadow(0 2px 0 var(--cream, #FFF8E7)) drop-shadow(0 -2px 0 var(--cream, #FFF8E7))
         drop-shadow(0 3px 2px rgba(14,46,34,.45));
}
.pin:hover, .pin:focus-visible{ z-index:3; }
.pin[aria-pressed="true"]{ z-index:2; }

.placecard{
  background:var(--white); border:3px solid var(--ink);
  border-radius:var(--round-l); box-shadow:var(--pop);
  padding:24px; min-height:150px;
  align-self:start;
}
.placecard__empty{ color:var(--ink-soft); font-size:14.5px; }
.placecard__head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.placecard__icon{
  width:56px; height:56px; flex:none;
  background-color:var(--yellow);
  background-image:url("map-icons.png"); background-repeat:no-repeat;
  background-size:calc(56px * var(--icons-n)) 56px;
  background-position:calc(var(--i) * -56px) 0;
  image-rendering:crisp-edges;
  image-rendering:pixelated;
  border:3px solid var(--ink); border-radius:50%;
  box-shadow:var(--pop-sm);
}
/* 地図の下のボタンに出る、小さいドット絵 */
.minidot{
  display:inline-block; vertical-align:-4px; margin-right:5px;
  width:18px; height:18px;
  background-image:url("map-icons.png"); background-repeat:no-repeat;
  background-size:calc(18px * var(--icons-n)) 18px;
  background-position:calc(var(--i) * -18px) 0;
  image-rendering:crisp-edges;
  image-rendering:pixelated;
}
.placecard__kind{
  font-family:var(--maru); font-size:12px; font-weight:900;
  color:var(--ink-soft); letter-spacing:.06em;
}
.placecard__name{ font-family:var(--maru); font-size:23px; font-weight:900; line-height:1.35; }
.placecard__meibutsu{
  margin-top:16px; font-family:var(--maru); font-weight:900; font-size:16px;
  background:var(--yellow-l); border-radius:var(--round); padding:10px 16px;
}
.placecard__body{ margin-top:14px; font-size:15.5px; }
.placecard__place{ margin-top:14px; font-size:12.5px; font-weight:700; color:var(--ink-soft); }

/* ── 旬 ─────────────────────────────────────────── */
.chips{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
.chips li{
  font-family:var(--maru); font-weight:900; font-size:17px;
  background:var(--yellow); color:var(--ink);
  border:3px solid var(--ink); border-radius:99px;
  box-shadow:var(--pop-sm);
  padding:9px 22px;
  display:flex; align-items:center; gap:8px;
}
.chips li:nth-child(2n){ background:var(--white); }
.chips li.is-empty{ background:transparent; color:#CFE3D3; border-style:dashed; box-shadow:none; font-weight:700; font-size:15px; }

/* ── カード（お店・生産者） ─────────────────────── */
.cards{ display:grid; gap:20px; grid-template-columns:1fr; }
.card{
  background:var(--white); border:3px solid var(--ink);
  border-radius:var(--round-l); box-shadow:var(--pop);
  padding:22px 24px;
}
.card__hd{ margin:0; font-size:inherit; font-weight:inherit; }
.card__toggle{
  display:block; width:100%; padding:0; text-align:left;
  background:none; border:0; color:inherit; font:inherit;
}
.card__top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.card__name{ font-family:var(--maru); font-size:20px; font-weight:900; line-height:1.4; }
.card__arrow{ display:none; }
.card__meibutsu{
  margin-top:14px; font-family:var(--maru); font-weight:900; font-size:16px;
  background:var(--yellow-l); border-radius:var(--round);
  padding:10px 14px;
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
}
.card__meibutsu::before{
  content:"名物"; font-size:10.5px; font-weight:900; letter-spacing:.08em;
  background:var(--ink); color:var(--yellow);
  border-radius:99px; padding:2px 9px; flex:none;
}
.card__body{ margin-top:12px; font-size:14.5px; color:var(--ink-soft); }
.card__place{ margin-top:14px; font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.cards--makers .card__crops{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.sub--tight{ margin-top:6px; margin-bottom:16px; }

/* 作物での絞り込み */
/* 剣淵でとれるもの */
.crops{
  margin-top:20px; display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
}
.crop{
  background:var(--white); border:3px solid var(--ink); border-radius:14px;
  box-shadow:var(--pop-sm); padding:12px 14px;
  display:flex; flex-direction:column; gap:3px;
}
.crop__name{ font-family:var(--maru); font-weight:900; font-size:15.5px; line-height:1.3; }
.crop__kind{ font-size:11.5px; font-weight:700; color:var(--ink-soft); line-height:1.4; }
.crop__when{
  margin-top:4px; align-self:flex-start;
  font-family:var(--en); font-size:11.5px; font-weight:700;
  background:var(--cream); border:2px solid var(--ink); border-radius:99px; padding:1px 9px;
}
/* いまの時期のもの */
.crop.is-now{ background:var(--yellow); }
.crop.is-now .crop__when{ background:var(--white); }

.cropfilter{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.tag--crop{
  font-family:var(--kaku); cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.tag--crop:hover{ transform:translateY(-1px); }
.tag--crop[aria-pressed="true"]{ background:var(--ink); color:var(--yellow); border-color:var(--ink); }
.pin.is-make .pin__dot{ background:#CDEBD6; }

/* ── 食べ方 ─────────────────────────────────────── */
.recipes{ display:grid; gap:18px; }
.recipe{
  background:var(--green); color:var(--cream);
  border:3px solid var(--ink); border-radius:var(--round-l);
  box-shadow:var(--pop);
  padding:22px 24px;
}
.recipe__food{
  font-family:var(--en); font-size:12px; font-weight:900; letter-spacing:.1em;
  background:var(--yellow); color:var(--ink);
  display:inline-block; padding:3px 13px; border-radius:99px;
}
.recipe__title{ font-family:var(--maru); font-size:19px; font-weight:900; margin-top:12px; }
.recipe__body{ margin-top:10px; font-size:14.5px; color:#DCEDE0; }
.recipe__who{ margin-top:12px; font-size:12.5px; color:#B8D2BE; }

/* ── イベント ───────────────────────────────────── */
.events{ display:grid; gap:16px; }
.events:not(:empty){ margin-top:30px; }
.event{
  background:var(--white); border:3px solid var(--ink);
  border-radius:var(--round-l); box-shadow:var(--pop);
  padding:20px 24px;
  display:grid; grid-template-columns:auto 1fr; gap:6px 18px; align-items:center;
}
.event--past{ opacity:.45; }
.event__date{
  font-family:var(--maru); font-weight:900; font-size:15px;
  background:var(--ink); color:var(--yellow);
  border-radius:99px; padding:4px 15px; white-space:nowrap;
}
.event__name{ font-family:var(--maru); font-weight:900; font-size:18px; line-height:1.4; }
.event__body{ grid-column:1 / -1; font-size:14.5px; color:var(--ink-soft); }
.event__place{ grid-column:1 / -1; font-size:12.5px; font-weight:700; color:var(--ink-soft); }

/* ── じゃがいも診断 ─────────────────────────────── */
.potato{ margin-top:28px; }
.potato__field input{
  width:100%;
  font-family:var(--maru); font-weight:700; font-size:17px;
  color:var(--ink); background:var(--white);
  border:3px solid var(--ink); border-radius:99px;
  box-shadow:var(--pop);
  padding:16px 26px;
  -webkit-appearance:none; appearance:none;
}
.potato__field input::placeholder{ color:#9AA79B; font-weight:500; }

.potato__chips{ margin-top:18px; display:flex; gap:9px; flex-wrap:wrap; }
.potato__chip{
  font-family:var(--maru); font-weight:900; font-size:13.5px;
  background:var(--white); color:var(--ink);
  border:3px solid var(--ink); border-radius:99px;
  box-shadow:var(--pop-sm); cursor:pointer;
  padding:7px 16px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.potato__chip:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.potato__chip:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--ink); }
.potato__chip--all{ background:var(--ink); color:var(--yellow); }

.potato__count{
  margin-top:24px; font-family:var(--maru); font-weight:900; font-size:18px;
}
.potato__hint{ margin-top:22px; font-size:14.5px; font-weight:700; }
.potato__results{ margin-top:16px; display:grid; gap:14px; }
.pcard{
  background:var(--white); border:3px solid var(--ink);
  border-radius:var(--round-l); box-shadow:var(--pop);
  padding:18px 22px;
}
.pcard__no{
  font-family:var(--en); font-weight:900; font-size:11px; letter-spacing:.1em;
  color:var(--ink-soft);
}
.pcard__name{ font-family:var(--maru); font-weight:900; font-size:20px; margin-top:2px; }
.pcard__desc{ margin-top:8px; font-size:14px; color:var(--ink-soft); }
.pcard__uses{ margin-top:12px; display:flex; gap:7px; flex-wrap:wrap; }
.pcard__uses li{
  font-size:12px; font-weight:900;
  background:var(--yellow-l); border-radius:99px; padding:3px 12px;
}

/* 品種名で引いたときの大きいカード */
.potato__results:has(.pcard--solo){ grid-template-columns:1fr; }
.pcard--solo{ padding:26px 28px; }
.pcard__name--big{ font-size:26px; margin-top:4px; }
.pcard__label{
  margin-top:20px; font-family:var(--maru); font-weight:900; font-size:13px;
  color:var(--ink-soft);
}
.pcard__uses--big{ margin-top:10px; gap:10px; }
.pcard__uses--big li{ background:none; padding:0; }
.pcard__uses--big button{
  font-family:var(--maru); font-weight:900; font-size:15px;
  background:var(--yellow); color:var(--ink);
  border:3px solid var(--ink); border-radius:99px;
  box-shadow:var(--pop-sm); cursor:pointer; padding:8px 18px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.pcard__uses--big button:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.pcard__uses--big button:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--ink); }
.pcard__note{ margin-top:16px; font-size:12.5px; color:var(--ink-soft); }

/* ── 買う・ふるさと納税 ─────────────────────────── */
.buys{ margin-top:28px; display:grid; gap:18px; }
.buy{
  background:var(--white); color:var(--ink);
  border:3px solid var(--ink); border-radius:var(--round-l);
  box-shadow:var(--pop); padding:22px 24px;
  /* 文章の長さが違ってもボタンの高さがそろうように、下にそろえる */
  display:flex; flex-direction:column;
}
.buy__top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.buy__name{ font-family:var(--maru); font-size:20px; font-weight:900; }
.buy__who{ margin-top:8px; font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.buy__body{ margin-top:10px; font-size:14.5px; color:var(--ink-soft); }
.buy__place{ margin-top:12px; font-size:13px; font-weight:700; }
.buy__btns{ margin-top:auto; padding-top:18px; display:flex; gap:10px; flex-wrap:wrap; }
.buy__btn{
  font-family:var(--maru); font-weight:900; font-size:14px;
  background:var(--white); color:var(--ink); text-decoration:none;
  border:3px solid var(--ink); border-radius:99px;
  box-shadow:var(--pop-sm); padding:9px 20px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.buy__btn:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.buy__btn--gold{ background:var(--yellow); }
.buy__soon{ font-size:12.5px; font-weight:700; color:var(--ink-soft); }

/* ふるさと納税の説明の中のリンク */
.furusato__link{ color:inherit; font-weight:900; text-underline-offset:3px; }
.furusato__link:hover{ text-decoration-thickness:2px; }

.furusato{
  margin-top:28px;
  border:3px dashed rgba(255,248,231,.55);
  border-radius:var(--round-l);
  padding:24px 26px;
}
.furusato__title{ font-family:var(--maru); font-weight:900; font-size:17px; color:var(--yellow); }
.furusato__body{ margin-top:10px; font-size:14.5px; color:#DCEDE0; }
.furusato__note{ margin-top:12px; font-size:12.5px; color:#B8D2BE; }

/* ── イベントカレンダー（Googleカレンダー埋め込み） ── */
.calendar{ margin-top:26px; }
.calendar__frame{
  background:var(--white);
  border:3px solid var(--ink); border-radius:var(--round-l);
  box-shadow:var(--pop);
  overflow:hidden;
  height:460px;
}
.calendar__frame iframe{ width:100%; height:100%; display:block; border:0; }

/* スマホでは、カレンダーを読める幅（720px）で出して、横にスライドしてもらう。
   375pxを7列で割ると1マス53pxしかなく、予定の名前がまったく入らないため。
   縦のスクロールはページに任せて、横だけスライドさせる。 */
@media (max-width:719px){
  .calendar__frame{
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    height:520px;
  }
  .calendar__frame iframe{ width:720px; }
  .calendar__swipe{
    margin-top:10px; font-size:12px; font-weight:700; color:var(--ink-soft);
  }
}
.calendar__swipe{ display:none; }
@media (max-width:719px){ .calendar__swipe{ display:block; } }
.calendar__empty{
  height:100%; display:grid; place-items:center;
  color:var(--ink-soft); font-size:14px;
}
.calendar__note{ margin-top:16px; font-size:13px; font-weight:700; line-height:1.8; }
.calendar__note b{ background:var(--white); border-radius:6px; padding:1px 7px; }

/* ── 参加する ───────────────────────────────────── */
.join{ display:grid; gap:38px; }
.join__lede{ margin-top:18px; font-size:15.5px; color:#DCEDE0; }
.join__points{ margin-top:22px; display:flex; gap:10px; flex-wrap:wrap; }
.join__points li{
  font-family:var(--maru); font-weight:900; font-size:13.5px;
  background:var(--green); color:var(--cream);
  border:2px solid var(--yellow); border-radius:99px; padding:6px 15px;
}
.join .btn{ margin-top:30px; }
.join__note{ margin-top:14px; font-size:12.5px; color:#B8D2BE; }
.join__qr{ justify-self:center; text-align:center; }
.join__qr img{
  width:230px; height:230px; border-radius:var(--round);
  background:#fff; padding:12px;
  border:3px solid var(--ink); box-shadow:var(--pop);
}
.join__qr figcaption{ margin-top:14px; font-size:12.5px; font-weight:700; color:#DCEDE0; }

/* ── フッター ───────────────────────────────────── */
.footer{ background:var(--ink); color:#C3CFC4; padding:48px 0 60px; }
.footer__lead{ font-family:var(--maru); font-weight:900; font-size:22px; color:var(--yellow); }
.footer__body{ margin-top:12px; font-size:13px; line-height:1.9; }
.footer__meta{ margin-top:20px; font-size:12px; opacity:.7; }

/* ── 広い画面 ───────────────────────────────────── */
/* ── スマホ（720px未満）だけ、お店のカードをたたむ ──
   9軒を全部ひらいて縦に並べると3.8画面ぶんになり、スクロールが長すぎるため。
   店名・ジャンル・名物だけ出して、押すと残りが開きます。 */
@media (max-width:719px){
  /* 流れる帯：18pxだと375pxの画面に20文字ほどしか入らず、天気が読めない。
     文字とあきを詰めて、一度に見える量を増やす（2026-08-29） */
  .marquee{ padding:9px 0; --m-gap:18px; }
  .marquee__track span{ font-size:14.5px; }
  .marquee__track .m-weather{ padding:2px 14px; }

  .card{ padding:16px 18px; }
  .card__toggle{ position:relative; padding-right:30px; cursor:pointer; }
  .card__name{ font-size:17.5px; }
  /* たたんでいるときの名物は、黄色い箱をやめて軽い1行にする */
  .card__meibutsu{
    margin-top:7px; padding:0; background:none; border-radius:0;
    font-size:13.5px; font-weight:700; gap:7px; color:var(--ink);
  }
  .card__meibutsu::before{ font-size:9.5px; padding:1px 7px; }
  /* 開いたら、いつもの黄色い箱に戻す */
  .card.is-open .card__meibutsu{
    margin-top:12px; padding:10px 14px; background:var(--yellow-l);
    border-radius:var(--round); font-size:16px; font-weight:900;
  }
  .card.is-open .card__meibutsu::before{ font-size:10.5px; padding:2px 9px; }
  .card__arrow{
    display:block; position:absolute; right:2px; top:7px;
    width:11px; height:11px;
    border-right:3px solid var(--ink); border-bottom:3px solid var(--ink);
    transform:rotate(45deg); transform-origin:center;
    transition:transform .15s ease;
  }
  .card.is-open .card__arrow{ transform:rotate(-135deg); }
  /* 開け閉めの動き。
     display の切り替えはアニメーションできないので、
     「行の高さを 0fr → 1fr に伸ばす」やり方にしています。
     こうすると中身の高さを測らなくても、実際の高さまでなめらかに開きます。 */
  .card__more{
    display:grid; grid-template-rows:0fr;
    transition:grid-template-rows .34s cubic-bezier(.22,.85,.24,1);
  }
  /* padding を持たせると、閉じているときも その分だけ高さが残ってしまう。
     すき間は中の .card__body の margin にまかせる（はみ出しは下で切っている） */
  .card__more__in{ overflow:hidden; min-height:0; }
  .card.is-open .card__more{ grid-template-rows:1fr; }

  /* 中身は、箱が開きはじめてから少し遅れて、ふわっと出てくる（地図のときと同じ考え方） */
  .card__more__in > *{
    opacity:0; transform:translateY(-6px);
    transition:opacity .18s ease, transform .18s ease;
  }
  .card.is-open .card__more__in > *{
    opacity:1; transform:none; transition-delay:.13s;
  }
}

@media (min-width:720px){
  .section{ padding:104px 0; }
  .hero{ padding:76px 0 84px; }
  .nav__logo{ display:block; }
  .nav__link{ font-size:14.5px; padding:8px 18px; }
  .wordmark img{ width:min(100%, 470px); filter:drop-shadow(8px 8px 0 var(--white)); }
  .cards{ grid-template-columns:repeat(2, 1fr); }


  /* 地図と説明を横に並べる */
  .mapstage{ grid-template-columns:minmax(0,1.9fr) minmax(270px,1fr); gap:32px; align-items:start; }
  .mapstage__frame{ max-width:none; }

  .calendar__frame{ height:640px; }
  .potato__results{ grid-template-columns:repeat(2, 1fr); }
  .buys{ grid-template-columns:repeat(2, 1fr); gap:22px; }
  .join{ grid-template-columns:1.3fr .7fr; align-items:center; gap:56px; }
  .placecard{ padding:30px 34px; }
}
@media (min-width:1000px){
  .cards{ grid-template-columns:repeat(3, 1fr); }
  .recipes{ grid-template-columns:repeat(3, 1fr); }
  .potato__results{ grid-template-columns:repeat(3, 1fr); }
}