/* 全ページ共通のスタイル。白地に、ロゴから作った紫と淡いライラック・アプリコット・セージで構成する。トップだけの区画は top.css */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Quicksand:wght@500;600;700&display=swap');

:root {
  /* ブランド（テストでコントラストを検査するトークンを含む） */
  --primary: #A030C8;
  --white: #FFFFFF;
  --background: #FBFAFC;
  --heading: #2A0040;
  --muted: #6E6873;
  --cta-accent: #E8A030;
  --cta-foreground: var(--heading);
  /* サイトの配色 */
  --main: var(--primary);
  --main-pale: #EFE3F7;
  --text: #4F4A55;
  --dark: #55505A;
  --line: #C9C5CC;
  --gray: #F4F3F5;
  /* ロゴから作る配色: 紫が主役。淡い3色は面に、濃い色は文字に使う */
  --purple: #8E5BB8; --purple-pale: #E9DDF5;
  --lilac: #7A5BA8;  --lilac-pale: #EFE8FA;
  --apricot: #A8572F; --apricot-pale: #FDEADF;
  --sage: #3F7656;   --sage-pale: #E4F1E8;
  --gutter: max(20px, 4.4vw);
  --en: 'Quicksand', 'Zen Kaku Gothic New', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: #fff; color: var(--text); font: 400 15px/1.85 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; letter-spacing: .04em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--main); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--main-pale); color: var(--heading); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }
.container { width: calc(100% - 2 * var(--gutter)); max-width: 1180px; margin-inline: auto; }

/* ボタン: 丸いピル型。旧ページの .button も同じ見た目にそろえる */
.pill, .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 22px; border-radius: 999px; border: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; cursor: pointer; transition: opacity .2s; }
.pill:hover, .button:hover { opacity: .82; }
.pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pill--main, .button-gold, .button-primary { background: var(--main); color: #fff; }
.pill--dark, .button-outline { background: var(--dark); color: #fff; }
.pill--lg, .final-cta .button { min-height: 56px; padding: 0 30px; font-size: 15px; }
.pill--outline { background: #fff; color: var(--main); box-shadow: inset 0 0 0 1.5px var(--main); }
.arw::before { content: '→'; font-weight: 700; }
.button .arrow { font-weight: 700; }
.text-link { display: inline-flex; align-items: center; gap: 12px; color: var(--main); font-weight: 700; border-bottom: 1px dotted var(--main); padding-bottom: 2px; }

/* ヘッダー: 最初から1行の白い帯。今いるページ（aria-current）に紫の下線を引き、ログインは枠線のボタンにする */
.hd { position: fixed; z-index: 50; inset: 0 0 auto; height: 72px; display: flex; align-items: center; gap: 28px; padding: 0 var(--gutter); background: color-mix(in srgb, #fff 94%, transparent); backdrop-filter: blur(8px); transition: box-shadow .3s; }
.hd.is-scrolled { box-shadow: 0 1px 0 color-mix(in srgb, var(--lilac) 18%, transparent); }
.hd-logo { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.hd-logo img { width: 96px; }
.brand-reading { display: block; color: var(--heading); font-size: 12px; line-height: 1.5; letter-spacing: .08em; font-weight: 500; }
.hd-nav { margin-left: auto; }
.hd-nav ul { display: flex; align-items: center; gap: 22px; }
.hd-nav a { display: inline-block; padding: 6px 0; font-size: 13px; font-weight: 500; line-height: 1.6; white-space: nowrap; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.hd-nav a:hover { color: var(--main); }
.hd-nav a[aria-current="page"] { color: var(--main); border-bottom-color: var(--main); }
.hd-nav li:last-child a { padding: 6px 16px; border: 1px solid var(--line); border-radius: 999px; }
.hd-nav li:last-child a:hover { border-color: var(--main); }
.hd-cta { transition: opacity .2s, visibility .2s; }
.hd.is-cta-hidden .hd-cta { opacity: 0; visibility: hidden; }
.hd-menu { display: none; }
.sp-menu { display: none; }

/* 区画見出し: 1行で、左に日本語の見出し、右端に紫の文字リンク。英字の小見出し・濃いボタン・区切り線は使わない */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding: 0 var(--gutter); margin-bottom: 28px; }
.sec-head h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; letter-spacing: .02em; line-height: 1.45; color: var(--heading); }
.sec-head h2 span { display: none; }
.sec-head--line { margin: 0 0 28px; }
.sec-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 24px; }
.sec-head > .pill--dark, .sec-actions { margin-left: auto; }
.sec-head .pill--dark { min-height: 0; padding: 2px 0; border-radius: 0; background: none; color: var(--main); font-size: 14px; border-bottom: 1.5px solid currentColor; }
.sec-head .pill--dark svg { width: 15px; height: 15px; }

/* 下層ページの見出し: 図形をあしらい、日本語の大見出しの下に小さな英字を置く */
.page-heading { position: relative; overflow: hidden; padding: 150px 0 56px; }
.page-heading::before, .page-heading::after { content: ''; position: absolute; z-index: 0; border-radius: 58% 42% 55% 45% / 46% 54% 46% 54%; animation: morph 16s ease-in-out infinite alternate; }
.page-heading::before { width: 24vw; height: 20vw; right: -5vw; top: -6vw; background: var(--lilac-pale); }
.page-heading::after { width: 9vw; height: 8vw; right: 22vw; bottom: 8px; background: var(--apricot-pale); animation-delay: -6s; }
.page-heading .container { position: relative; z-index: 1; display: flex; flex-direction: column; padding-bottom: 8px; }
.breadcrumb { order: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; font-size: 12px; color: var(--muted); }
.breadcrumb a:hover { color: var(--main); }
.page-heading h1 { order: 1; font-size: clamp(26px, 3.4vw, 44px); font-weight: 700; line-height: 1.5; letter-spacing: .02em; color: var(--heading); text-wrap: balance; }
.page-heading .eyebrow { display: none; }
.page-heading .container > p:not(.eyebrow) { order: 3; margin-top: 18px; font-size: 14px; }
@keyframes morph {
  0% { border-radius: 58% 42% 55% 45% / 46% 54% 46% 54%; transform: rotate(0deg); }
  50% { border-radius: 42% 58% 38% 62% / 58% 40% 60% 42%; }
  100% { border-radius: 52% 48% 62% 38% / 40% 62% 38% 60%; transform: rotate(14deg); }
}

/* 下層ページの本文 */
.page-body { padding: 40px 0 110px; }
.reading-width { width: calc(100% - 2 * var(--gutter)); max-width: 860px; margin-inline: auto; font-size: 14px; line-height: 2.1; }
.reading-width h2 { position: relative; margin: 64px 0 22px; padding-bottom: 14px; border-bottom: 1px dotted var(--line); font-size: clamp(20px, 2vw, 24px); font-weight: 700; line-height: 1.6; letter-spacing: -.01em; color: var(--text); }
.reading-width h2:first-child { margin-top: 0; }
.reading-width h3 { margin: 34px 0 10px; font-size: 16px; font-weight: 700; color: var(--main); }
.reading-width h4 { margin: 22px 0 6px; font-size: 14px; font-weight: 700; }
.reading-width p + p { margin-top: 1em; }
.reading-width ul, .reading-width ol { margin: 12px 0; padding-left: 1.4em; }
.reading-width ul { list-style: disc; }
.reading-width ol { list-style: decimal; }
.reading-width li + li { margin-top: 6px; }
.reading-width a:not(.button):not(.pill):not(.text-link) { color: var(--main); text-decoration: underline; text-underline-offset: 3px; }
.reading-width table { width: 100%; margin: 10px 0 30px; border-collapse: collapse; font-size: 13px; }
.reading-width th, .reading-width td { padding: 18px 16px; border-bottom: 1px dotted var(--line); text-align: left; vertical-align: top; }
.reading-width th { width: 28%; font-weight: 700; color: var(--text); background: var(--gray); }
.reading-width table table { font-size: 12px; margin: 0; }
.reading-width table table th, .reading-width table table td { padding: 8px 10px; }
.reading-width .button { margin: 10px 0; }
.about-photo { width: 100%; aspect-ratio: 1.9; object-fit: cover; margin-bottom: 44px; border-radius: 16px; }
.intro-panel { margin-bottom: 48px; padding: 32px 36px; border-radius: 24px; background: var(--gray); }
.intro-panel h2 { margin-top: 0; border-bottom: 0; padding-bottom: 0; }
.section-title { margin-bottom: 28px; }
.section-title h2 { margin-top: 0; }

/* 料金ページ: 灰色の角丸カード2枚 */
.membership-note { display: inline-block; margin-bottom: 18px; padding: 4px 16px; border-radius: 999px; background: var(--main-pale); color: var(--main); font-size: 13px; font-weight: 700; }
.price-plan .price-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 10px 0 30px; }
.price-plan .price-card { padding: 30px 32px; border-radius: 26px; background: var(--gray); }
.price-plan .price-header h3 { margin: 0; font-size: 17px; color: var(--text); }
.price-plan .price { margin: 10px 0 6px; font: 700 48px/1.2 var(--en); color: var(--main); letter-spacing: 0; }
.price-plan .price span { margin-left: 6px; font: 400 13px/1.6 'Zen Kaku Gothic New', sans-serif; color: var(--text); }
.price-plan .price-features { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px dotted var(--line); }
.price-plan .price-features li { position: relative; padding-left: 20px; font-size: 13px; line-height: 1.9; }
.price-plan .price-features li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 9px; height: 5px; border-left: 2px solid var(--main); border-bottom: 2px solid var(--main); transform: rotate(-45deg); }
.price-notes { margin-top: 30px; }

/* 対応エリア */
.area-container { display: grid; gap: 22px; }
.area-box { padding: 28px 30px; border-radius: 24px; background: var(--gray); }
.area-box h3 { margin-top: 0; }
.area-box.featured { background: var(--lilac-pale); }
.area-box .fas { display: none; }
.area-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 28px; margin-top: 10px; }
.area-column h4 { margin-top: 16px; color: var(--text); }
.area-note { margin-top: 16px; font-size: 12px; color: var(--muted); }

/* お問い合わせ */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.contact-card { display: grid; justify-items: start; align-content: start; gap: 12px; padding: 30px 28px; border-radius: 24px; background: var(--gray); }
.contact-card h2 { font-size: 18px; font-weight: 700; color: var(--text); }
.contact-card p { font-size: 13px; }
.contact-card small { font-size: 12px; color: var(--muted); }
.line-icon { width: 46px; height: 46px; padding: 10px; border-radius: 50%; background: var(--main-pale); color: var(--main); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* お知らせ */
.news-archive-note { margin-bottom: 40px; padding: 18px 22px; border-radius: 16px; background: var(--gray); font-size: 13px; }
.news-entry { padding: 36px 0; border-bottom: 1px dotted var(--line); scroll-margin-top: 110px; }
.news-entry:first-of-type { padding-top: 0; }
.news-entry time { color: var(--main); font-size: 12px; font-weight: 700; }
.news-entry h2 { margin: 8px 0 16px; padding: 0; border: 0; font-size: 19px; }
.news-entry p { white-space: pre-line; }

/* 規約・特定商取引法 */
.terms-article { padding-bottom: 10px; }
.tokutei-note { font-size: 12px; color: var(--muted); }

/* 素材一覧 */
.material-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 26px; }
.material-card { border-radius: 22px; background: var(--gray); overflow: hidden; }
.material-card > a img { width: 100%; aspect-ratio: 1.5; object-fit: cover; }
.material-card > div { padding: 22px; }
.material-card h2 { margin-bottom: 6px; font-size: 18px; color: var(--text); }
.material-filename { font-size: 12px; color: var(--muted); }
.material-card .text-link { margin-top: 14px; }
.material-note { margin-top: 30px; font-size: 13px; }

/* 下層ページの締めの予約案内（紫の箱） */
.final-cta { padding: 0 var(--gutter) 40px; }
.final-cta .container { display: grid; justify-items: center; gap: 16px; max-width: 760px; padding: 48px 32px; border-radius: 28px; background: var(--main); color: #fff; text-align: center; }
.final-cta .eyebrow { font: 600 12px/1.6 var(--en); letter-spacing: .08em; opacity: .85; }
.final-cta h2 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; line-height: 1.6; }
.final-cta .button { background: #fff; color: var(--main); }
.final-cta .contact-note { font-size: 12px; }
.final-cta .contact-note a { text-decoration: underline; text-underline-offset: 3px; }

/* 最後の締め（全ページ共通）: 紫の全幅の帯に、手をつないで歩くシッターと子ども。締めがあるページはフッターと間を空けない */
.wrap { width: min(1120px, 100% - 2 * clamp(16px, 4vw, 40px)); margin-inline: auto; }
.pill--white { background: #fff; color: var(--main); }
.closing { position: relative; overflow: hidden; background: #8E3AB8; color: #fff; }
.closing .deco { position: absolute; border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; background: rgb(255 255 255 / .1); }
.closing .d1 { left: -6%; top: -30%; width: 420px; aspect-ratio: 1; }
.closing .d2 { right: 18%; bottom: -40%; width: 360px; aspect-ratio: 1; background: rgb(242 195 91 / .9); }
.closing-in { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: end; padding-top: clamp(56px, 7vw, 96px); }
.closing-copy { padding-bottom: clamp(56px, 7vw, 96px); }
.closing h2 { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.5; letter-spacing: .06em; }
.closing p { margin-top: 14px; font-size: 16px; }
.closing .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 30px; }
.closing .acts a.sub { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.closing-img { width: min(360px, 100%); margin-inline: auto; filter: drop-shadow(0 18px 14px rgb(0 0 0 / .18)); }
@media (max-width: 899px) {
  .closing-in { grid-template-columns: 1fr; gap: 0; text-align: center; }
  .closing-copy { padding-bottom: 8px; }
  .closing .acts { justify-content: center; }
  .closing .acts .pill { width: 100%; }
  .closing-img { width: 220px; }
}

body:has(main > .closing:last-child) .ft { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes drift { from { transform: translate(0, 0) rotate(0); } to { transform: translate(10px, -14px) rotate(6deg); } }
  .closing .deco { animation: drift 9s ease-in-out infinite alternate; }
}

/* フッター: 淡いライラック地に、ロゴと歩く足あと・2列のリンク・予約の箱。人物は置かない */
.ft { margin-top: 120px; padding: 80px var(--gutter) 48px; background: var(--lilac-pale); }
.ft-main { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 40px; }
.ft-brand { position: relative; align-self: start; min-height: 100px; }
.ft-logo { position: relative; z-index: 1; width: 160px; }
.ft-brand .brand-reading { width: 160px; text-align: center; margin-top: 6px; }
.ft-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; font-size: 13px; line-height: 2.3; }
.ft-links a:hover { color: var(--main); }
.ft-links a { display: inline-flex; align-items: center; min-height: 44px; }
.ft-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--lilac) 25%, transparent); font-size: 12px; }
.ft-bottom ul { display: grid; gap: 4px; }
.ft-bottom p { text-align: right; color: var(--muted); }
.ft-bottom .ft-note { color: var(--muted); font-size: 11px; }

/* 成長する子ども: フッターのリンクの下の点線の上を、はいはい → よちよち → 歩く → 走る と成長しながら横切る（site.js が見えている間だけ動かす） */
.grow { position: relative; height: 130px; margin-top: 8px; overflow: hidden; pointer-events: none; }
.grow::after { content: ''; position: absolute; left: 0; right: 0; bottom: 14px; border-bottom: 2px dotted color-mix(in srgb, var(--lilac) 45%, transparent); }
.grow-track { position: absolute; inset: 0; }
/* 素材は 384×1024 のコマを横に4つ並べたシート。接地位置はコマ下端から 128/1024 上なので、その分下げて点線に立たせる */
.grow-kid { --kid-w: 67.5px; --kid-h: 180px; position: absolute; left: 2%; bottom: calc(15px - var(--kid-h) * 0.125); width: var(--kid-w); height: var(--kid-h); }
.kid { position: absolute; inset: 0; opacity: 0; background-repeat: no-repeat; background-size: calc(var(--kid-w) * 4) var(--kid-h); background-position: 0 0; }
/* 動き出す前から、はいはいの子を左端に出しておく（空白に見えないように） */
.grow .kid--crawl { opacity: 1; }
.kid--crawl { background-image: url(assets/grow/crawl.webp); }
.kid--toddle { background-image: url(assets/grow/toddle.webp); }
.kid--walk { background-image: url(assets/grow/walk.webp); }
.kid--run { background-image: url(assets/grow/run.webp); }
.grow.is-playing .grow-kid { animation: growMove 11s linear infinite; }
.grow.is-playing .kid--crawl { animation: growStage1 11s linear infinite, kidFrames .72s steps(4) infinite; }
.grow.is-playing .kid--toddle { animation: growStage2 11s linear infinite, kidFrames .64s steps(4) infinite; }
.grow.is-playing .kid--walk { animation: growStage3 11s linear infinite, kidFrames .56s steps(4) infinite; }
.grow.is-playing .kid--run { animation: growStage4 11s linear infinite, kidFrames .44s steps(4) infinite; }
@keyframes kidFrames { to { background-position-x: calc(var(--kid-w) * -4); } }
/* 位置は帯の幅に対する%。走り去ってから、はいはいで戻るまでの間を短くする */
@keyframes growMove { 0% { left: 2%; } 24% { left: 22%; } 48% { left: 42%; } 72% { left: 64%; } 98%, 100% { left: 100%; } }
@keyframes growStage1 { 0%, 22% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes growStage2 { 0%, 22% { opacity: 0; } 25%, 46% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes growStage3 { 0%, 46% { opacity: 0; } 49%, 70% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes growStage4 { 0%, 70% { opacity: 0; } 73%, 98% { opacity: 1; } 99%, 100% { opacity: 0; } }
/* 点線を区切り線として使い、下の帯の線とは二重にしない */
.grow + .ft-bottom { padding-top: 6px; border-top: 0; }

/* 足跡: ロゴの足あとと同じ色味で、左右交互に現れては消え、歩いているように見せる（site.js が足を並べる） */
.trail { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.foot { position: absolute; width: var(--fw, 16px); aspect-ratio: 40 / 64; margin: calc(var(--fw, 16px) * -0.8) 0 0 calc(var(--fw, 16px) * -0.5); background: var(--fc, #A273B2); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64'%3E%3Cpath d='M21 24c8.5 0 13.5 6 12.5 16-1 11-5 22-12 22-6 0-9-8-10-19-1-11 2-19 9.5-19z'/%3E%3Ccircle cx='12.5' cy='12' r='5'/%3E%3Ccircle cx='21' cy='9.5' r='3.8'/%3E%3Ccircle cx='27.5' cy='11.5' r='3.3'/%3E%3Ccircle cx='32.5' cy='15.5' r='2.8'/%3E%3Ccircle cx='36' cy='21' r='2.3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64'%3E%3Cpath d='M21 24c8.5 0 13.5 6 12.5 16-1 11-5 22-12 22-6 0-9-8-10-19-1-11 2-19 9.5-19z'/%3E%3Ccircle cx='12.5' cy='12' r='5'/%3E%3Ccircle cx='21' cy='9.5' r='3.8'/%3E%3Ccircle cx='27.5' cy='11.5' r='3.3'/%3E%3Ccircle cx='32.5' cy='15.5' r='2.8'/%3E%3Ccircle cx='36' cy='21' r='2.3'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; transform: rotate(var(--r)) scaleX(var(--m, 1)); }
.trail.is-walking .foot { animation: footstep var(--t) ease-out var(--d) infinite; }
.trail--ft { inset: 0 0 auto auto; width: 130px; height: 100px; --fc: var(--lilac); --fo: .45; --fw: 14px; }
@keyframes footstep {
  0% { opacity: 0; transform: rotate(var(--r)) scaleX(var(--m, 1)) scale(.4); }
  4% { opacity: var(--fo, .55); transform: rotate(var(--r)) scaleX(var(--m, 1)) scale(1.12); }
  7% { transform: rotate(var(--r)) scaleX(var(--m, 1)) scale(1); }
  58% { opacity: var(--fo, .55); }
  78%, 100% { opacity: 0; transform: rotate(var(--r)) scaleX(var(--m, 1)) scale(1); }
}

@media (max-width: 1240px) {
  .hd-nav ul { gap: 16px; }
  .hd-nav { display: none; }
  .hd-cta { order: 2; margin-left: auto; }
  .hd-menu { order: 3; display: grid; place-content: center; gap: 5px; width: 44px; height: 44px; margin-right: -8px; border: 0; background: none; cursor: pointer; }
  .hd-menu span { display: block; width: 22px; height: 2px; background: var(--heading); border-radius: 2px; transition: transform .3s, opacity .2s; }
  .hd-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hd-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .hd-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .sp-menu:not([hidden]) { position: fixed; z-index: 49; inset: 72px 0 0; display: flex; flex-direction: column; padding: 8px var(--gutter) calc(24px + env(safe-area-inset-bottom)); background: var(--white); overflow-y: auto; }
  .sp-menu > a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid #E4DFE8; color: var(--heading); font-size: 16px; font-weight: 500; }
  .sp-menu > a::after { content: '›'; color: var(--main); font-size: 22px; }
  .sp-menu-cta { margin-top: auto; padding-top: 24px; }
  .sp-menu-cta .pill { width: 100%; }
}
@media (max-width: 899px) {
  .sp-menu:not([hidden]) { top: 64px; }
  .hd { height: 64px; gap: 10px; }
  .hd.is-scrolled { height: 64px; }
  .hd-logo img { width: 84px; }
  .hd-nav { display: none; }
  .hd-cta { min-height: 40px; padding: 0 16px; font-size: 13px; }
  .hd-cta svg { display: none; }
  .sec-head { flex-wrap: wrap; }
  .page-heading { padding: 100px 0 36px; }
  .page-heading::before { width: 40vw; height: 34vw; }
  .page-heading::after { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .price-plan .price-cards { grid-template-columns: 1fr; }
  .material-grid { grid-template-columns: 1fr; }
  .ft { margin-top: 90px; padding-top: 56px; padding-bottom: 40px; }
  .ft-main { grid-template-columns: 1fr; gap: 20px; }
  .ft { padding-top: 40px; }
  .ft-links { gap: 12px 20px; }
  .ft-bottom { flex-direction: column; }
  /* スマホは子どもを少し小さくし、帯を低くしてリンクとの間を詰める */
  .grow { height: 84px; margin-top: -30px; }
  .grow-kid { --kid-w: 50px; --kid-h: 133.3px; }
  .ft-bottom p { text-align: left; }
}
@media (max-width: 599px) {
  .sec-actions { justify-content: flex-end; }
  .reading-width { font-size: 13.5px; }
  .reading-width table, .reading-width tbody, .reading-width tr, .reading-width th, .reading-width td { display: block; width: 100%; }
  .reading-width th { padding: 12px 14px 6px; border-bottom: 0; }
  .reading-width td { padding: 6px 14px 16px; }
  .reading-width table table { display: table; }
  .reading-width table table tbody { display: table-row-group; }
  .reading-width table table tr { display: table-row; }
  .reading-width table table th, .reading-width table table td { display: table-cell; width: auto; }
  .intro-panel { padding: 24px 20px; }
  .price-plan .price-card, .area-box { padding: 24px 20px; }
  .price-plan .price { font-size: 40px; }
  .final-cta .container { padding: 36px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .foot { opacity: calc(var(--fo, .55) * .6); }
  .grow-kid { left: 0; right: 0; width: auto; display: flex; justify-content: space-around; }
  .kid { position: static; flex: 0 0 var(--kid-w); opacity: 1; }
}

/* 代表の実写真・創業ストーリーを、スマホでも読み進めやすい単位に分ける。 */
.founder-profile { margin: 64px 0; padding: 28px; border-radius: 24px; background: var(--lilac-pale); }
.founder-profile > h2 { margin-top: 0; }
.founder-profile-grid { display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: start; }
.founder-profile-grid > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; }
.founder-profile .founder-name-en { display: block; font: 600 18px/1.8 var(--en); color: var(--main); }
.founder-social { display: flex; gap: 24px; margin-top: 16px; }
.founder-story { padding: 12px 0 32px; }
.founder-story p { margin-bottom: 22px; }
.founder-story .highlight { font-weight: 700; }
.contact-form-panel { padding: 36px; border-radius: 24px; background: var(--lilac-pale); }
.contact-form-panel h2 { margin-top: 24px; }
.contact-form-panel .pill { margin-top: 24px; }
.contact-help { padding-top: 28px; }
.news-page .page-heading { background: var(--lilac-pale); }
.news-page .page-body { background: var(--background); }
.news-entry { padding: 30px; margin-bottom: 24px; border: 1px solid var(--line); border-top: 4px solid var(--main); border-radius: 20px; background: var(--white); }
.news-entry:first-of-type { padding-top: 30px; }
.news-entry:nth-of-type(2n) { border-top-color: var(--apricot); }
.news-entry:nth-of-type(3n) { border-top-color: var(--sage); }
.news-entry time { display: inline-block; background: var(--lilac-pale); border-radius: 999px; padding: 4px 14px; }
.news-entry h2 { color: var(--heading); line-height: 1.7; margin-top: 18px; text-wrap: balance; }
.corporate-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.corporate-intro img { width: 100%; border-radius: 24px; }
.corporate-intro p { margin: 20px 0; font-size: 14px; }
.corporate-heading { margin: 72px 0 28px; font-size: 25px; color: var(--heading); }
.corporate-services { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.corporate-services article { border-radius: 24px; overflow: hidden; background: var(--lilac-pale); }
.corporate-services article:nth-child(2) { background: var(--apricot-pale); }
.corporate-services article:nth-child(3) { background: var(--sage-pale); }
.corporate-services article > div { padding: 24px; }
.corporate-services h3, .corporate-benefits h3 { font-size: 18px; color: var(--heading); margin-bottom: 10px; }
.corporate-benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.corporate-benefits article { padding: 24px; border: 1px solid var(--line); border-radius: 20px; }
.corporate-benefits span { font: 600 20px/1.5 var(--en); color: var(--main); }
.corporate-estimate { margin-top: 60px; padding: 32px; border-radius: 24px; background: var(--lilac-pale); }
.corporate-estimate p { margin: 14px 0; }
.corporate-estimate ol { list-style: decimal; padding-left: 22px; margin: 20px 0; }
@media (max-width: 699px) {
  .founder-profile { padding: 22px; }
  .founder-profile-grid, .corporate-intro, .corporate-services, .corporate-benefits { grid-template-columns: 1fr; }
  .founder-profile-grid > img { max-width: 260px; margin-inline: auto; }
  .contact-form-panel, .news-entry, .corporate-estimate { padding: 24px; }
  .contact-form-panel .pill { width: 100%; }
}

/* 一覧では日付・タイトルだけを表示し、開いた記事だけ本文を読む。 */
.news-entry .news-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 24px; gap: 16px; align-items: center; list-style: none; cursor: pointer; }
.news-entry .news-row::-webkit-details-marker { display: none; }
.news-entry .news-row time { padding: 4px 8px; text-align: center; }
.news-title { font-size: 17px; font-weight: 700; color: var(--heading); line-height: 1.7; }
.news-toggle::after { content: '+'; font-size: 24px; color: var(--main); }
.news-entry[open] .news-toggle::after { content: '−'; }
.news-body { padding-top: 24px; margin-top: 20px; border-top: 1px solid var(--line); }
@media (max-width: 699px) {
  .news-entry .news-row { grid-template-columns: minmax(0, 1fr) 24px; gap: 12px; }
  .news-entry .news-row time { justify-self: start; }
  .news-title { grid-column: 1; grid-row: 2; font-size: 16px; }
  .news-toggle { grid-column: 2; grid-row: 1 / 3; }
}

/* お知らせはカードの装飾を減らした、日付と見出しの一覧。 */
.news-entry, .news-entry:first-of-type { padding: 28px 0; margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.news-entry:first-of-type { border-top: 1px solid var(--line); }
.news-entry .news-row { gap: 24px; }
.news-entry .news-row time { background: transparent; padding: 0; color: var(--main); letter-spacing: .06em; text-align: left; }
.news-title { font-size: 16px; font-weight: 500; }
.news-toggle { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; }
.news-toggle::after { font-size: 18px; }
.news-body { border-top: 0; margin-top: 0; padding: 24px 0 0; }
@media (max-width: 699px) { .news-entry .news-row { gap: 10px 16px; } }

/* 一覧から記事専用ページへ遷移する。 */
a.news-entry { display: block; }
.news-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 24px; align-items: center; gap: 24px; }
a.news-entry:hover .news-title { color: var(--main); }
.news-arrow { color: var(--main); font-size: 22px; }
.news-article-title { font-size: clamp(23px, 3vw, 36px); line-height: 1.6; margin-top: 16px; }
.news-article p { white-space: pre-line; }
.news-article > .text-link { display: inline-block; margin-top: 40px; }
@media (max-width: 699px) {
  .news-row { grid-template-columns: minmax(0, 1fr) 24px; gap: 12px; }
  .news-arrow { grid-column: 2; grid-row: 1 / 3; }
}

/* 法人向けサービスは写真を使わず、見出しと説明で比較できる一覧にする。 */
.corporate-services article, .corporate-services article:nth-child(2), .corporate-services article:nth-child(3) { background: var(--white); border: 1px solid var(--line); border-radius: 18px; }
.corporate-services article > div { padding: 30px; }
.service-number { display: block; color: var(--main); font: 500 28px/1 var(--en); margin-bottom: 26px; }
.corporate-services p { font-size: 14px; line-height: 1.9; }

/* ===== 下層ページ共通（2026-10-22 トップの決定版に合わせた見た目） ===== */
/* ページ見出し: 淡い色面を左右に置き、見出しは濃い紫・説明は小さく薄く */
.page-heading { padding: 132px 0 40px; }
.page-heading::before { width: 20vw; height: 17vw; right: -4vw; top: 40px; background: #EADAF6; }
.page-heading::after { display: block; width: 10vw; height: 9vw; left: -3vw; right: auto; top: 140px; bottom: auto; background: #FCEBC4; }
.page-heading .container, .page-heading .reading-width { position: relative; z-index: 1; }
.breadcrumb { margin-bottom: 22px; font-size: 13px; color: var(--muted); }
.page-heading h1 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.45; }
.page-heading .container > p:not(.eyebrow) { margin-top: 12px; color: var(--muted); font-size: 15px; }
.page-body { padding: 24px 0 96px; }
.reading-width { max-width: 860px; font-size: 15px; line-height: 2; }
.reading-width h2 { margin: 56px 0 18px; padding: 0 0 0; border-bottom: 0; color: var(--heading); font-size: clamp(21px, 2.2vw, 26px); letter-spacing: .02em; }
.reading-width h3 { color: var(--primary-ink, #7A1F9C); }
.reading-width table { font-size: 14px; border-top: 1px solid #E4DFE8; }
.reading-width th, .reading-width td { padding: 16px; border-bottom: 1px solid #E4DFE8; }
.reading-width th { background: #F7F1FB; color: var(--heading); }
/* 対応エリア: 首都圏は淡い紫、札幌は淡い緑のカード。地域名は紫の小見出し */
.area-box { padding: clamp(24px, 3vw, 36px); border-radius: 32px; background: #DCEFE3; }
.area-box.featured { background: #EADAF6; }
.area-box h3 { color: var(--heading); font-size: 21px; }
.area-column h4 { color: #7A1F9C; font-size: 15px; }
.area-column p { font-size: 14px; }
.area-note { color: var(--muted); font-size: 13px; }
.section-title p { color: var(--muted); }
/* お問い合わせ: 淡い紫のパネルに大きめの予約ボタン、相談前の案内はリンク付きの短い一覧 */
.contact-form-panel { padding: clamp(28px, 4vw, 44px); border-radius: 32px; background: #EADAF6; text-align: center; }
.contact-form-panel h2 { margin-top: 10px; }
.contact-form-panel .pill { min-height: 56px; padding: 0 32px; font-size: 16px; }
.contact-form-panel .eyebrow, .reading-width .eyebrow { color: var(--main); font: 600 13px/1 var(--en); letter-spacing: .16em; }
.contact-help { padding-top: 36px; }
.contact-help h2 { margin-top: 0; }
/* お知らせ一覧: トップと同じ、日付と見出しを区切り線で並べる行 */
.news-entry, .news-entry:first-of-type { padding: 20px 4px; border-color: #E4DFE8; }
.news-entry .news-row time, .news-row time { color: #7A1F9C; font: 600 14px/1 var(--en); }
.news-title { color: var(--heading); font-size: 16px; }
/* 行全体が記事へのリンク。矢印はトップのお知らせと同じ小さな「›」にして、押せることだけを控えめに示す */
.news-arrow { font-size: 0; justify-self: end; }
.news-arrow::after { content: '›'; color: var(--main); font-size: 20px; line-height: 1; }
.news-article time { color: #7A1F9C; font: 600 14px/1 var(--en); }
.news-article-title { color: var(--heading); }
.news-article > .text-link { margin-top: 48px; }
/* お知らせ一覧は本文リンクの下線を付けず、ほかの下層ページと同じ白地にする */
.reading-width a.news-entry:not(.button):not(.pill):not(.text-link), .reading-width .breadcrumb a:not(.button):not(.pill):not(.text-link) { color: inherit; text-decoration: none; }
.news-page .page-heading, .news-page .page-body { background: none; }
/* 会社概要: 元の構成のまま、ミッションの囲みとプロフィールを淡い紫に、強調は太字だけで落ち着かせる */
.intro-panel { border-radius: 28px; background: #F7F1FB; }
.intro-panel h2 { line-height: 1.7; }
.founder-story .highlight { color: var(--heading); font-weight: 700; }
.founder-profile { border-radius: 28px; background: #F7F1FB; }
.founder-profile-grid > img { border-radius: 24px; }
/* 規約・特商法: 本文は変えず、見出しと表の線だけ揃える */
.terms-article h2 { font-size: clamp(18px, 1.9vw, 21px); }
@media (max-width: 899px) {
  .page-heading { padding: 96px 0 28px; }
  .page-heading h1 { font-size: 26px; }
  .page-heading::before { width: 36vw; height: 30vw; top: 70px; }
  .page-heading::after { width: 20vw; height: 18vw; top: 120px; }
  .page-body { padding-bottom: 72px; }
  .reading-width { font-size: 14.5px; }
}