:root {
	/* 色 */
	--color-primary: #ED6A1B;
	--color-secondary: #F6A817;
	--color-text: #4F352C;
	--color-line: #DDD;
	--color-error: #F00;
	--white: #FFF;
	--pink: #FCF4EF;
	--yellow: #F9F4E6;
	--gray: #F6F6F6;
	--red: #D00;
	--color-bg-footer: #F6F2F1;
	--color-disabled-bg: #DDD;
	--color-disabled-text: #BBB;

	/* フォント */
	--font-family-title: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
	--font-family-body: 'Kosugi Maru', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
	--font-family-icon: "Font Awesome 5 Free";

	/* フォントサイズ */
	--font-size-title-lg: 2.875rem;  /* 46px */
	--font-size-title-md: 2.5rem;    /* 40px */
	--font-size-title-sm: 2rem;      /* 32px */
	--font-size-title-xs: 1.375rem;  /* 22px */
	--font-size-body-xl: 1.25rem;    /* 20px */
	--font-size-body-lg: 1.125rem;   /* 18px */
	--font-size-body-md: 1rem;       /* 16px */
	--font-size-body-sm: 0.875rem;   /* 14px */
	--font-size-body-xs: 0.75rem;    /* 12px */
	--font-size-body-2xs: 0.625rem;  /* 10px */

	/* フォントウェイト */
	--font-weight-regular: 400;
	--font-weight-bold: 700;

	/* 行間 */
	--line-height-lg: 1.75;
	--line-height-none: 1;

	/* スペーシング */
	--space-2xs: 2px;
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-2xl: 40px;
	--space-3xl: 56px;
	--space-4xl: 64px;
	--space-5xl: 80px;
	--space-6xl: 100px;
	--space-10: 10px;
	--space-20: 20px;

	/* 角丸 */
	--radius-sm: 4px;
	--radius-md: 10px;
	--radius-lg: 20px;
	--radius-round: 50%;
}

/* 文字間 */
.letter-space--loose       { letter-spacing:  0.05em; display: inline; }
.letter-space--tight       { letter-spacing: -0.05em; display: inline; }
.letter-space--tighter     { letter-spacing: -0.1em;  display: inline; }
.letter-space--extra-tight { letter-spacing: -0.2em; display: inline; }

/* =====================================================
   Google Material Icon設定
   ===================================================== */
.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,     /* 0=アウトライン, 1=塗りつぶし */
        'wght' 400,   /* 太さ: 100〜700 */
        'GRAD' 0,     /* グレード: -25〜200 */
        'opsz' 24;    /* 光学サイズ: 20〜48 */
}
.material-symbols-outlined--solid {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

/* =====================================================
   電話番号 tablet/PC無効化
   ===================================================== */
@media (min-width: 600px) {
    a[href^="tel:"]{
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}


/* =====================================================
   タグ（点線のピル型ラベル）
   ===================================================== */
.tag {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    max-height: 34px;
    padding: var(--space-10) var(--space-md);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--color-text);
    background-color: var(--white);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-sm);
    white-space: nowrap;
    align-self: flex-start;
}
/* =================================
 BUTTON
================================= */
.button-container {
    text-align: center;
}
.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    width: fit-content;
    padding: var(--space-10) var(--space-lg);
    border-radius: var(--radius-md);
    font-family: var(--font-family-title);
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    white-space: nowrap;
}
.button:hover {
    transform: translate3d(0, 5px, 0);
}
.button .material-symbols-outlined {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-round);
    flex-shrink: 0;
}

/* ボタンサイズ */
.button--lg {
    height: 70px;
    font-size: var(--font-size-title-xs);
}
.button--md {
    height: 50px;
    font-size: var(--font-size-body-md);
}
.button--sm {
    height: 38px;
    padding: 0 var(--space-10);
    font-size: var(--font-size-body-sm);
}

/* ボタン種別 */
.button--primary {
    color: var(--white);
    background-color: var(--color-primary);
}
.button--primary .material-symbols-outlined {
    color: var(--color-primary);
    background-color: var(--white);
}
.button--secondary {
    color: var(--color-primary);
    background-color: var(--white);
    border: 1px solid var(--color-primary);
}
.button--secondary .material-symbols-outlined {
    color: var(--white);
    background-color: var(--color-primary);
}
.button--tertiary {
    color: var(--white);
    background-color: var(--color-text);
}
.button--tertiary .material-symbols-outlined {
    background-color: var(--white);
    color: var(--color-text);
}
.button--quaternary {
    color: var(--color-text);
    background-color: var(--white);
    border: 1px solid var(--color-text);
}
.button--quaternary .material-symbols-outlined {
    background-color: var(--color-text);
    color: var(--white);
}

/* ボタン幅 枠まで伸びる */
.button--stretch {
    width: 100%;
}

/* ボタンアイコン ＞と外部リンクは擬似要素で描画 */
.button--icon-arrow {
    gap: 0;
}
.button--icon-arrow::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-radius: 1px;
    transform: rotate(45deg);
    margin-left: var(--space-xs);
}
.button--icon-external::after {
    content: '\e89e'; /* open_in_new */
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: var(--font-size-body-md);
    display: inline-block;
    line-height: 1;
}
.button--icon-register {
    padding-left: var(--space-2xs);
}

/* Google Material Icons 設定 */
.button .material-symbols-outlined {
    width: 24px;
    height: 24px;
    font-size: var(--font-size-body-sm);
}
.button .material-symbols-outlined--lg {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-body-lg);
}

/* ボタンラベルにサブラベルがある場合 */
.button__label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.button__sub {
    font-size: clamp(var(--font-size-body-xs), 1.27vw, 13px);
    font-weight: var(--font-weight-regular);
    font-family: var(--font-family-body);
    line-height: 1;
}
.header__nav .button__sub {
    font-size: 11px;
}

/* =================================
 注釈（保護者ポータル・保育施設LP・自治体LP共通）
================================= */
.annotation-mark {
    display: inline-block;
    font-size: var(--font-size-body-2xs);
}
.annotation-item {
    font-size: var(--font-size-body-2xs);
    padding-left: 1.5em;
    position: relative;
}
.annotation-item::before {
    position: absolute;
    left: 0;
    content: "※";
}
.annotation-item--no1::before {
    content: "※1";
}
.annotation-item--no2::before {
    content: "※2";
}

/* =================================
 内部リンク（保護者ポータル・保育施設LP・自治体LP共通）
================================= */
.link--internal {
    color: var(--color-primary);
    text-decoration: underline;
}
.link--internal:hover {
    text-decoration: none;
}

/* =================================
 蛍光ペン風ハイライト（保護者ポータル・保育施設LP・自治体LP共通）
 common.js の IntersectionObserver が is-visible を付与すると左から線を引く
================================= */
.marker-yellow {
    background-image: linear-gradient(transparent 50%, #fff462 50%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.8s ease-out;
    transition-delay: var(--marker-delay, 0s);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.marker-yellow.is-visible {
    background-size: 100% 100%;
}
/* 2箇所目以降を時間差で引きたいときに付与（任意の遅延は --marker-delay で指定） */
.marker-yellow--delay {
    --marker-delay: 0.6s;
}

/* =================================
 HEADER
================================= */
header {
	width: 100%;
	z-index: 20;
	position: fixed;
	background-color: var(--white);
}

.header__wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 50px;
	padding: 0 var(--space-10);
	background-color: var(--white);
	position: relative;
}

/* ロゴ */
.header__logo {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	line-height: 1;
	flex-shrink: 0;
}

.header__logo img {
	width: 110px;
	min-width: 110px;
	display: block;
}

/* 保育施設バッジ */
.header__badge {
	align-items: center;
	justify-content: center;
	padding: 5px var(--space-sm);
	border: 1px dashed var(--color-text);
	border-radius: 100px;
	font-size: var(--font-size-body-xs);
	color: var(--color-text);
	white-space: nowrap;
	line-height: var(--line-height-none);
}

/* PC/SP 出し分け */
.pc { display: none; }
.sp { display: inline-block; }

.header__nav-link-suffix { display: none; }

/* SP: ハンバーガーボタン */
.header__sp-actions {
    position: absolute;
    right: var(--space-10);
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.header__hamburger {
	width: 30px;
	height: 30px;
	background-color: var(--color-primary);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	flex-shrink: 0;
}

.header__hamburger span {
	display: block;
	width: 13px;
	height: 1px;
	border-radius: 1px;
	background: var(--white);
	transition: ease .3s;
	transform-origin: center;
}

.header__hamburger.on span:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}

.header__hamburger.on span:nth-child(2) {
	opacity: 0;
}

.header__hamburger.on span:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}

/* SP: ドロワーメニュー */
.drawer {
	display: none;
	position: fixed;
	top: 50px;
	left: 0;
	width: 100%;
	height: calc(100vh - 50px);
	background-color: var(--gray);
	overflow-y: auto;
	z-index: 100;
	padding: var(--space-md);
}

/* 上部ボタン群 */
.drawer__top-buttons {
	display: flex;
	gap: var(--space-10);
	margin-bottom: var(--space-10);
}
.drawer__top .button {
    flex: 1;
    padding: 0;
    font-size: var(--font-size-body-sm);
}
.drawer__top .button--quaternary {
    border: 1px solid var(--color-line);
}

/* 区切り線 */
.drawer__divider {
	height: 1px;
	background-color: var(--color-line);
	margin: var(--space-lg) 0;
}

/* リンクリスト */
.drawer__list {
	background-color: var(--white);
	border-radius: var(--radius-md);
	overflow: hidden;
	margin-bottom: 0;
}

.drawer__item {
	border-bottom: 1px solid #eee;
}

.drawer__item:last-child {
	border-bottom: none;
}

.drawer__item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 46px;
	padding: 12px var(--space-md);
	font-size: var(--font-size-body-sm);
	color: var(--color-text);
	text-decoration: none;
}

/* 内部リンクの矢印 */
.drawer__item a:not([target="_blank"])::after {
	content: '';
	display: inline-flex;
	width: var(--font-size-body-lg);
	height: var(--font-size-body-lg);
	border-top: 4px solid currentColor;
	border-right: 4px solid currentColor;
	border-radius: 1px;
	transform: rotate(45deg) scale(0.45);
	transform-origin: center;
	flex-shrink: 0;
}

/* 外部リンクアイコン */
.drawer__item a[target="_blank"]::after {
	content: '\e89e'; /* open_in_new */
	font-family: 'Material Symbols Outlined';
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	font-size: var(--font-size-body-lg);
	display: inline-block;
	line-height: 1;
	flex-shrink: 0;
}

@media (min-width: 751px) {
	.pc { display: inline-block; }
	.sp { display: none; }
	.header__nav-link-suffix { display: block; }

	.header__wrap {
        height: 70px;
        padding: var(--space-10) 0 var(--space-10) 14px;
	}

    /* ロゴ */
	.header__logo img {
        width: clamp(120px, 14vw, 170px);
        min-width: unset;
	}

    /* 種別バッジ */
    .header__badge {
        display: none;
    }

	/* PCナビ全体 */
	.header__nav {
        display: flex;
        align-items: center;
        height: 50px;
        gap: 0;
	}

	/* ナビグループ共通 */
	.header__nav-group {
        display: flex;
        align-items: center;
        gap: clamp(var(--space-10), 1.5vw, var(--space-md));
        height: 100%;
        padding: 0 clamp(var(--space-10), 1.5vw, var(--space-md));
	}
    .header--nursery .header__nav-group {
        gap: var(--space-10);
        padding: 0 var(--space-10);
    }

	/* グループ間の区切り線 */
	.header__nav-group + .header__nav-group {
        border-left: 1px solid var(--color-line);
	}

    /* リンクメニュー */
	.header__nav-link {
        font-size: var(--font-size-body-sm);
        color: var(--color-text);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        line-height: 1.3;
	}
    .header--nursery .header__nav-link {
        font-size: var(--font-size-body-xs);
    }
	.header__nav-link:hover {
        text-decoration: none;
	}

	/* よくある質問リンク */
	.header__faq-link {
        display: flex;
        align-items: flex-end;
        gap: var(--space-2xs);
        color: var(--color-text);
        text-decoration: none;
        white-space: nowrap;
	}
	.header__faq-label {
        display: flex;
        flex-direction: column;
        font-size: var(--font-size-body-sm);
        line-height: 1.4;
        text-decoration: underline;
        text-decoration-thickness: 1px;
	}
	.header__faq-sub {
    	font-size: var(--font-size-body-xs);
	}
	.header__faq-icon.material-symbols-outlined {
        font-size: var(--font-size-body-lg);
        color: var(--color-text);
        flex-shrink: 0;
        align-self: flex-end;
        margin-bottom: var(--space-2xs);
        width: 1.125rem;
        overflow: hidden;
	}
	.header__faq-label:hover {
        text-decoration: none;
	}

	/* ヘッダー電話番号（受付時間は折り返して右揃え） */
	.header__tel {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: var(--space-2xs);
        line-height: 1.3;
	}
	.header__tel-link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        color: var(--color-text);
        text-decoration: none;
	}
	.header__nav-group .header__tel-icon.material-symbols-outlined {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        background-color: var(--color-text);
        color: var(--white);
        border-radius: var(--radius-sm);
        font-size: 12px;
	}
	.header__tel-number {
        font-family: var(--font-family-title);
        font-size: 26px;
        -webkit-font-smoothing: antialiased;
        white-space: nowrap;
        line-height: 1;
	}
	.header__tel-info {
        font-size: var(--font-size-body-xs);
        text-align: right;
	}

	/* ヘッダーボタン(tablet) */
    .header__nav-group .button {
        padding: 0 var(--space-md);
        font-size: var(--font-size-body-sm);
    }
    .header__nav-group .material-symbols-outlined {
        display: none;
    }
    .header--nursery .header__nav-group .button {
        font-size: var(--font-size-body-xs);
    }
    .header--nursery .header__nav .button__sub {
        font-size: 8px;
    }
}

@media (min-width: 1024px) {

    .header__nav-link {
        font-size: var(--font-size-body-md);
    }
	.header__nav-link-suffix {
        display: inline;
    }
    .header--nursery .header__nav-link {
        font-size: var(--font-size-body-sm);
    }
	.header--nursery .header__nav-link-suffix {
        display: block;
    }
    .header__faq-label {
        font-size: var(--font-size-body-md);
    }

    .header--nursery .header__nav-group {
        gap: var(--space-md);
        padding: 0 var(--space-md);
    }
    /* ヘッダーボタン(pc1024~) */
    .header__nav-group .button {
        font-size: var(--font-size-body-md);
    }
    .header__nav-group .material-symbols-outlined {
        display: inline-flex;
    }
    .header--nursery .header__nav-group .button {
        padding: 0 var(--space-10);
        gap: var(--space-xs);
    }
    .header--nursery .header__nav-group .button {
        font-size: var(--font-size-body-sm);
    }
}

/* PC wide (1280px+) */
@media (min-width: 1280px) {
	.header__nav-link {
	    font-size: var(--font-size-body-md);
	}
	.header--nursery .header__nav-link-suffix {
        display: inline;
    }
    .header__badge {
        display: inline-flex;
    }
    .header--nursery .header__nav-group .button {
        padding: 0 var(--space-10);
        gap: var(--space-xs);
    }
    .header--nursery .header__nav .button__sub {
        font-size: 11px;
    }
}

/* PC wide (1440px+) */
@media (min-width: 1440px) {
    .header--nursery .header__nav-group .button {
        padding: 0 var(--space-md);
        gap: var(--space-sm);
    }
}

/* =================================
 FOOTER
================================= */
.footer {
	background-color: var(--color-bg-footer);
	position: relative;
}
.f_nav {
	padding-left: 1em;
}
.f_nav li {
	font-weight: bold;
	position: relative;
}
.f_nav li::before {
	content: '';
	position: absolute;
	background-color: var(--color-primary);
	border-radius: 50%;
}
.f_nav > li:nth-child(even)::before {
	background-color: var(--color-secondary);
}
.f_nav li > ul li::before {
	content: '';
	position: absolute;
	width: 3px;
	height: 3px;
	background-color: var(--color-text);
}
.btn_pagetop {
	position: absolute;
	top: -15px;
	right: 10px;
	width: 30px;
}
.copy {
	background-color: var(--color-text);
	text-align: center;
	font-size: var(--font-size-body-xs);
	color: var(--white);
}

/* SP */
@media only screen and (max-width: 750px) {
	.footer .inner {
		padding: 8% 2.67%;
	}
	.f_logo_sns {
		display: grid;
		grid-template-columns: 47% 1fr 45px;
		gap: var(--space-10);
		width: 90%;
		margin-bottom: var(--space-20);
		align-items: center;
	}
	.f_sns {
		display: flex;
		justify-content: flex-end;
		gap: var(--space-10);
	}
	.f_sns li img{
		width: 34px;
	}
	.pmark {
		width: 45px;
	}
	.f_nav li {
		font-size: 13px;
		margin-bottom: .5em;
	}
	.f_nav li::before {
		top: .6em;
		left: -0.8em;
		width: 4px;
		height: 4px;
	}
	.f_nav_group {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-20);
	}
	.f_nav li > ul {
		margin-top: .5em;
	}
	.f_nav li > ul li{
		font-size: 11px;
		margin-left: 1em;
	}
	.f_nav li > ul li::before {
		top: .6em;
		left: -1em;
	}
	.copy {
		padding: 2.7%;
		margin-bottom: 69px;
	}
}

/* Tablet & PC */
@media print, screen and (min-width: 751px) {
	.footer .inner {
		display: grid;
		grid-template-columns: 16% 1fr;
		gap: 2%;
		padding: 4% 50px 4% 2%;
	}
	.f_logo_sns > * {
		margin-bottom: 15px;
		text-align: center;
	}
	.f_logo {
		width: 100%;
		max-width: 160px;
	}
	.f_sns {
		display: flex;
		justify-content: center;
		gap: var(--space-10);
	}
	.f_sns img{
		width: 34px;
	}
	.pmark {
		width: 100px;
		margin-left: auto;
		margin-right: auto;
	}
	.f_nav_group,
	.f_nav_inner {
		display: grid;
		grid-template-columns: auto auto;
		gap: var(--space-20);
	}
	.f_nav_inner {
		font-size: 13px;
	}
	.f_nav li {
		margin-left: 1em;
		margin-bottom: .5em;
	}
	.f_nav li::before {
		top: .6em;
		left: -1.2em;
		width: 6px;
		height: 6px;
	}
	.f_nav li a:hover {
		text-decoration: underline;
	}
	.f_nav li > ul{
		margin-top: .5em;
	}
	.f_nav li > ul li{
		font-size: 12px;
		margin-left: 1em;
	}
	.f_nav li > ul li::before {
		top: .6em;
		left: -1.2em;
	}
	.copy {
		padding: 12px 0;
	}
}

/* Tablet & PC */
@media print, screen and (min-width: 1000px) {
	.footer .inner {
	padding: var(--space-2xl) 0;
	}
}


/* =================================
 FIX FOOTER
================================= */
.wrap_fixfooter {
    width: 100%;
    padding: var(--space-10);
    background-color: var(--gray);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 15;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.14);
}
.fix_footer {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--space-10);
}
.fix_footer li {
    width: 50%;
    display: flex;
}
.fix_footer .button {
    width: 100%;
    height: auto;
    min-height: 50px;
    justify-content: center;
}
.fix_footer__download {
    font-size: var(--font-size-body-sm);
    white-space: normal;
    text-align: center;
    line-height: 1.2;
}

.fix_footer .button__label{
    display: flex;
    flex-direction: column;
}

/* =====================================================
   セクションタイトル（保護者ポータル・保育施設LP・自治体LP共通）
   ・タイポグラフィ／縦線は3ページ共通
   ・改行用の span は class 無し span のみ対象（インライン修飾 span は除外）
   ・横の飾り（title_deco1）は .section-title--deco を付けたときだけ表示
   ・中央の飾り（title_deco2）はページ固有のため各ページCSSに残す
   ===================================================== */
.section-title {
    display: grid;
    row-gap: var(--space-sm);
    place-items: center;
    position: relative;
}
.section-title__main {
    font-family: var(--font-family-title);
    font-size: clamp(var(--font-size-title-sm), 4.492vw, var(--font-size-title-lg));
    font-weight: var(--font-weight-bold);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
}
.section-title__main span:not([class]) {
    display: block;
}
.section-title__main::after {
    content: '';
    display: block;
    width: 1px;
    height: 30px;
    background-color: var(--color-text);
    margin: var(--space-md) auto 0;
}
.section-title__sub {
    font-family: var(--font-family-body);
    font-size: clamp(var(--font-size-body-md), 2.148vw, var(--font-size-title-xs));
    font-weight: var(--font-weight-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
}
.section-title__sub span:not([class]) {
    display: block;
    padding-bottom: var(--space-xs);
}
@media (min-width: 751px) {
    .section-title__main {
        white-space: nowrap;
    }
    .section-title__main span:not([class]) {
        display: inline-block;
    }
    .section-title__main::after {
        height: 40px;
        margin: var(--space-lg) auto 0;
    }
    .section-title__sub {
        white-space: nowrap;
    }
    .section-title__sub span:not([class]) {
        display: inline-block;
    }
    /* 横の飾り（クラス指定で表示） */
    .section-title--deco {
        padding-left: clamp(66px, 23vw, 236px);
        padding-right: clamp(66px, 23vw, 236px);
    }
    .section-title--deco::before,
    .section-title--deco::after {
        content: '';
        width: clamp(50px, 21.48vw, 220px);
        height: 141px;
        background-image: url('../image/common/title_deco1.svg');
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: -16px;
        pointer-events: none;
    }
    .section-title--deco::before {
        left: 0;
    }
    .section-title--deco::after {
        right: 0;
        transform: scaleX(-1);
    }
}

/* =====================================================
   カードリスト（保護者ポータル・保育施設LP・自治体LP共通）
   白/グレーの枠付きボックスに「画像＋タイトル＋本文」カードを並べる。
   SP: 画像＋見出し/本文の行レイアウト、PC: 3カラム＋区切り罫線。
   背景グレーは --gray、各ページ固有の装飾等は各CSSに上乗せ。
   ===================================================== */
.card-list {
    padding: var(--space-sm) var(--space-lg);
    background-color: var(--white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    width: 100%;
}
.card-list--gray {
    background-color: var(--gray);
}
.card-list__item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "pict title"
        "text text"
        "button button";
    gap: var(--space-sm) var(--space-md);
    padding-top: var(--space-lg);
    padding-bottom: var(--space-md);
}
.card-list__item:nth-of-type(2) {
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}
.card-list__pict {
    grid-area: pict;
    justify-self: start;
    width: 100px;
}
.card-list__title {
    grid-area: title;
    align-self: center;
    font-family: var(--font-family-title);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--font-size-body-lg);
}
.card-list__lead {
    font-family: var(--font-family-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--font-size-body-xs);
    display: block;
}
.card-list__text {
    grid-area: text;
    align-self: start;
    font-size: var(--font-size-body-sm);
    line-height: var(--line-height-lg);
}
.card-list__button {
    grid-area: button;
    align-self: center;
    width: 100%;
    padding-bottom: var(--space-md);
}

@media (min-width: 751px) {
    .card-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: calc(var(--space-2xl) + var(--space-10)) 0;
    }
    .card-list__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-20);
        padding: 0 var(--space-xl);
    }
    .card-list__item:nth-of-type(2) {
        border: none;
        border-left: 1px solid var(--color-line);
        border-right: 1px solid var(--color-line);
    }
    .card-list__pict {
        width: 180px;
    }
    .card-list__title {
        font-size: clamp(var(--font-size-body-md), 1.76vw, var(--font-size-body-lg));
        text-align: center;
        width: 100%;
    }
    .card-list__title span:not([class]) {
        display: block;
    }
    .card-list__text {
        min-height: 100px;
    }
    .card-list__button {
        padding-bottom: 0;
    }
}

/* =====================================================
   キャラクタースライドイン（保護者ポータル・保育施設LP・自治体LP共通）
   付与した要素の左右からキャラクターがスライドインする装飾（PC幅のみ）。
   白いボックス（.card-list）を内包する透明ラッパーに付与すること。
   ボックス側を z-index: 1 で前面に出し、キャラがボックスの背後から覗く見た目になる。
   common.js の IntersectionObserver が画面内に入ったら is-visible を付与して発火。
   親セクションに overflow: hidden が必要（初期状態のはみ出しクリップ用）。
   ===================================================== */
@media (min-width: 1280px) {
    .chara-slide-in {
        position: relative;
    }
    .chara-slide-in::before {
        content: "";
        position: absolute;
        bottom: -20px;
        left: -104px;
        width: 180px;
        height: 240px;
        background-image: url('../image/common/chara_slide_in1.png');
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
        transform: translateX(120%);
        transition: transform 0.6s ease-out;
    }
    .chara-slide-in::after {
        content: "";
        position: absolute;
        bottom: -20px;
        right: -104px;
        width: 180px;
        height: 240px;
        background-image: url('../image/common/chara_slide_in2.png');
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
        transform: translateX(-120%);
        transition: transform 0.6s ease-out;
    }
    .chara-slide-in.is-visible::before,
    .chara-slide-in.is-visible::after {
        transform: translateX(0);
    }
    @supports (background-image: url('image.webp')) {
        .chara-slide-in::before {
            background-image: url('../image/common/chara_slide_in1.webp');
        }
        .chara-slide-in::after {
            background-image: url('../image/common/chara_slide_in2.webp');
        }
    }
    .chara-slide-in .card-list {
        position: relative;
        z-index: 1;
    }
}

/* =================================
 お知らせリスト（保護者ポータル・保育施設LP・自治体LP共通）
================================= */
.tag-news {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 9em;
    max-height: 24px;
    padding: var(--space-xs) var(--space-10);
    border-radius: var(--radius-lg);
    background-color: var(--color-secondary);
    color: var(--white);
    font-size: var(--font-size-body-xs);
    white-space: nowrap;
}
.news-list {
    width: 100%;
}
.news-list__item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "date tag"
        "text text";
    align-items: center;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-line);
    text-decoration: none;
    color: var(--color-text);
}
.news-list__item time {
    grid-area: date;
    font-size: var(--font-size-body-sm);
    white-space: nowrap;
}
.news-list__item .tag-news {
    grid-area: tag;
    justify-self: start;
}
.news-list__item h3 {
    grid-area: text;
    line-height: var(--line-height-lg);
    font-size: var(--font-size-body-md);
    font-weight: var(--font-weight-regular);
}
.news-list__item:hover h3 {
    text-decoration: underline;
    color: var(--color-primary);
}
@media (min-width: 751px) {
    .news-list__item {
        grid-template-columns: auto auto 1fr;
        grid-template-areas: "date tag text";
        column-gap: var(--space-md);
    }
}

/* =================================
 FAQリスト（保護者ポータル・保育施設LP・自治体LP共通）
================================= */
.faq-list {
    padding: var(--space-md);
    background-color: var(--white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    width: 100%;
}
.faq-list__item {
    border-bottom: 1px solid var(--color-line);
}
.faq-list__item:last-of-type {
    border-bottom: 0;
}
.faq-list__item summary {
    display: flex;
    align-items: center;
    font-family: var(--font-family-title);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: clamp(var(--font-size-body-md), 1.76vw, var(--font-size-body-lg));
    list-style: none;
    padding: var(--space-md) 0 var(--space-md) 40px;
    position: relative;
    cursor: pointer;
}
.faq-list__item summary::-webkit-details-marker {
    display: none;
}
.faq-list details summary::before {
    content: "+";
    display: inline-flex;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: var(--gray);
    border-radius: 50%;
    margin-right: var(--space-sm);
    font-size: 1.2rem;
    position: absolute;
    left: 0;
}
.faq-list details[open] summary::before {
    content: "−";
}
.faq-list__item p {
    padding-bottom: var(--space-md);
    padding-left: 40px;
    line-height: var(--line-height-lg);
}
@media (min-width: 751px) {
    .faq-list {
        padding: var(--space-2xl);
    }
    .faq-list__item summary {
        padding-top: var(--space-20);
        padding-bottom: var(--space-20);
    }
    .faq-list__item p {
        padding-bottom: var(--space-20);
    }
}

/* =================================
 流れる自治体ロゴ（保育施設LP・自治体LP共通）
================================= */
.govt-logo-marquee {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
}
.govt-logo-marquee__list {
    display: flex;
    gap: 10px;
    width: max-content;
    animation: scroll-left 20s linear infinite;
}
.govt-logo-marquee__item {
    flex: 0 0 auto;
    width: 120px;
    border: 1px solid var(--color-line);
}
.govt-logo-marquee__list--bottom {
    margin-left: -65px;
}
@keyframes scroll-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (min-width: 751px) {
    .govt-logo-marquee__list {
        gap: 16px;
    }
    .govt-logo-marquee__item {
        width: 180px;
    }
    .govt-logo-marquee__list--bottom {
        margin-left: -98px;
    }
}

/* =================================
 オプションサービス（保護者ポータル・保育施設LP・自治体LP共通）
================================= */
.option-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding: var(--space-lg) var(--space-md);
    background-color: var(--white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
}
.option-card--gray {
    background-color: var(--gray);
}
.option-card__title {
    font-family: var(--font-family-title);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1.875rem;
    text-align: center;
    width: 100%;
}
.option-card__title span {
    display: block;
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-lg);
    text-align: center;
    width: 100%;
}
.option-card__text {
    font-size: var(--font-size-body-sm);
    line-height: var(--line-height-lg);
}
.option-card__pict {
    display: none;
}
.option-card__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: center;
    justify-content: center;
}
.option-card__item:nth-of-type(2) {
    border-bottom: 1px solid var(--color-line);
    padding-bottom: var(--space-xl);
}
.option-card-item__pict {
    max-width: 200px;
}
.option-card-item__pict img {
    border-radius: var(--radius-lg);
}
.option-card-item__title {
    flex: 1;
    align-self: center;
    font-family: var(--font-family-title);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--font-size-body-lg);
}
.option-card-item__title span {
    display: block;
}
.option-card-item__text {
    flex: 1;
    font-size: var(--font-size-body-sm);
    line-height: var(--line-height-lg);
}
.option-card-item__button {
    flex: 1;
    width: 100%;
}
@media (min-width: 751px) {
    .option-card {
        display: grid;
        gap: 0;
        grid-template-columns: repeat(3, 1fr);
        padding: clamp(var(--space-lg), 3.91vw, var(--space-2xl)) 0;
    }
    .option-card__text {
        font-size: var(--font-size-body-md);
        line-height: var(--line-height-lg);
    }
    .option-card__pict {
        display: block;
        max-width: 80px;
    }
    .option-card__item {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        align-items: center;
        justify-content: center;
        padding-left: clamp(var(--space-md), 3.125vw, var(--space-2xl));
        padding-right: clamp(var(--space-md), 3.125vw, var(--space-2xl));
    }
    .option-card__item:nth-of-type(2) {
        border: none;
        border-left: 1px solid var(--color-line);
        border-right: 1px solid var(--color-line);
        padding-bottom: 0;
    }
    .option-card-item__title {
        flex: 0 1 auto;
        font-size: clamp(var(--font-size-body-md), 1.76vw, var(--font-size-body-lg));
        text-align: center;
        width: 100%;
    }
    .option-card-item__title span {
        display: inline-block;
    }
    .option-card-item__button {
        width: 100%;
    }
}
@media (min-width: 1024px) {
    .option-card__item:nth-of-type(1) {
        min-width: 350px;
    }
}

/* =================================
   受賞ロゴリスト（保護者ポータル・保育施設LP・自治体LP共通）
================================= */
.award-list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding-top: var(--space-lg);
}
.award-list__item {
    display: flex;
    justify-content: center;
    align-items: center;
}
.award-list__item img {
    width: auto;
    height: auto;
    display: block;
    max-height: 60px;
}
@media (min-width: 751px) {
    .award-list {
        gap: var(--space-lg);
    }
    .award-list__item img {
        max-height: 110px;
    }
}

/* =================================
   slick カスタムスタイル（保育施設LP・自治体LP共通）
================================= */
.slick-dots {
    position: absolute;
    bottom: -40px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
.slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 10px;
    padding: 0;
    cursor: pointer;
}
.slick-dots li button {
    width: 40px;
    height: 40px;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
    opacity: 1;
}
.slick-dots li button:before {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--color-line);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
}
.slick-dots li.slick-active button:before {
    background-color: var(--color-text);
}
.slick-custom-prev,
.slick-custom-next {
    width: 50px;
    height: 50px;
    background: none;
    border: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    color: var(--color-text);
    cursor: pointer;
}
.slick-custom-prev {
    left: -40px;
}
.slick-custom-next {
    right: -40px;
}

/* =================================
   事例カルーセル（保育施設LP・自治体LP共通）
================================= */
.case-carousel {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}
.case-carousel__list {
    width: 100%;
    max-width: 356px;
    min-height: 400px;
    margin-left: auto;
    margin-right: auto;
}
.case-carousel__list .slick-list {
    overflow: hidden !important;
}
.case-carousel__list .slick-slide {
    padding: 0 16px;
    box-sizing: border-box;
}
.case-carousel__item {
    display: block;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
}
.case-carousel__pict {
    height: 200px;
    overflow: hidden;
}
.case-carousel__pict img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
    aspect-ratio: 4 / 3;
}
.case-carousel__detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-20) var(--space-md) var(--space-md);
}
.case-carousel__title {
    width: 100%;
    font-family: var(--font-family-title);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: clamp(var(--font-size-body-md), 1.76vw, var(--font-size-body-lg));
}
.case-carousel__text {
    font-size: var(--font-size-body-sm);
    line-height: var(--line-height-lg);
}
.case-carousel__info {
    width: 100%;
    padding: var(--space-10);
    background-color: var(--gray);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-body-sm);
}
@media (min-width: 751px) {
    .case-carousel__list {
        max-width: 704px;
    }
}
@media (min-width: 1060px) {
    .case-carousel__list {
        max-width: 1056px;
    }
}

/* =================================
   保護者の声・保育施設の声・自治体の声（共通）
================================= */
.voice__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
}
.voice__item {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    gap: var(--space-md);
}
.voice__text-container {
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-lg);
}
.voice__title {
    width: 100%;
    font-family: var(--font-family-title);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: clamp(var(--font-size-body-xl), 3.125vw, var(--font-size-title-sm));
    text-align: center;
}
.voice__text {
    font-size: clamp(var(--font-size-body-sm), 1.76vw, var(--font-size-body-lg));
    line-height: var(--line-height-lg);
    width: 100%;
}
.voice__info {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--gray);
    border-radius: var(--radius-sm);
    font-size: clamp(var(--font-size-body-sm), 1.5625vw, var(--font-size-body-md));
}
.voice__button {
    flex: 1;
    width: 100%;
    text-align: center;
}
.voice__pict {
    width: 96%;
}
.section-contents--voice {
    gap: var(--space-4xl);
}
@media (min-width: 751px) {
    .voice__list {
        gap: var(--space-2xl);
    }
    .voice__item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        gap: var(--space-md);
    }
    .voice__item--pict-left {
        flex-direction: row-reverse;
    }
    .voice__title {
        font-size: clamp(var(--font-size-title-xs), 3.125vw, var(--font-size-title-sm));
        text-align: left;
    }
    .voice__pict {
        width: 100%;
        max-width: 540px;
    }
    .voice__button {
        flex: 0 1 auto;
        width: auto;
    }
    .voice__button a {
        width: auto;
    }
}