@charset "UTF-8";

/* ===============================================================
   Corporate Logo Bold ver3
   fonts/Corporate-Logo-Bold-ver3.otf に配置してください。
   （woff2 に変換したものを併記すると表示が速くなります）
   =============================================================== */
@font-face {
  font-family: "Corporate Logo Bold";
  src: local("Corporate Logo Bold ver3"),
       local("Corporate-Logo-Bold-ver3"),
       url("fonts/Corporate-Logo-Bold-ver3.woff2") format("woff2"),
       url("fonts/Corporate-Logo-Bold-ver3.otf") format("opentype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ===============================================================
   トークン
   =============================================================== */
:root{
  /* ベース：パステルのライトグリーンとライトピンク */
  --paper:      #FFFCF6;
  --green-50:   #F1F9E7;
  --green-100:  #DCF0C9;
  --green-200:  #C4E5AE;
  --green-300:  #A9D793;
  --green-600:  #43753C;
  --green-800:  #3D6B41;
  --pink-50:    #FFF3F7;
  --pink-100:   #FFDEE9;
  --pink-200:   #FFC7DA;
  --pink-400:   #F79FBE;
  --pink-600:   #B84E74;

  /* はなちゃんの毛色。データの点にも同じ色を使っています */
  --tan:        #E5A567;
  --tan-dark:   #B87C42;
  --cream:      #FFF6E9;

  --ink:        #4B423B;
  --ink-soft:   #6E6259;
  --line:       #EDE2D6;

  --display: "Corporate Logo Bold", "Hiragino Maru Gothic ProN",
             "ヒラギノ丸ゴ ProN", "Rounded Mplus 1c", "Zen Maru Gothic",
             "Yu Gothic", sans-serif;
  --body: "Hiragino Sans", "ヒラギノ角ゴシック", "Noto Sans JP",
          "Yu Gothic", "Meiryo", sans-serif;
  --mono: "SFMono-Regular", "Menlo", "Consolas", "Courier New", monospace;

  --r-s: 12px;
  --r-m: 20px;
  --r-l: 30px;
  --r-x: 44px;
  --shadow: 0 10px 0 -4px rgba(150,120,90,.06), 0 18px 40px -24px rgba(120,95,70,.45);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:88px; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.8;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
[hidden]{ display:none !important; } /* hidden を付けた要素は、どの指定より優先して隠す */

/* 見出し・短い文は文節で折り返す（1文字だけの改行を防ぐ） */
h1,h2,h3,h4,.follow-lead,.door-title{ word-break:auto-phrase; }

.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }

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

:focus-visible{
  outline:3px solid var(--pink-400);
  outline-offset:3px;
  border-radius:6px;
}

/* 本文へスキップ（キーボード操作時のみ表示） */
.skip-link{
  position:fixed;
  left:12px; top:-120px;
  z-index:100;
  background:#fff;
  color:var(--ink);
  font-family:var(--display);
  font-size:.95rem;
  text-decoration:none;
  padding:.6em 1.3em;
  border-radius:999px;
  border:2.5px solid var(--pink-200);
  box-shadow:0 6px 0 0 var(--pink-100);
  transition:top .18s ease;
}
.skip-link:focus{ top:12px; }

/* ===============================================================
   ボタン
   =============================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.4em;
  font-family:var(--display);
  font-size:1.02rem;
  letter-spacing:.06em;
  text-decoration:none;
  padding:.85em 1.9em;
  border-radius:999px;
  border:2.5px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn-primary{
  background:var(--pink-200);
  color:#8C3D5D;
  border-color:#FFF;
  box-shadow:0 6px 0 0 var(--pink-400);
}
.btn-primary:hover{ transform:translateY(2px); box-shadow:0 4px 0 0 var(--pink-400); }
.btn-primary:active{ transform:translateY(6px); box-shadow:0 0 0 0 var(--pink-400); }
.btn-ghost{
  background:var(--paper);
  color:var(--green-800);
  border-color:var(--green-200);
  box-shadow:0 6px 0 0 var(--green-100);
}
.btn-ghost:hover{ transform:translateY(2px); box-shadow:0 4px 0 0 var(--green-100); }
.btn-sm{ font-size:.9rem; padding:.7em 1.4em; }
.btn-block{ width:100%; }

/* ===============================================================
   ヘッダー
   =============================================================== */
.site-head{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  padding:12px clamp(16px,4vw,32px);
  background:rgba(255,252,246,.86);
  backdrop-filter:blur(10px);
  border-bottom:2px dotted var(--green-200);
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-paw{ width:26px; height:26px; fill:var(--pink-400); rotate:-12deg; }
.brand-name{ font-family:var(--display); font-size:1.1rem; letter-spacing:.04em; }

.site-nav{ display:flex; align-items:center; gap:clamp(8px,1.7vw,20px); }
.site-nav a{
  font-family:var(--display);
  font-size:.9rem;
  text-decoration:none;
  color:var(--ink);
  padding:.3em 0;
  border-bottom:3px solid transparent;
  transition:border-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.site-nav a:hover{ border-bottom-color:var(--pink-200); }
.nav-cta{
  background:var(--green-100);
  border-radius:999px;
  padding:.45em 1.2em !important;
  border-bottom:3px solid transparent;
}
.nav-cta:hover{ background:var(--green-200); border-bottom-color:transparent !important; }

/* PCでのみ見せる文字（ロゴの「豆柴」など） */
.only-pc{ display:inline; }

/* ハンバーガー（モバイルのみ表示） */
.nav-toggle{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.nav-burger{ display:none; }
.brand-name{ white-space:nowrap; }

/* ===============================================================
   ヒーロー
   =============================================================== */
.hero{
  position:relative;
  padding:clamp(28px,4.5vw,56px) 0 0;
  background:
    radial-gradient(120% 80% at 82% 12%, var(--pink-50) 0 42%, transparent 43%),
    linear-gradient(180deg, var(--paper) 0%, var(--green-50) 100%);
  overflow:hidden;
}
.hero::after{ /* 芝生 */
  content:"";
  position:absolute; inset:auto 0 0 0; height:84px;
  background:var(--green-100);
  border-radius:50% 50% 0 0 / 26px 26px 0 0;
}
/* PC：左にロゴとコピー、右にはなちゃん */
.hero-inner{
  position:relative; z-index:1;
  width:min(1060px, 100% - 40px); margin-inline:auto;
  display:grid; grid-template-columns:1.15fr .85fr; align-items:center;
  gap:clamp(20px,4vw,56px);
}
.hero-copy{ padding-bottom:clamp(64px,8vw,104px); }

.eyebrow{
  font-family:var(--mono);
  font-size:.76rem; letter-spacing:.14em;
  color:var(--green-600);
  margin:0 0 6px;
}
.eyebrow::before{ content:"／ "; }

.hero-title{
  margin:0 0 clamp(14px,2vw,22px);
  line-height:0; /* 画像の下に余分な行間ができないように */
}
.hero-title img{
  display:block;
  width:min(100%, 600px);
  height:auto;
  margin-left:-2%; /* ロゴ画像の左右の余白ぶん、文字の左端とそろえる */
  filter:drop-shadow(0 12px 22px rgba(150,110,80,.14));
}
.hero-lead{
  font-family:var(--display);
  font-size:clamp(1.1rem,2.2vw,1.45rem);
  color:var(--pink-600);
  line-height:1.6;
  margin:0 0 12px;
}
.hero-note{ margin:0 0 24px; font-size:.92rem; line-height:1.85; color:var(--ink-soft); word-break:auto-phrase; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.br-sp{ display:none; }

/* はなちゃん（写真） */
.hero-art{
  position:relative;
  align-self:end;
  padding:12px 8px 28px;
}
.hero-photo{
  margin:0 auto;
  width:min(100%, 380px);
  aspect-ratio:1/1;
  border-radius:56% 44% 52% 48% / 50% 54% 46% 50%;
  overflow:hidden;
  border:7px solid #fff;
  box-shadow:0 24px 50px -30px rgba(120,95,70,.6);
  rotate:-2deg;
  background:var(--pink-50);
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; }

.hero-paw{ position:absolute; fill:var(--pink-200); }
.hero-paw-1{ width:44px; height:44px; top:0; right:8%; rotate:22deg; }
.hero-paw-2{ width:30px; height:30px; bottom:64px; left:4%; rotate:-18deg; fill:var(--green-200); }

.hero-chips{
  display:flex; justify-content:center; gap:8px;
  margin:18px 0 0; flex-wrap:wrap;
}
.chip{
  font-family:var(--display);
  font-size:.82rem;
  background:#fff;
  border:2px solid var(--pink-100);
  border-radius:999px;
  padding:.35em 1em;
  box-shadow:0 4px 10px -6px rgba(120,95,70,.35);
}
.chip:first-child{ background:var(--pink-100); }

/* ===============================================================
   記録セクションのサマリー（4つの数字）
   =============================================================== */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  margin:0 0 clamp(20px,3vw,32px);
  padding:0;
}
.stat{
  margin:0;
  background:#fff;
  border:3px solid var(--green-100);
  border-radius:var(--r-m);
  padding:18px 16px;
  text-align:center;
}
.stat dt{
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.1em;
  color:var(--ink-soft);
  margin-bottom:6px;
}
.stat dd{
  margin:0;
  font-family:var(--display);
  line-height:1.1;
  color:var(--green-800);
}
.stat dd b{ font-size:1.9rem; font-weight:400; }
.stat dd span{ font-size:.8rem; color:var(--ink-soft); margin-left:.2em; }
.stat:nth-child(even) dd{ color:var(--pink-600); }
.stats-note{ margin:-12px 0 clamp(20px,3vw,28px); font-size:.76rem; color:var(--ink-soft); }

/* ===============================================================
   調査ループ（散歩道のスパイン）
   =============================================================== */
.journey{
  position:relative;
  width:min(1060px, 100% - 40px); margin:0 auto;
  padding-left:96px;
}
.journey::before{ /* リードの線 */
  content:"";
  position:absolute; top:14px; bottom:120px; left:35px;
  width:0; border-left:4px dashed var(--green-200);
}
.step{ position:relative; padding-bottom:clamp(36px,5vw,64px); }
.journey .step:last-child{ padding-bottom:0; }
.story-more{ display:none; }
.story-toggle-icon{ width:1em; height:1em; transform:rotate(180deg); transition:transform .2s ease; }
.story-toggle[aria-expanded="false"] .story-toggle-icon{ transform:none; }
.step-mark{
  position:absolute; left:-96px; top:2px;
  width:74px; height:74px;
  display:grid; place-items:center;
  background:var(--paper);
  border:4px solid var(--green-200);
  border-radius:50%;
}
.step-mark svg{ width:34px; height:34px; fill:var(--green-600); }
.step:nth-child(even) .step-mark{ border-color:var(--pink-200); }
.step:nth-child(even) .step-mark svg{ fill:var(--pink-400); rotate:14deg; }
.step:nth-child(odd) .step-mark svg{ rotate:-10deg; }

.step-label{
  font-family:var(--mono);
  font-size:.76rem; letter-spacing:.16em;
  color:var(--green-600);
  margin:0 0 10px;
}
.step:nth-child(even) .step-label{ color:var(--pink-600); }
.step-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.5rem,3.6vw,2.35rem);
  line-height:1.5;
  margin:0 0 18px;
}
.step-text{ margin:0 0 16px; max-width:62ch; }
.step-text strong{
  font-weight:400;
  background:linear-gradient(transparent 62%, var(--pink-100) 62%);
  padding:0 .1em;
}
.step-aside{
  margin-top:20px;
  font-size:.85rem;
  color:var(--ink-soft);
}
.step-cta{ margin:24px 0 0; }
.step-aside a{ color:var(--green-800); text-decoration-color:var(--green-300); text-underline-offset:3px; }

/* ストーリー各章の図（本文の右の余白に置く） */
.step-fig{
  float:right;
  width:clamp(260px, 34%, 400px);
  margin:6px 0 18px 32px;
}
.step-fig .zoomable{
  display:block;
  width:100%;
  margin:0; padding:0;
  border:0; background:none;
  cursor:zoom-in;
  position:relative;
}
.step-fig img{
  width:100%; height:auto;
  background:#fff;
  border:3px solid var(--green-100);
  border-radius:var(--r-m);
  padding:12px;
  transition:border-color .18s ease;
}
.step-fig .zoomable:hover img{ border-color:var(--green-200); }
.zoom-hint{
  position:absolute;
  right:14px; bottom:14px;
  font-family:var(--display);
  font-size:.66rem; letter-spacing:.04em;
  color:#fff;
  background:rgba(75,66,59,.72);
  border-radius:999px;
  padding:.3em .9em;
  pointer-events:none;
}
.step-fig figcaption{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--ink-soft);
  line-height:1.7;
  margin:8px 2px 0;
}
.step:has(.step-fig){ display:flow-root; }

/* ===============================================================
   記録セクション（公園ピッカーまわり）
   =============================================================== */
.records-aside{
  margin:22px 0 0;
  font-size:.85rem;
  color:var(--ink-soft);
}
.records-aside a{
  color:var(--green-800);
  text-decoration-color:var(--green-300);
  text-underline-offset:3px;
}

/* ===============================================================
   公園ピッカー（10公園リスト＋えらんだ公園の詳細）
   =============================================================== */
.park-picker{ margin-top:0; }
.picker-hint{ font-size:.85rem; color:var(--ink-soft); margin:0 0 16px; }

.picker-layout{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:20px;
  align-items:start;
}

.park-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px;
}
.park-item{ position:relative; }
.park-check{ position:absolute; opacity:0; width:1px; height:1px; }
.park-item label{
  display:grid;
  grid-template-columns:20px 1fr auto;
  align-items:center; gap:12px;
  background:#fff;
  border:2.5px solid var(--line);
  border-radius:var(--r-m);
  padding:10px 14px;
  height:100%;
  cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease;
}
.park-item label::before{
  content:"";
  width:20px; height:20px;
  border-radius:50%;
  border:2.5px solid var(--green-200);
  background:#fff;
  transition:background-color .18s ease, border-color .18s ease;
}
.park-check:checked + label::before{
  border-color:var(--green-600);
  background:radial-gradient(circle, var(--green-600) 0 4.5px, #fff 5px);
}
.park-check:focus-visible + label{ outline:3px solid var(--pink-400); outline-offset:2px; }
.park-check:checked + label{ border-color:var(--green-300); background:var(--green-50); }

.park-text{ display:flex; flex-direction:column; min-width:0; }
.park-name{ font-size:.94rem; line-height:1.45; }
.park-addr{ font-size:.72rem; line-height:1.4; color:var(--ink-soft); margin-top:1px; }
.park-flag{
  font-family:var(--mono);
  font-size:.64rem; letter-spacing:.04em;
  color:var(--ink-soft);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.25em .7em;
  white-space:nowrap;
}
.park-flag.is-skip{
  color:#9A8F86;
  background:#F4F0EB;
  border:1px dashed #DCD2C7;
}
.park-item.is-skip label{ background:#FAF7F3; border-style:dashed; border-color:#E6DDD3; }
.park-item.is-skip label::before{ border-color:#E2D9CF; }
.park-item.is-skip .park-name{ color:var(--ink-soft); }
.park-item.is-skip .park-addr{ color:#A39990; }
.park-flag.is-done{
  color:var(--green-800);
  background:var(--green-50);
  border-color:var(--green-200);
}

/* えらんだ公園の詳細（数字と「◯回目」ボタン） */
.park-detail{
  position:sticky; top:96px;
  background:#fff;
  border:3px solid var(--green-100);
  border-radius:var(--r-l);
  padding:clamp(18px,2.6vw,26px);
  box-shadow:var(--shadow);
}
.park-detail .park-flag{ display:inline-block; margin:0 0 8px; }
.detail-name{ font-family:var(--display); font-weight:400; font-size:1.45rem; line-height:1.4; margin:0; }
.detail-addr{ margin:2px 0 0; font-size:.82rem; color:var(--ink-soft); }
.detail-plan{ margin:16px 0 0; font-size:.9rem; color:var(--ink-soft); }
.detail-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0 0; }
.detail-stats > div{ background:var(--green-50); border-radius:var(--r-s); padding:10px 8px; text-align:center; }
.detail-stats dt{ font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:var(--ink-soft); }
.detail-stats dd{ margin:2px 0 0; font-family:var(--display); font-size:1.5rem; line-height:1.1; color:var(--green-800); }
.detail-stats dd small{ font-size:.72rem; color:var(--ink-soft); margin-left:.15em; }
.round-head{ margin:18px 0 8px; font-family:var(--display); font-size:.95rem; }
.rounds{ display:flex; flex-wrap:wrap; gap:8px; }
.round-btn{
  display:inline-flex; flex-direction:column; align-items:center; gap:1px;
  min-width:96px;
  padding:.55em 1em .5em;
  font-family:var(--display); line-height:1.3;
  color:var(--green-800);
  background:var(--paper);
  border:2.5px solid var(--green-200);
  border-radius:var(--r-s);
  box-shadow:0 4px 0 0 var(--green-100);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.round-btn b{ font-weight:400; font-size:1rem; }
.round-btn small{ font-family:var(--mono); font-size:.66rem; color:var(--ink-soft); letter-spacing:.02em; }
.round-btn:hover{ transform:translateY(2px); box-shadow:0 2px 0 0 var(--green-100); }
.round-btn[aria-pressed="true"]{
  background:var(--green-600); border-color:var(--green-600); color:#fff;
  box-shadow:0 4px 0 0 var(--green-800);
}
.round-btn[aria-pressed="true"] small{ color:#E8F3DD; }
.round-btn:disabled{
  cursor:not-allowed; opacity:.6;
  border-style:dashed; box-shadow:none; transform:none;
}
.round-btn:focus-visible{ outline:3px solid var(--pink-400); outline-offset:2px; }


/* ===============================================================
   PoisTongs 実データ埋め込み
   =============================================================== */
.embed-block{ margin-top:24px; }
.embed-head{ margin-bottom:14px; }
.embed-name{
  font-family:var(--display);
  font-size:1.22rem;
  margin:0 0 4px;
}
.embed-name::before{
  content:"";
  display:inline-block;
  width:10px; height:10px; margin-right:9px;
  border-radius:50%;
  background:var(--pink-400);
  vertical-align:middle;
}
.embed-sub{ font-size:.86rem; color:var(--ink-soft); margin:0; }

.embed-card{
  background:#fff;
  border:3px solid var(--green-100);
  border-radius:var(--r-l);
  padding:clamp(14px,2.4vw,22px);
  box-shadow:var(--shadow);
}
.embed-frame{
  height:clamp(520px, 78vh, 860px);
  border-radius:var(--r-m);
  overflow:hidden;
  background:var(--green-50);
}
.embed-frame iframe{ width:100%; height:100%; border:0; }
.embed-foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px; margin-top:16px;
}
.embed-foot p{ margin:0; font-size:.84rem; color:var(--ink-soft); }

.embed-prep{
  background:#fff;
  border:3px dashed var(--green-200);
  border-radius:var(--r-l);
  padding:clamp(32px,6vw,56px) 24px;
  text-align:center;
}
.embed-prep svg{
  width:44px; height:44px; margin:0 auto 14px;
  fill:var(--green-300); rotate:-8deg;
}
.embed-prep p{ margin:0; font-size:.9rem; color:var(--ink-soft); line-height:1.8; }
.embed-prep-name{
  font-family:var(--display);
  font-size:1.12rem !important;
  color:var(--ink) !important;
  margin-bottom:6px !important;
}

/* ===============================================================
   ACT
   =============================================================== */
.hypo-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(3,1fr);
  margin-top:28px;
}
.hypo{
  background:var(--pink-50);
  border-radius:var(--r-l);
  padding:24px 22px;
  border:3px solid transparent;
  transition:transform .18s ease, border-color .18s ease;
}
.hypo:hover{ transform:translateY(-4px); border-color:var(--pink-200); }
.hypo-tag{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--pink-600); margin:0 0 8px; }
.hypo-title{ font-family:var(--display); font-weight:400; font-size:1.12rem; line-height:1.55; margin:0 0 10px; }
.hypo-text{ font-size:.87rem; color:var(--ink-soft); margin:0 0 14px; }

/* GOAL */
.step-goal .step-body{
  background:var(--pink-50);
  border-radius:var(--r-x);
  padding:clamp(26px,4vw,44px);
}
/* 結び章はピンクのカード内に図を置くため、カードの右側をしっかり埋める大きさにする */
@media (min-width:861px){
  .step-goal .step-fig{ width:clamp(300px, 46%, 420px); margin-left:28px; }
}

/* ===============================================================
   5つの章（セクション共通）
   ページ全体をひとつの「おさんぽ」に見立て、各章のあたまに
   散歩道の肉球マーカーを置いて区切りを明確にする。
   =============================================================== */
.section{
  padding:clamp(44px,6vw,76px) 0;
  background:var(--paper);
}
.section-records{ background:var(--green-50); }
.section-insta{ background:var(--green-50); }
.section-support{ background:var(--pink-50); }

.section-head{
  width:min(640px, 100% - 40px);
  margin:0 auto clamp(24px,3.5vw,40px);
  text-align:center;
}
.section-mark{
  width:56px; height:56px;
  margin:0 auto 12px;
  display:grid; place-items:center;
  background:var(--paper);
  border:4px solid var(--green-200);
  border-radius:50%;
}
.section-mark svg{ width:30px; height:30px; fill:var(--green-600); rotate:-8deg; }
.section-records .section-mark,
.section-insta .section-mark{ border-color:var(--pink-200); }
.section-records .section-mark svg,
.section-insta .section-mark svg{ fill:var(--pink-400); rotate:8deg; }

.section-head .sec-label{ margin-bottom:6px; }
.section-head .sec-title{
  font-size:clamp(1.65rem,4vw,2.45rem);
  margin-bottom:8px;
}
.section-head .sec-lead{
  max-width:40ch;
  margin:0 auto;
  color:var(--ink-soft);
}
.section-head::after{
  content:"";
  display:block;
  width:56px; margin:16px auto 0;
  border-top:3px dotted var(--green-200);
}
.section-method .section-head .sec-label{ color:var(--green-600); }

/* PC ではミニメッセージを文の途中で折り返さない */
@media (min-width:861px){
  .section-head{ width:min(960px, 100% - 48px); }
  .section-head .sec-title{ max-width:24ch; margin-inline:auto; }
  .section-head .sec-lead{ max-width:none; white-space:nowrap; }
}

/* ===============================================================
   セクション見出し（共通）
   =============================================================== */
.sec-label{
  font-family:var(--mono);
  font-size:.76rem; letter-spacing:.18em;
  color:var(--pink-600);
  margin:0 0 10px;
}
.sec-title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,3.6vw,2.3rem);
  line-height:1.5; margin:0 0 14px;
}
.sec-lead{ margin:0 0 30px; max-width:60ch; color:var(--ink-soft); font-size:.95rem; }

/* ===============================================================
   Instagram
   =============================================================== */
.post-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:16px;
  grid-template-columns:repeat(3,1fr);
}
.post{
  background:#fff;
  border-radius:var(--r-m);
  overflow:hidden;
  border:3px solid #fff;
  transition:transform .18s ease, border-color .18s ease;
}
.post:hover{ transform:translateY(-4px); border-color:var(--pink-200); }
.post-img{
  aspect-ratio:1/1;
  display:grid; place-items:center;
  background:
    radial-gradient(circle at 30% 25%, var(--pink-50) 0 40%, transparent 41%),
    var(--green-100);
}
.post-img svg{ width:56px; height:56px; fill:#fff; opacity:.9; rotate:-8deg; }
.post:nth-child(3n+2) .post-img{
  background:
    radial-gradient(circle at 68% 28%, var(--green-50) 0 38%, transparent 39%),
    var(--pink-200);
}
.post:nth-child(3n) .post-img{
  background:
    radial-gradient(circle at 38% 70%, rgba(255,255,255,.5) 0 36%, transparent 37%),
    var(--green-200);
}
.post:nth-child(2n) .post-img svg{ rotate:12deg; }
.post-cap{ margin:0; padding:16px 18px; font-size:.88rem; line-height:1.7; }
.post-follow{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:28px 20px;
  background:var(--pink-50);
}
.follow-face{
  width:84px; height:84px;
  border-radius:50%;
  object-fit:cover;
  border:4px solid #fff;
  box-shadow:0 8px 18px -10px rgba(120,95,70,.5);
}
.follow-lead{ font-family:var(--display); font-size:1.1rem; line-height:1.6; margin:0; }

/* ===============================================================
   応援
   =============================================================== */
.support-inner{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,52px);
  align-items:center;
}
.support-about{
  margin:0 0 18px;
  color:var(--ink-soft);
  font-size:.95rem;
}
.support-notes{
  list-style:none; margin:0; padding:0;
  font-size:.8rem; color:var(--ink-soft);
}
.support-notes li{ padding-left:1.1em; text-indent:-1.1em; margin-bottom:6px; }
.support-notes li::before{ content:"※ "; }

.support-card{
  background:#fff;
  border:3px solid var(--pink-100);
  border-radius:var(--r-x);
  padding:clamp(22px,3vw,32px);
  box-shadow:0 18px 44px -30px rgba(120,95,70,.5);
}
.tier-head{ font-family:var(--display); font-size:1.05rem; margin:0 0 14px; }
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
.tier{
  position:relative;
  font-family:var(--display);
  font-size:clamp(1rem,2.6vw,1.18rem);
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  border:3px solid #fff;
  border-radius:var(--r-m);
  padding:16px 8px;
  cursor:pointer;
  text-align:center;
  color:var(--ink);
  transition:border-color .18s ease, transform .18s ease;
}
.tier:hover{ border-color:var(--pink-200); transform:translateY(-2px); }
.tier[aria-pressed="true"]{
  border-color:var(--pink-400);
  background:var(--pink-50);
  box-shadow:0 6px 0 -2px var(--pink-200);
}
.tier[aria-pressed="true"]::after{
  content:"✓";
  position:absolute; top:6px; right:8px;
  font-size:.72rem; color:var(--pink-600);
}

.support-photo{
  margin:24px 0 0;
  width:220px;
}
.support-photo img{
  display:block;
  width:220px; height:220px; object-fit:cover;
  border-radius:48% 52% 55% 45% / 52% 48% 52% 48%;
  border:6px solid #fff;
  box-shadow:0 18px 40px -26px rgba(120,95,70,.55);
  rotate:-2deg;
}
.support-photo figcaption{
  font-size:.78rem; color:var(--ink-soft);
  margin-top:14px;
}

/* ===============================================================
   THANK YOU（応援セクション下段。同じセクション内の区切りブロック）
   =============================================================== */
.support-thanks{
  margin-top:clamp(28px,4vw,48px);
  padding-top:clamp(24px,3vw,36px);
  border-top:2px dotted var(--pink-200);
}
.support-thanks .sec-title{ font-size:clamp(1.3rem,3vw,1.8rem); }
.name-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.name-list li{
  background:#fff;
  border:1px solid var(--pink-100);
  border-radius:999px;
  padding:.5em 1.3em;
  font-size:.88rem;
}

/* ===============================================================
   調査のこと（ここだけトーンを落として資料の顔にする）
   =============================================================== */
.method-intro{
  max-width:64ch;
  margin:0 0 clamp(18px,2.5vw,26px);
  color:var(--ink-soft);
  font-size:.95rem;
}
.method-list{ border-top:1px solid var(--line); }
.mt{ border-bottom:1px solid var(--line); }
.mt summary{
  cursor:pointer;
  list-style:none;
  padding:20px 44px 20px 0;
  position:relative;
  font-family:var(--display);
  font-size:1.05rem;
}
.mt summary::-webkit-details-marker{ display:none; }
.mt summary::after{
  content:"";
  position:absolute; right:12px; top:50%;
  width:11px; height:11px;
  border-right:3px solid var(--green-600);
  border-bottom:3px solid var(--green-600);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .2s ease;
}
.mt[open] summary::after{ transform:translateY(-20%) rotate(225deg); }
.mt-body{
  padding:0 0 24px;
  font-size:.9rem;
  color:var(--ink-soft);
  max-width:74ch;
}
.mt-body p{ margin:0 0 12px; }
.mt-body ul{ margin:0 0 12px; padding-left:1.3em; }
.mt-body li{ margin-bottom:6px; }
.mt-body a{
  color:var(--green-800);
  text-decoration:underline;
  text-decoration-color:var(--green-300);
  text-underline-offset:3px;
  word-break:break-all;
}
.mt-note{
  font-family:var(--mono);
  font-size:.78rem;
  background:var(--green-50);
  border-radius:var(--r-s);
  padding:12px 16px;
  margin:0;
}
.mt-source{
  font-size:.76rem;
  color:var(--ink-soft);
  line-height:1.7;
  margin:14px 0 0;
}
.method-cta{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  margin-top:24px;
}
.method-cta p{ margin:0; font-size:.9rem; }

/* ===============================================================
   フッター
   =============================================================== */
.site-foot{ background:var(--green-100); padding:clamp(40px,6vw,64px) 0 24px; }
.foot-inner{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px;
}
.foot-brand{ display:flex; align-items:flex-start; gap:14px; }
.foot-paw{ width:38px; height:38px; fill:#fff; rotate:-12deg; flex:none; }
.foot-msg{ font-family:var(--display); font-size:1.2rem; line-height:1.7; margin:0; }
.foot-nav{ display:grid; grid-template-columns:1fr 1fr; gap:8px 32px; }
.foot-nav a{ text-decoration:none; font-size:.88rem; border-bottom:2px solid transparent; }
.foot-nav a:hover{ border-bottom-color:#fff; }
.copyright{
  font-family:var(--mono); font-size:.72rem; color:var(--green-800);
  text-align:center; margin:48px 0 0;
}

/* ===============================================================
   最上部にもどる（常駐ボタン）
   =============================================================== */
.to-top{
  position:fixed;
  right:clamp(14px,3vw,28px);
  bottom:clamp(14px,3vw,28px);
  z-index:60;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px;
  width:56px; height:56px;
  text-decoration:none;
  color:#8C3D5D;
  background:var(--pink-200);
  border:2.5px solid #fff;
  border-radius:50%;
  box-shadow:0 6px 0 0 var(--pink-400), 0 14px 26px -14px rgba(120,95,70,.55);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, box-shadow .18s ease;
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ transform:translateY(2px); box-shadow:0 4px 0 0 var(--pink-400), 0 10px 20px -14px rgba(120,95,70,.55); }
.to-top:active{ transform:translateY(6px); box-shadow:0 0 0 0 var(--pink-400); }
.to-top svg{
  width:20px; height:20px;
  fill:none; stroke:currentColor;
  stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
}
.to-top-label{
  font-family:var(--display);
  font-size:.6rem; letter-spacing:.06em;
  line-height:1;
}

@media (max-width:640px){
  .to-top{ width:48px; height:48px; }
  .to-top-label{ display:none; }
  .to-top svg{ width:22px; height:22px; }
}

@media (prefers-reduced-motion:reduce){
  .to-top{ transition:opacity .12s ease, visibility .12s; transform:none; }
  .to-top.is-visible{ transform:none; }
}

/* ===============================================================
   画像の拡大表示（ライトボックス）
   =============================================================== */
.lightbox[hidden]{ display:none; }
.lightbox{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,48px);
  background:rgba(45,38,32,.82);
  backdrop-filter:blur(3px);
}
.lightbox img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  border-radius:var(--r-s);
  background:#fff;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6);
}
.lightbox-close{
  position:absolute; top:clamp(10px,2vw,20px); right:clamp(10px,2vw,20px);
  width:44px; height:44px;
  display:grid; place-items:center;
  font-size:1.6rem; line-height:1;
  color:var(--ink);
  background:#fff;
  border:2.5px solid var(--pink-200);
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 6px 0 0 var(--pink-100);
}
.lightbox-close:hover{ transform:translateY(2px); box-shadow:0 4px 0 0 var(--pink-100); }

/* ===============================================================
   ACT（あなたにできること）
   =============================================================== */
.act-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.door{
  display:flex; flex-direction:column; gap:10px;
  background:#fff;
  border:3px solid var(--pink-100);
  border-radius:var(--r-l);
  padding:clamp(22px,3vw,30px);
  box-shadow:var(--shadow);
}
.door.is-biz{ border-color:var(--green-200); }
.door-who{ margin:0; font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; color:var(--pink-600); }
.door.is-biz .door-who{ color:var(--green-600); }
.door-title{ margin:0; font-family:var(--display); font-weight:400; font-size:1.25rem; line-height:1.5; }
.door-text{ margin:0 0 6px; font-size:.9rem; color:var(--ink-soft); flex:1; }
.btn-green{
  background:var(--green-600);
  color:#fff;
  border-color:#fff;
  box-shadow:0 6px 0 0 #2F5A33;
}
.btn-green:hover{ transform:translateY(2px); box-shadow:0 4px 0 0 #2F5A33; }
.btn-green:active{ transform:translateY(6px); box-shadow:0 0 0 0 #2F5A33; }

/* ===============================================================
   レスポンシブ
   =============================================================== */
@media (max-width:1024px){
  /* ロゴの「豆柴」は幅がきびしくなったら隠す */
  .only-pc{ display:none; }
}

@media (max-width:900px){
  .hypo-grid, .post-grid{ grid-template-columns:1fr 1fr; }
  .hypo-grid > :last-child{ grid-column:1 / -1; }
  .post-follow{ grid-column:1 / -1; }
  .picker-layout{ grid-template-columns:1fr; }
  .park-detail{ position:static; scroll-margin-top:96px; }
  .act-grid{ grid-template-columns:1fr; }
  .support-inner{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .support-photo{ width:180px; }
  .support-photo img{ width:180px; height:180px; }
}

/* スマホ：ロゴ → はなちゃん → コピー → ボタン の順で、1画面に収める */
@media (max-width:760px){
  .hero{ padding-top:18px; }
  .hero-inner{ grid-template-columns:1fr; gap:0; justify-items:center; text-align:center; }
  .hero-copy{ display:contents; }
  .eyebrow{ order:1; font-size:.7rem; letter-spacing:.08em; margin-bottom:4px; }
  .hero-title{ order:2; margin-bottom:6px; }
  .hero-title img{ width:min(100%, 440px); margin:0 auto; }
  .hero-art{ order:3; padding:4px 0 6px; align-self:auto; }
  .hero-photo{ width:min(52vw, 230px); border-width:5px; }
  .hero-paw-1{ width:34px; height:34px; top:2px; right:-6px; }
  .hero-paw-2{ width:24px; height:24px; bottom:12px; left:-4px; }
  .hero-chips{ display:none; } /* 本文に「2026年生まれの豆柴」とあるので、スマホでは省略 */
  .hero-lead{ order:4; margin:10px 0 8px; }
  .hero-note{ order:5; font-size:.86rem; line-height:1.75; margin-bottom:18px; }
  .hero-actions{ order:6; justify-content:center; padding-bottom:68px; }
}

@media (max-width:860px){
  /* ストーリー各章の図：本文の下に回す */
  .step-fig{ float:none; width:100%; max-width:420px; margin:0 0 20px; }

  /* ハンバーガーメニュー */
  .site-head{ flex-wrap:wrap; gap:12px; }
  .brand-name{ font-size:1rem; }
  .nav-burger{
    display:block; width:44px; height:44px; flex:none;
    border:2px solid var(--green-200); border-radius:12px;
    background:#fff; cursor:pointer; position:relative;
  }
  .nav-burger span,
  .nav-burger span::before,
  .nav-burger span::after{
    content:""; position:absolute; left:50%; width:20px; height:2.5px;
    background:var(--ink); border-radius:2px;
    transform:translateX(-50%);
    transition:transform .2s ease, opacity .2s ease;
  }
  .nav-burger span{ top:calc(50% - 1px); }
  .nav-burger span::before{ top:-7px; }
  .nav-burger span::after{ top:7px; }
  .nav-toggle:checked ~ .nav-burger span{ background:transparent; }
  .nav-toggle:checked ~ .nav-burger span::before{ top:0; transform:translateX(-50%) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span::after{ top:0; transform:translateX(-50%) rotate(-45deg); }
  .nav-toggle:focus-visible ~ .nav-burger{ outline:3px solid var(--pink-400); outline-offset:3px; }

  .site-nav{
    display:none;
    flex-basis:100%;
    flex-direction:column; align-items:stretch; gap:2px;
    padding-top:4px;
  }
  .nav-toggle:checked ~ .site-nav{ display:flex; }
  .site-nav a{
    font-size:1rem;
    padding:14px 6px;
    border-bottom:1px dotted var(--line) !important;
  }
  .site-nav a:hover{ border-bottom-color:var(--line) !important; }
  .nav-cta{
    text-align:center; margin-top:8px;
    border-radius:999px !important;
    border-bottom:2px solid transparent !important;
  }
}

@media (max-width:640px){
  body{ font-size:15px; line-height:1.75; }
  .br-sp{ display:inline; }

  .journey{ padding-left:56px; }
  .journey::before{ left:20px; border-left-width:3px; }
  /* ストーリーの折りたたみ（JSが動くときだけ） */
  .js .story-more{ display:flex; justify-content:center; margin-top:clamp(28px,8vw,40px); }
  .section-story.is-collapsed .journey{ display:none; }
  .section-story.is-collapsed .story-more{ margin-top:0; }
  .step-mark{ left:-56px; width:44px; height:44px; border-width:3px; }
  .step-mark svg{ width:20px; height:20px; }
  .hypo-grid{ grid-template-columns:1fr; gap:12px; margin-top:20px; }
  .hypo-grid > :last-child{ grid-column:auto; }
  .hypo{ padding:18px 18px 4px; }
  .post-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .post-cap{ padding:10px 12px; font-size:.8rem; line-height:1.6; }
  .post-img svg{ width:40px; height:40px; }
  .post-follow{ padding:16px 12px; gap:10px; }
  .follow-face{ width:64px; height:64px; }
  .follow-lead{ font-size:.92rem; }
  .follow-lead br{ display:none; }
  .post-follow .btn{ white-space:nowrap; padding:.6em 1.1em; font-size:.8rem; }
  .foot-nav{ grid-template-columns:1fr 1fr; gap:6px 16px; }
  .park-list{ grid-template-columns:1fr; }
  .park-item label{ grid-template-columns:18px 1fr auto; padding:10px 14px; }
  .park-flag{ font-size:.6rem; padding:.25em .6em; }
  .stats{ gap:8px; }
  .stat{ padding:14px 8px; }
  .stat dd b{ font-size:1.5rem; }
  .section-mark{ width:54px; height:54px; margin-bottom:16px; }
  .section-mark svg{ width:26px; height:26px; }
  .embed-frame{ height:min(76vh, 640px); min-height:440px; }
  .embed-foot{ flex-direction:column; align-items:flex-start; }
}

/* ===============================================================
   モーション設定への配慮
   =============================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}