@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;300;400;500;600;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=Inter:wght@100..900&family=Oswald:wght@200..700&display=swap');

html,body{
	font-family:Inter, YakuHanJP, 'Noto Sans JP', sans-serif;
	font-weight:400;
	line-height:1.8em;
	box-sizing: border-box;
	font-feature-settings:"palt";
	margin:0;
	padding:0;
	position:relative;}

*	{margin:0;padding:0;list-style:none;box-sizing:border-box;text-align:justify;}

h1,h2,h3,h4
	{font-size: 1em;margin:0;padding:0;}

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

.t_mms	{font-size: 0.5em;line-height:1.2em !important;}
.t_ms	{font-size: 0.8em;}
.t_em	{font-size: 1.0em;}
.t_s	{font-size: 1.1em;}
.t_m	{font-size: 1.2em;}
.t_l	{font-size: 1.5em;}
.t_ll	{font-size: 1.625em;}
.t_xl	{font-size: 1.875em;}
.t_xxl	{font-size: 3.0em;line-height:1.0em !important;}

.txt_l	{font-weight: 200;}
.txt_r	{font-weight: 400;}
.txt_b	{font-weight: 600;}
.txt_eb	{font-weight: 800;}

.indent	{text-indent:-1em;padding-left:1em;}
.indent2{text-indent:-2em;padding-left:2em;}
.indent3{text-indent:-3em;padding-left:3em;}

.t_left		{text-align:left;}
.t_right	{text-align:right;}
.t_center	{text-align:center;}

.t_gold		{color:#8f713c;}
.t_silver	{color:#9fa0a0;}
.t_red		{color:#e61911;}
.t_dred		{color:#c42a15;}
.t_blue		{color:#1d2088;}
.t_color	{color:#231815;}
.t_skyblue	{color:#00afec;}
.t_white	{color:#fff;}

.t_sh5		{text-shadow:0px 0px 5px #000;}
.t_sh10		{text-shadow:0px 0px 10px #000;}

a	{text-decoration:none;color:#000;-webkit-text-decoration-skip: none;}
a:hover,
a:focus	{text-decoration:underline;opacity:0.5;transition:0.5s;}

a.other	{
	background-image:url(../img/icon_otherlink.png);
	background-position:right 10px top 50%;
	background-repeat:no-repeat;}

a.other_w{
	background-image:url(../img/icon_otherlink_w.png);
	background-position:right 10px top 50%;
	background-repeat:no-repeat;}

a.other_txt	{
	padding-right:18px;
	background-image:url(../img/icon_otherlink.png);
	background-position:right 0 top 50%;
	background-repeat:no-repeat;}

img	{vertical-align:bottom;}
img.w	{width: 100%;}

.skip{
	position: absolute;
	margin-left:-9999px;}

@media screen and (max-width:640px){
a	{-webkit-text-decoration-skip: none;}
}

.cf:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}

.pc	{display:inline;}
.sp	{display:none;}

@media screen and (max-width:640px){
.pc	{display:none;}
.sp	{display:inline;}
}


/* scroll fade */
/* 基本のフェードイン */
.fade-in{
	opacity: 0;
	transition: opacity 0.5s;}

.fade-in.active{
	opacity: 1;}

/* 左からフェードイン */
.fade-in-left{
	opacity: 0;
	transform: translateX(-100px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-left.active{
	opacity: 1;
	transform: translateX(0);}

/* 右からフェードイン */
.fade-in-right{
	opacity: 0;
	transform: translateX(100px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-right.active{
	opacity: 1;
	transform: translateX(0);}

/* 上からフェードイン */
.fade-in-up{
	opacity: 0;
	transform: translateY(-100px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-up.active{
	opacity: 1;
	transform: translateY(0);}

/* 下からフェードイン */
.fade-in-down{
	opacity: 0;
	transform: translateY(100px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-down.active{
	opacity: 1;
	transform: translateY(0);}

@media screen and (max-width:500px){
/* scroll fade */

/* 左からフェードイン */
.fade-in-left{
 	transition: opacity 1.0s, transform 0.5s;}

/* 右からフェードイン */
.fade-in-right{
 	transition: opacity 1.0s, transform 0.5s;}

/* 上からフェードイン */
.fade-in-up{
 	transition: opacity 1.0s, transform 0.5s;}

/* 下からフェードイン */
.fade-in-down{
 	transition: opacity 1.0s, transform 0.5s;}
}

/* 並びのフェードイン */
.fade-in-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-item.active {
  opacity: 1;
  transform: translateY(0);
}



/* header */
header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	position:relative;
	width:100%;
	padding-top:40px;
	padding-bottom:40px;
	padding-right:calc((100% - 1100px) / 2);
	box-sizing:border-box;}

header div.instagram{
	display:flex;
	justify-content:space-between;
	align-items:center;
	position:absolute;
	top:20px;
	right:calc((100% - 1100px) / 2);}

header div.instagram a{
	font-size:0.7em;
	font-weight:600;
	color:#71c7d5;}

header div.instagram img{
	width:29px;
	height:29px;
	margin-left:0.5em;}

@media screen and (max-width:1200px){
header{
	padding-right:50px;}

header div.instagram{
	right:50px;}
}

@media screen and (max-width:640px){
header{
	padding-right:20px;
	padding-top:20px;
	padding-bottom:20px;}

header div.instagram{
	display:none;}

header h1 img{
	height:80px;}
}



/* PC版グローバルメニュー*/
.nav-toggle {
	display:none;}

header nav {
	display:block;
	position:static;}

header nav ul{
	display:flex;
	border-radius:20px;}

header nav ul li{
	position:relative;
	width:150px;}

header nav ul li a{
	display:block;
	text-align:center;
	padding:3px;
	color:#000;
	transition:0.5s;
	text-decoration:none;
	border:2px solid #71c7d5;
	border-right:none;}

header nav ul li:first-child a{
	border-radius:20px 0 0 20px;}

header nav ul li.access a{
	border-radius:0 20px 20px 0;
	border-right:2px solid #71c7d5;}

header nav ul li a:hover{
	background-color:#71c7d5;
	text-decoration:none;
	color:#fff;
	opacity:1;}

header nav ul li::after{
	position:absolute;
	font-size:0.7em;
	line-height:1.2em;
	text-align:center;
	font-weight:600;
	top:45px;
	left:50%;
	transform:translateX(-50%);
	white-space: pre;
	color:#71c7d5;}

header nav ul li.course::after{
	content:"Course";}

header nav ul li.laboratory::after{
	content:"Laboratory";}

header nav ul li.employment::after{
	content:" Further education \A employment ";}

header nav ul li.entrance::after{
	content:"Entrance Exam";}

header nav ul li.access::after{
	content:"Access";}

header nav ul li.insta a {
	padding-right: 60px;
	background-image: url("../img/icon_instagram.svg");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 29px 29px;}


/* =========================
   ハンバーガーボタン共通
========================= */
.nav-toggle {
	display:none;
	position:relative;
	width:40px;
	height:32px;
	border:none;
	background:transparent;
	cursor:pointer;}

.nav-toggle span {
	position:absolute;
	left:0;
	right:0;
	height:3px;
	margin:auto;
	background:#71c7d5;
	transition:0.3s;}

.nav-toggle span:nth-child(1) { top:3px; }
.nav-toggle span:nth-child(2) { top:14px; }
.nav-toggle span:nth-child(3) { top:25px; }

/* 開いたときの × アニメ */
header.nav-open .nav-toggle span:nth-child(1) {
	transform:translateY(11px) rotate(45deg);}

header.nav-open .nav-toggle span:nth-child(2) {
	opacity:0;}

header.nav-open .nav-toggle span:nth-child(3) {
	transform:translateY(-11px) rotate(-45deg);}

/* =========================
   SP用レイアウト
========================= */
@media screen and (max-width: 1200px) {
.nav-toggle {
	display:block;}

.nav-toggle::after{
	content:"Menu";
	position:absolute;
	font-size:0.8em;
	line-height:1.2em;
	text-align:center;
	font-weight:500;
	top:36px;
	left:50%;
	transform:translateX(-50%);
	white-space: pre;
	color:#71c7d5;}

header {
	position:relative;}

header nav {
	position:absolute;
	top:100%;
	right:0;
	left:0;
	background:#fff;
	z-index:1000;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity 0.3s ease, visibility 0.3s ease;}

header.nav-open nav {
	opacity:1;
	visibility:visible;
	pointer-events:auto;}

header nav ul {
	display:block;
	border-radius:0;
	border-top:2px solid #71c7d5;}

header nav ul li {
	width:100%;}

header nav ul li::after{
	position:absolute;
	font-size:0.7em;
	line-height:1.2em;
	text-align:center;
	font-weight:600;
	top:50%;
	left:auto;
	right:10px;
	transform:translateY(-50%);
	white-space: pre;
	color:#71c7d5;}

header nav ul li:hover::after {
	color:#fff;}

header nav ul li::after{
	pointer-events:none;}

header nav ul li.course::after{
	content:"Course　▶";}

header nav ul li.laboratory::after{
	content:"Laboratory　▶";}

header nav ul li.employment::after{
	content:" Further education employment　▶";}

header nav ul li.entrance::after{
	content:"Entrance Exam　▶";}

header nav ul li.access::after{
	content:"Access　▶";}

header nav ul li a {
	border-radius:0;
	text-align:left;
	padding:12px 18px;
	border-top:none;
	border-left:none;
	border-right:none;
	border-bottom:2px solid #71c7d5;}

header nav ul li:first-child a {
	border-top:none;
	border-left:none;
	border-right:none;
	border-radius:0;}

header nav ul li.access a {
	border-top:none;
	border-left:none;
	border-right:none;
	border-radius:0;}
}


/* article */
article{
	width:1100px;
	margin:0 auto 100px;}

article.all{
	width:100%;
	margin:0 auto 100px;}

article.all-h{
	width:100%;
	margin:0 auto 60px;}

.dot{
	background-image:url(../img/back_blue.svg);
	background-repeat: repeat;
	background-size: 20px 20px;}

@media screen and (max-width:1200px){
article{
	width:100%;
	padding:0 50px;
	box-sizing:border-box;}
}

@media screen and (max-width:640px){
article{
	width:100%;
	margin:0 auto 60px;
	padding:0 20px;
	box-sizing:border-box;}

article.all{
	margin:0 auto 60px;}
}



/* TOP メインビジュアル・スライドショー */
.top_visual{
	border:2px solid #71c7d5;
	border-radius:55px;
	overflow:hidden;}

.top_visual .top_area{
	border-bottom:2px solid #71c7d5;
	font-weight:500;
	color:#71c7d5;}

.top_visual .mid_area{
	position:relative;}

.top_visual .btm_area{
	border-top:2px solid #71c7d5;}

.top_visual .visual_center{
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:0.9em;
	line-height:1.2em;
	text-align:center;
	margin:0 55px;
	border-left:2px solid #71c7d5;
	border-right:2px solid #71c7d5;}

.mid_area,
.btm_area {
	position: relative;}

.mid_area_cover {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index:11;}

.mid_area_cover img {
	height:var(--mid-after-height);}

.btm_area_cover {
	position: absolute;
	inset: 0;
	z-index: 10;
	background: #fff;}

@media screen and (max-width:500px){
.top_visual .visual_center{
	font-size:0.7em;}
}

.top_visual .mid_area::after{
	content:'';
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	width:2px;
	height:var(--mid-after-height);
	background-color:#71c7d5;
	z-index:10;}

@media screen and (max-width:639px){
.top_visual .mid_area::after{
	display:none;}
}

.top_area .visual_center{
	height:55px;}

.mid_area .top_visual_center{
	height:auto;
	margin:0 55px;
	border-left:2px solid #71c7d5;
	border-right:2px solid #71c7d5;}

.mid_area .top_visual_center img{
	width:100%;
	height:auto;}

.mid_area .top_visual_center .slick-slide{
	padding:0;
	background-color:#71c7d5;}

.btm_area .top_visual_center_nav{
	height:55px;
	margin:0 55px;
	border-left:2px solid #71c7d5;
	border-right:2px solid #71c7d5;}

.btm_area .top_visual_center_nav a{
	display:flex;
	height:55px;
	padding:0 15px;
	justify-content:flex-start;
	align-items:center;
	color:#000;
	font-size:0.9em;}

.btm_area .top_visual_center_nav a span{
	color:#71c7d5;}

.slick-prev:before, .slick-next:before{
	color:#71c7d5;}

.slick-prev {
	left: -40px;}

.slick-next {
	right: -40px;}

.slick-prev::before,
.slick-next::before {
	display:none;}

.btm_area .slick-prev:before,
.btm_area .slick-next:before{
	display:none;}



/* TOP コンセプト */
.top_concept{
	position:relative;
	padding:80px 0;
	text-align:center;}

.top_concept::before{
	content:url("../img/top_concept_left.svg");
	width:148px;
	height:304px;
	position:absolute;
	left:0;
	top:70%;
	transform:translateY(-70%);}

.top_concept::after{
	content:url("../img/top_concept_right.svg");
	width:148px;
	height:304px;
	position:absolute;
	right:0;
	top:70%;
	transform:translateY(-70%);}

@media screen and (max-width:1200px){
.top_concept{
	padding:60px 0;}

.top_concept::before{
	left:-50px;}

.top_concept::after{
	right:-50px;}
}

@media screen and (max-width:640px){
.top_concept::before{
	left:-20px;
	width:74px;
	height:152px;}

.top_concept::after{
	right:-20px;
	width:74px;
	height:152px;}
}

.top_concept h2{
	position:absolute;
	font-size:1.2em;
	line-height:1.2em;
	text-align:center;
	font-weight:600;
	top:-35px;
	left:50%;
	transform:translateX(-50%);
	white-space: pre;
	color:#71c7d5;}

.top_concept h3{
	display:inline-block;
	padding:30px;
	padding-left:calc(30px + 0.4em);
	font-size:2.2em;
	line-height:1.4em;
	text-align:center;
	font-weight:600;
	letter-spacing:0.2em;
	background:#fff;
	margin-bottom:40px;
	border-radius:20px;}

.top_concept .read{
	display:block;
	text-align:center;
	font-size:1.0em;
	line-height:2.4em;}

@media screen and (max-width:640px){
.top_concept .read{
	font-size:1.0em;
	line-height:2.2em;}
}



/* TOP お知らせ関連 */
.top_information{
	display:flex;
	justify-content:space-between;
	align-items:stretch;
	gap:60px;
	margin-bottom:80px;}

.top_news,
.top_awards{
	width:520px;
	border-bottom:2px solid #71c7d5;}

.top_information h2{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	width:100%;
	font-size:2.2em;
	line-height:1em;
	font-weight:600;
	color:#71c7d5;
	border-bottom:2px solid #71c7d5;
	padding-bottom:10px;
	margin-bottom:20px;}

/*
.top_information h2 a{
	font-size:0.9rem;
	line-height:1em;
	font-weight:400;
	color:#71c7d5;}
*/

.top_information h2 a{
	display:block;
	font-size:0.8rem;
	line-height:1em;
	font-weight:400;
	text-align:center;
	padding:8px 12px 6px;
	color:#000;
	transition:0.5s;
	text-decoration:none;
	border:2px solid #71c7d5;
	border-radius:15px;}

.top_information h2 a:hover{
	background-color:#71c7d5;
	text-decoration:none;
	color:#fff;
	opacity:1;}

.top_information dd{
	padding-bottom:20px;
	border-bottom:1px solid #71c7d5;
	margin-bottom:20px;}

.top_information dd:last-child{
	padding-bottom:20px;
	border-bottom:none;
	margin-bottom:0;}

@media screen and (max-width:640px){
.top_information{
	flex-direction:column;
	gap:50px;}

.top_news,
.top_awards{
	width:100%;}
}



/* TOP YouTube */
.top_movie{
	display:flex;
	justify-content:space-between;
	gap:60px;
	margin-bottom:60px;}

.top_movie iframe {
	width: 520px;
	aspect-ratio: 16 / 9;
	height: auto;
	display: block;}

@media screen and (max-width:640px){
.top_movie{
	flex-direction:column;
	gap:30px;}

.top_movie iframe {
	width: 100%;}
}



/* TOP バナー */
.top_banner{
	display:flex;
	justify-content:space-between;
	gap:40px;}

.top_banner div{
	width:340px;
	border:1px solid #71c7d5;}

.top_banner div img{
	width:100%;}

@media screen and (max-width:640px){
.top_banner{
	flex-direction:column;
	gap:30px;}

.top_banner div{
	width:100%;}
}



/* SEC Pick Up Lab */
.sec_pickuplab{
	position:relative;
	padding:0 0 40px;
	text-align:center;}

.sec_pickuplab::before{
	content:url("../img/top_concept_left.svg");
	width:148px;
	height:304px;
	position:absolute;
	left:0;
	top:70%;
	transform:translateY(-70%);}

.sec_pickuplab::after{
	content:url("../img/top_concept_right.svg");
	width:148px;
	height:304px;
	position:absolute;
	right:0;
	top:70%;
	transform:translateY(-70%);}

@media screen and (max-width:1200px){
.sec_pickuplab::before{
	left:-50px;}

.sec_pickuplab::after{
	right:-50px;}
}

@media screen and (max-width:640px){
.sec_pickuplab::before{
	left:-20px;
	width:74px;
	height:152px;}

.sec_pickuplab::after{
	right:-20px;
	width:74px;
	height:152px;}
}

.sec_pickuplab h2{
	font-size:1.2em;
	line-height:1.2em;
	text-align:center;
	font-weight:600;
	color:#71c7d5;
	margin-bottom:20px;}

.sec_pickuplab h3{
	display:inline-block;
	font-size:2.2em;
	line-height:1.4em;
	text-align:center;
	font-weight:600;
	border-bottom:1px solid #71c7d5;
	margin-bottom:20px;}

.sec_pickuplab h3 span{
	font-size:0.7em;}

.sec_pickuplab .read{
	display:block;
	text-align:center;
	font-size:1.0em;
	line-height:2.4em;}

@media screen and (max-width:640px){
.sec_pickuplab h3{
	line-height:1.1em;
	padding-bottom:5px;}

.sec_pickuplab .read{
	font-size:1.0em;
	line-height:2.2em;}

.sec_pickuplab .read img{
	width:100%;}
}

.sec_term h3{
	padding:20px;
	font-size:2.2em;
	line-height:1.4em;
	text-align:center;
	font-weight:600;
	letter-spacing:0.1em;
	margin-bottom:40px;}

.sec_term .read{
	display:block;
	text-align:center;
	font-size:1.0em;
	line-height:2.4em;
	margin-bottom:60px;}

.sec_term .block{
	width:1100px;
	margin:0 auto 60px;}

.sec_term h4{
	font-size:2.0em;
	line-height:1.4em;
	text-align:center;
	font-weight:600;
	letter-spacing:0.1em;
	text-align:center;
	padding-bottom:20px;
	border-bottom:1px solid #71c7d5;
	margin-bottom:25px;}

@media screen and (max-width:1200px){
.sec_term h3{
	font-size:1.8em;
	letter-spacing:0em;}

.sec_term h4{
	font-size:1.6em;
	letter-spacing:0em;}

.sec_term .block{
	width:100%;}
}

.sec_term .double{
	display:flex;
	justify-content:space-between;
	gap:40px;}

.sec_term .double .text{
	width:calc(55% - 20px);}

.sec_term .double .photo{
	width:calc(45% - 20px);}

.sec_term .double .photo img{
	width:100%;
	border:1px solid #71c7d5;
	box-sizing:border-box;}

.sec_term .button{
	text-align: center;}

.sec_term .button a{
	display:inline-block;
	font-size: 1.2em;
	line-height:1.0em;
	font-weight:600;
	border:2px solid #71c7d5;
	padding:18px 30px;
	border-radius:30px;}

.sec_term .button a:hover{
	color:#fff;
	background:#71c7d5;
	text-decoration:none;
	opacity:1;}

@media screen and (max-width:640px){
.sec_term .read{
	font-size:1.0em;
	line-height:2.2em;}

.sec_term .double{
	flex-direction:column-reverse;
	gap:40px;}

.sec_term .double .text{
	width:100%;}

.sec_term .double .photo{
	width:80%;
	margin:0 auto;}
}


/* footer */
footer{
	width:100%;
	text-align:center;
	background-image:url(../img/back_blue.svg);
	background-repeat: repeat;
	background-size: 20px 20px;
	padding:60px 50px 80px;}

footer h2{
	text-align:center;
	font-size:1.2em;
	margin-bottom:8px;}

footer p{
	text-align:center;
	font-size:0.9em;
	margin-bottom:8px;}

footer .copyright{
	text-align:center;
	font-size:0.75em;
	line-height:1.5em;
	margin-bottom:0px;}

@media screen and (max-width:640px){
footer{
	padding:30px 20px 40px;}
}