@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400..600&display=swap');
:root {
    --lpPink: #DB2872;
    --lpGreen: #418300;
}
.link.btn.-other {
    &::before {
        font-family: "icomoon" !important;
    }
    &.-red:not(.-line)::before {
        color: #ffffff;
    }
}
.mainVisual .mvInr {
    background: transparent url(../../img/2026spring/bg_main_sp.jpg) center top/cover no-repeat;
    height: calc(900 / 750 * 100vw);
    max-height: 900px;
    display: grid;
    align-items: center;
    justify-content: center;
}
.lpTitle,
.typeSerif p,
.typeSerif li {
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1.6rem;
}
.overView {
    position: relative;
    background: transparent url(../../img/2026spring/bg_overview_sp.png) center top/cover repeat-y;
    .typeSerif p {
        line-height: 1.9;
        margin-top: 24px;
        + p {
            margin-top: 16px;
        }
    }
}
.courseWrap {
    margin-top: calc(240 / 750 * 100vw);
    position: relative;
    &::before,
    &::after {
        content: '';
        display: inline-block;
        position: absolute;
    }
    &::before {
        background: transparent url(../../img/2026spring/bg_motif_overview_sp.png) center top no-repeat;
        background-size: cover;
        width: 100%;
        height: calc(251 / 750 * 100vw);
        top: calc(-224 / 750 * 100vw);
    }
    .courseInner {
        text-align: center;
        padding-inline: calc(87 / 750 * 100vw);
    }
}
.overView {
    padding-block: calc(128 / 750 * 100vw);
    .innerWrap {
        position: relative;
    }
}
.lpTitle {
    text-align: center;
    line-height: 1;
    display: grid;
    align-items: center;
    &:has([class*="titleColor"]) {
        display: flex;
        justify-content: center;
    }
    &.lpTitleH2 {
        font-size: 3.2rem;
        font-weight: 600;
    }
    &.lpTitleH3,
    &.lpTitleH4 {
        font-size: 2.8rem;
        &.lpTitle2line {
            line-height: 1.4;
        }
    }
}
.iconTitle {
    width: 100%;
    max-width: 84px;
    height: 43px;
    mask-image: url(../../img/2026spring/bg_title_num.svg);
    mask-position: center top;
    background-repeat: no-repeat;
    color: #fff;
    display: inline-flex;
    justify-content: center;
    font-size: 2.2rem;
    margin-inline: auto;
    padding-top: 8px;
    line-height: 1;
    &.iconTitlePink {
        background-color: var(--lpPink);
    }
    &.iconTitleGreen {
        background-color: var(--lpGreen);
    }
}
.lpTitleH4 {
    gap: 20px;
}
.titleColorPink {
    color: var(--lpPink);
}
.titleColorGreen {
    color: var(--lpGreen);
}
.tabList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(11 / 750 * 100vw);
    margin-inline: -20px;
    .tabChild {
        background-color: #F0ECDF;
        box-shadow: inset 0px -2px 6px 0px rgba(0, 0, 0, 0.08);
        color: #000000;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: calc(117 / 750 * 100vw);
        max-height: 117px;
        font-size: 1.6rem;
        font-weight: 500;
        &.is-active {
            background-color: #fff;
            border-top: calc(8 /  750 * 100vw) solid #cc0000;
            box-shadow: none;
            transition: none;
        }
    }
}
.tabPanel {
    display: none;
    padding-block: calc(128 / 750 * 100vw) calc(120 / 750 * 100vw);
    &.is-active {
        display: block;
    }
}
.lpColumn,
.lpGrid {
    display: grid;
    align-items: center;
    justify-content: flex-start;
}
.lpColumn {
    &.lpColumn2col {
        margin-top: 48px;
        + .lpColumn2col {
            margin-top: 24px;
        }
    }
    .lpCol {
        position: relative;
    }
    @media (max-width: 768px) {
        &:has(.courcetime) {
            .courcetime {
                order: 1;
            }
            .lpCol {
                order: 2;
                margin-top: 8px;
                &:not(.lpColImg) {
                    order: 3;
                    margin-top: 24px;
                }
            }
        }
    }
}
.iconStore {
    position: absolute;
    top: 8px;
    right: 8px;
    width: calc(176 / 750 * 100vw);
    max-width: 176px;
    height: calc(176 / 750 * 100vw);
    max-height: 176px;
}
.courseDetail {
    .lpTitleH3 {
        line-height: 1.8;
        letter-spacing: -0.01em;
        font-weight: 500;
         + .typeSerif {
            margin-top: 16px;
            p {
                line-height: 1.9;
            }
        }
    }
    .lpTitleH4 {
        letter-spacing: -0.01em;
        margin-inline: -0.5em;
        font-weight: 600;
    }
}
.courcetime {
    width: calc(256 / 750 * 100vw);   
    margin-inline: auto;
    &.time-ayabe01 {
        width: calc(436 / 750 * 100vw);
    }
}
.lpGrid {
    &.lpGridGapMin {
        gap: 16px;
    }
    &.lpGridGapMid {
        gap: 24px;
    }
}
.courseMoreLink {
    width: 100%;
    margin: 60px auto 0;
    display: grid;
    position: relative;
    &::before,
    &::after {
        content: '';
        display: block;
        width: 100%;
        height: 40px;
        background: transparent none no-repeat center top/contain;
    }
    &::before {
        background-image: url(../../img/2026spring/bg_course_link_head.png);
        background-position: center bottom;
    }
    &::after {
        background-image: url(../../img/2026spring/bg_course_link_bottom.png);
        background-position: center top;
    }
    .courseMoreInner {
        display: grid;
        justify-content: center;
        align-items: center;
        gap: 12px;
        background: transparent url(../../img/2026spring/bg_course_link_body.png) repeat-y center top/100% auto;
    }
    .courseMoreTitle {
        position: relative;
        padding-inline: 5px;
        font-size: 2.2rem;
        line-height: 1;
        font-weight: 500;
        width: fit-content;
        margin-inline: auto;
        text-align: center;
        &::before,
        &::after {
            content: '';
            display: inline-block;
            width: 3px;
            height: 42px;
            background-color: #CC0000;
            position: absolute;
            top: 0;
            bottom: 0;
            margin-block: auto;
        }
        &::before {
            left: -10px;
            right: auto;
            transform: rotate(-34deg);
        }
        &::after {
            left: auto;
            right: -6px;
            transform: rotate(34deg);
        }
    }
}
@media screen and (min-width: 1024px) {
    .mainVisual .mvInr {
        background-image: url(../../img/2026spring/bg_main_pc.jpg);
        height: 400px;
        max-height: 400px;
    }
    .courseWrap {
        margin-top: 376px;
        &::before {
            background-image: url(../../img/2026spring/bg_motif_overview_pc.png);
            height: 582px;
            top: -422px;
        }
        .courseInner {
            padding-inline: 0;
        }
    }
    .overView {
        background-image: url(../../img/2026spring/bg_overview_pc.png);
        padding-block: 120px;
        .innerWrap {
            width: 864px;
            text-align: center;
            &::before,
            &::after {
                content: '';
                display: block;
                position: absolute;
                background: transparent none top top no-repeat;
                background-size: contain;
            }
            &::before {
                background-image: url(../../img/2026spring/bg_decoration_01.png);
                width: 260px;
                height: 260px;
                top: 243px;
                left: -215px;
            }
            &::after {
                background-image: url(../../img/2026spring/bg_decoration_02.png);
                width: 220px;
                height: 220px;
                top: 141px;
                right: -243px;
            }
            .typeSerif {
                position: relative;
                &::before {
                    content: '';
                    display: block;
                    position: absolute;
                    background: transparent url(../../img/2026spring/bg_decoration_01.png) top center no-repeat;
                    background-size: contain;
                    width: 140px;
                    height: 140px;
                    top: 302px;
                    right: -83px;
                }
            }
        }
    }
    .lpTitle {
        &.lpTitleH2 {
            bottom: 0;
            font-size: 4rem;
        }
        &.lpTitleH3,
        &.lpTitleH4 {
            font-size: 3.4rem;
        }
    }
    .overView .typeSerif p {
        line-height: 2.2;
        margin-top: 32px;
        + p {
            margin-top: 24px;
        }
    }
    .tabList {
    gap: 11px;
    margin-inline: 0;
    .tabChild {
        height: 64px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        font-size: 1.6rem;
        &.is-active {
            border-width: 4px;
        }
    }
    }
    .courseDetail {
        margin-top: -64px;
        position: relative;
        z-index: 3;
        .lpTitleH3 {
            line-height: 1;
            letter-spacing: normal;
            + .typeSerif {
                margin-top: 24px;
                text-align: center;
            }
        }
        .lpTitleH4 {
            letter-spacing: normal;
            margin-inline: 0;
        }
        .courcetime {
            display: block;
            position: absolute;
            width: auto;
            &.time01 {
                top: -40px;
                left: 488px;
            }
            &.time02 {
                top: -80px;
                left: 360px;
            }
            &.time03 {
                top: -80px;
                left: 488px;
            }
            &.time04 {
                top: -80px;
                left: 340px;
            }
            &.time05 {
                top: -80px;
                left: 488px;
            }
            &.time-ayabe01 {
                width: auto;
                top: -60px;
            }
        }
    }
    .tabPanel {
        padding-block: 120px 160px;
    }
    .lpColumn {
        position: relative;
        &.lpColumn2col {
            grid-template-columns: repeat(2, 1fr);
            gap: 64px;
            margin-top: 120px;
            + .lpColumn2col {
                margin-top: 80px;
            }
        }
        &.leftImg {
            .lpCol.lpColImg {
                order: 1;
            }
            .lpCol:not(.lpColImg) {
                order: 2;
            }
        }
    }
    .iconStore {
        width: 104px;
        height: 104px;
        top: -16px;
        right: -16px;
        &.iconLeft {
            right: auto;
            left: -16px;
        }
    }
    .lpGrid {
        &.lpGridGapMin {
            gap: 20px;
        }
        &.lpGridGapMid {
            gap: 40px;
        }
    }
    .courseMoreLink {
        width: 546px;
        margin-top: 120px;
    }
}