@charset "utf-8";
.menu:before { background: #fff; }
.menu .bar:before,
.menu .bar:after { background: #fff; }
.menu li a { color: #fff; }
.menu li.here { border-color: #fff; }

#mainImg{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: -1;
	}
#mainImg .wrap{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	}

#mainImg #m-video {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	}
#mainImg #m-video video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	z-index: 1;
	}

#mainImg .logo{
	position: absolute;
	top:0;
	left:0; right:0;
	width: 206px;
	height: 30px;
	margin: 0 auto 0;
	overflow: hidden;
	z-index: 2;
	}
#mainImg .logo svg{
	transform:matrix(1, 0, 0, 1, 0, 40);
	-webkit-transform:translateY(-63px);
	-moz-transform:translateY(-63px);
	-ms-transform:translateY(-63px);
	transform:translateY(-63px);
	opacity: 1;
	fill:#fff;
	}

@media all and (max-width: 750px) {
	#mainImg #m-video video { height: 100%; }
	#mainImg .logo{
		width: 38.8%;
		height: 5.6vw;
		}
}

.contWrap{
	position: relative;
	background-color: #f03a2a;
	margin-top: 100vh;
	z-index: 5;
	}

#philosophy{
	position: relative;
	background-color: #f03a2a;
	width: 100%;
	height: 650px;
	overflow: hidden;
	z-index: 5;
	}
#philosophy .logo{
	position: absolute;
	top:calc(50% - 15px);
	left:0; right:0;
	width: 206px;
	height: 30px;
	margin: -5vh auto 0;
	z-index: 2;
	}
#philosophy h2{
	position: absolute;
	top:calc(50% + 45px);
	left:0; right:0;
	width: 260px;
	height: 36px;
	margin: -5vh auto 0;
	font-family: "HelveticaNeueLTStd-Md";
	font-size: 36px;
	text-align: center;
	letter-spacing: 0.01em;
	line-height: 1;
	z-index: 2;
	}
#philosophy h2 span{
	position: relative;
	display: inline-block;
	width: 260px;
	font-size: 36px;
	}
#philosophy a{
	position: absolute;
	top:calc(50% - 15px);
	left:0; right:0;
	display: block;
	width: 260px;
	height: 96px;
	margin: -5vh auto 0;
	z-index: 2;
	}
#philosophy .logo::after,
#philosophy h2 span::after{
	position: absolute;
	bottom:-8px;
	left: 0;
	content: "";
	background-color: #000;
	width: 100%;
	height: 2px;
	-webkit-transform: scaleX(0);
	-ms-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: right top;
	-ms-transform-origin: right top;
	transform-origin: right top;
	-webkit-transition: -webkit-transform .4s cubic-bezier(0.19, 0.58, 0.33, 0.99);
	-o-transition: transform .4s cubic-bezier(0.19, 0.58, 0.33, 0.99);
	transition: transform .4s cubic-bezier(0.19, 0.58, 0.33, 0.99);
	}
#philosophy h2 span::after{ bottom:2px; }
#philosophy.over .logo::after,
#philosophy.over h2 span::after{
	-webkit-transform: scaleX(1);
	-ms-transform: scaleX(1);
	transform: scaleX(1);
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;
	}

#philosophy .t01{
	position: absolute;
	top: 60%;
	left: 0;
	display: block;
	background-color: transparent;
	width: 1px;
	height: 1px;
	}

@media all and (max-width: 750px) {
	#philosophy{ height: 70vh; }
	#philosophy .logo{
		top:calc(50% - 4.6vw);
		width: 38.8%;
		height: 5.6vw;
		}
	#philosophy h2{
		top:calc(50% + 5.667vw);
		width: 100%;
		height: 6.667vw;
		font-size: 6.667vw;
		}
	#philosophy h2 span{
		width: 43.2%;
		font-size: 6.667vw;
		}
	#philosophy a{
		width: 38.8%;
		height: 15vw;
		}
	#philosophy h2 span::after{ bottom:.533vw; }
}

#course{
	position: relative;
	width: 100%;
	height: 650px;
	overflow: hidden;
	z-index: 6;
	}
#course .logo{
	position: absolute;
	top:calc(50% - 15px);
	left:232px;
	width: 206px;
	height: 30px;
	margin: -5vh auto 0;
	z-index: 2;
	}
#course h2{
	position: absolute;
	top:calc(50% + 45px);
	left:232px;
	width: 206px;
	height: 36px;
	margin: -5vh auto 0;
	font-family: "HelveticaNeueLTStd-Md";
	font-size: 36px;
	color: #fff;
	text-align: center;
	letter-spacing: 0.01em;
	line-height: 1;
	z-index: 2;
	}
#course h2 span{
	position: relative;
	display: inline-block;
	width: 157px;
	font-size: 36px;
	}
#course .word{ fill:#fff; }
#course .bg{
	position: absolute;
	top: 0;
	left: 0;
	background: url("../img/index/course_bg_pc.jpg") no-repeat center/cover;
	width: 100%;
	height: 100%;
	opacity: 1;
	}
#course a{
	position: absolute;
	top:calc(50% - 15px);
	left:232px;
	display: block;
	width: 206px;
	height: 100px;
	margin: -5vh auto 0;
	z-index: 2;
	}
#course .logo::after,
#course h2 span::after{
	position: absolute;
	bottom:-8px;
	left: 0;
	content: "";
	background-color: #fff;
	width: 100%;
	height: 2px;
	-webkit-transform: scaleX(0);
	-ms-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: right top;
	-ms-transform-origin: right top;
	transform-origin: right top;
	-webkit-transition: -webkit-transform .4s cubic-bezier(0.19, 0.58, 0.33, 0.99);
	-o-transition: transform .4s cubic-bezier(0.19, 0.58, 0.33, 0.99);
	transition: transform .4s cubic-bezier(0.19, 0.58, 0.33, 0.99);
	}
#course h2 span::after{ bottom:2px; }
#course.over .logo::after,
#course.over h2 span::after{
	-webkit-transform: scaleX(1);
	-ms-transform: scaleX(1);
	transform: scaleX(1);
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;
	}
#course .t02{
	position: absolute;
	top: 60%;
	left: 0;
	display: block;
	background-color: transparent;
	width: 1px;
	height: 1px;
	}



@media all and (max-width: 750px) {
	#course{ height: 70vh; }
	#course .logo{
		top:calc(50% - 4.6vw);
		left:0; right:0;
		width: 38.8vw;
		height: 5.6vw;
		}
	#course h2{
		top:calc(50% + 5.667vw);
		left:0; right:0;
		width: 100%;
		height: 6.667vw;
		font-size: 6.667vw;
		}
	#course h2 span{
		width: 27.733%;
		font-size: 6.667vw;
		}
	#course .bg{ background-image: url("../img/index/course_bg_sp.jpg"); }
	#course a{
		top:calc(50% - 4.6vw);
		left:0; right:0;
		display: block;
		width: 38.8%;
		height: 15.6vw;
		}
	#course h2 span::after{ bottom:.533vw; }
}

#youtube{
	position: relative;
	background-color: #fff;
	padding: 50px 0 0;
	text-align: center;
	z-index: 7;
	}
#youtube h2{
	margin-bottom: 45px;
	font-family: "HelveticaNeueLTStd-Md";
	letter-spacing: 0.05em;
	line-height: 1;
	}
#youtube h2 a{
	margin: auto;
	font-size: 22px;
	color: #1e1e1e;
	text-decoration: none;
	}
#youtube h2 a svg{
	width: 16px;
	height: 16px;
	margin-left: 10px;
	font-size: 0;
	}
#youtube #youtubeMov{ position: relative; }
#youtube #youtubeMov::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: -moz-linear-gradient(left,  rgba(0,0,0,.63) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left,  rgba(0,0,0,.63) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to right,  rgba(0,0,0,.63) 0%,rgba(0,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 );
	width: calc(50% - 367px);
	height: 100%;
	z-index: 2;
	}
#youtube #youtubeMov::after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,.63) 100%);
	background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,.63) 100%);
	background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,.63) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 );
	width: calc(50% - 367px);
	height: 100%;
	z-index: 2;
	}
#youtube .slick-slide{
	width: 724px;
	margin: 0 2.5px;
	}
#youtube .slick-slide .wrap{
  position: relative;
	width: 100%;
  padding-top: 56.25%;
	}
#youtube .slick-slide iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
	}
#youtube .slick-slide .wrap .cover{
  position: absolute;
	top: 0;
	left: 0;
	width: 100%;
  height: 100%;
	cursor: pointer;
	z-index: 2;
	}
#youtube .slick-slide .wrap .cover::before{
	content: "";
  position: absolute;
	top:0; bottom:0;
	left:0; right:0;
	background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2066%2066%22%3E%3Ccircle%20cx%3D%2233%22%20cy%3D%2233%22%20r%3D%2231.5%22%20style%3D%22fill%3Anone%3Bstroke%3A%23fff%3Bstroke-width%3A3px%3B%22%2F%3E%3Cpath%20d%3D%22M26.51%2C45.53v-25L45.49%2C33Z%22%20style%3D%22fill%3A%23fff%3Bfill-rule%3Aevenodd%3B%22%2F%3E%3C%2Fsvg%3E') no-repeat center/contain;
	width: 63px;
  height: 0;
	padding-bottom: 63px;
	margin: auto;
	z-index: 2;
	}
#youtube .ytNav{
	position: absolute;
	top:117px; bottom:0;
	width: 100%;
	height: 60px;
	margin: auto;
	pointer-events: none;
	}

@media all and (max-width: 750px) {
	#youtube{ padding: 14.667% 0 0; }
	#youtube h2{ margin-bottom: 14.667%; }
	#youtube h2 a{ font-size: 4.8vw; }
	#youtube h2 a svg{
		width: 4.267vw;
		height: 4.267vw;
		margin-left: 1%;
		}
	#youtube #youtubeMov::before{ width: 20%; }
	#youtube #youtubeMov::after{ width: 20%; }
	#youtube .slick-slide{
		width: 100%;
		margin: 0;
		}
	#youtube .slick-slide .wrap{ padding-top: 100%; }
	#youtube .slick-slide .wrap .cover::before{
		width: 8.8%;
		padding-bottom: 8.8%;
		}
	#youtube .ytNav{
		top:32vw;
		height: 0;
		padding-bottom: 8%;
		}
}

#instagram{
	position: relative;
	background-color: #fff;
	padding: 50px 0 120px;
	text-align: center;
	z-index: 8;
	}
#instagram h2{
	margin-bottom: 45px;
	font-family: "HelveticaNeueLTStd-Md";
	letter-spacing: 0.05em;
	line-height: 1;
	}
#instagram h2 a{
	margin: auto;
	font-size: 22px;
	color: #1e1e1e;
	text-decoration: none;
	}
#instagram h2 a svg{
	width: 16px;
	height: 16px;
	margin-left: 10px;
	font-size: 0;
	vertical-align: top;
	}
#instagram #instafeed{ position: relative; }
#instagram #instafeed::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: -moz-linear-gradient(left,  rgba(0,0,0,.63) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left,  rgba(0,0,0,.63) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to right,  rgba(0,0,0,.63) 0%,rgba(0,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 );
	width: calc(50% - 367px);
	height: 100%;
	z-index: 2;
	}
#instagram #instafeed::after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,.63) 100%);
	background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,.63) 100%);
	background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,.63) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 );
	width: calc(50% - 367px);
	height: 100%;
	z-index: 2;
	}
#instagram .slick-slide{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
	width: 408px;
	margin: 0 2.5px;
	}
#instagram .slick-slide a{
  width: 408px;
	height: 408px;
	}
#instagram .slick-slide img{
	width: 100%;
	visibility: hidden;
	}
#instagram .instaNav{
	position: absolute;
	top:0; bottom:0;
	width: 100%;
	height: 60px;
	margin: auto;
	pointer-events: none;
	}

@media all and (max-width: 750px) {
	#instagram{ padding: 14.667% 0 0; }
	#instagram h2{ margin-bottom: 14.667%; }
	#instagram h2 a{ font-size: 4.8vw; }
	#instagram h2 a svg{
		width: 4.267vw;
		height: 4.267vw;
		margin-left: 1%;
		}
	#instagram #instafeed::before,
	#instagram #instafeed::after{ display: none; }
	#instagram .slick-track{
		width: 100%!important;
		margin: 0;
		}
	#instagram .slick-slide{
		display: inline-block;
		width: 49.734%!important;
		height: 49.867vw;
		margin: 0 0 .532% .532%;
		}
	#instagram .slick-slide:nth-child(2n+1){ margin-left: 0; }
	#instagram .slick-slide a{
		display: block;
		width: 100%;
		height: 100%;
		}
	#instagram .slick-slide img{
		width: 100%;
		visibility: hidden;
		}
}

#profile{
	position: relative;
	background-color: #ededee;
	height: 650px;
	margin: 0 auto;
	font-size: 0;
	z-index: 9;
	}
#profile .profWrap{
	display: inline-block;
	width: 50%;
	margin-top: 165px;
	}
#profile .profWrap h2{
	width: 355px;
	margin: 0 auto 10px;
	font-family: "HelveticaNeueLTStd-Md";
	font-size: 22px;
	letter-spacing: 0.04em;
	line-height: 1;
	}
#profile .profWrap .txt{
	width: 355px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 2;
	}
#profile .bg{
	display: inline-block;
	background: url("../img/index/img_iwasaki_pc.jpg") no-repeat center top/cover;
	width: 50%;
	height: 100%;
	font-size: 0;
	vertical-align: top;
	}

@media all and (max-width: 750px) {
	#profile{
		padding: 16% 0 0;
		height: auto;
		}
	#profile .profWrap{
		display: block;
		width: 74.667%;
		margin: 0 auto;
		}
	#profile .profWrap h2{
		width: 100%;
		margin-bottom: 2.679%;
		font-size: 5.333vw;
		}
	#profile .profWrap .txt{
		width: 100%;
		margin-bottom: 14.286%;
		font-size: 3.733vw;
		line-height: 1.857;
		}
	#profile .bg{
		display: block;
		background-image: url("../img/index/img_iwasaki_sp.jpg");
		width: 100%;
		height: 0;
		padding-bottom: 95.2%;
		}
}

.slick-prev,
.slick-next{
	opacity: 0;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	}
.slick-prev:hover,
.slick-next:hover{ opacity: 1; }
@media all and (max-width: 750px) {
	.slick-prev,
	.slick-next{ opacity: 1; }
}

.loader {
	position: fixed;
	top:0;
	left:0;
  width: 100vw;
  height: 100vh;
  margin: auto;
  background-color: #000;
	z-index: 999;
	}
.loader span {
	display: block;
	position: absolute;
	top:calc(50% - 25px);
	left:0; right:0;
  width: 50px;
  height: 0;
  margin: 0 auto;
	z-index: 999;
	overflow: hidden;
  -webkit-animation: load8 1.1s linear forwards;
  animation: load8 1.1s linear forwards;
	}
.loader span::after {
	content: "";
 	position: absolute;
	bottom:0;
	left:0; right:0;
	border-radius: 50%;
  background-color: #f03a2a;
  width: 50px;
  height: 50px;
  margin: auto;
  font-size: 5px;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
	}
@-webkit-keyframes load8 {
  0% {
    margin-top: 50px;
    padding-bottom: 0px;
  }
  100% {
    margin-top: 0px;
    padding-bottom: 50px;
  }
}
@keyframes load8 {
  0% {
    margin-top: 50px;
    padding-bottom: 0px;
  }
  100% {
    margin-top: 0px;
    padding-bottom: 50px;
  }
}

.di{
	width: 0;
	height: 0;
	visibility: hidden;
	}

@media all and (max-width: 750px) {
	.loader span {
		top:calc(50% - 3.333%);
		width: 6.667%;
		}
	.loader span::after {
		width: 100%;
		height: 6.667vw;
		}
}