@charset "UTF-8";


.common_index-link {
	display: flex;
	max-width: clamp(13.438rem, -3.405rem + 35.09vw, 19.688rem);
	margin: 0 auto;
	padding: 13px clamp(0.625rem, -1.059rem + 3.51vw, 1.25rem);
	border-width: 2px;
	border-style: solid;
	color: #ffffff;
	font-weight: bold;
	font-size: 14px;
	letter-spacing: 0.05em;
	column-gap: 5px;
	justify-content: center;
	align-items: center;
}

.common_index-link:hover {
	transition: all 0.6s;
	transition-delay: 0s;
}

.common_index-link i {
	font-size: 15px;
}



/*******************************************************************************
	キービジュアル
 *******************************************************************************/
.visual_container {
	display: block;
	position: relative;

/*max-width: 1920px;*/
	width: 100%;
	max-height: 1080px;
	margin: 0 auto;
}
.visual_main {
	display: block;
	width: 100%;
	height: 100svh;
}
.visual_img {
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center top;
}
.visual_contents {
	display: flex;
	position: absolute;
	bottom: clamp(1.875rem, 3.91vw, 4.688rem);
	left: clamp(2.813rem, 2.604rem + 0.43vw, 3.125rem);
	flex-direction: column;

	row-gap: 15px;
}

.visual_contents img {
	max-width: clamp(16.313rem, 2.979rem + 27.78vw, 36.313rem);
	width: 100%;
}

.visual_contents figcaption {
	display: flex;
	color: #ffffff;
	flex-direction: column;

	row-gap: 25px;
}

.visual_contents strong {
	font-size: clamp(1.25rem, -0.042rem + 2.69vw, 3.188rem);
}

.visual_contents p {
	font-weight: 500;
	font-size: clamp(0.938rem, 0.479rem + 0.95vw, 1.625rem);
	line-height: clamp(1.563rem, 0.938rem + 1.3vw, 2.5rem);
}
@media screen and (min-width: 768px) {
	.visual_container {
		height: 100svh;
		margin-bottom: 80px;
	}
	.visual_container .visual_main {
		max-height: 1080px;
	}

	@media screen and (min-width: 783px) {
		.admin-bar .visual_container , .admin-bar .visual_main {
			max-height: calc(1080px - 32px);
		}
	}

	@media screen and (max-width: 782px) {
		.admin-bar .visual_container , .admin-bar .visual_main {
			max-height: calc(1080px - 46px);
		}
	}
	.visual_contents {
		left: clamp(1.875rem, 1.042rem + 1.74vw, 3.125rem);
	}
	.visual_contents figcaption {
		row-gap: 25px;
	}
}

@media screen and (max-width: 767px) {
	.visual_container {
		margin-bottom: 40px;
		padding-top: 60px;
	}
	/*.visual_container {
		height: 100svh;
	}*/

	.admin-bar .visual_container , .admin-bar .visual_main {
		/*max-height: 1034px;
		height: calc(100svh - 46px);*/
	}.visual_main {
		height: 700px;
	}.visual_main img {
		height: 700px;
	}
	.visual_contents {
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100% - 60px);
		height: 100%;
		padding-top: 95px;
		padding-bottom: 30px;
		justify-content: space-between;
	}
	.visual_contents img {
		margin: 0 auto;
	}
	.visual_contents figcaption {
		row-gap: 10px;
	}
}



/*******************************************************************************
	スライドショー
 *******************************************************************************/
.index_slide-container {
	position: relative;
	width: 100%;
	line-height: 1;
}

.slick-slide {
	margin: 0 7.5px;
}

.index_slide-item {
	max-width: 555px;
	width: 100%;

	aspect-ratio: 37/24;
}

.index_slide-item img {
	width: 100%;

	aspect-ratio: 37/24;
}




.main_container {
	position: relative;
	z-index: 6;
	padding-top: 0;
}
@media screen and (min-width: 768px) {
	.main_container {
		padding-top: 135px;
	}
}
@media screen and (max-width: 767px) {
	.main_container {
		padding-top: 50px;
	}
}


.main_container::before {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 10000px;
	background-image: url(../images/index_bg.png);
	background-repeat: repeat;
	background-position: center top;
	background-size: 1950px 6090px;
	content: "";
}
/*
@media screen and (min-width: 768px) {
	.main_container {
		padding-bottom: 100px;
	}
}
@media screen and (max-width: 767px) {
	.main_container {
		padding-bottom: 50px;
	}
}*/

/*******************************************************************************
	３つのポイント
 *******************************************************************************/
.index_about-container {
	position: relative;
	width: 100%;
}

.index_about-title {
	display: flex;
	overflow: hidden;
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	color: #25425c;
	text-align: center;
	flex-direction: column;
	align-items: center;
}
@media screen and (min-width: 501px) {
	.index_about-title br {
		display: none;
	}
}

.index_about-title span:lang(en) {
	font-weight: 500;
	font-size: clamp(0.938rem, 0.851rem + 0.18vw, 1rem);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.index_about-title strong {
	display: flex;
	font-weight: 700;
	font-size: clamp(1.75rem, 0.71rem + 2.17vw, 2.5rem);
	white-space: nowrap;
	column-gap: clamp(0.313rem, -0.121rem + 0.9vw, 0.625rem);
	justify-content: center;
	align-items: center;
}

.index_about-title strong::before , .index_about-title strong::after {
	display: block;
	width: 200px;
	height: 1px;
	background-color: #25425c;
	content: "";
}
.index_feature-list {
	display: flex;
	width: 100%;
	flex-direction: column;
	counter-reset: number;
}

.index_feature-item {
	display: block;
	position: relative;
	width: 100%;
	border-bottom: 1px solid #e6e6e6;
}
.index_feature-item::after {
	position: absolute;
	right: 20px;
	bottom: -10px;
	z-index: -1;
	transform: rotateZ(-3deg);
	color: #e9ecef;
	font-weight: 500;
	font-size: 140px;
	letter-spacing: 0.08em;
}

.index_feature-title {
	display: flex;
	color: #25425c;
	font-size: clamp(1.125rem, 0.605rem + 1.08vw, 1.5rem);
	flex-direction: column;
	align-items: center;
}

.index_feature-title span:lang(en) {
	margin-bottom: 0.5em;
	border-bottom: 1px solid;
	color: #800020;
	font-weight: 500;
	font-size: clamp(0.75rem, 0.577rem + 0.36vw, 0.875rem);
	line-height: 1.13;
	letter-spacing: 0.08em;
}

.index_feature-title span:lang(en)::after {
	font-size: clamp(1.25rem, 0.99rem + 0.54vw, 1.438rem);
	content: counter(number);
	counter-increment: number;
}
.index_feature-text {
	font-weight: 500;
	font-size: clamp(0.875rem, 0.788rem + 0.18vw, 0.938rem);
	line-height: clamp(1.688rem, 1.428rem + 0.54vw, 1.875rem);
	text-align: center;
}

.index_feature-suggest {
	display: flex;
	max-width: 1255px;
	width: 95%;
	margin: 0 auto;
	font-weight: 500;
	column-gap: 5px;
	flex-wrap: wrap;
	justify-content: space-between;

	row-gap: 5px;
}
.index_feature-suggest li {
	display: flex;
	position: relative;
	max-width: 390px;
	width: 32.5%;
	margin-bottom: clamp(1.25rem, -0.483rem + 3.61vw, 2.5rem);
	padding: clamp(1.188rem, -1.195rem + 4.96vw, 2.906rem) 0;
	border: 1px solid #707070;
	background-color: #f0f0f0;
	font-size: clamp(0.813rem, 0.206rem + 1.26vw, 1.25rem);
	line-height: clamp(1.563rem, 0.696rem + 1.81vw, 2.188rem);
	text-align: center;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.index_feature-suggest li::before , .index_feature-suggest li::after {
	position: absolute;
	top: calc(100% - 1px);
	content: "";

	clip-path: polygon(0 0, 50% 100%, 100% 0);
	aspect-ratio: 7/4;
}

.index_feature-suggest li::before {
	z-index: -1;
	min-height: clamp(1.25rem, -0.483rem + 3.61vw, 2.5rem);
	background-color: #707070;
}

.index_feature-suggest li::after {
	min-height: calc(clamp(1.25rem, -0.483rem + 3.61vw, 2.5rem) - 1px);
	background-color: #f0f0f0;
}
.index_charm-list {
	display: flex;
	max-width: 1255px;
	margin: 0 auto;
	flex-wrap: wrap;
	justify-content: space-between;
	counter-reset: charm;

	row-gap: 15px;
}
.index_charm-item {
	position: relative;
	max-width: 300px;
	padding-top: clamp(0.938rem, 0.195rem + 3.17vw, 2.813rem);
	padding-left: 5px;
}

.index_charm-item::before {
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	min-width: clamp(1.875rem, 1.009rem + 3.7vw, 4.063rem);
	border: 2px solid #25425c;
	border-radius: 100%;
	background-color: #ffffff;
	font-weight: bold;
	font-size: clamp(0.938rem, 0.625rem + 1.33vw, 1.875rem);
	justify-content: center;
	align-items: center;
	content: counter(charm, decimal-leading-zero);
	counter-increment: charm;

	aspect-ratio: 1/1;
}
.index_charm-contents {
	display: flex;
	max-width: 295px;
	width: 100%;
	padding: clamp(0.688rem, -0.439rem + 4.8vw, 3.531rem) 0;
	border: 1px solid #25425c;
	background-color: #deecff;
	font-weight: bold;
	font-size: clamp(0.938rem, 0.682rem + 1.09vw, 1.875rem);
	line-height: clamp(1.563rem, 1.307rem + 1.09vw, 2.5rem);
	text-align: center;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	row-gap: clamp(0.625rem, 0.501rem + 0.53vw, 0.938rem);
}

@media screen and (min-width: 835px) {
	.index_charm-item {
		width: 23.9043%;
	}
}
@media screen and (max-width: 834px) {
	.index_feature-list {
		max-width: 620px;
		margin: 0 auto;
	}
	.index_charm-item {
		width: calc(50% - 5px);
	}
}

.index_charm-contents img {
	max-width: clamp(3.125rem, 1.888rem + 5.28vw, 6.25rem);
	min-width: 50px;
	width: 100%;
}

@media screen and (min-width: 768px) {
	.index_about-title {
		margin-bottom: 95px;
	}
	#index_feature-first {
		padding-bottom: 115px;
	}
	#index_feature-first::after {
		content: "ABOUT";
	}
	#index_feature-first .index_feature-title {
		margin-bottom: 20px;
	}
	#index_feature-second {
		padding-top: 80px;
		padding-bottom: 140px;
	}
	#index_feature-second::after {
		content: "FOR YOU";
	}
	#index_feature-second .index_feature-title {
		margin-bottom: 30px;
	}
	#index_feature-third {
		padding-top: 55px;
		padding-bottom: 180px;
	}
	#index_feature-third::after {
		content: "CHARM";
	}
	#index_feature-third .index_feature-title {
		margin-bottom: 25px;
	}
	#index_feature-third .index_feature-text {
		margin-bottom: 45px;
	}
	.index_feature-text {
		text-align: center;
	}
	.index_feature-suggest {
		width: 95%;
	}
	.index_feature-suggest li {
		width: 32.5%;
	}
	.index_charm-list {
		width: 95%;
	}
}
@media screen and (max-width: 767px) {
	.index_about-title {
		margin-bottom: 30px;
	}
	#index_feature-first {
		padding-bottom: 45px;
	}
	#index_feature-first .index_feature-title {
		margin-bottom: 25px;
	}
	#index_feature-second {
		padding-top: 30px;
		padding-bottom: 45px;
	}
	#index_feature-second .index_feature-title {
		margin-bottom: 35px;
	}
	#index_feature-third {
		padding-top: 40px;
		padding-bottom: 45px;
	}
	#index_feature-third .index_feature-title {
		margin-bottom: 20px;
	}
	.index_feature-text {
		padding: 0 30px;
		text-align: justify;
	}
	.index_feature-text br {
		display: none;
	}
	#index_feature-third .index_feature-text {
		margin-bottom: 30px;
	}
	.index_feature-suggest {
		width: 100%;
		padding: 0 10px;
	}
	.index_feature-suggest li {
		width: calc(50% - 2.5px);
	}
	.index_feature-suggest li:nth-of-type(1) {
		margin: 0 clamp(5.625rem, -0.234rem + 25vw, 11.75rem) 20px;
	}
	.index_charm-list {
		width: 100%;
		padding: 0 25px;
		column-gap: 10px;
	}
}









/*******************************************************************************
	料金プラン
 *******************************************************************************/
.index_rates-container {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	background-color: rgba(37, 66, 92, 0.1);
	background-repeat: no-repeat;
}

.index_rates-container h2 {
	margin-bottom: 15px;
}


.index_rates-container > p {
	color: #25425c;
	font-weight: 500;
	font-size: 15px;
	line-height: 30px;
	text-align: center;
}

.index_rates-container > p span {
	border-bottom: 1px solid;
	font-size: 15px;
}

.index_rates-container > p span strong {
	font-weight: bold;
	font-size: 23px;
}

.index_rates-link {
	border-color: #25425c;
	background-color: #25425c;
}

.index_rates-link:hover {
	background-color: #ffffff;
	color: #25425c;
}

@media screen and (min-width: 768px) {
	.index_rates-container {
		padding: 100px 0;
	}

	.index_rates-container > p {
		margin-bottom: 35px;
	}

	.index_rates-container .rates-list {
		margin-bottom: 65px;
	}
}

@media screen and (max-width: 767px) {
	.index_rates-container {
		padding: 50px 0 55px;
	}

	.index_rates-container > p {
		margin-bottom: 15px;
		padding: 0 50px;
	}

	.index_rates-container .rates-list {
		margin-bottom: 50px;
	}
}


/*******************************************************************************
	案内
 *******************************************************************************/
.index_guide-container {
	display: flex;
	width: 100%;
	margin: 0 auto;
}
.index_guide-list {
	display: flex;
	max-width: 595px;
	width: 100%;
	margin: 0 auto;
	flex-direction: column;

	row-gap: 50px;
}
.index_guide-item {
	display: block;
	width: 100%;
}

.index_guide-contents {
	display: flex;
	width: 100%;
	border: 1px solid #25425c;
	text-align: center;
	flex-direction: column;
}

.index_guide-contents dt {
	display: flex;
	padding: 10.5px 0;
	color: #ffffff;
	font-weight: bold;
	font-size: 20px;
	justify-content: center;
	align-items: center;
}

#guide_contact .index_guide-contents dt {
	background-color: #25425c;
}

#guide_trial .index_guide-contents dt {
	background-color: #9a7e20;
}
.index_guide-contents dd {
	display: flex;
	padding: 10px 0 25px;
	font-weight: 500;
	font-size: clamp(1.25rem, 0.071rem + 2.46vw, 1.688rem);
	flex-direction: column;

	row-gap: 25px;
}

.index_guide-contents dd p {
	font-weight: 500;
}

.index_guide-contents dd p span {
	color: #9a7e20;
}
.index_guide-contents dd a {
	width: clamp(17.188rem, 10.451rem + 14.04vw, 19.688rem);
}

#guide_contact a {
	background-color: #25425c;
}

#guide_trial a {
	background-color: #800020;
}

#guide_contact a:hover {
	background-color: #ffffff;
	color: #25425c;
}

#guide_trial a:hover {
	background-color: #ffffff;
	color: #800020;
}

@media screen and (min-width: 768px) {
	.index_guide-container {
		padding: 100px 20px 120px;
	}
	.index_guide-list {
		row-gap: 50px;
	}
	.index_guide-contents dd {
		padding: 20px 0 25px;
	}
}
@media screen and (max-width: 767px) {
	.index_guide-container {
		padding: 65px 20px 55px;
	}
	.index_guide-list {
		row-gap: 25px;
	}
	.index_guide-contents dd {
		padding: 25px 0;
	}
}




/*******************************************************************************
	お知らせ
 *******************************************************************************/
.index_news-container {
	display: block;
	position: relative;
	max-width: 1920px;
	width: 100%;
	margin: 0 auto;
	background-color: rgba(37, 66, 92, 0.1);
}
.index_news-link {
	background-color: #25425c;
}
.index_news-link:hover {
	background-color: #ffffff;
	color: #25425c;
}
@media screen and (min-width: 768px) {
	.index_news-container {
		padding: 90px 0 55px;
	}
	.index_news-container h2 {
		margin-bottom: 30px;
	}

	.archive_news-nav {
		margin-bottom: 25px;
	}
	.archive_news-list {
		background-color: #ffffff;
	}
}

@media screen and (max-width: 767px) {
	.index_news-container {
		padding: 35px 0 50px;
	}
	.index_news-container h2 {
		margin-bottom: 15px;
	}

	.archive_news-nav {
		margin-bottom: 20px;
	}

	.archive_news-list {
		padding: 20px 0 25px;

/*border-top: 1px solid #d8d8d8;
		border-bottom: 1px solid #d8d8d8;*/
		flex-direction: column;
	}

	.archive_news-nav {
		position: relative;
	}


	.index_news-container a {
		position: relative;
	}

	.index_news-link {
		border-color: #25425c;
		background-color: #25425c;
	}

	.index_news-link:hover {
		background-color: #ffffff;
		color: #25425c;
	}.archive_news-item {
		max-width: none;
		width: 100%;
		padding: 0 10px;
		padding-bottom: 20px;
		border-bottom: 1px solid #d8d8d8;
	}	.archive_news-status {
		margin-bottom: 5px;
	}
	.archive_news-img , .archive_news-status ul , .archive_news-text {
		display: none;
	}
	.archive_news-detail > a {
		display: block;
	}




	@media screen and (min-width: 501px) {
		.archive_news-nav {
			max-width: 660px;
		}
	}

	@media screen and (max-width: 500px) {
		.archive_news-nav {
			max-width: 450px;
		}
	}

	.hot_news {
		left: -10px;
	}
}



/*******************************************************************************
	よくある質問
 *******************************************************************************/
.index_faq-container {
	padding: 130px 0 100px;
}

.index_faq-container .common_page-title {
	margin-bottom: 45px;
}
.faq-list {
	max-width: 1000px;
	width: 95%;
	margin: 0 auto;
	border-top: 1px solid;
	border-bottom: 1px solid;
}

.list-contents_container {
	display: flex;
	padding: clamp(1.156rem, -1.117rem + 4.74vw, 2rem) clamp(0.625rem, -5.27rem + 12.28vw, 2.813rem) clamp(1.156rem, -1.117rem + 4.74vw, 2rem) clamp(1.25rem, -2.118rem + 7.02vw, 2.5rem);
	background-color: #ffffff;
	justify-content: space-between;
	align-items: center;
}

.list-contents_container.question_container {
	visibility: hidden;
	column-gap: 10px;
	cursor: pointer;
}

.list-contents_container.show_content {
	visibility: visible;
}

.list-contents_container.question_container:not(:nth-of-type(1)) {
	border-top: 1px solid;
}

.list-contents_container.question_container:hover {
	opacity: 0.7;
}

.list-contents_container.answer_container {
	position: relative;
	z-index: 1;
	margin-top: -5px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	background-color: #efefef;
}



.flex_wrap {
	width: 100%;
}

.contents-change_wrap {
	display: flex;
	column-gap: clamp(0.938rem, -4.957rem + 12.28vw, 3.125rem);
}
.contents-change_wrap.question {
	align-items: baseline;
}
.contents-change_wrap.answer {
	align-items: baseline;
}

.icon_wrap {
	display: flex;
	position: relative;
	font-weight: 500;
	font-size: clamp(1.25rem, -1.276rem + 5.26vw, 2.188rem);
	justify-content: center;
}


.question_container p.faq-text {
	font-weight: var(--Bold);
	font-size: clamp(1rem, -0.853rem + 3.86vw, 1.688rem);
}

.answer_container p.faq-text {
	font-weight: var(--Medium);
	font-size: clamp(0.875rem, -0.136rem + 2.11vw, 1.25rem);
	line-height: clamp(1.625rem, -0.733rem + 4.91vw, 2.5rem);
}
.faq-list i {
	font-size: clamp(0.625rem, -1.059rem + 3.51vw, 1.25rem);
	transition: all 0.3s;
}


.list-contents_container.open i {
	transform: rotate(180deg);
}

/*.one_i {
	display: block;
	position: relative;
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transform-origin: center center;
	width: clamp(1.563rem, 0.72rem + 1.75vw, 1.875rem);
	transition-duration: 0.2s;

	aspect-ratio: 1/1;
}*/

/*.list-contents_container.open .one_i {
	transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
}

/*.one_i::before , .one_i::after {
	display: flex;
	position: absolute;
	top: 15px;
	left: 0;
	transform: rotate(0deg);
	transform-origin: center center;
	width: 32px;
	height: 3px;
	background-color: #ff9f40;
	content: "";
}

.list-contents_container.open .one_i::before {
	content: none;
}

.one_i::before {
	top: 0;
	left: 15px;
	width: 3px;
	height: 32px;
}

.list-contents_container.open .one_i::after {
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
}*/

@media screen and (max-width: 767px) {
	.index_faq-container {
		padding: 40px 0 110px;
	}
	.index_faq-container .common_page-title {
		margin-bottom: 20px;
	}
	.main-content.q_a-wrapper {
		margin-bottom: 45px;
	}

	.faq-list {
		width: 100%;
		padding: 0 20px;
		border-bottom: 1px solid;
	}

	.one_i {
		width: 20px;
		height: 20px;
	}

	.one_i::before , .one_i::after {
		top: 9px;
		width: 20px;
		height: 2px;
	}

	.one_i::before {
		top: 0;
		left: 9px;
		width: 2px;
		height: 20px;
	}
}

@media screen and (max-width: 600px) {
	p.faq-text {
		max-width: 100%;
	}
}



/*******************************************************************************
	エクストラ
 *******************************************************************************/
.index_lesson-container {
	position: relative;
	max-width: 1920px;
	width: 100%;
	margin: 0 auto;
}

.index_lesson-container::before {
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background-repeat: no-repeat;
	content: "";
}

.index_gray-link {
	border: 2px solid #b9b9b9;
	background-color: #b9b9b9;
	transition: all 0.6s;
}

.index_gray-link:hover {
	color: #b9b9b9;
}

.index_lesson-contents {
	display: flex;
	position: relative;
	margin: 0 auto;
	column-gap: 10px;
}

.index_lesson-img {
	position: relative;
	max-width: 670px;

	aspect-ratio: 67/37;
}

.lesson_link-img {
	display: block;
	width: 100%;

	clip-path: polygon(9.7% 0%, 100% 0%, 90.3% 100%, 0% 100%);
}

.index_lesson-img img.lesson_img-move {
	position: absolute;
	z-index: 5;
}

.index_lesson-img img:not(.lesson_img-move) {
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100%;
	background-color: blue;

	object-fit: cover;
	object-position: center;
}

.coming_link a {
	position: relative;
	pointer-events: none;
}

.coming_link a.lesson_link-img::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background-color: #8f9690;
	opacity: 0.96;
	content: "";

	mix-blend-mode: multiply;
}

.coming_link a.lesson_link-img::after {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 41px;
	background-image: url(../images/coming_link-img.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	content: "";
}

.index_lesson-details {
	display: flex;
	max-width: 420px;
	padding-right: clamp(0rem, -6.17rem + 12.85vw, 3.125rem);
	padding-bottom: clamp(0rem, -7.404rem + 15.42vw, 3.75rem);
	flex-direction: column;
	justify-content: space-between;
}

.index_lesson-details h3 {
	font-weight: bold;
	font-size: 32px;
	line-height: 50px;
}

.index_lesson-details p {
	font-weight: 500;
	font-size: clamp(0.875rem, 0.628rem + 0.51vw, 1rem);
	line-height: clamp(1.75rem, 1.503rem + 0.51vw, 1.875rem);
	text-align: justify;
}

.index_lesson-contents:not(.coming_link) .index_lesson-details p br {
	display: none;
}

.index_lesson-details a {
	max-width: 315px;
	width: 100%;
	margin-right: 0;
}

@media screen and (min-width: 768px) {
	.index_lesson-container::before {
		width: 1920px;
		height: 585px;
		background-image: url(../images/index_lesson-bg.webp);
		background-size: 1920px 585px;
	}

	.index_lesson-container h2 {
		margin-bottom: 50px;
	}

	.index_lesson-contents {
		max-width: 1100px;
		width: 95%;
	}

	.index_lesson-img {
		width: 61%;
	}

	.index_lesson-img img.lesson_img-move {
		top: 51.3514%;
		right: 82.8359%;
		width: 169px;
	}

	.index_lesson-details {
		width: calc(100% - 61% - 10px);
	}

	.index_lesson-details h3 {
		display: flex;
		margin-bottom: 20px;
		flex-direction: column;
	}

	.index_lesson-details h3 span {
		display: inline-block;
		position: relative;
		width: fit-content;
	}

	.index_lesson-details h3 span::after {
		display: block;
		position: absolute;
		top: calc(100% - 2px);
		left: 0;
		width: 100%;
		height: 3px;
		background: linear-gradient(to right, #11b95e 0%, #9ced69 100%);
		content: "";
	}
}

@media screen and (max-width: 767px) {
	.index_lesson-container {
		padding: 0 20px;
		padding-top: 30px;
	}

	.index_lesson-container::before {
		width: 600px;
		height: 514px;
		background-image: url(../images/index_lesson-bgmb.webp);
		background-size: 600px 514px;
	}

	.index_lesson-container h2 {
		margin-bottom: 25px;
	}

	.index_lesson-contents {
		max-width: 670px;
		width: 100%;
		flex-direction: column;

		row-gap: 60px;
	}

	.index_lesson-img {
		width: 100%;
	}

	.index_lesson-img img.lesson_img-move {
		right: 70.1493%;
		bottom: 83.7838%;
		width: 110px;
	}


	.lesson_link-move {
		position: absolute !important;
		top: 89.1892%;
		right: 0;
		width: 100%;
		padding: 5px 10px;
	}

	.index_lesson-details {
		width: 100%;
		padding: 0 10px;
	}

	.index_lesson-details h3 {
		margin-bottom: 15px;
	}
}