/* ==========カスタマイズ============ */
.menu-trigger summary {
    border-radius: var(--radius-inner);
    border: var(--border-base);
    border-width: 6px;
    padding: 0;
    gap: 6px;
}
.menu-trigger summary:hover { background-color: var(--main-color); }
.menu-trigger summary > ::before, 
.menu-trigger summary > ::after, 
.menu-trigger summary > :where(span, div) > span {
    width: var(--line-w, 50px);
    --trigger-bar: 6px;
    max-height: none;
    background-color: var(--color-black);
    border-radius: var(--radius-inner);
    flex: none;
    right: 0;
    margin: auto;
}
.menu-trigger summary > :where(span, div) > span { top:calc(50% - (6px / 2)); }
.menu-trigger summary > :where(span, div) { max-height: 32px; }
.menu-trigger[open]:not(.close) summary ::before,
.menu-trigger[open]:not(.close) summary ::after {
    background-color: var(--color-black);
}
.menu-trigger[open]:not(.close) summary ::before { transform: translateY(-50%) rotate(150deg); }
.menu-trigger[open]:not(.close) summary ::after { transform: translateY(50%) rotate(210deg); }

.main-menu { 
    background-color: rgb(244, 244, 245); 
    padding-top: var(--pad-4);
    left: 0;
    overflow-x: hidden;
    width:100vw;
}
.main-menu .flex { display: flex !important; }
.main-menu ul { text-align: left !important; }
.main-menu ul a:not(.button) { padding: calc(var(--pad-1) / 3) 0; }

.main-nav {
    li:has(.current)::before {
        content: '';
        display: block;
        width: 300vw;
        height: 20px;
        background: url(../_img/header/nav-bubble.svg) bottom center / auto 20px no-repeat;
        position: absolute;
        bottom:-30px;
        left: 50%;
        translate: -50% 0;
        z-index:2;
    }

    a.current {
        color:var(--main-color);
    }
}


/* ===== linkルール ===== */
nav .link-list {
    padding-bottom: var(--pad-4);
}
nav .link-list ul.sub-link li::before {
    content: '';
    width: 11px;
    height: 2px;
    background: url(../_img/common/nav-border.svg) no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: -1em;
    transform: translateY(-50%);
}
nav .link-list li {
    padding-block: calc(var(--space-1) / 2);
    margin:0;
}
nav .link-list .direction-column::before {
    content: '';
    display: block;
    width: 0;
    height: 100%;
    border-left: var(--border-base);
    border-width: 1px;
}
nav .link-list .policy-links { font-size: 0.875em; }
nav .sub-link { 
    margin-left: 1em;
    font-size: 0.875em;

    &.columns-2 {
        columns: 2;
    }
}

.bg-block::before,
.bg-block::after {
    content:'';
    display: block;
    width: 50vw;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
}
.bg-block::before { 
    background-color: var(--main-color);
    left: 0;
    margin-left: calc(50% - 50vw);
    z-index: 0;
}

.bg-block::after { 
    background-color: var(--color-yellow);
    right: 0;
    margin-right: calc(50% - 50vw);
    z-index: 0;
}

.bg-block:has(.contact-list) { background-color: var(--color-pink); }
.bg-block:has(.contact-list)::before,
.bg-block:has(.contact-list)::after { display: none; }

/* ===== cta-list ===== */
.cta-list {
    padding-right: var(--pad-5);
    padding-block: var(--pad-3);
    z-index: 1;
}
.cta-list > ul li > .button.button-circle {
    --size: clamp(96px, 10vw, 120px);
    min-width: auto;
    font-size: clamp(15.2px, 1.3vw, 18px);
    border-width: 5px;
    background-color: var(--color-white);
    padding-block: 0;
    gap: 0;
}
.cta-list .icon {
    --icon-h: 100%;
    min-height: clamp(39px, 5vw, 49px);
}
.cta-list .icon.info {
    --icon-w: clamp(38px, 5vw ,47px);
    aspect-ratio: 47 / 49;
    left: -5px;
    --icon-img: url(../_img/common/icon/icon-info-session.svg);
}
.cta-list .icon.school-tour {
    --icon-w: clamp(24px, 5vw, 30px);
    aspect-ratio: 30 / 38;
    --icon-img: url(../_img/common/icon/icon-school-tour.svg);
}
.cta-list .icon.request-info {
    --icon-w: 35px;
    aspect-ratio: 44 / 36;
    --icon-img: url(../_img/common/icon/icon-request-info.svg);
}

.cta-list > ul li > a > span:not(.icon) {
    display: inline-flex;
    justify-content: center;
    width: 130%;
    font-size: clamp(0.6em, 1vw, 0.77em);
    color: var(--color-white);
    background-color: var(--color-black);
    border-radius: var(--radius-inner);
    text-align: center;
    line-height: 1.2;
    padding: 2px 5px;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
}
/* ===== recruit-list ===== */
.recruit-list {
    padding-left: var(--pad-4);
    padding-block: var(--pad-4);
    --simple-h: 68px;
    z-index: 1;
}
.recruit-list ul { margin-top: calc(var(--space-1) / 2); }
.recruit-list .button.button-simple { 
    --simple-bg-color: var(--color-white);
    --simple-h: 60px;
    display: flex;
    justify-content: center;
}

/* ===== contact-list ===== */
.contact-list {
    background-color: var(--color-pink);
    --simple-bg-color: var(--color-white);
    padding-block: var(--pad-3);
}
.contact-list .contact-list--tel .button.button-simple { 
    --simple-h: 60px;
}
.contact-list .contact-free-call a { margin-top: calc(var(--space-1) / 2); }
.contact-list .contact-free-call { padding: 0; }
.contact-list .contact-free-call .tel { margin-bottom: 0; }
.contact-list .contact-free-call .hours { 
    font-weight: normal;
    font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",system-ui,sans-serif;
    line-height: 1.3;
    font-size: .8em;
}
.menu-trigger .contact-list--form {
    padding-left: var(--pad-5);
}
.menu-trigger .contact-list--form a { margin-top: calc(var(--space-1) / 2); }
.menu-trigger .contact-list--form .button.button-simple {
    --simple-w: 100%;
    --simple-h: 60px;
}

/* ===== ハンバーガーメニューのfooter ===== */
.menu-footer { padding-block: var(--pad-5) var(--pad-7); }
.menu-footer-right { padding-left: var(--pad-3); }
.menu-footer-right .label {
    border-radius: var(--radius-inner);
    background-color: var(--color-lightgray);
    padding-inline: var(--pad-2);
}
.menu-footer .sns-link { margin-top: var(--space-2); }
.menu-footer .group > p:last-child { 
    margin-top: var(--space-2);
    text-align: center;
}

@media (min-width : 520.1px) and (max-width : 1200px) {
	.header-nav-wrap.pc:not(.tb) { display: none !important; }
}
@media (max-width: 1339px) {
    .main-nav .nav-about.open .sub-nav  {
        top: calc(var(--header-offset) + 20px);
    }
}
@media (max-width: 1200px) {
    .menu-trigger summary {
        --trigger-size: 55px;
        border-width: 3px;
    }
    .menu-trigger summary > ::before, 
    .menu-trigger summary > ::after, 
    .menu-trigger summary > :where(span, div) > span {
        width: 27.5px;
        --trigger-bar: 3px;
    }
    .menu-trigger summary > :where(span, div) { max-height: 20px; }
    .menu-trigger summary > :where(span, div) > span { top:calc(50% - (3px / 2)); }

    .main-menu {
        padding-top: var(--pad-6);
    }
}
@media (max-width: 1040px) {
    .menu-trigger .contact-form  .button.button-simple { --simple-w: clamp(300px, calc(2vw + 216px), 484px); }
}
@media screen and (max-width: 920px) {
    .menu-trigger .main-menu a { line-height: 1.6;}
    .menu-trigger .main-menu { padding-top: var(--section-space); }

    .flex > .g2-tb { flex: 2; }
    /* ===== nav-location 920 ===== */
    .menu-trigger .nav-location .sub-link { margin-top: 0; }
    .menu-trigger .nav-location .flex { gap: 0; }

    nav .link-list .direction-column::before { display: none; }

    /* ===== cta-list 920 ===== */
    .menu-trigger .cta-list > ul {
        row-gap: 0;
        justify-content: center;
    }
    .menu-trigger .cta-list > ul a { --size: 100px; }

    /* ===== .recruit-list 920 ===== */
    .menu-trigger .recruit-list { 
        padding-left: 0;
    }
    .menu-trigger .recruit-list ul { 
        justify-content: center;
    }

    /* ===== contact-list 920 ===== */
    .menu-trigger .contact-list li { justify-content: center; }
    .menu-trigger .contact-list p { text-align: center; }
    .contact-list .contact-free-call { 
        padding-right: unset; 
        padding-block: var(--pad-4) 0;
        justify-content: center;
    }
    .contact-list .contact-list--tel .button.button-simple {
        --simple-w: 100%;
        --simple-h: auto;
    }
    .contact-list .contact-list--tel .button.button-simple > .contact-free-call {
        flex-direction: column;
        gap: 0;
        padding-top: 0;
    }

    /* ===== menu-footer 920 ===== */
    .menu-footer-logo {
        width: 297px;
        height: 91px;
    }
}

@media (max-width: 720px) {
    /* ===== 中身 720 ===== */
    .menu-trigger .main-menu ul.link-list {
        display: grid !important;
        --gap: 0;
    }
    .menu-trigger .main-menu ul .nav-home { grid-column: span 2; }
    .menu-trigger .main-menu ul .nav-location { grid-row: span 2; }
    .menu-trigger nav .sub-link { padding-top: 0; }

    nav .link-list .direction-column::before { display: none; }
    .bg-block { padding-inline: 0; }
    .bg-block::before, .bg-block::after { display: none; }

    /* ===== cta-list 720 ===== */
    .menu-trigger .cta-list { 
        justify-content: center;
        padding-right: 0; 
        background-color: var(--main-color);
    }
    .menu-trigger .cta-list > ul { 
        gap: var(--gap-1);
        padding-top: 0;
    }
    .cta-list > ul li > a > span:not(.icon) { 
        width: 100%;
        bottom: -15px;
    }
    .menu-trigger .cta-list > ul li > a { --size: 96px; }

    /* ===== .recruit-list 720 ===== */
    .menu-trigger .recruit-list { 
        padding-left: unset;
        background-color: var(--color-yellow);
        padding-left: var(--padding);
        padding-right: var(--padding);
    }
    .menu-trigger .recruit-list ul { 
        --gap: var(--gap-1);
        justify-content: center;
    }
    .menu-trigger .recruit-list .button { 
        font-size: clamp(12.8px, 1vw, 16px) !important;
        letter-spacing: 0;
        --simple-h: 48px;
        min-width: unset;
        margin-top: var(--space-2);
    }

    /* ===== contact-form 720 ===== */
    .menu-trigger .contact-form { 
        padding-top: 0;
        padding-left: 0;
        justify-content: center;
    }
    .menu-trigger .menu-footer-right {
        padding-left: 0;
        justify-content: center;
    }
    .menu-trigger .contact-list--form {
        padding-top: var(--pad-3);
        padding-left: 0;
    }

    nav .sub-link { 
        &.columns-2 {
            columns: 1;
        }
    }
}

@media (max-width: 520px) {
    .menu-trigger .recruit-list { text-align: center; }
    .menu-trigger .recruit-list ul .button.button-simple { padding-inline: 0; }
    .menu-trigger .recruit-list ul .icon.recruit {
        --icon-w: 24px;
        --icon-h: 32px;
    }
    .menu-trigger .recruit-list ul .icon.recruit-contact {
        --icon-w: 15px;
        --icon-h: 28px;
    }
}

@media (max-width: 390px) {
    .menu-trigger .contact-list .contact-free-call .tel { font-size: 2em; }
}

/* ========================================
// 各ページ サブnavigation
=========================================== */
.sub-nav-wrap {
    padding:0 0 0;

    &::after {
        content:'';
        width:100%;
        height:20px;
        position:absolute;
        left:0;
        top:-20px;
        background:var(--sub-nav-bg);
    }
}
.sub-nav {
    width: 100vw;
    min-height: var(--sub-nav-h);
    background-color: var(--sub-nav-bg);
    border-bottom: var(--border-base);
    border-width: 2px;
}


.sub-nav li a:hover { color: var(--color-white); }

@media (max-width: 1200px) {
   .sub-nav-wrap { display: none; }
}