@charset "utf-8";
/* CSS Document */

/* =========================
   Base
========================= */
*, *::before, *::after { box-sizing: border-box;}
html {
    font-size: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}
body {
    background-color: var(--bg-base);
    color: var(--text-main);
    font-family: "Kosugi Maru", sans-serif;
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.08em;
	line-height: 1.6;
    margin: 0;
    min-height: 100vh;
    position: relative;
}
body::before {
    aspect-ratio: 567 / 572;
    background: url("../img/common/deco_top_left.webp") no-repeat center / contain;
    content: "";
    left: 0;
    max-width: 567px;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 35vw;
    z-index: -1;
}
body::after {
    aspect-ratio: 335 / 567;
    background: url("../img/common/deco_top_right.webp") no-repeat center / contain;
    content: "";
    max-width: 335px;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    width: 20vw;
    z-index: -1;
}
img {
    border-radius: 20px;
    display: block;
    width: 100%;
}
h1,h2,h3,h4 { font-weight: 400;}
p { margin: 0;}
ul,li {
	list-style: none;
	margin: 0;
	padding: 0;
}	
a {
	color: var(--text-link);
    text-decoration: none;
}
a:hover { color: var(--text-hover);}

/* =========================
   Wrapper
========================= */
.wrapper {
    min-height: 100vh;
    position: relative;
}
.wrapper::before {
    aspect-ratio: 823 / 504;
    background: url("../img/common/deco_bottom_left.webp") no-repeat center / contain;
    bottom: 0;
    content: "";
    left: 0;
    max-width: 823px;
    pointer-events: none;
    position: absolute;
    width: 40vw;
    z-index: -1;
}
.wrapper::after {
    aspect-ratio: 648 / 447;
    background: url("../img/common/deco_bottom_right.webp") no-repeat center / contain;
    bottom: 0;
    content: "";
    max-width: 648px;
    pointer-events: none;
    position: absolute;
    right: 0;
    width: 25vw;
    z-index: -1;
}

/* =========================
   Utility
========================= */
.u-text-sm { font-size: 0.85rem;}
.u-text-md { font-size: 1rem;}
.u-text-lg { font-size: 1.125rem;}
.u-pc-block { display: block;}
.u-sp-block { display: inline;}
.u-pc-only { display: block;}
.u-sp-only { display: none;}
@media (max-width: 767px) {
.u-pc-block { display: inline;}
.u-sp-block { display: block;}
.u-pc-only { display: none;}
.u-sp-only { display: block;}
.u-hide-sp { display: none;}
}

/* =========================
   Margin / Padding
========================= */
.mt-20 { margin-top: 20px;}

/* =========================
   Root
========================= */
:root {
    --header-height: 195px;
    --text-main: #574B3F;
    --text-sub: #817972;
    --text-link: #E58530;
    --text-hover: #EDA554;
    --text-white: #FFF;
    --bg-base: #F9F9F7;
    --bg-main: #F6CD92;
    --bg-nav: #EDA554;
    --bg-line: #FFF;
    --bg-white: #FFF;
    --bg-rgb: 249, 249, 247;
    --border-white: #FFF;
    --border-pagenavi: #817972;
    --button-main: #EDA554;
    --button-hover: #F6CD92;
    --shadow-color: #F6CD92;
    --shadow-hover: #EDA554;
    --dot-color: #F6CD92;
}
.t-tsudoi {
    --category-color: #F8C7CA;
    --category-shadow-color: #F19BA0;
    --category-bg: 248, 199, 202;
}
.t-donga-kids {
    --category-color: #CCE19E;
    --category-shadow-color: #9EC55d;
    --category-bg: 204, 225, 158;
}
.t-famisapo {
    --category-color: #BFD4EF;
    --category-shadow-color: #8FB0E0;
    --category-bg: 191, 212, 239;
}
.t-about, .t-azukari {
    --category-color: #F6CD92;
    --category-shadow-color: #EDA554;
    --category-bg: 237, 165, 84;
}
@media (max-width: 767px) {
:root { --header-height: 70px;}
}

/* =========================
   Header
========================= */
.header__inner {    
    display: flex;
    flex-direction: column;
    left: 0;
    padding: 20px 0;
    position: fixed;
    top: 0;
    transition: all .3s ease;
    width: 100%;
    z-index: 1000;
}
.header__logo {
    display: block;
    height: 60px;
    margin: 0 auto;
    width: max-content;
}
.header__logo img {
    border-radius: 0;
    height: 100%;
    width: auto;
}
.header.is-scroll .header__inner {    
    background-color: rgb(var(--bg-rgb), 0.7);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.header.is-scroll .container {
    align-items: center;
    display: flex;
    justify-content: space-between;
    max-width: none;
    padding: 0 20px;
    width: 100%;
}
.header.is-scroll .header__logo {
    height: 50px;
    margin: 0;
}
.header.is-scroll .header-nav {
    flex: 1;
    margin-top: 0;
}
.header.is-scroll .header-nav__list {
    display:flex;
    justify-content: flex-end;
    gap: 20px;
    flex-wrap: nowrap;
}
.header.is-scroll .header-nav__item { flex: 0 0 auto;}
.header.is-scroll .header-nav__link { flex-direction: row;}
.header.is-scroll .header-nav__icon::before { margin: 0 5px 0 0;}
@media (max-width: 1240px) {
.header.is-scroll .header__inner { padding: 15px 0;}
.header.is-scroll .header__logo { height: 40px;}
.header.is-scroll .header-nav__list { gap: 5px;}
.header.is-scroll .header-nav__text { font-size: 0.875rem;}
}
@media (max-width: 1080px) {
.header .container { padding: 0 0 0 10px;}
.header__inner {
    background-color: rgb(var(--bg-rgb), 0.7);
    left: 0;
    line-height: 1.6;
    padding: 10px 0;
    position: fixed;
    top: 0;
    width: 100%;
    text-align: left;
}
.header__logo {
    display: inline-block;
    height: 40px;
    position: static;
}
.header.is-scroll .header-nav__list { gap: 0;}
}

/* =========================
   navbar
========================= */
.header-nav {
	height: auto;
	left: 0;
    margin-top: 15px;
	position: relative;
	text-align: center;
	transition: transform 0.3s ease-in;
	top: 0;
	z-index: 1000;
}
.header-nav__list {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.header-nav__item { flex: 1 1 0;}
.header-nav__link {
    align-items: center;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.header-nav__text {
    align-items: center;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    font-weight: bold;
    justify-content: center;
}
.header-nav__icon {
    display: block;
    flex-shrink: 0;
    height: 45px;
}
.header-nav__icon::before {
    content: "";
    display: block;
    height: 40px;
    margin: 0 auto 5px auto;
    transition: transform 0.3s ease;
    width: 40px;
}
.header-nav__link--home .header-nav__icon::before { background: url(../img/common/icon_home.svg) no-repeat center / contain;}
.header-nav__link--about .header-nav__icon::before { background: url(../img/common/icon_about.svg) no-repeat center / contain;}
.header-nav__link--tsudoi .header-nav__icon::before { background: url(../img/common/icon_tsudoi.svg) no-repeat center / contain;}
.header-nav__link--donga-kids .header-nav__icon::before { background: url(../img/common/icon_donga-kids.svg) no-repeat center / contain;}
.header-nav__link--famisapo .header-nav__icon::before { background: url(../img/common/icon_famisapo.svg) no-repeat center / contain;}
.header-nav__link--azukari .header-nav__icon::before { background: url(../img/common/icon_azukari.svg) no-repeat center / contain;}
.header-nav__link--news .header-nav__icon::before { background: url(../img/common/icon_news.svg) no-repeat center / contain;}
.navbar-toggle, #toggle { display: none;}
@media (min-width: 1180px) {
.header-nav__link:hover {
    box-shadow: 0 3px 6px rgb(var(--rgb-black), 0.15);
    transform: translateY(-3px);
}
.header-nav__link:hover .header-nav__icon::before { transform: translateY(-3px);}
}
@media (max-width: 1080px) {
.header-nav {
	left: -30%;
	margin: 0;
	overflow-y: hidden;
	padding-top: 0;
	position: fixed;
	text-align: left;
	width: 30%;
}
.header-nav__list {
    justify-content: flex-start;
    flex-direction: column;
    gap: 0;
}
.header-nav__item {
	border-bottom: 1px solid var(--border-white);
    flex: none;
	margin: 0;
	width: 100%;
}
.header-nav__item::before { display: none;}
.header-nav__link {
	background-color: var(--bg-main);
    border: none;
	border-radius: 0;
    flex-direction: row;
    height: auto;
	padding: 10px 15px;
    transition: none;
    width: 100%;
}
.header-nav__text { align-items: flex-start;}
.header-nav__icon::before { margin: 0 15px 0 0;}
.navbar-toggle {
	background-color: var(--bg-nav);
	display: block;
	height: 40px;
	right: 10px;
	padding: 0 8px;
	position: fixed;
	top: 10px;
	z-index: 999;
	border-radius: 5px;
}
.menuicon {
	cursor: pointer;
	display: block;
	height: 100%;
	position: relative;
	transition: transform .3s ease-in;
	width: 25px;
}
.menuicon > span {
	background-color: var(--bg-line);
	border-radius: 1px;
	display: block;
	height: 0.2em;
	margin-top: -0.3em;
	position: absolute;
	top: 55%;
	transition: transform .3s ease;
	width: 100%;
}
.menuicon > span:before, .menuicon > span:after {
	background-color: var(--bg-line);
	border-radius: 1px;
	content: "";
	height: 100%;
	position: absolute;
	transition: transform .3s ease-in;
	width: 100%;
}
.menuicon > span:before { transform: translateY(-0.6em);}
.menuicon > span:after { transform: translateY(0.6em);}
#toggle:checked + .navbar-toggle .menuicon { transform: rotate(45deg);}
#toggle:checked + .navbar-toggle span:before, #toggle:checked + .navbar-toggle span:after {
	transform: rotate(90deg);
}
#toggle:checked ~ .header-nav {	transform: translateX(100%);}
}
@media screen and (max-width: 767px) {
.header-nav {
	left: -70%;
	margin: 0;
	overflow-y: hidden;
	padding-top: 0;
	position: fixed;
	text-align: left;
	width: 70%;
}}

/* =========================
   Main
========================= */
main { padding-top: var(--header-height);}

/* =========================
   Swiper
========================= */
.swiper {
    box-sizing: border-box;
    overflow: visible;
    padding-bottom: 5px !important;
    width: 100%;
}
.swiper-slide img {
    border-radius: 20px;
    box-shadow: 5px 5px 0 0 var(--shadow-color);
    display: block;
    width: 100%;
}
.swiper-button-prev, .swiper-button-next {
    background-color: var(--bg-main);
    border-radius: 50%;
    height: 40px !important;
    width: 40px !important;
}
.swiper-button-prev::after, .swiper-button-next::after {
    color: var(--text-main);
    font-size: 1.25rem !important;
    font-weight: bold;
}
@media screen and (max-width: 767px) {
.swiper-button-prev, .swiper-button-next {
    height: 35px !important;
    width: 35px !important;
}
.swiper-button-prev::after, .swiper-button-next::after { font-size: 0.85rem;}
}

/* =========================
   Fade
========================= */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-up.is-show {
    opacity: 1;
    transform: translateY(0);
}
.delay-1 { transition-delay: 0.05s;}
.delay-2 { transition-delay: 0.1s;}
.delay-3 { transition-delay: 0.15s;}
.delay-4 { transition-delay: 0.2s;}
.delay-5 { transition-delay: 0.25s;}
.delay-6 { transition-delay: 0.3s;}
.delay-7 { transition-delay: 0.35s;}
.delay-8 { transition-delay: 0.4s;}
.delay-9 { transition-delay: 0.45s;}
.delay-10 { transition-delay: 0.5s;}

/* =========================
   Container
========================= */
.container {
	margin: 0 auto;
	max-width: 1200px;
    padding: 0 30px;
    width: 100%;
}
@media (max-width: 1200px) {
.container { max-width: none;}
}

/* =========================
   Layout Section
========================= */
.l-section { margin-top: 60px;}
@media (max-width: 767px) {
.l-section { margin-top: 40px;}
}

/* =========================
   Component Section
========================= */
.c-section-lead {
    font-size: 1.625rem;
    margin: 0;
    text-align: center;
}
.c-section-sub {
    font-size: 1.125rem;
    margin: 20px 0 0 0;
    text-align: center;
}
.c-section-text {
    line-height: 1.8;
    margin: 30px 0 0 0;
}
.c-section-text--center { text-align: center;}
.c-section-text__inner {
    margin: 0 auto;
    max-width: 100%;
    text-align: left;
    width: fit-content;
}
.c-section-title {
    align-items: center;
    display: flex;
    margin: 0;
    width: 100%;
}
.c-section-title::before, .c-section-title::after {
    background-image: radial-gradient(var(--category-color) 4px, transparent 4px);
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: "";
    flex-grow: 1;
    height: 8px;
}
.c-section-title::before { background-position: right;}
.c-section-title::after { background-position: left;}
.c-section-title__text {
    font-size: 1.75rem;
    white-space: nowrap;
}
.c-section-title__text::before {
    content: "";
    display: block;
    height: 80px;
    margin: 0 auto 5px auto;
    width: 80px;
}
.news .c-section-title__text::before { background: url(../img/common/icon_news.svg) no-repeat center / contain;}
.about .c-section-title__text::before { background: url(../img/common/icon_about.svg) no-repeat center / contain;}
.access .c-section-title__text::before { background: url(../img/common/icon_access.svg) no-repeat center / contain;}
.npo .c-section-title__text::before { background: url(../img/common/icon_npo.svg) no-repeat center / contain;}
.service .c-section-title__text::before { background: url(../img/common/icon_service.svg) no-repeat center / contain;}
.member .c-section-title__text::before { background: url(../img/common/icon_member.svg) no-repeat center / contain;}
.flow .c-section-title__text::before { background: url(../img/common/icon_flow.svg) no-repeat center / contain;}
.guide .c-section-title__text::before { background: url(../img/common/icon_guide.svg) no-repeat center / contain;}
.c-section-body { padding: 0 60px;}
.c-section-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 30px 0 0 0;
}
.c-section-list > li {
    position: relative;
    padding-left: 20px;
}
.c-section-list > li::before {
    background-color: var(--bg-main);
    border-radius: 50%;
    content: "";
    height: 6px;
    left: 0;
    position: absolute;
    top: 10px;
    width: 6px;
}
.c-section-image {
    width: 80%;
}
.c-section-image {
    width: min(100%, 700px);
    margin-inline: auto;
    margin-top: 40px;
}
.c-section-image img {
    display: block;
    height: auto;
    width: 100%;
}
@media (max-width: 767px) {
.c-section-lead { font-size: 1.375rem;}
.c-section-title__text {
    font-size: 1.5rem;
    white-space: normal;
}
.c-section-body { padding: 0;}
.c-section-list { padding-left: 0;}
}

/* =========================
   Media
========================= */
.media {
    align-items: center;
	display: flex;
    margin-top: 40px;
	gap: 60px;
}
.media__body { flex: 0 0 calc(55% - 60px);}
.media__image {
    border-radius: 20px;
    box-shadow: 5px 5px 0 0 var(--category-shadow-color);
    display: block;
    flex: 1;
    height: auto;
    margin-top: 30px;
    width: 100%;
}
.media__title {
    font-size: 1.375rem;
    margin: 0;
}
.media__lead { margin-top: 20px;}
.media__sub { margin-top: 30px;}
.media__text { margin-top: 20px;}
.media.t-tsudoi {
    background-color: var(--category-color);
    border-radius: 20px;
    margin-top: 60px;
    padding: 40px;
}
@media (max-width: 767px) {
.media {
	flex-direction: column !important;
	gap: 40px;
}
.media__body, .media__image {
	flex: auto;
	width: 100%;
}
.media__title { font-size: 1.25rem;}
}

/* =========================
   Button
========================= */
.c-button-area { margin-top: 40px;}
.c-button-area--center {
    display: flex;
    justify-content: center;
}
.c-button {
    align-items: center;
    background-color: var(--button-main);
    border-radius: 999px;
    box-shadow: 5px 5px 0 0 var(--shadow-color);
    color: var(--text-white);
    display: inline-flex;
    justify-content: space-between;
    line-height: normal;
    max-width: 300px;
    min-width: 260px;
    overflow: hidden;
    padding: 20px 30px;
    position: relative;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.c-button i {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	transition: transform 0.3s ease;
}
.c-button:hover {
    background-color: var(--button-hover);
    box-shadow: 5px 5px 0 0 var(--shadow-hover);
    color: var(--text-main);
    transform: translateY(3px);
}
.c-button:hover i { transform: translateX(5px);}

/* =========================
   Table
========================= */
.c-table {
    margin: 60px 0 0 0;
    width: 100%;
}
.t-about .c-table { margin: 30px 0 0 0;}
.c-table__item {
    align-items: flex-start;
    background-image: radial-gradient(var(--category-color) 2px, transparent 2px);
    background-position: bottom;
    background-size: 16px 16px;
    background-repeat: repeat-x;
    display: flex;
    margin: 0;
    padding: 10px 20px 25px 20px;
}
.c-table__item:first-child {
    background-image:
    radial-gradient(var(--category-color) 2px, transparent 2px),
    radial-gradient(var(--category-color) 2px, transparent 2px);
    background-position: 
    top,
    bottom;
    background-repeat: repeat-x;
}
.c-table__item:first-child { padding: 25px 20px;}
.c-table__term {
    align-items: center;
	display: flex;
	flex: 0 0 25%;
}
.c-table__desc { margin: 0;}
.t-famisapo .c-table__desc-title { margin-top: 10px;}
.t-famisapo .c-table__desc li::before, .t-famisapo .c-table__desc-title::before {
    content: "●";
    color: var(--category-color);
    font-size: 0.625rem;
    margin-right: 10px;
}
.guide-table-wrapper {
    display: block;
    margin: 10px 0;
    overflow-x: auto;
    table-layout: fixed;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}
.guide-table {
    background-color: var(--bg-white);
    border-collapse: collapse;
    color: var(--text-main);
    font-size: 1rem;
    text-align: center;
    white-space: nowrap;
    width: 100%;
}
.guide-table__th { font-weight: normal;}
.guide-table__th, .guide-table__td {
    border: 2px solid var(--category-color);
    padding: 10px;
}
@media (max-width: 767px) {
.c-table__item { flex-direction: column;}
.c-table__term {
	flex: 1;
	width: 100%;
}
.c-table__desc { margin-top: 5px;}
.info-table { width: max-content;}
.info-table__th:first-child, .info-table__td:first-child {
    width: auto;
}}

/* =========================
   Circle
========================= */
.circle-list {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin-top: 60px;
}
.circle-list__item {
    align-items: center;
    aspect-ratio: 1;
    background-color: var(--category-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.circle-list__item--sm {
    border-radius: 50%;
    padding: 15px;
    width: 280px;
}
.circle-list__item--lg {
    aspect-ratio: auto;
    border-radius: 50%;
    padding: 40px 30px;
    width: calc((100% - 80px) / 3);
}
.circle-list__text { font-size: 1.125rem;}
.circle-list__text span {
    display: block;
    margin-top: 10px;
}
.circle-list__icon::before {
    content: "";
    display: block;
    height: 50px;
    margin: 0 auto 5px auto;
    width: 50px;
}
.t-tsudoi .circle-list__icon--diaper::before { background: url(../img/common/icon_diaper.svg) no-repeat center / contain;}
.t-tsudoi .circle-list__icon--toilet::before { background: url(../img/common/icon_toilet.svg) no-repeat center / contain;}
.t-donga-kids .circle-list__icon--playground::before { background: url(../img/common/icon_playground.svg) no-repeat center / contain;}
.t-donga-kids .circle-list__icon--baby::before { background: url(../img/common/icon_baby.svg) no-repeat center / contain;}
.t-donga-kids .circle-list__icon--baby::before { background: url(../img/common/icon_baby.svg) no-repeat center / contain;}
.t-donga-kids .circle-list__icon--event::before { background: url(../img/common/icon_event.svg) no-repeat center / contain;}
.t-donga-kids .circle-list__icon--breastfeeding::before { background: url(../img/common/icon_breastfeeding.svg) no-repeat center / contain;}
.t-donga-kids .circle-list__icon--eat_drink::before { background: url(../img/common/icon_eat_drink.svg) no-repeat center / contain;}
.t-donga-kids .circle-list__icon--babychair::before { background: url(../img/common/icon_babychair.svg) no-repeat center / contain;}
.t-donga-kids .circle-list__icon--babyseat::before { background: url(../img/common/icon_babyseat.svg) no-repeat center / contain;}
@media (max-width: 767px) {
.circle-list {
    align-content: center;
    align-items: center;
    gap: 30px;
    flex-direction: column;
    margin-top: 40px;
}
.circle-list__item--sm, .circle-list__item--lg { width: 100%;}
}

/* =========================
   Gallery
========================= */
.gallery {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 60px;
}
.gallery > * { width: calc((100% - 80px) / 3);}
.gallery__item img {
    box-shadow: 5px 5px 0 0 var(--category-shadow-color);
    display: block;
    height: auto;
    width: 100%;
}
@media screen and (max-width: 767px) {
.gallery { margin-top: 40px;}
.gallery > * { width: 100%;}
}

/* =========================
   囲みボックス
========================= */
.c-box {
    border-radius: 999px;
    background-color: var(--category-color);
    display: block;
    margin-top: 40px;
    padding: 20px;
    text-align: center;
}

/* =========================
   丸数字
========================= */
.c-number {
    align-items: center;
    aspect-ratio: 1 / 1;
    background-color: var(--category-color);
    border-radius: 50%;
    display: inline-flex;
    font-weight: bold;
    justify-content: center;
    margin-right: 15px;
    width: 30px;
}

/* =========================
   Page Titel
========================= */
.image-card {
    border-radius: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    position: relative;
    width: 100%;
}
.image-card__image {
    aspect-ratio: 16 / 9;
    box-shadow: 5px 5px 0 0 var(--category-shadow-color);
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}
.image-card__badge {
    align-items: center;
    background-color: rgb(var(--category-bg), 0.95);
    border-radius: 20px;
    bottom: 40px;
    display: flex;
    gap: 10px;
    left: 70px;
    padding: 30px;
    position: absolute;
}
.image-card__badge--right {
    left: auto;
    right: 70px;
}
.image-card__icon {
    flex-shrink: 0;
    height: 80px;
    width: 80px;
}
.image-card__title {
    font-size: 1.625rem;
    font-weight: bold;
    margin: 0;
    white-space: nowrap;
}
.image-card--azukari { margin-top: 80px;}
@media (max-width: 767px) {
.image-card {
    margin: 0 auto 80px auto;
    padding: 0 25px 0 35px;
}
.image-card__badge {
    bottom: -40px;
    left: 20px;
    padding: 10px 15px;
}
.image-card__badge--right {
    left: 20px;
    right: auto;
}
.image-card__icon {
    height: 40px;
    width: 40px;
}
.image-card__title { font-size: 1.25rem;}
.image-card--azukari { margin-top: 60px;}
}

/* =========================
   Title
========================= */
.title-bar {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    gap: 20px;
    margin-top: 40px;
    width: 100%;
}
.title-bar__icon-wrap {
    align-items: center;
    display: flex;
    flex-shrink: 0;
}
.title-bar__icon {
    height: 40px;
    object-fit: contain;
    width: 40px;
}
.title-bar__title {
    flex-shrink: 0;
    font-size: 1.375rem;
    margin: 0;
    white-space: nowrap;
}
.title-bar::after {
    background-image: radial-gradient(var(--category-color) 2px, transparent 2px);
    content: "";
    flex-grow: 1;
    height: 8px;
    background-position: left center;
    background-repeat: repeat-x;
    background-size: 16px 16px;
    align-self: center;
    margin-top: 4px;
}
@media (max-width: 767px) {
.title-bar__title { font-size: 1.25rem;}
.title-bar span { display: block;}
}

/* =========================
   Works
========================= */
.works__grid {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 40px;
    gap: 40px;
}
.works__item {
    border-radius: 20px;
    display: flex;
    transition: transform 0.5s;
}
.works__item--col3 { width: calc((100% - 40px * 2) / 3);}
.works__item--col3:hover {
    opacity: 0.8;
    transform: translateY(3px);
}
.works__item--col4 { width: calc((100% - 40px * 3) / 4);}
.works__item img { border-radius: 20px;}
.works__body {
    border-radius: 20px;
    color: var(--text-main);
    padding: 30px;
    text-align: center;
}
.works__header {
    align-items: center;
    display: flex;
    gap: 10px;
}
.works__icon {
    flex-shrink: 0;
    height: 80px;
    width: 80px;
}
.works__title {
    font-size: 1.375rem;
    margin: 30px 0 20px 0;
}
.works__header--center {
    flex-direction: column;
    justify-content: center;
}
.works__title--center {
    text-align: center;
    margin: 10px 0 20px 0;
}
.works__body--tsudoi {
    background-color: var(--category-color);
    box-shadow: 5px 5px 0 0 var(--category-shadow-color);
}
.works__body--donga-kids {
    background-color: var(--category-color);
    box-shadow: 5px 5px 0 0 var(--category-shadow-color);
}
.works__body--famisapo {
    background-color: var(--category-color);
    box-shadow: 5px 5px 0 0 var(--category-shadow-color);
}
.works__body--azukari {
    background-color: var(--category-color);
    box-shadow: 5px 5px 0 0 var(--category-shadow-color);
}
.works-azukari { width: 100%;}
.works-azukari > a {
    align-items: center;
    background-color: var(--category-color);
    border-radius: 20px;
    box-shadow: 5px 5px 0 0 var(--category-shadow-color);
    color: var(--text-main);
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 40px;
    padding: 30px;
    transition: transform 0.5s;
}
.works-azukari > a:hover {
    opacity: 0.8;
    transform: translateY(3px);
}
.works-azukari__aside { flex: 3 0 0%;}
.works-azukari__image {
    border-radius: 20px;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.works-azukari__main {
    align-items: center;
    display: flex;
    flex: 4 0 0%;
    flex-direction: column;
    text-align: center;
}
.works-azukari .works__title { margin: 0 0 20px 0;}
@media (max-width: 767px) {
.works__grid { flex-direction: column;}
.works__item {
    flex-direction: column;
    width: 100%;
}
.works__header {
    align-items: center;
    gap: 15px;
    justify-content: center;
    width: 100%;
}
.works__icon {
    height: 70px;
    width: 70px;
}
.works__title {
    font-size: 1.25rem;
    margin: 25px 0 20px 0;
}
.works-azukari > a {
    flex-direction: column;
    gap: 0;
}
.media-box__aside--right { display: none;}
.works-azukari .works__title { margin: 20px 0 10px 0;}
}

/* =========================
   News
========================= */
.news__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 40px;
    gap: 40px;
}
.news__item {
    transition: transform 0.5s;
    width: calc((100% - 40px * 3) / 4);
}
.news__item:hover {
    box-shadow: 0 3px 6px rgb(var(--rgb-black), 0.15);
    opacity: 0.8;
    transform: translateY(3px);
}
.news__item i {
    color: var(--text-link);
    margin-left: 5px;
    transition: transform 0.5s;
}
.news__item:hover i { transform: translateX(3px);}
.news--list .news__body { padding: 0 10px;}
.news--list .news__date {
    color: var(--text-main);
    display: block;
    font-size: 0.875rem;
    margin: 20px 0 10px 0;
}
.news--list .news__title { margin-top: 5px;}
.news__img-wrapper {
    border-radius: 20px;
    box-shadow: 5px 5px 0 0 var(--shadow-color);
    height: 200px; 
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
}
.news__img {
    height: 100%;
    object-fit: cover;
}
.news__inner {
    background: var(--bg-white);
    border: 3px solid var(--category-color);
    border-radius: 20px;
    margin: 60px auto 0 auto;
    padding: 40px;
    width: 80%;
}
.news--detail .news__title {
    align-items: center;
    background-color: var(--category-color);
    border-radius: 999px;
    display: flex;
    font-size: 1.125rem;
    gap: 10px;
    justify-content: center;
    margin: 0;
    padding: 10px 30px;
}
.news--detail .news__title::before {
    background: url("../img/common/icon_use.svg") no-repeat center / contain;
    content: "";
    height: 40px;
    width: 40px;
}
.news--detail .news__date {
    color: var(--text-main);
    display: block;
    padding: 20px;
    text-align: right;
}
.news__content { padding: 0 20px;}
@media (max-width: 767px) {
.news__grid { flex-direction: column;}
.news__item { width: 100%;}
.news__inner {
    margin: 40px 0 0 0;
    padding: 30px;
    width: 100%;
}
.news__body { text-align: center;}
}

/* =========================
   Pagenavi
========================= */
.wp-pagenavi {
    margin: 40px; 0 10px 0;
    text-align: center;
}
.wp-pagenavi a, .wp-pagenavi span {
    border: 1px solid var(--category-color);
    border-radius: 4px;
    margin: 0 4px;
    padding: 8px 16px;
}
.wp-pagenavi a:hover { background-color: var(--category-color);}
.wp-pagenavi .current {
    background-color: var(--category-color);
    border: 1px solid var(--border-pagenavi);
    color: var(--bg-white);
}
.nav-links {
    align-items: center;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}
.nav-links .page-numbers {
    align-items: center;
    border: 1px solid var(--category-color);
    border-radius: 4px;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    text-decoration: none;
    width: 40px;
}
.nav-links .page-numbers.current {
    background-color: var(--text-link);
    border-color: var(--category-color);
    color: var(--text-white);
}
.nav-links a.page-numbers:hover { background-color: var(--category-color);}

/* =========================
   Access
========================= */
.access__body {
    align-items: flex-start;
    display: flex;
    gap: 60px;
    margin-top: 40px;
}
.access__info { flex: 35;}
.access__map { flex: 65;}
.access__name { margin-bottom: 5px;}
.access__name span {
    font-size: 1.25rem;
    font-weight: bold;
}
.access__address i { margin-right: 5px;}
.access__method-title {
    background-color: var(--category-color);
    border-radius: 999px;
    display: inline-flex;
    margin: 30px 0 15px 0;
    padding: 10px 20px;
}
.access__image {
    border-radius: 20px;
    box-shadow: 5px 5px 0 0 var(--category-shadow-color);
    display: block;
    height: auto;
    margin-top: 30px;
    width: 100%;
}
.access__iframe {
    border-radius: 20px;
    height: 550px !important;
    width: 100% !important;
}
@media (max-width: 767px) {
.access__body {
    flex-direction: column;
    gap: 40px;
}
.access__info, .access__map {
    flex: none;
    width: 100%;
}
.access__iframe { height: 350px !important;}
.access-method { margin-top: 30px;}
.access-method__body {
    flex-direction: column;
    gap: 30px;
}
.access-method__item {
    flex: none;
    width: 100%;
}
.access-method__title { justify-content: center;}
}

/* =========================
   About
========================= */
.about__title {
    color: var(--text-sub);
    font-size: 1.125rem;
    margin: 30px 0 0 0;
}
.about__title::after {
    content: "";
    flex-grow: 1;
    height: 8px;
    background-image: radial-gradient(var(--dot-color) 4px, transparent 4px);
    background-position: center;
    background-repeat: repeat-x;
    background-size: 32px 32px;
}

/* =========================
   Famisapo
========================= */
.register {
    border: 3px solid var(--category-color);
    border-radius: 20px;
    margin-top: 40px;
    padding: 40px;
    position: relative;
}
.register__title {
    align-items: center;
    background-color: var(--category-color);
    border-radius: 0 20px 20px 0;
    display: flex;
    flex-direction: column;
    font-size: 1.125rem;
    gap: 10px;
    justify-content: center;
    left: 0;
    padding: 30px 15px;
    position: absolute;
    top: 43px;
}
.register__title-icon img { width: 40px;}
.register__title-text {
    writing-mode: vertical-rl;
    text-orientation: upright;
}
.register__steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
}
.register__step { position: relative;}
.register__step:not(:last-child)::after {
    color: var(--category-color);
    content: "▶";
    font-size: 30px;
    position: absolute;
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
}
.register__circle {
    align-items: center;
    aspect-ratio: 1;
    background: #b8d0ef;
    border-radius: 50%;
    display: flex;
    gap: 10px;
    flex-direction: column;
    padding: 10px;
    width: 200px;
}
.register__icon { margin-top: 20px;}
.register__icon img { width: 60px;}
.register__label { font-size: 1.125rem;}
.register__note {
    margin-top: 40px;
    text-align: center;
}
@media (max-width:768px){
.register {
    padding: 30px;
    border-radius: 30px;
}
.register__title {
    border-radius: 20px;
    height: auto;
    flex-direction: row;
    padding:15px;
    position: static;
    width: 100%;
    margin-bottom: 30px;
}
.register__title-text { writing-mode: horizontal-tb;}
.register__title-icon img { width: 32px;}
.register__steps {
    flex-direction: column;
    gap: 40px;
}
.register__step:not(:last-child)::after{
    bottom: -45px;
    content: "▼";
    font-size: 26px;
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
}
.register__circle {
    margin: auto;
    width: 180px;
}
.register__icon img { width: 50px;}
.register__label { font-size: 1.125rem;}
}

/* =========================
   card
========================= */
.card-container {
    border: 3px solid var(--category-color);
    border-radius: 20px;
    display: grid;
    justify-content: center;
    margin: 60px auto 0 auto;
    max-width: 100%;
    padding: 60px 40px 40px 40px;
    position: relative;
    width: max-content;
}
.card-title {
    align-items: center;
    background-color: var(--category-color);
    border-radius: 999px;
    display: flex;
    gap: 10px;
    justify-content: center;
    left: 50%;
    padding: 10px 30px;
    position: absolute;
    top: 0;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}
.card-title::before {
    content: "";
    flex-shrink: 0;
    height: 40px;
    width: 40px;
}
.t-tsudoi .card-title--use::before, .t-famisapo .card-title--use::before {
    background: url("../img/common/icon_use.svg") no-repeat center / contain;
}
.t-famisapo .card-title--helper::before {
    background: url("../img/common/icon_helper.svg") no-repeat center / contain;
}
.card {
    align-items: center;
    display: flex;
    padding: 0 20px 20px 20px;
    position: relative;
    gap: 10px;
}
.card-container--one-column {
    gap: 15px 0; 
    grid-template-columns: 1fr;
}
.card-container--two-column {
    gap: 15px 40px;
    grid-template-columns: repeat(2, 1fr);
}
.card-container--three-column {
    gap: 15px 40px; 
    grid-template-columns: repeat(3, 1fr);
}
.card-use::before {
    content: "";
    flex-shrink: 0;
    height: 40px;
    width: 40px;
}
.card-use::after, .card-flow::after {
    background-image: radial-gradient(var(--category-color) 2px, transparent 2px);
    background-position: left center;
    background-repeat: repeat-x;
    background-size: 16px 16px;
    bottom: 0;
    content: "";
    height: 8px;
    left: 0;
    position: absolute;
    right: 0;  
}
.t-tsudoi .card-use::before, .t-famisapo .card-use::before {
    background: url("../img/common/icon_use_s.svg") no-repeat center / contain;
}
.card-frame {
    border: 3px solid var(--category-color);
    border-radius: 20px; 
    padding-top: 20px;
    text-align: center;
}
.card-text { flex-grow: 1;}
@media (max-width: 767px) {
.card-container {
    padding: 50px 20px 40px 20px;
    width: 100%;
}
.card-container--two-column, .card-container--three-column { grid-template-columns: 1fr;}
.card { align-items: start;}
.card-use { padding: 0 10px 20px 10px;}
}

/* =========================
   Contact
========================= */
.contact {
    background-color: var(--category-color);
    border-radius: 20px;
    margin-top: 60px;
    padding: 30px;
    text-align: center;
}
.contact__title {
    align-items: center;
    display: flex;
    font-size: 1.125rem;
    justify-content: center;
    gap: 10px;
}
.contact__title::before, .contact__title::after {
    content: "";
    display: inline-block;
    height: 60px;
    width: 60px;    
}
.contact__title::before { background: url("../img/common/icon_contact_left.svg") no-repeat center / contain;}
.contact__title::after { background: url("../img/common/icon_contact_right.svg") no-repeat center / contain;}
.contact__text { margin: 20px 0;}
.contact__tel {
    font-size: 1.5rem;
    font-weight: bold;
    align-items: center;
    display: inline-flex;
    justify-content: center;
    gap: 10px;
}
.contact__tel::before {
    background: url("../img/common/icon_tel.svg") no-repeat center / contain;
    content: "";
    display: inline-block;
    height: 40px;
    width: 40px;    
}

/* =========================
   Instagram
========================= */
.instagram-feed { margin-top: 30px;}

/* =========================
   Footer
========================= */
.footer {
    padding: 80px 30px 30px 30px;
    text-align: center;
}
.footer__copyright {
    font-family: "Kosugi Maru", sans-serif;
    font-style: normal;
    font-weight: 400;
}
.footer__button {
    align-items: center;
    background-color: var(--button-hover);
    border-radius: 50%;
    bottom: 15px;
    display: flex;
    justify-content: center;
    font-weight: bold;
    height: 170px;
    position: fixed;
    right: 15px;
    transition: background-color 0.5s, transform 0.5s, box-shadow 0.5s;
    z-index: 9999;
    width: 170px;
}
.footer__button i {
    font-size: 1.25rem;
    margin: 10px 0 5px 0;
}
.footer__button-link {
    color: var(--text-main);
    display: block;
    padding: 10px;
}
.footer__button-link:hover { color: var(--text-main);}
.footer__button-number { font-size: 1rem;}
.footer__button:hover {
    background-color: var(--button-main);
    box-shadow: 0 3px 6px rgb(var(--rgb-black), 0.15);
    transform: translateY(3px);
}
@media (max-width: 767px) {
.footer {
    border-top: 5px dotted var(--dot-color);
    margin-top: 60px;
    padding: 10px 30px 100px 30px;
}
.footer__button {
    background-color: var(--button-hover);
    bottom: 0;
    border-radius: 0;
    height: auto;
    left: 0;
    position: fixed;
    right: 0;
    transform: none;
    transition: background-color 0.2s;
    width: 100%;
}
.footer__button i { margin: 0 10px 0 0;}
.footer__button:hover {
    box-shadow: none;
    transform: none; 
}
.footer__button-link {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px 10px 10px 15px;
}}

/* =========================
   Page-top
========================= */
.page-top {
	bottom: 180px;
	position: fixed;
	right: 15px;
    z-index: 9999;
}
.page-top__link {
    color: var(--text-link);
    font-size: 2rem;
	position: relative;
}
.page-top__link:hover { color: var(--text-hover);}
@media (max-width: 767px) {
.page-top { bottom: 10px;}
}

/* =========================
   電話リンク
========================= */
@media (hover: hover) {
a[href^="tel:"] {
    color: inherit;
    cursor: default;
    pointer-events: none;
    text-decoration: none;
}}