@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400..800&family=Poppins:wght@400;500;600&display=swap');

*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}
ul,ol,li { list-style-type: none;margin:0;padding:0;}

:root {
	--coltype1: #78D7DD;
	--coltype2: #98AADE;
	--coltype3: #DE828A;
	--coltype4: #94B3AE;
	--coltype5: #D5B5E5;
	--coltype6: #FBB097;
	--coltype7: #F8D990;
	--coltype1_l: #78D7DD;
	--coltype2_l: #98AADE;
	--coltype3_l: #DE828A;
	--coltype4_l: #94B3AE;
	--coltype5_l: #D5B5E5;
	--coltype6_l: #FBB097;
	--coltype7_l: #F8D990;
	--red: #E6001F;
	--fontJP: "Noto Sans JP", sans-serif;
	--fontEN: "Poppins", "Noto Sans", "Noto Sans JP", sans-serif;
	--mainW: 1120px;
	@media (max-width:640px) {
		--mainW: 100vw;
	}
}
body {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500;
	background: #F7F7F7;
	letter-spacing: 0.03em;
	min-width: 640px;
	word-break: normal;
	@media (max-width:640px) {
		min-width: initial;
	}
}
a {
	transition: 0.2s ease;
	text-decoration: none;
	color: inherit
}
a:hover {
	opacity: 0.7;
}



/* 共通class */
.en { font-family: var(--fontEN); }
.c1 { --couseCol:var(--coltype1); --couseLightCol:var(--coltype1_l); }
.c2 { --couseCol:var(--coltype2); --couseLightCol:var(--coltype2_l); }
.c3 { --couseCol:var(--coltype3); --couseLightCol:var(--coltype3_l); }
.c4 { --couseCol:var(--coltype4); --couseLightCol:var(--coltype4_l); }
.c5 { --couseCol:var(--coltype5); --couseLightCol:var(--coltype5_l); }
.c6 { --couseCol:var(--coltype6); --couseLightCol:var(--coltype6_l); }
.c7 { --couseCol:var(--coltype7); --couseLightCol:var(--coltype7_l); }
.red {color: var(--red);}
.sp_only {
	display: none;
	@media (max-width: 640px) {
		display: block;
	}
}
.pc_only {
	@media (max-width: 640px) {
		display: none;
	}
}



.mainW {
	width: 100%;
	max-width: var(--mainW);
	padding-left: 40px;
	padding-right: 40px;
	margin-left: auto;
	margin-right: auto;
	@media (max-width: 640px) {
		padding-left: 6vw;
		padding-right: 6vw;
	}
}


/* footer */
footer #kkskn_studyfors_footer {
	display: flex;
	justify-content: space-between;
	background: #000;
	color: #FFF;
	padding: 40px;
	@media (max-width: 640px) {
		flex-direction: column;
		padding: 15vw 10vw;
		gap: 12vw;
	}
}
footer #kkskn_studyfors_footer nav {
	display: flex;
	justify-content: flex-start;
	font-size: 15px;
	gap: min(2em,2.4vw);
	@media (max-width: 1000px) {
		flex-direction: column;
		gap: 1em;
	}
	@media (max-width: 640px) {
		flex-direction: column;
		font-size: 3.25vw;
		gap: 1.8em;
	}
}
footer #kkskn_studyfors_footer .logoWrap {
	display: flex;
	align-items: center;
	font-size: 13px;
	line-height: 1.6em;
	gap: 2em;
	font-weight: 400;
	@media (max-width: 640px) {
		flex-direction: column;
		font-size: 3vw;
		align-items: flex-start;
		gap: 1em;
	}
}
footer #copyright {
	background: #FFF;
	padding: 8px 60px;
	@media (max-width: 640px) {
		padding: 3px 4vw;
	}
}
footer #copyright a {
	display: inline-block;
}


/* .studeyForS_card */
.studeyForS_card {
	counter-reset: cardNum;
	counter-set: cardNum 0;
	--liW: 317px;
	@media (max-width: 640px) {
		--liW: 65vw;
	}
}
.studeyForS_card > li {
	container-type: inline-size;
	counter-increment: cardNum;
	width: var(--liW);
}
.studeyForS_card > li a {
	display: block;
	width: 100%;
	padding: 7.57cqw;
	background: #FFF;
	border: 2px solid var(--couseCol);
	#sec1 & {
		pointer-events: none;
	}
}
.studeyForS_card > li a:hover {
	opacity: 1;
	background: var(--couseCol);
}
.studeyForS_card > li .card-header {
	padding-left:  15.1cqw;
	position: relative;
}
.studeyForS_card > li .card-header .num {
	font-family: var(--fontEN);
	font-size: 7.6cqw;
	font-weight: 600;
	line-height: 1em;
	color: var(--couseCol);
	position: absolute;
	top: 0;
	left: 0;
	-webkit-text-stroke: 1px #000;
	text-stroke: 1px #000;
}
.studeyForS_card > li .studyfors-b {
	font-size: 4.1cqw;
	font-weight: 600;
}
.studeyForS_card > li h3 {
	height: 20.82cqw;
	display: flex;
	align-items: center;
	font-size: 7.25cqw;
	line-height: 1.2em;
}
.studeyForS_card > li .en.text {
	font-size: 3.78cqw;
	letter-spacing: 0;
}
.studeyForS_card > li .image {
	background: var(--couseCol);
	margin: 14px 0;
}
.studeyForS_card > li .year,
.studeyForS_card > li .name {
	font-size: 4.7cqw;
	
}
.studeyForS_card > li .name {
	margin-top: 0.25em;
}
.studeyForS_card > li .name span {
	font-size: 3.78cqw;
}
.studeyForS_card > li .name_en {
	font-size: 3.78cqw;
	
}

/* header */
header {
	position: absolute;
	top: 24px;
	left: 24px;
	z-index: 21;
	@media (max-width: 640px) {
		position: fixed;
		width: 100vw;
		height: 14.3vw;
		top: 0;
		left: 0;
		background: #FFF;
		padding: 3.5vw 3vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
header h1 {
	@media (max-width: 640px) {
		width: 28.12vw;
		position: relative;
	}
}
#kkskn_studyfors_spMenuBtn {
	@media (max-width: 640px) {
		position: relative;
		width: 5.64vw;
		height: 2.05vw;

		& span {
			display: block;
			width: 100%;
			height: 1px;
			background: #000;
			transition: 0.3s ease;
			position: absolute;
			top: 0;
			left: 0;
			.spMenuOn & {
				rotate: 45deg;
				top: 50%;
			}
		}
		& span + span {
			top: auto;
			bottom: 0;
			.spMenuOn & {
				rotate: -45deg;
				bottom: auto;
			}
		}
	}
}
#kkskn_studyfors_spMenu {
	@media (max-width: 640px) {
		position: fixed;
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 20;
		pointer-events: none;
		opacity: 0;
		transition: 0.3s ease;
		.spMenuOn + & {
			opacity: 1;
			pointer-events: visible;
		}
		& .bg {
			position: absolute;
			width: 100%;
			height: 100vh;
			background: #F7F7F7;
			z-index: -1;
			pointer-events: none;
		}
		& nav {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 1.538vw;
			position: relative;
			z-index: 1;
		}
		& a {
			display: block;
			padding: 5vw;
		}
		& a .label {
			font-size: 8.2vw;
			font-weight: 600;
		}
		& a .text {
			font-size: 3.589vw;
		}
		/* & .backAnime {
			position: absolute;
			width: 100%;
			height: 90vw;
			top: 0;
			left: 0;
		} */
		& .backAnime span {
			position: absolute;
			top: 30vw;
			left: 50vw;
			animation: sAnime1 1.8s ease-in-out infinite alternate;
			pointer-events: none;
			font-size: 5.976vw;
			font-family: var(--fontEN);
		}
		& .backAnime span:nth-child(1) { 
			color: var(--coltype1);
			top: 9vh;
			left: 20vw;
		}
		& .backAnime span:nth-child(2) {
			color: var(--coltype2);
			top: 18vh;
			left: 14vw;
			animation-name: sAnime2;
			animation-duration: 2.1s;
		}
		& .backAnime span:nth-child(3) {
			color: var(--coltype3);
			top: 14vh;
			left: 36vw;
			animation-duration: 2s;
		}
		& .backAnime span:nth-child(4) {
			color: var(--coltype4);
			top: 15.5vh;
			left: 84vw;
			animation-name: sAnime2;
			animation-duration: 2s;
		}
		& .backAnime span:nth-child(5) {
			color: var(--coltype5);
			top: 16vh;
			left: 53vw;
			animation-duration: 2.3s;
		}
		& .backAnime span:nth-child(6) {
			color: var(--coltype6);
			top: 28vh;
			left: 81vw;
			animation-name: sAnime2;
			animation-duration: 2.4s;
		}
		& .backAnime span:nth-child(7) {
			color: var(--coltype7);
			top: 10vh;
			left: 74vw;
			animation-duration: 2.6s;
		}
	}
}

/* first view */
#sec1 {
	position: relative;
	padding: 21px 24px;
	display: flex;
	flex-direction: column;
	justify-content: end;
	width: 100%;
	height: 100vh;
	max-height: 860px;
	overflow: hidden;
	transform-origin: center;
	@media (max-width: 640px) {
		padding: 14.3vw 0 4.8vw;
		max-height: 100vh;
	}
}


#sec1 h2 {
	font-size: 280px;
	font-weight: 600;
	position: absolute;
	top: 50%;
	left: 50%;
	transform-origin: top left;
	transform: translate(-50%,-50%);
	z-index: -1;
	animation: 1s ease both scaleInAnime;
	@media (max-width: 640px) {
		font-size: 28.7vw;
		text-align: center;
	}
}
@keyframes scaleInAnime {
	 0% {
		opacity: 0;
		scale: 0.7;
	 }
}
@keyframes fadeInAnime {
	 0% {
		opacity: 0;
	 }
}
#sec1 .kkskn {
	font-size: 32px;
	font-weight: 600;
	text-align: right;
	padding-right: 3%;
	position: relative;
	z-index: 8;
	opacity: 1;
	
	@media (max-width: 640px) {
		font-size: 6.1vw;
	}
}

#sec1 .studeyForS_card {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transform-origin: center;
	--easing: cubic-bezier(.18,.06,.15,.98);
	@media (max-width: 640px) {
		--liW: 48.7vw;
	}
}
#sec1 .studeyForS_card li {
	will-change: transform;
	position: absolute;
	box-shadow: 0 15px 30px rgb(130,130,130,0.1);
	opacity: 1;
	animation: fadeInAnime 0.3s ease 1s 1 backwards,
	studeyForS_card_t_l 1.8s var(--easing) 1.2s 1 both;
	@media (max-width: 640px) {
		& h3 {
			height: auto;
			padding: 0.25em 0;
		}
	}
}

@keyframes studeyForS_card_t_l {
	0% {
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%) rotate(0);
	}
}
@keyframes studeyForS_card_t_r {
	0% {
		top: 50%;
		right: 50%;
		transform: translate(50%,-50%) rotate(0);
	}
}
@keyframes studeyForS_card_b_l {
	0% {
		bottom: 50%;
		left: 50%;
		transform: translate(-50%,50%) rotate(0);
	}
}
@keyframes studeyForS_card_b_r {
	0% {
		bottom: 50%;
		right: 50%;
		transform: translate(50%,50%) rotate(0);
	}
}
#sec1 .studeyForS_card li:nth-child(1) {
	/* top: 10%; */
	top: 120px;
	right: 70%;
	transform: rotate(-27.59deg);
	z-index: 1;
	animation: fadeInAnime 0.3s ease 1s 1 backwards,
	studeyForS_card_t_r 2s var(--easing) 1.2s 1 backwards;
	@media (max-width: 640px) {
		top: 34%;
		right: -15%;
		transform: rotate(-44.45deg);
	}
}
#sec1 .studeyForS_card li:nth-child(2) {
	z-index: 3;
	top: 50%;
	right: 67%;
	transform: rotate(29.73deg);
	animation: fadeInAnime 0.3s ease 1s 1 backwards,
	studeyForS_card_t_r 2s var(--easing) 1.2s 1 backwards;
	@media (max-width: 640px) {
		top: 22%;
		right: 20%;
		transform: rotate(19.16deg);
	}
}
#sec1 .studeyForS_card li:nth-child(3) {
	top: 40%;
	right: 2%;
	transform: rotate(19.16deg);
	z-index: 7;
	animation: fadeInAnime 0.3s ease 1s 1 backwards,
	studeyForS_card_t_r 2s var(--easing) 1.2s 1 backwards;
	@media (max-width: 640px) {
		top: auto;
		bottom: 1.5%;
		right: auto;
		left: 8%;
		transform: rotate(-43.79deg);
		animation: fadeInAnime 0.3s ease 1s 1 backwards,
		studeyForS_card_b_l 2s var(--easing) 1.2s 1 backwards;
	}
}
#sec1 .studeyForS_card li:nth-child(4) {
	top: 0;
	left: 70%;
	transform: rotate(28.63deg);
	z-index: 6;
	@media (max-width: 640px) {
		top: -0;
		left: 60%;
		transform: rotate(-23.26deg);
	}
}
#sec1 .studeyForS_card li:nth-child(5) {
	top: -3%;
	left: 48%;
	transform: rotate(-8.88deg);
	z-index: 4;
	@media (max-width: 640px) {
		top: 40%;
		left: -5%;
		transform: rotate(48.03deg);
	}
}
#sec1 .studeyForS_card li:nth-child(6) {
	z-index: 5;
	transform: none;
	top: 42%;
	left: 45%;
	transform: rotate(-32.47deg);
	@media (max-width: 640px) {
		top: 12vw;
		left: -5vw;
		transform: rotate(-5.19deg);
	}
}
#sec1 .studeyForS_card li:nth-child(7) {
	top:5%;
	left: max(200px,25%);
	transform: rotate(9.68deg);
	z-index: 2;
	@media (max-width: 640px) {
		top: auto;
		bottom: 10%;
		right: 0;
		transform: rotate(52.34deg);
		animation: fadeInAnime 0.3s ease 1s 1 backwards,
		studeyForS_card_b_r 2s var(--easing) 1.2s 1 backwards;
	}
}
#sec1 .loopText {
	position: absolute;
	left: 0;
	bottom: 5.6%;
	font-size: 112px;
	font-weight: 600;
	z-index: 9;
	pointer-events: none;
	display: flex;
	animation: loopText 15s linear infinite;
	@media (max-width: 640px) {
		font-size: 20.5vw;
	}
}
#sec1 .loopText > span {
	flex-shrink: 0;
	white-space: nowrap;
	padding-right: 0.5em;
}
@keyframes loopText {
	0% { transform: translateX(0);}
	100% { transform: translateX(-50%);}
}


/* ナビゲーションメニュー */
#kkskn_studyfors_nav {
	max-width: 100%;
	display: flex;
	justify-content: center;
	gap: 0 min(60px,3vw);
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	@media (max-width: 840px) {
		padding: 0 10%;
		flex-wrap: wrap;
	}
	@media (max-width: 640px) {
		display: none;
	}
}
#kkskn_studyfors_nav a {
	display: flex;
	min-width: fit-content;
	height: 87px;
	padding: 0 10px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	@media (max-width: 840px) {
		height: auto;
		padding: 1em 10px;
	}
}
#kkskn_studyfors_nav .label {
	font-size: 18px;
	font-weight: 600;
}
#kkskn_studyfors_nav .text {
	font-size: 12px;
	
}

/* sec2 */
.sec2Wrap {
	max-width: 100%;
	overflow: hidden;
}
.sec2 {
	display: flex;
	align-items: center;
	height: 630px;
	flex-direction: row-reverse;
	@media (max-width: 640px) {
		height: auto;
		flex-direction: column;
		overflow: hidden;
		border-top: 1px solid #000;
		padding: 18.46vw 0 16.4vw;
		gap: 12.3vw;
	}
}
.sec2 .ttls {
	width: 50%;
	position: relative;
	@media (max-width: 640px) {
		width: 83.58vw;
	}
}
.sec2 .ttls .ttl1 {
	font-size: clamp(20px,3.2vw,32px);
	font-weight: 600;
	letter-spacing: 0.05em;
	@media (max-width: 640px) {
		font-size: 5.176vw;
	}
}
.sec2 .ttls h2 {
	position: relative;
	width: fit-content
}
.sec2 .ttls .ttl2 {
	font-size: clamp(64px,8.8vw,96px);
	font-weight: 600;
	@media (max-width: 640px) {
		font-size: 14.87vw;
	}
}
.sec2 .ttls .stext1 {
	font-size: clamp(12px,1.48vw,16px);
	font-weight: 700;
	position: absolute;
	top: 0;
	right: 0;
	transform: translateY(-100%);
	@media (max-width: 640px) {
		font-size: 2.58vw;
	}
}
.sec2 .ttls .stext2 {
	display: block;
	font-size: clamp(18px,2.2vw,24px);
	font-weight: 600;
	text-align: right;
	@media (max-width: 640px) {
		font-size: 3.88vw;
	}
}
.sec2 .ttls h3 {
	font-size: clamp(32px,4.3vw,48px);
	font-weight: 600;
	line-height: 1.5em;
	@media (max-width: 640px) {
		font-size: 7.76vw;
	}
}
@keyframes sAnime1 {
	0% {
		transform: translateY(-8%);
	}
	100% {
		transform: translateY(8%);
	}
}
@keyframes sAnime2 {
	0% {
		transform: translateY(9%);
	}
	100% {
		transform: translateY(-9%);
	}
}

.sec2 .ttls .backAnime span {
	position: absolute;
	font-family: var(--fontEN);
	font-size: 36px;
	font-weight: 600;
	z-index: -1;
	pointer-events: none;
	animation: sAnime1 1.8s ease-in-out infinite alternate-reverse;
	@media (max-width: 640px) {
		font-size: 5.9vw;
	}
}
.sec2 .ttls .backAnime span:nth-child(1) { 
	color: var(--coltype1);
	left: 20px;
	top: -100px;
	@media (max-width: 640px) {
		top: -18vw;
		left: 10.1vw;
	}
}
.sec2 .ttls .backAnime span:nth-child(2) {
	color: var(--coltype2);
	left: -55px;
	top: 40%;
	animation-name: sAnime2;
	animation-duration: 2.1s;
	@media (max-width: 640px) {
		top: 12vw;
		left: -5vw;
	}
}
.sec2 .ttls .backAnime span:nth-child(3) {
	color: var(--coltype3);
	bottom: -90px;
	left: 160px;
	animation-duration: 2s;
	@media (max-width: 640px) {
		bottom: -14vw;
		left: 30vw;
	}
}
.sec2 .ttls .backAnime span:nth-child(4) {
	color: var(--coltype4);
	bottom: 0;
	right: 0;
	animation-name: sAnime2;
	animation-duration: 2s;
	@media (max-width: 640px) {
		bottom: 5vw;
	}
}
.sec2 .ttls .backAnime span:nth-child(5) {
	color: var(--coltype5);
	top: -60px;
	left: 147px;
	animation-duration: 2.3s;
	@media (max-width: 640px) {
		top: -12vw;
		left: 30vw;
	}
}
.sec2 .ttls .backAnime span:nth-child(6) {
	color: var(--coltype6);
	bottom: -60px;
	left: 295px;
	animation-name: sAnime2;
	animation-duration: 2.4s;
	@media (max-width: 640px) {
		bottom: -8vw;
		left: 52vw;
	}
}
.sec2 .ttls .backAnime span:nth-child(7) {
	color: var(--coltype7);
	right: -58px;
	top: -90px;
	animation-duration: 2.6s;
	@media (max-width: 640px) {
		top: -11vw;
		right: 12vw;
	}
}
.sec2 .textArea {
	width: 50%;
	@media (max-width: 640px) {
		width: 83.58vw;
	}
}
.sec2 .textArea p {
	font-size: clamp(14px,3vw,18px);;
	line-height: 2.4em;
	@media (max-width: 640px) {
		font-size: 3.84vw;
	}
}
.sec2 .textArea p + p {
	margin-top: 2em;
}

/* sec3 〜 sec7 共通部分 */
.sec3,
.sec4,
.sec5,
.sec6,
.sec7 {
	padding-top: 100px;
	padding-bottom: 100px;
	border-top: 1px solid #000;
	@media (max-width: 640px) {
		padding-top: 16.41vw;
		padding-bottom: 16.41vw;
	}
}
.areaTtl .copy {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 16px;
	@media (max-width: 640px) {
		font-size: 4.1vw;
	}
}
.areaTtl h3 span {
	font-size: 80px;
	font-weight: 600;
	@media (max-width: 640px) {
		font-size: 13.589vw;
	}
}
.areaTtl h3 span.small {
	font-size: 32px;
	margin-left: 0.5em;
	@media (max-width: 640px) {
		font-size: 5.43vw;
		margin-left: 0;
		display: block;
		margin-top: 0.25em;
	}
}
.areaTtl .text {
	margin-top: 16px;
	@media (max-width: 640px) {
		font-size: 3.58vw;
	}
}

/* --- .slider ---- */
.slideArea .pagingBtn {
	position: absolute;
	top: 50%;
	left: 2vw;
	width: min(40px,10vw);
	aspect-ratio: 1;
	background: #FFF;
	transform: translateY(-50%);
	transition: 0.2s ease;
	z-index: 1;
	cursor: pointer;
	box-shadow: 0 0 5px rgba(0,0,0,0.1);
	&.next {
		left: auto;
		right: 2vw;
	}
	&.off {
		opacity: 0;
	}
	@media (min-width: 641px) {
		&:hover {
			background: #dfdfdf;
		}
	}
}
.slideArea .pageDot {
	margin-top: 1em;
	display: flex;
	justify-content: center;
	gap: min(4px,0.8vw);
	@media (min-width: 641px) {
		display: none;
	}
}
.slideArea .pageDot span {
	display: block;
	width: min(30px,3.2vw);
	aspect-ratio: 1;
	background: var(--couseCol);
	border-radius: 100%;
	scale: 0.6;
	transition: 0.2s ease;
}
.slideArea .pageDot span.now { scale: 1;}

/* .sec3 StudyForS */
.sec3 {
	background: url("images/studyfors_back_pc.jpg") no-repeat center center;
	background-size: cover;
	position: relative;
	overflow: hidden;
	@media (max-width: 640px) {
		background-image: url("images/studyfors_back_sp.jpg");
	}
}
.sec3 .bgText {
	position: absolute;
	font-size: 300px;
	font-weight: 600;
	text-box-edge: ex alphabetic;
	line-height: 0.65em;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 0;
	pointer-events: none;
	@media (max-width: 640px) {
		font-size: 23vw;
	}
}
.sec3 .slideArea {
	position: relative;
	overflow: hidden;
	--liGap: 16px;
	--now: 0;
	--sliderPos: -1;
}
.sec3 .slideArea .slider {
	margin-top: 40px;
	display: flex;
	width: fit-content;
	gap: 0;
	transform: translateX(calc((100%/3)*var(--sliderPos)));
	/* animation: loopText 20s linear infinite;
	&:hover {
		animation-play-state: paused;
	} */
	@media (max-width: 640px) {
		margin-top: 9.2vw;
	}
}
.sec3 .studeyForS_card {
	position: relative;
	display: flex;
	width: fit-content;
	gap: var(--liGap);
	padding-left: var(--liGap);
	z-index: 1;
	transition: 0.3s ease;
	transform: translateX(calc(
			-1 * (var(--liW) + var(--liGap)) * var(--now)
		));
	& li {
		box-shadow: 3px 3px 20px rgb(0,0,0,0.1);
	}
}

.sec3 .studeyForS_card > li.close a {
	pointer-events: none;
}
.sec3 .studeyForS_card > li.close .card-header:after {
	content: "";
	position: absolute;
	width: 100%;
	height: calc(100% - 30px);
	bottom: -1px;
	left: 0;
	background: var(--couseCol);
	@media (max-width: 640px) {
		height: calc(100% - 30px);
	}
}
.sec3 .studeyForS_card > li.close h3 {
	opacity: 0;
}
.sec3 .studeyForS_card > li.close .image {
	position:relative;
}
.sec3 .studeyForS_card > li.close .image:before {
	content: "";
	position: absolute;
	width: 100%;
	height: calc(100% + 14px);
	top: -14px;
	left: 0;
	background: var(--couseCol);
}
.sec3 .studeyForS_card > li.close .image:after {
	content: "";
	width: 105px;
	aspect-ratio: 105/44;
	background: url("images/commingsoon.png") no-repeat center;
	background-size: contain;
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
}

/* .sec4 Discover */
.sec4 .mainW {
	position: relative;
}
.sec4 .discover_box {
	margin-top: 60px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	--gap: 24px;
	gap: var(--gap);
	&.open {
		pointer-events: none;
	}
	@media (max-width: 640px) {
		margin-top: 9vw;
		flex-direction: column;
		flex-wrap: nowrap;
		--gap: 2.5vw;
	}
}
.sec4 .discover_box > li {
	container-type: inline-size;
	width: calc((100% - var(--gap)*2)/3);
	border: 1px solid #000;
	background: #FFF;
	padding: 40px 18px 32px;
	cursor: pointer;
	box-shadow: 3px 3px 20px rgb(0,0,0,0.1);
	transition: 1s ease;
	transform: translateY(50px);
	--delay: 0;
	transition-delay: calc(var(--delay) * 0.1s);
	opacity: 0;
	&.show {
		transform: translateY(0);
		opacity: 1;
	}
	&:nth-child(3n+2) { --delay: 1; }
	&:nth-child(3n) { --delay: 2; }
	@media (max-width: 1000px) {
		width: calc((100% - var(--gap))/2);
		&:nth-child(2n+1) { --delay: 0; }
		&:nth-child(2n) { --delay: 1; }
	}
	@media (max-width: 640px) {
		width: 100%;
		padding: 3vw 4vw;
		--delay: 0;
	}
}
.sec4 .discover_box > li:hover,
.sec4 .discover_box > li.open {
	background: #FCE5E9;
	transition: 0.2s ease;
	transition-delay: 0s!important;
}
.sec4 .discover_box > li .image,
.sec4 .discover_box > li .text {
	display: none;
}
.sec4 .discover_box > li .label,
.sec4 .popup .label {
	position: relative;
	font-family: var(--fontEN);
	font-size: 13px;
	font-weight: 600;
	padding-bottom: 12px;
	@media (max-width: 640px) {
		font-size: 3vw;
		padding-bottom: 0.5em;
	}
}
.sec4 .discover_box > li .label:after,
.sec4 .popup .label:after {
	content: "";
	width: 32px;
	height: 1px;
	background: #000;
	position: absolute;
	bottom: 0;
	left: 0;
	@media (max-width: 640px) {
		width: 8.2vw;
	}
}
.sec4 .discover_box > li h4 {
	font-size: min(20px,6.8cqw);
	font-weight: 600;
	line-height: 1.5em;
	margin-top: 12px;
	word-break: auto-phrase;
	@media (max-width: 640px) {
		font-size: 4.1vw;
		margin-top: 2vw;
	}
}
.sec4 .discover_box > li h4 br {
	display: none;
	&.all {
		display: block;	
	}
	@media (min-width: 641px) {
		&.pc_list {
			display: block;	
		}
	}
	@media (max-width: 640px) {
		&.sp_list {
			display: block;
		}
	}
}

.popup {
	/* position: absolute;
	width: 100%;
	height: 110%;
	left: 0;
	top: -5%; */
	position: fixed;
	width: 98vw;
	height: 100vh;
	top: 0; left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none;
	opacity: 0;
	transition: 0.3s ease;
	z-index:10;
	/* .open + & {
		pointer-events: visible;
		opacity: 1;
	} */
	.discover_box[data-now="1"] ~ &.d1 {
		pointer-events: visible;
		opacity: 1;
	}
	.discover_box[data-now="2"] ~ &.d2 {
		pointer-events: visible;
		opacity: 1;
	}
	.discover_box[data-now="3"] ~ &.d3 {
		pointer-events: visible;
		opacity: 1;
	}
	.discover_box[data-now="4"] ~ &.d4 {
		pointer-events: visible;
		opacity: 1;
	}
	.discover_box[data-now="5"] ~ &.d5 {
		pointer-events: visible;
		opacity: 1;
	}
	.discover_box[data-now="6"] ~ &.d6 {
		pointer-events: visible;
		opacity: 1;
	}
	.discover_box[data-now="7"] ~ &.d7 {
		pointer-events: visible;
		opacity: 1;
	}
	.discover_box[data-now="8"] ~ &.d8 {
		pointer-events: visible;
		opacity: 1;
	}
	.discover_box[data-now="9"] ~ &.d9 {
		pointer-events: visible;
		opacity: 1;
	}
}
.sec4 .popup .bgArea {
	position: absolute;
	width: 100%;
	height: 100%;
	/* backdrop-filter: blur(5px); */
	background: #f7f7f7;
	opacity: 0.6;
	cursor: pointer;
	transition: 0.3s ease;
}
.sec4 .popup .popupBox {
	position: relative;
	width: 92%;
	max-width: 768px;
	padding: 40px;
	background: #FFF;
	border: 1px solid #000;
	display: flex;
	gap: 24px;
	box-shadow: 3px 3px 20px rgb(0,0,0,0.1);
	@media (max-width: 640px) {
		max-width: 90vw;
		flex-direction: column;
		padding: 5.1vw 5.1vw 12vw;
		gap: 6vw;
	}
}
.sec4 .popup .image {
	width: 43%;
	flex-shrink: 0;
	@media (max-width: 640px) {
		width: 100%;
		& img {
			width: 100%;
		}
	}
}

.sec4 .popup h4 {
	font-size: 24px;
	font-weight: 600;
	margin: 0.5em 0;
	line-height: 1.5em;
	letter-spacing: 0;
	@media (max-width: 640px) {
		font-size: 4vw;
	}
}
.sec4 .popup.d3 h4 {
	@media (min-width: 641px) {
		font-size: 20px;
	}
}
.sec4 .popup h4 br {
	display: none;
	&.all {
		display: block;	
	}
	@media (min-width: 641px) {
		&.pc_popup {
			display: block;	
		}
	}
	@media (max-width: 640px) {
		&.sp_popup {
			display: block;
		}
	}
}
.sec4 .popup .text {
	font-size: 14px;
	line-height: 2em;
	@media (max-width: 640px) {
		font-size: 3vw;
		line-height: 1.8em;
	}
}

.sec4 .popup .popupBox .closeBtn {
	position: absolute;
	top: 16px;
	right: 16px;
	transition: 0.2s ease;
	cursor: pointer;
	@media (max-width: 640px) { 
		display: flex;
		font-size: 4.6vw;
		top: auto;
		bottom: 5.1vw;
		right: 50%;
		transform: translateX(50%);
		justify-content: center;
		align-items: center;
	}
}
.sec4 .popup .popupBox .closeBtn img {
	width: 28px;
	aspect-ratio: 1;
	@media (max-width: 640px) { 
		width: 4.6vw;
	}
}
.sec4 .popup .popupBox .closeBtn:before {
	@media (max-width: 640px) {
		content: "CLOSE";
		font-family: var(--fontEN);
		font-weight: 600;
		line-height: 1em;
	}
}
.sec4 .popup .popupBox .closeBtn:hover {
	opacity: 0.6;
}

/* sec5 keyword */
.sec5 {
	position: relative;
	padding-bottom: 50px;
	@media (max-width: 640px) {
		padding-bottom: 5.1vw;
	}
}
.sec5 .slideArea {
	overflow: hidden;
	position: relative;
	padding-bottom: 50px;
	margin-top: 60px;
	@media (max-width: 640px) {
		margin-top: 9vw;
		width: 100vw;
		left: -6vw;
		padding-left: 6vw;
		padding-bottom: 5.1vw;
	}
}
.sec5 .slideArea .pagingBtn {
	top: 45%;
}
.sec5 .courses {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	--gap: min(24px,1.8vw);
	gap: var(--gap);
	@media (max-width: 640px) {
		--now: 0;
		--liW: 81.2vw;
		flex-wrap: nowrap;
		width: fit-content;
		position: relative;
		transition: 0.3s ease;
		transform: translateX(calc(
			-1 * (var(--liW) + var(--gap)) * var(--now)
		));
	}
}
.sec5 .courses .course {
	position: relative;
	width: calc((100% - var(--gap)*2)/3);
	background: #FFF;
	border:1px solid #000;
	padding: 24px min(30px,2vw);
	display: flex;
	flex-direction: column;
	box-shadow: 3px 3px 20px rgb(0,0,0,0.1);
	--delay: 0;
	transition-delay: calc(var(--delay) * 0.1s);
	&:nth-child(3n+2) { --delay: 1;}
	&:nth-child(3n) { --delay: 2;}
	@media (max-width: 1000px) {
		width: calc((100% - var(--gap))/2);
		&:nth-child(2n+1) { --delay: 0;}
		&:nth-child(2n) { --delay: 1;}
	}
	@media (max-width: 640px) {
		width: var(--liW);
		padding: 6.1vw;
		&:nth-child(1) { --delay: 0;}
		&:nth-child(2) { --delay: 1;}
	}
}
.sec5 .course h4 {
	font-size: 24px;
	font-weight: 600;
	@media (max-width: 640px) {
		font-size: 6.1vw;
	}
}
.sec5 .course .text {
	position: relative;
	font-size: 13px;
	margin-top: 0.6em;
	padding-bottom: 16px;
	@media (max-width: 640px) {
		font-size: 3.3vw;
		padding-bottom: 4vw;
	}
}
.sec5 .course .text:after {
	content: "";
	width: 32px;
	height: 1px;
	background: #000;
	position: absolute;
	bottom: 0;
	left: 0;
	@media (max-width: 640px) {
		width: 8.2vw;
	}
}
.sec5 .course .tagList {
	height: max-content;
	flex-grow: 1;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	font-size: 13px;
	gap: 0.6em;
	margin-top: 1.84em;
	line-height: 1em;
	@media (max-width: 640px) {
		font-size: 3.3vw;
		margin-top: 4vw;
		gap: 0.5em 0.4em;
	}
}
.sec5 .course .tagList li {
	padding: 0.6em;
	background: rgb(from var(--couseLightCol) r g b /0.5);
	border: 1px solid #000;
	border-radius: 100px;
}
.sec5 .course .btn {
	position: relative;
	display: block;
	margin-top: 24px;
	width: 100%;
	height: 50px;
	line-height: 50px;
	background: #000;
	color: #FFF;
	text-align: center;
	@media (max-width: 640px) {
		font-size: 3.8vw;
		height: 12.8vw;
		margin-top: 5vw;
	}
}
.sec5 .course .btn:after {
	content: "";
	display: block;
	width: 16px;
	aspect-ratio: 1;
	background: url("images/arrow_right.png") no-repeat center;
	background-size: contain;
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
}
/* .slideArea .pagingBtn {
	position: absolute;
	top: 50%;
	left: 2vw;
	width: 10vw;
	aspect-ratio: 1;
	background: #FFF;
	transform: translateY(-50%);
	&.off {
		opacity: 0;
	}
}
.slideArea .pagingBtn.next {
	left: auto;
	right: 2vw;
}
.slideArea .pageDot {
	margin-top: 1em;
	display: flex;
	justify-content: center;
	gap: 0.8vw;
} */
.sec5 .slideArea .pageDot {
	@media (min-width: 641px) {
		display: none;
	}
}
/* .slideArea .pageDot span {
	display: block;
	width: 3.2vw;
	aspect-ratio: 1;
	background: var(--couseCol);
	border-radius: 100%;
	scale: 0.6;
}
.slideArea .pageDot span.now { scale: 1;} */

/* sec6 open campus, sec7 admission */
.sec6,.sec7 {
	& .areaTtl {
		margin-bottom: 60px;
		@media (max-width: 640px) {
			margin-bottom: 9vw;
		}
	}
	& h4 {
		font-size: 24px;
		font-weight: 600;
		letter-spacing: 0.05em;
		margin-bottom: 12px;
		@media (max-width: 640px) {
			font-size: 5.1vw;
			margin-bottom: 2vw;
		}
		& .jp {
			font-size: 0.66em;
			font-family: var(--fontJP);
		}
	}
	& .box + h4 {
		margin-top: 36px;
		@media (max-width: 640px) {
			margin-top: 9vw;
		}
	}
	& .box {
		background: #FFF;
		border: 1px solid #000;
		padding: 24px;
		@media (max-width: 640px) {
			padding: 4vw;
		}
	}
	& .date {
		font-size: 32px;
		font-weight: 600;
		@media (max-width: 640px) {
			font-size: 7.1vw;
		}
	}
	& .date span {
		font-family: var(--fontJP);
		font-size: 0.5em;
		margin-left: 0.1em;
	}
}
.sec6 .box:not(:last-child) {
	display: flex;
	align-items: center;
	gap: 40px;
	margin-top: 16px;
	@media (max-width: 1000px) {
		flex-direction: column;
		align-items: flex-start;
		gap: 1em;
	}
	@media (max-width: 640px) {
		flex-direction: column;
		gap: 2vw;
		margin-top: 4.1vw;
	}
}
.sec6 .tag {
	width: 200px;
	height: 36px;
	line-height: 34px;
	text-align: center;
	font-size: 16px;
	background: rgb(from #E6001F r g b /0.3);
	border: 1px solid #000;
	@media (max-width: 640px) {
		width: 100%;
	}
}
.sec6 .box ul {
	flex-grow: 1;
	display: flex;
	gap: 0.5em;
	@media (max-width: 640px) {
		width: 100%;
		flex-wrap: wrap;
		gap: 0 0.5em;
		justify-content: flex-start;
	}
}
.sec6 .box .text {
	width: 100%;
	text-align: center;
	@media (max-width: 640px) {
		text-align: left;
	}
}
.sec6 .btn {
	display: block;
	font-size: 16px;
	max-width: 526px;
	padding: 32px;
	text-align: center;
	background: #000;
	color: #FFF;
	margin: 36px auto 0;
	@media (max-width: 640px) {
		margin-top: 9vw;
		padding: 3.6vw;
		font-size: 3.8vw;
	}
}

.sec7 {
	padding-bottom: 2em;
	&:not(.lineOff) {
		margin-bottom: -100px;
		@media (max-width: 640px) {
			margin-bottom: 0;
		}
	}
}
.sec7 .boxWrap {
	display: flex;
	flex-wrap: wrap;
	--gap: 16px;
	gap: var(--gap);
	margin-bottom: 36px;
	@media (max-width: 640px) {
		margin-bottom: 9vw;
	}
}
.sec7 .boxWrap .box {
	width: 100%;
}
.sec7 .boxWrap .box.box-half {
	width: calc((100% - var(--gap))/2);
	@media (max-width: 840px) {
		width: 100%;
	}
	@media (max-width: 640px) {
		width: 100%;
	}
}
.sec7 .box h5 {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 16px;
	@media (max-width: 640px) {
		font-size: 4.6vw;
		margin-bottom: 3vw;
	}
}
.sec7 .box.box-event1 {
	display: flex;
	gap: 48px;
	@media (max-width: 840px) {
		gap: 24px;
	}
	@media (max-width: 640px) {
		flex-direction: column;
		gap: 4vw;
	}
}
.sec7 .tag {
	width: fit-content;
	height: 34px;
	line-height: 32px;
	padding: 0 24px;
	font-size: 15px;
	background: rgb(from #464849 r g b /0.3);
	border: 1px solid #000;
	@media (max-width: 840px) {
		padding: 0 1em;
	}
	@media (max-width: 640px) {
		padding: 0;
		width: 100%;
		height: auto;
		line-height: 2em;
		text-align: center;
	}
}
.sec7 .box.box-event1 .tag {
	background: rgb(from #E6001F r g b /0.3);
}
.sec7 .box.box-event1 .comment {
	flex-grow: 1;
	max-width: 450px;
	padding: 20px 36px;
	background: rgb(from #E6001F r g b /0.3);
	border-radius: 20px;
	font-size: 18px;
	position: relative;
	@media (max-width: 840px) {
		padding: 1em;
		width: 40%;
		font-size: 16px;
	}
	@media (max-width: 640px) {
		padding: 3vw 4vw;
		width: 100%;
		max-width: 100%;
		font-size: 3.6vw;
		text-align: center;
	}
}
.sec7 .box.box-event1 .comment:after {
	content: "";
	display: block;
	width: 10px;
	height: 20px;
	clip-path: polygon(0 50%, 100% 0, 100% 100%);
	background: rgb(from #E6001F r g b /0.3);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(-99%,-50%);
	@media (max-width: 640px) {
		display: none;
	}
}
.sec7 .box .date {
	display: flex;
	align-items: center;
	gap: 16px;
	@media (max-width: 640px) {
		flex-direction: column;
		align-items: flex-start;
		gap: 2vw;
	}
}
.sec7 ul {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	@media (max-width: 640px) {
		gap: 4vw;
	}
}
.sec7 ul li {
	background: #FFF;
	border: 1px solid #000;
	padding: 20px 36px;
	@media (max-width: 640px) {
		padding: 3vw 4vw;
		width: 100%;
		text-align: center;
	}
}

/* LINEバナー */
#kkskn_studyfors_line {
	position: sticky;
	width: 237px;
	padding: 18px;
	background: #FFF;
	--lineCol: #19C756;
	border: 1px solid var(--lineCol);
	left: 90%;
	bottom: 80px;
	margin-right: 8px;
	margin-bottom: 8px;
	margin-top: 16px;
	z-index: 9;
	@media (max-width: 640px) {
		width: 40vw;
		padding: 3.6vw;
		bottom: 20vw;
		margin-top: 4vw;
		margin-bottom: 4vw;
		left: 57vw;
	}
}
#kkskn_studyfors_line.close {
	display: none;
}
#kkskn_studyfors_line .closeBtn {
	width: 20px;
	aspect-ratio: 1;
	position: absolute;
	top: 3px;
	right: 3px;
	cursor: pointer;
	transition: 0.2s ease;
	@media (max-width: 640px) {
		width: 5.5vw;
		top: 0.4vw;
		right: 0.4vw;
	}
}
#kkskn_studyfors_line .closeBtn:hover {
	opacity: 0.6;
}
#kkskn_studyfors_line .comment {
	background: rgb(from var(--lineCol) r g b /0.2);
	border-radius: 20px;
	font-size: 11px;
	text-align: center;
	padding: 10px 12px;
	@media (max-width: 640px) {
		font-size: 2.56vw;
		padding: 1.5vw 2vw;
	}
}
#kkskn_studyfors_line .find {
	font-size: 14px;
	color: var(--lineCol);
	font-weight: 600;
	text-align: center;
	margin: 0.6em 0 0.3em;
	@media (max-width: 640px) {
		font-size: 2.8vw;
	}
}
#kkskn_studyfors_line .btn {
	display: block;
	background: var(--lineCol);
	color: #FFF;
	font-size: 13px;
	line-height: 2.76em;
	text-align: center;
	@media (max-width: 640px) {
		font-size: 3.3vw;
	}
}

/* TOPに戻る */
.topBtn {
	display: block;
	position: sticky;
	width: 52px;
	aspect-ratio: 1;
	font-size: 12px;
	background: #000;
	border-radius: 100%;
	text-align: center;
	line-height: 48px;
	color: #FFF;
	border: 2px solid #FFF;
	bottom: 16px;
	left: 100%;
	margin-bottom: 8px;
	margin-right: 18px;
	@media (max-width: 640px) {
		width: 14vw;
		font-size: 3.5vw;
		line-height: calc(14vw - 4px);
		left: 82vw;
		margin-right: 0;
		margin-bottom: 4vw;
		bottom: 4vw;
	}
}


/* スクロールでふわっと表示 */
@media screen {
	.slideIn {
		transform: translateY(50px);
		opacity: 0;
		transition: 1s ease;
		&.show {
			transform: none;
			opacity: 1;
		}
	}
}