/* =========================================
   Reset & Base
========================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

:root {
    --color-text:    #1a1a1a;
    --color-bg:      #ffffff;
    --color-accent:  #0057ff;
    --color-muted:   #666666;
    --color-border:  #e5e5e5;
    --gakushoku-green: #5ab414;

    --font-sans: 'Inter', 'Noto Sans JP', sans-serif;
    --font-serif: 'Inter', 'Noto Sans JP', sans-serif;

    --max-width: 1100px;
    --spacing-section: clamp(4rem, 8vw, 8rem);
}

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background-color: var(--color-bg);
    background-image: url('../images/background.jpg');
    background-repeat: repeat;
    background-size: 33.333%;
    line-height: 1.8;

    font-size: 18px;
}


/* =========================================
   メディアクエリ基準で表示非表示切り替え
========================================= */
@media (max-width: 768px) {
    ._availableOnlyPc{
        display: none;
    }
}
@media (min-width: 769px) {
    ._availableOnlySp{
        display: none;
    }
}


/* =========================================
   Page Loader
========================================= */
html.is-loading,
html.is-loading body {
    overflow: hidden;
    height: 100%;
}
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    background: #fff;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.page-loader__logo {
    width: clamp(200px, 70vw, 480px);
    height: auto;
}
.page-loader__spinner {
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid var(--color-border);
    border-top-color: var(--gakushoku-green);
    border-radius: 50%;
    animation: page-loader-spin 0.8s linear infinite;
}
@keyframes page-loader-spin {
    to { transform: rotate(360deg); }
}

/* =========================================
   Header
========================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
}
/* ハンバーガーメニュー展開中は、ヘッダー背景もオーバーレイと同じ色にフェード */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: #aad246;
    opacity: 0;
    transition: opacity 0.35s ease-out;
    pointer-events: none;
}
.site-header:has(.hamburger[aria-expanded="true"])::before {
    opacity: 1;
}
.site-header__inner {
    max-width: 1710px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(1rem + 3vw);
}
.site-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    text-decoration: none;
    flex-shrink: 0;
}
.site-logo img {
    height: 2.5rem;
    width: auto;
}
/* ハンバーガーオーバーレイナビ（PC・SP共通） */
.site-nav {
    position: fixed;
    inset: 0;
    padding-top: 8rem;
    background: #aad246;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    z-index: 99;
}
/* ハンバーガーメニューの装飾猫（4匹をバランスよく散らす） */
.site-nav__decor {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.site-nav__decor-cat {
    position: absolute;
    opacity: 0.9;
    /* width/heightは指定せず画像本来のサイズでレンダリングし、
       transform: scale() で原寸に対する拡大率だけを一律指定する */
    transform: scale(0.2);
}
.site-nav__decor-cat--1 { top: 11rem;   left: 14%;  transform-origin: top left;     transform: scale(0.2) rotate(-8deg); }
.site-nav__decor-cat--2 { top: 11rem;   right: 14%; transform-origin: top right;    transform: scale(0.2) rotate(10deg); }
.site-nav__decor-cat--3 { bottom: 7%;   left: 15%;  transform-origin: bottom left;  transform: scale(0.17) rotate(6deg); }
.site-nav__decor-cat--4 { bottom: 7%;   right: 15%; transform-origin: bottom right; transform: scale(0.17) rotate(-10deg); }
/* SP：ヘッダー下に猫専用の表示エリアを確保し、横一列に並べる（試験的） */
@media (max-width: 768px) {
    .site-nav { padding-top: 6rem; }
    .site-nav__decor {
        inset: auto;
        top: 8.4rem;
        left: 0;
        right: 0;
        height: 6rem;
        width: 90%;
        margin: auto;
        transform: translate(-2%);
    }
    .site-nav__decor-cat {
        top: 0;
        bottom: auto;
        transform: none;
        /* 横一列は高さを揃えたいので、scaleではなくheight固定＋width:autoにする
           （widthは各画像のアスペクト比に従って自動計算される） */
        height: 72px;
        width: auto;
    }
    .site-nav__decor-cat--1 {left: 87.5%;right: auto;transform: translateX(-50%);}
    .site-nav__decor-cat--2 {left: 37.5%;right: auto;transform: translateX(-50%);}
    .site-nav__decor-cat--3 {left: 64.5%;right: auto;transform: translateX(-50%);}
    .site-nav__decor-cat--4 {left: calc(12.5%);right: auto;transform: translateX(-50%);}
}

.site-nav__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    text-align: left;
}
/* SP：画面の縦幅が低い端末でも項目が詰まりすぎない／余りすぎないよう、
   vhベースで可変にする（後方に置いて無条件ルールより優先させる） */
@media (max-width: 768px) {
    .site-nav__list { gap: 2.4vh; margin-top: 96px;}
}
.site-nav__link {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.6rem;
    transition: opacity 0.2s;
}
.site-nav__link:hover { opacity: 0.6; }
.site-nav__label {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    letter-spacing: 0.05em;
}
.site-nav__en {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: #fff;
}

/* ヘッダーナビグループ（PCナビ＋ハンバーガーを白い箱でまとめて囲む） */
.header-nav-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 4px 1rem;
    background: #fff;
    border-radius: 999px;
}
@media (max-width: 1099px) {
    .header-nav-group {
        padding-left: 0;
        padding-right: 0;
        background: none;
    }
}

/* PC インラインナビ（③ PCのみ） */
.pc-nav { display: none; }
@media (min-width: 769px) {
    .pc-nav {
        display: flex;
        align-items: center;
        height: 44px;
        padding: 0 0.85rem;
    }
    .pc-nav__list {
        display: flex;
        gap: 2.25rem;
        list-style: none;
        align-items: center;
        padding: 0 calc(0.8rem + (1.2vw));
    }
    .pc-nav__link {
        font-weight: 600;
        letter-spacing: 0.04em;
        transition: opacity 0.2s;
    }
    .pc-nav__link:hover { opacity: 0.6; }
}
/* ニュース枠が狭くなりすぎるため、1100px未満ではPCインラインナビを非表示に */
@media (min-width: 769px) and (max-width: 1099px) {
    .pc-nav { display: none; }
}
/* 1100〜1299pxはナビを表示しつつ、ニュース枠を圧迫しないようgapを詰める */
@media (min-width: 1100px) and (max-width: 1299px) {
    .pc-nav {
        padding: 0;
    }
    .pc-nav__list {
        gap: 2.2vw;
        padding: 0px 0.8rem 0 1.8rem;
    }
}

/* =========================================
   ヘッダー ニュースティッカー
========================================= */
.header-news {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #fff;
    padding: 0 1.2rem;
    /*max-width: 32rem;*/
}
.header-news__swiper {
    width: 100%;
    height: 1em;
    line-height: 1.2
}
.header-news__slide {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    padding: 0;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--color-text);
}
.header-news__slide:hover .header-news__title {
    text-decoration: underline;
}
.header-news__date {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--color-muted);
    letter-spacing: 0.05em;
}
.header-news__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================
   ニュースモーダル
========================================= */
.news-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
}
.news-modal[aria-hidden="false"] { pointer-events: auto; }
.news-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.news-modal__panel {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 1rem;
    padding: 2.5rem;
    width: min(640px, 90vw);
    max-height: 80vh;
    overflow-y: auto;
}
.news-modal__close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    background: none;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-muted);
}
.news-modal__close:hover { color: var(--color-text); }
.news-modal__date {
    display: block;
    font-size: 0.875rem;
    color: var(--color-muted);
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}
.news-modal__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}
.news-modal__body { line-height: 1.9; }

/* =========================================
   ハンバーガーボタン
========================================= */
.hamburger {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 56px;
    height: 28px;
    background: var(--gakushoku-green);
    border: none;
    border-radius: 999px;
    cursor: pointer;
}
.hamburger__bar {
    display: block;
    width: 24px;
    height: 1px;
    background: #fff;
    border-radius: 2px;
}

/* ヘッダー（モバイル：ロゴ＋ハンバーガーを1行に収め、ニュースはその下へ） */
@media (max-width: 768px) {
    .site-header__inner {
        flex-wrap: wrap;
        padding: 1.5rem 1rem 0.8rem;
        gap: 1rem;
    }
    .site-logo img {
        width: auto;
        height: 1.55rem;
    }
    .header-news {
        order: 3;
        flex: 1 1 100%;
    }
}
@media (max-width: 374px) {
    .site-logo img {
        height: 1.4rem;
    }
}

/* =========================================
   Hero
========================================= */
.lp{
    overflow: hidden;
}
.lp-hero {
    padding: clamp(2rem, 6vw, 4rem) 1.5rem 0;
    padding-top: 0;
}
.lp-hero__video-wrap {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: min(560px, 90vw);
    aspect-ratio: 1 / 1;
    border-radius: 1.5rem;
    overflow: hidden;
}
@media (max-width: 768px) {
    /* 90vwは.lp-heroの左右padding(1.5rem)を考慮しないため中央からズレる。
       お知らせ(.header-news)と同じ左右1remの余白になるよう、
       親の内容幅(100%)を基準に、はみ出し分(1.5rem→1rem差の0.5rem×2)だけ広げる */
    .lp-hero__video-wrap {
        width: min(560px, calc(100% + 1rem));
        /* margin:autoは幅が親を超える場合の中央寄せがブラウザによって不安定なため、
           marginを0にした上でleft+transformで確実に中央寄せする */
        margin-left: 0;
        margin-right: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}
.lp-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lp-hero__replay {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 60%;
    z-index: 3;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.lp-hero__replay.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.lp-hero__replay-icon {
    display: block;
    width: 100%;
    height: auto;
}
.lp-hero__school-wrap {
    position: relative;
    margin: auto;
    width: clamp(320px, 100vw, 1600px);
    margin-top: 2rem;
}
@media (max-width: 1648px) {
    .lp-hero__school-wrap {
        margin-left: -1.5rem;
    }
}
.lp-hero__school-gates{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    z-index: 2;
}
.lp-hero__school {
    width: 100%;
    height: auto;
    display: block;
    margin: auto;
    max-width: 1000px;
}
/* 校舎前を歩く生徒（校舎より前面・門より背面） */
.lp-hero__students {
    position: absolute;
    inset: 0;
    bottom: -10%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.lp-hero__student {
    position: absolute;
    bottom: 0;
    height: clamp(73px, 13vw, 156px);
    width: auto;
}
.lp-hero__gate {
    position: absolute;
    bottom: 0;
    width: clamp(120px, 32vw, 700px);
    max-width: 400px;
    height: auto;
    z-index: 1;
}
.lp-hero__gate--left  { left: 0; }
.lp-hero__gate--right { right: 0; }
@media (min-width: 1400px) {
    .lp-hero__gate--left {
        left: unset;
        right: calc(50% + 260px);
    }
    .lp-hero__gate--right {
        right: unset;
        left: calc(50% + 260px);
    }
}

/* =========================================
   News
========================================= */
.lp-news {
    background: transparent;
}
.lp-news__inner {
    max-width: var(--max-width);
    margin: 0 auto;
}
.lp-news__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    letter-spacing: 0.08em;
}
.lp-news__list { list-style: none; }
.lp-news__item {
    display: flex;
    gap: 1.5rem;
    align-items: baseline;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
}
.lp-news__date {
    flex-shrink: 0;
    font-size: 0.875rem;
    color: var(--color-muted);
    letter-spacing: 0.05em;
}
.lp-news__link:hover { color: var(--color-accent); }

/* =========================================
   LP Content（Gutenbergブロック）
========================================= */
.lp-content {
    padding: var(--spacing-section) 1.5rem;
}
.lp-content__inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

/* =========================================
   Footer
========================================= */
.site-footer {
    padding: 3rem 1.5rem 2rem;
    background-color: #aad246;
    border-top: 10px solid var(--gakushoku-green);
}
@media (max-width: 768px) {
    .site-footer {
        border-top-width: 6px;
    }
}
.site-footer__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
}
.site-footer__copy {
    font-size: 0.875rem;
    color: #fff;
    font-weight: 700;
    text-align: right;
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
}
.site-footer__row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
    column-gap: 2.5rem;
    row-gap: 1.5rem;
    text-align: left;
    margin-bottom: 3rem;
}

/* フッターナビ（ハンバーガーメニューと同系のスタイル・左右2列）＋SNSアイコン */
.footer-nav-col {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    grid-column: 1;
    grid-row: 1 / 3;
}
.footer-nav {
    display: flex;
    gap: 5rem;
}
.footer-nav__list {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    list-style: none;
}
.footer-nav__link {
    align-items: baseline;
    gap: 0.6rem;
    transition: opacity 0.2s;
}
.footer-nav__link:hover { opacity: 0.6; }
.footer-nav__label {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.footer-nav__en {
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    color: #fff;
    display: block;
    line-height: 1.1;
}

/* ロゴ */
.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    grid-column: 2;
    grid-row: 1;
}
.footer-brand__logo img {
    height: auto;
    width: 26rem;
    filter: grayscale(100%);
}
@media (max-width: 768px) {
    .footer-brand__logo img {
        max-width: 85%;
        margin: auto;
    }
}
.footer-brand__social {
    display: flex;
    gap: 0.75rem;
}
.footer-brand__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--gakushoku-green);
    color: #fff;
    transition: opacity 0.2s;
}
.footer-brand__social-link--youtube {
    background: #fff;
    color: #000;
}
.footer-brand__social-link--instagram {
    background: #fff;
    color: #000;
}
.footer-brand__social-link--podcast {
    background: #fff;
}
.footer-brand__social-link svg,
.footer-brand__social-icon {
    width: 36px;
    height: 36px;
}
.footer-brand__social-link:hover { opacity: 0.7; }

@media (max-width: 768px) {
    .site-footer__row {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        row-gap: 3rem;
    }
    .footer-brand {
        order: 1;
        align-items: center;
    }
    .footer-nav-col {
        order: 2;
        align-items: center;
        width: 100%;
        text-align: left;
    }
    .site-footer__copy {
        order: 3;
        text-align: center;
    }
    .footer-nav {
        width: 100%;
        gap: 0;
    }
    .footer-nav__list {
        width: 50%;
        align-items: flex-start;
        gap: 2rem;
    }
    .footer-nav__link {
        flex-direction: row;
        justify-content: flex-start;
    }
    .footer-nav__label{
        font-size: 1.5rem;
    }
}

/* =========================================
   Responsive
========================================= */
@media (max-width: 768px) {
    .lp-news__item { flex-direction: column; gap: 0.25rem; }
}


/* =========================================
   共通セクション
========================================= */
.section-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-section) 1.5rem;
}
@media (max-width: 768px) {
    .section-inner {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }
}
.section-title {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 2rem;
}

/* =========================================
   404
========================================= */
.error-404 {
    min-height: 50vh;
    display: flex;
    align-items: center;
}
.error-404 .section-inner {
    width: 100%;
    text-align: center;
}
.error-404__code {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 10vw, 5rem);
    font-weight: 700;
    color: var(--gakushoku-green);
    line-height: 1;
    margin-bottom: 1rem;
}
.error-404 .section-title { margin-bottom: 1rem; }
.error-404 .btn-group { justify-content: center; }
.section-title__sub {
    display: inline-block;
    font-size: 0.6em;
    font-family: var(--font-sans);
    font-weight: 400;
    opacity: 0.6;
    margin-left: 0.5em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.section-text { margin-bottom: 2.5rem; }
@media (max-width: 768px) {
    .section-text { font-size: 16px; }
}

/* wysiwyg（ACFリッチエディタ出力） */
.wysiwyg p  { margin-bottom: 2em; line-height: 2.2; }
.wysiwyg a  { color: var(--color-accent); text-decoration: underline; }
.wysiwyg strong { font-weight: 700; }

/* =========================================
   About
========================================= */
.lp-about {
    background: transparent;
    text-align: center;
}
.lp-about .section-title { text-transform: lowercase; }
.lp-about__copy {
    /* 1100px幅の時にちょうど740px（=67.27vw）になるよう調整 */
    width: clamp(160px, 80vw, 740px);
    margin: 7rem auto 5.6rem;
}
@media (max-width: 768px) {
    .lp-about__copy { margin: 0 auto 2rem; }
}
.lp-about__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}
.lp-about__text { order: 1; max-width: 640px; }
.lp-about__text.wysiwyg p {
    line-height: 2.2;
    text-align: left;
    margin-bottom: 2em;
}
@media (min-width: 769px) {
    /* wysiwygエディタで指定した文字サイズをSP基準とし、PCではその1.25倍で表示する */
    .lp-about__text,
    .lp-podcast .section-text,
    .lp-note .section-text,
    .lp-dance .section-text,
    .lp-shop .section-text {
        zoom: 1.25;
    }
}
.lp-about__image { order: 2; }
.lp-about__image img {
    width: 170px;
    margin: 0 auto;
}

/* =========================================
   動画グリッド
========================================= */
.video-wrap {
    position: relative;
    padding-top: 56.25%; /* 16:9 */
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}
.video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.video-grid {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
.video-grid--1 { grid-template-columns: 1fr; max-width: 640px; }
.video-grid--2 { grid-template-columns: repeat(2, 1fr); }
.video-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lp-podcast .video-grid--3 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    gap: 40px;
    margin-bottom: 5em;
    margin-top: 5em;
}
.lp-podcast .video-grid--3 .video-wrap:first-child {
    grid-column: 1 / -1;
}
@media (max-width: 768px) {
    .video-grid--2,
    .video-grid--3 { grid-template-columns: 1fr; }
    .lp-podcast .video-grid--3 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 2.5rem;
        margin-bottom: 2.5rem;
    }
}

/* =========================================
   ボタン
========================================= */
.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .7em 4em;
    border: none;
    border-radius: 2em;
    font-weight: 400;
    letter-spacing: 0.05em;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    background: var(--gakushoku-green);
    color: #fff;
}
.btn:hover {
    background: var(--color-text);
    color: #fff;
}
.btn--primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    padding: calc(.7em - 4px) 4em;
}
.btn--disabled,
.btn--disabled:hover {
    background: var(--color-border);
    color: var(--color-muted);
    cursor: default;
}
.btn--primary:hover {
    background: var(--color-text);
    border-color: var(--color-text);
}
@media (min-width: 769px) {
    .btn { zoom: 1.4; }
}

/* =========================================
   カードセクション共通（Podcast / note / Dance / 購買 / 生徒会 / 生徒の声）
========================================= */
.lp-podcast,
.lp-note,
.lp-dance,
.lp-shop,
.lp-member,
.lp-supporter {
    border: 10px solid var(--gakushoku-green);
    border-radius: 2.5rem;
    margin: 6rem 6rem 0;
    position: relative;
}
.lp-note,
.lp-dance {
    background: #aad246;
}
/* lp-podcastは箱自体を透明・borderなしにし、cap上部の角（ドーム外側）はページ背景を透かす。
   下部の塗り・borderはsection-inner側に持たせ、capの下端からシームレスに引き継ぐ */
.lp-podcast .section-inner {
    background: #aad246;
    border: 10px solid var(--gakushoku-green);
    border-top: none;
    border-radius: 0 0 2.5rem 2.5rem;
    padding-top: 0;
}
.lp-shop,
.lp-member,
.lp-supporter {
    background: #fafafa;
}
.lp-podcast {
    /* borderはsection-inner側に持たせるため、箱自体はborderなしにする */
    border: none;
}
@media (min-width: 769px) {
    /* 箱の幅を1100pxで頭打ちにする（SPは対象外）。
       widthを明示指定しないとmax-width未満の範囲でmargin:autoが0扱いになり
       左右の余白(6rem)が消えてしまうため、明示的に指定している */
    .lp-podcast,
    .lp-note,
    .lp-dance,
    .lp-shop,
    .lp-member,
    .lp-supporter {
        width: calc(100% - 12rem);
        max-width: var(--max-width);
        margin: 6rem auto 0;
    }
}
/* SVGカーブの上端キャップ（拡大縮小しても枠線幅が変わらないようvector-effectを使用） */
.lp-podcast__cap {
    display: block;
    position: relative;
    /* lp-podcast自体はborderなしになった（=100%の基準がborder分広がった）ため、
       その20pxと、見た目調整分の+10px/-5pxを合算した値 */
    width: calc(100% - 10px);
    left: 5px;
    /* サブピクセルの丸めで隙間が見えることがあるための微調整 */
    bottom: -0.5px;
    /* strokeが上下左右にはみ出しても切られないようにする */
    overflow: visible;
}
.lp-podcast__cap path {
    fill: #aad246;
    stroke: var(--gakushoku-green);
    stroke-width: 20px;
    vector-effect: non-scaling-stroke;
}
/* WebKit(Safari)はnon-scaling-strokeの実装バグでstroke-widthが実質2倍に描画される（iOS・macOSどちらも）ため、
   WebKit限定で半分の値を指定して見た目を合わせる（font:-apple-system-bodyとhanging-punctuation:firstはSafari/WebKit系のみ対応のため判定に利用） */
@supports (font: -apple-system-body) and (hanging-punctuation: first) {
    .lp-podcast__cap path {
        stroke-width: 10px;
    }
}
@media (max-width: 768px) {
    .lp-podcast,
    .lp-note,
    .lp-dance,
    .lp-shop,
    .lp-member,
    .lp-supporter {
        border-width: 6px;
        border-radius: 1.6rem;
        margin: 2.4rem 1.6rem 0;
    }
    .lp-podcast .section-inner {
        border-width: 6px;
        border-radius: 0 0 1.6rem 1.6rem;
    }
    .lp-podcast__cap path {
        stroke-width: 12px;
    }
    /* WebKit(Safari)はnon-scaling-strokeの実装バグでstroke-widthが実質2倍に描画される（iOS・macOSどちらも）ため、
       WebKit限定で半分の値を指定して見た目を合わせる */
    @supports (font: -apple-system-body) and (hanging-punctuation: first) {
        .lp-podcast__cap path {
            stroke-width: 6px;
        }
    }
}
.lp-shop .section-logo img,
.lp-member .section-logo img,
.lp-supporter .section-logo img {
    height: 80px;
    width: auto;
}

/* =========================================
   Dance
========================================= */
.lp-dance .btn--primary,
.lp-supporter-contact .btn--primary {
    background: #005a82;
    border: 4px solid #14f000;
    color: #fff;
}
.lp-dance .btn--primary:hover,
.lp-supporter-contact .btn--primary:hover {
    background: #003f5c;
    border-color: #14f000;
}
.dance-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    align-items: center;
    margin-top: 1em;
}
.dance-buttons .btn-group { margin-top: 0; }
@media (max-width: 768px) {
    .dance-buttons .btn-group{
        gap: 1.6rem;
    }
}

.dance-gallery {
    width: 100%;
    margin-top: 4rem;
    margin-bottom: 4rem;
}
.dance-gallery__swiper {
    width: calc(100% + 3rem);
    margin-left: -1.5rem;
    --swiper-wrapper-transition-timing-function: linear;
}
@media (max-width: 768px) {
    .dance-gallery__swiper {
        width: calc(100% + 1.6rem);
        margin-left: -0.8rem;
    }
}
.dance-gallery__slide {
    width: min(87%, 330px);
    aspect-ratio: 2300 / 1533;
    overflow: hidden;
}
.dance-gallery__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================
   Podcast / note / Dance / 購買 共通（中央寄せ・猫イラスト）
========================================= */
.lp-podcast .section-text,
.lp-note .section-text,
.lp-dance .section-text,
.lp-supporter .section-text,
.lp-supporter-contact .section-text {
    text-align: center;
}
.lp-shop .section-text {
    text-align: left;
}
.lp-podcast .btn-group,
.lp-note .btn-group,
.lp-dance .btn-group,
.lp-shop .btn-group,
.lp-supporter-contact .btn-group {
    justify-content: center;
}
.lp-podcast .btn-group {
    flex-direction: column;
    align-items: center;
    gap: 2.8em;
}
@media (max-width: 768px) {
    .lp-podcast .btn-group {
        gap: 1.6em;
    }

}
@media (max-width: 768px) {
    .lp-note,
    .lp-dance,
    .lp-shop {
        padding-bottom: 1.6rem;
    }
}
/* note/danceの猫はタイトル横に絶対配置（タイトル自体は中央固定のまま） */
/* section（親要素）基準で、中央と端のちょうど中間（25%/75%）に配置。
   縦位置(top)は、旧実装（section-logo基準top:57%）と同じ場所になるよう、
   section-inner の padding-top(3rem) + section-logo の内容物（英字ラベル＋gap＋タイトル画像）の
   高さの57%分をpx換算して算出した値
   （SP: タイトル画像2.4em時 約143px / PC: タイトル画像154px時 約307px） */
.lp-note__cat,
.lp-dance__cat {
    position: absolute;
    top: 143px;
    transform: translate(-50%, -50%);
    /* imgのグローバルリセット(max-width:100%)が、section幅を上限にしてしまうため解除する */
    max-width: none;
    width: 25vw;
    height: auto;
}
.lp-note__cat { left: calc((100% + (100px / 2)) / 4 * 3) }
.lp-dance__cat { left: calc((100% - (250px / 2)) / 4) }
@media (min-width: 769px) {
    .lp-note__cat,
    .lp-dance__cat {
        top: 307px;
    }
}
@media (min-width: 1100px) {
    .lp-note__cat,
    .lp-dance__cat {
        width: 290px;
    }
}
.lp-shop__cat {
    position: absolute;
    bottom: -2rem;
    right: -2rem;
    width: 120px;
    height: auto;
}
@media (min-width: 769px) {
    .lp-shop__cat {
        width: 190px;
        right: 1.5rem;
        bottom: 1.5rem;
    }
}
/* PCの狭い幅（769〜1099px）：本文との被りを避けるため、幅が狭まるほど
   猫を小さく、かつ枠の外側へ少しずつはみ出すように調整 */
@media (min-width: 769px) and (max-width: 1099px) {
    .lp-shop__cat {
        width: clamp(150px, 20vw, 190px);
        right: clamp(-5rem, 31.5vw - 322px, 1.5rem);
        bottom: clamp(-5rem, 31.5vw - 322px, 1.5rem);
    }
}
/* 購買の猫のみ個別指定（ID込みで上記の幅指定をすべて上書き） */
#shop .lp-shop__cat {
    width: 240px;
    right: 5.6rem;
    top: 4rem;
}
@media (max-width: 1099px) {
    #shop .lp-shop__cat {
        width: 22vw;
    }
}
@media (max-width: 768px) {
    #shop .lp-shop__cat {
        top: 3rem;
        right: 8%;
    }
}

/* =========================================
   セクション SVG ロゴ
========================================= */
.section-logo {
    /* タイトル画像の実寸幅だけに箱をフィットさせ、margin:autoで中央固定する。
       猫はこの箱に対してposition:absoluteで添えるので、タイトルの中央位置は動かない */
    width: fit-content;
    margin: 0 auto 5rem;
    position: relative;
}
.section-logo img {
    display: inline-block;
    vertical-align: middle;
    height: auto;
}
.section-logo__en {
    display: inline-block;
    vertical-align: middle;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--color-muted);
    margin: 0 0.8rem;
}
#podcast .section-logo{
    margin-bottom: 2em;
    text-align: center;
}
/* note/danceは英字表記をタイトル上に配置（白・小文字・16px） */
#note .section-logo,
#dance .section-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}
@media (max-width: 768px) {
    #note .section-logo,
    #dance .section-logo {
        margin-bottom: 4rem;
    }
}
#note .section-logo__en,
#dance .section-logo__en {
    color: #fff;
    font-size: 25px;
    margin: 0;
}
@media (min-width: 769px) {
    #note .section-logo__en,
    #dance .section-logo__en {
        zoom: 1.6;
    }
}
#shop .section-logo__en,
#member .section-logo__en {
    font-size: 25px;
    font-weight: 400;
    color: var(--gakushoku-green);
    margin: 0 0 0 1.6rem;
}
#shop .section-logo,
#member .section-logo {
    margin-left: 0;
}
@media (max-width: 1099px) {
    #shop .section-logo,
    #member .section-logo {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
        margin-bottom: 2.5rem;
    }
    #shop .section-logo__en,
    #member .section-logo__en {
        margin-left: 0;
    }
}
#shop .section-inner,
#member .section-inner {
    padding-left: 13%;
    padding-right: 13%;
}
#shop .section-inner {
    padding-bottom: 4.5rem;
}
@media (max-width: 768px) {
    #shop .section-inner,
    #member .section-inner {
        padding-left: 8%;
        padding-right: 8%;
    }
    #shop .section-inner{
        padding-bottom: 3rem;
    }
}
@media (min-width: 769px) {
    #shop .section-logo__en,
    #member .section-logo__en {
        zoom: 1.6;
    }
}
#note .lp-note__text-wrap,
#dance .lp-dance__text-wrap {
    margin: 3.8rem 0 0;
}
#note .section-text,
#dance .section-text,
#note .section-text p,
#dance .section-text p {
}
#note .section-inner,
#dance .section-inner {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
@media (max-width: 768px) {
    #note .section-inner,
    #dance .section-inner {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    #podcast .lp-podcast__cap{
        width: calc(100% - 6px);
        left: 2.8px;
    }
    #podcast .section-logo {
        width: unset;
        margin-bottom: 1.6em;
    }
    #podcast .section-logo img {
        width: 90%;
        top: 0;
    }
    #note .section-logo img:not(.lp-note__cat),
    #dance .section-logo img:not(.lp-dance__cat) {
        width: 3em;
    }
    #shop .section-logo img,
    #member .section-logo img {
        width: auto;
        height: 1.8em;
    }
}

/* =========================================
   Podcast タイトル
========================================= */
.section-title--podcast {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.section-title--podcast .section-title__label {
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-family: var(--font-sans);
    font-weight: 400;
    margin-bottom: 0.5rem;
    opacity: 0.75;
}
.section-title--podcast .section-title__main {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
}
.lp-podcast .section-logo img{
    width: 660px;
    position: relative;
    top: -25px;
}

/* =========================================
   縦積みタイトル（図書館 / 体育館）
========================================= */
.section-title--stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.section-title--stacked .section-title__main {
    font-size: clamp(3.5rem, 10vw, 7rem);
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
}
.section-title--stacked .section-title__label {
    font-size: clamp(0.875rem, 2vw, 1.125rem);
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-top: 0.75rem;
    font-style: italic;
}

/* =========================================
   生徒会
========================================= */

/* 会長 */
.member-president {
    max-width: 800px;
    aspect-ratio: 3293 / 1824;
    margin: 4em auto 4em;
    /* 画面幅1300px時に要素幅が800px(max-width)になり、28pxのradiusとなる比率。
       %指定は要素自身の幅/高さに対する割合のため、要素が伸縮しても比例して追従する */
    border-radius: 3.5% / 6.32%;
    overflow: hidden;
    box-shadow: 6px 6px 0 rgba(0,0,0,.2);
    transform: rotate(-2deg);
    position: relative;
}
@media (max-width: 599px) {
    .member-president {
        width: calc(100% + 4rem);
        margin-left: -2rem;
        margin-top: 2em;
        margin-bottom: 2em;
    }
}
.member-president img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 会員 */
.member-list {
    width: calc(100% + 3rem);
    margin-left: -1.5rem;
    overflow: hidden;
    --swiper-wrapper-transition-timing-function: linear;
}
@media (max-width: 768px) {
    .member-list {
        width: calc(100% + 1.6rem);
        margin-left: -0.8rem;
    }
}
.member-item{
    width: auto;
    text-align: center;
    padding: 0.5rem 1rem 1rem;
}
.member-item__photo{
    width: clamp(140px, 20vw, 200px);
    height: clamp(140px, 20vw, 200px);
    border-radius: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 1em;
}
@media (max-width: 768px) {
    .member-item__photo {
        width: clamp(100px, 24vw, 140px);
        height: clamp(100px, 24vw, 140px);
    }
}
.member-item__name {
    font-size: 14px;
}
.member-item__position {
    font-size: 20px;
    font-weight: bold;
}
@media (min-width: 769px) {
    .member-item__name,
    .member-item__position {
        zoom: 1.25;
    }
}
.member-item__photo img{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  min-width: 100%;
}
.member-item__position{
    color: var(--gakushoku-green);
}
/* =========================================
   生徒の声
========================================= */
@media (max-width: 768px) {
    #supporter .section-logo{
        max-width: 85%;
        margin-bottom: 4rem;
    }
}

/* =========================================
   お問い合わせ
========================================= */
.contact-form { max-width: 640px; }

.cf7-row { margin-bottom: 1.75rem; }
.cf7-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.cf7-row .req,
.cf7-row .opt {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.15em 0.6em;
    border-radius: 1em;
    margin-left: 0.6em;
    vertical-align: middle;
}
.cf7-row .req { background: var(--color-accent); color: #fff; }
.cf7-row .opt { background: var(--color-border); color: var(--color-muted); }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 0.75em 1em;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-text);
    background: #fff;
}
.contact-form textarea { min-height: 160px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

.cf7-submit { margin-top: 2.5rem; }
.contact-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75em 3.2em;
    border: none;
    border-radius: 2em;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    background: var(--gakushoku-green);
    color: #fff;
    transition: background 0.2s;
}
.contact-form input[type="submit"]:hover { background: var(--color-text); }
.contact-form .wpcf7-spinner { margin-left: 0.75em; }

.wpcf7-not-valid-tip {
    display: block;
    color: #d63031;
    font-size: 0.85rem;
    margin-top: 0.4rem;
}
.wpcf7-response-output {
    margin-top: 2rem;
    padding: 1em 1.25em;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}
.wpcf7-mail-sent-ok { border-color: var(--gakushoku-green); color: var(--gakushoku-green); }
.wpcf7-validation-errors,
.wpcf7-mail-sent-ng { border-color: #d63031; color: #d63031; }