/* =====================================================================
   ぽかぽか保育園  site.css（v4）
   レイアウトの考え方: 前のサイトの「空・太陽・りんごの木・緑・オレンジ」を、役割の決まった色と絵の部品にする。
   クリームの地に、一日の流れは空色の帯（雲と草花）、見学は太陽の黄色の帯、フッターはオレンジ。
   写真の形は 2 つだけ（主役＝アーチ／ほか＝角丸 24px）。見出しの印はクレヨンの太陽＋緑の小見出しの 1 種類。
   ===================================================================== */
:root {
	--cream: #fff9ea;      /* 地の色 */
	--white: #ffffff;      /* カード */
	--sky: #8fd1ee;        /* 空色（前のサイトの背景） */
	--sky-soft: #e3f4fc;
	--leaf: #2b9a55;       /* 緑（小見出し・印。前のサイトの見出しの帯） */
	--leaf-soft: #e4f3e8;
	--sun: #f7b52b;        /* 太陽の黄色（見学の帯・主なボタン） */
	--sun-soft: #ffedbf;
	--apple: #e2483a;      /* りんごの赤（緊急・電話のしるし） */
	--orange: #f2a33a;     /* フッター（前のサイトのオレンジ） */
	--wood: #a06a2c;       /* 木の茶色（細い線） */
	--ink: #3a322b;        /* 文字 */
	--ink-2: #6a5e53;      /* 小さな補足だけ */
	--line: #eadfc8;

	--font-head: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Zen Kaku Gothic New", sans-serif;
	--font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
	--font-hand: "Klee One", "Zen Maru Gothic", sans-serif;
	--ls-body: .03em;
	--ls-head: .06em;
	--ls-label: .12em;

	--wrap: 1160px;
	--gutter: max(20px, env(safe-area-inset-left, 0px));
	--gutter-r: max(20px, env(safe-area-inset-right, 0px));
	--band: clamp(64px, 8vw, 104px);
	--arch: 999px 999px 24px 24px;
	--r: 24px;
	--shadow: 0 16px 36px -22px rgba(90, 60, 20, .4);
	--dock-h: 0px;
	color-scheme: light;
}

/* ---------------------------------------------------------------- 土台 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
	margin: 0; background: var(--cream); color: var(--ink);
	font-family: var(--font-body); font-size: 16px; line-height: 1.85; letter-spacing: var(--ls-body);
	font-feature-settings: "palt" 1; -webkit-font-smoothing: antialiased;
	padding-bottom: var(--dock-h);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-weight: 700; line-height: 1.45; letter-spacing: var(--ls-head); text-wrap: balance; word-break: auto-phrase; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
:focus-visible { outline: 3px solid var(--leaf); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--white); padding: 8px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }
.nw { white-space: nowrap; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.band { padding-block: var(--band); position: relative; }
.band--white { background: var(--white); }
.note { font-size: 11px; letter-spacing: var(--ls-label); color: var(--ink-2); }

/* ---------------------------------------------------------------- ボタン・リンク */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 56px; padding: 0 28px; border-radius: 999px;
	font-family: var(--font-head); font-weight: 700; font-size: 16px; letter-spacing: var(--ls-head); text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn svg { flex-shrink: 0; }
.btn--sun { background: var(--sun); color: var(--ink); box-shadow: 0 5px 0 #d9951a; }
.btn--sun:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #d9951a; }
.btn--sun:active { transform: translateY(3px); box-shadow: 0 2px 0 #d9951a; }
.btn--line { background: var(--white); border: 2px solid var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--white); }
.btn__sub { display: block; font-family: var(--font-body); font-weight: 500; font-size: 11.5px; letter-spacing: var(--ls-body); line-height: 1.2; }
.btn__stack { display: grid; text-align: left; line-height: 1.25; }

.link {
	display: inline-flex; align-items: center; gap: .3em;
	font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: var(--ls-head); text-decoration: none; color: var(--leaf);
	padding-bottom: 2px; background: linear-gradient(var(--leaf), var(--leaf)) 0 100% / 100% 2px no-repeat; transition: background-size .25s ease;
}
.link:hover { background-size: 100% 5px; }

/* ---------------------------------------------------------------- 見出し（印は 1 種類：クレヨンの太陽＋緑の小見出し） */
.shead { display: grid; gap: 12px; margin-bottom: clamp(32px, 4vw, 52px); max-width: 760px; }
.shead--center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.shead__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 14px; font-weight: 700; letter-spacing: var(--ls-label); color: var(--leaf); }
.shead__sun { width: 30px; height: auto; margin: -6px 0; }
.shead__title { font-size: clamp(25px, 3.3vw, 38px); }
.shead__lead { font-size: 16px; }

/* ---------------------------------------------------------------- ヘッダー（前のサイトのクリーム色） */
.masthead { position: sticky; top: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transition: box-shadow .3s ease; }
.masthead::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: color-mix(in srgb, #fff6d8 94%, transparent);
	-webkit-backdrop-filter: saturate(1.3) blur(10px); backdrop-filter: saturate(1.3) blur(10px);
	border-bottom: 3px solid var(--sun);
}
.nav-open .masthead::before { background: #fff6d8; }
.masthead.is-scrolled { box-shadow: 0 10px 30px -22px rgba(90, 60, 20, .55); }
.masthead__in { max-width: 1280px; margin: 0 auto; height: 80px; padding-left: var(--gutter); padding-right: var(--gutter-r); display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand__mark { width: 66px; height: auto; margin-top: -4px; }
.brand__text { display: grid; line-height: 1.2; }
.brand__sub { font-size: 11px; letter-spacing: var(--ls-label); color: var(--ink-2); font-weight: 500; }
.brand__name { font-family: var(--font-head); font-weight: 700; font-size: 22px; letter-spacing: var(--ls-head); }
.nav { margin-left: auto; }
.nav__list { display: flex; gap: 2px; }
.nav__list a { display: flex; align-items: center; gap: 6px; padding: 10px 13px; border-radius: 999px; font-family: var(--font-head); font-size: 15px; font-weight: 700; letter-spacing: var(--ls-head); text-decoration: none; transition: background-color .2s ease; }
.nav__list a::before { content: ""; width: 14px; height: 14px; background: url(/images/deco/icon_apple.png?v=22231e75) center / contain no-repeat; }
.nav__list a:hover { background: var(--sun-soft); }
.nav__list a[aria-current="page"] { background: var(--sun-soft); }
.nav__contact { display: none; }
.masthead__tel { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; background: var(--leaf); color: var(--white); padding: 8px 20px 8px 16px; border-radius: 999px; }
.masthead__tel:hover { background: #237f46; }
.masthead__tel-text { display: grid; line-height: 1.2; }
.masthead__tel-label { font-size: 10.5px; letter-spacing: var(--ls-label); }
.masthead__tel-num { font-family: var(--font-head); font-size: 18px; font-weight: 700; letter-spacing: var(--ls-head); font-variant-numeric: tabular-nums; }
.masthead__toggle { display: none; }

/* ---------------------------------------------------------------- ヒーロー */
.hero { position: relative; overflow: hidden; padding-block: clamp(24px, 4vw, 56px) clamp(48px, 6vw, 80px); }
.hero__clouds { position: absolute; left: 50%; top: 18px; width: min(900px, 90vw); transform: translateX(-60%); opacity: .9; pointer-events: none; }
.hero__in { position: relative; max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.hero__copy { display: grid; gap: 24px; justify-items: start; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: 14px; letter-spacing: var(--ls-label); color: var(--leaf); background: var(--leaf-soft); padding: 4px 14px; border-radius: 999px; }
.hero__title { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.4; display: grid; }
.hero__line { display: block; animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * .12s + .05s); }
.hero__title .hl { background: linear-gradient(transparent 62%, var(--sun-soft) 62% 92%, transparent 92%); }
.hero__lead { font-size: 16.5px; max-width: 28em; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: grid; gap: 0; min-width: 104px; padding: 10px 16px; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 2px var(--line); line-height: 1.3; }
.chip__label { font-size: 11.5px; font-weight: 700; letter-spacing: var(--ls-label); color: var(--leaf); }
.chip__value { font-family: var(--font-head); font-weight: 700; font-size: 18px; letter-spacing: var(--ls-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__photo { position: relative; justify-self: end; width: min(100%, 480px); }
.hero__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--arch); box-shadow: var(--shadow); animation: develop 1.2s ease both; }
.hero__tree { position: absolute; right: -22%; bottom: -8%; width: 44%; z-index: 2; pointer-events: none; animation: rise 1s .4s cubic-bezier(.2, .7, .2, 1) both; }
.hero__sunbird { position: absolute; left: -16%; top: 4%; width: 38%; z-index: 2; pointer-events: none; animation: float 7s ease-in-out infinite; }
.hero__photo .note { position: absolute; left: 8px; bottom: -22px; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes develop { from { opacity: 0; filter: saturate(.5) brightness(1.1); } }
@keyframes float { 50% { transform: translateY(-8px) rotate(-2deg); } }

/* ---------------------------------------------------------------- ぽかぽか保育園のこと（数字の札） */
.facts__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fact { position: relative; display: grid; gap: 4px; align-content: start; justify-items: center; text-align: center; padding: 26px 18px 24px; background: var(--white); border-radius: var(--r); box-shadow: var(--shadow); }
.fact__icon { width: 56px; height: 56px; object-fit: contain; margin-bottom: 4px; }
.fact__label { font-size: 13px; font-weight: 700; letter-spacing: var(--ls-label); color: var(--leaf); }
.fact__value { font-family: var(--font-head); font-weight: 700; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fact__sub { font-size: 13px; line-height: 1.65; color: var(--ink-2); word-break: auto-phrase; }

/* ---------------------------------------------------------------- 大切にしていること */
.values__lead { margin-top: -24px; margin-bottom: 40px; }
.values__list { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.value { display: grid; gap: 20px; align-content: start; background: var(--white); border-radius: var(--r); padding: 16px 16px 28px; box-shadow: var(--shadow); }
.value__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; }
.value__body { display: grid; gap: 12px; justify-items: start; padding: 0 12px; }
.value__title { font-size: clamp(20px, 2vw, 24px); }
.value__text { font-size: 16px; }

/* ---------------------------------------------------------------- 写真つきの紹介 */
.features__grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.feature { display: grid; gap: 12px; align-content: start; justify-items: start; }
.feature__photo { width: 100%; overflow: hidden; border-radius: var(--r); }
.feature__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.feature:hover .feature__photo img { transform: scale(1.04); }
.feature__title { font-size: 20px; margin-top: 6px; }
.feature__text { font-size: 15.5px; }

/* ---------------------------------------------------------------- 一日の流れ（空色の帯） */
.sky { background: linear-gradient(180deg, var(--sky) 0%, #b9e3f6 55%, var(--sky-soft) 100%); position: relative; overflow: hidden; padding-bottom: calc(var(--band) + 40px); }
.sky__clouds { position: absolute; top: 28px; right: -4%; width: min(620px, 70vw); opacity: .95; pointer-events: none; }
.sky__grass { position: absolute; left: 0; right: 0; bottom: -2px; height: 56px; background: url(/images/deco/grass-png.webp?v=1d984a59) left bottom / auto 100% repeat-x; pointer-events: none; }
.sky .shead__eyebrow { color: #0f5f86; }
.day__shots { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; margin-bottom: 36px; }
.day__shot { position: relative; display: grid; gap: 8px; }
.day__shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; border: 5px solid var(--white); box-shadow: var(--shadow); }
.day__shot-time { position: absolute; top: 12px; left: 12px; background: var(--white); border-radius: 999px; padding: 0 12px; font-family: var(--font-hand); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.day__shot-label { font-family: var(--font-head); font-weight: 700; font-size: 15px; padding-left: 4px; }
.day__lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.day__tabs { display: none; }
.lane { background: var(--white); border-radius: var(--r); padding: 22px 26px 18px; box-shadow: var(--shadow); }
.lane__name { display: flex; align-items: center; gap: 10px; font-size: 19px; margin-bottom: 8px; }
.lane__name img { width: 40px; height: auto; }
.lane__list { position: relative; display: grid; }
.lane__list::before { content: ""; position: absolute; left: 76px; top: 18px; bottom: 18px; border-left: 2px dotted var(--sky); }
.lane__row { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 28px; align-items: center; min-height: 52px; border-bottom: 1px dashed var(--line); }
.lane__row:last-child { border-bottom: 0; }
.lane__row::after { content: ""; position: absolute; left: 71px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 3px var(--white); }
.lane__time { font-family: var(--font-hand); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lane__text { font-size: 16px; font-weight: 500; }
.day__more { margin-top: 28px; text-align: right; }
.day__more .link { color: #0f5f86; background-image: linear-gradient(#0f5f86, #0f5f86); }

/* ---------------------------------------------------------------- 季節の行事 */
.seasons__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.season { display: grid; align-content: start; background: var(--white); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.season__photo { position: relative; }
.season__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.season__kanji { position: absolute; left: 14px; bottom: -22px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--white); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .3); font-family: var(--font-hand); font-weight: 600; font-size: 24px; }
.season__body { padding: 30px 18px 22px; display: grid; gap: 8px; }
.season__months { font-size: 12.5px; font-weight: 700; letter-spacing: var(--ls-label); color: var(--ink-2); }
.season__events { display: grid; gap: 6px; font-size: 14.5px; line-height: 1.65; }
.season__events li { display: grid; grid-template-columns: 2.8em 1fr; }
.season__month { font-family: var(--font-hand); font-weight: 600; font-variant-numeric: tabular-nums; }
.season--spring .season__kanji, .month--spring .month__num { color: #d0577c; }
.season--summer .season__kanji, .month--summer .month__num { color: #1f86b8; }
.season--autumn .season__kanji, .month--autumn .month__num { color: #c4621f; }
.season--winter .season__kanji, .month--winter .month__num { color: #4d6a9c; }
.seasons__more { margin-top: 32px; text-align: right; }

/* ---------------------------------------------------------------- 年間行事予定 */
.calendar__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.month { display: grid; align-content: start; background: var(--white); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.month__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.month__body { display: grid; gap: 6px; padding: 14px 16px 18px; }
.month__num { font-family: var(--font-hand); font-weight: 600; font-size: 32px; line-height: 1; display: flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; }
.month__num small { font-size: 15px; }
.month__events { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.month__ev { white-space: nowrap; font-size: 14px; padding: 1px 10px; border-radius: 999px; background: var(--cream); }
.calendar__note { margin-top: 22px; display: grid; gap: 4px; font-size: 14px; }
.calendar__note p::before { content: "・"; color: var(--leaf); }

/* ---------------------------------------------------------------- 写真ギャラリー */
.gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 14px; }
.gallery__item { position: relative; border-radius: var(--r); overflow: hidden; }
.gallery__item img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.gallery__item--wide { grid-column: span 2; }
.gallery__item--wide img { aspect-ratio: auto; }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__cap { position: absolute; left: 12px; bottom: 12px; background: var(--white); border-radius: 999px; padding: 2px 14px; font-family: var(--font-head); font-weight: 700; font-size: 14px; }

/* ---------------------------------------------------------------- 見学のご案内（太陽の黄色の帯） */
.visit { position: relative; overflow: hidden; background: var(--sun); }
.visit::before { content: ""; position: absolute; left: -10vw; bottom: -36vw; width: 56vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .26) 0 46%, rgba(255, 255, 255, .12) 47% 64%, transparent 65%); pointer-events: none; }
.visit__in { position: relative; max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); padding-block: var(--band); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.visit__copy { display: grid; gap: 20px; justify-items: start; }
.visit__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: 14px; letter-spacing: var(--ls-label); background: var(--white); padding: 4px 14px; border-radius: 999px; }
.visit__eyebrow img { width: 26px; margin: -6px 0; }
.visit__title { font-size: clamp(26px, 3.4vw, 40px); }
.visit__text { display: grid; gap: 2px; font-size: 16px; font-weight: 500; }
.visit__call { display: grid; gap: 4px; justify-items: start; padding: 20px 26px; background: var(--white); border-radius: var(--r); box-shadow: 0 18px 36px -26px rgba(90, 60, 20, .8); }
.visit__call-label { font-size: 13px; font-weight: 700; letter-spacing: var(--ls-label); color: var(--leaf); }
.visit__tel { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-head); font-weight: 700; font-size: clamp(30px, 3.6vw, 42px); line-height: 1.2; letter-spacing: var(--ls-body); font-variant-numeric: tabular-nums; }
.visit__tel svg { color: var(--apple); }
.visit__hours { font-size: 13.5px; color: var(--ink-2); }
.visit__illust img { width: 100%; max-width: 420px; margin: 0 auto; border-radius: 50%; aspect-ratio: 1; object-fit: cover; border: 8px solid var(--white); box-shadow: var(--shadow); }
.visit .link { color: var(--ink); background-image: linear-gradient(var(--ink), var(--ink)); }

/* ---------------------------------------------------------------- 交通アクセス */
.access__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.access__info { display: grid; gap: 24px; justify-items: start; }
.access__info .shead { margin-bottom: 0; }
.access__big { display: flex; align-items: center; gap: 16px; padding: 14px 22px; background: var(--white); border-radius: var(--r); box-shadow: var(--shadow); }
.access__big img { width: 52px; height: auto; }
.access__big-sub { display: block; font-size: 13px; font-weight: 700; color: var(--leaf); letter-spacing: var(--ls-label); }
.access__big-val { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(36px, 4.4vw, 52px); line-height: 1.1; }
.access__list { display: grid; width: 100%; margin: 0; }
.access__list div { display: grid; grid-template-columns: 4.5em 1fr; gap: 14px; padding: 14px 0; border-top: 1px dashed var(--line); }
.access__list div:last-child { border-bottom: 1px dashed var(--line); }
.access__list dt { font-size: 13px; font-weight: 700; letter-spacing: var(--ls-label); color: var(--leaf); padding-top: 2px; }
.access__list dd { margin: 0; font-size: 15.5px; }
.access__map { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); background: var(--sky-soft); aspect-ratio: 5 / 4; }
.access__map-fallback { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; }
.access__map-fallback img { width: 90px; }
.access__map iframe { position: relative; width: 100%; height: 100%; border: 0; display: block; }

/* ---------------------------------------------------------------- 下層ページの見出し */
.phead { position: relative; overflow: hidden; padding-block: clamp(28px, 5vw, 64px) clamp(36px, 5vw, 72px); background: linear-gradient(180deg, #fff6d8, var(--cream)); }
.phead__tree { position: absolute; right: -60px; top: -40px; width: 240px; opacity: .95; pointer-events: none; }
.phead--photo .phead__tree { display: none; }
.phead__in { position: relative; max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.phead--photo .phead__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.phead__copy { display: grid; gap: 18px; justify-items: start; }
.crumbs { font-size: 13px; display: flex; gap: 10px; color: var(--ink-2); }
.crumbs a { text-decoration: none; color: var(--leaf); font-weight: 700; }
.phead__title { font-size: clamp(30px, 4.2vw, 48px); }
.phead__lead { font-size: 16px; max-width: 30em; }
.phead__toc { display: flex; flex-wrap: wrap; gap: 8px; }
.phead__toc a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 2px var(--line); text-decoration: none; font-family: var(--font-head); font-weight: 700; font-size: 14px; white-space: nowrap; }
.phead__toc a::after { content: "↓"; color: var(--leaf); font-size: 12px; }
.phead__toc a:hover { box-shadow: inset 0 0 0 2px var(--leaf); }
.phead__photo { position: relative; justify-self: end; width: min(100%, 420px); }
.phead__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--arch); box-shadow: var(--shadow); }
.phead__photo .phead__tree2 { position: absolute; right: -18%; bottom: -6%; width: 40%; pointer-events: none; }
.phead__photo .note { position: absolute; left: 8px; bottom: -22px; }

/* ---------------------------------------------------------------- 文書の列（下層ページ本文） */
.doc { padding-block: clamp(48px, 7vw, 88px); }
.doc__in { max-width: 820px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); display: grid; gap: clamp(40px, 6vw, 72px); }
.doc-block .shead, .doc-section .shead { margin-bottom: 22px; }
.doc-section + * { margin-top: calc(-1 * clamp(20px, 3vw, 44px)); }

.kv { margin: 0; background: var(--white); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.kv__row { display: grid; grid-template-columns: 9em 1fr; }
.kv__row + .kv__row { border-top: 1px dashed var(--line); }
.kv__row dt { padding: 18px 20px; font-weight: 700; letter-spacing: var(--ls-head); background: var(--leaf-soft); color: #1f6d3c; }
.kv__row dd { margin: 0; padding: 18px 22px; display: grid; gap: 2px; }
.kv__line { display: block; }

.points { display: grid; gap: 12px; counter-reset: pt; }
.points__item { counter-increment: pt; display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; padding: 20px 22px; background: var(--white); border-radius: var(--r); box-shadow: var(--shadow); }
.points__item::before { content: counter(pt); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--leaf); color: var(--white); font-family: var(--font-head); font-weight: 700; font-size: 19px; }
.points__item p { padding-top: 6px; }

.flow__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: fl; }
.flow__item { counter-increment: fl; position: relative; display: grid; gap: 8px; align-content: start; padding: 22px 20px 22px; background: var(--white); border-radius: var(--r); box-shadow: var(--shadow); }
.flow__item::before { content: "STEP " counter(fl); font-family: var(--font-head); font-weight: 700; font-size: 12.5px; letter-spacing: var(--ls-label); color: var(--white); background: var(--leaf); justify-self: start; padding: 2px 12px; border-radius: 999px; }
.flow__item:not(:last-child)::after { content: ""; position: absolute; right: -14px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-top: 3px solid var(--sun); border-right: 3px solid var(--sun); transform: rotate(45deg); }
.flow__title { font-size: 18px; }
.flow__text { font-size: 15px; }

.steps { background: var(--white); border-radius: var(--r); padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow); }
.steps__title { display: flex; align-items: center; gap: 14px; font-size: clamp(21px, 2.6vw, 26px); margin-bottom: 18px; }
.steps__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; }
.steps__icon--rain { background: var(--sky-soft); color: #1f86b8; }
.steps__icon--fire { background: #fde3dc; color: var(--apple); }
.steps__icon--quake { background: var(--sun-soft); color: #b77806; }
.steps__list { display: grid; gap: 0; counter-reset: st; }
.step { counter-increment: st; display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 16px 0; border-top: 1px dashed var(--line); }
.step::before { content: counter(st); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--ink); font-size: 14px; font-weight: 700; margin-top: 2px; }
.step__body { display: grid; gap: 4px; }
.step__title { font-size: 17px; }
.step__text { font-size: 15.5px; }

.callout { padding: 24px 26px; border-radius: var(--r); display: grid; gap: 10px; justify-items: start; }
.callout--plain { background: var(--white); box-shadow: var(--shadow); }
.callout--sun { background: var(--sun-soft); }
.callout--alert { background: #fff1ee; box-shadow: inset 0 0 0 2px #f3b3a9; }
.callout__label { font-family: var(--font-head); font-weight: 700; font-size: 17px; letter-spacing: var(--ls-head); }
.callout--alert .callout__label { color: #c23324; }
.callout__text { display: grid; gap: 4px; font-size: 15.5px; }
.callout__tel { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 24px; border-radius: 999px; text-decoration: none; background: var(--leaf); color: var(--white); font-family: var(--font-head); font-weight: 700; font-size: 21px; letter-spacing: var(--ls-body); font-variant-numeric: tabular-nums; }
.callout--alert .callout__tel { background: var(--apple); }

/* 文章（プライバシーポリシーなど） */
.doc__in > p, .doc__in > ul, .doc__in > ol { max-width: 40em; }
.doc__in :where(p) + :where(p) { margin-top: 1em; }
.doc__in :where(ul) { display: grid; gap: 6px; padding-left: 1.2em; list-style: disc; }
.doc__in :where(ol) { padding-left: 1.4em; list-style: decimal; }
.doc__in :where(h3) { font-size: 18px; }
.doc__in a:not(.btn):not(.link):not(.callout__tel) { color: var(--leaf); text-underline-offset: 4px; }
.doc__in .text-right { text-align: right; }

/* ---------------------------------------------------------------- フッター（前のサイトのオレンジ） */
.parade { background: var(--cream); overflow: hidden; padding-top: 16px; }
.parade img { width: min(1400px, 100%); margin: 0 auto -6px; }
.footer { position: relative; background: var(--orange); color: var(--ink); }
.footer__in { position: relative; max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); padding-block: 56px 28px; display: grid; grid-template-columns: 1.15fr 1fr .8fr; gap: 32px 48px; }
.footer__brand { display: flex; align-items: center; gap: 12px; grid-column: 1 / -1; }
.footer__brand img { width: 110px; height: auto; }
.footer__sub { font-size: 12px; letter-spacing: var(--ls-label); }
.footer__name { font-family: var(--font-head); font-size: 26px; font-weight: 700; letter-spacing: var(--ls-head); }
.footer__info { display: grid; gap: 8px; font-size: 14.5px; }
.footer__tel { display: flex; align-items: baseline; gap: 10px; }
.footer__tel span { font-size: 12px; font-weight: 700; letter-spacing: var(--ls-label); }
.footer__tel a { font-family: var(--font-head); font-weight: 700; font-size: 26px; text-decoration: none; font-variant-numeric: tabular-nums; }
.footer__hours { font-size: 13px; }
.footer__nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.footer__nav a { display: block; padding: 7px 0; font-size: 14px; font-weight: 500; text-decoration: none; }
.footer__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__sns { display: grid; gap: 10px; align-content: start; justify-items: start; }
.footer__sns a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 999px; background: var(--white); text-decoration: none; font-family: var(--font-head); font-size: 14px; font-weight: 700; }
.footer__sns a:hover { background: var(--cream); }
.footer__sns-note { font-size: 12.5px; }
.footer__base { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px solid rgba(58, 50, 43, .25); font-size: 12px; letter-spacing: var(--ls-label); }

/* ---------------------------------------------------------------- スマホの下の帯 */
.dock { display: none; }

/* ================================================================= タブレット */
@media (max-width: 1080px) {
	.nav__list a { padding: 10px 9px; font-size: 14px; }
	.nav__list a::before { display: none; }
	.masthead__tel { display: none; }
	.facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.seasons__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.calendar__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.footer__in { grid-template-columns: 1fr 1fr; }
}

/* ================================================================= スマホ */
@media (max-width: 860px) {
	:root { --dock-h: calc(70px + env(safe-area-inset-bottom, 0px)); --band: 64px; }
	.masthead__in { height: 64px; gap: 10px; }
	.brand__mark { width: 54px; }
	.brand__name { font-size: 19px; }
	.brand__sub { font-size: 10px; }
	.masthead__toggle { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--ink); background: var(--white); font: inherit; font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: var(--ls-head); color: var(--ink); cursor: pointer; }
	.masthead__toggle-bars { width: 16px; height: 10px; position: relative; }
	.masthead__toggle-bars::before, .masthead__toggle-bars::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s ease, top .3s ease; }
	.masthead__toggle-bars::before { top: 0; }
	.masthead__toggle-bars::after { top: 8px; }
	.nav-open .masthead__toggle-bars::before { top: 4px; transform: rotate(45deg); }
	.nav-open .masthead__toggle-bars::after { top: 4px; transform: rotate(-45deg); }
	.nav { position: fixed; inset: calc(64px + env(safe-area-inset-top, 0px)) 0 0 0; z-index: 49; background: var(--cream); padding: 16px var(--gutter-r) calc(32px + var(--dock-h)) var(--gutter); overflow-y: auto; display: grid; align-content: start; gap: 24px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility 0s .25s; }
	.nav-open .nav { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease; }
	.nav-open { overflow: hidden; }
	.nav__list { display: grid; gap: 0; }
	.nav__list a { padding: 0 4px; min-height: 58px; border-bottom: 1px dashed var(--line); border-radius: 0; font-size: 19px; gap: 12px; }
	.nav__list a::before { display: block; width: 20px; height: 20px; }
	.nav__list a::after { content: "→"; margin-left: auto; color: var(--leaf); font-size: 16px; }
	.nav__list a[aria-current="page"] { background: none; }
	.nav__contact { display: grid; gap: 4px; padding: 20px; background: var(--sun); border-radius: var(--r); }
	.nav__contact-label { font-size: 13px; font-weight: 700; letter-spacing: var(--ls-label); }
	.nav__tel { font-family: var(--font-head); font-weight: 700; font-size: 32px; text-decoration: none; font-variant-numeric: tabular-nums; }
	.nav__contact-hours { font-size: 13px; }

	.hero { padding-top: 14px; padding-bottom: 48px; }
	.hero__clouds { display: none; }
	.hero__in { grid-template-columns: 1fr; gap: 20px; }
	.hero__photo { order: -1; justify-self: center; width: 100%; }
	.hero__img { aspect-ratio: 4 / 3; }
	.hero__tree { right: -6%; bottom: -12%; width: 30%; }
	.hero__sunbird { left: auto; right: 4%; top: -6%; width: 30%; }
	.hero__copy { gap: 16px; }
	.hero__eyebrow { font-size: 12.5px; }
	.hero__title { font-size: clamp(27px, 7.6vw, 34px); }
	.hero__lead { font-size: 15.5px; }
	.hero__chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
	.chip { min-width: 0; padding: 8px 10px; text-align: center; }
	.chip__label { font-size: 10.5px; letter-spacing: .04em; }
	.chip__value { font-size: 15.5px; }
	.hero__actions { display: grid; grid-template-columns: 1fr; width: 100%; gap: 12px; }
	.btn { width: 100%; }
	.hero__photo .note { left: auto; right: 6px; bottom: -20px; }

	.facts__grid { gap: 10px; }
	.fact { padding: 18px 12px; }
	.fact__icon { width: 44px; height: 44px; }
	.fact__value { font-size: 22px; }
	.fact__sub { font-size: 12px; }

	.values__list, .features__grid { grid-template-columns: 1fr; gap: 20px; }

	.day__shots { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 4px var(--gutter-r) 10px var(--gutter); margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter-r)); scrollbar-width: none; margin-bottom: 24px; }
	.day__shots::-webkit-scrollbar { display: none; }
	.day__shot { scroll-snap-align: start; }
	.day__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; background: rgba(255, 255, 255, .6); border-radius: 999px; margin-bottom: 14px; }
	.day__tabs label { display: grid; place-items: center; min-height: 44px; border-radius: 999px; font-family: var(--font-head); font-weight: 700; font-size: 15px; cursor: pointer; }
	.day__lanes { grid-template-columns: 1fr; }
	.day__radio:nth-of-type(1):checked ~ .day__tabs label:nth-child(1),
	.day__radio:nth-of-type(2):checked ~ .day__tabs label:nth-child(2) { background: var(--white); box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .35); }
	.day__radio:nth-of-type(1):checked ~ .day__lanes .lane:nth-child(2),
	.day__radio:nth-of-type(2):checked ~ .day__lanes .lane:nth-child(1) { display: none; }
	.lane { padding: 18px 18px 12px; }
	.lane__name { display: none; }
	.lane__list::before { left: 68px; }
	.lane__row { grid-template-columns: 56px 1fr; gap: 26px; }
	.lane__row::after { left: 63px; }

	.seasons__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.season__body { padding: 28px 12px 16px; }
	.season__events { font-size: 13.5px; }
	.season__events li { grid-template-columns: 1fr; }
	.season__kanji { width: 44px; height: 44px; font-size: 20px; bottom: -18px; }

	.calendar__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.month__body { padding: 12px 12px 14px; }
	.month__num { font-size: 26px; }
	.month__ev { font-size: 13px; padding: 1px 8px; white-space: normal; }

	.gallery__grid { grid-template-columns: 1fr 1fr; gap: 10px; }

	.visit__in { grid-template-columns: 1fr; gap: 24px; }
	.visit__illust { order: -1; }
	.visit__illust img { max-width: 220px; }
	.visit__call { width: 100%; padding: 18px 20px; }
	.visit__tel { font-size: 31px; }

	.access__in { grid-template-columns: 1fr; }
	.access__map { aspect-ratio: 4 / 3; }

	.phead__tree { width: 150px; right: -40px; top: -24px; }
	.phead--photo .phead__in { grid-template-columns: 1fr; }
	.phead__photo { order: -1; width: 100%; justify-self: stretch; }
	.phead__photo img { aspect-ratio: 16 / 10; }
	.phead__photo .phead__tree2 { right: -4%; bottom: -10%; width: 26%; }
	.phead__toc { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + var(--gutter) + var(--gutter-r)); margin-left: calc(-1 * var(--gutter)); padding: 2px var(--gutter-r) 6px var(--gutter); scrollbar-width: none; }
	.phead__toc::-webkit-scrollbar { display: none; }

	.kv__row { grid-template-columns: 1fr; }
	.kv__row dt { padding: 10px 18px; }
	.kv__row dd { padding: 12px 18px 16px; }
	.flow__list { grid-template-columns: 1fr; gap: 22px; }
	.flow__item:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -16px; transform: rotate(135deg); margin-left: -6px; }
	.points__item { grid-template-columns: 40px 1fr; padding: 16px; gap: 12px; }
	.points__item::before { width: 38px; height: 38px; font-size: 17px; }

	.footer__in { grid-template-columns: 1fr; padding-block: 44px 24px; gap: 24px; }
	.footer__base { flex-direction: column; }

	.dock { display: grid; grid-template-columns: 1.55fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 8px var(--gutter-r) calc(8px + env(safe-area-inset-bottom, 0px)) var(--gutter); background: color-mix(in srgb, var(--white) 95%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 -1px 0 var(--line), 0 -10px 24px -18px rgba(0, 0, 0, .4); }
	.dock__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; border-radius: 999px; font-family: var(--font-head); font-weight: 700; font-size: 15px; text-decoration: none; letter-spacing: .02em; }
	.dock__btn--tel { background: var(--sun); color: var(--ink); box-shadow: 0 4px 0 #d9951a; }
	.dock__btn--sub { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
	.dock__btn .btn__sub { font-size: 10.5px; }
}

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

/* 写真ごとの切り抜き位置（大事な所が切れないように） */
img[src$="q12_keirou.webp"] { object-position: 62% 55%; }
img[src$="p16_spring.webp"] { object-position: 35% 80%; }
img[src$="q07_potato.webp"] { object-position: 50% 70%; }
img[src$="q14_mamemaki.webp"] { object-position: 30% 60%; }
@media (max-width: 860px) {
	.fact__value { font-size: 19px; white-space: normal; word-break: keep-all; }
	.fact { min-width: 0; }
}
.fact dd { min-width: 0; max-width: 100%; }
.fact__sub { overflow-wrap: anywhere; }
@media (max-width: 860px) { .fact__sub { word-break: normal; } }

/* ================================================================= v4.1（4 周目の直し） */
body { color: #3d3530; letter-spacing: .04em; }
@media (min-width: 861px) { body { font-size: 16.5px; } }
.hero__lead, .shead__lead, .phead__lead, .fact__sub, .visit__hours { color: #3d3530; }

/* ヒーロー：写真を大きく。木は写真の外に立たせ、草花の線に根元をつなぐ */
.hero { padding-bottom: clamp(72px, 8vw, 112px); }
@media (min-width: 861px) { .hero__in { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }
.hero__photo { width: 100%; max-width: 680px; }
.hero__img { aspect-ratio: 3 / 2; border-radius: 300px 300px 24px 24px / 240px 240px 24px 24px; }
.hero__sunbird { left: auto; right: -2%; top: -12%; width: 26%; }
.hero__photo .note { left: 4px; right: auto; bottom: -24px; }
.hero__tree { position: absolute; z-index: 1; right: max(8px, calc(50% - 660px)); bottom: 6px; width: clamp(120px, 13vw, 190px); pointer-events: none; animation: rise 1s .3s cubic-bezier(.2, .7, .2, 1) both; }
.hero__grass { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: url(/images/deco/grass-png.webp?v=1d984a59) left bottom / auto 100% repeat-x; pointer-events: none; }

/* 大きな写真とひとこと */
.statement { position: relative; min-height: clamp(380px, 46vw, 600px); display: grid; align-items: end; overflow: hidden; }
.statement__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.statement__card { position: relative; margin: 0 auto clamp(28px, 4vw, 56px) max(var(--gutter), calc(50% - 560px)); justify-self: start; display: grid; gap: 10px; padding: 28px 32px 26px; max-width: 520px; background: color-mix(in srgb, var(--white) 92%, transparent); border-radius: var(--r); box-shadow: var(--shadow); }
.statement__sun { width: 84px; margin-top: -58px; }
.statement__text { font-family: var(--font-head); font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.6; letter-spacing: var(--ls-head); }
.statement__sub { font-size: 13px; font-weight: 700; letter-spacing: var(--ls-label); color: var(--leaf); }
.statement__note { position: absolute; right: 12px; bottom: 8px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }

/* 見学の帯：写真（アーチ）＋りんごの木 */
.visit__photo { position: relative; justify-self: center; width: min(100%, 400px); }
.visit__photo > img:first-child { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--arch); border: 8px solid var(--white); box-shadow: var(--shadow); }
.visit__tree { position: absolute; left: -22%; bottom: -6%; width: 42%; pointer-events: none; }

/* 一日の流れ：雲の代わりにクレヨンの太陽と小鳥 */
.sky__sun { position: absolute; top: 24px; right: 4%; width: min(220px, 34vw); pointer-events: none; }

/* 安全対策：大きい番号は緑の丸、中の手順は見出しの横に番号・本文は左端から */
.steps__num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; background: var(--leaf); color: var(--white); font-family: var(--font-head); font-size: 22px; }
.step { grid-template-columns: 1fr; gap: 0; }
.step::before { display: none; }
.step__title { display: flex; align-items: center; gap: 10px; }
.step__title::before { content: counter(st); display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); font-family: var(--font-body); font-size: 13px; }

/* 下層ページ上部：写真の無いページは見出しを木と重ねない。写真のあるページは木を写真の外・左下へ */
.phead:not(.phead--photo) .phead__copy { padding-right: 150px; }
.phead__photo .phead__tree2 { right: auto; left: -20%; bottom: -8%; width: 36%; }
.phead__photo .note { left: auto; right: 6px; }

/* ギャラリー：同じ大きさにそろえる */
.gallery__item--wide { grid-column: auto; }
.gallery__item--wide img { aspect-ratio: 1; }

/* フッターの SNS は横並び */
.footer__sns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.footer__sns-note { width: 100%; }

/* スマホの下の帯：ヒーローの電話ボタンが見えている間は隠す */
.dock { transition: transform .3s ease; }
.dock-wait .dock { transform: translateY(110%); }

@media (max-width: 860px) {
	.hero__img { aspect-ratio: 4 / 3; border-radius: 200px 200px 20px 20px / 150px 150px 20px 20px; }
	.hero__sunbird { width: 28%; right: 2%; top: -8%; }
	.hero__tree { right: 6px; width: 92px; bottom: 4px; }
	.hero__grass { height: 28px; }
	.statement { min-height: 0; display: block; }
	.statement__img { position: relative; height: auto; aspect-ratio: 4 / 3; }
	.statement__card { margin: -56px var(--gutter-r) 0 var(--gutter); padding: 22px 20px 20px; }
	.statement__sun { width: 70px; margin-top: -50px; }
	.statement__text { font-size: 21px; }
	.statement__note { top: 8px; bottom: auto; }
	.visit__photo { order: -1; width: min(72%, 300px); }
	.sky__sun { width: 120px; top: 16px; right: 2%; }
	.seasons__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78vw; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 4px var(--gutter-r) 12px var(--gutter); margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter-r)); scrollbar-width: none; gap: 14px; }
	.seasons__grid::-webkit-scrollbar { display: none; }
	.season { scroll-snap-align: start; }
	.season__events li { grid-template-columns: 2.8em 1fr; }
	.season__events { font-size: 14.5px; }
	.kv__row { grid-template-columns: 6.5em 1fr; }
	.kv__row dt { background: none; color: var(--leaf); padding: 14px 0 14px 16px; }
	.kv__row dd { padding: 14px 16px 14px 8px; word-break: keep-all; overflow-wrap: anywhere; }
	.phead:not(.phead--photo) .phead__copy { padding-right: 90px; }
	.phead__photo .phead__tree2 { left: -2%; width: 26%; bottom: -12%; }
	.steps { padding: 20px 18px; }
}
.seasons, .gallery, .calendar { overflow-x: clip; }
@media (max-width: 860px) {
	.hero { padding-bottom: 104px; }
	.hero__tree { width: 84px; right: 10px; bottom: 6px; }
}

/* ================================================================= v4.2（4 周目の審査の直し） */
/* 時刻・月の数字は手書き風をやめる（9 が q に見えるため） */
.lane__time, .day__shot-time, .month__num, .season__month { font-family: var(--font-head); font-weight: 700; font-variant-numeric: tabular-nums; }
.lane__row { grid-template-columns: 4.6em 1fr; gap: 30px; }
.lane__list::before { left: calc(4.6em + 14px); }
.lane__row::after { left: calc(4.6em + 9px); }
@media (max-width: 860px) {
	.lane__row { grid-template-columns: 4.4em 1fr; gap: 26px; }
	.lane__list::before { left: calc(4.4em + 12px); }
	.lane__row::after { left: calc(4.4em + 7px); }
}
/* 小見出しの印（赤いりんご） */
.shead__sun { width: 22px; margin: -2px 0; }
.visit__eyebrow img { width: 20px; margin: -2px 0; }
/* 番号つきのリストが右にずれていた（文章用の ol の字下げが当たっていた） */
.doc__in .points, .doc__in .flow__list, .doc__in .steps__list { padding-left: 0; list-style: none; }
/* 見出しは語の途中で折らない */
.doc-block .shead__title, .phead__title { word-break: keep-all; overflow-wrap: anywhere; }
/* 電話ボタンは黄色にそろえる（赤は緊急だけ） */
.masthead__tel { background: var(--sun); color: var(--ink); }
.masthead__tel:hover { background: #ffc53d; }
.callout__tel { background: var(--sun); color: var(--ink); box-shadow: 0 4px 0 #d9951a; }
.callout--alert .callout__tel { background: var(--apple); color: #fff; box-shadow: none; }
.visit__tel svg { color: var(--ink); }
/* フッターのロゴは白い丸の上に */
.footer__brand img { width: 96px; padding: 10px 8px 4px; background: var(--white); border-radius: 50%; aspect-ratio: 1; object-fit: contain; }
.footer__credit { text-decoration: underline; text-underline-offset: 3px; }
/* 下層ページ：写真の無いページの木は見出しと重ねない／写真を大きく */
@media (min-width: 861px) { .phead--photo .phead__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .phead__photo { width: min(100%, 560px); } }
/* フッター上の看板の絵は高くしすぎない */
.parade img { max-height: 220px; width: auto; max-width: 100%; }
@media (max-width: 860px) {
	/* 下層ページの上部と最初の枠の間の空きを詰める */
	.phead { padding-bottom: 28px; }
	.phead + .doc, .phead + * { padding-top: 32px; }
	.doc { padding-block: 32px 56px; }
	/* 写真つきの紹介（給食・せっけん・電気）は 2 列の小さなカードに */
	.features__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
	.feature__title { font-size: 16px; }
	.feature__text { font-size: 14px; }
	.features__grid .feature:first-child { grid-column: 1 / -1; }
	.season { width: 100%; }
}

/* 旧サイトの看板をよみがえらせる（トップの一番上） */
.sign { position: relative; background: var(--cream); overflow: hidden; }
.sign__art { display: block; width: 100%; max-width: 1400px; height: auto; margin: 0 auto; }
.sign__catch {
	position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
	font-family: var(--font-head); font-weight: 700; font-size: clamp(16px, 2.2vw, 30px); line-height: 1.55; letter-spacing: .08em; text-align: center; white-space: nowrap;
	color: var(--ink); padding: 10px 26px; border-radius: 999px; background: color-mix(in srgb, #fffdf3 82%, transparent);
	box-shadow: 0 10px 24px -18px rgba(90, 60, 20, .6);
}
.is-home .hero { padding-top: clamp(8px, 2vw, 28px); }
@media (max-width: 860px) {
	.sign__catch { font-size: 12.5px; padding: 6px 12px; letter-spacing: .02em; top: 48%; }
}
.is-home .hero__sunbird { display: none; }
@media (min-width: 861px) {
	.sign__art { width: auto; max-width: 100%; max-height: 210px; }
	.sign__catch { font-size: clamp(16px, 1.7vw, 22px); }
}

/* ================================================================= v4.3（5 周目の審査の直し） */
/* 本文を読みやすく（字間を詰め、少し太く） */
body { letter-spacing: .03em; font-weight: 500; }
p, li, dd, td { word-break: auto-phrase; }
/* フッターの下にクリーム色の帯が出ないよう、固定帯の分の余白はフッターの中で取る */
body { padding-bottom: 0; }
@media (max-width: 860px) { .footer__in { padding-bottom: calc(24px + var(--dock-h)); } }
/* フッター上の看板の絵：端をぼかして箱に見せない */
.parade img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sign__art { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
/* 下層ページ：上部と本文の左端をそろえる。題名を大きく */
.doc__in { max-width: var(--wrap); }
.doc__in > * { max-width: 820px; width: 100%; }
.phead__title { font-size: clamp(34px, 4vw, 54px); }
/* ページ内リンクの札は折り返して全部見せる */
.phead__toc { flex-wrap: wrap !important; overflow: visible !important; width: auto !important; margin-left: 0 !important; padding: 0 !important; }
/* 写真の無いページ（プライバシーポリシー）の木は、スマホでは出さない */
@media (max-width: 860px) {
	.phead:not(.phead--photo) .phead__tree { display: none; }
	.phead:not(.phead--photo) .phead__copy { padding-right: 0; }
	/* トップの一日の流れの写真と季節の行事は、横に送らず 2 列に */
	.day__shots { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; overflow: visible; margin-left: 0; margin-right: 0; padding: 0; gap: 12px; }
	.seasons__grid { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; overflow: visible; margin-left: 0; margin-right: 0; padding: 0; gap: 12px; }
	.season__events li { grid-template-columns: 1fr; }
	.season__events { font-size: 13.5px; }
	.season__body { padding: 26px 12px 14px; }
}
@media (max-width: 860px) {
	.phead__title { font-size: clamp(26px, 7.6vw, 34px); letter-spacing: .04em; }
}
/* 札の無い写真の帯は、写真をそのまま大きく */
.statement:not(:has(.statement__card)) { min-height: 0; display: block; }
.statement:not(:has(.statement__card)) .statement__img { position: relative; height: auto; aspect-ratio: 16 / 7; }
@media (max-width: 860px) { .statement:not(:has(.statement__card)) .statement__img { aspect-ratio: 4 / 3; } }

/* ================================================================= v4.4（6 周目の審査の直し） */
/* 文字：字間を詰め、本文は自然に折り返す（文の途中で短い行が残らないように） */
body { letter-spacing: .02em; }
p, li, dd, td { word-break: normal; line-break: strict; }
h1, h2, h3, h4 { letter-spacing: .04em; }

/* 看板：空色の空に、透明のクレヨンの看板（旧サイトの上部） */
.sign { background: linear-gradient(180deg, #8fd1ee 0%, #bfe6f7 70%, var(--cream) 100%); padding-top: 10px; }
.sign__cloud { position: absolute; top: 6px; width: min(360px, 40vw); opacity: .9; pointer-events: none; }
.sign__cloud--l { left: 2%; }
.sign__art { -webkit-mask-image: none; mask-image: none; position: relative; }
.sign__catch { background: none; box-shadow: none; padding: 0; color: #3a2a12; text-shadow: 0 0 6px #fff, 0 0 12px #fff, 0 0 2px #fff; }
@media (min-width: 861px) { .sign__art { max-height: 240px; } .sign__catch { top: 40%; font-size: clamp(18px, 1.9vw, 26px); } }
@media (max-width: 860px) {
	.sign__catch { position: static; transform: none; white-space: normal; font-size: 16px; padding: 8px var(--gutter) 6px; text-shadow: none; }
	.sign__cloud { display: none; }
}

/* 写真の帯の注記は写真の下に濃い字で */
.statement__note2 { margin: 6px var(--gutter-r) 0 0; text-align: right; color: var(--ink-2); }

/* 下層ページ：本文の枠を広げ、カード類は横いっぱい。文章だけ読みやすい幅に */
.doc__in > * { max-width: none; }
.doc__in > p, .doc__in > ul, .doc__in > ol, .doc__in > .doc-section { max-width: 820px; }
.flow__photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; margin-bottom: 4px; }
.steps__photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; margin-bottom: 18px; }
@media (min-width: 861px) {
	.steps { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 32px; align-items: start; }
	.steps__photo { grid-row: 1 / span 2; aspect-ratio: 4 / 3; margin: 0; height: 100%; }
	.phead__title { white-space: nowrap; font-size: clamp(32px, 3.4vw, 48px); }
	.kv { max-width: 900px; }
	.points { max-width: 900px; }
}
img[src$="q20_door.webp"] { object-position: 50% 85%; }

/* v4.5 電話番号の受付時間（かける人が困らないように番号の近くに必ず出す） */
.masthead__tel-hours { font-size: 10.5px; letter-spacing: var(--ls-label); opacity: .85; }
.callout__hours { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: #3d3530; }
/* フッターの © は真ん中に（運営者 2026-10-23） */
.footer__base { justify-content: center; align-items: center; text-align: center; }
/* 動画が自動で動かない時の再生ボタン */
.statement__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; padding: 14px 26px; border: 0; border-radius: 999px; background: var(--sun); color: var(--ink); font-family: var(--font-head); font-weight: 700; font-size: 18px; box-shadow: 0 4px 0 #d9951a; cursor: pointer; }
.statement__play[hidden] { display: none; }

/* トップの横長枠（動画の場所）：全幅だと間延びして変なので、PC は本文と同じ幅に収めて 16:9 で切らずに見せる（運営者 2026-10-23） */
.statement:not(:has(.statement__card)) { max-width: calc(1120px + 2 * var(--gutter)); margin: clamp(24px, 4vw, 56px) auto; padding: 0 var(--gutter); overflow: visible; }
.statement:not(:has(.statement__card)) .statement__img { aspect-ratio: 16 / 9; border-radius: var(--r); box-shadow: var(--shadow); }
@media (max-width: 860px) {
	.statement:not(:has(.statement__card)) { margin: 20px auto; }
	.statement:not(:has(.statement__card)) .statement__img { aspect-ratio: 16 / 9; }
}

/* 安全対策の「緊急時の電話連絡先」：見出しと番号を真ん中に一列で（運営者 2026-10-23） */
.callout--alert { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; text-align: center; }
.callout--alert .callout__label { margin: 0; }
/* トップの水彩画の動画：枠や影を付けず、絵の紙がページの地に溶け込むように見せる（運営者 2026-10-23「見せ方もデザイン的に良く」） */
.statement--video { max-width: calc(1120px + 2 * var(--gutter)); margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(24px, 4vw, 48px); display: grid; gap: clamp(18px, 3vw, 32px); overflow: visible; min-height: 0; }
.statement--video .shead { margin: 0; }
.statement__frame { position: relative; }
.statement--video .statement__img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; box-shadow: none; background: var(--cream);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
	-webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent); mask-composite: intersect; }
@media (max-width: 860px) { .statement--video { padding: 32px 0 16px; } .statement--video .shead { padding: 0 var(--gutter); } }
/* 動画の段：前の「横長枠」の影・角丸が勝たないよう強めに上書き／見出しは真ん中／PC は最大 1000px */
.statement.statement--video .statement__frame { max-width: 1000px; width: 100%; margin: 0 auto; }
.statement.statement--video .statement__frame .statement__img { border-radius: 0; box-shadow: none; aspect-ratio: 16 / 9; }
.statement.statement--video .shead { text-align: center; justify-items: center; justify-content: center; margin-inline: auto; }
.statement.statement--video .shead__eyebrow { justify-content: center; }
.statement.statement--video .shead__title { border: 0; }
.statement.statement--video .statement__frame .statement__img {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent); }
/* フッターの丸いアイコン：下が切れた太陽ではなく、丸ごとの太陽（透明）を地の色の丸に（運営者 2026-10-23） */
.footer__brand img { width: 96px; padding: 8px; background: var(--cream); border-radius: 50%; aspect-ratio: 1; object-fit: contain; }
/* メニューのリンゴ：マウスを乗せた時と、今いるページでは、かじったリンゴに変わる（旧サイトと同じ仕様） */
.nav__list a::before { transition: transform .15s; }
.nav__list a:hover::before, .nav__list a:focus-visible::before, .nav__list a[aria-current="page"]::before { background-image: url(/images/deco/icon_apple_bite.png?v=99d95c83); }
.nav__list a:hover::before { transform: rotate(-8deg) scale(1.08); }
/* ヘッダーの太陽：看板と同じ絵柄の丸ごとの太陽（透明） */
.brand__mark { width: 48px; height: 48px; margin-top: 0; object-fit: contain; }
@media (max-width: 860px) { .brand__mark { width: 40px; height: 40px; } }
/* フッターの太陽：背景の丸は付けない（透明のまま） */
.footer__brand img { width: 96px; height: 96px; padding: 0; background: none; border-radius: 0; object-fit: contain; }
/* スマホ：下へ読み進めている間は上と下の帯を隠す */
@media (max-width: 860px) {
	.masthead { transition: transform .28s ease, box-shadow .3s ease; }
	.bars-hidden .masthead { transform: translateY(-100%); }
	.bars-hidden .dock { transform: translateY(110%); }
}.footer__brand img { filter: drop-shadow(0 0 3px rgba(255, 249, 234, .95)) drop-shadow(0 0 8px rgba(255, 249, 234, .8)); }
/* メニューのリンゴ：旧サイトと同じ元の画像（普段＝ringo.png・マウスを乗せた時と今いるページ＝かじったリンゴ ringo_kajiri.png）（運営者 2026-10-23） */
.nav__list a::before { background-image: url(/images/deco/ringo.png?v=30f40b93); }
.nav__list a:hover::before, .nav__list a:focus-visible::before, .nav__list a[aria-current="page"]::before { background-image: url(/images/deco/ringo_kajiri.png?v=37b20c78); }
/* 丸いアイコン：青空の丸に上半分の太陽（画像そのものが丸）・縁取りは要らない */
.footer__brand img { filter: none; width: 96px; height: 96px; }
/* メニューのリンゴ：マウスを乗せた時と今いるページは、元のかじったリンゴ（ringo_shin）（運営者 2026-10-23） */
.nav__list a:hover::before, .nav__list a:focus-visible::before, .nav__list a[aria-current="page"]::before { background-image: url(/images/deco/ringo_bite.png?v=6ab555e7); }
/* トップ：「ぽかぽかの毎日」の動画の段を一番上へ、ヒーロー（写真・見出し・電話）をその下へ、段ごと入れ替え（運営者 2026-10-23） */
/* 動画の上下・左右の端に出る細い線を切る */
.statement.statement--video .statement__frame .statement__img { clip-path: inset(1%); }
/* スマホ：動画は画面の横幅いっぱい。左右のぼかしは無し、上下だけ地に溶かす */
@media (max-width: 860px) {
	.is-home .statement.statement--video { padding-left: 0; padding-right: 0; }
	.is-home .statement.statement--video .statement__frame .statement__img {
		-webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
		mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
		clip-path: inset(1% 0); }
}
/* 下に移ったヒーロー：PC は文字の高さと写真の高さをそろえる（見出しを少し小さく・写真を 4:3 に） */
@media (min-width: 861px) {
	.is-home .hero__title { font-size: clamp(32px, 3.6vw, 48px); }
	.is-home .hero__img { aspect-ratio: 4 / 3; }
}
/* スマホ：動画のすぐ下に写真が続かないよう、文章 → 写真の順に */
@media (max-width: 860px) {
	.is-home .hero { padding-top: 28px; }
	.is-home .hero__photo { order: 0; }
}
/* 動画の上下の余白を詰める（看板のすぐ下に動画、そのすぐ下に見出し・運営者 2026-10-23） */
.is-home .statement.statement--video { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
.is-home .hero { padding-top: 12px; }
@media (max-width: 860px) { .is-home .hero { padding-top: 12px; } }
/* スマホのトップの見出しまわり：中央そろえ（上の動画・下のボタンと軸をそろえる）。ボタンは下の帯と同じく横に並べて縦を詰める（運営者 2026-10-23） */
@media (max-width: 860px) {
	.is-home .hero__copy { justify-items: center; text-align: center; gap: 14px; }
	.is-home .hero__title { justify-items: center; }
	.is-home .hero__lead { margin-inline: auto; }
	.is-home .hero__actions { grid-template-columns: 1.55fr 1fr; gap: 8px; align-items: stretch; }
	.is-home .hero__actions .btn { width: 100%; height: 100%; padding-left: 10px; padding-right: 10px; justify-content: center; }
}
/* スマホのトップのボタン：下の帯のボタンと同じ大きさ・字の大きさに。字は折り返さない */
@media (max-width: 860px) {
	.is-home .hero__actions .btn { min-height: 54px; gap: 8px; padding: 6px 10px; font-size: 15px; letter-spacing: .02em; white-space: nowrap; }
	.is-home .hero__actions .btn__sub { font-size: 10.5px; white-space: nowrap; }
}
@media (max-width: 380px) { .is-home .hero__actions .btn--sun svg { display: none; } }
/* スマホのトップ：見出しと説明文は画面に出さない（読み上げ・検索用に h1 は見えない形で残す・運営者 2026-10-23） */
@media (max-width: 860px) {
	.is-home .hero__title, .is-home .hero__lead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
	.is-home .hero { padding-top: 16px; }
}
/* トップ「安心な食事、安全な保育環境」：上の段と続けて見せる（見出しの上の札は外し、間を詰める）。紹介は上と同じ白い枠に（運営者 2026-10-23） */
.is-home .values { padding-bottom: clamp(28px, 3.5vw, 48px); }
.is-home .values + .features { padding-top: clamp(28px, 3.5vw, 48px); }
.is-home .feature { background: var(--white); border-radius: var(--r); padding: 14px 14px 22px; box-shadow: var(--shadow); }
.is-home .feature__photo { border-radius: 16px; }
.is-home .feature > :not(.feature__photo) { margin-left: 6px; margin-right: 6px; }
@media (max-width: 860px) {
	.is-home .feature { padding: 10px 10px 16px; }
	.is-home .feature__photo { border-radius: 12px; }
	.is-home .feature > :not(.feature__photo) { margin-left: 4px; margin-right: 4px; }
}
@media (max-width: 860px) { .is-home .feature__title { font-size: 15px; letter-spacing: .02em; } }
/* スマホのトップ：段と段の間・札の上下の空きを詰める（運営者 2026-10-23「変な隙間をなくせ」） */
@media (max-width: 860px) {
	.is-home { --band: 40px; }
	.is-home .hero { padding-top: 12px; padding-bottom: 76px; }
	.is-home .hero__copy { gap: 10px; }
	.is-home .hero__chips { margin: 0; }
	.is-home .hero__in { gap: 14px; }
	.is-home .shead { margin-bottom: 22px; }
	.is-home .day { padding-bottom: 76px; }
	.is-home .day__more, .is-home .seasons__more { margin-top: 18px; }
	.is-home .access { padding-bottom: 28px; }
}