/* ===================================
    南平岸学童クラブ - custom overrides
====================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Zen+Maru+Gothic:wght@700&display=swap');

/* ===================================
    Theme base (from the template's e-learning demo styles; the site overrides follow below)
====================================== */
/* variable */
:root {     
    --base-color: #d5d52b; 
    --dark-gray: #313e3b;
    --medium-gray: #828c8a;
    --yellow: #d5d52c;
    --extra-medium-gray: #e4e4e4;
    --alt-font: 'Space Grotesk', sans-serif;
    --primary-font: 'Inter', sans-serif;
}
/* reset */
body {
    font-size: 17px;
    line-height: 30px;
    overflow-x: hidden;
}
a:hover { 
    color: var(--dark-gray); 
}
.top-25 {
    top: 25%;
}
.mt-minus-12 {
    margin-top: -12%;
}
.mt-minus-1 {
    margin-top: -1%;
}
.left-minus-200px {
    left: -200px;
}
.mt-minus-4 {
    margin-top: -4px;
}
.bottom-minus-320px {
    bottom: -320px;
}
.terms-condition .box:before {
    border-color: #e4e4e4;
    background-color: var(--white);
    top: 1px;
}
.terms-condition .box:after {
    top: 5px;
}
/* border color */
.border-color-transparent-white-very-light {
    border-color: rgba(255, 255, 255, 0.2) !important;
}
.border-color-transparent-dark-very-light {
    border-color: var(--extra-medium-gray) !important;
}
/* bg gradient color */
.bg-gradient-deep-zuccini-green {
    background-image: linear-gradient(to right bottom, #19493e, #164339, #143e34, #113830, #0f332b);
}
.bg-gradient-aztec-green {
    background-image: linear-gradient(to right bottom, #313e3b, #2e3b38, #2c3835, #293532, #27322f);
}
.bg-gradient-tranquil-white { 
    background-image: linear-gradient(to bottom, #ffffff, #f7f9f9, #f3f6f6, #eff3f3, #ecf1f1);
}
.bg-yellow {
    background-color: var(--yellow);
}
.bg-tranquil {
    background-color: #f3f8f8;
}
.bg-gradient-dark-transparent {
    background: -webkit-gradient(linear, left bottom, left top, color-stop(7%, #36332e), to(transparent));
    background: linear-gradient(to top, #262a29 0%, transparent 100%);
}
/* header */
.navbar .navbar-nav .nav-link {
    font-size: 18px;
}
header .navbar-brand img {
    max-height: 39px;
}
header .navbar-brand {
    padding: 25px 0;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu {
    width: 335px;
    padding: 25px 35px;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a {
    padding: 15px 30px 21px 0;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a p {
    font-size: 14px;
    line-height: normal;
        font-weight: 400;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a span {
    font-size: 17px;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a i {
    color: var(--dark-gray);
    font-size: 34px;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li.active > a {
    opacity: 0.7;
}
/* icon */
.icon-extra-medium {
    font-size: 22px;
}
.video-icon-large .video-icon {
    width: 70px;
    height: 70px;
    font-size: 18px;
}
.video-icon-large .video-icon .video-icon-sonar .video-icon-sonar-bfr {
    width: 120px;
    height: 120px;
}
.video-icon-large .video-icon .video-icon-sonar .video-icon-sonar-afr {
    width: 90px;
    height: 90px;
}
.medium-icon li, .small-icon li {
    margin: 0 3px;
}
/* review  */
.review-star-icon i {
    letter-spacing: 1px;
}
/* btn */
.btn {
    font-family: var(--primary-font);
    text-transform: none;
    letter-spacing: 0;
}
.btn.btn-switch-text.btn-extra-large > span {
    padding: 15px 38px;
    font-size: 17px; 
}
.btn.btn-switch-text.btn-large > span {
    padding: 13px 32px;
    font-size:15px;
}
.btn.btn-switch-text.btn-medium > span {
    padding: 12px 30px;
    font-size:14px;
}
.btn.btn-base-color { 
    color: var(--dark-gray); 
}
.btn.btn-base-color:hover, .btn.btn-box-shadow.btn-base-color:hover {
    background-color:  var(--base-color);
    color: var(--dark-gray);
}
.btn.btn-link {
    padding: 0 0 2px;
}
/* heading */
h2 {
    line-height: 3.2rem;
}
/* tab */
.tab-style-04 .nav-tabs .nav-item {
    padding: 0;
    width: 25%;
}
.tab-style-04 .nav-tabs .nav-item .nav-link {
    color: var(--medium-gray);
}
.tab-style-04 .nav-tabs .nav-item .nav-link .tab-border {
    height: 3px;
}
.tab-style-04 .nav-tabs .nav-item .nav-link.active {
    font-weight: 600;
    border: 0;
   outline: 0;
}
.tab-style-04 .nav-tabs .nav-item .nav-link:focus-visible {
    outline: none;
    box-shadow: none;
}
/* accordion */
.accordion-style-04 .accordion-item .accordion-body {
    padding: 0 35px 25px;
}
.accordion-style-04 .accordion-item .accordion-collapse {
    margin-top: -1px;
}
/* progress bar */
.progress-bar-style-02 .progress {
    height: 10px;
}
/* page title */
.page-title-extra-small h2 {
    font-size: 3.75rem;
    line-height: 3.75rem;
}
.page-title-extra-small h1 {
    font-size: 20px;
}
/* pages */
.contact-form-style-03 > div { 
    border-radius: 6px 0 6px 0;
}
/* newsletter style 02 */
.newsletter-style-02 input { 
    padding-right: 100px !important;
    font-size: 14px;
}
/* footer */
footer {
    padding-bottom: 30px;
}
footer .footer-logo img {
    max-height: 39px;
}
.footer-dark,
.footer-dark .newsletter-style-02 input,
.footer-dark p, .footer-dark a {
    color: var(--medium-gray);
}
.footer-dark a:hover {
    color: var(--base-color);
}
.footer-dark .newsletter-style-02 input::placeholder {
    color: var(--medium-gray) !important;
    opacity: 1; /* Firefox */
}
.footer-dark .newsletter-style-02 input:-ms-input-placeholder {
    color: var(--medium-gray) !important;
}
.footer-dark .newsletter-style-02 input::-ms-input-placeholder {
    color: var(--medium-gray)  !important;
}
.footer-dark .elements-social .light li a:hover {
    color: var(--white);
    opacity: .5;
}
.footer-dark .small-icon li {
    margin: 0 7px;
}
.footer-navbar li {
    line-height: normal;
}
footer ul li {
    margin-bottom: 2px;
}
/* media query responsive */
@media (max-width: 1399px) {
    .accordion-style-06 .accordion-item {
        padding-left: 35px;
    }
}
@media (max-width: 1199px) {
    .navbar .navbar-nav .nav-link {
        font-size: 16px;
    }
    .navbar .navbar-nav .nav-link {
        padding-left: 12px;
        padding-right: 12px;
    }
    .team-style-05 .social-icon a {
        margin: 0 10px;
    }
}
@media (max-width: 991px) {
    .widget-text {
        color: var(--dark-gray);
    }
    .navbar .navbar-nav .nav-link {
        font-size: 18px;
    }
    .team-style-05 .social-icon a {
        margin: 0 10px;
    }
    .navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu {
        padding: 0 15px 6px 15px;
    }
}
@media (max-width: 767px) {
    .accordion-style-05 .accordion-item {
        padding: 20px 35px 22px 55px;
    }
    .contact-form-style-03 > div {
        border-radius: 6px;
    }
    .tab-style-04 .nav-tabs .nav-item:last-child {
        margin-bottom: 0;
    }
    .accordion-style-04 .accordion-item .accordion-body {
        padding: 0 25px 25px;
    }
    .tab-style-04 .nav-tabs .nav-item {
        width: auto;
    }
}
@media (max-width: 575px) {
    .accordion-style-06 .accordion-item {
        padding-left: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .accordion-style-06 .accordion-item.active-accordion {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .accordion-style-05 .accordion-item {
        padding: 17px 20px 17px 45px;
    }
    .accordion-style-05 .accordion-item .accordion-body {
        padding-right: 15px;
    }
    .accordion .accordion-item .accordion-header .accordion-title {
    	line-height: 28px;
	}
}
/* ==== end theme base ==== */

:root {
    --alt-font: 'Montserrat', 'Zen Maru Gothic', sans-serif;
    /* body text: Zen Maru Gothic first, so digits and Latin letters inside Japanese sentences share its weight
       (only the 700 weight is loaded; Montserrat at 400/500 looked thin next to it). Headings keep Montserrat via --alt-font. */
    --primary-font: 'Zen Maru Gothic', 'Montserrat', sans-serif;
}

body {
    font-family: var(--primary-font);
    word-break: break-word;
}

/* text logo (no logo artwork supplied, so the club name is set as text) */
.site-logo {
    font-family: var(--alt-font);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
}

/* page titles and introductions */
.home-mv {
    overflow: hidden;
    position: relative;
    padding: 110px 0 155px;
    background-color: #00483e;
    background-image:
        linear-gradient(to top, #fff 0, rgba(255, 255, 255, .96) 45px, rgba(255, 255, 255, .72) 95px, rgba(255, 255, 255, 0) 190px),
        url('../images/vertical-line-bg-small.svg');
    background-position: center bottom, center top;
    background-repeat: no-repeat, repeat;
    color: #fff;
}
.home-mv-layout {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 5fr 7fr;
    align-items: center;
    min-height: min(760px, calc(100svh - 155px));
}
.home-mv-copy { position: relative; z-index: 2; padding: 35px 0; }
.home-mv-eyebrow { display: block; color: #d6df23; margin-bottom: 22px; font-size: 16px; }
.home-mv h1 { color: #fff; font-size: clamp(38px, 4.2vw, 64px); line-height: 1.35; font-weight: 700; letter-spacing: -.04em; margin-bottom: 25px; }
.home-mv-copy > p { color: #c1d5cf; font-size: 18px; line-height: 1.9; margin-bottom: 30px; }
.home-mv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.home-mv-actions a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.home-mv-primary { padding: 17px 24px; border-radius: 40px; background: #d6df23; color: #163c33; }
.home-mv-primary:hover { background: #eef48a; color: #163c33; }
.home-mv-secondary { color: #fff; }
.home-mv-secondary:hover { color: #d6df23; }
.home-mv-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 58px; }
.home-mv-features strong { display: block; border-bottom: 2px solid #d6df23; padding-bottom: 12px; margin-bottom: 8px; font-size: 26px; color: #fff; }
.home-mv-features span { font-size: 13px; color: #c1d5cf; }
.home-mv-visual { position: relative; z-index: 4; width: 112%; }
.home-mv-person { display: block; width: 100%; height: auto; }
.home-mv-decoration { position: absolute; inset: 0; width: 100%; height: auto; animation: home-mv-float 6s ease-in-out infinite; }
@keyframes home-mv-float { 50% { transform: translateY(-15px); } }
@media (max-width: 991px) {
    .home-mv { padding: 105px 0 125px; }
    .home-mv-layout { grid-template-columns: 1fr; min-height: auto; }
    .home-mv-copy { text-align: center; }
    .home-mv-break { display: none; }
    .home-mv-actions { justify-content: center; }
    .home-mv-features { max-width: 480px; margin: 35px auto 0; }
    .home-mv-visual { width: min(100%, 580px); margin: 0 auto; }
}
@media (max-width: 575px) {
    .home-mv { padding-top: 80px; }
    .home-mv h1 { font-size: 36px; }
    .home-mv-actions { gap: 16px; }
    .home-mv-features { gap: 12px; }
    .home-mv-features strong { font-size: 23px; }
    .home-mv-features span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-mv-decoration { animation: none; }
}

.home-lead {
    position: relative;
    z-index: 2;
    min-height: 620px;
    margin-top: -375px;
    padding: clamp(395px, 29vw, 450px) 0 clamp(120px, 11vw, 175px) !important;
    background-color: #fff;
    background-image: url('../images/bg-grid.jpg');
    background-repeat: repeat;
    background-size: 67px 68px;
}
.home-lead::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0 0 34px;
    background: #f8fdff url('../images/lead-bg-city.jpg') center bottom / cover no-repeat;
    border-radius: 0 0 50% 50% / 0 0 clamp(55px, 7vw, 105px) clamp(55px, 7vw, 105px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .3) 6%, #000 18%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .3) 6%, #000 18%, #000 100%);
    filter: saturate(.9) contrast(.98);
    pointer-events: none;
}
.home-lead-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(190px, .8fr) minmax(430px, 1.5fr) minmax(190px, .8fr);
    align-items: center;
    gap: clamp(18px, 3vw, 44px);
}
.home-lead-copy {
    position: relative;
    z-index: 2;
    width: calc(100% + 110px);
    margin-inline: -55px;
    padding: 22px clamp(26px, 4vw, 58px) 40px;
    /* frosted white: the sky shows through faintly, text stays readable */
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 55px rgba(102, 87, 67, .08);
}
.home-lead-copy { border-radius: 18px; }
.home-lead-illustration {
    display: block;
    width: 100%;
    height: auto;
    align-self: end;
    margin-bottom: -115px;
}
.home-lead-illustration-left {
    width: 108%;
    max-width: none;
    margin-left: -14%;
}
.home-lead-illustration-right {
    width: 118%;
    max-width: none;
    margin-right: -18%;
}
.home-lead-heading {
    margin-bottom: 22px;
    color: #173b5c;
    font-size: clamp(40px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.035em;
    text-align: left;
}
.home-lead-description {
    margin: 0;
    color: #2f4858;
    font-size: clamp(16px, 1.4vw, 18px);
    font-weight: 500;
    line-height: 1.9;
    text-align: left;
}
@media (max-width: 991px) {
    .home-lead-layout { grid-template-columns: minmax(130px, .65fr) minmax(360px, 1.5fr) minmax(130px, .65fr); gap: 14px; }
    .home-lead-copy { width: calc(100% + 70px); margin-inline: -35px; }
}
@media (max-width: 767px) {
    .home-mv { padding-bottom: 95px; }
    .home-lead { min-height: 0; margin-top: -175px; padding: 220px 0 105px !important; background-position: center bottom; }
    .home-lead-layout { grid-template-columns: 1fr 1fr; gap: 24px 10px; }
    .home-lead-copy { grid-column: 1 / -1; order: -1; width: 100%; margin-inline: 0; padding: 20px 20px 50px; border-radius: 24px; }
    .home-lead-heading { font-size: clamp(26px, 8.6vw, 36px); } /* keeps 「もっとワクワクを。」 on one line */
    .home-lead-illustration { align-self: end; margin-bottom: -45px; }
    /* one illustration on phones: keep the children, drop the adults */
    .home-lead-illustration-left { display: none; }
    .home-lead-illustration-right { grid-column: 1 / -1; justify-self: center; width: min(88%, 340px); margin-right: 0; }
    .home-lead::before {
        bottom: 20px;
        border-radius: 0 0 50% 50% / 0 0 48px 48px;
    }
}

.home-about {
    background-color: #fff;
    background-image: url('../images/bg-grid.jpg');
    background-repeat: repeat;
    background-size: 67px 68px;
    /* room for the illustration that sits on the wave below */
    padding-bottom: clamp(160px, 17vw, 240px);
}
.home-about-layout {
    display: grid;
    grid-template-columns: minmax(210px, .9fr) minmax(460px, 1.45fr) minmax(210px, .9fr);
    align-items: center;
    gap: clamp(24px, 4vw, 58px);
}
.home-about-illustration {
    display: block;
    width: 112%;
    max-width: 360px;
    height: auto;
}
.home-about-illustration-left { justify-self: end; }
.home-about-illustration-right { justify-self: start; }
.home-about-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 1.8vw, 24px);
}
.home-about-label-icon {
    display: block;
    width: clamp(54px, 5vw, 72px);
    height: clamp(54px, 5vw, 72px);
    flex: 0 0 auto;
    object-fit: contain;
    transform-origin: 50% 100%;
}
/* stop-motion tilt (snaps left/right, holding each pose) — the two icons rock in opposite phase */
.home-about-label-icon:last-child { animation-delay: -1.5s; }
@keyframes home-about-label-tilt {
    0%, 49.99% { transform: rotate(-3deg); }
    50%, 100% { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
    .home-about-label-icon { animation: none; }
}
.home-about-label-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.home-about-label-text small {
    color: #237da3;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .16em;
    white-space: nowrap;
}
.home-about-heading {
    color: #237da3;
    font-size: clamp(32px, 3.4vw, 46px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.045em;
}
.home-about-heading-kicker {
    display: block;
    margin-bottom: .18em;
    font-size: .62em;
    font-weight: 650;
    letter-spacing: -.025em;
}
.home-about-heading-main {
    display: block;
    font-weight: 800;
}
.home-about-heading-marker {
    position: relative;
    z-index: 0;
    display: inline-block;
    padding-inline: .06em;
}
.home-about-heading-marker::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: .06em;
    height: .28em;
    border-radius: 999px;
    background: #f6bcd5; /* light tint of the logo pink #e8498c */
    transform: rotate(-1.5deg);
}
.home-about-description {
    grid-column: 1 / -1;
    width: min(100%, 940px);
    margin: 10px auto 0;
    text-align: center;
}
.home-about-description p { margin: 0; }
.home-about-description p + p { margin-top: 1.4em; }
@media (min-width: 992px) {
    /* balance the two illustrations: similar visual mass, shared ground line */
    .home-about-layout { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; }
    .home-about-illustration { height: auto; max-width: 100%; }
    .home-about-illustration-left { width: 300px; }  /* ≈200px tall */
    .home-about-illustration-right { width: 230px; } /* ≈250px tall */
    .home-about-copy { width: clamp(440px, 34vw, 480px); padding-bottom: 6px; }
}
@media (max-width: 991px) {
    .home-about-layout { grid-template-columns: minmax(150px, .7fr) minmax(380px, 1.5fr) minmax(150px, .7fr); gap: 18px; }
    .home-about-illustration { width: 108%; }
}
@media (max-width: 767px) {
    .home-about { padding-bottom: 124px; }
    .home-about-layout { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
    .home-about-copy { grid-column: 1 / -1; order: -1; }
    .home-about-heading { font-size: clamp(30px, 8.6vw, 38px); }
    /* phone order: heading -> kids illustration -> text -> parents illustration, which hangs over the blue band below */
    .home-about-illustration { width: min(100%, 280px); align-self: end; }
    .home-about-illustration-left { grid-column: 1 / -1; justify-self: center; width: min(84%, 320px); }
    .home-about-description { order: 1; }
    .home-about-illustration-right { order: 2; grid-column: 1 / -1; justify-self: center; position: relative; z-index: 3; width: min(52%, 200px); margin: -6px 0 -110px; }
    .home-about-label { gap: 10px; }
    .home-about-label-icon { width: 48px; height: 48px; }
    .home-about-label-text > span { font-size: 16px !important; }
    .home-about-label-text small { font-size: 8px; letter-spacing: .1em; }
}

.home-program-highlights {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: clamp(54px, 6vw, 82px) max(24px, calc((100vw - 1040px) / 2));
    border-radius: 32px;
    overflow: hidden;
    background-color: #0098dc;
    box-shadow: none;
}
/* blue band: wavy top edge, original rounded corners at the bottom */
.home-program-highlights {
    border-radius: 0 0 32px 32px;
    padding-top: calc(clamp(54px, 6vw, 82px) + 28px);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14 Q50 0 100 14 T200 14 V28 H0 Z'/%3E%3C/svg%3E") left top / 200px 28px repeat-x, linear-gradient(#000, #000) left 27px / 100% calc(100% - 27px) no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14 Q50 0 100 14 T200 14 V28 H0 Z'/%3E%3C/svg%3E") left top / 200px 28px repeat-x, linear-gradient(#000, #000) left 27px / 100% calc(100% - 27px) no-repeat;
}
.home-program-highlights::before,
.home-program-highlights::after {
    content: "";
    position: absolute;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .4;
    pointer-events: none;
}
.home-program-highlights::before {
    top: -150px;
    left: -190px;
    width: clamp(430px, 42vw, 680px);
    aspect-ratio: 377 / 554;
    background-image: url('../images/shape-blob-1.png');
}
.home-program-highlights::after {
    right: -220px;
    bottom: -190px;
    width: clamp(470px, 46vw, 740px);
    aspect-ratio: 512 / 734;
    background-image: url('../images/shape-blob-2.png');
}
.home-program-highlight {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(250px, .75fr);
    align-items: center;
    gap: clamp(30px, 5vw, 70px);
    padding: clamp(30px, 4vw, 52px);
    border: 1px solid rgba(99, 84, 69, .08);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(82, 68, 54, .09);
}
.home-program-highlight-reverse { grid-template-columns: minmax(250px, .75fr) minmax(0, 1.45fr); }
.home-program-highlight-copy h3 {
    margin: 14px 0 16px;
    color: #635445;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    line-height: 1.55;
}
.home-program-highlight-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 14px 0 16px;
}
.home-program-highlight-heading h3 { margin: 0; }
.home-program-highlight-heading-decor {
    width: clamp(30px, 3.2vw, 42px);
    height: auto;
    flex: 0 0 auto;
}
.home-program-music-character {
    position: absolute;
    z-index: 3;
    /* sits on the photo's bottom-left corner (photo is in the card's left column) */
    left: 14px;
    bottom: 14px;
    width: clamp(105px, 10vw, 145px);
    height: auto;
    pointer-events: none;
    transform-origin: 50% 85%;
    animation: home-program-katakata 1.2s steps(1, end) infinite;
    animation-delay: -.6s;
    will-change: transform;
}
.home-program-learning-character {
    position: absolute;
    z-index: 3;
    /* sits on the photo's bottom-right corner (photo is in the card's right column) */
    right: 14px;
    bottom: 14px;
    width: clamp(105px, 10vw, 145px);
    height: auto;
    pointer-events: none;
    transform-origin: 50% 85%;
    animation: home-program-katakata 1.2s steps(1, end) infinite;
    will-change: transform;
}
/* "katakata": snaps between two tilts instead of gliding (stepped timing) */
@keyframes home-program-katakata {
    0% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
    100% { transform: rotate(-4deg); }
}
@keyframes home-program-learning-float {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(1deg); }
    40% { transform: translate3d(4px, -9px, 0) rotate(-1.5deg); }
    75% { transform: translate3d(-2px, -4px, 0) rotate(.5deg); }
}
@keyframes home-program-music-bounce {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.5deg); }
    35% { transform: translate3d(-4px, -10px, 0) rotate(1.5deg); }
    70% { transform: translate3d(3px, -4px, 0) rotate(-.5deg); }
}
@media (prefers-reduced-motion: reduce) {
    .home-program-learning-character,
    .home-program-music-character { animation: none; }
}
.home-program-highlight-copy p { margin: 0; line-height: 1.9; }
.home-program-highlight-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 7px 15px;
    border-radius: 30px;
    background: var(--program-tint);
    color: var(--program-ink);
    font-size: 13px;
    font-weight: 700;
}
.home-program-highlight-media { position: relative; isolation: isolate; }
/* dashed outline around the program photos: not shown (content: none) */
.home-program-highlight-media::before {
    content: none;
    position: absolute;
    inset: -12px;
    border: 2px dashed var(--program-ink);
    border-radius: 42% 58% 50% 50% / 54% 44% 56% 46%;
    opacity: .22;
}
.home-program-highlight-media > img:not(.home-program-highlight-overlay) {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    animation: home-program-photo-morph 9s ease-in-out infinite;
}
.home-program-highlight-reverse .home-program-highlight-media > img:not(.home-program-highlight-overlay) { animation-delay: -4.5s; }
/* program photos shown as-is: no circle crop or morph */
.home-program-highlight-media > img.no-mask { aspect-ratio: auto; object-fit: contain; border-radius: 0; animation: none; }
/* gently morphing blob outline for the program photos */
@keyframes home-program-photo-morph {
    0%, 100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
    25% { border-radius: 56% 44% 52% 48% / 46% 54% 46% 54%; }
    50% { border-radius: 46% 54% 44% 56% / 55% 47% 53% 45%; }
    75% { border-radius: 53% 47% 57% 43% / 48% 56% 44% 52%; }
}
@media (prefers-reduced-motion: reduce) {
    .home-program-highlight-media > img:not(.home-program-highlight-overlay) { animation: none; }
}
.home-program-highlight-media .home-program-highlight-overlay {
    position: absolute;
    z-index: 2;
    left: -52%;
    bottom: -64%;
    display: block;
    width: 150%;
    max-width: none;
    height: auto;
    object-fit: contain;
    border-radius: 0;
    mix-blend-mode: multiply;
    opacity: 1;
    pointer-events: none;
}
@media (max-width: 767px) {
    .home-program-highlights {
        padding: 62px 18px 46px;
        border-radius: 0 0 24px 24px;
    }
    .home-program-highlights::before { top: -80px; left: -170px; width: 330px; }
    .home-program-highlights::after { right: -190px; bottom: -120px; width: 360px; }
    .home-program-highlight,
    .home-program-highlight-reverse { grid-template-columns: 1fr; gap: 28px; padding: 28px 22px; }
    .home-program-highlight-media { grid-row: 1; grid-column: 1; width: min(72%, 280px); margin-inline: auto; }
    .home-program-highlight-media .home-program-highlight-overlay { left: -38%; bottom: -48%; width: 138%; }
    .home-program-highlight-copy { grid-row: 2; grid-column: 1; }
    /* sit on the photo's bottom-right: same grid cell as the photo, pushed to the photo's right edge */
    .home-program-learning-character {
        position: relative; left: auto; right: auto; bottom: auto;
        grid-row: 1; grid-column: 1; justify-self: start; align-self: end;
        width: 100px; margin: 0 0 -10px calc(50% + min(36%, 140px) - 76px);
    }
    .home-program-music-character {
        position: relative; left: auto; right: auto; bottom: auto;
        grid-row: 1; grid-column: 1; justify-self: start; align-self: end;
        width: 124px; margin: 0 0 -14px calc(50% + min(36%, 140px) - 100px);
    }
}

.home-program-preview {
    z-index: 2;
    margin-top: -1px;
    padding: clamp(78px, 7vw, 110px) 0 clamp(90px, 8vw, 125px);
    background-color: #00aa54 !important;
    overflow: hidden;
}
.home-program-preview > .container {
    width: calc(100% - clamp(32px, 4vw, 64px));
    max-width: none;
}
/* wavy top edge (same curve as the facility slider): the grid paper above dips into the green */
.home-program-preview::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 74px;
    background: #fff url('../images/bg-grid.jpg') repeat 0 0 / 67px 68px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 44 Q180 88 360 44 T720 44 T1080 44 T1440 44 V0 H0 Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 44 Q180 88 360 44 T720 44 T1080 44 T1440 44 V0 H0 Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
    pointer-events: none;
}
/* illustration centred on the wave crest at every width */
.home-program-preview { overflow: visible; overflow-x: clip; }
.home-program-preview-wave-decor {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: calc(100% - 26px);
    width: clamp(240px, 26vw, 380px);
    height: auto;
    transform: translateX(-50%);
    pointer-events: none;
}
@media (max-width: 575px) {
    .home-program-preview::before { height: 48px; }
    .home-program-preview-wave-decor { left: 50%; bottom: calc(100% - 16px); width: 190px; } /* centred on phones */
}
.home-program-preview h2 { color: #a58c6f !important; }
.home-program-preview .btn-dark-gray {
    background: #237da3 !important;
    border-color: #237da3 !important;
    color: #fff !important;
}
.home-program-preview .btn-dark-gray:hover,
.home-program-preview .btn-dark-gray:focus-visible,
.home-program-preview .btn-dark-gray:active {
    background: #1c6685 !important;
    border-color: #1c6685 !important;
    color: #fff !important;
}
.home-program-preview-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    grid-template-areas: "content heading";
    gap: clamp(18px, 2.8vw, 38px);
    padding: clamp(48px, 5.5vw, 76px);
    border: 1px solid rgba(165, 140, 111, .12);
    border-radius: 40px;
    background: #fff;
    box-shadow: none;
    overflow: hidden;
}
.home-program-preview-panel::after {
    content: "";
    position: absolute;
    top: -115px;
    right: -110px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: #b8dfa1;
    pointer-events: none;
}
.home-program-preview-heading {
    grid-area: heading;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin: 0;
}
.home-program-preview-content { grid-area: content; }
.home-program-preview-content > .row:first-child {
    --bs-gutter-x: clamp(24px, 3vw, 42px);
    --bs-gutter-y: clamp(34px, 4vw, 52px);
}
.home-program-preview-title {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}
.home-program-preview-title h2 {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.35;
    letter-spacing: .12em;
}
.home-program-preview-title span {
    writing-mode: vertical-rl;
    color: #a86111;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .2em;
}
.home-program-preview-title .home-program-preview-title-en {
    display: block;
    margin-top: 3px;
    flex: 0 0 auto;
    color: #b8742a;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .22em;
    white-space: nowrap;
}
.home-program-preview-illustration {
    display: block;
    width: 240px;
    max-width: none;
    height: auto;
}
.home-program-card {
    --program-card-accent: #237da3;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.home-program-card-media {
    position: relative;
    isolation: isolate;
    margin-bottom: 20px;
}
.home-program-card-media::before {
    content: none;
}
.home-program-card-media::after {
    content: "";
    position: absolute;
    z-index: 3;
    right: 7px;
    bottom: 7px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--program-card-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='m2 2 8 8-8 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 9px 15px;
    box-shadow: 0 8px 18px rgba(55, 45, 35, .16);
    pointer-events: none;
}
.home-program-card-title {
    margin: 0 0 8px;
    color: #4c443d;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
}
.home-program-card-title-note {
    display: block;
    margin-top: -2px;
    font-size: .76em;
    font-weight: 500;
    line-height: 1.35;
}
.home-program-card-meta {
    margin: 0;
    color: #6d635b;
    font-size: 15px;
    line-height: 1.6;
}
.home-program-card.palette-blue,
.home-program-card.palette-orange,
.home-program-card.palette-green,
.home-program-card.palette-gold { --program-card-accent: #237da3; }
.home-program-card.palette-blue .home-program-card-media::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5.5h5.2c2.1 0 3.8 1.4 3.8 3.2v10c0-1.6-1.7-2.8-3.8-2.8H3zM21 5.5h-5.2c-2.1 0-3.8 1.4-3.8 3.2v10c0-1.6 1.7-2.8 3.8-2.8H21z' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
}
.home-program-card.palette-orange .home-program-card-media::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18V6l10-2v12M9 9l10-2' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='6' cy='18' r='3' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3Ccircle cx='16' cy='16' r='3' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E");
    background-size: 24px 24px;
}
.home-program-card.palette-green .home-program-card-media::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-9.4A4.1 4.1 0 0 1 12 7.7a4.1 4.1 0 0 1 7 2.9C19 15.6 12 20 12 20z' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 23px 23px;
}
.home-program-card.palette-gold .home-program-card-media::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
}
.home-program-card-media::after { background-position: center; background-repeat: no-repeat; } /* flat accent, no grain, so the circle matches the title colour */
.home-program-card .home-program-card-title { color: var(--program-card-accent); }
.home-program-card-illustration {
    display: block;
    width: 112px;
    height: 112px;
    margin: -18px auto 0;
    object-fit: contain;
}
.home-program-card-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    /* diagonal corners: top-left and bottom-right square, the other two rounded */
    border-radius: 0 22px 0 22px;
    object-fit: cover;
}
@media (max-width: 767px) {
    .home-program-preview { margin-top: -1px; padding: 52px 0 72px; }
    .home-program-preview > .container { width: calc(100% - 20px); }
    .home-program-preview-panel { display: flex; flex-direction: column; gap: 24px; padding: 38px 20px; border-radius: 24px; }
    /* heading box dissolves so its title and illustration become panel items: title first, illustration last (below the button) */
    .home-program-preview-heading { display: contents; }
    .home-program-preview-title { order: -1; position: relative; z-index: 1; } /* above the green corner circle */
    .home-program-preview-illustration { position: relative; z-index: 1; }
    .home-program-preview-illustration { order: 1; align-self: center; }
    .home-program-preview-title { flex-direction: column; align-items: center; gap: 6px; }
    .home-program-preview-title h2 { font-size: 28px; writing-mode: horizontal-tb; text-orientation: mixed; letter-spacing: .08em; text-align: center; }
    /* PROGRAMS LIST reads left-to-right under the heading on phones */
    .home-program-preview-title .home-program-preview-title-en { writing-mode: horizontal-tb; margin-top: 0; font-size: 12px; }
    .home-program-preview-illustration { width: min(80%, 260px); max-width: none; }
    .home-program-card-media { margin-bottom: 16px; }
    .home-program-card-media::after { right: 6px; bottom: 6px; width: 38px; height: 38px; font-size: 26px; }
}

section.subpage-mv {
    position: relative;
    overflow: hidden;
    padding: 0;
    background-color: #00483e;
    background-image: repeating-linear-gradient(90deg, transparent 0, transparent 149px, #ffffff05 149px, #ffffff05 151px);
}
.subpage-mv-inner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 430px;
}
.subpage-mv-copy {
    position: relative;
    z-index: 2;
    padding: 72px 0;
}
.club-breadcrumb {
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    z-index: 3;
    font-size: 12px;
    line-height: 1.8;
    color: #635445;
}
.club-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; list-style: none; margin: 0; padding: 0; }
.club-breadcrumb li { display: flex; align-items: center; gap: 12px; }
.club-breadcrumb a { display: inline-block; padding: 6px 0; color: inherit; }
.club-breadcrumb a:hover { color: #a74770; text-decoration: underline; }
.club-breadcrumb a:focus-visible { outline: 2px solid #a74770; outline-offset: 3px; }
.club-breadcrumb [aria-current="page"] { font-weight: 600; }
.club-breadcrumb-separator { color: #8c8277; font-size: 16px; }
@media (max-width: 575px) { .club-breadcrumb { top: 16px; font-size: 11px; } }
.subpage-mv-label {
    display: block;
    margin-bottom: 20px;
    color: #d6df23;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .12em;
}
.subpage-mv h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
}
.subpage-mv-art {
    position: absolute;
    width: 490px;
    height: 490px;
    right: -40px;
    bottom: -105px;
    pointer-events: none;
}
.subpage-mv-ring {
    position: absolute;
    inset: 0;
    border: 90px solid #003e35;
    border-radius: 50%;
}
.subpage-mv-art img {
    position: absolute;
    width: 540px;
    max-width: none;
    right: -55px;
    top: -90px;
}
.subpage-mv-dot {
    position: absolute;
    top: 25px;
    right: 40px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d6df23;
    box-shadow: -780px 235px 0 3px #d6df23;
}
@media (max-width: 991px) {
    .subpage-mv-inner { min-height: 350px; }
    .subpage-mv-art { right: -190px; opacity: .55; }
}
@media (max-width: 575px) {
    .subpage-mv-inner { min-height: 280px; }
    .subpage-mv-copy { padding: 55px 0; }
    .subpage-mv-label { font-size: 13px; margin-bottom: 14px; }
    .subpage-mv-art { right: -285px; bottom: -190px; opacity: .3; }
}

section.subpage-mv.program-page-mv {
    background: #fff;
}
.program-page-mv .subpage-mv-inner {
    min-height: 330px;
}
.program-page-mv .subpage-mv-inner::after {
    content: "PROGRAM & FEES";
    position: absolute;
    left: -40px;
    bottom: -25px;
    color: #f7f7f7;
    font-size: clamp(72px, 12vw, 170px);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}
.program-page-mv .subpage-mv-copy {
    padding: 88px 0 44px;
}
.program-page-mv .subpage-mv-copy::before {
    content: "";
    position: absolute;
    top: 72px;
    left: -22px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffdc40;
}
.program-page-mv h1 {
    color: #e6002d;
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: .04em;
}
.program-page-mv .subpage-mv-label {
    width: 314px;
    max-width: 100%;
    padding-bottom: 0;
    margin: 0 0 14px;
    background: none;
    text-align: center;
    color: #a74770;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
}
.program-section-label {
    display: block;
    width: 314px;
    max-width: 100%;
    margin: 0 0 20px;
    padding-bottom: 32px;
    background: url('../images/heading-ornament-line.svg') no-repeat center bottom;
    background-size: 50% auto;
    color: #a74770;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: .06em;
    text-align: center;
}
.program-section-label-centered { margin-inline: auto; }
.program-lead,
.weekly-section {
    background-color: #fff;
    background-image: url('../images/bg-grid.jpg');
    background-repeat: repeat;
    background-size: 67px 68px;
}
.program-page-mv-description {
    margin: 22px 0 0;
    color: #555;
    font-size: 17px;
    line-height: 1.8;
}
.program-page-mv .subpage-mv-art { display: none; }
@media (max-width: 575px) {
    .program-page-mv .subpage-mv-inner { min-height: 290px; }
    .program-page-mv .subpage-mv-copy { padding: 80px 8px 36px; }
    .program-page-mv .subpage-mv-copy::before { top: 60px; left: 0; width: 12px; height: 12px; }
    .program-page-mv-description { font-size: 15px; }
}

section.subpage-mv.contact-page-mv {
    background: #fff;
}
.contact-page-mv .subpage-mv-inner {
    min-height: 330px;
}
.contact-page-mv .subpage-mv-inner::after {
    content: "CONTACT";
    position: absolute;
    left: -40px;
    bottom: -25px;
    color: #f7f7f7;
    font-size: clamp(72px, 14vw, 190px);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}
.contact-page-mv .subpage-mv-copy {
    padding: 88px 0 44px;
}
.contact-page-mv .subpage-mv-copy::before {
    content: "";
    position: absolute;
    top: 72px;
    left: -22px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffdc40;
}
.contact-page-mv h1 {
    color: #635445;
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: .04em;
}
.contact-page-mv .subpage-mv-label {
    width: 250px;
    max-width: 100%;
    margin: 0 0 14px;
    text-align: center;
    color: #a74770;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .1em;
}
.contact-page-mv-description {
    margin: 22px 0 0;
    color: #555;
    font-size: 17px;
    line-height: 1.8;
}
.contact-page-mv .subpage-mv-art { display: none; }
.contact-intro-photo img {
    /* faces sit near the top of the high-five photo: keep heads in the wide PC crop */
    object-position: center 12%;
}
@media (max-width: 575px) {
    .contact-page-mv .subpage-mv-inner { min-height: 290px; }
    .contact-page-mv .subpage-mv-copy { padding: 80px 8px 36px; }
    .contact-page-mv .subpage-mv-copy::before { top: 60px; left: 0; width: 12px; height: 12px; }
    .contact-page-mv-description { font-size: 15px; }
}

.page-title-big-typography .program-page-heading,
.page-title-big-typography .contact-page-heading {
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.4;
    letter-spacing: 0;
}
.contact-lead-text {
    color: #4c443d;
    font-size: 17px;
    line-height: 2;
}
.contact-lead h2 {
    margin-bottom: 24px;
    font-size: clamp(24px, 2.5vw, 32px);
    line-height: 1.65;
    letter-spacing: 0;
}
.program-intro-photo {
    margin: 0;
    padding: 0;
    width: 100%;
    border-radius: clamp(20px, 3vw, 40px);
    overflow: hidden;
}
.program-intro-photo img {
    display: block;
    width: 100%;
    height: clamp(300px, 38vw, 560px);
    object-fit: cover;
    object-position: center 42%;
}
@media (max-width: 767px) {
    .program-intro-photo img { height: auto; aspect-ratio: 3 / 2; }
}
.program-photo-marquee {
    position: relative;
    width: 100%;
    padding: 28px 0;
    overflow: hidden;
    background: #fff;
    clip-path: ellipse(82% 50% at 50% 50%);
}
.program-photo-marquee-track {
    display: flex;
    width: max-content;
    animation: program-photo-scroll 42s linear infinite;
    will-change: transform;
}
.program-photo-marquee-group {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    padding-right: 10px;
}
.program-photo-marquee img {
    display: block;
    flex: 0 0 auto;
    width: clamp(250px, 24vw, 390px);
    height: clamp(160px, 16vw, 250px);
    border-radius: 4px;
    object-fit: cover;
}
.program-photo-marquee:hover .program-photo-marquee-track { animation-play-state: paused; }
@keyframes program-photo-scroll {
    to { transform: translateX(-50%); }
}
@media (max-width: 767px) {
    .program-photo-marquee { padding: 18px 0; clip-path: ellipse(115% 50% at 50% 50%); }
    .program-photo-marquee-track { animation-duration: 32s; }
    .program-photo-marquee img { width: 240px; height: 155px; }
}
@media (prefers-reduced-motion: reduce) {
    .program-photo-marquee { overflow-x: auto; clip-path: none; }
    .program-photo-marquee-track { animation: none; }
    .program-photo-marquee-group[aria-hidden="true"] { display: none; }
}
/* single wide room photo above 「プログラム紹介」 (replaces the scrolling photo strip) */
.program-detail-photo {
    position: relative;
    z-index: 0;
    width: 100%;
    padding: 0 !important; /* the green fees band below overlaps the photo's bottom edge */
    line-height: 0;
    background: #fff;
}
/* photo sits just above 料金のご案内: the green band's wavy top edge rides over the photo's bottom */
.program-detail-photo + .pricing-section { position: relative; z-index: 1; margin-top: -28px; }
/* the blue programme band no longer overlaps a photo above it, so it starts flush under the weekly section */
.weekly-section + .program-feature-section { margin-top: 0 !important; }
.weekly-section:has(+ .program-feature-section) { padding-bottom: clamp(50px, 7vw, 90px) !important; }
.program-detail-photo img {
    display: block;
    width: 100%;
    height: clamp(220px, 23vw, 420px);
    object-fit: cover;
    object-position: center;
}
@media (max-width: 767px) {
    .program-detail-photo img { height: 200px; object-position: 30% center; }
}
/* lead heading + text reuse the top page's 学校でもない、家でもない。 styles (.home-about-heading / .home-about-description) */

/* pricing table */
.program-marquee {
    position: relative;
    overflow: hidden;
    padding-top: 65px;
    padding-bottom: 60px;
    color: #f6dfdf;
    line-height: 1;
    min-height: clamp(180px, 18vw, 290px);
    user-select: none;
}
.program-marquee-track {
    display: flex;
    width: max-content;
    animation: program-marquee-scroll 65s linear infinite;
    will-change: transform;
}
.program-marquee-track > span {
    flex: 0 0 auto;
    min-width: 100vw;
    font-family: var(--alt-font);
    font-size: clamp(56px, 9vw, 150px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .03em;
    white-space: nowrap;
    text-transform: uppercase;
}
.program-feature-section {
    z-index: 1;
    position: relative;
    margin-top: -65px;
    padding-top: clamp(115px, 12vw, 175px);
    background: #fff2ef;
    border-radius: 50% 50% 0 0 / clamp(80px, 10vw, 150px) clamp(80px, 10vw, 150px) 0 0;
    overflow: hidden;
}
.program-feature-heading { position: relative; padding: 15px 0 42px; border-bottom: 2px dotted #f3cfcf; }
.program-feature-heading > div { position: relative; z-index: 1; }
.program-feature-kicker { margin-bottom: 10px; color: #635445; font-size: clamp(20px, 2.5vw, 32px); font-weight: 700; }
.program-feature-heading h2 { color: #a74770; font-size: clamp(28px, 3vw, 42px); line-height: 1.5; }
.program-feature-heading::before {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    left: 5%;
    top: -25px;
    border: 48px solid #fde3df;
    border-left-color: transparent;
    border-radius: 50%;
    transform: rotate(-35deg);
}
.program-feature-heading::after {
    content: "";
    position: absolute;
    right: 9%;
    top: 5px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #fde3df;
}
@keyframes program-marquee-scroll {
    to { transform: translateX(-50%); }
}
@media (max-width: 767px) {
    .program-marquee { padding-top: 40px; padding-bottom: 40px; min-height: 140px; }
    .program-feature-section { margin-top: -35px; padding-top: 80px; border-radius: 50% 50% 0 0 / 55px 55px 0 0; }
    .program-feature-heading { padding-bottom: 28px; }
    .program-feature-heading::before { width: 100px; height: 100px; border-width: 25px; left: -30px; }
    .program-feature-heading::after { width: 32px; height: 32px; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .program-marquee-track { animation: none; }
}

.learning-feature {
    position: relative;
    display: grid;
    grid-template-columns: 44% 1fr;
    gap: 48px;
    align-items: center;
    padding: 56px 64px;
    border: 12px solid #fff2ef;
    border-radius: 48px;
    background: #fff;
}
.learning-feature-label { position: absolute; left: 18px; top: 28px; writing-mode: vertical-rl; font-size: 12px; letter-spacing: .12em; color: #a74770; }
.learning-feature-visual { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; border: 8px solid #fff2ef; border-radius: 28% 36% 20% 25% / 22% 26% 25% 32%; background: #e3f3fa; }
.learning-feature-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.learning-photo-crop { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.learning-photo-crop img { object-position: center; border-radius: 0; }
.learning-feature-number { position: absolute; z-index: 3; top: -24px; right: 12px; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #005878; color: #fff; font-size: 38px; font-weight: 700; line-height: 1; }
.learning-feature-symbol { position: relative; color: #237da3; font-size: 115px; line-height: 1.4; }
.learning-feature-symbol .bi-pencil { position: absolute; right: -26px; top: 0; font-size: 55px; color: #a74770; transform: rotate(12deg); }
.learning-feature-caption { margin-top: 20px; font-size: 17px; font-weight: 600; color: #635445; }
.learning-feature-copy h3 { padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px dashed #eb80a5; color: #635445; font-size: clamp(24px, 2.5vw, 32px); font-weight: 700; line-height: 1.5; }
.learning-feature-copy h3 { position: relative; isolation: isolate; }
/* burst icon left of the title, same as the top page's 学習／音楽プログラムで広がる可能性 (replaces the yellow dot) */
.learning-feature-copy h3 { display: flex; align-items: center; gap: 14px; }
.learning-feature-heading-decor {
    width: clamp(30px, 3.2vw, 42px);
    height: auto;
    flex: 0 0 auto;
}
.learning-feature-copy > p { line-height: 1.9; }
.learning-feature-details { margin-bottom: 20px; font-size: 15px; }
.learning-feature-details > div { display: grid; grid-template-columns: 65px 1fr; gap: 12px; margin-top: 14px; }
.learning-feature-details dt { color: #a74770; }
.learning-feature-details dd { margin: 0; line-height: 1.8; }
.learning-feature-copy .learning-feature-note { margin: 0; font-size: 13px; }
@media (max-width: 991px) { .learning-feature { padding: 40px; gap: 30px; grid-template-columns: 38% 1fr; } .learning-feature-symbol { font-size: 80px; } .learning-feature-caption { font-size: 13px; } }
@media (max-width: 767px) { .learning-feature { grid-template-columns: 1fr; padding: 38px 24px 30px; border-width: 7px; border-radius: 30px; } .learning-feature-visual { width: min(100%, 330px); margin: 0 auto; } .learning-feature-label { left: 9px; top: 24px; font-size: 10px; } .learning-feature-number { width: 60px; height: 60px; font-size: 36px; } }

.music-feature .learning-feature-visual { background: #fbe7ef; }
.learning-feature-photo img.learning-feature-illustration {
    inset: auto;
    left: -8%;
    bottom: -10%;
    width: 80%;
    height: auto;
    border-radius: 0;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
    transform-origin: 50% 85%;
    will-change: transform;
}
@media (max-width: 767px) {
    .learning-feature:not(.music-feature) .learning-feature-visual { margin-bottom: 32px; }
    .learning-feature-photo img.learning-feature-illustration { left: -5%; bottom: -10%; width: 75%; }
}
.music-feature .learning-feature-photo img.music-feature-illustration {
    inset: auto;
    left: -9%;
    bottom: -12%;
    width: 70%;
    height: auto;
    border-radius: 0;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
    transform-origin: 50% 70%;
    will-change: transform;
}
@keyframes learning-illustration-float {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
    35% { transform: translate3d(4px, -12px, 0) rotate(1.5deg); }
    65% { transform: translate3d(-3px, -6px, 0) rotate(-.5deg); }
}
@keyframes music-illustration-sway {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
    30% { transform: translate3d(5px, -8px, 0) rotate(2deg); }
    60% { transform: translate3d(-4px, -4px, 0) rotate(-1deg); }
    80% { transform: translate3d(3px, -9px, 0) rotate(1deg); }
}
@media (max-width: 767px) {
    .music-feature .learning-feature-visual { margin-bottom: 32px; }
    .music-feature .learning-feature-photo img.music-feature-illustration { left: -5%; bottom: -10%; width: 65%; }
}
@media (prefers-reduced-motion: reduce) {
    .learning-feature-photo img.learning-feature-illustration,
    .music-feature .learning-feature-photo img.music-feature-illustration {
        animation: none;
        will-change: auto;
    }
}
.music-feature .learning-feature-symbol { color: #a74770; }
.music-feature-link { margin-top: 8px; } /* styled as the blue CTA pill (.club-cta-button-blue) */
#program-pricing { scroll-margin-top: 100px; }
.program-feature-section {
    padding-bottom: 150px;
    border-bottom-left-radius: 50% 100px;
    border-bottom-right-radius: 50% 100px;
}
.pricing-marquee { margin-top: -45px; padding-top: 0; padding-bottom: 25px; min-height: 0; z-index: 0; }
.pricing-section { padding-top: 45px; background: #fcfaf7; }
.pricing-heading { position: relative; padding: 20px 0 40px; margin-bottom: 30px; border-bottom: 2px dotted #f3cfcf; }
.pricing-heading > div { position: relative; z-index: 1; }
.pricing-kicker { font-size: clamp(22px, 2.5vw, 32px); font-weight: 700; color: #635445; margin-bottom: 10px; }
.pricing-heading h2 { color: #a74770; font-size: clamp(30px, 3vw, 42px); line-height: 1.5; }
.pricing-heading::before { content: ""; position: absolute; width: 130px; height: 130px; border: 34px solid #75bf85; border-top-color: transparent; border-radius: 50%; left: 9%; top: 0; transform: rotate(20deg); }
.pricing-heading::after { content: ""; position: absolute; width: 50px; height: 50px; border-radius: 50%; background: #35a6d7; right: 12%; top: 32px; }
.pricing-panel { background: #fff2ef; border: 1px solid #f8e4df; border-radius: 40px; padding: 48px; }
.pricing-panel .pricing-table-simple { border-radius: 16px; border-color: #e7d4cf; }
.pricing-panel .pricing-table-simple th,
.pricing-panel .pricing-table-simple td { padding: 23px 20px; border-color: #e7d4cf; }
.pricing-panel .pricing-table-simple thead th { background: #a74770; color: #fff; }
.pricing-panel .pricing-table-simple tbody tr:nth-child(even) { background: #fff9f7; }
.pricing-panel .pricing-table-simple tbody td:first-child { color: #635445; }
@media (max-width: 767px) {
    .program-feature-section { padding-bottom: 90px; border-bottom-left-radius: 50% 50px; border-bottom-right-radius: 50% 50px; }
    .pricing-marquee { margin-top: -20px; padding-top: 0; }
    .pricing-section { padding-top: 20px; }
    .pricing-heading::before { width: 65px; height: 65px; border-width: 18px; left: -15px; }
    .pricing-heading::after { width: 25px; height: 25px; right: 0; }
    .pricing-panel { padding: 24px 16px; border-radius: 26px; }
    .pricing-panel .pricing-table-simple { min-width: 720px; }
    .pricing-panel .pricing-table-simple th,
    .pricing-panel .pricing-table-simple td { padding: 18px 16px; }
}
.pricing-table-simple {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid var(--extra-medium-gray);
}
.pricing-table-simple th,
.pricing-table-simple td {
    padding: 18px 20px;
    text-align: center;
    border-bottom: 1px solid var(--extra-medium-gray);
    border-left: 1px solid var(--extra-medium-gray);
}
.pricing-table-simple th:first-child,
.pricing-table-simple td:first-child {
    text-align: left;
    border-left: none;
}
.pricing-table-simple thead th {
    background-color: var(--yellow);
    color: var(--dark-gray);
    font-family: var(--alt-font);
    font-weight: 700;
    font-size: 15px;
}
.pricing-table-simple tbody tr:last-child td {
    border-bottom: none;
}
.pricing-table-simple tbody td:first-child {
    font-weight: 600;
    color: var(--dark-gray);
}

/* map embed */
.weekly-panel { background: #fff2ef; border-radius: 24px; padding: 48px 52px; }
.weekly-heading-row { margin-bottom: 30px; }
#weekly-heading { position: relative; isolation: isolate; color: #635445; font-size: clamp(25px, 2.6vw, 32px); line-height: 1.6; padding-bottom: 20px; margin-bottom: 0; border-bottom: 1px dashed #eb80a5; }
#weekly-heading::before { content: ""; position: absolute; z-index: -1; top: .08em; left: -.32em; width: .85em; height: .85em; border-radius: 50%; background: #ffdf47; }
.weekly-cards .feature-box { display: grid; grid-template-columns: 1fr 138px; column-gap: 20px; align-content: center; text-align: left !important; padding: 32px !important; background: #fff !important; border-radius: 18px !important; min-height: 190px; }
.weekly-cards .feature-box-icon { grid-column: 2; grid-row: 1 / 3; margin: 0 !important; align-self: center; }
.weekly-cards .feature-box-icon > div { width: 88px !important; height: 88px !important; }
.weekly-cards .feature-box-icon i { font-size: 32px; }
.weekly-cards .weekly-card-illustration { display: block; width: 150px; max-width: none; height: auto; margin-left: -6px; }
.weekly-cards .feature-box > span { grid-column: 1; position: relative; padding-left: 18px; font-size: 20px; line-height: 1.5; }
.weekly-cards .feature-box > span::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: #a74770; }
.weekly-cards .feature-box > p { grid-column: 1; padding-left: 18px; }
/* mid widths: the text column got squeezed to ~70px beside the 138px illustration */
@media (min-width: 768px) and (max-width: 991px) {
    .weekly-cards > .col { flex: 0 0 100%; max-width: 100%; } /* one card per row */
}
@media (min-width: 992px) and (max-width: 1199px) {
    .weekly-panel { padding: 40px 36px; }
    .weekly-cards .feature-box { padding: 26px 22px !important; grid-template-columns: 1fr 108px; column-gap: 14px; }
    .weekly-cards .weekly-card-illustration { width: 116px; margin-left: -4px; }
    .weekly-cards .feature-box > span { font-size: 18px; }
}
@media (max-width: 767px) {
    .weekly-panel { width: calc(100% - 30px); padding: 30px 22px; border-radius: 20px; }
    .weekly-cards .feature-box { padding: 24px 20px !important; grid-template-columns: 1fr 94px; column-gap: 12px; min-height: 160px; }
    .weekly-cards .feature-box-icon > div { width: 64px !important; height: 64px !important; }
    .weekly-cards .feature-box-icon i { font-size: 26px; }
    .weekly-cards .weekly-card-illustration { width: 104px; margin-left: -5px; }
    .weekly-cards .feature-box > span { font-size: 18px; }
}

.map-embed {
    border: 0;
    width: 100%;
    display: block;
}

.footer-cta-photo {
    display: block;
    width: 100%;
    height: clamp(280px, 31vw, 430px);
    margin: 0 0 clamp(28px, 3vw, 42px);
    border-radius: 32px;
    object-fit: cover;
    object-position: center 62%;
    box-shadow: 0 18px 42px rgba(71, 56, 41, .16);
}
@media (max-width: 575px) {
    .footer-cta-photo {
        height: 240px;
        margin-bottom: 26px;
        border-radius: 20px;
        object-position: 43% center;
    }
}

.home-facility {
    z-index: 3;
    padding: 0 0 clamp(80px, 9vw, 130px);
    /* calm half-circle pattern: clean seamless SVG tile (the アセット 25/26 PNGs left cut-off shapes and thin lines at the tile seams) */
    background: #f8efe2 url("../images/facility-pattern.svg") left top / 160px 96px repeat;
}
.contact-operator {
    margin-top: 0;
    padding-top: clamp(70px, 8vw, 110px);
    /* same half-circle pattern, fainter (#f5ebdc instead of #f2e6d4) */
    background-image: url("../images/facility-pattern-light.svg");
}
.home-facility > .container {
    width: calc(100% - clamp(32px, 4vw, 64px));
    max-width: none;
}
.home-facility-slider {
    position: relative;
    width: 100vw;
    margin-top: clamp(-100px, -7vw, -64px);
    margin-left: calc(50% - 50vw);
    margin-bottom: clamp(80px, 8vw, 116px);
    overflow: hidden;
    overflow: clip visible;
    background: #fff;
}
/* white wave under the strip, so the cream area below starts with a wavy edge
   (short 200px repeat = more bumps, same rhythm as the blue band's top edge; was 4 wide waves across the page) */
.home-facility-slider::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 36px;
    margin-top: -1px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 36' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 18 Q50 36 100 18 T200 18 V0 H0 Z'/%3E%3C/svg%3E") left top / 200px 36px repeat-x;
    pointer-events: none;
}
.home-facility-slider::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: -1px;
    left: 0;
    width: 100%;
    height: 74px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%2300aa54' d='M0 44 Q180 88 360 44 T720 44 T1080 44 T1440 44 V0 H0 Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
    pointer-events: none;
}
/* flowers sitting on the white wave under the photo strip (centred on the wave line, ~45% down the wave) */
.home-facility-wave-flower {
    position: absolute;
    z-index: 3;
    left: var(--x);
    top: calc(100% + 36px * .5);
    width: var(--w);
    height: auto;
    transform: translateY(-50%) rotate(var(--r));
    pointer-events: none;
    /* same stop-motion tilt as the background flowers (keeps the -50% lift) */
    animation: wave-flower-tilt 3s linear infinite;
}
.home-facility-wave-flower + .home-facility-wave-flower { animation-delay: -1.5s; }
@keyframes wave-flower-tilt {
    0%, 49.99% { transform: translateY(-50%) rotate(calc(var(--r) - 4deg)); }
    50%, 100% { transform: translateY(-50%) rotate(calc(var(--r) + 4deg)); }
}
@media (prefers-reduced-motion: reduce) {
    .home-facility-wave-flower { animation: none; }
}
@media (max-width: 767px) {
    .home-facility-wave-flower { width: calc(var(--w) * .6); }
}
.home-facility-slider-track {
    display: flex;
    width: max-content;
    padding: 82px 0 20px;
    animation: home-facility-photo-scroll 72s linear infinite;
    will-change: transform;
}
.home-facility-slider-group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: clamp(16px, 2vw, 30px);
    padding-right: clamp(16px, 2vw, 30px);
}
.home-facility-slider-group img {
    display: block;
    width: clamp(250px, 25vw, 410px);
    height: clamp(175px, 18vw, 285px);
    object-fit: cover;
    border-radius: 16px;
}
.home-facility-slider-words {
    display: flex;
    width: max-content;
    color: #3f3d3b;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(46px, 6vw, 92px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    white-space: nowrap;
    padding-bottom: clamp(18px, 2.2vw, 32px);
    animation: home-facility-word-scroll 58s linear infinite;
    will-change: transform;
}
.home-facility-slider-words span {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
.home-facility-slider-icon {
    display: block;
    width: auto;
    height: .9em;
    margin: 0 .45em;
}
@keyframes home-facility-photo-scroll { to { transform: translateX(-50%); } }
@keyframes home-facility-word-scroll { to { transform: translateX(-50%); } }
.home-facility-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2.5vw, 34px);
    margin-bottom: clamp(36px, 5vw, 64px);
    text-align: center;
}
.home-facility-heading-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.home-facility-heading-decor {
    display: block;
    width: clamp(58px, 6vw, 82px);
    height: clamp(58px, 6vw, 82px);
    flex: 0 0 auto;
    object-fit: contain;
}
.home-facility-heading span {
    color: #3f3d3b;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: .15em;
}
.home-facility-heading h2 {
    margin: 0;
    color: #8f7558; /* a shade darker than the logo beige #a58c6f, to read well on the beige pattern */
    font-size: clamp(30px, 3.6vw, 48px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .04em;
}
.home-facility-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(22px, 3vw, 34px);
}
.home-facility-card {
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: clamp(22px, 3vw, 42px);
    min-height: 300px;
    padding: clamp(38px, 4vw, 58px);
    border: 1px solid #e8dccb;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(98, 79, 58, .06);
}
.home-facility-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 48px;
    width: 56px;
    height: 3px;
    background: #00aa54;
}
.home-facility-card h3 {
    margin: 0;
    writing-mode: vertical-rl;
    text-orientation: upright;
    transform: translateX(-30px);
    color: #a58c6f;
    font-size: clamp(25px, 2.4vw, 34px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .12em;
}
.home-facility-card dl { margin: 0; }
.home-facility-card dl > div {
    display: grid;
    grid-template-columns: 6.2em 1fr; /* just wide enough for the longest label 「［電話番号］」 */
    gap: 14px;
    padding: 22px 0;
    border-bottom: 2px dotted #e4b77e;
}
.home-facility-card dl > div:last-child { border-bottom: 0; }
.home-facility-card dt {
    color: #a58c6f;
    font-weight: 700;
}
.home-facility-card dd {
    margin: 0;
    color: #3f3d3b;
    line-height: 1.8;
}
.home-facility-card a { color: #a86111; font-weight: 700; }
.home-facility-card small { color: #3f3d3b; }
.home-facility-map {
    margin-top: clamp(24px, 3vw, 36px);
    padding: 14px;
    overflow: hidden;
    border: 1px solid #e8dccb;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(98, 79, 58, .06);
}
.home-facility-map .map-embed {
    min-height: 390px;
    border-radius: 18px;
}
.home-facility-map { position: relative; }
@media (max-width: 991px) {
    .home-facility-cards { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .home-facility > .container { width: calc(100% - 20px); }
    .home-facility-slider::before { height: 48px; }
    .home-facility-slider-track { padding-top: 56px; }
    .home-facility-slider { margin-top: -52px; margin-bottom: 64px; }
    .home-facility-slider-group img { width: 230px; height: 160px; border-radius: 12px; }
    .home-facility-heading { gap: 10px; }
    .home-facility-heading-copy { display: block; min-width: 0; }
    .home-facility-heading-decor { width: 46px; height: 46px; }
    .home-facility-heading span { display: block; margin-top: 10px; margin-bottom: 0; }
    .home-facility-card { grid-template-columns: 1fr; min-height: 0; padding: 32px 24px; }
    .home-facility-card::before { left: 24px; }
    .home-facility-card h3 { writing-mode: horizontal-tb; letter-spacing: .06em; transform: none; }
    .home-facility-card dl > div { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
    .home-facility-map { padding: 8px; border-radius: 20px; }
    .home-facility-map .map-embed { min-height: 330px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-facility-slider { overflow-x: auto; }
    .home-facility-slider-track,
    .home-facility-slider-words { animation: none; }
    .home-facility-slider-group[aria-hidden="true"],
    .home-facility-slider-words span + span { display: none; }
}

/* simple content list */
.info-list li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
}
.info-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--yellow);
}

/* primary call-to-action buttons (contact) */
.btn.club-cta-button {
    padding: 0;
    border-color: #0098dc !important;
    border-radius: 999px;
    /* same blue + grain as the band behind the contact card */
    background: #0098dc url("../images/bg-noise.png?v=2") 0 0 / 160px 160px repeat !important;
    box-shadow: none;
    color: #fff !important;
    letter-spacing: .04em;
}
.btn.club-cta-button:hover,
.btn.club-cta-button:focus-visible,
.btn.club-cta-button:active {
    border-color: #0083bf !important;
    background: #0083bf url("../images/bg-noise.png?v=2") 0 0 / 160px 160px repeat !important;
    color: #fff !important;
}
.btn.btn-switch-text.btn-large.club-cta-button > span {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 7px 7px 7px 28px;
}
.btn.btn-switch-text.btn-large.left-icon.club-cta-button > span { padding: 7px 28px 7px 7px; }
.btn.club-cta-button > span > span:not(.btn-double-text) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 50%;
    background: #fff;
    color: #237da3;
    font-size: 14px;
    flex: 0 0 36px;
}
/* the theme gives button icons a 6px left margin, which pushed the chevron off-centre; 1px keeps it optically centred */
.btn.club-cta-button > span > span:not(.btn-double-text) i { margin: 0 0 0 1px !important; }
.btn.club-cta-button:hover > span > span:not(.btn-double-text),
.btn.club-cta-button:focus-visible > span > span:not(.btn-double-text) { color: #1c6685; }

/* footer contact card (photo left, text right) */
.club-cta-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    overflow: hidden;
    border-radius: 24px;
    background: #fcfaf7;
    box-shadow: 0 18px 42px rgba(30, 24, 18, .18);
    text-align: left;
}
.club-cta-card-media { position: relative; min-height: 320px; }
.club-cta-card-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%; /* keep both faces in frame */
}
.club-cta-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(36px, 4.5vw, 64px) clamp(28px, 4.5vw, 60px);
}
.club-cta-card-title {
    margin: 0 0 24px;
    color: #4c443d;
    font-size: clamp(24px, 2.2vw, 30px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .06em;
}
.club-cta-card-title span {
    display: block;
    margin-top: 8px;
    color: #237da3;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
}
.club-cta-card-text {
    margin: 0 0 28px;
    color: #4c443d;
    font-size: 15px;
    line-height: 2;
}
.club-cta-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 14px 24px;
}
.club-cta-card-tel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4c443d;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 700;
}
.club-cta-card-tel:hover { color: #237da3; }
@media (max-width: 767px) {
    .club-cta-card { grid-template-columns: 1fr; border-radius: 20px; }
    .club-cta-card-media { min-height: 0; aspect-ratio: 16 / 10; }
    .club-cta-card-body { padding: 30px 24px 34px; }
    .club-cta-card-actions { justify-content: flex-start; }
}
/* the card straddles the boundary between the last section and the footer */
.club-cta-container {
    position: relative;
    z-index: 5;
    margin-top: calc(var(--club-cta-overlap) * -1);
}
:root { --club-cta-overlap: clamp(120px, 12vw, 170px); }
/* blue band behind the contact card, wavy top and bottom edges (beige section above, white footer below) */
.club-cta-container::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: clamp(-80px, -6vw, -50px);
    bottom: clamp(-80px, -6vw, -50px);
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #0098dc;
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 36' preserveAspectRatio='none'%3E%3Cpath d='M0 18 Q40 0 80 18 T160 18 V36 H0 Z'/%3E%3C/svg%3E") left top / 160px 36px repeat-x,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 36' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H160 V18 Q120 36 80 18 T0 18 Z'/%3E%3C/svg%3E") left bottom / 160px 36px repeat-x,
        linear-gradient(#000, #000) center / 100% calc(100% - 70px) no-repeat;
    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 36' preserveAspectRatio='none'%3E%3Cpath d='M0 18 Q40 0 80 18 T160 18 V36 H0 Z'/%3E%3C/svg%3E") left top / 160px 36px repeat-x,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 36' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H160 V18 Q120 36 80 18 T0 18 Z'/%3E%3C/svg%3E") left bottom / 160px 36px repeat-x,
        linear-gradient(#000, #000) center / 100% calc(100% - 70px) no-repeat;
    pointer-events: none;
}
footer:has(.club-cta-card) { display: flow-root; padding-top: 0 !important; }
section:has(+ footer .club-cta-card) {
    padding-bottom: calc(var(--club-cta-overlap) + clamp(50px, 6vw, 90px)) !important;
}
@media (max-width: 767px) {
    :root { --club-cta-overlap: 110px; }
    /* clear the blue band (sticks out 50px below the card) and leave a gap before the footer logo */
    footer .club-cta-card { margin-bottom: 100px !important; }
}

/* footer: plain white background with a wavy top edge */
footer.bg-gradient-aztec-green {
    position: relative;
    background: #fff !important;
}
footer.bg-gradient-aztec-green > .position-absolute { display: none; }
footer.bg-gradient-aztec-green::before {
    content: "";
    position: absolute;
    z-index: 4;
    top: -35px;
    left: 0;
    width: 100%;
    height: 36px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 36' preserveAspectRatio='none'%3E%3Cpath d='M0 18 Q40 0 80 18 T160 18 V36 H0 Z'/%3E%3C/svg%3E") left top / 160px 36px repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 36' preserveAspectRatio='none'%3E%3Cpath d='M0 18 Q40 0 80 18 T160 18 V36 H0 Z'/%3E%3C/svg%3E") left top / 160px 36px repeat-x;
    pointer-events: none;
}
footer.bg-gradient-aztec-green .footer-dark,
footer.bg-gradient-aztec-green .footer-dark p,
footer.bg-gradient-aztec-green .footer-dark a,
footer.bg-gradient-aztec-green .text-medium-gray { color: #4c443d !important; }
footer.bg-gradient-aztec-green .site-logo.text-white { color: #237da3 !important; }
/* only Zen Maru Gothic 700 is loaded, so Japanese always renders bold; lift the Latin/digits (Montserrat) to match */
footer.bg-gradient-aztec-green .footer-dark p,
footer.bg-gradient-aztec-green .footer-dark a,
footer.bg-gradient-aztec-green .footer-navbar .nav-link { font-weight: 600 !important; }
/* phones: underline the tappable phone number in the footer address */
@media (max-width: 767px) {
    footer .footer-dark a[href^="tel:"] {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
    }
}
/* small round dot before each footer nav link */
footer .footer-navbar .nav-link { display: inline-flex; align-items: center; gap: 7px; line-height: 1.5; } /* fixed line-height: Latin-only "TOP" otherwise gets a shorter line box than the Japanese links and sits higher */
footer .footer-navbar .nav-link::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #237da3;
}
footer.bg-gradient-aztec-green .footer-dark a:hover,
footer.bg-gradient-aztec-green .footer-navbar li a:hover { color: #237da3 !important; }
footer.bg-gradient-aztec-green .border-color-transparent-white-light { border-color: rgba(165, 140, 111, .3) !important; }

/* scattered flower / shape decorations (from AdobeStock_783496675) */
.has-scatter { position: relative; isolation: isolate; }
footer.has-scatter { isolation: auto; }
.scatter {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
footer .scatter { z-index: 0; }
.scatter-item {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: auto;
    transform: rotate(var(--r));
    /* stop-motion tilt around each flower's own angle, like the 「南平岸学童クラブについて」 label icons */
    transform-origin: 50% 100%;
    animation: scatter-tilt 3s linear infinite;
}
.scatter-item:nth-child(2n) { animation-delay: -1.5s; }
.scatter-item:nth-child(3n) { animation-duration: 3.6s; }
@keyframes scatter-tilt {
    0%, 49.99% { transform: rotate(calc(var(--r) - 4deg)); }
    50%, 100% { transform: rotate(calc(var(--r) + 4deg)); }
}
@media (prefers-reduced-motion: reduce) {
    .scatter-item { animation: none; }
}
@media (max-width: 767px) {
    .scatter-item { width: calc(var(--w) * .6); }
    .scatter-item:nth-child(n+3) { display: none; }
}

/* header phone number as a solid pill button (after belle-kindergarten.ed.jp) */
.club-nav-tel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 18px;
    border-radius: 999px;
    background: #0098dc url("../images/bg-noise.png?v=2") 0 0 / 160px 160px repeat; /* site blue + grain, same as the buttons */
    color: #fff !important;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .03em;
    white-space: nowrap;
    transition: background-color .3s;
}
.club-nav-tel i { font-size: 18px; }
.club-nav-tel:hover,
.club-nav-tel:focus-visible { background-color: #0083bf; color: #fff !important; }
/* colors.css forces header icon links to dark ink; keep the pill text white */
header.club-header .header-icon a.club-nav-tel,
header.club-header .header-icon a.club-nav-tel:hover { color: #fff !important; }

/* town-and-grass landscape along the very bottom of the footer, fading into the white */
footer.bg-gradient-aztec-green {
    padding-bottom: calc(clamp(150px, 20vw, 330px) - 40px) !important;
}
footer.bg-gradient-aztec-green::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: clamp(150px, 20vw, 330px);
    background: url('../images/lead-bg-city.jpg') center bottom / cover no-repeat; /* same artwork as the 「放課後に、もっとワクワクを。」 section */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 45%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 45%);
    pointer-events: none;
}
footer.bg-gradient-aztec-green .footer-dark { z-index: 1; }

/* footer logo image (same artwork as the header) */
.footer-logo { display: inline-block; line-height: 0; }
.footer-logo img { display: block; width: clamp(200px, 22vw, 260px); height: auto; }

/* ==== top page MV: photo collage ==== */
.home-kv {
    position: relative;
    overflow: hidden;
    padding: clamp(96px, 9vw, 120px) clamp(16px, 2.2vw, 28px) clamp(48px, 5vw, 72px);
    background: #fff;
}
.home-kv-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr .82fr 1fr;
    align-items: center;
    gap: clamp(14px, 1.6vw, 20px);
    max-width: 1280px;
    margin: 0 auto;
}
.home-kv-col { display: grid; gap: clamp(14px, 1.6vw, 20px); }
.home-kv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 20px); }
.home-kv-photo {
    position: relative;
    margin: 0;
    animation: home-kv-in .9s cubic-bezier(.2, .7, .3, 1) both;
}
.home-kv-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 12px;
    object-fit: cover;
}
.home-kv-photo.is-big img { aspect-ratio: 820 / 640; }
.home-kv-photo picture { display: block; }
.home-kv-col-left .home-kv-pair .home-kv-photo:nth-child(1) { animation-delay: .15s; }
.home-kv-col-left .home-kv-pair .home-kv-photo:nth-child(2) { animation-delay: .3s; }
.home-kv-col-right .home-kv-pair .home-kv-photo:nth-child(1) { animation-delay: .2s; }
.home-kv-col-right .home-kv-pair .home-kv-photo:nth-child(2) { animation-delay: .35s; }
.home-kv-col-right .home-kv-photo.is-big { animation-delay: .45s; }
@keyframes home-kv-in { from { opacity: 0; transform: translateY(24px); } }

/* vertical catch copy on white strips over the left photo */
.home-kv-copy {
    position: absolute;
    top: -12px;
    left: clamp(14px, 2vw, 26px);
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: clamp(8px, .9vw, 12px);
    margin: 0;
}
.home-kv-copy span {
    padding: clamp(12px, 1.2vw, 18px) clamp(6px, .6vw, 9px);
    background: #fff;
    color: #237da3;
    writing-mode: vertical-rl;
    font-size: clamp(22px, 2.5vw, 36px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .06em;
    box-shadow: 0 6px 14px rgba(35, 125, 163, .1);
}
/* both lines start at the same height */

/* centre: eyebrow, logo, smile line */
.home-kv-center {
    position: relative;
    z-index: 2;
    margin: 0 clamp(-60px, -3vw, -20px);
    text-align: center;
    animation: home-kv-in 1s .25s cubic-bezier(.2, .7, .3, 1) both;
}
.home-kv-eyebrow {
    margin: 0 0 14px;
    color: #4c443d;
    font-size: clamp(14px, 1.4vw, 19px);
    font-weight: 700;
    letter-spacing: .12em;
}
.home-kv-logo { display: block; width: 100%; height: auto; }
.home-kv-lead {
    margin: 16px 0 0;
    color: #685e54;
    font-size: clamp(13px, 1.15vw, 16px);
    line-height: 1.9;
}

/* yellow circle badge on the right photo */
.home-kv-badge {
    position: absolute;
    right: clamp(-14px, -1vw, -6px);
    bottom: clamp(-18px, -1.4vw, -10px);
    display: grid;
    place-content: center;
    justify-items: center;
    width: clamp(104px, 10vw, 136px);
    aspect-ratio: 1;
    margin: 0;
    border-radius: 50%;
    background: #ffd84d;
    color: #4c443d;
    font-size: clamp(13px, 1.15vw, 16px);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}
.home-kv-badge i { margin-bottom: 4px; font-size: 1.5em; }

/* colour shapes behind the photos */
.home-kv-blobs span {
    position: absolute;
    z-index: 0;
    opacity: .45;
    -webkit-mask: var(--shape) center / 100% 100% no-repeat;
    mask: var(--shape) center / 100% 100% no-repeat;
}
/* top-left: blue blob, tucked partly off the top-left corner */
.home-kv-blobs span:nth-child(1) { top: 56px; left: -5%; width: clamp(360px, 40vw, 600px); aspect-ratio: 952 / 561; background: url('../images/kv-blob-blue.png') center / contain no-repeat; -webkit-mask: none; mask: none; opacity: .9; }
/* object2: flat right edge -> hugs the right side */
.home-kv-blobs span:nth-child(2) { top: 14%; right: -4%; width: clamp(180px, 19vw, 290px); aspect-ratio: 445 / 701; background: url('../images/kv/kv-blob-pink.png') center / contain no-repeat; -webkit-mask: none; mask: none; opacity: .75; } /* pink blob, upright, tucked a little past the right edge */
/* centre: lavender blob, low behind the centre column */
.home-kv-blobs span:nth-child(3) { bottom: 2%; left: 38%; width: clamp(260px, 25vw, 380px); aspect-ratio: 806 / 733; background: url('../images/kv-blob-lavender.png') center / contain no-repeat; -webkit-mask: none; mask: none; opacity: .8; }
.home-kv-blobs span:nth-child(4) { display: none; }

@media (max-width: 991px) {
    .home-kv { padding-top: 92px; }
    .home-kv-inner { grid-template-columns: 1fr 1fr; }
    .home-kv-center { grid-column: 1 / -1; order: -1; margin: 18px auto 10px; width: min(100%, 420px); }
    .home-kv-col, .home-kv-pair { display: contents; }
    .home-kv-col-left .home-kv-photo.is-big { grid-column: 1 / -1; order: -2; }
    .home-kv-col-right .home-kv-photo.is-big { display: none; }
    .home-kv-blobs span:nth-child(1) { top: 40px; left: -70px; width: 280px; }
    .home-kv-blobs span:nth-child(2) { top: 38%; width: 130px; }
    .home-kv-blobs span:nth-child(3) { left: auto; right: -50px; bottom: 6%; width: 230px; }
    .home-kv-copy { left: auto; right: 16px; gap: 8px; }
    .home-kv-copy span { padding: 14px 7px; font-size: clamp(24px, 6.4vw, 30px); }
}
/* under the MV: plain white where the sky photo fades in (the grid texture only stays in the bottom strip that meets the grid section below) */
.home-kv + .home-lead {
    background-image: linear-gradient(#fff, #fff), url('../images/bg-grid.jpg');
    background-size: 100% calc(100% - 34px), 67px 68px;
    background-position: left top, left top;
    background-repeat: no-repeat, repeat;
}
.home-kv + .home-lead {
    margin-top: 0;
    padding-top: clamp(170px, 15vw, 230px) !important;
}
@media (max-width: 767px) {
    .home-kv + .home-lead { margin-top: 0; padding-top: 80px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .home-kv-photo, .home-kv-center { animation: none; }
}
/* ==== end new MV ==== */

/* ==== program page: same palette as the top page (blue / cream / grid, white cards) ==== */

/* section labels and headings: pink -> site blue */
.program-section-label {
    color: #237da3 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 313.93 22.7'%3E%3Cpolyline points='0 1.5 148.02 1.5 163.03 21.81' fill='none' stroke='%23237da3' stroke-width='3'/%3E%3Cline x1='163.03' y1='1.5' x2='313.93' y2='1.5' fill='none' stroke='%23237da3' stroke-width='3'/%3E%3C/svg%3E") !important;
}
#program-lead-heading,
.program-feature-heading h2,
.pricing-heading h2 { color: #237da3 !important; }
.program-feature-heading,
.pricing-heading { border-bottom-color: #c9dfe8 !important; }
#weekly-heading,
.learning-feature-copy h3 { border-bottom-color: #a9cfdf !important; }

/* weekly schedule: plain white panel framed in beige, white cards with a thinner beige edge, one accent colour */
.weekly-panel { background: #fff !important; border: 3px solid #e8d8c0; }
.weekly-cards .feature-box { border: 1px solid #efe3d1 !important; border-radius: 0 22px 0 22px !important; } /* diagonal corners, same as the top page programme photos */
.weekly-cards .feature-box { position: relative; }
.weekly-cards .feature-box > span { color: #237da3 !important; }
.weekly-cards .feature-box > span::before { background: #237da3 !important; }

/* programme introduction: blue band like the top page, white cards on it */
.program-feature-section {
    background: #0098dc !important;
    border-radius: 32px !important;
}
/* wavy top edge, same as the top page's blue band under 放課後のもうひとつの居場所。 (bottom corners stay rounded) */
.program-feature-section {
    border-radius: 0 0 32px 32px !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14 Q50 0 100 14 T200 14 V28 H0 Z'/%3E%3C/svg%3E") left top / 200px 28px repeat-x, linear-gradient(#000, #000) left 27px / 100% calc(100% - 27px) no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14 Q50 0 100 14 T200 14 V28 H0 Z'/%3E%3C/svg%3E") left top / 200px 28px repeat-x, linear-gradient(#000, #000) left 27px / 100% calc(100% - 27px) no-repeat;
}
/* faint light-blue shapes behind the cards, same as the top page's 学習／音楽プログラムで広がる可能性 band */
.program-feature-section { overflow: hidden; }
.program-feature-section::before,
.program-feature-section::after {
    content: "";
    position: absolute;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .4;
    pointer-events: none;
}
.program-feature-section::before {
    top: -150px;
    left: -190px;
    width: clamp(430px, 42vw, 680px);
    aspect-ratio: 377 / 554;
    background-image: url('../images/shape-blob-1.png');
}
.program-feature-section::after {
    right: -220px;
    bottom: -190px;
    width: clamp(470px, 46vw, 740px);
    aspect-ratio: 512 / 734;
    background-image: url('../images/shape-blob-2.png');
}
@media (max-width: 767px) {
    .program-feature-section::before { top: -80px; left: -170px; width: 330px; }
    .program-feature-section::after { right: -190px; bottom: -120px; width: 360px; }
}
.program-feature-section .program-feature-kicker,
.program-feature-section .program-feature-heading h2 { color: #fff !important; }
/* English sits under the heading as plain small caps (the line ornament was dropped), like the top page's MINAMIHIRAGISHI GAKUDO CLUB */
.program-feature-en {
    display: block;
    margin-top: 10px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .2em;
}
.program-feature-section .program-feature-heading { border-bottom-color: rgba(255, 255, 255, .45) !important; }
.learning-feature { border: 0 !important; border-radius: 32px !important; }
.learning-feature-label,
.learning-feature-details dt { color: #237da3 !important; }
.learning-feature-number { background: #0098dc url("../images/bg-noise.png?v=2") 0 0 / 160px 160px repeat !important; } /* same blue + grain as the section band behind the cards */


/* fees: grid paper section, cream panel, blue table header */
.pricing-marquee { color: #e6eef2 !important; }
.pricing-section {
    background: #fff url('../images/bg-grid.jpg') repeat 0 0 / 67px 68px !important;
}
.pricing-panel { background: #f8efe2 !important; border-color: #efe2cf !important; }
.pricing-panel .pricing-table-simple,
.pricing-panel .pricing-table-simple th,
.pricing-panel .pricing-table-simple td { border-color: #e8dccb !important; }
.pricing-panel .pricing-table-simple thead th { background: #237da3 !important; }
.pricing-panel .pricing-table-simple tbody tr:nth-child(even) { background: #f7fbfd !important; }

/* opening hours: cream section with a wavy top edge, white cards with corner dots */
section.usage-section {
    position: relative;
    background: #f8efe2 !important;
    padding-top: clamp(110px, 10vw, 150px) !important;
}
section.usage-section::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: clamp(48px, 5vw, 74px);
    background: #fff url('../images/bg-grid.jpg') repeat 0 0 / 67px 68px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 44 Q180 88 360 44 T720 44 T1080 44 T1440 44 V0 H0 Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 44 Q180 88 360 44 T720 44 T1080 44 T1440 44 V0 H0 Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
    pointer-events: none;
}
.usage-section .bg-white,
.usage-section .bg-tranquil {
    position: relative;
    border: 1px solid #e8dccb;
    border-radius: 28px !important;
    background: #fff !important;
    box-shadow: 0 16px 40px rgba(98, 79, 58, .06) !important;
}
/* remaining pink accents */
.weekly-cards .feature-box[class*="palette-"] { --program-ink: #237da3; }
.learning-feature-visual { border-color: #e3f3fa !important; }
.music-feature .learning-feature-visual { background: #e3f3fa !important; }
.program-feature-section .program-feature-heading::before { border-color: #b8dfa1 !important; border-left-color: transparent !important; }
.program-feature-section .program-feature-heading::after { background: #ffd84d !important; }
section.usage-section .bg-white > span.text-dark-gray,
section.usage-section .bg-tranquil > span.text-dark-gray { color: #237da3 !important; }
section.usage-section .row > div > div { border-radius: 28px !important; box-shadow: 0 16px 40px rgba(98, 79, 58, .06) !important; }
section.usage-section .row > div > div > span { color: #237da3 !important; border-bottom-color: #a9cfdf !important; }
section.usage-section .text-yellow { color: #e8a317 !important; }
/* ==== end program page restyle ==== */


/* highlighter marker that draws itself left-to-right when scrolled into view (js/text-marker.js adds the classes) */
.text-marker {
    background: linear-gradient(transparent 62%, #f6bcd5 62%, #f6bcd5 92%, transparent 92%) no-repeat left / 100% 100%; /* light tint of the logo pink #e8498c */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.marker-ready .text-marker { background-size: 0% 100%; transition: background-size 1.1s cubic-bezier(.65, 0, .35, 1) .35s; }
.marker-ready .text-marker.is-marked { background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) {
    .marker-ready .text-marker { transition: none; }
}

/* ==== fees: green look matching the top page's "プログラムのご紹介" (green band, wavy top, white rounded panel, light-green circle) ==== */
.pricing-section {
    background: #00aa54 !important;
    padding-top: clamp(90px, 8vw, 120px) !important;
    padding-bottom: clamp(80px, 8vw, 120px) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14 Q50 0 100 14 T200 14 V28 H0 Z'/%3E%3C/svg%3E") left top / 200px 28px repeat-x,
                  linear-gradient(#000, #000) left 27px / 100% calc(100% - 27px) no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14 Q50 0 100 14 T200 14 V28 H0 Z'/%3E%3C/svg%3E") left top / 200px 28px repeat-x,
          linear-gradient(#000, #000) left 27px / 100% calc(100% - 27px) no-repeat;
}
.pricing-section > .container {
    position: relative;
    overflow: hidden;
    padding: clamp(48px, 5.5vw, 76px) clamp(20px, 5.5vw, 76px);
    border-radius: 40px;
    background: #fff;
}
.pricing-section > .container::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -115px;
    right: -110px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: #b8dfa1;
    pointer-events: none;
}
.pricing-section .program-section-label {
    color: #007a3d !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 313.93 22.7'%3E%3Cpolyline points='0 1.5 148.02 1.5 163.03 21.81' fill='none' stroke='%23007a3d' stroke-width='3'/%3E%3Cline x1='163.03' y1='1.5' x2='313.93' y2='1.5' fill='none' stroke='%23007a3d' stroke-width='3'/%3E%3C/svg%3E") !important;
}
.pricing-heading { border-bottom-color: #cfe8bf !important; }
.pricing-heading h2 { color: #635445 !important; }
.pricing-heading::before { border-color: #b8dfa1; border-top-color: transparent; }
.pricing-heading::after { background: #d8e861; }
.pricing-section .pricing-panel { position: relative; z-index: 1; padding: 0; border: 0; background: transparent !important; }
.pricing-panel .pricing-table-simple,
.pricing-panel .pricing-table-simple th,
.pricing-panel .pricing-table-simple td { border-color: #dcecd2 !important; }
.pricing-panel .pricing-table-simple thead th { background: #007a3d !important; }
.pricing-panel .pricing-table-simple tbody tr:nth-child(even) { background: #f3faee !important; }
@media (max-width: 767px) {
    .pricing-section > .container { width: calc(100% - 20px); padding: 38px 18px; border-radius: 38px 38px 20px 20px; }
}

/* navigation without its cream background bar, PC and phone (trial) */
/* extra "html body" so this beats the same !important rule in colors.css, which loads later */
html body header.club-header .club-navbar,
html body header.club-header .navbar-collapse { background: transparent !important; box-shadow: none !important; }

/* header logo sits on its own white tab: flush with the top-left of the window, rounded bottom-right corner.
   The left box-shadow fills the gap between the window edge and the logo whatever the container padding is. */
header.club-header .site-logo {
    display: inline-block;
    padding-right: 26px !important;
    background: #fff;
    border-bottom-right-radius: 28px;
    box-shadow: -80px 0 0 #fff;
}
@media (max-width: 991px) {
    header.club-header .site-logo { padding-right: 18px !important; border-bottom-right-radius: 22px; }
}

/* contact page: wavy top edge on the form panel (bottom corners stay rounded) */
.contact-form-section > .container {
    border-radius: 0 0 24px 24px !important;
    padding-top: calc(48px + 28px) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14 Q50 0 100 14 T200 14 V28 H0 Z'/%3E%3C/svg%3E") left top / 200px 28px repeat-x, linear-gradient(#000, #000) left 27px / 100% calc(100% - 27px) no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14 Q50 0 100 14 T200 14 V28 H0 Z'/%3E%3C/svg%3E") left top / 200px 28px repeat-x, linear-gradient(#000, #000) left 27px / 100% calc(100% - 27px) no-repeat;
}
@media (max-width: 767px) {
    .contact-form-section > .container { padding-top: calc(32px + 28px) !important; }
}

/* ==== paper-like grain on the coloured content backgrounds ====
   images/bg-noise.png: 160px tile of faint dark/light speckles on transparent, laid over the existing colour. */
.home-program-highlights,
.home-program-preview,
.program-feature-section,
.pricing-section,
section.usage-section,
.contact-phone-section .bg-tranquil,
.contact-form-section > .container,
.contact-privacy-section .bg-tranquil,
.home-program-highlight-label,
.club-cta-container::before {
    background-image: url("../images/bg-noise.png?v=2") !important;
    background-size: 160px 160px !important;
    background-repeat: repeat !important;
}
.home-facility {
    /* grain only (no pattern) */
    background-image: url("../images/bg-noise.png?v=2");
    background-size: 160px 160px;
    background-repeat: repeat;
}
.contact-operator {
    /* same as the top page's 施設情報・アクセス: grain only (half-circle pattern off) */
    background-image: url("../images/bg-noise.png?v=2");
}

/* global nav: small round dot in place of the line icons, matching the footer nav */
header.club-header .navbar-nav .nav-menu-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #237da3;
    font-size: 0;
    vertical-align: middle;
}
header.club-header .navbar-nav .nav-menu-icon::before { content: none; }
/* MV colour shapes: grain clipped to each shape (the shape PNG doubles as its own mask, so no speckles outside it) */
.home-kv-blobs span:nth-child(1) { background: url("../images/bg-noise.png?v=2") 0 0 / 160px 160px repeat, url('../images/kv-blob-blue.png') center / contain no-repeat; -webkit-mask: url('../images/kv-blob-blue.png') center / contain no-repeat; mask: url('../images/kv-blob-blue.png') center / contain no-repeat; }
.home-kv-blobs span:nth-child(2) { background: url("../images/bg-noise.png?v=2") 0 0 / 160px 160px repeat, url('../images/kv/kv-blob-pink.png') center / contain no-repeat; -webkit-mask: url('../images/kv/kv-blob-pink.png') center / contain no-repeat; mask: url('../images/kv/kv-blob-pink.png') center / contain no-repeat; }
.home-kv-blobs span:nth-child(3) { background: url("../images/bg-noise.png?v=2") 0 0 / 160px 160px repeat, url('../images/kv-blob-lavender.png') center / contain no-repeat; -webkit-mask: url('../images/kv-blob-lavender.png') center / contain no-repeat; mask: url('../images/kv-blob-lavender.png') center / contain no-repeat; }
/* 「放課後に、もっとワクワクを。」: lighter grain (bg-noise-light.png = half strength) over the town illustration and the frosted white card */
.home-lead::before { background: url("../images/bg-noise-light.png") 0 0 / 160px 160px repeat, #f8fdff url('../images/lead-bg-city.jpg') center bottom / cover no-repeat; }
.home-lead-copy { background-image: url("../images/bg-noise-light.png"); background-size: 160px 160px; background-repeat: repeat; }

/* subpage MV: English label lines up with the left-aligned Japanese heading */
.program-page-mv .subpage-mv-label,
.contact-page-mv .subpage-mv-label { width: auto; text-align: left; color: #237da3; } /* site accent blue */
/* yellow dot now sits inline at the start of the English label (it floated above-left of it), and the label/heading gap is tightened */
.program-page-mv .subpage-mv-copy::before,
.contact-page-mv .subpage-mv-copy::before { display: none; }
.program-page-mv .subpage-mv-label,
.contact-page-mv .subpage-mv-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: .16em;
}
.program-page-mv .subpage-mv-label::before,
.contact-page-mv .subpage-mv-label::before {
    content: "";
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffdc40;
}
@media (max-width: 575px) {
    .program-page-mv .subpage-mv-label,
    .contact-page-mv .subpage-mv-label { gap: 8px; font-size: 12px; }
    .program-page-mv .subpage-mv-label::before,
    .contact-page-mv .subpage-mv-label::before { width: 10px; height: 10px; }
}

/* breadcrumb: plain text, soft separator, current page in accent blue */
.club-breadcrumb a { color: #8c8277; }
.club-breadcrumb a:hover { color: #237da3; }
.club-breadcrumb a:focus-visible { outline-color: #237da3; }
.club-breadcrumb-separator { color: #c9bfb3; }
.club-breadcrumb [aria-current="page"] { color: #237da3; }

/* breadcrumb sits under the page title (it floated alone at the top, leaving the PC title area sparse) */
.program-page-mv .club-breadcrumb,
.contact-page-mv .club-breadcrumb { position: static; margin-top: 14px; }
.program-page-mv .subpage-mv-inner,
.contact-page-mv .subpage-mv-inner { min-height: 280px; }
.program-page-mv .subpage-mv-copy,
.contact-page-mv .subpage-mv-copy { padding: 56px 0 52px; }
@media (max-width: 575px) {
    .program-page-mv .club-breadcrumb,
    .contact-page-mv .club-breadcrumb { margin-top: 8px; }
}

/* contact form: required mark in the logo pink so it stands out from the dark labels */
.form-required-mark { margin-left: 2px; color: #e8498c; }

/* the open rings left of プログラム紹介 / 料金のご案内 turn slowly (start from their original tilt) */
.program-feature-heading::before { --ring-start: -35deg; animation: heading-ring-spin 14s linear infinite; }
.pricing-heading::before { --ring-start: 20deg; animation: heading-ring-spin 14s linear infinite; }
/* grain on the rings: drawn as a noise-filled disc cut to a ring (radial mask) with its gap cut out (conic mask), since a CSS border can't carry a texture */
.program-feature-heading::before { --ring-w: 48px; --ring-gap: 225deg; }
.pricing-heading::before { --ring-w: 34px; --ring-gap: 315deg; }
@media (max-width: 767px) {
    .program-feature-heading::before { --ring-w: 25px; }
    .pricing-heading::before { --ring-w: 18px; }
}
.program-feature-section .program-feature-heading::before,
.pricing-section .pricing-heading::before {
    border-color: transparent !important;
    background: #b8dfa1 url("../images/bg-noise.png?v=2") 0 0 / 160px 160px repeat;
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--ring-w)), #000 calc(100% - var(--ring-w) + .5px)), conic-gradient(from var(--ring-gap), transparent 0 90deg, #000 90deg);
    -webkit-mask-composite: source-in;
    mask: radial-gradient(closest-side, transparent calc(100% - var(--ring-w)), #000 calc(100% - var(--ring-w) + .5px)), conic-gradient(from var(--ring-gap), transparent 0 90deg, #000 90deg);
    mask-composite: intersect;
}
/* プログラム紹介: turning ring on the right, yellow dot on the left (swapped from the original sides) */
.program-feature-heading::before { left: auto; right: 5%; }
.program-feature-heading::after { right: auto; left: 9%; }
@media (max-width: 767px) {
    .program-feature-heading::before { left: auto; right: -30px; }
    .program-feature-heading::after { right: auto; left: 0; }
}
/* the MINAMIHIRAGISHI GAKUDO word strip (same markup/look as the top page's, .home-facility-slider-words) runs under 料金のご案内,
   on the same white grid as the wave that starts the usage section below */
.pricing-marquee {
    min-height: 0 !important;
    margin-top: 0 !important;
    padding: clamp(36px, 4vw, 56px) 0 clamp(20px, 2vw, 30px) !important;
    background: #fff url('../images/bg-grid.jpg') repeat 0 0 / 67px 68px;
}
/* 料金のご案内: English under the heading like PROGRAMS / CONTACT FORM, in the section green on the white panel */
.pricing-heading .program-feature-en { color: #007a3d; }
/* breathing room between the blue programme band and the room photo above 料金のご案内 */
.program-feature-section + .program-detail-photo { margin-top: clamp(40px, 5vw, 72px); }
@keyframes heading-ring-spin {
    from { transform: rotate(var(--ring-start)); }
    to { transform: rotate(calc(var(--ring-start) + 360deg)); }
}
@media (prefers-reduced-motion: reduce) {
    .program-feature-heading::before,
    .pricing-heading::before { animation: none; }
}

/* English labels (Montserrat, small + wide tracking) read thin beside the bold Zen Maru Gothic Japanese: one step heavier everywhere */
.home-about-label-text small,
.home-facility-heading-copy span,
.club-cta-card-title span,
.program-feature-en,
.home-program-preview-title .home-program-preview-title-en,
.program-page-mv .subpage-mv-label,
.contact-page-mv .subpage-mv-label { font-weight: 800 !important; }
/* English labels stay in Montserrat now that body text starts with Zen Maru Gothic */
.home-facility-heading-copy span,
.subpage-mv-label,
.learning-feature-label,
.program-section-label,
.scroll-text { font-family: 'Montserrat', sans-serif; }
@media (max-width: 767px) {
    .home-about-label-text small { font-size: 9px; } /* 8px was too small to hold the weight */
}

/* privacy checkbox: box and label side by side, box centred on the first text line (on phones the label wrapped under a floated box and dropped a line) */
.contact-form-section .form-check { display: flex; align-items: flex-start; gap: 10px; padding-left: 0; }
.contact-form-section .form-check .form-check-input { float: none; flex: 0 0 auto; margin: 5px 0 0; } /* (30px line - 20px box) / 2 */
.contact-form-section .form-check .form-check-label { margin: 0; line-height: 30px; }

/* contact page: lead text + phone box sit on the same white graph-paper grid as the privacy section further down */
.contact-lead,
.contact-phone-section,
.contact-form-section { background: #fff url('../images/bg-grid.jpg') repeat 0 0 / 67px 68px; } /* form section: the strip above and beside the blue wavy panel */

/* contact form: placeholders a step lighter than typed text; the unselected 「選択してください」 matches them */
.contact-form-section .form-control::placeholder { color: #9a948d !important; opacity: 1; } /* !important: the theme sets placeholders with !important */
.contact-form-section .form-control::-webkit-input-placeholder { color: #9a948d !important; }
.contact-form-section select.form-control:invalid { color: #9a948d; }
.contact-form-section select.form-control option { color: #66615c; }

/* Instagram banner above the contact CTA (top page): white card, Instagram-gradient icon, blue "見てみる" pill */
/* the banner takes over the CTA's upward overlap into the section above, and the CTA card follows below it */
.club-insta-container { position: relative; z-index: 6; margin-top: calc(var(--club-cta-overlap) * -1); margin-bottom: clamp(28px, 3vw, 40px); }
.club-insta-container + .club-cta-container { margin-top: 0; }
.club-insta-banner {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.4vw, 28px);
    padding: clamp(18px, 2.2vw, 26px) clamp(20px, 3vw, 36px);
    border: 1px solid #efe3d1;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(98, 79, 58, .08);
    color: #4c443d;
    transition: transform .3s, box-shadow .3s;
}
.club-insta-banner:hover,
.club-insta-banner:focus-visible { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(98, 79, 58, .12); color: #4c443d; }
.club-insta-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: clamp(52px, 5vw, 64px);
    height: clamp(52px, 5vw, 64px);
    border-radius: 18px;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    color: #fff;
    font-size: clamp(26px, 2.6vw, 32px);
    line-height: 1;
}
.club-insta-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.club-insta-label { color: #e8498c; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .2em; }
.club-insta-title { color: #237da3; font-size: clamp(17px, 1.8vw, 21px); font-weight: 700; line-height: 1.5; }
.club-insta-account { color: #8c8277; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.club-insta-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 10px 14px 10px 22px;
    border-radius: 999px;
    background: #0098dc url("../images/bg-noise.png?v=2") 0 0 / 160px 160px repeat;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}
.club-insta-more i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #0098dc; font-size: 12px; }
@media (max-width: 575px) {
    .club-insta-banner { flex-wrap: wrap; gap: 14px; border-radius: 20px; }
    .club-insta-more { justify-content: center; width: 100%; margin-left: 0; }
}

/* footer: Instagram link under the address */
.footer-instagram {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: #4c443d;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
}
.footer-instagram i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); /* Instagram brand gradient, same as the banner icon */
    color: #fff;
    font-size: 16px;
}
.footer-instagram:hover,
.footer-instagram:focus-visible { color: #237da3; }

/* ==== contact CTA: the card itself is blue (no band behind it) ==== */
.club-cta-container::before { display: none !important; }
.club-cta-card { background: #0098dc url("../images/bg-noise.png?v=2") 0 0 / 160px 160px repeat !important; }
.club-cta-card-title,
.club-cta-card-text,
.club-cta-card-tel,
.club-cta-card-tel:hover { color: #fff; }
.club-cta-card-title span { color: #d9f1fc; }
/* button flips to white on the blue card; the chevron circle becomes blue */
.btn.club-cta-button {
    border-color: #fff !important;
    background: #fff !important;
    color: #0083bf !important;
}
.btn.club-cta-button:hover,
.btn.club-cta-button:focus-visible,
.btn.club-cta-button:active {
    border-color: #e9f6fd !important;
    background: #e9f6fd !important;
    color: #006a9b !important;
}
.btn.club-cta-button > span > span:not(.btn-double-text) {
    background: #0098dc url("../images/bg-noise.png?v=2") 0 0 / 160px 160px repeat;
    color: #fff;
}
.btn.club-cta-button:hover > span > span:not(.btn-double-text),
.btn.club-cta-button:focus-visible > span > span:not(.btn-double-text) { color: #fff; }
/* blue variant for light backgrounds (programs "詳細はこちら"): same pill, blue fill, white chevron circle */
.btn.club-cta-button.club-cta-button-blue {
    border-color: #0098dc !important;
    background: #0098dc url("../images/bg-noise.png?v=2") 0 0 / 160px 160px repeat !important;
    color: #fff !important;
}
.btn.club-cta-button.club-cta-button-blue:hover,
.btn.club-cta-button.club-cta-button-blue:focus-visible,
.btn.club-cta-button.club-cta-button-blue:active {
    border-color: #0083bf !important;
    background: #0083bf url("../images/bg-noise.png?v=2") 0 0 / 160px 160px repeat !important;
    color: #fff !important;
}
.btn.club-cta-button.club-cta-button-blue > span > span:not(.btn-double-text),
.btn.club-cta-button.club-cta-button-blue:hover > span > span:not(.btn-double-text),
.btn.club-cta-button.club-cta-button-blue:focus-visible > span > span:not(.btn-double-text) { background: #fff; color: #0098dc; }

/* contact CTA photo: big curved edge facing the text, a blue corner bump and a small illustration on the curve (after the reference banner) */
.club-cta-card-media img:not(.club-cta-card-decor) { clip-path: ellipse(100% 78% at 0% 50%); }
.club-cta-card-media::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: -14%;
    bottom: -30%;
    width: 38%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #0098dc url("../images/bg-noise.png?v=2") 0 0 / 160px 160px repeat;
    pointer-events: none;
}
.club-cta-card-media .club-cta-card-decor {
    position: absolute;
    z-index: 2;
    inset: auto; /* undo the photo rule's inset: 0 */
    right: 2%;
    bottom: 8%;
    width: clamp(64px, 6vw, 85px); /* source is 85px wide */
    height: auto;
    transform: rotate(-6deg);
}
@media (max-width: 767px) {
    /* stacked layout: the curve moves to the bottom edge of the photo */
    .club-cta-card-media img:not(.club-cta-card-decor) { clip-path: ellipse(80% 100% at 50% 0%); }
    .club-cta-card-media::after { left: auto; right: -16%; bottom: auto; top: -22%; width: 34%; }
    .club-cta-card-media .club-cta-card-decor { right: auto; left: 6%; bottom: 2%; width: 68px; }
}

/* contact page photo: vertical catch copy on white strips, same look as the top-page MV (.home-kv-copy) */
.contact-intro-photo,
.program-intro-photo { position: relative; } /* program page reuses .contact-photo-copy for its vertical catch */
.contact-photo-copy {
    position: absolute;
    top: 0; /* the photo box clips its overflow, so a negative offset would cut off the first character */
    right: clamp(18px, 4vw, 56px);
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: clamp(8px, .9vw, 12px);
    margin: 0;
}
.contact-photo-copy span {
    padding: clamp(12px, 1.2vw, 18px) clamp(6px, .6vw, 9px);
    background: #fff;
    color: #237da3;
    writing-mode: vertical-rl;
    font-size: clamp(22px, 2.3vw, 32px); /* close to the top-page MV catch (22–36px) */
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .06em;
    box-shadow: 0 6px 14px rgba(35, 125, 163, .1);
}
/* three short lines, tops aligned like the top-page MV catch */
@media (max-width: 767px) {
    /* keep clear of the photo's rounded top-right corner */
    .contact-photo-copy { right: 26px; gap: 5px; }
    .contact-photo-copy span { padding: 12px 4px 10px; font-size: 17px; }
}


/* phone: subpage title area (breadcrumb / English label / heading / description) tightened and left edges lined up */
@media (max-width: 575px) {
    .program-page-mv .subpage-mv-inner,
    .contact-page-mv .subpage-mv-inner { min-height: 0; }
    .program-page-mv .subpage-mv-copy,
    .contact-page-mv .subpage-mv-copy { padding: 64px 0 26px; }
    /* the small yellow dot collided with the breadcrumb on phones */
    .program-page-mv .subpage-mv-copy::before,
    .contact-page-mv .subpage-mv-copy::before { display: none; }
    .program-page-mv .subpage-mv-label,
    .contact-page-mv .subpage-mv-label { margin-bottom: 8px; }
    .program-page-mv-description,
    .contact-page-mv-description { margin-top: 12px; }
}

/* contact lead sentence on phones: three short centred lines (breaks are in the HTML, phone only) */
@media (max-width: 767px) {
    .contact-lead-text { font-size: 15px; line-height: 1.9; text-align: center; }
}

/* contact page 運営者情報・アクセス heading: same as the top page's 施設情報・アクセス (no green underline from colors.css) */
.contact-page #contact-operator-heading {
    display: block;
    width: auto;
    padding: 0;
    color: #8f7558 !important;
    font-size: clamp(30px, 3.6vw, 48px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .04em !important;
}
.contact-page #contact-operator-heading::before,
.contact-page #contact-operator-heading::after { content: none; }

/* ==== contact page panels in the site palette
   phone = green (like the top page's 「プログラムのご紹介」), form = blue (like the learning/music band); red accents -> site blue/green ==== */
html body.contact-page .contact-phone-section .bg-tranquil {
    background: #00aa54 url("../images/bg-noise.png?v=2") 0 0 / 160px 160px repeat !important;
}
.contact-page .contact-phone-section .bg-tranquil > span { color: #4c443d !important; }
.contact-page .contact-phone-section .bg-tranquil > span i { color: #00aa54 !important; }
html body.contact-page .contact-phone-section a[href^="tel:"] {
    color: #fff !important;
    border-bottom-color: rgba(255, 255, 255, .55);
}
.contact-page .contact-phone-section .bg-tranquil > p { color: #fff; }

html body.contact-page .contact-form-section > .container {
    background-color: #0098dc !important;
}
html body.contact-page .contact-form-section h2 {
    color: #fff !important;
    border-bottom-color: rgba(255, 255, 255, .5);
}
/* the heading's rounded underline + dot (colors.css) turn white on the blue panel */
html body.contact-page .contact-form-section h2::before,
html body.contact-page .contact-form-section h2::after { background: #fff; }
html body.contact-page .contact-form-section .form-control { border-color: #d5e3ea !important; }
html body.contact-page .contact-form-section .form-control:focus {
    border-color: #0098dc !important;
    outline-color: #cdeaf8;
}
html body.contact-page .contact-form-section button[type="submit"] {
    background: #0098dc url("../images/bg-noise.png?v=2") 0 0 / 160px 160px repeat;
    border-color: #0098dc;
}
html body.contact-page .contact-form-section button[type="submit"]:hover { background-color: #0083bf; border-color: #0083bf; }

/* contact form heading: centred white title with the English label underneath (same as PROGRAMS on the programme page) */
html body.contact-page .contact-form-section .program-feature-en { margin-bottom: 40px; }
html body.contact-page .contact-form-section .row:first-child .text-center { text-align: center !important; }
html body.contact-page .contact-form-section h2 {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    border-bottom: 0;
    text-align: center;
}
html body.contact-page .contact-form-section h2::before,
html body.contact-page .contact-form-section h2::after { content: none; }

/* contact form: blue band runs edge to edge (no side gaps), like the top page's learning/music band; content stays centred */
html body.contact-page .contact-form-section > .container {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-left: max(20px, calc((100% - 1040px) / 2)) !important;
    padding-right: max(20px, calc((100% - 1040px) / 2)) !important;
    border-radius: 0 0 32px 32px !important;
}
@media (max-width: 767px) {
    html body.contact-page .contact-form-section > .container { border-radius: 0 0 24px 24px !important; }
}

/* privacy note section: grid-paper background like the other grid sections; the note itself becomes a white card on it */
html body.contact-page .contact-privacy-section {
    padding-top: clamp(40px, 5vw, 64px) !important;
    background: #fff url("../images/bg-grid.jpg") repeat 0 0 / 67px 68px;
}
html body.contact-page .contact-privacy-section .bg-tranquil {
    background: #fff !important;
    border: 1px solid #e8dccb;
    box-shadow: 0 10px 28px rgba(98, 79, 58, .06);
}

/* contact page 運営者情報・アクセス: same big gentle wave on its top edge as the top page's 施設情報・アクセス.
   The beige section is cut into the wave shape (mask) and pulled up over the grid section, so the grid shows above the wave. */
html body.contact-page .contact-operator {
    --op-wave: clamp(48px, 5vw, 74px);
    margin-top: calc(var(--op-wave) * -1);
    padding-top: calc(clamp(70px, 8vw, 110px) + var(--op-wave));
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 44 Q180 88 360 44 T720 44 T1080 44 T1440 44 V100 H0 Z'/%3E%3C/svg%3E") center top / 100% var(--op-wave) no-repeat,
        linear-gradient(#000, #000) left calc(var(--op-wave) - 1px) / 100% calc(100% - var(--op-wave) + 1px) no-repeat;
    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 44 Q180 88 360 44 T720 44 T1080 44 T1440 44 V100 H0 Z'/%3E%3C/svg%3E") center top / 100% var(--op-wave) no-repeat,
        linear-gradient(#000, #000) left calc(var(--op-wave) - 1px) / 100% calc(100% - var(--op-wave) + 1px) no-repeat;
}
/* the grid section needs room underneath for the beige wave to overlap */
html body.contact-page .contact-privacy-section { padding-bottom: calc(clamp(48px, 5vw, 74px) + 40px) !important; }

/* contact form: illustration perched on the wavy top edge of the blue band (like the kids on the top page's green wave) */
.contact-form-wave-decor {
    position: absolute;
    z-index: 3;
    top: calc(40px + 20px); /* section padding-top + middle of the 28px wave */
    left: 82%;
    width: clamp(104px, 11vw, 160px);
    height: auto;
    transform: translate(-50%, -88%);
    pointer-events: none;
}
@media (max-width: 767px) {
    .contact-form-wave-decor { left: 78%; width: 88px; transform: translate(-50%, -66%); } /* less overlap with the green panel above */
}

/* contact form submit: keep it a blue (grain) button with a white chevron circle on the white form card,
   undoing the white-button treatment meant for the blue CTA card */
html body.contact-page .contact-form-section .btn.club-cta-button.contact-submit {
    border-color: #0098dc !important;
    background: #0098dc url("../images/bg-noise.png?v=2") 0 0 / 160px 160px repeat !important;
    color: #fff !important;
}
html body.contact-page .contact-form-section .btn.club-cta-button.contact-submit:hover,
html body.contact-page .contact-form-section .btn.club-cta-button.contact-submit:focus-visible,
html body.contact-page .contact-form-section .btn.club-cta-button.contact-submit:active {
    border-color: #0083bf !important;
    background-color: #0083bf !important;
    color: #fff !important;
}
html body.contact-page .contact-form-section .btn.club-cta-button.contact-submit > span > span:not(.btn-double-text) {
    background: #fff;
    color: #0098dc;
}
html body.contact-page .contact-form-section .btn.club-cta-button.contact-submit:hover > span > span:not(.btn-double-text) { color: #0083bf; }
/* the button keeps its 240px minimum, so the short label sat hard against the icon with a wide empty right side:
   centre the label in the space beside the icon instead */
html body.contact-page .contact-form-section .btn.club-cta-button.contact-submit > span { padding-right: 63px; } /* = left padding 7 + icon 36 + gap 20, so the centred label sits on the button centre line */
html body.contact-page .contact-form-section .btn.club-cta-button.contact-submit > span .btn-double-text { flex: 1 1 auto; text-align: center; }