/* 沖縄科学教材社 商品・サービス案内
   色・余白は :root の変数でまとめて管理。学校ページは青、保育ページは橙が差し色。 */
:root {
  --ink: #1d2733;
  --ink-2: #4a5663;
  --line: #dde3ea;
  --bg: #ffffff;
  --bg-tint: #f3f7fb;
  --brand: #1f6fb2;
  --brand-dark: #154f80;
  --accent: #1f6fb2;
  --accent-soft: #e6f0fa;
  --school: #1f6fb2;
  --school-soft: #e6f0fa;
  --nursery: #d9692a;
  --nursery-soft: #fdf0e6;
  --green: #2f8f5b;
  --line-green: #06c755;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(20, 40, 60, .06), 0 4px 14px rgba(20, 40, 60, .06);
  --wrap: 1080px;
  --font: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", Meiryo, sans-serif;
}
html[data-audience="nursery"] { --accent: var(--nursery); --accent-soft: var(--nursery-soft); --bg-tint: #fdf7f1; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.8; font-size: 16px; padding-bottom: 64px; }
@media (min-width: 900px) { body { padding-bottom: 0; } }
img, svg { max-width: 100%; height: auto; }
a { color: var(--brand); }
h1, h2, h3 { line-height: 1.45; margin: 0; }
p { margin: 0 0 .9em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }
:focus-visible { outline: 3px solid #f2b400; outline-offset: 2px; }

/* ---- ヘッダー ---- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 700; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name { font-weight: 700; font-size: 15px; }
.brand-sub { font-size: 12px; color: var(--ink-2); }
.gnav-toggle summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.gnav-toggle summary::-webkit-details-marker { display: none; }
.gnav-bars, .gnav-bars::before, .gnav-bars::after { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; }
.gnav-bars::before, .gnav-bars::after { content: ""; position: absolute; left: 0; }
.gnav-bars::before { top: -6px; } .gnav-bars::after { top: 6px; }
.gnav-pc { display: none; }
.gnav-toggle .gnav-list { list-style: none; margin: 0; padding: 8px; position: absolute; right: 12px; top: 58px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); min-width: 240px; }
.gnav-list a { display: block; padding: 12px 14px; text-decoration: none; color: var(--ink); border-radius: 8px; font-weight: 600; }
.gnav-list a:hover, .gnav-list a[aria-current] { background: var(--accent-soft); }
.gnav-official a { color: var(--ink-2); font-weight: 400; font-size: 14px; border-top: 1px solid var(--line); border-radius: 0; margin-top: 4px; }
@media (min-width: 900px) {
  .gnav-toggle { display: none; }
  .gnav-pc { display: block; }
  .gnav-pc .gnav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
  .gnav-pc .gnav-list a { padding: 8px 12px; font-size: 14px; }
  .gnav-pc .gnav-official a { border: 0; margin: 0; border-left: 1px solid var(--line); border-radius: 0; }
}

/* ---- パンくず ---- */
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 0 0; margin: 0; font-size: 13px; color: var(--ink-2); }
.breadcrumb li + li::before { content: "›"; margin-right: 4px; color: #9aa6b2; }
.breadcrumb a { color: var(--ink-2); }

/* ---- ヒーロー ---- */
.hero { background: linear-gradient(180deg, var(--accent-soft), #fff); padding: 28px 0 32px; }
.hero-top { padding: 36px 0 40px; }
.hero-inner { display: grid; gap: 24px; align-items: center; }
.hero h1 { font-size: clamp(24px, 6.2vw, 40px); letter-spacing: .01em; }
.hero-lead { margin-top: 14px; font-size: clamp(15px, 3.9vw, 18px); color: var(--ink-2); }
.hero-note { margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.hero-fig { margin: 0; }
@media (max-width: 899px) { .hero-top .hero-fig { display: none; } }
.hero-fig figcaption { font-size: 12px; color: var(--ink-2); text-align: center; }
@media (min-width: 900px) { .hero-inner { grid-template-columns: 1.3fr 1fr; } .hero-top .hero-inner { grid-template-columns: 1.4fr 1fr; } }
.eyebrow { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .06em; margin-bottom: 6px; }

/* ---- ボタン ---- */
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px; border-radius: 12px; font-weight: 700; text-decoration: none; border: 2px solid transparent; line-height: 1.35; text-align: left; }
.btn small { display: block; font-size: 12px; font-weight: 400; opacity: .92; }
.btn-lg { min-height: 56px; padding: 12px 20px; font-size: 16px; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-outline { background: #fff; color: var(--brand); border-color: var(--brand); }
.btn-line { background: var(--line-green); color: #fff; }
.btn-line:hover { background: #05a847; }
.btn-text { padding: 6px 0; min-height: 0; color: var(--brand); flex-direction: row-reverse; }
@media (max-width: 599px) { .hero .btn-row .btn, .consult-actions .btn { width: 100%; } }

/* ---- セクション ---- */
.sec { padding: 40px 0; }
.sec-tint { background: var(--bg-tint); }
.sec-head { margin-bottom: 20px; }
.sec-head h2 { font-size: clamp(21px, 5.2vw, 28px); }
.sec-lead { margin-top: 10px; color: var(--ink-2); }
.sec-more { margin-top: 16px; }
.prose { max-width: 760px; }
.note { font-size: 13px; color: var(--ink-2); background: var(--bg-tint); border-radius: 10px; padding: 10px 14px; margin: 16px auto; }
.footnote { font-size: 13px; color: var(--ink-2); margin-top: 14px; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 999px; padding: 1px 8px; vertical-align: 2px; }

/* ---- 2入口 ---- */
.entries { display: grid; gap: 14px; }
@media (min-width: 760px) { .entries { grid-template-columns: 1fr 1fr; } }
.entry { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 18px; text-decoration: none; color: var(--ink); border: 2px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.entry:hover { transform: translateY(-1px); }
.entry-school { border-color: #b9d4ee; background: linear-gradient(160deg, var(--school-soft), #fff 60%); }
.entry-nursery { border-color: #f3cfb4; background: linear-gradient(160deg, var(--nursery-soft), #fff 60%); }
.entry-icon .icon { width: 40px; height: 40px; }
.entry-school .entry-icon, .entry-school .entry-label, .entry-school .entry-go { color: var(--school); }
.entry-nursery .entry-icon, .entry-nursery .entry-label, .entry-nursery .entry-go { color: var(--nursery); }
.entry-label { font-size: 13px; font-weight: 700; }
.entry-title { font-size: 22px; font-weight: 700; line-height: 1.4; }
.entry-text { color: var(--ink-2); font-size: 15px; }
.entry-go { margin-top: 6px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip { font-size: 12.5px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }

/* ---- カテゴリカード ---- */
.card-grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .card-grid.grid-3 { grid-template-columns: repeat(3, 1fr); } }
.cc { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); text-decoration: none; }
.cc-link:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.cc-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); flex: none; }
.cc-icon .icon { width: 24px; height: 24px; }
.cc-body { display: flex; flex-direction: column; flex: 1; }
.cc-title { font-weight: 700; font-size: 16.5px; }
.cc-text { font-size: 14px; color: var(--ink-2); line-height: 1.7; margin-top: 2px; }
.cc-arrow { color: var(--accent); align-self: center; }

/* ---- 目的別グループ・商品例 ---- */
.jump { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; -webkit-overflow-scrolling: touch; }
.jump a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600; }
.jump a .icon { color: var(--accent); }
@media (min-width: 900px) { .jump { flex-wrap: wrap; overflow: visible; } }
.groups { display: grid; gap: 14px; }
@media (min-width: 820px) { .groups { grid-template-columns: 1fr 1fr; } }
.group { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.group-h { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.group-h .icon { color: var(--accent); width: 28px; height: 28px; }
.group-text { color: var(--ink-2); font-size: 15px; margin: 8px 0 0; }
.group-sub { font-size: 12px; font-weight: 700; color: var(--ink-2); margin: 12px 0 6px; letter-spacing: .08em; }
.group-cta { margin: 12px 0 0; font-size: 14px; }
.group-cta a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--green); }
.pc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pc { background: var(--bg-tint); border-radius: 10px; padding: 6px 12px; font-size: 14px; display: flex; flex-direction: column; }
.pc-name { font-weight: 600; }
.pc-note, .pc-meta { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.pc-has-img { padding: 0 0 10px; overflow: hidden; width: calc(50% - 3px); }
.pc-has-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 6px; }
.pc-has-img span { padding: 0 10px; }
.pc-list-wide { gap: 8px; }
.pc-list-wide .pc { padding: 10px 14px; }

/* ---- チェックリスト・手順 ---- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 700px) { .checklist { grid-template-columns: 1fr 1fr; } }
.checklist li { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-weight: 600; }
.checklist .icon { color: var(--accent); margin-top: 3px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { display: flex; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.step-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; flex: none; }
.step-body { display: flex; flex-direction: column; font-size: 14.5px; }
.step-body span { color: var(--ink-2); font-size: 14px; }

/* ---- 文章＋図 ---- */
.feature { display: grid; gap: 20px; align-items: center; }
@media (min-width: 860px) { .feature { grid-template-columns: 1.2fr 1fr; } }
.feature-fig { margin: 0; }
.feature-fig figcaption { font-size: 12px; color: var(--ink-2); text-align: center; margin-top: 4px; }
.points { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.points li { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; }
.points .icon { color: var(--accent); margin-top: 4px; }

/* ---- 相談ボックス ---- */
.consult { background: linear-gradient(135deg, #184d7c, #1f6fb2); color: #fff; padding: 40px 0; }
.consult-soft { background: linear-gradient(135deg, #b9541d, #d9692a); }
.consult-h { font-size: clamp(20px, 5vw, 26px); }
.consult-text { margin-top: 10px; opacity: .95; }
.consult-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.consult .btn-primary { background: #fff; color: var(--brand-dark); }
.consult .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .8); }
.consult-est { margin: 16px 0 0; }
.consult-est a { color: #fff; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }

/* ---- 問い合わせ方法 ---- */
.methods { display: grid; gap: 12px; }
@media (min-width: 760px) { .methods { grid-template-columns: 1fr 1fr; } }
.method { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.method h3 { display: flex; gap: 8px; align-items: center; font-size: 18px; margin-bottom: 8px; }
.method h3 .icon { color: var(--accent); width: 26px; height: 26px; }
.method-good { font-size: 13.5px; color: var(--green); font-weight: 700; }
.method .btn-row { margin-top: 10px; }

/* ---- FAQ ---- */
.faq { display: grid; gap: 8px; max-width: 820px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.faq-item summary { cursor: pointer; padding: 14px 16px; font-weight: 700; list-style: none; position: relative; padding-right: 40px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 16px; top: 12px; font-size: 20px; color: var(--accent); }
.faq-item[open] summary::after { content: "−"; }
.faq-a { padding: 0 16px 14px; color: var(--ink-2); }

/* ---- 事例 ---- */
.cases { display: grid; gap: 14px; }
.case { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.case-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.case-photos figure { margin: 0; } .case-photos img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.case-photos figcaption { font-size: 12px; text-align: center; }
.case-dl { display: grid; grid-template-columns: 7em 1fr; gap: 4px 10px; font-size: 14px; margin: 0; }
.case-dl dt { color: var(--ink-2); } .case-dl dd { margin: 0; }

/* ---- イラスト ---- */
.illust { display: block; width: 100%; height: auto; }
.il-tag { font-size: 13px; font-weight: 700; fill: #fff; }
.il-tag-bg { fill: #5b6772; }
.il-bg { fill: #f2f7fc; } html[data-audience="nursery"] .il-bg { fill: #fff6ee; }
.il-b1 { fill: #cfe2f5; } .il-b2 { fill: #1f6fb2; } .il-b3 { fill: #fde2cc; } .il-b4 { fill: #d9692a; }
.il-b1-s { fill: none; stroke: #1f6fb2; stroke-width: 6; }
.il-w { fill: #fff; } .il-accent { fill: #2f8f5b; }
.il-line-w { stroke: #fff; stroke-width: 6; stroke-linecap: round; }
.il-dash { fill: none; stroke: #9bb3c9; stroke-width: 3; stroke-dasharray: 6 6; }
.il-ground { fill: #dcecd6; } .il-tree { fill: #8cc58f; } .il-trunk { fill: #9a7353; }
.il-slide { stroke: #d9692a; stroke-width: 10; stroke-linecap: round; }
.il-rung { stroke: #1f6fb2; stroke-width: 4; }
.il-sand { fill: #f1dcae; } .il-card { fill: #fff; stroke: #c9d6e2; stroke-width: 2; }
.il-line { stroke: #9aa9b7; stroke-width: 4; stroke-linecap: round; fill: none; }
.il-small { font-size: 13px; fill: #4a5663; font-weight: 700; }
.il-ring { fill: #fff; stroke: #1f6fb2; stroke-width: 12; } .il-handle { stroke: #1f6fb2; stroke-width: 16; stroke-linecap: round; }
.il-q { font-size: 56px; font-weight: 700; fill: #d9692a; }

/* ---- フッター ---- */
.site-footer { background: #1d2733; color: #d8dee5; padding: 36px 0 16px; margin-top: 0; font-size: 14px; }
.site-footer a { color: #fff; }
.footer-grid { display: grid; gap: 22px; }
@media (min-width: 820px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-name { font-weight: 700; font-size: 16px; color: #fff; }
.footer-note { font-size: 13px; color: #aab4bf; }
.footer-h { font-weight: 700; color: #fff; margin-bottom: 6px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-copy { font-size: 12px; color: #8995a1; margin-top: 20px; }

/* ---- スマホ下部の相談バー ---- */
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -2px 10px rgba(0, 0, 0, .06); padding-bottom: env(safe-area-inset-bottom); }
.mobile-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; font-size: 12px; font-weight: 700; text-decoration: none; color: var(--ink); }
.mobile-bar .mb-line { color: #05a847; } .mobile-bar .mb-tel { color: var(--brand); } .mobile-bar .mb-contact { background: var(--brand); color: #fff; }
@media (min-width: 900px) { .mobile-bar { display: none; } }

/* =========================================================
   ポップテーマ（2026-09-30 島袋「堅い・見にくい→ポップに」）
   上の基本スタイルを上書きする。カードの色は --c（主色）/ --cs（薄い色）で順番に変わる。
   ========================================================= */
:root {
  --ink: #2b2d42;
  --ink-2: #5c607a;
  --line: #ece6da;
  --bg: #fffdf7;
  --bg-tint: #fff4dc;
  --brand: #2e8ae6;
  --brand-dark: #1d6cc0;
  --pop-yellow: #ffd23f;
  --pop-pink: #ff6b9a;
  --pop-green: #2fbf71;
  --pop-orange: #ff8a3d;
  --pop-purple: #8e6cf0;
  --pop-sky: #2e8ae6;
  --radius: 22px;
  --shadow: 0 6px 0 rgba(43, 45, 66, .06), 0 10px 24px rgba(43, 45, 66, .06);
  --font: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", Meiryo, sans-serif;
}
html[data-audience="school"] { --accent: var(--pop-sky); --accent-soft: #e2f0ff; --bg-tint: #eef7ff; }
html[data-audience="nursery"] { --accent: var(--pop-orange); --accent-soft: #ffe9d6; --bg-tint: #fff1e3; }
body { background: var(--bg); font-weight: 500; letter-spacing: .02em; }
h1, h2, h3, .cc-title, .entry-title, .btn, .brand-name { font-weight: 800; }

/* ヘッダー */
.site-header { background: rgba(255, 253, 247, .96); border-bottom: 3px dashed #f1e6cf; }
.brand-mark { border-radius: 50%; background: var(--pop-yellow); color: var(--ink); box-shadow: 0 3px 0 #e0b21c; }
.gnav-pc .gnav-list a { border-radius: 999px; }
.gnav-pc .gnav-list a:hover, .gnav-pc .gnav-list a[aria-current] { background: #fff1c2; }

/* ヒーロー：水玉＋波の区切り */
.hero { position: relative; padding-bottom: 60px; background:
  radial-gradient(circle at 6% 22%, rgba(255, 210, 63, .5) 0 56px, transparent 57px),
  radial-gradient(circle at 94% 10%, rgba(255, 107, 154, .28) 0 80px, transparent 81px),
  radial-gradient(circle at 86% 92%, rgba(47, 191, 113, .25) 0 46px, transparent 47px),
  linear-gradient(180deg, var(--accent-soft), var(--bg)); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 28px; background-size: 120px 28px; background-repeat: repeat-x;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V14C20 0 40 0 60 14s40 14 60 0v14z' fill='%23fffdf7'/%3E%3C/svg%3E"); }
.hero h1 { line-height: 1.4; }
.hero .eyebrow, .sec-head .eyebrow { display: table; margin-bottom: 10px; background: var(--accent); color: #fff; border-radius: 999px; padding: 3px 14px; font-size: 12.5px; }

/* 見出し：マーカー風の下線 */
.sec-head h2 { display: inline; background: linear-gradient(transparent 62%, #ffe27a 62%); padding: 0 2px; }
.sec-tint { background: var(--bg-tint); border-radius: 36px 36px 0 0; }

/* ボタン：丸くてぷっくり */
.btn { border-radius: 999px; box-shadow: 0 4px 0 rgba(0, 0, 0, .15); transition: transform .08s; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .15); }
.btn-primary { background: var(--pop-sky); }
.btn-primary:hover { background: var(--brand-dark); }
.btn-outline { border-width: 3px; }
.btn-text { box-shadow: none; }

/* カードごとに色を変える */
:is(.card-grid, .groups, .methods, .checklist) > :nth-child(6n+1) { --c: var(--pop-sky); --cs: #e2f0ff; }
:is(.card-grid, .groups, .methods, .checklist) > :nth-child(6n+2) { --c: var(--pop-orange); --cs: #ffe9d6; }
:is(.card-grid, .groups, .methods, .checklist) > :nth-child(6n+3) { --c: var(--pop-green); --cs: #dcf6e8; }
:is(.card-grid, .groups, .methods, .checklist) > :nth-child(6n+4) { --c: var(--pop-pink); --cs: #ffe3ec; }
:is(.card-grid, .groups, .methods, .checklist) > :nth-child(6n+5) { --c: var(--pop-purple); --cs: #ece6ff; }
:is(.card-grid, .groups, .methods, .checklist) > :nth-child(6n+6) { --c: #d69e00; --cs: #fff3c4; }

.cc { border: 3px solid var(--cs, var(--line)); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .12s; }
.cc-link:hover { border-color: var(--c); transform: translateY(-3px); }
.cc-icon { width: 56px; height: 56px; border-radius: 50% 45% 55% 48%; background: var(--cs, var(--accent-soft)); color: var(--c, var(--accent)); }
.cc-icon .icon { width: 30px; height: 30px; }
.cc-arrow { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--cs, var(--accent-soft)); color: var(--c, var(--accent)); }
.badge { background: var(--pop-pink); }

/* 2つの入口 */
.entry { border-width: 3px; border-radius: 28px; box-shadow: 0 8px 0 rgba(43, 45, 66, .07); }
.entry-school { border-color: #9cc9f5; background: linear-gradient(160deg, #d9ecff, #fff 70%); }
.entry-nursery { border-color: #ffc59b; background: linear-gradient(160deg, #ffe3cc, #fff 70%); }
.entry-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .06); }
.entry-label { display: inline-block; width: fit-content; color: #fff !important; border-radius: 999px; padding: 0 12px; }
.entry-school .entry-label { background: var(--pop-sky); }
.entry-nursery .entry-label { background: var(--pop-orange); }
.entry-go { background: #fff; border-radius: 999px; padding: 8px 16px; width: fit-content; box-shadow: 0 3px 0 rgba(0, 0, 0, .08); }
.chip { border: 2px solid #fff; background: rgba(255, 255, 255, .85); font-weight: 700; }

/* 分類・商品例 */
.jump a { border: 2px solid var(--line); font-weight: 700; }
.jump a:hover { border-color: var(--accent); }
.group { border: 3px solid var(--cs, var(--line)); border-radius: var(--radius); box-shadow: var(--shadow); }
.group-h .icon { color: var(--c, var(--accent)); background: var(--cs, var(--accent-soft)); border-radius: 50%; padding: 7px; width: 42px; height: 42px; }
.pc { background: var(--cs, var(--bg-tint)); border-radius: 999px; padding: 6px 14px; }
.pc:has(.pc-note) { border-radius: 16px; }
.group-cta a { background: #e3f9ec; padding: 6px 14px; border-radius: 999px; text-decoration: none; }

/* 相談例：ふきだし */
.checklist li { border: 0; border-radius: 20px 20px 20px 6px; background: var(--cs, #fff); box-shadow: 0 4px 0 rgba(43, 45, 66, .05); }
.checklist .icon { color: var(--c, var(--accent)); }

/* 手順・説明カード・FAQ */
.steps li { border: 3px solid var(--line); border-radius: var(--radius); }
.steps li:nth-child(4n+1) .step-n { background: var(--pop-sky); }
.steps li:nth-child(4n+2) .step-n { background: var(--pop-orange); }
.steps li:nth-child(4n+3) .step-n { background: var(--pop-green); }
.steps li:nth-child(4n+4) .step-n { background: var(--pop-pink); }
.step-n { width: 40px; height: 40px; font-size: 18px; }
.method { border: 3px solid var(--cs, var(--line)); border-radius: var(--radius); }
.method h3 .icon { color: var(--c, var(--accent)); }
.faq-item { border: 3px solid var(--line); border-radius: 18px; }
.faq-item summary::before { content: "Q"; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; background: var(--pop-yellow); color: var(--ink); font-size: 14px; }
.note { border-radius: 16px; border: 2px dashed #f1d58a; background: #fffbea; }

/* 相談ボックス：明るく */
.consult { border-radius: 36px 36px 0 0; margin-top: 24px; background:
  radial-gradient(circle at 10% 18%, rgba(255, 255, 255, .18) 0 40px, transparent 41px),
  radial-gradient(circle at 92% 82%, rgba(255, 255, 255, .15) 0 70px, transparent 71px),
  linear-gradient(135deg, #2e8ae6, #5aa9f2); }
.consult-soft { background:
  radial-gradient(circle at 10% 18%, rgba(255, 255, 255, .2) 0 40px, transparent 41px),
  radial-gradient(circle at 92% 82%, rgba(255, 255, 255, .15) 0 70px, transparent 71px),
  linear-gradient(135deg, #ff8a3d, #ffb35c); }
.consult-h { text-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.consult .btn-primary { color: var(--brand-dark); }
.consult-est a { background: rgba(255, 255, 255, .22); padding: 8px 16px; border-radius: 999px; text-decoration: none; }

/* フッター・スマホ下部バー */
.site-footer { background: #2b2d42; }
.mobile-bar { border-top: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -4px 16px rgba(0, 0, 0, .1); overflow: hidden; }
.mobile-bar .mb-contact { background: var(--pop-orange); }

/* イラストの色もポップに */
.il-bg { fill: #fff6d8; } html[data-audience="nursery"] .il-bg { fill: #ffeede; }
.il-b1 { fill: #bfe0ff; } .il-b2 { fill: #2e8ae6; } .il-b3 { fill: #ffd9b8; } .il-b4 { fill: #ff8a3d; }
.il-accent { fill: #ff6b9a; } .il-ground { fill: #c9efd6; } .il-tree { fill: #5fcf8b; }
.il-slide { stroke: #ff6b9a; } .il-sand { fill: #ffe08a; } .il-q { fill: #ff8a3d; }
.illust { border-radius: 28px; }

/* =========================================================
   背景デザイン（2026-09-30 島袋「背景が単調で安っぽい」）
   ・ページ全体：学校＝方眼ノート、保育＝水玉、共通＝点々の紙
   ・ヒーロー：やわらかい色のにじみ＋落書き風かざり（assets/bg/doodles-hero.svg）＋下端の波
   ・色つきセクション：上下を波形で区切り、白い水玉を重ねる
   ・相談ボックス・フッター：上端を波形に
   かざりは pointer-events:none で、文字やボタンの操作をじゃましない。
   ========================================================= */
main { overflow-x: clip; }
body { background-color: var(--bg); background-image: radial-gradient(rgba(170, 140, 90, .16) 1.2px, transparent 1.7px); background-size: 22px 22px; }
html[data-audience="school"] body { background-image: linear-gradient(rgba(46, 138, 230, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 138, 230, .075) 1px, transparent 1px); background-size: 26px 26px; }
html[data-audience="nursery"] body { background-image: radial-gradient(rgba(255, 138, 61, .16) 2.2px, transparent 2.8px), radial-gradient(rgba(47, 191, 113, .13) 2.2px, transparent 2.8px); background-size: 36px 36px; background-position: 0 0, 18px 18px; }

/* ヒーロー */
.hero { overflow: hidden; padding-bottom: 64px; background:
  radial-gradient(55% 75% at 100% 0%, rgba(255, 107, 154, .22), transparent 65%),
  radial-gradient(45% 65% at 0% 100%, rgba(255, 210, 63, .32), transparent 65%),
  radial-gradient(35% 55% at 72% 105%, rgba(47, 191, 113, .18), transparent 65%),
  linear-gradient(180deg, var(--accent-soft), #fffaf0);
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 23px) no-repeat, url("/assets/bg/wave-down.svg") bottom / 160px 24px repeat-x;
          mask: linear-gradient(#000, #000) top / 100% calc(100% - 23px) no-repeat, url("/assets/bg/wave-down.svg") bottom / 160px 24px repeat-x; }
.hero::after { content: none; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("/assets/bg/doodles-hero.svg") center top / 1200px auto no-repeat; }
.hero > .wrap { position: relative; z-index: 1; }
/* スマホ：文字にかからないよう、右上の角と下の余白だけにかざりを置く */
@media (max-width: 760px) { .hero::before {
  background: url("/assets/bg/doodles-sp-top.svg") right 8px top 6px / 104px auto no-repeat, url("/assets/bg/doodles-sp-bottom.svg") center bottom 22px / min(360px, 96%) auto no-repeat; } }

/* セクション共通：かざりを背面に */
.sec { position: relative; }
.sec > .wrap { position: relative; z-index: 1; }
.sec:not(.sec-tint)::before { content: ""; position: absolute; pointer-events: none; width: 320px; height: 320px; border-radius: 50%; top: 10px; right: -130px;
  background: radial-gradient(circle, rgba(255, 210, 63, .28), transparent 68%); }
.sec:not(.sec-tint):nth-of-type(even)::before { right: auto; left: -140px; top: auto; bottom: 0; background: radial-gradient(circle, rgba(46, 138, 230, .16), transparent 68%); }
html[data-audience="nursery"] .sec:not(.sec-tint):nth-of-type(even)::before { background: radial-gradient(circle, rgba(255, 107, 154, .16), transparent 68%); }

/* 色つきセクション：波で区切る＋白い水玉 */
.sec-tint { border-radius: 0; margin: 28px 0; background-color: var(--bg-tint);
  background-image: radial-gradient(circle at 94% 14%, rgba(255, 255, 255, .7) 0 64px, transparent 65px), radial-gradient(circle at 4% 88%, rgba(255, 255, 255, .6) 0 44px, transparent 45px), radial-gradient(rgba(255, 255, 255, .8) 1.6px, transparent 2.1px);
  background-size: auto, auto, 20px 20px; }
.sec-tint::before, .sec-tint::after { content: ""; position: absolute; left: 0; right: 0; height: 24px; pointer-events: none; background-color: var(--bg-tint); }
.sec-tint::before { top: -23px; -webkit-mask: url("/assets/bg/wave.svg") 0 0 / 160px 24px repeat-x; mask: url("/assets/bg/wave.svg") 0 0 / 160px 24px repeat-x; }
.sec-tint::after { bottom: -23px; -webkit-mask: url("/assets/bg/wave-down.svg") 40px 0 / 160px 24px repeat-x; mask: url("/assets/bg/wave-down.svg") 40px 0 / 160px 24px repeat-x; }

/* 2つの入口：方眼ノート／水玉の紙 */
.entry-school { background-image: linear-gradient(rgba(46, 138, 230, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 138, 230, .1) 1px, transparent 1px), linear-gradient(160deg, #d9ecff, #fff 72%); background-size: 18px 18px, 18px 18px, auto; }
.entry-nursery { background-image: radial-gradient(rgba(255, 138, 61, .2) 2px, transparent 2.6px), linear-gradient(160deg, #ffe3cc, #fff 72%); background-size: 20px 20px, auto; }

/* 相談ボックス：上端を波に＋雲・星のかざり */
.consult { position: relative; overflow: hidden; border-radius: 0; margin-top: 40px; padding-top: 64px;
  -webkit-mask: url("/assets/bg/wave.svg") 0 0 / 160px 24px repeat-x, linear-gradient(#000, #000) 0 23px / 100% 100% no-repeat;
          mask: url("/assets/bg/wave.svg") 0 0 / 160px 24px repeat-x, linear-gradient(#000, #000) 0 23px / 100% 100% no-repeat; }
.consult::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("/assets/bg/doodles-consult.svg") center / 1200px auto no-repeat; }
.consult > .wrap { position: relative; z-index: 1; }

/* フッター：上端を波に */
.site-footer { position: relative; padding-top: 56px; background-color: #2b2d42;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1.4px, transparent 1.9px); background-size: 22px 22px;
  -webkit-mask: url("/assets/bg/wave.svg") 60px 0 / 160px 24px repeat-x, linear-gradient(#000, #000) 0 23px / 100% 100% no-repeat;
          mask: url("/assets/bg/wave.svg") 60px 0 / 160px 24px repeat-x, linear-gradient(#000, #000) 0 23px / 100% 100% no-repeat; }
.consult + .site-footer, main:has(> .consult:last-child) + .site-footer { margin-top: -24px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .entry:hover, .cc-link:hover { transform: none; } .btn { transition: none; } }