@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400..600&display=swap');
.container {
    padding-bottom: 0;
}
:root {
    --lpBlue: #0088B4;
    --lpGreen: #00928D;
	--lpDeepGreen: #006888;
    --lpCourseNum: #186362;
}
.link.btn.-other {
    &::before {
        font-family: "icomoon" !important;
    }
    &.-red:not(.-line)::before {
        color: #ffffff;
    }
}
.mainVisual .mvInr {
    background: transparent url(../../img/2026summer/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;
    .mvTitle {
        width: calc(695 / 750 * 100vw);
        max-width: 695px;
    }
}
.typeSerif {
	width: fit-content;
	margin-inline: auto;
}
.lpTitle,
.typeSerif p,
.typeSerif li,
.typeSerif figcaption,
.typeSerif dt, 
.typeSerif dd{
    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/2026summer/bg_overview_sp.jpg) center top/contain no-repeat;
    .typeSerif p {
        line-height: 1.9;
        margin-top: 24px;
        + p {
            margin-top: 16px;
        }
    }
}
.courseWrap {
    margin-top:calc(252 / 750 * 100vw);
    .courseInner {
        text-align: center;
    }
}
.overView {
    padding-block: calc(128 / 750 * 100vw) 0;
    .innerWrap {
        position: relative;
		@media (max-width: 896px) {
			&::after {
				content: '';
				display: block;
				width: 100%;
				max-width: 708px;
				height: calc(624 / 750 * 100vw);
				max-height: 648px;
				background: transparent url("../../img/2026summer/bg_overview_elm_sp.png") center top no-repeat;
				background-size: contain;
				margin-top: calc(57 / 750 * 100vw);
				margin-inline: auto;
			}
		}
    }
}
.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%;
    width: calc(137 / 750 * 100vw);
    max-width: calc(137px / 2);
    height: calc(96 / 750 * 100vw);
    max-height: calc(96px / 2);
    background: transparent url(../../img/2026summer/bg_title_num.png) center top no-repeat;
    background-size: contain;
    color: var(--lpCourseNum);
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 2.2rem;
    margin-inline: auto;
    padding-right: 11px;
    line-height: 1;
    @media screen and (min-width: 1024px) {
        width: 68px;
        height: 48px;
    }
}
.lpTitleH4 {
    gap: 20px;
}
.titleColorBlue {
    color: var(--lpBlue);
}
.titleColorGreen {
    color: var(--lpGreen);
}
.titleColorDeepGreen {
    color: var(--lpDeepGreen);
}
.tabList {
	max-width: 679px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(11 / 750 * 100vw);
    margin-inline: auto;
    .tabChild {
        background-color: #91DEDC;
        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) 0;
    &.is-active {
        display: block;
    }
    @media (max-width: 896px) {
        .courcetime {
            &.time01 {
                width: calc(512 / 750 * 100vw);   
                max-width: 512px;
            }
            &.time02 {
                width: calc(280 / 750 * 100vw);   
                max-width: 280px;
            }
            &.time03 {
                width: calc(280 / 750 * 100vw);   
                max-width: 280px;
            }
            &.time04 {
                width: calc(280 / 750 * 100vw);   
                max-width: 280px;
            }
            &.time05 {
                width: calc(280 / 750 * 100vw);   
                max-width: 280px;
            }
            &.time06 {
                width: calc(280 / 750 * 100vw);   
                max-width: 280px;
            }
            &.time07 {
                width: calc(448 / 750 * 100vw);
                max-width: 448px;
                order: 3 !important;
				margin-top: calc(32 / 750 * 100vw);
            }
        }
        &.tabYoron {
            .courcetime {
                &.time01 {
                    width: calc(538 / 750 * 100vw);
                    max-width: 538px;
                }
                &.time02 {
                width: calc(280 / 750 * 100vw);   
                max-width: 280px;
                }
                &.time03 {
                    width: calc(280 / 750 * 100vw);   
                    max-width: 280px;
                }
                &.time04 {
                    width: calc(460 / 750 * 100vw);   
                    max-width: 460px;
                }
                &.time05 {
                    width: calc(280 / 750 * 100vw);   
                    max-width: 560px;
                }
                &.time06 {
                    width: calc(634 / 750 * 100vw);
					margin-top: calc(32 / 750 * 100vw);
                    max-width: 634px;
                    order: 3 !important;
                }
            }
        }
    }
}
.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: 896px) {
        &:has(.courcetime) {
            .courcetime {
                order: 1;
            }
            .lpCol {
                order: 2;
                margin-top: 8px;
                &:not(.lpColImg) {
                    order: 3;
                    margin-top: 24px;
                }
				&.lpColImg {
					text-align: center;
				}
            }
        }
    }
}
.iconStore {
    position: absolute;
    top: calc(-50 / 750 * 100vw);
    right: calc(-20 / 750 * 100vw);
    width: calc(208 / 750 * 100vw);
    max-width: 208px;
    height: calc(220 / 750 * 100vw);
    max-height: 220px;
}
.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 {
    margin-inline: auto;
}
.lpGrid {
    &.lpGridGapMin {
        gap: 16px;
    }
    &.lpGridGapMid {
        gap: 24px;
    }
}
.courseMoreLink {
    width: 100%;
    margin: calc(96 / 750 * 100vw) auto 0;
    padding: calc(96 / 750 * 100vw) calc(40 / 750 * 100vw);
    display: grid;
    justify-content: center;
    position: relative;
    background: transparent url(../../img/2026summer/bg_bottom_sp.jpg) center bottom no-repeat;
    @media (min-width: 1024px) {
        margin: 120px auto 0;
        padding: 96px 24px;
        background-image: url(../../img/2026summer/bg_bottom_pc.jpg);
    }
    .courseMoreInner {
        display: grid;
        justify-content: center;
        align-items: center;
        gap: 12px;
        background: transparent url(../../img/2026summer/bg_course_link_body.png) repeat-y center top/100% auto;
        @media (min-width: 1024px) {
            gap: 64px;
        }
    }
    .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/2026summer/bg_main_pc.jpg);
        height: 400px;
        max-height: 400px;
        .mvTitle {
            width: auto;
            max-width: 501px;
        }
    }
    .courseWrap {
        margin-top: 96px;
        .courseInner {
            padding-inline: 0;
        }
    }
    .overView {
        background-image: url(../../img/2026summer/bg_overview_pc.jpg);
        background-size: cover;
        padding-block: 120px 160px;
        .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/2026summer/bg_decoration_01.png);
                width: 260px;
                height: 260px;
                top: 243px;
                left: -215px;
            }
            &::after {
                background-image: url(../../img/2026summer/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/2026summer/bg_decoration_01.png) top center no-repeat;
                    background-size: contain;
                    width: 140px;
                    height: 140px;
                    top: 302px;
                    right: -83px;
                }
            }
        }
        .courseInner {
            display: grid;
            gap: calc(96 / 750 * 100vw);
            @media (min-width: 769px) {
                gap: 74px;
            }
        }
    }
    .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;
        .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: -61px;
                left: 465px;
            }
            &.time02 {
                top: -138px;
                left: 293px;
            }
            &.time03 {
                top: -95px;
                left: 488px;
            }
            &.time04 {
                top: -108px;
                left: 295px;
            }
            &.time05 {
                top: -119px;
                left: 488px;
            }
            &.time06 {
                top: -149px;
                left: 295px;
            }
            &.time07 {
                bottom: -146px;
                left: 397px;
            }
        }
    }
    .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;
            }
        }
    }
    .tabPanel {
        padding-block: 120px 0;
        &.tabYoron {
            .lpColumn {
                &.lpColumn2col {
                    margin-top: 210px;
                    + .lpColumn2col {
                        margin-top: 80px;
                    }
                }
            }
            .courcetime {
                &.time01 {
                    top: -151px;
                    left: 458px;
                }
                &.time02 {
                    top: -107px;
                    left: 293px;
                }
                &.time03 {
                    top: -146px;
                    left: 488px;
                }
                &.time04 {
                    top: -113px;
                    left: 249px;
                }
                &.time05 {
                    top: -138px;
                    left: 488px;
                }
                &.time06 {
                    top: auto;
                    bottom: -157px;
                    left: 173px;
                }
            }
        }
    }
    .iconStore {
        width: 130px;
        height: 138px;
        top: -50px;
        right: -50px;
        &.iconLeft {
            right: auto;
            left: -50px;
        }
    }
    .lpGrid {
        &.lpGridGapMin {
            gap: 20px;
        }
        &.lpGridGapMid {
            gap: 40px;
        }
    }
}
.ambassadorBox {
    background-color: #fff;
	&.-vertical {
        width: 100%;
		max-width: 620px;
		margin-inline: auto;
		display: grid;
		gap: 32px;
        padding: 0 calc(40 / 750 * 100vw) calc(54 / 750 * 100vw);
        @media (min-width: 1024px) {
            padding: 0;
        }
		.ambassadorImg {
			display: grid;
			gap: 16px;
            justify-content: center;
            width: 100%;
            max-width: 390px;
            margin-top: calc(-195 / 750 * 100vw);
            margin-inline: auto;
            img {
                width: calc(390 / 750 * 100vw);
            }
            @media (min-width: 1024px) {
                width: 260px;
                margin-top: 0;
                img {
                    width: auto;
                }
            }
		}
	}
	.ambassadorProfile {
        font-size: 1.8rem;
		display: grid;
		gap: 8px;
		.ambassadorName {
			display: block;
			font-size: 3.2rem;
		}
	}
	.ambassadorInfo {
		display: grid;
		gap: 16px;
		background-color: #F9F9F9;
		border-radius: 24px;
		padding: calc(64 / 750 * 100vw) calc(48 / 750 * 100vw);
        @media (min-width: 1024px) {
            padding: 32px 40px;
        }
		.ambassadorInfoTtl {
            font-size: 2rem;
            @media (min-width: 769px) {
                font-size: 2.4rem;
            }
		}
		.ambassadorInfoTxt {
            text-align: left;
            @media (min-width: 1024px) {
                text-align: center;
            }
        }
	}
    &.-horizontal {
        display: flex;
        flex-direction: column;
        background-color: #F9F9F9;
        margin-top: 96px;
        padding-top: 64px;
        border-radius: 48px;
        @media (min-width: 1024px) {
            background-color: transparent;
            margin-top: 266px;
            padding-top: 0;
            flex-direction: row;
        }
        .ambassadorImg {
            width: calc(280 / 750 * 100vw);
            max-width: 280px;
            margin-inline: auto;
            @media (min-width: 1024px) {
                width: 260px;
            }
        }
        .ambassadorInfo {
            @media (min-width: 1024px) {
                width: calc(100% - 260px);
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
                max-height: 260px;
            }
        }
        .ambassadorProfile {
            text-align: center;
            @media (min-width: 1024px) {
                text-align: left;
            }
        }
        .ambassadorInfoTxt {
            @media (min-width: 1024px) {
                text-align: left;
            }
        }
    }
}
.recommendInfo {
    overflow: hidden;
    border-radius: 16px;
    .recommendInfoTtl {
        font-size: 1.6rem;
        padding: 6px 24px;
        position: relative;
        background-color: #197C9A;
        color: #fff;
        display: flex;
        gap: 8px;
        align-items: center;
        @media (min-width: 1024px) {
            text-align: center;
        }
        &::before {
            content: '';
            display: inline-block;
            width: 10px;
            height: 12px;
            background: transparent url(../../img/2026summer/icon_arrow_ttl.svg) center top no-repeat;
            background-size: contain;
        }
    }
    .recommendInfoTxt {
        font-size: 1.4rem;
        padding: 16px 24px;
        background-color: #F9F9F9;
    }
}

.courseMoreBox {
    width: 100%;
    max-width: 546px;
    display: grid;
    gap: 32px;
    border: 2px solid #006888;
    border-radius: 24px;
    background-color: #fff;
    padding: calc(54 / 750 * 100vw) calc(32 / 750 * 100vw);
    @media (min-width: 1024px) {
        gap: 12px;
        padding: 40px 64px;
    }
}
.courseMoreOther {
    display: grid;
    gap: 24px;
    p {
        text-align: center;
        display: grid;
        gap: 8px;
        font-size: 1.6rem;
        span {
            font-size: 1.8rem;
        }
    }
    .link.btn.-red {
		min-width: 265px;
		&.-black {
			max-width: 315px;
			margin-inline: auto;
			background-color: #333333;
			border-color: #333333;
		}
    }
}
@media (max-width: 1024px) {
    .areaBox {
        padding: calc(96 / 750 * 100vw) calc(87 / 750 * 100vw);
        background: transparent url(../../img/2026summer/bg_area.jpg) center top no-repeat;
        background-size: cover;
    }
}