:where(.page-header, .page-header2, .page-contents) img {
	width: 100%;
	height: auto;
}

.courses.is_baby {
	--grade-color: var(--grade_textcolor-baby);
}

.courses.is_kids {
	--grade-color: var(--grade_textcolor-kids);
}

.courses.is_elementary {
	--grade-color: var(--grade_textcolor-elementary);
}

.courses.is_intermediate {
	--grade-color: var(--grade_textcolor-intermediate);
}

.courses.is_advanced {
	--grade-color: var(--grade_textcolor-advanced);
}

.courses.is_junior {
	--grade-color: var(--grade_textcolor-junior);
}

.courses.is_highschool {
	--grade-color: var(--grade_textcolor-highschool);
}

.courses.is_reading {
	--grade-color: var(--grade_color-reading);
}

.standard-program {
	--lesson-color: #e9380e;
}

.international-program {
	--lesson-color: #0075c1;
}

.grammar-course {
	--lesson-color: #14aaa1;
}

.grimm-course {
	/* --lesson-color: #e6a701; */
	--lesson-color: var(--grade_textcolor-reading);
}

/* circle arrow */
.circle-arrow {
	display: inline-block;
	width: 1.6em;
	height: 1.6em;
	background-color: var(--lesson-color, #fff);
	border-radius: 50%;
	vertical-align: -.35em;
	position: relative;
	z-index: 0;
}

.circle-arrow::after {
	content: '';
	width: 33%;
	height: 33%;
	position: absolute;
	top: 50%;
	left: 50%;
	border-top: solid 1px var(--arrow-border-color, #fff);
	border-right: solid 1px var(--arrow-border-color, #fff);
	transform: translate(-70%, -50%) rotate(45deg);
	transform-origin: center;
	z-index: 1;
}

/* inner */
.inner {
	/* max-width: 1300px; */
	padding: 100px 20px;
}

@media screen and (max-width:767px) {
	.inner {
		padding: min(70px, 20vw) 20px;
	}
}

/* title */
.title-wrp {
	font-size: min(3.8rem, 6.8vw);
	font-weight: bold;
	line-height: 1.6;
}

.title-wrp .title-icon {
	display: block;
	height: 1.3em;
	margin: 0 auto .75em;
}

@media screen and (max-width:767px) {
	.title-wrp .title-icon {
		display: block;
		height: 1.5em;
	}
}

.title-wrp .title-icon img {
	width: auto;
	height: 100%
}

.title-wrp .title {
	font-size: inherit;
}

.title-wrp .title .sml {
	font-size: .6em;
}

.title-wrp .title .lrg {
	display: inline-block;
	margin: -.3em .1em 0;
	font-size: 1.8em;
}

/* page-header */
.page-header {
	width: min(1440px, 100%);
	margin: 3em auto 0;
	min-height: 500px;
}

@media screen and (max-width:767px) {
	.page-header {
		height: auto;
		margin: 0 auto;
	}
}

.page-header .header-group {
	width: 40%;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	background-color: var(--grade-color);
	text-align: center;
	position: relative;
}

@media screen and (max-width:767px) {
	.page-header .header-group {
		width: 100%;
		padding: 30px 0;
	}
}

.page-header .header-group .header-title {
	color: #fff;
	font-size: min(2.8rem, 7.5vw);
	line-height: 1.4;
	font-weight: bold;
	letter-spacing: .05em;
}

.page-header .header-group .header-title .lrg {
	padding: 0 .1em;
	font-size: 2.5em;
	font-family: 'Outfit', sans-serif;
	line-height: 1;
}

.is_junior .page-header .header-group .header-title .lrg {
	font-size: 2.2em;
	letter-spacing: .1em;
}

.page-header .header-group .header-title .indication {
	display: block;
	font-size: .6em;
	font-weight: bold;
	letter-spacing: .15em;
}

.page-header .header-group .header-title::after {
	content: '';
	display: block;
	width: 80px;
	margin: min(30px, 5vw) auto 0;
	border-top: solid 2px #fff;

}

.page-header .header-group .header-subtitle {
	display: block;
	font-size: min(3.8rem, 6vw);
	line-height: 1.5;
	font-weight: bold;
	color: #fff;
	font-feature-settings: "palt";
	letter-spacing: .05em;
	margin: min(30px, 5vw) 0 0;

}

.page-header .header-group .note {
	color: #fff;
	font-size: 1.3rem;
}

@media screen and (max-width:767px) {
	.page-header .header-group .note {
		margin-top: 1em;
		order: 2;
	}
}

.page-header .header-img {
	flex: 1;
}

@media screen and (max-width:767px) {
	.page-header .header-img {
		width: 100%;
		height: min(320px, 62vw);
		flex: auto;
	}
}

/* page-header2 */
.page-header2 {
	padding: min(50px, 15vw) 20px min(100px, 15vw);
	text-align: center;
	background-color: #d9e7ea;
}

.page-header2 .header-title {
	font-size: min(5rem, 10vw);
	color: var(--grade-color);

}

.page-header2 .header-title .title-icon {
	display: block;
	height: 1.4em;
	margin: 0 auto;
}

.page-header2 .header-title .title-icon img {
	width: auto;
	height: 100%;
}

.page-header2 .header-title+.note {
	display: block;
	margin: 20px auto min(50px, 10vw);
	font-size: 1.3rem;
	color: #666;
}

.page-header2 .header-img {
	width: min(1100px, 100%);
	margin: 0 auto;
	border-radius: 20px;
	overflow: hidden;
}

.page-header2 .header-subtitle {
	margin: min(80px, 10vw) auto 0;
	font-size: min(3.5rem, 5.2vw);
	line-height: 1.8;
	font-weight: bold;
}

.page-header2 .header-subtitle .em {
	color: var(--grade-color);
	font-size: min(1.3em, 6vw);
}

.page-header2 .text {
	margin: min(60px, 7vw) auto 0;
	font-size: min(1.8rem, 4.2vw);
	line-height: 2;
	font-weight: bold;
}

/* intro */
.intro-wrp.nocources-intro .inner {
	padding-bottom: 0;
}

@media screen and (max-width:767px) {
	.intro-wrp .inner {
		padding: min(7em, 12vw) 1em;
	}
}

.intro-wrp .title-wrp {
	font-size: min(2.8rem, 4.8vw);
}

.intro-wrp .title-wrp .title-icon {
	display: block;
	height: 1.5em;
	margin: 0 auto;
}

.intro-wrp .title-wrp .title-illust {
	display: block;
	width: auto;
	max-width: 90%;
	height: min(180px, 32vw);
	margin: 10px auto 20px;
}

.intro-wrp.nocources-intro .title-wrp .title-illust {
	margin: min(40px, 5vw) auto max(-25px, -4vw);
}

.intro-wrp .title-wrp .title-illust img {
	width: auto;
	height: 100%;
}

.intro-wrp .synergy-wrp {
	width: min(1060px, 100%);
	margin: min(80px, 15vw) auto 0;
	gap: 4rem 6%;
}

@media screen and (max-width:767px) {
	.intro-wrp .synergy-wrp {
		flex-direction: column;
	}
}

.intro-wrp .synergy-wrp :where(.program, .course) {
	width: 37%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 2rem 8%;
}

@media screen and (max-width:767px) {
	.intro-wrp .synergy-wrp :where(.program, .course) {
		width: min(400px, 90%);
	}
}

.intro-wrp .synergy-wrp :where(.program, .course) .title-wrp {
	width: 100%;
	font-size: min(2.5rem, 5.4vw);
	grid-column: span 2;
}

.intro-wrp .synergy-wrp :where(.program, .course) .title-wrp .title-icon {
	height: 1.5em;
	margin: 0 auto .5em;
}

.intro-wrp .synergy-wrp :where(.program, .course) .title-wrp .title {
	line-height: 1.6;
}

.intro-wrp .synergy-wrp :where(.program, .course) .title-wrp .title .sml {
	font-size: .85em;
}

.intro-wrp .synergy-wrp :where(.program, .course) .box {
	width: min(180px, 46%);
	margin: 0 auto;
	text-align: center;
}

.intro-wrp .synergy-wrp :where(.program, .course) .box figure {
	width: 100%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	overflow: clip;
	border: solid 8px var(--lesson-color);
}

.intro-wrp .synergy-wrp :where(.program, .course) .box .label {
	display: inline-block;
	width: min(8.5em, 100%);
	margin-top: 1em;
	padding: .75em 0;
	font-size: min(1.8rem, 4.2vw);
	text-align: center;
	background-color: var(--lesson-color);
	color: #fff;
	font-weight: bold;
	border-radius: 2em;
}

.intro-wrp .times {
	width: 14%;
	aspect-ratio: 1/1;
	position: relative;
}

@media screen and (max-width:767px) {
	.intro-wrp .times {
		width: min(200px, 25%);
	}
}

.intro-wrp .times::before,
.intro-wrp .times::after {
	content: '';
	display: block;
	width: 120%;
	height: 0;
	border-top: solid 2px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}

.intro-wrp .times::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.intro-wrp .copy {
	margin: min(80px, 15vw) auto 0;
	font-size: min(2.4rem, 4.6vw);
	text-align: center;
	line-height: 1.6;
	font-weight: bold;
	letter-spacing: .05em;
	font-feature-settings: "palt";
}

.intro-wrp .copy .em {
	display: block;
	font-size: 1.8em;
	letter-spacing: .1em;
	color: var(--grade-color);
}

@media screen and (max-width:767px) {
	.intro-wrp .copy .em {
		margin-top: .3em;
		line-height: 1.4;
		font-size: min(1.8em, 8vw);
	}
}

/* feature */
.feature-wrp {
	background-color: #f7f7f0;
}

.feature-wrp .inner {
	gap: min(80px, 15vw) 0;
}

.feature-wrp :where(.hearing, .speaking) {
	width: min(420px, 45%);
}

@media screen and (max-width:767px) {
	.feature-wrp :where(.hearing, .speaking) {
		width: 100%;
	}
}

.feature-wrp .title-icon {
	display: block;
	width: fit-content;
	height: min(3.4rem, 9vw);
	margin: 0 auto 7%;
}

.feature-wrp .title-icon img {
	width: auto;
	height: 100%;
}

.feature-wrp .title {
	margin-bottom: 1.5em;
	font-size: min(2.2rem, 4.8vw);
	line-height: 1.8;
	font-weight: bold;
	text-align: center;
}

.feature-wrp figure {
	margin: 0 auto 20px;
}

.feature-wrp p:not([class]) {
	font-size: min(1.6rem, 3.8vw);
	line-height: 1.8;
}


/* program & course */
.program-wrp {
	background-color: #f0f5f9;
}

.course-wrp {
	background-color: #f7f8f0;
}

.intro-wrp.nocources-intro+.program-wrp .inner {
	padding-top: min(150px, 20vw);
}

@media screen and (max-width:767px) {
	:where(.program-wrp, .course-wrp) .inner {
		padding: min(70px, 15vw) 0;
	}
}

.program-wrp .teacher-wrp {
	margin-top: min(60px, 10vw);
}

.program-wrp .teacher-wrp :where(.teacher-japanese, .teacher-foreign) {
	width: 50%;
	padding: 0 2rem 0 7rem;
	display: grid;
	grid-template-areas: 'img title' 'img text';
	grid-template-columns: min(142px, 30%) 1fr;
	gap: 2rem 3rem;
}

/* baby teacher-wrp */
.is_baby .program-wrp .teacher-wrp :where(.teacher-japanese, .teacher-foreign) {
	grid-template-columns: min(142px, 25%) 1fr;
	grid-template-rows: repeat(3, auto);
}

@media screen and (max-width:767px) {
	.program-wrp .teacher-wrp :where(.teacher-japanese, .teacher-foreign) {
		display: block;
		padding: 1em;
	}
}

.program-wrp .teacher-wrp .teacher-japanese {
	padding: 0 7rem 0 2rem;
	border-right: dotted 2px #898e92;
}

@media screen and (max-width:767px) {
	.program-wrp .teacher-wrp .teacher-japanese {
		display: block;
		padding: 1em;
	}

	.is_baby .program-wrp .teacher-wrp .teacher-japanese,
	.is_baby .program-wrp .teacher-wrp .teacher-foreign {
		width: 100%;
	}
}

.program-wrp .teacher-wrp :where(.teacher-japanese, .teacher-foreign) .teacher-img {
	grid-area: img;
	width: 100%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	border: solid 6px var(--lesson-color);
	background-color: #fff;
	overflow: hidden;
}

.program-wrp .teacher-wrp :where(.teacher-japanese, .teacher-foreign) .teachrer-img-frn-jpn {
	grid-area: img;
}

.program-wrp .teacher-wrp :where(.teacher-japanese, .teacher-foreign) .teachrer-img-frn-jpn .teacher-img {
	width: 90%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	border: solid 6px var(--lesson-color);
	background-color: #fff;
	overflow: hidden;
	margin-bottom: 1em;
}

@media screen and (max-width:767px) {

	.program-wrp .teacher-wrp :where(.teacher-japanese, .teacher-foreign) .teacher-img {
		width: 70%;
		margin: 0 auto 1em;
	}

	.is_baby .program-wrp .teacher-wrp :where(.teacher-japanese) .teacher-img {
		display: block;
		width: 30%;
		margin: 0 auto 1em;
	}

	.is_baby .program-wrp .teacher-wrp .international-program {
		text-align: center;
	}

	.is_baby .program-wrp .teacher-wrp :where(.teacher-foreign) .teacher-img {
		display: inline-block;
		width: 30%;
		margin: 0 1em 1em;
	}
}

.program-wrp .teacher-wrp :where(.teacher-japanese, .teacher-foreign) .teacher-title {
	grid-area: title;
	font-size: min(2.5rem, 5vw);
	line-height: 1.8;
	color: var(--lesson-color);
	font-weight: bold;
}

@media screen and (max-width:767px) {
	.program-wrp .teacher-wrp :where(.teacher-japanese, .teacher-foreign) .teacher-title {
		text-align: center;
	}
}

.program-wrp .teacher-wrp :where(.teacher-japanese, .teacher-foreign) .teacher-title .lrg {
	font-size: 1.3em;
}

.program-wrp .teacher-wrp :where(.teacher-japanese, .teacher-foreign) .teacher-title .program {
	display: block;
	font-size: .8em;
	line-height: 1.5;
	margin-bottom: 1em;
}

.program-wrp .teacher-wrp :where(.teacher-japanese, .teacher-foreign) .teacher-text {
	grid-area: text;
	font-size: min(1.65rem, 3.3vw);
	line-height: 1.8;
	text-align: justify;
	font-feature-settings: "palt";
}

/* baby internation */
.program-wrp .teacher-wrp .teacher-w {
	grid-column: span 2 / span 2;
	font-size: min(1.45rem, 3vw);
	color: var(--lesson-color);
	font-feature-settings: "palt";
	font-weight: 600;
	text-align: center;
	border: 2px solid;
	border-radius: 3px;
	padding: .5em 0;
}

@media screen and (max-width:767px) {
	.program-wrp .teacher-wrp .teacher-w {
		margin-top: 1em;
	}

	.program-wrp .teacher-wrp :where(.teacher-japanese, .teacher-foreign) .teacher-text {
		line-height: 1.6;
	}
}

.program-wrp .teacher-wrp :where(.teacher-japanese, .teacher-foreign) .teacher-text .em {
	color: var(--lesson-color);
	font-weight: bold;
	font-size: 1.1em;
}

/* detail-wrp tab */
.detail-wrp-tab {
	margin-top: min(60px, 10vw);
}

@media screen and (max-width:767px) {
	.detail-wrp-tab {
		justify-content: space-evenly;
	}
}

.detail-wrp-tab .tab {
	width: min(25em, 42%);
	padding: 1.25em 0 .7em;
	font-size: 2rem;
	text-align: center;
	background-color: var(--lesson-color);
	border-radius: 1em 1em 0 0;
	color: #fff;
	font-weight: bold;
	opacity: .7;
	cursor: pointer;
	transition: opacity .3s;
}

@media screen and (max-width:767px) {
	.detail-wrp-tab .tab {
		padding: 1em 0 .5em;
		font-size: min(2rem, 4.2vw);
		line-height: 1.4;
	}

	.is_baby .detail-wrp-tab .tab {
		min-height: 120px;
	}
}

.detail-wrp-tab .tab.active,
.detail-wrp-tab .tab:hover {
	opacity: 1;
}

.detail-wrp-tab .tab.active {
	cursor: auto;
}

.detail-wrp-tab .tab .lrg {
	font-size: 1.4em;
}

@media screen and (max-width:767px) {
	.detail-wrp-tab .tab .lrg {
		font-size: 1.3em;
	}
}

.detail-wrp-tab .tab .program {
	padding-left: 1em;
	font-size: .8em;
}

@media screen and (max-width:767px) {
	.detail-wrp-tab .tab .program {
		display: block;
		padding-left: 0;
	}
}

/* detail-wrp */
.detail-wrp {
	width: 100%;
	margin: min(60px, 12vw) auto 0;
	padding: min(60px, 10vw) min(80px, 5vw);
	border: solid 6px var(--lesson-color);
	background-color: #fff;
	border-radius: min(3.8rem, 2.5vw);
}

@media screen and (max-width:767px) {
	.detail-wrp {
		width: calc(100% - 2em);
	}
}

.detail-wrp.tab-wrp {
	margin-top: 0;
	display: none;
}

.detail-wrp.tab-wrp.active {
	display: block;
}

.detail-wrp+.detail-wrp:not(.tab-wrp) {
	margin-top: min(80px, 18vw);
}

.detail-wrp .lesson-illust {
	display: block;
	width: min(140px, 33vw);
	margin: 0 auto;
}

.detail-wrp .lesson-title {
	margin-top: .5em;
	color: var(--lesson-color);
	font-size: min(3.2rem, 5vw);
	font-weight: bold;
	text-align: center;
	font-family: 'Outfit', sans-serif;
	letter-spacing: .05em;
}

.detail-wrp .lesson-title.jp {
	margin-top: 1em;
}

.detail-wrp .lesson-title .em {
	padding: 0 .2em;
	font-size: 1.4em;
	line-height: 1;
}

.detail-wrp .lesson-title.jp .em {
	font-size: 1.2em;
}

.detail-wrp .lesson-subtitle {
	margin-top: 1.5em;
	text-align: center;
	font-size: min(2.5rem, 4vw);
	font-weight: bold;
	line-height: 1.6;
	letter-spacing: .05em;
	font-feature-settings: "palt";
}

/* summary-wrp */
.detail-wrp .lesson-summary-wrp {
	margin-top: min(80px, 10vw);
	margin: min(80px, 10vw) 0 min(60px, 12vw);
	padding: 0 0 min(80px, 12vw);
	border-bottom: solid 1px var(--lesson-color);
	gap: 3em 0;
}

.detail-wrp .lesson-summary-wrp figure {
	width: 60%;
	width: calc(100% - 440px);
	border-radius: 20px;
	overflow: clip;
}

@media screen and (max-width:767px) {
	.detail-wrp .lesson-summary-wrp figure {
		width: 100%;
	}
}

.detail-wrp .lesson-summary {
	width: 370px;
	font-size: 1.6rem;

}

@media screen and (max-width:767px) {
	.detail-wrp .lesson-summary {
		width: 100%;
	}
}

/* requirement table */
.detail-wrp .lesson-summary .requirement {
	width: 100%;
}

.detail-wrp .lesson-summary .requirement tr {
	border-bottom: solid 1px var(--lesson-color);
}

.detail-wrp .lesson-summary .requirement :where(th, td) {
	padding: min(2.2rem, 4.5vw) 0 min(1.6rem, 3.8vw);
	font-size: min(1.6rem, 3.4vw);
	line-height: 1.4;
	vertical-align: bottom;
}

.detail-wrp .lesson-summary .requirement tr:first-child :where(th, td) {
	padding-top: 0;
}

.detail-wrp .lesson-summary .requirement th {
	width: 35%;
	min-width: 6em;
	font-weight: normal;
	text-align: left;
}

.course-wrp .detail-wrp .lesson-summary .requirement th {
	width: 24%;
}

.detail-wrp .lesson-summary .requirement th.hd-adjust {
	vertical-align: middle;
}

.detail-wrp .lesson-summary .requirement th.hd-adjust span {
	display: inline-block;
	transform: translateY(-20%);
}

.detail-wrp .lesson-summary .requirement td {
	padding-left: 1.6em;
}

.detail-wrp .lesson-summary .requirement td.ex-lineheight {
	line-height: 2.2;
}

.detail-wrp .lesson-summary .requirement td .em {
	padding: 0 .1em;
	font-size: 2.5em;
	font-weight: bold;
	vertical-align: -.05em;
	color: var(--lesson-color);
	letter-spacing: .025em;
	line-height: 1;
	font-family: 'Outfit', sans-serif;
}

.detail-wrp .lesson-summary .requirement td .em.jp {
	font-size: 1.5em;
}

@media screen and (max-width:767px) {
	.detail-wrp .lesson-summary .requirement td .sml {
		font-size: min(.9em, 3vw);
	}
}

.detail-wrp .lesson-summary .requirement ul.note {
	display: block;
	margin-top: .25em;
	font-size: min(1.3rem, 3.2vw);
	color: #666;
}

.detail-wrp .lesson-summary .requirement ul.note li {
	margin: .2em 0 0;
	font-size: 1em;
}

.detail-wrp .lesson-summary .point-list {
	margin-top: 3rem;
}

.detail-wrp .lesson-summary .point-list li {
	width: 8.5em;
	height: 8.5em;
	border-radius: 50%;
	display: grid;
	place-items: center;
	text-align: center;
	font-size: min(.9em, 3.6vw);
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: .05em;
	background-color: var(--lesson-color);
	color: #fff;
	font-feature-settings: "palt";
}

.detail-wrp .lesson-summary .requirement~.note {
	display: block;
	margin-top: 1.5em;
	text-align: right;
	font-size: min(1.2rem, 3.6vw);
	line-height: 1.4;
	color: #666;
}

.detail-wrp .help-open-btn {
	margin-top: 3.2rem;
	display: block;
	font-size: min(1.6rem, 4vw);
	text-align: right;
	color: var(--lesson-color);
	cursor: pointer;
}

.detail-wrp .help-open-btn .circle-arrow {
	margin-left: .5em;
	transform: rotate(90deg);
}

.detail-wrp .help-open-btn.open .circle-arrow {
	margin-left: .5em;
	transform: rotate(-90deg);
}

/* help-wrp */
.detail-wrp .help-wrp {
	width: 100%;
	margin-top: min(4rem, 5vw);
	padding: min(4rem, 7vw) min(4rem, 5vw);
	background-color: #f0f5f9;
	font-size: min(1.4rem, 3.4vw);
	line-height: 1.6;
	display: none;
}

.detail-wrp.standard-program .help-wrp {
	background-color: #fff5f3;
}

.detail-wrp .help-wrp .help-title {
	width: 100%;
	margin-top: 0;
	padding-bottom: .5em;
	font-size: 1.7rem;
	font-weight: bold;
	color: var(--lesson-color);
	border-bottom: solid 1px;
}

.detail-wrp .help-wrp .help-program,
.detail-wrp .help-wrp .help-schooltype {
	gap: 0 min(30px, 5vw);
}

.detail-wrp .help-wrp .help-schooltype {
	margin-top: 3em;
}

.detail-wrp .help-wrp .help-program .text-box {
	width: 45%;
	flex-grow: 1;
}

.detail-wrp .help-wrp .help-schooltype .text-box {
	width: 30%;
	flex-grow: 1;
}

.detail-wrp .help-wrp .help-subtitle {
	margin-top: 2em;
	padding-left: 2em;
	font-size: min(1.6rem, 3.8vw);
	font-weight: bold;
	position: relative;
}

.detail-wrp .help-wrp .help-subtitle::before {
	content: "";
	display: block;
	width: 1.5em;
	height: 1.5em;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.detail-wrp .help-wrp .help-subtitle.standard-program::before {
	background: url(/courses/assets/images/teacher-japanese.jpg) no-repeat center / contain;
}

.detail-wrp .help-wrp .help-subtitle.international-program::before {
	background: url(/courses/assets/images/teacher-foreign.jpg) no-repeat center / contain;
}

.detail-wrp .help-wrp .help-subtitle.home::before {
	background: url(/common/images/icon-home-sm.png) no-repeat center / contain;
}

.detail-wrp .help-wrp .help-subtitle.plaza::before {
	background: url(/common/images/icon-plaza-sm.png) no-repeat center / contain;
}

.detail-wrp .help-wrp .help-subtitle.corp::before {
	background: url(/common/images/icon-corp-sm.png) no-repeat center / contain;
}

.detail-wrp .help-wrp p {
	font-size: min(1.4rem, 3.4vw);
	margin-top: .5em;
}

.detail-wrp .help-wrp .recommend-schooltype {
	margin: 1em 0 .2em;
	color: var(--lesson-color);
}

.detail-wrp .help-wrp .recommend-schooltype+ul li {
	padding-left: 1.2em;
	font-size: min(1.3rem, 3.4vw);
	position: relative;
}

.detail-wrp .help-wrp .recommend-schooltype+ul li::before {
	content: '';
	display: inline-block;
	width: .4em;
	height: .4em;
	margin: .2em .4em;
	border-radius: 50%;
	background-color: var(--lesson-color);
	position: absolute;
	left: 0;
	top: .3em;
}

.detail-wrp .help-wrp .note {
	font-size: min(1.3rem, 3.4vw);
	color: #666;
}

/* lesson flow */
.detail-wrp .lesson-flow-wrp {
	margin: 0 0 min(80px, 12vw);
	padding: 0 0 min(60px, 12vw);
	border-bottom: solid 1px var(--lesson-color);
	position: relative;
}

.detail-wrp .lesson-flow-title {
	margin-top: .5em;
	color: var(--lesson-color);
	font-size: min(2.8rem, 6.2vw);
	font-weight: bold;
	text-align: center;
}

.detail-wrp .lesson-flow-title .sml {
	font-size: .7em;
	font-weight: normal;
	margin-left: .25em;
}

.detail-wrp .timetable-title-wrp {
	position: relative;
}

.detail-wrp .timetable-title {
	margin-top: 2em;
	font-size: min(2rem, 4.6vw);
}

.detail-wrp .timetable-title::before {
	content: '';
	display: inline-block;
	width: .8em;
	height: .8em;
	margin-right: .5em;
	border-radius: 50%;
	border: solid 4px var(--lesson-color);
	vertical-align: -.05em;
}

.detail-wrp .timetable-title .em {
	padding: 0 .15em;
	font-size: 2.2em;
	font-weight: bold;
	color: var(--lesson-color);
	font-family: 'Outfit', sans-serif;
}

.detail-wrp .timetable-title-wrp .note {
	margin-top: 0;
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: min(1.4rem, 3.4vw);
	color: var(--lesson-color);
}

@media screen and (max-width:640px) {
	.detail-wrp .timetable-title-wrp .note {
		margin-top: 1em;
		position: static;
	}
}

/* timetable */
.detail-wrp .timetable-lang {
	display: flex;
	justify-content: space-between;
}

.detail-wrp .timetable-lang .timetable-lang-label {
	color: #fff;
	font-size: min(1.5rem, 3vw);
	font-weight: 600;
	text-align: center;
	padding: .4em;
	margin: .5em auto 0;
	clip-path: polygon(1em 0%, calc(100% - 1em) 0%, 100% 50%, calc(100% - 1em) 100%, 1em 100%, 0% 50%);
	overflow: hidden;
}

.detail-wrp .timetable-lang .timetable-jp {
	background-color: #ec8e8e;
	width: 20%;
}

.detail-wrp .timetable-lang .timetable-en {
	background-color: #58afd5;
	width: 80%;
}

.detail-wrp .timetable.lesson-slide-timetable {
	margin-top: 6rem;
}

@media screen and (max-width:767px) {
	.detail-wrp .timetable.lesson-slide-timetable {
		margin-top: min(10rem, 20vw);
	}
}

.detail-wrp .timetable.lesson-slide2-timetable {
	margin-top: 3rem;
}

.detail-wrp .timetable .slick-list {
	overflow: visible;
}

.detail-wrp .timetable .slick-track {
	max-width: 100%;
}

.detail-wrp .timetable :where(.time-item, .step-item) {
	height: 50px;
	padding: .75em .25em;
	font-size: min(1.6rem, 3.4vw);
	font-weight: bold;
	text-align: center;
	background-color: var(--time-color);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	flex-grow: 1;
	cursor: pointer;
}

.detail-wrp .timetable .time-item {
	border-left: solid 1px #fff;
}

.detail-wrp .timetable .time-item:first-child {
	border-radius: min(10px, 1.5vw) 0 0 min(10px, 1.5vw);
	border-left: none;
}

.detail-wrp .timetable .time-item:last-child {
	border-radius: 0 min(10px, 1.5vw) min(10px, 1.5vw) 0;
}

.detail-wrp .timetable .item-green {
	--time-color: #8dcdcb;
}

.detail-wrp .timetable .item-pink {
	--time-color: #efa5c6;
}

.detail-wrp .timetable .item-blue {
	--time-color: #79aedb;
}

.detail-wrp .timetable .item-purple {
	--time-color: #c2a3c9;
}

.detail-wrp .timetable .item-orange {
	--time-color: #f5b36e;
}

.detail-wrp .timetable .item-yellow {
	--time-color: #ffe18d;
}

@media screen and (max-width:767px) {
	.detail-wrp .timetable .time-item {
		height: auto;
		padding: 1.25em .25em .5em;
	}

	.detail-wrp .timetable .time-item::before {
		content: '';
		display: block;
		width: 0;
		border-left: solid 1.5px #555;
		position: absolute;
		top: -.4em;
		bottom: calc(100% - .5em);
		left: calc(50% - 1px);
	}

	.detail-wrp .timetable .time-item:nth-child(odd)::before {
		top: -1.8em;
	}

	.is_baby .detail-wrp .timetable .time-item:nth-child(odd)::before {
		top: -.4em;
	}

	.is_baby .detail-wrp .timetable .time-item:nth-child(even)::before {
		top: -1.8em;
	}

	.detail-wrp .timetable .time-item.heighr::before {
		top: -3.2em;
	}

	.detail-wrp .timetable .time-item::after {
		content: '';
		display: block;
		width: .6em;
		height: .6em;
		background-color: #555;
		border-radius: 50%;
		position: absolute;
		bottom: calc(100% - 1em);
		left: 50%;
		transform: translateX(-50%);
	}
}

.detail-wrp .timetable .time-item .label {
	width: max-content;
	position: absolute;
	left: 50%;
	bottom: calc(100% + .5em);
	transform: translateX(-50%);
	font-family: 'Outfit', sans-serif;
	font-feature-settings: "palt";
	font-size: min(1.4rem, 3.2vw);
	letter-spacing: 0;
	line-height: 1.4;
}

@media screen and (max-width:767px) {
	.detail-wrp .timetable .time-item .label {
		color: var(--time-color);
		filter: brightness(.8) contrast(1.4);
	}

	@media screen and (max-width:600px) {
		.detail-wrp .timetable .time-item:first-child .label {
			left: 0;
			transform: translateX(-12%);
		}
	}

	.detail-wrp .timetable .time-item:nth-child(odd) .label {
		bottom: calc(100% + 2em);
	}

	.is_baby .detail-wrp .timetable .time-item:nth-child(odd) .label {
		bottom: calc(100% + .5em);
	}

	.is_baby .detail-wrp .timetable .time-item:nth-child(even) .label {
		bottom: calc(100% + 2em);
	}

	@media screen and (max-width:600px) {
		.detail-wrp .timetable .time-item:last-child .label {
			left: unset;
			right: 0;
			transform: translateX(12%);
		}
	}

	.detail-wrp .timetable .time-item.heighr .label {
		bottom: calc(100% + 3.5em);
	}
}

.detail-wrp .timetable .em {
	padding-right: .1em;
	font-weight: bold;
	font-size: 1.7em;
	font-family: 'Outfit', sans-serif;
}

@media screen and (max-width:767px) {
	.detail-wrp .timetable .em {
		padding: 0 0 .1em;
		font-size: min(1.7em, 6vw);
	}

	.detail-wrp .timetable .time-item .em {
		display: block;
	}
}

/* step */
.detail-wrp .timetable.lesson-slide2-timetable .slick-list {
	padding: 0;
}

.detail-wrp .timetable .step-item {
	max-width: 33.3%;
	clip-path: polygon(0 0, 93% 0, 100% 50%, 50% 100%, 100% 50%, 93% 100%, 0 100%);
	padding-right: 2.5%;
	padding-top: .75em;
}

.detail-wrp.grammar-course .timetable .step-item {
	background-color: #8dcdcb;
}

.detail-wrp.grimm-course .timetable .step-item {
	/* background-color: #f1c148; */
	background-color: var(--grade_textcolor-reading);
}

.detail-wrp .timetable .slick-active {
	opacity: .75;
}

.detail-wrp .timetable .slick-current {
	opacity: 1;
}

.detail-wrp .slick-active span:not(.label) {
	color: #fff;
}

.detail-wrp .slick-current span:not(.label) {
	color: #121212;
}

/* lesson detail */
.lesson-detail-wrp {
	margin-top: min(40px, 5vw);
	margin-bottom: 0 !important;
	padding: min(80px, 7vw);
	--arrow-color: #fff;
	--arrow-range: 0;
	--arrow-size: min(4rem, 8vw);
	border-radius: 1rem;
	background-color: #f7f8f0;
}

.lesson-detail-wrp .lesson-detail {
	display: flex;
	justify-content: space-between;
	max-width: 100%;
	position: relative;
}

@media screen and (max-width:767px) {
	.lesson-detail-wrp .lesson-detail {
		display: grid;
		grid-template-areas: 'time stepimg' 'title stepimg' 'img img' 'text text';
		grid-template-columns: 1fr auto;
	}
}

.lesson-detail-wrp .lesson-detail.nofigure {
	display: block;
}

/* figure */
.lesson-detail-wrp .lesson-detail figure {
	grid-area: img;
	width: 330px;
}

:where(.grammar-course) .lesson-detail-wrp .lesson-detail figure {
	width: 540px;
}

:where(.grimm-course) .lesson-detail-wrp .lesson-detail figure {
	width: 480px;
}

@media screen and (max-width:767px) {
	.lesson-detail-wrp .lesson-detail figure:not(.stepimg) {
		width: 100%;
		margin: .5em 0 min(2.5rem, 5vw);
	}
}

.grimm-course .lesson-detail-wrp .lesson-detail figure {
	padding: 2em;
}

@media screen and (max-width:767px) {
	.grimm-course .lesson-detail-wrp .lesson-detail figure {
		padding: 0;
	}
}

.lesson-detail-wrp .lesson-detail figure.corner-r img {
	border-radius: 20px;
}

/* text */
.lesson-detail-wrp .lesson-detail .text {
	width: calc(100% - 400px);
	font-feature-settings: "palt";
	text-align: justify;
	letter-spacing: .05em;
	position: relative;
}

.lesson-detail-wrp .lesson-detail.nofigure .text {
	width: 100%;
}

:where(.grammar-course, .grimm-course) .lesson-detail-wrp {
	padding: 40px min(80px, 7vw);
}

:where(.grammar-course) .lesson-detail-wrp .lesson-detail .text {
	width: calc(100% - 570px);
	padding-top: 4em;
}

:where(.grimm-course) .lesson-detail-wrp .lesson-detail .text {
	width: calc(100% - 520px);
	padding-top: 4em;
}

@media screen and (max-width:767px) {
	.lesson-detail-wrp .lesson-detail .text {
		display: contents;
	}
}

.lesson-detail-wrp .lesson-detail .text .time {
	grid-area: time;
	font-size: 1.6rem;
	font-weight: bold;
	font-family: 'Outfit', sans-serif;
}

.lesson-detail-wrp .lesson-detail .text .time::before {
	content: '';
	display: inline-block;
	width: 1.7em;
	height: 1.7em;
	margin-right: .5em;
	background: url(../images/icon-time.svg) no-repeat center / contain;
	vertical-align: -.3em;
}

.lesson-detail-wrp .lesson-detail .text .lesson-detail-title {
	grid-area: title;
	margin: min(1em, 3vw) 0;
	font-size: min(2.4rem, 5vw);
	font-weight: bold;
	line-height: 1.6;
}

:where(.grammar-course, .grimm-course) .lesson-detail-wrp .lesson-detail .text .lesson-detail-title {
	color: var(--lesson-color);
}

.lesson-detail-wrp .lesson-detail .text p:not(.time) {
	grid-area: text;
	font-size: min(1.7rem, 4vw);
	font-size: min(1.6rem, 3.3vw);
	line-height: 1.8;
}

.lesson-detail-wrp .lesson-detail .stepimg {
	width: 110px;
	height: 110px;
	border: solid min(5px, 1vw) var(--lesson-color);
	border-radius: 100%;
	overflow: hidden;
	position: relative;
}

.lesson-detail-wrp .lesson-detail .stepimg.step1 {
	position: absolute;
	top: 0;
	left: -120px;
}

.lesson-detail-wrp .lesson-detail .stepimg.step2 {
	width: 140px;
	height: 140px;
	margin-top: 2em;
	left: -20px;
}

@media screen and (max-width:767px) {

	.lesson-detail-wrp .lesson-detail .stepimg.step1,
	.lesson-detail-wrp .lesson-detail .stepimg.step2 {
		grid-area: stepimg;
		width: min(140px, 21vw);
		height: min(140px, 21vw);
		position: static;
		transform: translateX(-2%);
	}
}

/* textbook-wrp */
.grimm-course .textbook-wrp {
	display: block;
	width: 220px;
	text-align: center;
	margin: 0 auto;
	position: absolute;
	top: -30px;
	right: -20px;
}

@media screen and (max-width:767px) {
	.grimm-course .textbook-wrp {
		display: block;
		width: 220px;
		text-align: center;
		margin: 2em auto 0;
		position: relative;
		top: unset;
		right: unset;
	}
}

.grimm-course .textbook-wrp::before {
	content: '';
	width: 240px;
	height: 240px;
	border-radius: 100%;
	background-color: #f7f8f0;
	z-index: 0;
	position: absolute;
	top: 2%;
	left: -10px;
}

.grimm-course .textbook-wrp .textbook-about {
	display: inline-block;
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: bold;
	color: #e6a701;
	margin-bottom: 1em;
	position: relative;
	padding: 0 2em;
	z-index: 2;
}

.grimm-course .textbook-wrp .textbook-about::before,
.grimm-course .textbook-wrp .textbook-about::after {
	content: '';
	width: 0;
	height: 100%;
	position: absolute;
	bottom: -2%;
	border-left: 2px solid #e6a701;
}

.grimm-course .textbook-wrp .textbook-about::before {
	left: 0;
	transform: rotate(-33deg);
}

.grimm-course .textbook-wrp .textbook-about::after {
	right: 0;
	transform: rotate(33deg);
}

.grimm-course .textbook-wrp .textbook {
	width: 90px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

.grimm-course .textbook-wrp .textbook-caption {
	margin: 1em auto;
	display: block;
	font-size: 1.2rem;
	line-height: 1.5;
	position: relative;
	z-index: 2;
}

/* arrow & dots */
.lesson-detail-wrp :where(.slick-prev, .slick-next) {
	background-color: var(--lesson-color);
	border-radius: 50%;
}

.lesson-detail-wrp :where(.slick-prev, .slick-next)::before {
	width: 30%;
	height: 30%;
}

.lesson-detail-wrp .slick-dots {
	--dot-size: min(14px, 3vw);
	--dot-color: var(--lesson-color);
	--dot-opacity: 1;
	--dot-notactiveopacity: .35;
	bottom: min(30px, 10vw);
}

/* voice */
.detail-wrp .voice-wrp {
	padding: min(60px, 10vw) min(80px, 5vw) min(60px, 7vw);
	border-radius: 1rem;
	background-color: #fedddd;
}

.detail-wrp .voice-wrp .flex-between {
	gap: 2.5rem 0;
}

.detail-wrp .voice-wrp figure {
	width: 100%;
	max-width: 320px;
	border-radius: 15px;
	border: solid 4px #fff;
	overflow: hidden;
}

@media screen and (max-width:767px) {
	.detail-wrp .voice-wrp figure {
		max-width: 100%;
	}
}

.detail-wrp .voice-wrp .text {
	width: calc(100% - 400px);
}

@media screen and (max-width:767px) {
	.detail-wrp .voice-wrp .text {
		width: 100%;
	}
}

.detail-wrp .voice-wrp .text p.hd {
	margin-bottom: min(1em, 3vw);
	font-size: min(2.4em, 4vw);
	font-weight: bold;
	line-height: 1.6;
}

.detail-wrp .voice-wrp .text p:not(.hd) {
	font-size: min(1.6rem, 3.3vw);
	line-height: 1.8;
}

/* btn-wrp */
.detail-wrp .btn-wrp {
	margin-top: min(80px, 12vw);
}

.detail-wrp .btn-wrp .hd {
	margin-bottom: 1em;
	font-size: min(2.4rem, 5vw);
	line-height: 1.5;
	font-weight: bold;
	color: var(--lesson-color);
}

/*=== contact ===*/
.contact-copy {
	padding-top: 2em;
	font-size: min(3.2rem, 5.2vw);
	/* color: var(--lesson-color); */
	line-height: 1.6;
	letter-spacing: .15em;
	text-align: center;
}

@media screen and (max-width:767px) {
	.contact-copy {
		letter-spacing: .1em;
	}
}

/*---- baby ---- */
.is_baby .intro-wrp .inner {
	padding-bottom: 60px;
}

.babycourse-wrp {
	max-width: 980px;
	margin: min(6em, 8vw) auto 0;
}

.babycourse-box {
	width: 30%;
}

@media screen and (max-width:767px) {
	.babycourse-box {
		width: 90%;
		margin: 1em auto;
	}
}

.bobycourse-img {
	width: 100%;
	border-radius: 40px;
	overflow: hidden;
	border: 10px solid;
}

.course-play {
	color: #8dcdcb;
}

.course-story {
	color: #efa5c6
}

.course-home {
	color: #79aedb;
}

.babycourse-en-title {
	font-size: min(3.5rem, 10vw);
	text-align: center;
	font-weight: 800;
	padding: 1em 0 0;
}


.babycourse-title {
	font-size: min(2.4rem, 7vw);
	line-height: 1.6;
	padding: 1em 0;
	text-align: center;
}

.babycourse-title .sml {
	display: block;
	font-size: .7em;
}

.baby-lesson-wrp {
	background-color: #f7f8f3;
}

.baby-lesson-inner {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4%;
	padding: 6em 1em 4em;
}

.baby-lesson-title-wrp {
	text-align: center;
	width: fit-content;
	padding: 1em;
}

@media screen and (max-width:767px) {
	.baby-lesson-title-wrp {
		text-align: center;
		width: 100%;
	}
}

.lesson-title-wrp {
	display: flex;
	flex-wrap: wrap;
}

@media screen and (max-width:767px) {
	.is_baby .lesson-title-wrp {
		grid-column: span 2 / span 2;
	}

	.is_baby .lesson-detail-wrp .lesson-detail .text .lesson-detail-title {
		grid-column: span 2 / span 2;
	}
}

.lesson-title-wrp .teacher-lang-icon {
	display: flex;
	padding: 0 10px;
}


.lesson-title-wrp .teacher-lang-icon li {
	width: 45px;
	margin: 0 5px;
}

.lesson-detail .lesson-icon-list {
	margin: 2em 0 0;
}

@media screen and (max-width:767px) {
	.lesson-detail .lesson-icon-list .ex {
		width: fit-content;
		margin-right: 1em;
	}
}

.lesson-detail .lesson-icon-list .ex span {
	display: inline-block;
	width: fit-content;
	background-color: #e6a701;
	font-size: min(1.2rem, 3vw);
	color: #fff !important;
	font-weight: 600;
	padding: .5em 1em;
	border-radius: 2px 14px 14px 2px;
}

.lesson-detail .text-bubble {
	width: 60%;
	display: block;
	margin-bottom: .5em;
	rotate: -5deg;
}

.lesson-detail .text-craft {
	width: 18%;
	display: block;
	margin-bottom: .5em;
	rotate: 4deg;
	position: absolute;
	top: 18%;
	left: 25%;
	z-index: 2;
}

.lesson-detail .text-craft img {
	border-radius: 0 !important;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width:767px) {
	.lesson-detail .text-craft {
		/* top: 5%;
		left: -8%; */
		top: 24%;
		left: unset;
		right: 2%;
		width: 38%;
	}
}

.baby-lesson-title {
	font-size: min(2.7rem, 7vw);
	margin-bottom: .5em;
	color: var(--grade-color);
}

.baby-lesson-lead {
	font-size: min(2rem, 4vw);
	line-height: 1.6;
	margin-bottom: 1em;
}

.baby-lesson-illust {
	display: block;
	width: 90%;
	margin: 0 auto;
}

@media screen and (max-width:767px) {
	.baby-lesson-illust {
		width: 60%;
		margin: 0 auto 1em;
	}

}

.baby-lesson-icon {
	max-width: 620px;
	padding: 0 1em;
	display: flex;
	flex-wrap: wrap;
	gap: 4%;
}

@media screen and (max-width:767px) {
	.baby-lesson-icon {
		justify-content: space-between;
		gap: 3%;
	}
}

.baby-lesson-icon .lesson-icon {
	display: block;
	width: 13%;
	margin-bottom: 2%;
}

@media screen and (max-width:767px) {
	.baby-lesson-icon .lesson-icon {
		width: 18%;
	}
}

.teaching-set-wrp {
	/* 	margin-bottom: min(6em, 7vw); */
	margin: 0 0 min(80px, 12vw);
	padding: 0 0 min(80px, 12vw);
	border-bottom: solid 1px var(--lesson-color);
	text-align: center;
}

.teaching-set-wrp .box {
	width: 48%;
	position: relative;
}

@media screen and (max-width:767px) {
	.teaching-set-wrp .box {
		width: min(500px, 100%);
		margin: 1em auto;

	}
}

/* baby teaching set image box */
.teaching-set-wrp .teaching-img-box {
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
}

@media screen and (max-width:767px) {
	.teaching-set-wrp .teaching-img-box {
		width: 100%;
		border-radius: 20px;
		overflow: hidden;
	}
}

.teaching-set-wrp .craft-books {
	position: absolute;
	top: -40%;
	left: -15%;
	width: 48%;
	transform: rotate(-5deg);
}

@media screen and (max-width:767px) {
	.teaching-set-wrp .craft-books {
		position: absolute;
		top: -10%;
		left: -10%;
		width: 52%;
		transform: rotate(-5deg);
	}

	.teaching-img-box-sp-mtop {
		margin-top: 5em;
	}
}

.teaching-set-wrp .box figcaption {
	display: block;
	font-size: min(1.3rem, 3vw);
	padding: .5em;
	text-align: right;
}

.teaching-set-illust {
	display: block;
	width: 180px;
	margin: -5em auto 1.5em;
}

@media screen and (max-width:767px) {
	.teaching-set-illust {
		width: 50%;
		margin: -3em auto 1.5em;
	}
}

.teaching-title {
	display: block;
	width: fit-content;
	padding: .5em min(2em, 3vw);
	font-size: min(2.4rem, 4.5vw);
	line-height: 1.6;
	margin: .75em auto;
	color: var(--lesson-color);
	position: relative;
}

.teaching-title::before,
.teaching-title::after {
	content: '';
	width: 0;
	height: 100%;
	position: absolute;
	bottom: -2%;
	border-left: 2px solid var(--lesson-color);
}

.teaching-title::before {
	left: 0;
	transform: rotate(-33deg);
}

.teaching-title::after {
	right: 0;
	transform: rotate(33deg);
}

.teaching-title-set {
	display: block;
	width: fit-content;
	padding: .5em 2em;
	border-radius: 3em;
	font-size: min(2rem, 4vw);
	margin: 0 auto 2em;
	color: #fff;
	background-color: var(--lesson-color);
}

.teaching-set-wrp .box {
	position: relative;
}

.teaching-set-wrp .box .pop {
	margin-bottom: 1.75em;
	padding: 1em;
	position: absolute;
	bottom: 40%;
	left: 28%;
	font-weight: bold;
	font-size: min(1.6rem, 3.2vw);
	line-height: 1.5;
	z-index: 1;
	color: var(--lesson-color);
	background-color: #fff;
	border: solid 2px;
	border-radius: 1rem;
	transform: translateX(-50%);
}

@media screen and (max-width:640px) {
	.teaching-set-wrp .box .pop {
		padding: .75em;
	}
}

.teaching-set-wrp .box .pop .note {
	display: block;
	margin-top: .5em;
	font-size: .75em;
}

.teaching-set-wrp .box .pop::before,
.teaching-set-wrp .box .pop::after {
	content: '';
	width: 1.5em;
	height: 1.5em;
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	background-color: var(--lesson-color);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.teaching-set-wrp .box .pop::after {
	background-color: #fff;
	margin-top: -4px;
}

.material-list-wrp {
	margin-top: 3.5em;
	padding: 3em 2em;
	/* background-color: color-mix(in srgb, var(--lesson-color) 15%, #fff); */
	background-color: #f7f8f3;
	border-radius: 1rem;
}

@media screen and (max-width:640px) {
	.material-list-wrp {
		padding: 2em 1em;
	}
}

.material-list-wrp .material-list-title {
	width: max-content;
	margin: 0 auto;
	padding-bottom: .5em;
	border-bottom: solid 1px;
	color: var(--lesson-color);
	font-size: min(2rem, 4vw);
}

.material-list {
	margin-top: 2em;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5em 3em;
}

.material-list li {
	font-size: min(1.6rem, 3.3vw);
	line-height: 1.8;
}

.material-list li::before {
	content: '';
	display: inline-block;
	width: .6em;
	height: .6em;
	margin-right: .3em;
	background-color: var(--lesson-color);
	vertical-align: .1em;
	border-radius: 100%;
}

/* baby accordion */
.sample-text-btn {
	display: block;
	width: fit-content;
	margin: 2em auto 0;
	padding: .5em 3em;
	background-color: var(--lesson-color);
	border-radius: 3em;
	color: #fff;
	font-size: min(1.5rem, 4vw);
	cursor: pointer;
	position: relative;
}

.sample-text-btn.on {
	opacity: .5;
}

.sample-text-btn .accordion-btn {
	display: block;
	width: 1em;
	height: 1em;
	position: absolute;
	top: 50%;
	right: 1em;
	transform: translateY(-50%);
	transition: all;
}

.sample-text-btn .accordion-btn::before {
	content: '';
	width: 100%;
	height: 0;
	border-top: 2px solid;
	position: absolute;
	top: calc(50% - 1px);
	left: 0;
	transition: all;
}

.accordion-btn::after {
	content: '';
	height: 100%;
	width: 0;
	border-left: 2px solid;
	position: absolute;
	left: calc(50% - 1px);
	top: 0;
	transition: all;
}

.sample-text-btn.on .accordion-btn::after,
.sample-text-btn.on .accordion-btn::before {
	transform: rotate(90deg);
}

.sample-text-btn.on .accordion-btn::before {
	opacity: 0;
}

.sample-text-list {
	width: 100%;
	display: none;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 1em;
}

.sample-text-list.on {
	display: flex;
}

.sample-text-list .note {
	margin-top: 0;
}

.sample-text-title-wrp {
	width: 100%;
	margin: min(5em, 10vw) auto;
}

.sample-text-title {
	width: fit-content;
	font-size: min(2.2rem, 4vw);
	padding: 0 2em;
	position: relative;
	margin: 0 auto;
}

.sample-text-title::before,
.sample-text-title::after {
	content: '';
	width: 0;
	height: 100%;
	position: absolute;
	bottom: -2%;
	border-left: 2px solid;
}

.sample-text-title::before {
	left: 0;
	transform: rotate(-33deg);
}

.sample-text-title::after {
	right: 0;
	transform: rotate(33deg);
}

.sample-text-list .text-sample {
	width: 45%;
	margin-bottom: 5em;
	position: relative;
}

@media screen and (max-width:767px) {
	.sample-text-list .text-sample {
		width: 100%;
		margin: 1em auto;
	}
}

.sample-text-list .text-sample .title-wrp {
	display: flex;
	width: 100%;
	position: relative;
	margin-bottom: .5em;
}

.sample-text-list .month {
	font-size: min(1.6rem, 3.5vw);
	background-color: var(--grade_textcolor-baby);
	color: #fff;
	padding: .25em .5em;
	border-radius: 5px;
	z-index: 3;
	margin-right: 1em;
}

.sample-text-list .month.all {
	background-color: #58afd5;
}

.sample-text-list .text-sample .title {
	font-size: min(2rem, 4vw);
	margin: 0;
	padding: 0;
}

.sample-text-list .sample-img {
	width: 100%;
	position: relative;
	margin: 0 auto 2em;
	padding: 3em;
	background-color: #f7f8f0;
	border-radius: 5px;
}

.sample-img .sample-img-cover {
	position: absolute;
	top: 6%;
	right: 4%;
	width: 30%;
	z-index: 2;
}

.sample-img.all .sample-img-cover {
	width: 34%;
}

.sample-img .sample-img-page {
	padding-right: 15%;
	padding-left: 0;
	padding-bottom: 1em;
	aspect-ratio: 4.5/3;
}

.sample-img.july .sample-img-page {
	padding-right: 24%;
	padding-left: 0;
	padding-top: 0;
}

.sample-img.all .sample-img-page {
	padding-right: 5%;
	padding-left: 0;
	padding-top: 2em;
}

.sample-img .sample-img-pages {
	width: 48%;
}

.sample-text-list .sample-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.3));
}

.lesson-icon-list {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
}

.lesson-icon-list li {
	width: 15%;
}

/* .lesson-icon-list li.text-name {
	width: 100%;
	text-align: left;
	font-size: min(1.4rem, 3vw);
	line-height: 1.5;
	position: absolute;
	bottom: 1em;
	left: 1em;
} */
.sample-img .caption {
	width: 100%;
	text-align: left;
	font-size: min(1.2rem, 3vw);
	line-height: 1.4;
	position: absolute;
	bottom: 1em;
	left: 1.5em;
}


/* promotion */
.teaching-set-wrp .promotion {
	width: min(800px, 100%);
	margin: 6em auto 0;
}

@media screen and (max-width:700px) {
	.teaching-set-wrp .promotion {
		width: min(400px, 100%);
		margin: 4em auto 0;
	}
}

/* .teaching-set-wrp .promotion {
    width: min(640px, 100%);
    margin: 6em auto 0;
    padding: 3em 1em;
    display: grid;
    grid-template-areas: 'hd lead' 'hd txt' 'hd note';
    grid-template-columns: auto 1fr;
    align-items: center;
    color: #fff;
    background-color: var(--grade-color);
    text-align: center;
	letter-spacing: .1em;
    position: relative;
}

.promotion-hd {
    grid-area: hd;
	font-size: min(1.6rem, 3.4vw);
    width: 6em;
    height: 6em;
    margin: 0 1em;
    display: grid;
    place-content: center;
    background-color: #fff;
    color: var(--grade-color);
    font-weight: bold;
    border-radius: 100%;
}

.promotion-lead {
    grid-area: lead;
	font-size: min(1.8rem, 3.2vw);
}

.promotion-maintxt {
    grid-area: txt;
    margin-top: .5em;
	font-size: min(2rem, 4vw);
	font-weight: bold;
}

.promotion-maintxt .em1 {
	font-size: 1.4em;
}

.promotion-maintxt .em2{
	font-size: 1.6em;
}

.promotion-note {
    grid-area: note;
    margin-top: 1.5em;
	font-size: min(1.3rem, 3.1vw);
} */