/* =====================
   あじさい保育園 styles.css
   - テーマカラーやスペーシングはCSS変数で一元管理
   - 600px未満で1カラム化
   ===================== */
:root {
    --brand: #6a88d7; /* メイン（あじさい系の青紫） */
    --brand-acc: #8fb4ff; /* アクセント */
    --ink: #222; /* 文字色 */
    --muted: #666; /* 補助文字 */
    --bg: #fff;
    --bg-alt: #f7f8fc; /* 交互背景 */
    --border: #e6e8f0;
    --radius: 16px;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    --container: 1120px;
    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 72px;
}

/* ベース */
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: visible;
}
body {
    margin: 0;
    font-family: system-ui, -apple-system, 'Hiragino Kaku Gothic ProN', Meiryo,
        sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.8;
    overflow-x: hidden;
    overflow-y: visible;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}
a {
    color: var(--brand);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
h1,
h2,
h3 {
    line-height: 1.3;
    margin: 0 0 var(--space-3);
}
h2 {
    font-size: clamp(22px, 2.6vw, 28px);
}
h3 {
    font-size: clamp(18px, 2.1vw, 22px);
}
p {
    margin: 0 0 var(--space-3);
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.container {
    width: min(100%, var(--container));
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* ボタン */
.btn {
    display: inline-block;
    background: var(--brand);
    color: #fff;
    padding: 12px 18px;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: var(--shadow);
    border: 1px solid transparent;
}
.btn:hover {
    opacity: 0.9;
    text-decoration: none;
}
.btn.ghost {
    background: #fff;
    color: var(--brand);
    border-color: var(--brand);
    box-shadow: none;
}

/* ================= ヘッダー（固定） ================= */
.site-header {
    position: sticky;
    top: 0;
    border-top: 1px solid transparent;
    z-index: 1000;
    backdrop-filter: saturate(180%) blur(12px);
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid var(--border);
    padding-top: 30px;
    padding-bottom: 30px;
    background: rgba(255, 255, 255, 0.9); /* 背景は不透明寄りで */
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    color: var(--ink);
    width: 125px;
}

.icon {
    width: 80px;
    height: 80px;
}

.site-header .container {
    padding-right: 10px; /* デフォルトは var(--space-4) = 24px など */
}

.site-header .header-inner > img {
    margin-left: -50px; /* 少し左へ寄せる */
}

.global-nav ul {
    display: flex;
    gap: 18px;
    align-items: center;
}
.global-nav .btn {
    padding: 10px 14px;
}
.nav-toggle {
    display: none;
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

/* ========== HERO & SLIDER ========== */

/* ヒーローセクション全体 */
.hero {
    position: relative;
    min-height: 85vh; /* ヒーローの高さ（必要に応じて調整） */
    display: grid;
    place-items: center;
    color: #0b1638;
}

/* ヒーロー内テキスト */
.hero h1 {
    position: absolute;
    bottom: -150px; /* ← 下からの余白（%やpxで調整可） */
    left: -150px;
    font-size: clamp(28px, 4.2vw, 44px);
    margin-bottom: var(--space-3);
    color: black;
    background-color: white;
    border-radius: 10px;
}
.hero p {
    position: absolute;
    bottom: -200px; /* ← 下からの余白（%やpxで調整可） */
    left: -150px;
    font-size: clamp(15px, 2vw, 18px);
    color: black;
    background-color: white;
    border-radius: 10px;
    margin-bottom: var(--space-4);
}

/* スライダー領域（背景に全面表示） */
.slider-area {
    position: absolute; /* ← hero 全面に敷く */
    inset: 0;
    overflow: hidden;
    background: #000;
    z-index: 0; /* 背景レイヤー */
}

/* 各スライド */
.slider-area .slider-item {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 1.1s ease; /* クロスフェード */
    will-change: opacity;
}

/* 初期表示用（JSが動かなくても1枚目を出す） */
.slider-area .slider-item:first-child {
    opacity: 1 !important;
}

/* 画像フィット */
.slider-area .slider-item picture,
.slider-area .slider-item img {
    width: 100%;
    height: 100%;
    display: block;
}
.slider-area .slider-item img {
    object-fit: cover;
    transform: scale(1); /* ズーム開始値 */
    will-change: transform;
}

/* アクティブ時：表示＋Ken Burns（少しズーム） */
.slider-area .slider-item.is-active {
    opacity: 1;
}
.slider-area .slider-item.is-active img {
    animation: slider-kenburns 8s ease-in-out forwards;
}
@keyframes slider-kenburns {
    0% {
        transform: scale(1) translateZ(0);
    }
    100% {
        transform: scale(1.06) translateZ(0);
    }
}

/* 動きを減らす設定のユーザー配慮 */
@media (prefers-reduced-motion: reduce) {
    .slider-area .slider-item {
        transition: none;
    }
    .slider-area .slider-item img {
        animation: none;
        transform: none;
    }
}

/* ヒーローコピー（テキスト部分） */
.hero .hero-copy {
    position: relative;
    z-index: 2; /* スライドの上に */
    text-align: center;
    color: #fff;
    padding: clamp(40px, 8vw, 100px) 16px;
}

/* 文字を読みやすくする暗幕 */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1; /* スライド(z=0)より上、文字(z=2)より下 */
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.25),
        rgba(0, 0, 0, 0.35)
    );
    pointer-events: none;
}

/* ================= 3ボックス ================= */
.features {
    padding: var(--space-6) 0;
    position: relative;
    margin: 30px 0px;
}

.section-title {
    text-align: center;
    font-size: 2rem;
    letter-spacing: 0.2em;
}
.section-sub-title {
    letter-spacing: 0.2em;
    color: pink;
    text-align: center;
}
.grid-3 {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(3, 1fr);
}
.feature-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-3);
    display: block;
    color: inherit;
    text-decoration: none;
    transition: 0.25s transform, 0.25s box-shadow;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
.feature-image {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: var(--space-3);
}
.feature-image img {
    transition: transform 0.5s ease;
}
.feature-card:hover .feature-image img {
    transform: scale(1.06);
}
/* ホバーで中央にテキストを表示（要望対応） */
.feature-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    opacity: 0;
    transition: 0.3s opacity;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.feature-card:hover .feature-overlay {
    opacity: 1;
}

.feature2 {
    min-height: 55vh; /* 画面全体の高さを確保 */
    display: flex;
    flex-direction: column; /* 中身を縦に積む */
    align-items: center; /* 横方向に中央寄せ */
    text-align: center; /* テキストも中央揃え */
    padding: 40px 20px; /* 上下左右に余白（好みで調整） */
    box-sizing: border-box;
    background-color: #fbf6ff;
}

.title-top {
    max-width: none;
    line-height: 1.5;
    letter-spacing: 0.1em;
    margin: 20px 0;
}

.feature2 .description {
    max-width: 1100px; /* 本文の横幅を制御して読みやすく */
    margin: 0 auto;
    line-height: 2;
    letter-spacing: 0.2em;
}

.feature2 .btn-position {
    margin-top: 24px;
}

.information {
    min-height: 35vh; /* 画面全体の高さを確保 */
    display: flex;
    flex-direction: column; /* 中身を縦に積む */
    align-items: center; /* 横方向に中央寄せ */
    text-align: center; /* テキストも中央揃え */
    padding: 40px 20px; /* 上下左右に余白（好みで調整） */
    box-sizing: border-box;
    background-color: #e0ecf8;
}

/* ================= セクション共通 ================= */
section {
    margin: 30px 0px;
}
.section {
    padding: var(--space-6) 0;
}
.section.alt {
    background: var(--bg-alt);
}
.about-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1.2fr 0.8fr;
}
.checklist li {
    position: relative;
    padding-left: 26px;
    margin: 8px 0;
}
.checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand);
}

/* ================= タイムライン ================= */
.timeline {
    border-left: 3px solid var(--brand-acc);
    margin-left: 14px;
    padding-left: 22px;
}
.timeline li {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: var(--space-3);
    padding: 16px 0;
    border-bottom: 1px dashed var(--border);
}
.timeline time {
    font-weight: 800;
    color: #21356b;
}

/* ピンク色のボタン */

/* ピンク色のボタン */
.btn.pink {
    background: #e91e63; /* ピンク（Material Pink） */
    color: #fff;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: bold;
    display: inline-block;
    border: none;
    box-shadow: 0 4px 10px rgba(233, 30, 99, 0.3);
    transition: all 0.3s ease;
    justify-content: center;
}
.btn-list {
    text-align: center; /* 中央寄せ */
    margin-top: 24px; /* 上に余白（お好みで調整） */
}

.btn-list .btn {
    display: inline-block; /* インライン要素として中央に */
}

/* hover時のアニメーション */
.btn.pink:hover {
    background: #d81b60; /* 少し濃いピンク */
    box-shadow: 0 6px 14px rgba(233, 30, 99, 0.45);
    transform: translateY(-2px); /* 浮き上がる感じ */
    text-decoration: none;
}

/* カード全体を縦レイアウトに */
.feature-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    display: flex;
    flex-direction: column; /* 縦積み */
    text-align: center;
}

/* pタグの後にボタンを配置 */
.feature-card p {
    margin-bottom: 16px;
    flex-grow: 1; /* 本文が短いときもボタンを下に押し出す */
}

.about-btn {
    margin-top: auto; /* 一番下に配置される */
}

.about-pink-btn {
    display: inline-block;
    background: #e91e63;
    color: #fff;
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(233, 30, 99, 0.3);
    transition: all 0.3s ease;
    text-decoration: none;
}

.about-pink-btn:hover {
    background: #d81b60;
    box-shadow: 0 6px 14px rgba(233, 30, 99, 0.45);
    transform: translateY(-2px);
}

/* ================= 年間行事 ================= */
.events-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(4, 1fr);
}
.event {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
}
.event h3 {
    color: #21356b;
}

/* ================= NEWS ================= */
.news-list {
    display: grid;
    gap: 10px;
    margin-top: var(--space-3);
}
.news-list a {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
}
.news-list time {
    color: var(--muted);
    min-width: 96px;
    text-align: right;
}

/* ================= フォト（2×2 → 600px以下で1列） ================= */
.photo-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, 1fr); /* ← 2×2 */
}
.photo figcaption {
    margin-top: 8px;
    color: var(--muted);
    font-size: 14px;
}

/* ================= アクセス ================= */
.access-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr 1fr;
    align-items: start;
}
.map-embed iframe {
    width: 100%;
    height: 320px;
    border: 0;
    border-radius: 12px;
}

/* ================= お問い合わせ ================= */
.contact-form {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
    box-shadow: var(--shadow);
}
.form-row {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}
input,
textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font: inherit;
}
input:focus,
textarea:focus {
    outline: 2px solid var(--brand-acc);
    border-color: transparent;
}

/* ================= フッター ================= */
.site-footer {
    background: #0e1a3f;
    color: #cdd7ff;
    margin-top: var(--space-6);
}
.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px var(--space-4);
}
.to-top {
    color: #cdd7ff;
}

/* ================= レスポンシブ ================= */
@media (max-width: 1024px) {
    .grid-3 {
        grid-template-columns: 1fr 1fr;
    }
    .events-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .about-grid {
        grid-template-columns: 1fr;
    }
    .access-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .header-inner {
        height: 64px;
    }
    .global-nav ul {
        position: absolute;
        right: 16px;
        top: 64px;
        width: calc(100% - 32px);
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 12px;
        flex-direction: column;
        gap: 8px;
        display: none;
    }
    .global-nav ul.open {
        display: flex;
    }
    .nav-toggle {
        display: inline-block;
    }
}
@media (max-width: 600px) {
    /* ✅ 要望：600px未満で1列（ギャラリー・カード） */
    .grid-3 {
        grid-template-columns: 1fr;
    }
    .photo-grid {
        grid-template-columns: 1fr;
    } /* ← 2×2 → 1列に */
    .timeline li {
        grid-template-columns: 74px 1fr;
    }
}

/* アンカー位置のずれ対策：固定ヘッダー分の余白 */
#about,
#life,
#events,
#news,
#gallery,
#access,
#contact {
    scroll-margin-top: 84px;
}

/* ===== ベース ===== */
:root {
    --brand: #6a88d7;
    --ink: #222;
    --muted: #666;
    --bg: #fff;
    --bg-alt: #f7f8fc;
    --border: #e6e8f0;
    --radius: 16px;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    --container: 1120px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 72px;
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: system-ui, -apple-system, 'Hiragino Kaku Gothic ProN', Meiryo,
        sans-serif;
    color: var(--ink);
    background: #fff;
    line-height: 1.8;
}
img {
    max-width: 100%;
    display: block;
    height: auto;
}
.container {
    width: min(100%, var(--container));
    margin: 0 auto;
    padding: 0 var(--space-4);
}
.section {
    padding: var(--space-6) 0;
}
.section.alt {
    background: var(--bg-alt);
}
.section-sub-title {
    color: var(--brand);
    letter-spacing: 0.08em;
    font-weight: 800;
    margin: 0 0 8px;
    text-transform: uppercase;
}
.title-top,
.title {
    line-height: 1.3;
    margin: 0 0 var(--space-3);
}
.title-top {
    font-size: clamp(26px, 3.8vw, 40px);
}
.title {
    font-size: clamp(22px, 3vw, 30px);
}
.lead {
    color: #1c2a5a;
    opacity: 0.9;
    margin: 8px 0 0;
}

/* ===== ヒーロー ===== */
.feature-hero {
    position: relative;
    min-height: 48vh;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.25),
            rgba(0, 0, 0, 0.45)
        ),
        url('/image/child3.jpg') center/cover no-repeat;
}
.feature-hero .hero-inner {
    text-align: center;
    padding: var(--space-7) 0;
}

/* ===== カード（3列 → 2列 → 1列） ===== */
.grid-3 {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(3, 1fr);
}
.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
    box-shadow: var(--shadow);
    text-align: center;
    transition: 0.25s transform, 0.25s box-shadow;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}
.card-img {
    overflow: hidden;
    border-radius: 12px;
}
.card-img img {
    transition: transform 0.5s ease;
}
.card:hover .card-img img {
    transform: scale(1.05);
}
.card h2 {
    font-size: clamp(18px, 2.2vw, 22px);
    margin: 8px 0 4px;
}
.card p {
    color: #444;
    margin: 0;
}

/* ===== 交互レイアウト ===== */
.split {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
}
.split.reverse {
    grid-template-columns: 0.9fr 1.1fr;
}
.split.reverse .split-media {
    order: 2;
}
.split.reverse .split-body {
    order: 1;
}
.split-media img {
    width: 100%;
    border-radius: 14px;
    box-shadow: var(--shadow);
}
.checklist {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.checklist li {
    position: relative;
    padding-left: 26px;
    margin: 6px 0;
}
.checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand);
}

/* ===== ギャラリー ===== */
.photo-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, 1fr);
}
.photo figcaption {
    color: var(--muted);
    font-size: 14px;
    margin-top: 6px;
}

/* ===== CTA ===== */
.cta-box {
    background: #0e1a3f;
    color: #cdd7ff;
    border-radius: 20px;
    padding: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.cta-text p {
    color: #dfe7ff;
    margin: 0.5em 0 0;
}
.cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ===== ボタン ===== */
.btn {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid transparent;
}
.btn.pink {
    background: #e91e63;
    color: #fff;
    box-shadow: 0 4px 10px rgba(233, 30, 99, 0.3);
    transition: 0.3s;
}
.btn.pink:hover {
    background: #d81b60;
    box-shadow: 0 6px 14px rgba(233, 30, 99, 0.45);
    transform: translateY(-2px);
}
.btn.ghost {
    background: #fff;
    color: #0e1a3f;
    border-color: #dbe3ff;
}

/* ===== レスポンシブ ===== */
@media (max-width: 1024px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .split,
    .split.reverse {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }
    .photo-grid {
        grid-template-columns: 1fr;
    }
    .cta-box {
        flex-direction: column;
        text-align: center;
    }
}

/* ===== ベース ===== */
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: system-ui, -apple-system, 'Hiragino Kaku Gothic ProN', Meiryo,
        sans-serif;
    color: var(--ink);
    background: #fff;
    line-height: 1.8;
}
img {
    max-width: 100%;
    display: block;
    height: auto;
}
.container {
    width: min(100%, var(--container));
    margin: 0 auto;
    padding: 0 var(--space-4);
}
.section {
    padding: var(--space-6) 0;
}
.section.alt {
    background: var(--bg-alt);
}
.section-sub-title {
    color: var(--brand);
    letter-spacing: 0.08em;
    font-weight: 800;
    margin: 0 0 8px;
    text-transform: uppercase;
}
.sec-title {
    font-size: clamp(22px, 3.2vw, 28px);
    line-height: 1.3;
    margin: 0 0 var(--space-4);
}
.title {
    font-size: clamp(22px, 3vw, 30px);
    margin: 0 0 var(--space-3);
}
.lead {
    color: #1c2a5a;
    opacity: 0.9;
    margin: 0.5em 0 0;
}

/* ===== ヒーロー ===== */
.daily-hero {
    position: relative;
    min-height: 42vh;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.25),
            rgba(0, 0, 0, 0.45)
        ),
        url('/image/child1.jpg') center/cover no-repeat;
}
.daily-hero .hero-inner {
    text-align: center;
    padding: var(--space-7) 0;
}

.breadcrumb {
    background: #fafbff;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.breadcrumb ol {
    margin: 0;
    padding: 10px 0;
    display: flex;
    gap: 10px;
    list-style: none;
    font-size: 14px;
}
.breadcrumb a {
    color: var(--brand);
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}

/* ===== タイムライン ===== */
.timeline {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 3px solid #cfe0ff;
}
.timeline .time {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: var(--space-4);
    padding: 18px 0 22px 18px;
    position: relative;
    border-bottom: 1px dashed var(--border);
}
.timeline .time::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 28px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #6a88d7;
    box-shadow: 0 0 0 4px #eaf0ff;
}
.timeline .time:last-child {
    border-bottom: none;
}
.time-col time {
    display: inline-block;
    font-weight: 900;
    color: #21356b;
    margin-top: 4px;
}
.body h3 {
    margin: 0 0 6px;
    font-size: clamp(16px, 2.2vw, 20px);
    color: #14234d;
}
.body p {
    margin: 0 0 10px;
}
.pics {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.pics img {
    width: calc(50% - 6px);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

/* ===== グリッド ===== */
.grid-2 {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr 1fr;
}

/* ===== リスト ===== */
.bullet {
    margin: 0;
    padding-left: 1.1em;
}
.bullet li {
    margin: 6px 0;
}

/* ===== CTA ===== */
.cta {
    background: var(--bg-alt);
}
.cta-box {
    background: #0e1a3f;
    color: #cdd7ff;
    border-radius: 20px;
    padding: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.cta-text p {
    color: #dfe7ff;
    margin: 0.5em 0 0;
}
.cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ===== ボタン ===== */
.btn {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid transparent;
}
.btn.pink {
    background: #e91e63;
    color: #fff;
    box-shadow: 0 4px 10px rgba(233, 30, 99, 0.3);
    transition: 0.3s;
}
.btn.pink:hover {
    background: #d81b60;
    box-shadow: 0 6px 14px rgba(233, 30, 99, 0.45);
    transform: translateY(-2px);
}
.btn.ghost {
    background: #fff;
    color: #0e1a3f;
    border-color: #dbe3ff;
}

/* ===== レスポンシブ ===== */
@media (max-width: 1024px) {
    .timeline .time {
        grid-template-columns: 90px 1fr;
    }
    .grid-2 {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .daily-hero {
        min-height: 36vh;
    }
    .pics img {
        width: 100%;
    }
}

/* ===== ヒーロー ===== */
.schedule-hero {
    position: relative;
    min-height: 42vh;
    display: grid;
    place-items: center;
    color: #fff;
    /* background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.25),
            rgba(0, 0, 0, 0.45)
        ),
        url('/image/child5.jpg') center/cover no-repeat; */
}
.schedule-hero .hero-inner {
    text-align: center;
    padding: var(--space-7) 0;
}

/* ===== パンくず ===== */
.breadcrumb {
    background: #fafbff;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.breadcrumb ol {
    margin: 0;
    padding: 10px 0;
    display: flex;
    gap: 10px;
    list-style: none;
    font-size: 14px;
}
.breadcrumb a {
    color: var(--brand);
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}

/* ===== 月グリッド ===== */
.months-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(4, 1fr);
}
.month-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: 0.25s transform, 0.25s box-shadow;
}
.month-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.month-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.month-num {
    display: inline-block;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: #8aa6ff;
    font-size: clamp(22px, 3.2vw, 28px);
}
.month-card h3 {
    font-size: clamp(18px, 2.2vw, 22px);
    margin: 0;
    color: #14234d;
}

.events {
    margin: 0;
    padding-left: 1.1em;
}
.events li {
    margin: 0.4em 0;
}
.events li::marker {
    color: #8aa6ff;
}

/* ===== 備考 & ダウンロード ===== */
.notes {
    color: var(--muted);
    font-size: 0.95rem;
    margin-top: var(--space-3);
}
.download {
    margin-top: var(--space-5);
    text-align: center;
}

/* ===== CTA ===== */
.cta {
    background: var(--bg-alt);
}
.cta-box {
    background: #0e1a3f;
    color: #cdd7ff;
    border-radius: 20px;
    padding: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.cta-text p {
    color: #dfe7ff;
    margin: 0.5em 0 0;
}
.cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ===== ボタン ===== */
.btn {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid transparent;
}
.btn.pink {
    background: #e91e63;
    color: #fff;
    box-shadow: 0 4px 10px rgba(233, 30, 99, 0.3);
    transition: 0.3s;
}
.btn.pink:hover {
    background: #d81b60;
    box-shadow: 0 6px 14px rgba(233, 30, 99, 0.45);
    transform: translateY(-2px);
}
.btn.ghost {
    background: #fff;
    color: #0e1a3f;
    border-color: #dbe3ff;
}

/* ===== レスポンシブ ===== */
@media (max-width: 1024px) {
    .months-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .months-grid {
        grid-template-columns: 1fr;
    }
    .schedule-hero {
        min-height: 36vh;
    }
}

/* ===== ヒーロー ===== */
.info-hero {
    position: relative;
    min-height: 42vh;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.25),
            rgba(0, 0, 0, 0.45)
        ),
        url('/image/child5.jpg') center/cover no-repeat;
}
.info-hero .hero-inner {
    text-align: center;
    padding: var(--space-7) 0;
}

/* ===== パンくず ===== */
.breadcrumb {
    background: #fafbff;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.breadcrumb ol {
    margin: 0;
    padding: 10px 0;
    display: flex;
    gap: 10px;
    list-style: none;
    font-size: 14px;
}
.breadcrumb a {
    color: var(--brand);
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}

/* ===== 概要 ===== */
.outline-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr 1fr;
    align-items: start;
}
.outline {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.outline th,
.outline td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.outline tr:last-child th,
.outline tr:last-child td {
    border-bottom: none;
}
.outline th {
    width: 30%;
    color: #14234d;
    background: #f6f8ff;
    text-align: left;
    font-weight: 700;
}

.hours h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
}
.ticks {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ticks li {
    position: relative;
    padding-left: 28px;
    margin: 0.3em 0;
}
.ticks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand);
}
.ticks time {
    font-weight: 800;
    color: #14234d;
    margin-right: 0.3em;
}

/* ===== 保育料 ===== */
.fee-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr 1fr;
    align-items: start;
}
.fee {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.fee thead th {
    background: #f6f8ff;
    color: #14234d;
    font-weight: 800;
}
.fee th,
.fee td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.fee tr:last-child th,
.fee tr:last-child td {
    border-bottom: none;
}
.notes {
    margin: 0;
    padding-left: 1.1em;
}
.notes li {
    margin: 0.4em 0;
}
.notes li::marker {
    color: #8aa6ff;
}

/* ===== フロー ===== */
.flow {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, 1fr);
}
.flow li {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    box-shadow: var(--shadow);
}
.flow .step {
    flex: 0 0 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: #8aa6ff;
    color: #fff;
    font-weight: 900;
}
.flow h3 {
    margin: 0.2em 0 0.2em;
    font-size: 1.05rem;
}
.flow .actions {
    margin: 0.5em 0 0;
}

/* ===== FAQ（details） ===== */
.faq {
    display: grid;
    gap: 12px;
}
.faq details {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: var(--shadow);
}
.faq summary {
    cursor: pointer;
    font-weight: 700;
    list-style: none;
    outline: none;
}
.faq summary::-webkit-details-marker {
    display: none;
}
.faq details[open] summary {
    color: #14234d;
}
.answer {
    margin-top: 8px;
    color: #333;
}

/* ===== ダウンロード ===== */
.doc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}
.doc-list li {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: var(--shadow);
}
.doc-title {
    font-weight: 700;
}

/* ===== ヒーロー ===== */
.about-hero {
    position: relative;
    min-height: 42vh;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.25),
            rgba(0, 0, 0, 0.45)
        ),
        url('/image/child3.jpg') center/cover no-repeat;
}

/* ===== CTA ===== */
.cta {
    background: var(--bg-alt);
}
.cta-box {
    background: #0e1a3f;
    color: #cdd7ff;
    border-radius: 20px;
    padding: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.cta-text p {
    color: #dfe7ff;
    margin: 0.5em 0 0;
}
.cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ===== ボタン ===== */
.btn {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid transparent;
}
.btn.pink {
    background: #e91e63;
    color: #fff;
    box-shadow: 0 4px 10px rgba(233, 30, 99, 0.3);
    transition: 0.3s;
}
.btn.pink:hover {
    background: #d81b60;
    box-shadow: 0 6px 14px rgba(233, 30, 99, 0.45);
    transform: translateY(-2px);
}
.btn.ghost {
    background: #fff;
    color: #0e1a3f;
    border-color: #dbe3ff;
}

/* ===== レスポンシブ ===== */
@media (max-width: 1024px) {
    .outline-grid {
        grid-template-columns: 1fr;
    }
    .fee-grid {
        grid-template-columns: 1fr;
    }
    .flow {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .info-hero {
        min-height: 36vh;
    }
    .doc-list li {
        flex-direction: column;
        align-items: flex-start;
    }
}