/* ============================================================
   ふじえだ児童クラブ かのん — style.css
   色・文字はチラシ元データから実測（docs/DESIGN.md 2章）
   ============================================================ */
:root {
  --purple-deep: #664A70;
  --purple: #BFB6CB;
  --purple-light: #E4DEEA;
  --salmon: #F6BCA2;
  --salmon-deep: #E2715A;
  --sage: #DAD9C6;
  --sage-mid: #BEC0B5;
  --green: #6F8E5E;
  --cream: #F6E7D8;
  --paper: #FBF3EC;
  --pink: #E0457B;
  --yellow: #F8DF85;
  --ink: #4A3B4F;
  --ink-soft: #7A6A7E;

  --font-head: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;

  --radius: 24px;
  --container: 1080px;
  --gutter: 20px;
  --header-h: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, dl, dd { margin: 0; }
.sp { display: inline; }
.pc { display: none; }
@media (min-width: 768px) { .sp { display: none; } .pc { display: inline; } }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { position: relative; padding: 72px 0; }
@media (min-width: 768px) { .section { padding: 110px 0; } }
.section__lead { text-align: center; margin-bottom: 28px; }
.note { font-size: 13px; color: var(--ink-soft); line-height: 1.7; }

/* ---------- 見出し ---------- */
.h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(26px, 6vw, 40px);
  line-height: 1.3;
  color: var(--purple-deep);
  text-align: center;
  margin-bottom: 32px;
  letter-spacing: .02em;
}
.h2__big { font-size: 1.35em; color: var(--salmon-deep); }
.h2__mark { font-size: 1.15em; }
.h2::after {
  content: "";
  display: block;
  width: 120px; height: 6px; margin: 14px auto 0;
  background: radial-gradient(circle, var(--salmon-deep) 2.5px, transparent 3px) 0 0 / 12px 6px repeat-x;
}

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-head); font-weight: 800; font-size: 17px;
  transition: transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn--tel { background: var(--purple-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--purple-deep); border: 3px solid var(--purple-deep); }
.btn--fb { background: #3b5998; color: #fff; }
.btn--ig { background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7); color: #fff; }
.sns-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }
.btn--sm { padding: 10px 16px; font-size: 14px; }
.ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

/* ---------- ヘッダー ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 var(--gutter);
  transition: background .3s, box-shadow .3s, height .3s;
}
.site-header.is-scrolled {
  background: rgba(251, 243, 236, .92);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 0 rgba(102, 74, 112, .08);
  height: 56px;
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand__logo { width: 44px; height: 44px; border-radius: 50%; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; font-family: var(--font-head); color: var(--purple-deep); }
.brand__text small { font-size: 11px; font-weight: 700; }
.brand__text strong { font-size: 20px; font-weight: 900; }
.site-nav { display: none; gap: 22px; font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--purple-deep); }
.site-nav a { position: relative; padding: 4px 0; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 3px; background: var(--salmon-deep); transform: scaleX(0); transition: transform .25s; }
.site-nav a:hover::after { transform: scaleX(1); }
@media (min-width: 900px) { .site-nav { display: flex; } }
.header__tel { display: none; }
@media (min-width: 768px) { .header__tel { display: inline-flex; } }

/* ---------- ヒーロー ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + 24px);
  overflow: hidden;
  background: var(--cream);
  display: flex; flex-direction: column;
}
.hero__sky {
  position: absolute; inset: 0 0 205px 0;
  background: var(--purple);
  z-index: 0;
}
@media (min-width: 768px) { .hero__sky { bottom: 275px; } }
.hero__sky::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 70px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1440 0 L1440 30 C1200 70 1000 0 720 35 C440 70 240 10 0 40 Z' fill='%23BFB6CB'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.hero__inner { position: relative; z-index: 2; text-align: center; padding: 8px var(--gutter) 0; }
.hero__badge {
  display: inline-block;
  background: var(--yellow); color: var(--purple-deep);
  font-family: var(--font-head); font-weight: 900; font-size: 15px;
  padding: 6px 18px; border-radius: 999px;
  margin-bottom: 14px;
  animation: badge-pop .6s cubic-bezier(.34,1.56,.64,1) both;
}
.hero__title { color: var(--purple-deep); font-family: var(--font-head); }
.hero__sub {
  display: block; font-size: clamp(16px, 4vw, 24px); font-weight: 800; letter-spacing: .12em;
  animation: fade-up .6s .2s both;
}
.hero__logo {
  display: block;
  font-size: clamp(76px, 21vw, 168px);
  font-weight: 900; line-height: 1.05; letter-spacing: -.02em;
  -webkit-text-stroke: 0;
  text-shadow: 0 6px 0 rgba(255,255,255,.5);
}
.hero__logo .bounce {
  display: inline-block;
  animation: kanon-drop .9s cubic-bezier(.34,1.56,.64,1) calc(.35s + var(--i) * .13s) both;
}
.hero__copy {
  margin-top: 10px;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(17px, 4.4vw, 26px); line-height: 1.6;
  color: var(--purple-deep);
  display: inline-block;
  background: linear-gradient(transparent 55%, rgba(255,255,255,.7) 55%);
  padding: 0 8px;
}
.hero__lead { margin-top: 8px; font-size: clamp(14px, 3.6vw, 17px); color: var(--ink); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }

/* 飾り（音符・星） */
.deco {
  position: absolute; left: var(--x); top: var(--y);
  color: #fff; font-size: 34px; line-height: 1;
  animation: float 4s ease-in-out var(--d) infinite;
  z-index: 1;
}
.deco--star { width: 22px; height: 22px; background: #fff; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* 歩く道: 背景レイヤーが流れる */
.road {
  position: relative; z-index: 1;
  margin-top: auto;
  height: 250px;
}
@media (min-width: 768px) { .road { height: 320px; } }
.road > div { position: absolute; left: 0; right: 0; background-repeat: repeat-x; }
.road__clouds {
  top: -40px; height: 90px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='90' viewBox='0 0 600 90'%3E%3Cg fill='%23fff' opacity='.85'%3E%3Ccircle cx='80' cy='50' r='22'/%3E%3Ccircle cx='110' cy='40' r='30'/%3E%3Ccircle cx='145' cy='52' r='20'/%3E%3Crect x='60' y='50' width='105' height='24' rx='12'/%3E%3Ccircle cx='400' cy='40' r='16'/%3E%3Ccircle cx='425' cy='30' r='24'/%3E%3Ccircle cx='455' cy='42' r='15'/%3E%3Crect x='385' y='40' width='85' height='18' rx='9'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 600px 90px;
  animation: scroll-x 40s linear infinite;
}
.road__hills {
  bottom: 96px; height: 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='120' viewBox='0 0 800 120'%3E%3Cpath d='M0 120 L0 80 C120 20 260 20 400 80 C520 20 680 30 800 80 L800 120 Z' fill='%23DAD9C6'/%3E%3C/svg%3E");
  background-size: 800px 120px;
  animation: scroll-x 30s linear infinite;
}
.road__town {
  bottom: 96px; height: 130px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='130' viewBox='0 0 900 130'%3E%3Cg%3E%3Crect x='40' y='60' width='90' height='70' rx='8' fill='%23FBF3EC'/%3E%3Cpath d='M30 66 L85 22 L140 66 Z' fill='%23F6BCA2'/%3E%3Crect x='72' y='92' width='26' height='38' rx='4' fill='%23BFB6CB'/%3E%3Ccircle cx='220' cy='70' r='34' fill='%23BEC0B5'/%3E%3Crect x='214' y='95' width='12' height='35' fill='%238a7360'/%3E%3Crect x='300' y='40' width='120' height='90' rx='10' fill='%23FBF3EC'/%3E%3Crect x='300' y='40' width='120' height='18' rx='9' fill='%23BFB6CB'/%3E%3Crect x='320' y='70' width='22' height='22' rx='4' fill='%23F8DF85'/%3E%3Crect x='378' y='70' width='22' height='22' rx='4' fill='%23F8DF85'/%3E%3Crect x='345' y='96' width='30' height='34' rx='4' fill='%23664A70'/%3E%3Ccircle cx='500' cy='64' r='30' fill='%23BEC0B5'/%3E%3Ccircle cx='530' cy='80' r='24' fill='%23DAD9C6'/%3E%3Crect x='495' y='90' width='11' height='40' fill='%238a7360'/%3E%3Crect x='620' y='56' width='100' height='74' rx='8' fill='%23FBF3EC'/%3E%3Cpath d='M610 62 L670 16 L730 62 Z' fill='%23BFB6CB'/%3E%3Crect x='640' y='84' width='20' height='20' rx='4' fill='%23F8DF85'/%3E%3Crect x='680' y='94' width='24' height='36' rx='4' fill='%23F6BCA2'/%3E%3Ccircle cx='810' cy='72' r='32' fill='%23BEC0B5'/%3E%3Crect x='804' y='96' width='12' height='34' fill='%238a7360'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 900px 130px;
  animation: scroll-x 22s linear infinite;
}
.road__ground {
  bottom: 0; height: 100px;
  background-color: #E8D2B8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='100' viewBox='0 0 120 100'%3E%3Crect x='10' y='46' width='60' height='8' rx='4' fill='%23FBF3EC'/%3E%3C/svg%3E");
  background-size: 120px 100px;
  animation: scroll-x 3s linear infinite;
}
.road__kids {
  position: absolute; left: 0; right: 0; bottom: 20px;
  display: flex; align-items: flex-end; justify-content: center; gap: 4px;
}
.road__kids .kid-wrap { width: clamp(96px, 26vw, 150px); }

/* ---------- 子ども（SVG） ---------- */
.kid { display: block; }
.kid svg { width: 100%; height: auto; display: block; overflow: visible; }
.kid svg > g, .kid svg > path { transform-box: view-box; }

/* 支点: 肩(72,142)(128,142) 腰(86,218)(114,218) 首(100,130) */
.k-arm-l { transform-origin: 72px 142px; }
.k-arm-r { transform-origin: 128px 142px; }
.k-leg-l { transform-origin: 86px 218px; }
.k-leg-r { transform-origin: 114px 218px; }
.k-head  { transform-origin: 100px 130px; }

.pose-walk, .pose-wave { animation: kid-bob .8s ease-in-out calc(var(--k, 0) * -.27s) infinite; }
.pose-walk .k-leg-l, .pose-wave .k-leg-l { animation: leg-step .8s ease-in-out calc(var(--k, 0) * -.27s) infinite; }
.pose-walk .k-leg-r, .pose-wave .k-leg-r { animation: leg-step .8s ease-in-out calc(var(--k, 0) * -.27s - .4s) infinite; }
.pose-walk .k-arm-l, .pose-wave .k-arm-l { animation: arm-swing .8s ease-in-out calc(var(--k, 0) * -.27s - .4s) infinite; }
.pose-walk .k-arm-r { animation: arm-swing .8s ease-in-out calc(var(--k, 0) * -.27s) infinite; }
.pose-walk .k-head, .pose-wave .k-head { animation: head-tilt 1.6s ease-in-out calc(var(--k, 0) * -.27s) infinite; }
.pose-wave .k-arm-r { animation: arm-wave 1.2s ease-in-out infinite; }

/* ボブちゃんは本を抱えるので腕は内側に固定 */
.kid-bob .k-arm-l { transform: rotate(-55deg); animation: none !important; }
.kid-bob .k-arm-r { transform: rotate(55deg); animation: none !important; }
.kid-bob .k-book  { transform-origin: 100px 180px; }
.pose-walk.kid-bob .k-book { animation: book-bob .8s ease-in-out calc(var(--k, 0) * -.27s) infinite; }

.pose-idle * { animation: none !important; }

@keyframes kid-bob { 0%,100% { transform: translateY(0); } 25% { transform: translateY(-4%) rotate(-1.5deg); } 50% { transform: translateY(0); } 75% { transform: translateY(-4%) rotate(1.5deg); } }
@keyframes leg-step { 0%,100% { transform: rotate(-6deg) translateY(0); } 30% { transform: rotate(0) translateY(-14px); } 50% { transform: rotate(6deg) translateY(0); } 75% { transform: rotate(0) translateY(0); } }
@keyframes arm-swing { 0%,100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
@keyframes arm-wave { 0%,100% { transform: rotate(-150deg); } 50% { transform: rotate(-175deg); } }
@keyframes head-tilt { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes book-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---------- 波の区切り ---------- */
.wave { position: absolute; left: 0; right: 0; line-height: 0; pointer-events: none; }
.wave svg { width: 100%; height: 48px; display: block; }
@media (min-width: 768px) { .wave svg { height: 90px; } }
.wave--bottom { bottom: -1px; z-index: 3; }
.wave--top { top: -1px; z-index: 3; }

/* ---------- 2. どんな場所 ---------- */
.section--about { background: var(--cream); padding-top: 56px; }
.bubble {
  position: relative;
  background: var(--paper); border-radius: 32px;
  padding: 28px 22px; text-align: center;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(16px, 4vw, 21px); line-height: 1.9;
  color: var(--purple-deep);
}
.bubble p + p { margin-top: 18px; padding-top: 18px; background: radial-gradient(circle, var(--salmon-deep) 2px, transparent 2.5px) center top / 12px 5px repeat-x; }
.bubble em { font-style: normal; color: var(--salmon-deep); }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -16px; width: 34px; height: 34px; background: var(--paper); border-radius: 6px; transform: translateX(-50%) rotate(45deg); }
.about__greeting { margin-top: 36px; max-width: 720px; margin-inline: auto; font-size: 15px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; }
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--paper); border-radius: 999px; padding: 8px 18px 8px 8px;
  font-family: var(--font-head); font-weight: 800; color: var(--purple-deep);
}
.pill b { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 14px; }
.pill--salmon b { background: var(--salmon-deep); }
.pill--purple b { background: var(--purple-deep); }
.pill--sage b { background: var(--green); }

/* ---------- 3. 3つの特長 ---------- */
.section--features { background: var(--purple-light); }
.features { display: grid; gap: 22px; }
@media (min-width: 900px) { .features { grid-template-columns: repeat(3, 1fr); } }
.feature {
  position: relative;
  background: var(--paper); border-radius: var(--radius);
  padding: 30px 24px 24px;
  overflow: hidden;
}
.feature__num {
  position: absolute; top: 18px; left: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-family: var(--font-head); font-weight: 900; font-size: 22px;
}
.feature--1 .feature__num { background: var(--salmon-deep); }
.feature--2 .feature__num { background: var(--purple-deep); }
.feature--3 .feature__num { background: var(--green); }
.feature h3 { padding-left: 56px; font-family: var(--font-head); font-weight: 900; font-size: 24px; line-height: 1.25; min-height: 48px; display: flex; flex-direction: column; justify-content: center; }
.feature h3 small { font-size: 14px; font-weight: 800; letter-spacing: .04em; }
.feature--1 h3 { color: var(--salmon-deep); }
.feature--2 h3 { color: var(--purple-deep); }
.feature--3 h3 { color: var(--green); }
.feature > p { margin-top: 16px; font-size: 15px; }
.dots { margin-top: 12px; }
.dots li { position: relative; padding-left: 18px; font-size: 15px; }
.dots li::before { content: ""; position: absolute; left: 0; top: .85em; width: 8px; height: 8px; border-radius: 50%; background: var(--purple-deep); }
.dots--big li { font-size: 16px; font-weight: 700; }
.dots--pin li { padding-left: 24px; }
.dots--pin li::before {
  width: 14px; height: 14px; top: .65em;
  background: var(--salmon-deep);
  clip-path: path("M7 0C3 0 0 3 0 7c0 5 7 11 7 11s7-6 7-11c0-4-3-7-7-7z");
  border-radius: 0; opacity: 0; transform: translateY(-16px);
}
.is-visible .dots--pin li::before { animation: pin-drop .5s cubic-bezier(.34,1.2,.64,1) calc(.2s + var(--pd, 0s)) both; }
@keyframes pin-drop { from { opacity: 0; transform: translateY(-16px); } 60% { opacity: 1; } to { opacity: 1; transform: translateY(0); } }
.feature__art { height: 110px; margin-top: 18px; display: flex; align-items: center; justify-content: center; }
.feature__art svg { width: 88px; height: 88px; overflow: visible; }

/* 時計: 見えたら針が回る */
.art-clock-hands { transform-box: fill-box; transform-origin: center; }
.is-visible .art-clock-min  { animation: clock-min 2.4s ease-in-out .3s 1; }
.is-visible .art-clock-hour { animation: clock-hour 2.4s ease-in-out .3s 1; }
.art-clock-min, .art-clock-hour { transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes clock-min  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes clock-hour { from { transform: rotate(0deg); } to { transform: rotate(110deg); } }

/* えんぴつ: 見えたら線を書く→少し揺れる */
.art-pencil-line { stroke-dashoffset: 80; }
.is-visible .art-pencil-line { animation: pencil-draw 1s ease-out .2s both; }
.art-pencil-body { transform-box: fill-box; transform-origin: 20% 80%; }
.is-visible .art-pencil-body { animation: pencil-wiggle 1s ease-in-out 1.1s 1; }
@keyframes pencil-draw { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
@keyframes pencil-wiggle { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-6deg); } 60% { transform: rotate(4deg); } }

/* パレット: 見えたら丸が順にぽんぽん出る */
.art-dot { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.is-visible .art-dot { animation: dot-pop .5s cubic-bezier(.34,1.56,.64,1) calc(.2s + var(--pd, 0s)) both; }
@keyframes dot-pop { from { transform: scale(0); } 70% { transform: scale(1.25); } to { transform: scale(1); } }

/* ---------- 4. かのんの1日 ---------- */
.section--day { background: var(--cream); }
.tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
.tab {
  font: 800 15px/1 var(--font-head); color: var(--purple-deep);
  background: var(--paper); border: 3px solid transparent;
  padding: 12px 18px; border-radius: 999px; cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.tab.is-active { background: var(--purple-deep); color: #fff; }
.tab:not(.is-active):hover { border-color: var(--purple); }
.section--day .note { text-align: center; margin-bottom: 28px; }

.timeline {
  display: grid;
  margin-top: 84px;
  grid-template-columns: 72px 1fr;
  column-gap: 6px;
  row-gap: 18px;
}
.timeline__road { grid-column: 1; grid-row: 1 / 6; position: relative; }
.timeline__path-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.timeline__walker {
  position: absolute; left: 0; top: 0;
  width: 60px; margin-left: -30px; margin-top: -78px;
  transition: none;
  will-change: transform;
}
.timeline__stops { display: contents; }
.stop {
  grid-column: 2;
  background: var(--paper); border-radius: 20px;
  padding: 18px 18px 18px 70px; position: relative;
}
.stop:nth-child(1) { grid-row: 1; } .stop:nth-child(2) { grid-row: 2; } .stop:nth-child(3) { grid-row: 3; }
.stop:nth-child(4) { grid-row: 4; } .stop:nth-child(5) { grid-row: 5; }
.stop::before {
  content: ""; position: absolute; left: 14px; top: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--purple-light) center / 60% no-repeat;
}
.stop[data-icon="school"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23664A70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V10l9-6 9 6v11'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3Cpath d='M3 21h18'/%3E%3C/svg%3E"); }
.stop[data-icon="desk"]::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23664A70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V6a2 2 0 0 1 2-2h5v15H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M20 19V6a2 2 0 0 0-2-2h-5v15h5a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.stop[data-icon="snack"]::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23664A70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E"); }
.stop[data-icon="play"]::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23664A70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E"); }
.stop[data-icon="home"]::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23664A70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v11h14V10'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E"); }
.stop__time { display: inline-block; font: 800 13px/1 var(--font-head); color: #fff; background: var(--salmon-deep); border-radius: 999px; padding: 5px 12px; }
.stop h3 { margin-top: 8px; font: 900 19px/1.35 var(--font-head); color: var(--purple-deep); }
.stop p { margin-top: 6px; font-size: 14px; }
@media (min-width: 768px) {
  .timeline { grid-template-columns: 1fr 140px 1fr; column-gap: 24px; row-gap: 40px; margin-top: 120px; }
  .timeline__road { grid-column: 2; }
  .timeline__walker { width: 84px; margin-left: -42px; margin-top: -110px; }
  .stop { padding: 24px 24px 24px 84px; }
  .stop::before { width: 52px; height: 52px; left: 18px; top: 24px; }
  .stop:nth-child(odd) { grid-column: 1; }
  .stop:nth-child(even) { grid-column: 3; }
  .stop h3 { font-size: 22px; }
  .stop p { font-size: 15px; }
}

/* ---------- 5. こんなご家庭に ---------- */
.section--recommend { background: var(--salmon); }
.checks { display: grid; gap: 12px; max-width: 720px; margin: 0 auto; }
.check {
  background: var(--paper); border-radius: 999px;
  padding: 16px 22px 16px 66px; position: relative;
  font: 800 clamp(16px, 4.2vw, 20px)/1.4 var(--font-head); color: var(--ink);
}
.check::before {
  content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; background: var(--purple);
}
.check::after {
  content: ""; position: absolute; left: 26px; top: 50%;
  width: 12px; height: 20px; border: solid #fff; border-width: 0 4px 4px 0;
  transform: translateY(-62%) rotate(45deg) scale(0);
  transform-origin: center;
}
.check.is-visible::after { animation: tick-pop .4s cubic-bezier(.34,1.56,.64,1) calc(.3s + var(--delay, 0s)) both; }
@keyframes tick-pop { from { transform: translateY(-62%) rotate(45deg) scale(0); } to { transform: translateY(-62%) rotate(45deg) scale(1); } }
.recommend__cta {
  margin: 30px auto 0; max-width: 720px;
  background: var(--purple-deep); color: #fff; border-radius: 999px;
  padding: 14px 20px; text-align: center;
  font: 900 clamp(16px, 4vw, 20px)/1.5 var(--font-head);
}

/* ---------- 6. 開所日時・料金 ---------- */
.section--info { background: var(--cream); }
.info-grid { display: grid; gap: 22px; }
@media (min-width: 900px) { .info-grid { grid-template-columns: 1fr 1fr 1.2fr; align-items: start; } }
.card { background: var(--paper); border-radius: var(--radius); padding: 0 22px 24px; overflow: hidden; }
.card__title {
  margin: 0 -22px 18px; padding: 12px;
  background: var(--purple); color: var(--purple-deep);
  font: 900 20px/1.3 var(--font-head); text-align: center;
}
.cloud {
  margin: 18px auto 0; padding: 12px 18px; max-width: 240px;
  background: #FFF4E3; border: 2px dashed var(--salmon-deep); border-radius: 30px;
  color: var(--salmon-deep); font: 800 15px/1.5 var(--font-head); text-align: center;
}
.price div { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 2px dotted var(--salmon); }
.price dt { font: 800 17px/1 var(--font-head); color: var(--purple-deep); }
.price dd { font: 900 20px/1 var(--font-head); color: var(--purple-deep); }
.price dd b { font-size: 30px; }
.price__strike dd s {
  position: relative; color: var(--ink-soft); font-size: 18px; text-decoration: none;
}
.price__strike dd s::after {
  content: ""; position: absolute; left: 0; top: 50%; height: 2px; width: 0;
  background: var(--pink);
}
.is-visible .price__strike--1 dd s::after { animation: strike-draw .35s ease-out .3s both; }
.is-visible .price__strike--2 dd s::after { animation: strike-draw .35s ease-out .5s both; }
@keyframes strike-draw { from { width: 0; } to { width: 100%; } }
.offer__zero { transform: scale(0); }
.is-visible .offer__zero { animation: zero-pop .5s cubic-bezier(.34,1.56,.64,1) .8s both; }
@keyframes zero-pop { from { transform: scale(0); } 70% { transform: scale(1.15); } to { transform: scale(1); } }
.offer {
  position: relative; margin-top: 30px; padding: 30px 16px 18px;
  background: #FCE9EF; border-radius: 28px; text-align: center;
  font: 800 18px/1.5 var(--font-head); color: var(--purple-deep);
}
.offer__ribbon {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  background: var(--pink); color: #fff; padding: 6px 18px; border-radius: 999px;
  font: 900 15px/1 var(--font-head); white-space: nowrap;
}
.offer__zero { display: block; color: var(--pink); font-size: 72px; line-height: 1; margin-top: 4px; }
.offer__zero small { font-size: 26px; }
.card--price .note { margin-top: 16px; }

/* ---------- 7. 見学・お問い合わせ ---------- */
.section--contact { background: var(--purple-light); text-align: center; }
.tel-big {
  display: inline-flex; align-items: center; gap: 12px;
  font: 900 clamp(28px, 7.6vw, 64px)/1 var(--font-head); color: var(--purple-deep);
  letter-spacing: .01em; white-space: nowrap;
  padding: 10px 18px; border-radius: 999px;
  background: var(--paper);
  animation: breathe 2.4s ease-in-out infinite;
}
.tel-big .ico { color: var(--salmon-deep); }
.contact__meta { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: center; margin-top: 20px; font-weight: 700; }
.tag { display: inline-block; color: #fff; border-radius: 999px; padding: 3px 12px; margin-right: 8px; font: 800 13px/1.6 var(--font-head); }
.tag--salmon { background: var(--salmon-deep); }
.section--contact .note { margin-top: 12px; }

/* ---------- 8. アクセス ---------- */
.section--access { background: var(--cream); }
.access { display: grid; gap: 24px; }
@media (min-width: 900px) { .access { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.access__map { border-radius: var(--radius); overflow: hidden; background: var(--paper); aspect-ratio: 4 / 3; }
.access__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.access__name { font-family: var(--font-head); color: var(--purple-deep); line-height: 1.2; }
.access__name small { display: block; font-weight: 800; font-size: 15px; }
.access__name strong { font-size: 36px; font-weight: 900; }
.access__addr { margin-top: 14px; font-weight: 700; font-size: 17px; }
.access__addr span { font-size: 14px; color: var(--ink-soft); font-weight: 500; }
.access__info .note { margin-top: 14px; }

/* ---------- フッター ---------- */
.site-footer { position: relative; background: var(--purple); padding: 40px 0 110px; text-align: center; overflow: hidden; }
.footer__kids {
  display: flex; justify-content: center; align-items: flex-end; gap: 4px;
  animation: walk-away 14s ease-in-out infinite;
}
.footer__kids .kid-wrap { width: 84px; }
.footer__bye { margin-top: 6px; font: 900 22px/1 var(--font-head); color: var(--purple-deep); }
.footer__inner { margin-top: 28px; padding: 0 var(--gutter); }
.footer__logo { margin: 0 auto; border-radius: 50%; }
.footer__addr { margin-top: 14px; color: var(--purple-deep); font-weight: 700; font-size: 14px; }
.footer__copy { margin-top: 16px; font-size: 12px; color: var(--purple-deep); }
@media (min-width: 768px) { .site-footer { padding-bottom: 40px; } .footer__kids .kid-wrap { width: 110px; } }

/* ---------- スマホ固定バー ---------- */
.fixed-tel {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--salmon-deep); color: #fff;
  border-radius: 999px; padding: 14px;
  font: 900 17px/1 var(--font-head);
  box-shadow: 0 8px 24px rgba(102, 74, 112, .25);
  transform: translateY(120%); transition: transform .35s cubic-bezier(.34,1.3,.64,1);
}
.fixed-tel small { font-size: 12px; font-weight: 700; opacity: .9; }
.fixed-tel.is-shown { transform: translateY(0); }
@media (min-width: 768px) { .fixed-tel { display: none; } }

/* ---------- 登場 ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease var(--delay, 0s), transform .7s cubic-bezier(.2,.8,.2,1) var(--delay, 0s); }
.reveal.is-visible { opacity: 1; transform: none; }
.hero .reveal { animation: fade-up .7s var(--delay, 0s) both; opacity: 1; transform: none; transition: none; }

/* ---------- キーフレーム ---------- */
@keyframes scroll-x { to { background-position-x: -100vw; } }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(6deg); } }
@keyframes kanon-drop { 0% { transform: translateY(-120px) scale(.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes badge-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
/* 左から歩いてきて、真ん中でひと休みして、右へ帰っていく */
@keyframes walk-away {
  0% { transform: translateX(-110vw); }
  22%, 62% { transform: translateX(0); }
  84%, 100% { transform: translateX(110vw); }
}

/* 背景の流れは幅に依存しないよう、レイヤーごとに距離を固定 */
.road__clouds { animation-name: scroll-clouds; } @keyframes scroll-clouds { to { background-position-x: -600px; } }
.road__hills  { animation-name: scroll-hills; }  @keyframes scroll-hills  { to { background-position-x: -800px; } }
.road__town   { animation-name: scroll-town; }   @keyframes scroll-town   { to { background-position-x: -900px; } }
.road__ground { animation-name: scroll-ground; } @keyframes scroll-ground { to { background-position-x: -120px; } }

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .fixed-tel { transform: none; }
  .timeline__walker { display: none; }
}