@charset "utf-8";

body {
	letter-spacing: 0.06em; font-family: "Noto Sans JP", sans-serif; font-feature-settings: "palt" 1; color: #393939; background: #f5f9fc; font-size: 18px; letter-spacing: 0.1em;
}
a {text-decoration: none;}
.en-midashi {
	font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
}

#logo {height: 40px;}

.second-icon {
	width: 120px; margin-top: -120px;
}
@media(min-width: 768px) {
	#logo {height: 70px;}
	.second-icon {
		width: 180px; margin-top: -120px;
	}
}

.second-item {cursor: pointer;}
.second-title > span {
	border-bottom: 1px solid #222;
}
.gold {
	color: #bbad8d;
}
.modal-header {border-bottom-color:#555; }

.btn-text-gradient--gold {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#ffffdb),
    to(#a16422)
  );

  background: -webkit-linear-gradient(bottom, #ffffdb, #a16422);

  background: linear-gradient(to top, #ffffdb, #a16422);
  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;
}


.table td, .table th {
	background-color: transparent;
	border-color: rgba(0,0,0,.1);
	border-bottom-width: 1px;
	padding-top: 1rem; padding-bottom: 1rem;
}
.table tr:first-child td, .table tr:first-child th {
	border-top-width: 1px;
}
.table th {
	font-size: 0.9em; font-weight: 500;
	padding-left: 1.5em;
}
.table td {
	padding-left: 1em;
}
@media(max-width: 767px){
	.table td, .table th {
		display: block;
	}
	.table th {
		border-bottom-width: 0;
		padding-bottom: 0;
		padding-left: 1em;
	}
	.table tr:first-child td {
		border-top-width: 0;
	}
	.table td {
		font-size: 0.9em;
	}
}


.fsl-vw {
	font-size: 6.6vw;
}


@media (min-width: 768px) {
	.fsl-vw {
		font-size: 3.1vw;
	}
}
@media (min-width: 1200px) {
	.fsl-vw {
		font-size: 37px;
	}
}

.italic {font-style: italic;}
.sans {
	font-family: sans-serif;
}

.img-cover {
	object-fit: cover;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.parallax {
	object-fit: cover;
	left: 0;
	width: 100%;
	height: 100%;
}

.text-black-75 {
	color: rgba(0,0,0,.75);
}
.text-black-60 {
	color: rgba(0,0,0,.6);
}

#bgbase {transition: opacity 3s ease; opacity: 0; background-size: cover; background-position: center center; position: fixed; top: 0; width: 100%; height: 100vh; background-image: url(../img/bg5.webp); z-index: -101;}
#bgbase.go {opacity: 0.75; transition: opacity 3s ease; background-position: center center;}

.bg-bg2 {
	background: url(../img/bg2.webp) no-repeat center center;
	background-size: cover;
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
}

.bg-white-base1 {
	background: url(../img/bg-white-base1.webp) no-repeat center center;
	background-size: cover;
	position: relative;
}
.bg-white-base1::before {
	content: "";
	display: block;
	background-color: rgba(255,255,255,.9);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#header{
    width: 100%;
/* 	height:100vh; */
    overflow: hidden;/*はみ出しているところを隠す*/
    pointer-events: none;
}

#header-img{
	position: fixed;/*背景を固定するためfixedをかける*/
	z-index: 1;/*#container,#footerよりも下に配置するために数値を小さくする*/
    top: 0;/*topの位置がJSで変化*/
	/*以下画面で背景画像を表示させるための指定*/
    width: 100%;
	height:100vh;
	background: url("../img/fvbg.webp") no-repeat center center;/*背景画像の設定*/
	background-size:cover;
	transform-origin:center;/*変化する基点を中心からに設定*/
	transition: transform 0.17s ease;
	opacity: 0.85;
}
#copy {
	transition: transform 0.12s ease;
	width: 90vw; font-size: 13.4vw;
}
@media (min-width: 768px) {
	#header-img{
		position: fixed;/*背景を固定するためfixedをかける*/
		z-index: 1;/*#container,#footerよりも下に配置するために数値を小さくする*/
	    top: 0;/*topの位置がJSで変化*/
		/*以下画面で背景画像を表示させるための指定*/
	    width: 100%;
		height:100vh;
		background: url("../img/fvbg.webp") no-repeat center center;/*背景画像の設定*/
		background-size:cover;
		transform-origin:center;/*変化する基点を中心からに設定*/
		transition: transform 0.17s ease;
		opacity: 0.85;
	}
	#copy {
		width: 56vw; font-size: 8.91vw;
	}
}

#bg.go #header-img, #bg.go #copy {
		display: none;
}

#container,
#footer{
	position: relative;
	z-index: 2;
}

#header h1{
	color: #fff;
	letter-spacing: 0.1em;
	position: fixed;
  z-index: 3;
}

.dark-mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.2);
	z-index: 1;
	}
	
.dark-mask2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.3);
	z-index: 1;
}


/*===================================
テキストが滑らかに出現
===================================*/

span.smoothText {
	overflow: hidden;
	display: block;
}

span.smoothTextTrigger{
	transition: .8s ease-in-out;
	transform: translate3d(0,100%,0) skewY(12deg);
	transform-origin: left;
	display: block;
}
span.smoothTextTrigger.smoothTextAppear{
    transform: translate3d(0,0,0) skewY(0);
}


/*===================================
テキストタイピング
===================================*/

.TextTyping span {
	display: none;
}

/*文字列後ろの線の設定*/
.TextTyping::after {
 	content: "|";
	animation: typinganime .8s ease infinite;
}

@keyframes typinganime{
	from{opacity:0}
	to{opacity:1}
}

/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position: fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
		top: 0;
		right: -100%;
		width: 100%;
		height: 100vh;/*ナビの高さ*/
/* 		background: rgba(0,0,0,.9); */
		background: linear-gradient(145deg, #0b0b0d, #242016);
		background-size: cover;
/* 		background:linear-gradient(45deg,rgba(0,0, 0, 0.95),rgba(0, 65, 153,.95)); */
		/*動き*/
		transition: all 0.4s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

@media(min-width: 992px) {
 #g-nav {
		right: -36%;
		width:35%;
 }	
	#g-nav.panelactive #g-nav-list {
    width: 35%;
	}
}


/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
/*     position: absolute; */
    z-index: 999;
/*
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
*/
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
    text-align: center;
}

#g-nav li a{
	color: rgba(255,255,255,.7);
	text-decoration: none;
	padding:1.4rem 0.8rem;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}

/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:0px;
	right: 0px;
	cursor: pointer;
    width: 50px;
    height:50px;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background-color: #bbad8d;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

/*=== 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown{
    /*描画位置※位置は適宜調整してください*/
	position:fixed;
	top:calc(100vh - 10px);
	left:90%;
	z-index: 998;
	transition: .3s;
	pointer-events: none;
}
.scrolldown.go{
	transform: translate3D(0,30px,0);
	opacity: 0;
}
/*Scrollテキストの描写*/
.scrolldown span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:10px;
    /*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
	width:10px;
	height:10px;
	border-radius: 50%;
	background:#eee;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:2px;
	height: 50px;
	background:#eee;
}

/*========= ローディング画面のためのCSS ===============*/
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #111;
	z-index: 9999999;
	text-align:center;
	color:#fff;
}

#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/*========= 画面遷移のためのCSS ===============*/

body{
    background:#111;/*遷移アニメーションと同じ色を指定*/
}

body.appear{
    background:#fff;/*画面を開いた後の背景色を指定*/
}

/*画面遷移アニメーション*/
.splashbg1,
.splashbg2{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg1,
body.appear .splashbg2{
	display:block;
}

/*右に消えるエリア*/
body.appear .splashbg1{
	animation-name:PageAnime;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
	left:50%;
    transform: scaleX(1);
    background-color: #111;/*伸びる背景色の設定*/
}

@keyframes PageAnime{
	0% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/*左に消えるエリア*/
body.appear .splashbg2{
	animation-name:PageAnime2;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
	right:50%;
    transform: scaleX(1);
    background-color: #111;/*伸びる背景色の設定*/
}

@keyframes PageAnime2{
	0% {
		transform-origin:right;
		transform:scaleX(1);
	}

	50% {
		transform-origin:left;
	}
	100% {
		transform-origin:left;
		transform:scaleX(0);
	}
}

/*画面遷移の後現れるコンテンツ設定*/
#container{
	opacity: 0;/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay:0.2s;
	animation-fill-mode:forwards;
	opacity: 0;
	background: #000;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

.mentor-card {
            position: relative;
            overflow: visible;
        }
        .graduation-year {
            position: absolute;
            top: -1px;
            left: -1px;
            background-color: rgba(220,220,220,.6);
            color: #777;
            padding: 4px 12px;
            border-radius: 0.5rem 0 0.25rem 0;
            font-size: 0.9rem;
            font-weight: bold;
            z-index: 1;
        }