@charset "utf-8";

/* -----------------------------------------------------------
        ttl
-------------------------------------------------------------- */

/*共通*/
.ttl-block {
	margin: 0 0 40px;
}

.ttl-block .en {
	font-family: var(--en);
	font-size: 6.0rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .3rem;
}

.ttl-block .jp {
	font-size: 2.4rem;
	font-family: var(--mincho);
	line-height: 1.5;
	margin: 5px 0 0;
}

@media screen and (max-width: 768px) {
	.ttl-block {
		margin: 0 0 20px;
	}

	.ttl-block .en {
		font-size: 3.6rem;
	}

	.ttl-block .jp {
		font-size: 2.0rem;
		margin: 5px 0 0;
	}

}

/* -----------------------------
	共通
-------------------------------- */
.h1-area {
	top: 620px;
	right: initial;
	z-index: 1;
	border-bottom: none;
	/*min-width: 1200px;*/
	left: 6%;
}

.h1-area h1 {
	color: #aaa;
	
}

@media screen and (max-width: 768px){
	.h1-area {
		top: 550px;
		right: initial;
		left: 20px;
		z-index: 1;
		text-align: left;
	}
}

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

.mv-area {
	min-height: 900px;
	height: 100vh;
	position: relative;
	background: url("../img/top-mv-pc.jpg") right/cover, no-repeat;
}

.mv-area > .txt-wrap {
	position: absolute;
	left: 6%;
	top: 22%;
	/*width: 600px;*/
}

.mv-area > .txt-wrap .mv-catch {
	font-size: 4.2rem;
	font-weight: 600;
	line-height: 1.7;
	font-family: var(--mincho);
}

.mv-area > .txt-wrap .accent {
	background: var(--gradation);
	color: #fff;
	font-weight: 600;
	padding: 8px 20px;
	font-size: 5.4rem;
	margin-right: 10px;
}

.mv-area .strength-wrap {
	display: flex;
	justify-content: flex-start;
	gap: 20px;
	margin: 20px 0 0;
}

.mv-area .strength-wrap img {
	width: 120px;
}

.mv-area > .txt-wrap .large {
	font-size: 5.0rem;
}

.mv-area > .txt-wrap .green {
	color: var(--green);
	font-size: 4.4rem;
	letter-spacing: .35rem;
}

.mv-area .mv-btn-block {
	display: flex;
	justify-content: flex-start;
	gap: 20px;
	/*padding: 40px;*/
	/*background: var(--palegreen);*/
	position: absolute;
	bottom: 37px;
	right: 6%;
}

.mv-area .mv-btn-block .mv-btn {
	
}

.mv-area .mv-btn-block .mv-btn a {
	display: flex;
	gap: 20px;
	padding: 20px 20px 15px;
	background: #fff;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	width: 250px;
	z-index: 1;
	border: 1px solid #E2E2E2;
}

.mv-area .mv-btn-block .mv-btn a::after {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: 20px;
	right: 0;
	width: 30px;
	height: 1px;
	background: #6DBFD0;
	transition: all .4s;
}

.mv-area .mv-btn-block .mv-btn a:hover::after {
	right: -10px;
}

.mv-area .mv-btn-block .mv-btn .txt-wrap {
	position: relative;
	width: 100%;
	text-align: center;
}

.mv-area .mv-btn-block .mv-btn .fukidashi {
	display: inline-block;
	background: #6DBFD0;
	color: #fff;
	border-radius: 20px;
	line-height: 1.5;
	font-size: 1.2rem;
	font-weight: bold;
	padding: 5px 12px;
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	white-space: nowrap;
}

.mv-area .mv-btn-block .mv-btn .fukidashi::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	border-top: 6px solid #6DBFD0;
	border-bottom: 0;
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);	
}

/*ホバー*/
@media screen and (min-width: 769px){	
	.mv-area .mv-btn-block .mv-btn a::before,
	.mv-area .mv-btn-block .mv-btn a::before {
		position: absolute;
		content: "";
		width: 0;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
		background: linear-gradient(90deg, #29c3c7, #27c4d8, #39c4e6, #53c3f1, #6fc2f9, #8ac0fd, #a5bdfe, #bdbafb);
		transition: all 0.7s ease;
		opacity: .1;
	}

	.mv-area .mv-btn-block .mv-btn a:hover::before {
		left: 0;
		width: 100%;
	}
	
	.mv-area .mv-btn-block .mv-btn a:hover {
		border: 1px solid #6DBFD0;
	}
}

.mv-area .mv-btn-block .mv-btn .btn-ttl {
	font-size: 1.7rem;
	font-weight: bold;
}

.mv-area .mv-btn-block .mv-btn .catch {
	font-size: 1.4rem;
	line-height: 1.5;
	font-weight: bold;
	margin: 5px 0 0;
}

.mv-area .mv-seminar {
	width: 640px;
	position: absolute;
	left: 6%;
	bottom: 0;
}

.mv-area .mv-seminar .bg-wrap {
	padding: 20px 20px 15px;
	background: var(--palegreen);
	width: 100%;
}

.mv-area .mv-seminar .fukidashi {
	background: #6DBFD0;
	color: #fff;
	text-align: center;
	line-height: 1.5;
	font-weight: bold;
	font-size: 1.5rem;
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	padding: 3px 30px;
	border-radius: 20px;
}

.mv-area .mv-seminar .fukidashi::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	border-top: 6px solid #6DBFD0;
	border-bottom: 0;
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);	
}

.mv-area .mv-seminar .seminar-list {
	width: 100%;
}

.mv-area .mv-seminar .seminar-list li {
	width: 600px;
}

.mv-area .mv-seminar .seminar-list li a {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	border: 1px solid #fff
}

.mv-area .mv-seminar .seminar-list li a:hover {
	/*opacity: .7;*/
	border: 1px solid var(--green);
}

.mv-area .mv-seminar .seminar-list li a .img-wrap {
	width: 220px;
}

.mv-area .mv-seminar .seminar-list li a .img-wrap img {
	width: 100%;
	object-fit: cover;
	height: 190px;
}

.mv-area .mv-seminar .seminar-list li a .txt-wrap {
	background: #fff;
	width: calc( 100% - 220px ) ;
	padding: 20px;
	height: 190px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
}

.mv-area .mv-seminar .seminar-list .tag-list {
	display: flex;
	gap: 5px;
}

.mv-area .mv-seminar .seminar-list .tag-list li {
	padding: 5px 8px;
	background: #fff;
	line-height: 1;
	font-size: 1.2rem;
	color: var(--green);
	border: 1px solid var(--green);
	width: initial;
}

.mv-area .mv-seminar .seminar-list .seminar-ttl {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px 0 5px;
    overflow: hidden;
    /* text-overflow: ellipsis; */
    white-space: normal;
    width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

.mv-area .mv-seminar .seminar-list .date {
	font-size: 1.4rem;
}

.mv-area .mv-seminar .seminar-list .date i {
	display: inline-block;
	margin-right: 3px;
	color: var(--green);
}

.mv-area .mv-seminar .seminar-link {
	text-align: left;
	margin: 10px 0 0;
}

.mv-area .mv-seminar .seminar-link a {
	display: inline-block;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.4;
}

.mv-area .mv-seminar .seminar-link a:hover {
	opacity: .7;
}

.mv-area .mv-seminar .seminar-link i {
	color: var(--green);
	margin-right: 5px;
	display: inline-block;
}

@media screen and (max-width: 768px){
	.mv-area {
		min-height: initial;
		height: initial;
		background: transparent;
		position: relative;
	}
	
	.mv-area::before {
		content: "";
		display: block;
		width: initial;
		height: 185px;
		aspect-ratio: 80 / 37;
		background: url("../img/top-mv-sp.png") center/cover, no-repeat;
		position: absolute;
		top: 60px;
		right: 0;
	}
	
	.mv-area > .txt-wrap {
		position: relative;
		left: initial;
		top: initial;
		width: 100%;
		padding: 260px 20px 0;
	}
	
	.mv-area > .txt-wrap .mv-catch {
		font-size: 2.2rem;
	}
	
	.mv-area > .txt-wrap .accent {
		padding: 5px 10px;
		font-size: 3.0rem;
		margin-right: 5px;
	}
	
	.mv-area > .txt-wrap .large {
		font-size: 2.6rem;
		letter-spacing: -0.1rem;
	}
	
	.mv-area > .txt-wrap .green {
		font-size: 2.4rem;
		letter-spacing: .2rem;
	}
	
	.mv-area .strength-wrap {
		gap: 10px;
		margin: 15px 0 0;
	}
	
	.mv-area .strength-wrap img {
		width: 80px;
		margin: 0;
	}
	
	.mv-area .mv-btn-block {
		display: flex;
		justify-content: flex-start;
		gap: 10px;
		padding: 20px;
		background: var(--palegreen);
		position: relative;
		bottom: initial;
		left: initial;
		right: initial;
		width: 100%;
		margin: 50px 0 0;
	}
	
	.mv-area .mv-btn-block .mv-btn {
		width: calc( ( 100% - 10px ) / 2 );
	}
	
	.mv-area .mv-btn-block .mv-btn a {
		gap: 10px;
		padding: 5px 5px 10px;
		width: 100%;
		flex-wrap: wrap;
		border: none;
		box-shadow: 0 0 15px rgba(54,180,199,.3);
	}
	
	.mv-area .mv-btn-block .mv-btn .fukidashi {
		display: none;
	}
	
	.mv-area .mv-btn-block .mv-btn .img-wrap {
		width: 100%;
		height: 20vw;
	}
	
	.mv-area .mv-btn-block .mv-btn .img-wrap img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.mv-area .mv-btn-block .mv-btn .txt-wrap {
		display: flex;
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}
	
	.mv-area .mv-btn-block .mv-btn .btn-ttl {
		font-size: 1.5rem;
		order: 2;
		width: 100%;
		text-align: center;
	}
	
	.mv-area .mv-btn-block .mv-btn .catch {
		font-size: 1.1rem;
		margin: 0 0 8px;
		order: 1;
		color: #6DBFD0;
	}
	
	.mv-area .mv-btn-block .mv-btn a::after {
		width: 13px;
		bottom: 15px;
	}
	
	.mv-area .mv-seminar {
		width: 100%;
		position: relative;
		right: initial;
		left: initial;
		bottom: initial;
		padding: 0 0 60px;
		background: #F6F6F6;
		margin: 40px 0 0;
	}
	
	.mv-area .mv-seminar .fukidashi {
		font-size: 1.4rem;
		top: -12px;
		left: 20px;
		transform: none;
		padding: 3px 30px;
	}
	
	.mv-area .mv-seminar .sp-wrap {
		width: 100%;
		overflow-x: scroll;
		background: transparent;
		padding: 40px 20px 0;
	}
	
	.mv-area .mv-seminar .seminar-list {
		display: flex;
		gap: 15px;
		padding: 0 0 20px;
	}
	
	.mv-area .mv-seminar .seminar-list li {
		width: 240px;
	}
	
	.mv-area .mv-seminar .seminar-list li a {
		width: 240px;
		flex-wrap: wrap;
		padding: 15px;
		background: #fff;
	}
	
	.mv-area .mv-seminar .seminar-list .seminar-ttl {
		font-size: 1.7rem;
		font-weight: bold;
		line-height: 1.5;
		margin: 10px 0 5px;
		overflow: initial;
		text-overflow: initial;
		white-space: pre-wrap;
		-webkit-line-clamp: initial;
		-webkit-box-orient: initial;
		display: initial;
	}
	
	.mv-area .mv-seminar .seminar-list li a .img-wrap img {
		height: 120px;
	}
	
	.mv-area .mv-seminar .seminar-list li a .txt-wrap {
		background: transparent;
		width: 100%;
		padding: 15px 0 0;
		height: initial;
	}
	
	.mv-area .mv-seminar .seminar-link {
		text-align: left;
		margin: 10px 0 0 0;
		position: fixed;
	}
}

@media screen and (min-width: 500px) and (max-width: 767px){
	.mv-area::before {
		height: 300px;
	}
	
	.mv-area > .txt-wrap {
		padding: 380px 20px 0;
	}
	
	.h1-area {
		top: 630px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1400px) {
	.h1-area {
		left: max(3.5%,40px);
	}
	
	.mv-area > .txt-wrap {
		left: 3%;
	}
	.mv-area .mv-seminar {
		left: 3%;
	}
	
	.mv-area .mv-btn-block {
		right: 3%;
	}
}

/* -----------------------------
	about-area
-------------------------------- */
.about-area {
	padding: 80px 0 100px;
	position: relative;
}

.about-area::before {
	content: "";
	display: block;
	width: 20%;
	max-width: 320px;
	height: initial;
	aspect-ratio: 320 / 484;
	background: url("../img/bg-kr-dontics.png") center/cover, no-repeat;
	position: absolute;
	right: 8%;
	top: 13%;
}

.about-area .ttl-block .en {
	font-size: 10.0rem;
	font-weight: 400;
}

.about-area .top-area .inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	padding-right: calc( ( 100% - 1200px ) / 2 );
}

.about-area .img-block {
	/*width: 745px;*/
	/*max-width: 46%;*/
	width: 46%;
	height: initial;
	aspect-ratio: 745 / 670;
	position: relative;
}

.about-area .img-block::before {
	content: "";
	display: block;
	background: var(--palegreen);
	position: absolute;
	top: 80px;
	right: -140px;
	width: 0;
	height: 360px;
	transition: all 1.2s ease;
}

.about-area .img-block.sideAppear.active::before {
	width: 360px;
}

.about-area .img-block .img-wrap img {
	object-fit: cover;
	height: 100%;
}

.about-area .img-block .img-wrap:first-child {
	position: absolute;
	top: 0;
	left: 0;
	width: 74%;
	aspect-ratio: 500 / 560;
	height: initial;
}

.about-area .img-block .img-wrap:nth-child(2) {
	position: absolute;
	/*top: 250px;*/
	/*left: 345px;*/
	bottom: 0;
	right: 0;
	width: 52%;
	aspect-ratio: 400 / 420;
	height: initial;
}

.about-area .txt-block {
	width: 600px;
	padding: 40px 0 0;
	position: relative;
	z-index: 1;
}

.about-area .movie-block {
	width: 100%;
	background: var(--gradation);
	padding: 10px 10px 10px 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 30px 0 0;
	position: relative;
}

.about-area .movie-block::before {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: -8px;
	right: -8px;
	width: 60px;
	height: 1px;
	background: var(--green);
}

.about-area .movie-block::after {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: -8px;
	right: -8px;
	width: 1px;
	height: 60px;
	background: var(--green);
}

.about-area .movie-block .txt-wrap {
	color: #fff;
	padding: 0 0 0 30px;
}

.about-area .movie-block .txt-wrap .movie {
	font-family: var(--en);
	font-size: 2.4rem;
	margin: 0 0 15px;
	display: inline-block;
	position: relative;
}

.about-area .movie-block .txt-wrap .movie::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: -60px;
	width: 50px;
	height: 1px;
	background: #fff;
}

.about-area .movie-block .txt-wrap .catch {
	font-size: 2.0rem;
	font-weight: bold;
	line-height: 1.5;
	position: relative;
}

.about-area .movie-block .txt-wrap .catch::before {
	content: "\201C";
	display: inline-block;
	position: absolute;
	top: -10px;
	left: -36px;
	color: #fff;
	opacity: .4;
	font-family: var(--mincho);
	font-size: 6.0rem;
	line-height: 1;
}

.about-area .movie-block .txt-wrap .catch::after {
	content: "\201D";
	display: inline-block;
	position: absolute;
	bottom: -10px;
	right: -36px;
	color: #fff;
	opacity: .4;
	font-family: var(--mincho);
	font-size: 6.0rem;
	line-height: 0;
}

.about-area .movie-block .thumb-wrap {
	width: 230px;
	position: relative;
	cursor: pointer;
}

.about-area .movie-block .thumb-wrap .thumb {
	width: 100%;
}

.about-area .movie-block .thumb-wrap .thumb img {
	width: 100%;
	object-fit: cover;
}

.about-area .movie-block .thumb-wrap .movie-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

.about-area .movie-block .thumb-wrap .movie-btn img {
	width: 80px;
	height: 80px;
}

.about-area .bottom-area {
	padding: 100px 0 0;
	position: relative;
}

.about-area .bottom-area::after {
	content: "";
	display: block;
	background: var(--palegreen);
	position: absolute;
	bottom: 140px;
	right: 0;
	width: 0;
	height: 400px;
	z-index: -1;
	transition: all 2s;
}

.about-area .bottom-area.sideAppear.active::after {
	width: 400px;
}

.about-area .bottom-area .about-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: 0 0 80px;
	gap: 50px 30px;
}

.about-area .bottom-area .about-list li {
	width: calc( ( 100% - 60px ) / 3 );
}

.about-area .bottom-area .about-list li .img-wrap {
	width: 100%;
}

.about-area .bottom-area .about-list li .img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-area .bottom-area .about-list li .txt-wrap {
	margin: 20px 0 0;
}

.about-area .bottom-area .about-list li .merit {
	color: var(--green);
	font-family: var(--en);
	font-size: 1.8rem;
	width: 100%;
	display: inline-block;
	text-align: center;
}

.about-area .bottom-area .about-list li .num {
	font-size: 2.6rem;
}

.about-area .bottom-area .about-list li .list-catch {
	font-weight: 500;
	font-size: 2.6rem;
	font-family: var(--mincho);
	line-height: 1.5;
	text-align: center;
	width: 100%;
	margin: 10px 0 15px;
}

@media screen and (max-width: 768px){
	.about-area {
		padding: 40px 0 40px;
	}
	
	.about-area::before {
		display: none;
	}
	
	.about-area .top-area .inner {
		flex-wrap: wrap;
		padding: 0;
	}
	
	.about-area .img-block {
		width: 100%;
		height: 72vw;
	}
	
	.about-area .img-block .img-wrap:first-child {
		position: absolute;
		top: 0;
		left: 0;
		width: 65%;
		height: 100%;
	}
	
	.about-area .img-block .img-wrap:nth-child(2) {
		top: 50%;
		transform: translateY(-50%);
		left: initial;
		right: 0;
		width: 43%;
		height: 44vw;
	}
	
	.about-area .img-block::before {
		top: initial;
		bottom: -60px;
		right: 26%;
		width: 0;
		max-width: 0;
		/*height: 70%;*/
		height: 180px;
	}
	
	.about-area .img-block.sideAppear.active::before {
		width: 70%;
		max-width: 280px;
	}
	
	.about-area .txt-block {
		width: 100%;
		padding: 30px 0 0;
		position: relative;
	}
	
	.about-area .txt-block::before {
		content: "";
		display: inline-block;
		position: absolute;
		background: url("../img/bg-kr-dontics.png") center/cover, no-repeat;
		width: 25vw;
		max-width: 140px;
		height: initial;
		aspect-ratio: 320 / 484;
		right: 20px;
		/*top: 10%;*/
		bottom: 35%;
	}
	
	.about-area .ttl-block .en {
		font-size: 4.0rem;
		padding: 0 20px;
	}
	
	.about-area .ttl-block .jp {
		font-size: 2.0rem;
		padding: 0 20px;
		
	}
	
	.about-area .catch-l {
		font-size: 2.6rem;
		padding: 0 20px;
		letter-spacing: .1rem;
	}
	
	.about-area .movie-block {
		max-width: 480px;
	}
	
	.about-area .movie-block .txt-wrap {
		color: #fff;
		padding: 0 0 0 20px;
	}
	
	.about-area .movie-block .txt-wrap .catch {
		font-size: 1.4rem;
		display: inline;
	}
	
	.about-area .movie-block .txt-wrap .catch::before {
		top: -4px;
		left: -20px;
		font-size: 4.0rem;
	}
	
	.about-area .movie-block .txt-wrap .catch::after {
		bottom: -4px;
		right: -20px;
		font-size: 4.0rem;
	}
	
	.about-area .movie-block .thumb-wrap {
		width: 180px;
	}
	
	.about-area .movie-block .txt-wrap .movie {
		font-size: 2.0rem;
		margin: 0 0 10px;
		width: 100%;
	}
	
	.about-area .movie-block .thumb-wrap .movie-btn img {
		width: 60px;
		height: 60px;
	}
	
	.about-area .bottom-area {
		padding: 30px 0 0;
		position: relative;
		margin: 30px 0 0;
	}
	
	.about-area .bottom-area::after {
		display: none;
	}
	
	.about-area .bottom-area::before {
		content: "";
		display: block;
		width: 0;
		height: calc( 100% - 30px );
		background: var(--palegreen);
		position: absolute;
		top: 0;
		right: 0;
		z-index: -1;
		transition: all 2s;
	}
	
	.about-area .bottom-area.sideAppear.active::before {
		width: 90%;
	}
	
	.about-area .bottom-area .inner {
		padding-right: 20px;
	}
	
	.about-area .bottom-area .about-list {
		flex-wrap: wrap;
		margin: 0 0 30px;
		gap: 20px;
	}
	
	.about-area .bottom-area .about-list li {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		gap: 5vw;
	}
	
	.about-area .bottom-area .about-list li .img-wrap {
		width: 30vw;
		height: 24vw;
	}
	
	.about-area .bottom-area .about-list li .txt-wrap {
		width: calc( 100% - 35vw );
		margin: 0;
	}
	
	.about-area .bottom-area .about-list li .list-txt {
		display: none;
	}
	
	.about-area .bottom-area .about-list li .merit {
		font-size: 1.3rem;
		text-align: left;
	}
	
	.about-area .bottom-area .about-list li .num {
		font-size: 2.1rem;
	}
	
	.about-area .bottom-area .about-list li .list-catch {
		font-size: 2.0rem;
		text-align: left;
		margin: 5px 0 0;
	}
}


/* -----------------------------
	kr-spring-area
-------------------------------- */
.kr-spring-area {
	padding: 0 0 120px;
}

.kr-spring-area .kr-spring-bnr a {
	display: flex;
	width: 100%;
	align-items: center;
	align-content: center;
	justify-content: center;
	border: 1px solid #444;
	padding: 60px 40px;
	gap: 100px;
	position: relative;
	transition: all .4s;
}

.kr-spring-area .kr-spring-bnr a::before {
	content: "";
	display: block;
	width: 367px;
	height: 225px;
	position: absolute;
	right: 0;
	bottom: 0;
	background: url("../img/bg-kr-spring-bnr.png") center/cover, no-repeat;
	transition: all .4s;
}

.kr-spring-area .kr-spring-bnr a::after {
	content: "";
	display: block;
	width: 560px;
	height: 100%;
	top: 20px;
	right: -20px;
	background: linear-gradient(90deg, #fff, #FEFCF9, #FEFBF6, #f6c98f, #daca87, #bccb88, #9dca90, #7ec79d, #60c2ac, #45bcbb, #37b4c8);
	z-index: -1;
	opacity: .1;
	transition: all .4s;
}

.kr-spring-area .kr-spring-bnr a:hover {
	border: 1px solid var(--green);
	color: var(--green);
}

.kr-spring-area .kr-spring-bnr a:hover::after {
	opacity: 0;
}

.kr-spring-area .kr-spring-bnr .arrow {
	position: absolute;
	width: 80px;
	height: 1px;
	background: var(--green);
	bottom: 20px;
	right: 20px;
	transition: all .4s;
}

.kr-spring-area .kr-spring-bnr .arrow::after {
	content: "";
	display: inline-block;
	position: absolute;
	right: 0;
	top: -5px;
	width: 12px;
	height: 1px;
	background: var(--green);
	transform: rotate(45deg);
}

.kr-spring-area .kr-spring-bnr a:hover .arrow {
	right: -30px;
}

.kr-spring-area .kr-spring-bnr .logo-wrap {
	width: 200px;
}

.kr-spring-area .kr-spring-bnr .logo-wrap img {
	width: 100%;
	object-fit: cover;
}

.kr-spring-area .kr-spring-bnr .ttl-block .en {
	font-size: 5.0rem;
}

.kr-spring-area .kr-spring-bnr .ttl-block .jp {
	font-size: 2.1rem;
}

.kr-spring-area .kr-spring-bnr .catch-m {
	font-size: 2.8rem;
	line-height: 1.7;
}

@media screen and (max-width: 768px){
	.kr-spring-area {
		padding: 0 0 40px;
	}
	
	.kr-spring-area .kr-spring-bnr a {
		padding: 40px 15px;
		gap: 0;
		flex-wrap: wrap;
	}
	
	.kr-spring-area .kr-spring-bnr a::before {
		display: none;
	}
	
	.kr-spring-area .kr-spring-bnr a::after {
		content: "";
		display: block;
		width: 100%;
		height: 150px;
		bottom: -40px;
		top: initial;
		right: -20px;
	}
	
	.kr-spring-area .kr-spring-bnr .txt-wrap {
		display: contents;
	}
	
	.kr-spring-area .kr-spring-bnr .ttl-block {
		order: 1;
		width: 100%;
	}
	
	.kr-spring-area .kr-spring-bnr .ttl-block .en {
		font-size: 3.2rem;
		text-align: center;
	}
	
	.kr-spring-area .kr-spring-bnr .ttl-block .jp {
		font-size: 1.8rem;
		width: 100%;
		text-align: center;
		margin: 10px 0 0;
	}
	
	.kr-spring-area .kr-spring-bnr .logo-wrap {
		order: 2;
		width: 120px;
	}
	
	.kr-spring-area .kr-spring-bnr .catch-m {
		order: 3;
		text-align: center;
		margin: 20px 0 0;
		width: 100%;
		font-size: 2.4rem;
		letter-spacing: 0;
	}
	
	.kr-spring-area .kr-spring-bnr .arrow {
		width: 50px;
	}
}



/* -----------------------------
	seminar-area
-------------------------------- */
.seminar-area {
	padding: 100px 0;
	text-align: center;
	z-index: 2;
	position: relative;
}

.seminar-area .seminar-block {
	margin: 80px 0;
	display: flex;
	justify-content: space-between;
}

.seminar-area .seminar-block .seminar-box {
	width: calc( ( 100% - 40px ) / 2 );
	/*box-shadow: 0 0 30px #F3F2EE;*/
}

.seminar-area .seminar-block .seminar-box a {
	display: block;
	background: #F9F9F9;
	padding: 30px;
	text-align: left;
	transition: all .5s;
	top: 0;
	position: relative;
}

.seminar-area .seminar-block .seminar-box a::before {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	top: 40px;
	left: 40px;
	background: url("../img/bg-seminar-hover.png") center/cover, no-repeat;
	z-index: -1;
	transition: all .5s;
	opacity: 0;
}

.seminar-area .seminar-block .seminar-box .img-wrap {
	height: 320px;
}

.seminar-area .seminar-block .seminar-box .img-wrap img {
	vertical-align: middle;
	height: 320px;
	width: 100%;
	object-fit: cover;
}

.seminar-area .seminar-block .seminar-box .tag-list {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	width: 100%;
	gap: 5px;
	margin: 20px 0 0;
}

.seminar-area .seminar-block .seminar-box .tag-list li {
	color: var(--green);
	border: 1px solid var(--green);
	padding: 3px 10px;
	line-height: 1.5;
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
}

.seminar-area .seminar-block .seminar-box .seminar-ttl {
	font-size: 2.2rem;
	font-weight: bold;
	line-height: 1.5;
	margin: 20px 0 0;
}

.seminar-area .seminar-block .seminar-box .seminar-table {
	margin: 15px 0 0;
}

.seminar-area .seminar-block .seminar-box .seminar-table th {
	width: 22%;
	vertical-align: text-top;
	padding: 7px 0;
	line-height: 1.5;
	font-weight: 500;
}

.seminar-area .seminar-block .seminar-box .seminar-table th i {
	color: var(--green);
	display: inline-block;
	min-width: 20px;
}

.seminar-area .seminar-block .seminar-box .seminar-table td {
	width: 78%;
	padding: 7px 0;
	font-size: 1.6rem;
	line-height: 1.5;
	font-weight: 500;
}

.seminar-area .seminar-block .seminar-box .seminar-table tr:first-child td {
	font-size: 2.1rem;
	line-height: 1.4;
}

/*PCのみホバーエフェクト*/
@media screen and (min-width: 769px){
	.seminar-area .seminar-block .seminar-box a:hover {
		top: -10px;
	}

	.seminar-area .seminar-block .seminar-box a:hover::before {
		opacity: 1;
	}
}


@media screen and (max-width: 768px){
	.seminar-area {
		padding: 40px 0;
	}
	
	.seminar-area .seminar-block {
		margin: 30px 0;
		flex-wrap: wrap;
		gap: 20px;
	}
	
	.seminar-area .seminar-block .seminar-box {
		width: 100%;
	}
	
	.seminar-area .seminar-block .seminar-box a {
		padding: 20px;
	}
	
	.seminar-area .seminar-block .seminar-box a::before {
		display: none;
	}
	
	.seminar-area .seminar-block .seminar-box .img-wrap {
		width: 100%;
		height: 42vw;
	}
	
	.seminar-area .seminar-block .seminar-box .img-wrap img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.seminar-area .seminar-block .seminar-box .tag-list li {
		padding: 3px 7px;
		font-size: 1.3rem;
	}
	
	.seminar-area .seminar-block .seminar-box .seminar-ttl {
		font-size: 1.8rem;
		margin: 15px 0 0;
	}
	
	.seminar-area .seminar-block .seminar-box .seminar-table th {
		width: 100%;
		padding: 0;
		display: block;
	}
	
	.seminar-area .seminar-block .seminar-box .seminar-table td {
		width: 100%;
		padding: 5spx 0 12px;
		display: block;
		font-size: 1.5rem;
	}
	
	.seminar-area .seminar-block .seminar-box .seminar-table tr:first-child td {
		font-size: 1.7rem;
		line-height: 1.5;
	}
}

/* -----------------------------
	cases-area
-------------------------------- */
.cases-area {
	padding: 80px 0 60px;
	position: relative;
}

.cases-area::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	min-width: 0;
	height: 800px;
	background: var(--palegreen);
	z-index: -1;
	transition: all 1.5s;
}

.cases-area.sideAppear.active::before {
	width: 60%;
	min-width: 800px;
}

.cases-area .inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.cases-area .ttl-block {
	margin: 0;
}

.cases-area  .scroll-wrap {
	width: 1200px;
	margin: 0 auto;
}

.cases-area .cases-list {
	margin: 100px 0;
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.cases-area .cases-list .cases-item {
	width: calc( ( 100% - 60px ) / 4 );
}

.cases-area .cases-list .cases-item a {
	position: relative;
	box-shadow: 0 0 30px rgba(0,0,0,.1);
	display: block;
	top: 0;
}

.cases-area .cases-list .cases-item a:hover {
	opacity: .8;
	top: -10px;
	box-shadow: none;
}

.cases-area .cases-list .bg-wrap {
	width: 100%;
	height: 200px;
}

.cases-area .cases-list .bg-wrap img {
	object-fit: cover;
	height: 200px;
	width: 100%;
}

.cases-area .cases-list .txt-wrap {
	width: 100%;
	padding: 20px;
	background: #F9F9F9;
}

.cases-area .cases-list .tag-list {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	width: 100%;
	gap: 5px;
	margin: 0 0 15px;
}

.cases-area .cases-list .tag-list li {
	font-size: 1.4rem;
	color: var(--green);
	border: 1px solid var(--green);
	background: #fff;
	padding: 5px 10px;
	font-weight: bold;
}

.cases-area .cases-list .cases-ttl {
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.5;
}

.course-area + .cases-area {
	margin: 100px 0 0;
}

@media screen and (max-width: 768px){
	.cases-area {
		padding: 0 0 40px;
	}
	
	.cases-area::before {
		width: 0;
		min-width: initial;
		height: 60%;
		top: initial;
		bottom: 0;
	}
	
	.cases-area.sideAppear.active::before {
		width: 100%;
		min-width: initial;
	}
	
	.cases-area .inner {
		flex-wrap: wrap;
	}
	
	.cases-area .ttl-block {
		margin: 0 0 20px;
		width: 100%;
	}
	
	.cases-area .scroll-wrap {
		overflow-x: scroll;
		width: 100%;
		margin: 30px 0;
	}
	
	.cases-area .cases-list {
		width: fit-content;
		margin: 0;
		padding: 0 20px 20px;
		flex-wrap: nowrap;
	}
	
	.cases-area .cases-list .cases-item {
		width: 230px;
	}
	
	.cases-area .cases-list .cases-item a {
		box-shadow: 0 0 15px rgba(0,0,0,.1);
	}
	
	.cases-area .cases-list .cases-item .bg-wrap {
		width: 100%;
		height: 160px;
	}
	
	.cases-area .cases-list .cases-item .bg-wrap img {
		object-fit: cover;
		width: 100%;
		height: 160px;
	}
	
	.cases-area .cases-list .txt-wrap {
		padding: 20px 15px;
	}
	
	.cases-area .cases-list .tag-list li {
		font-size: 1.3rem;
		padding: 5px 8px;
	}
	
	.cases-area .cases-list .cases-ttl {
		font-size: 1.8rem;
	}
	
	.course-area + .cases-area {
		margin: 40px 0 0;
	}
	
}



/* -----------------------------
	beginner-area
-------------------------------- */
.beginner-area {
	padding: 280px 0 100px;
	position: relative;
}

.beginner-area::after {
	content: "KR Dontics KR Dontics KR Dontics KR Dontics";
	position: absolute;
	top: 0;
	left: 0;
	font-size: 20.0rem;
	font-family: var(--en);
	overflow: hidden;
	white-space: nowrap;
	font-weight: 500;
  	animation: marquee 60s linear infinite;
	letter-spacing: .3rem;
	line-height: 1;
	color: #F3F3F3;
	-webkit-text-stroke: 1px rgba(255,255,255,.8);
}

@keyframes marquee {
  0% {
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  100% {
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	}
}

.beginner-area .inner {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 0 80px;
}

.beginner-area .ttl-block .en {
	font-size: 5.0rem;
	position: relative;
}

.beginner-area .ttl-block .en::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: -33px;
	left: -30px;
	background: url("../img/for.svg") center/cover,no-repeat;
	width: 75px;
	height: 41px;
}

.beginner-area .ttl-block .jp {
	font-size: 2.1rem;
}

.beginner-area .btn-more {
	text-align: left;
}

@media screen and (max-width: 768px){
	.beginner-area {
		padding: 0 0 40px;
	}
	
	.beginner-area .inner {
		flex-wrap: wrap;
		gap: 0;
	}
	
	.beginner-area .img-wrap {
		width: 100%;
		height: 50vw;
		position: relative;
	}
	
	.beginner-area .img-wrap::after {
		content: "KR Dontics KR Dontics KR Dontics KR Dontics";
		position: absolute;
		left: 0;
		font-family: var(--en);
		overflow: hidden;
		white-space: nowrap;
		animation: marquee 60s linear infinite;
		letter-spacing: .3rem;
		line-height: 1;
		font-size: 7.0rem;
		font-weight: 300;
		color: #fff;
		-webkit-text-stroke: 1px rgba(255,255,255,.8);
		bottom: -14px;
	}
	
	.beginner-area .img-wrap img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.beginner-area .txt-wrap {
		width: 100%;
		padding: 50px 20px 0;
	}
	
	.beginner-area .ttl-block .en {
		font-size: 3.6rem;
		position: relative;
	}
	
	.beginner-area .ttl-block .en::before {
		top: -28px;
		left: -14px;
		width: 60px;
		height: initial;
		aspect-ratio: 75 / 41;
	}
	
	.beginner-area .ttl-block .jp {
		font-size: 2.0rem;
	}
	
	.beginner-area::after {
		display: none;
	}
}

/* -----------------------------
	doctor-area
-------------------------------- */
.doctor-area {
	margin: 0 0 100px;
}

.doctor-area .inner {
	display: flex;
	gap: 30px;
	width: 100%;
	padding: 0 5% 0 calc( ( 100% - 1200px ) / 2 );
	justify-content: space-between;
	align-items: center;
}

.doctor-area .ttl-block .en {
	font-size: 5.0rem;
}

.doctor-area .ttl-block .jp {
	font-size: 2.1rem;
}

.doctor-area .btn-more {
	text-align: left;
}

.doctor-area .img-wrap {
	display: flex;
	justify-content: center;
	gap: 1%;
}

.doctor-area .img-wrap img {
	display: block;
	aspect-ratio: 13 / 20;
}

@media screen and (max-width: 768px){
	.doctor-area {
		margin: 0 0 40px;
	}
	
	.doctor-area .inner {
		flex-wrap: wrap;
		gap: 0;
		width: 100%;
		padding: 0;
	}
	
	.doctor-area .img-wrap {
		gap: 0;
		order: 1;
		width: 100%;
	}
	
	.doctor-area .img-wrap img {
		width: calc( 100% / 3 );
		object-fit: cover;
	}
	
	.doctor-area .txt-wrap {
		order: 2;
		padding: 30px 20px 0;
	}
	
	.doctor-area .ttl-block .en {
		font-size: 3.6rem;
		position: relative;
	}
	
	.doctor-area .ttl-block .jp {
		font-size: 2.0rem;
	}
}

/* -----------------------------
	company-faq-area
-------------------------------- */
.company-faq-area {
	display: flex;
	justify-content: center;
}

.company-faq-area .section-block {
	display: block;
	width: 50%;
}

.company-faq-area .section-block.company a::before {
	background: url("../img/bg-top-company.jpg") center/cover,no-repeat;
	
}

.company-faq-area .section-block.faq a::before {
	background: url("../img/bg-top-faq.jpg") center/cover,no-repeat;
}

.company-faq-area .section-block a::before {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	transition: all .6s;
}

.company-faq-area .section-block a {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content: center;
	align-items: center;
	align-content: center;
	aspect-ratio: 40 / 23;
	position: relative;
	overflow: hidden;
}

.company-faq-area .section-block a:hover::before {
	transform: scale(1.1);
}

.company-faq-area .section-block a:hover .btn-more span::after {
	right: -25px;
}

.company-faq-area .section-block a:hover .btn-more span::before {
	left: 0;
	width: 100%;
}

.company-faq-area .section-block a .ttl-block {
	width: 100%;
	margin: 0 0 20px;
	position: relative;
	z-index: 1;
}

.company-faq-area .section-block a .ttl-block .en {
	text-align: center;
	font-size: 4.0rem;
	color: #fff;
}

.company-faq-area .section-block a .ttl-block .jp {
	text-align: center;
	font-size: 2.0rem;
	color: #fff;
}

.company-faq-area .section-block a .catch {
	width: 100%;
	text-align: center;
	font-size: 2.4rem;
	color: #fff;
	line-height: 1.5;
	font-family: var(--en);
	margin: 0 0 30px;
	position: relative;
	z-index: 1;
}

@media screen and (max-width: 768px){
	.company-faq-area {
		flex-wrap: wrap;
	}
	
	.company-faq-area .section-block {
		width: 100%;
	}
	
	.company-faq-area .section-block a {
		padding: 40px 20px;
		aspect-ratio: initial;
	}
	
	.company-faq-area .section-block a .ttl-block .en {
		font-size: 3.0rem;
	}
	
	.company-faq-area .section-block a .ttl-block .jp {
		font-size: 1.8rem;
	}
	
	.company-faq-area .section-block a .catch {
		font-size: 2.1rem;
	}
}


/* -----------------------------
	instagram-area
-------------------------------- */
.instagram-area {
	padding: 100px 0;
	position: relative;
}

.instagram-area::before {
	content: "";
	display: block;
	width: 0;
	height: 280px;
	position: absolute;
	top: 60px;
	left: calc( ( ( 100% - 1200px ) / 2 ) - 150px );
	background: var(--palegreen);
	transition: all 1s;
}

.instagram-area.sideAppear.active::before {
	width: 300px;
}

.instagram-area::after {
	content: "";
	display: block;
	width: 0;
	min-width: 0;
	height: 380px;
	position: absolute;
	bottom: 0;
	right: 0;
	background: var(--palegreen);
	z-index: -1;
	transition: all 1s;
}

.instagram-area.sideAppear.active::after {
	width: 26%;
	min-width: 380px;
}

.instagram-area .ttl-block .en {
	font-size: 5.0rem;
}

.insta-list {
	display: flex;
	gap: 10px;
	position: relative;
	z-index: 1;
}

.insta-list li {
	width: calc( ( 100% - 50px ) / 6 );
}

.insta-list li a {
	display: block;
}

.insta-list li a:hover {
	opacity: .7;
}

.insta-list li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}

.insta-list li .c,
.insta-list li .like,
.insta-list li .comme {
	display: none;
}

@media screen and (max-width: 768px){
	.instagram-area {
		padding: 60px 0;
	}
	
	.instagram-area::before {
		width: 0;
		height: 100px;
		top: 50px;
		left: 0;
	}
	
	.instagram-area.sideAppear.active::before {
		width: 50%;
	}
	
	.instagram-area::after {
		width: 0;
		min-width: initial;
		height: 120px;
		bottom: 0;
		right: 0;
	}
	
	.instagram-area.sideAppear.active::after {
		width: 44%;
		min-width: initial;
	}
	
	.instagram-area .ttl-block .en {
		font-size: 3.4rem;
	}
	
	.insta-list {
		flex-wrap: wrap;
	}
	
	.insta-list li {
		width: calc( ( 100% - 20px ) / 3 );
	}
}

/* -----------------------------
	partner
-------------------------------- */
.partner-area {
	padding: 100px 0;
}

.partner-area .txt-wrap {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.partner-area .txt-wrap .ttl-block {
	margin: 0;
}

.partner-area .partner-list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 60px 0 0;
}

.partner-area .partner-list li .img-wrap {
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.partner-area .partner-list li .partner-txt {
	text-align: center;
	line-height: 1.5;
	font-size: 1.3rem;
	margin: 15px 0 0;
	
}

@media screen and (max-width: 768px){
	.partner-area {
		padding: 40px 0 0;
	}
	
	.partner-area .txt-wrap {
		width: 100%;
		flex-wrap: wrap;
	}
	
	.partner-area .txt-wrap .ttl-block {
		margin: 0 0 20px;
	}
	
	.partner-area .partner-list {
		margin: 20px 0 0;
		flex-wrap: wrap;
		width: 100%;
		gap: 0 30px;
		align-items: flex-start;
	}
	
	.partner-area .partner-list li {
		width: calc( (100% - 30px ) / 2 );
	}
	
	.partner-area .partner-list li .img-wrap {
		width: 100%;
	}
	
	.partner-area .partner-list li .img-wrap img {
		max-width: 100%;
		object-fit: cover;
	}
	
	.partner-area .partner-list li .partner-txt {
		margin: 5px 0 0;
	}
}



/* -----------------------------
	
-------------------------------- */

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

}