@charset "utf-8";

#mainVisual .swiper {
	overflow: hidden;
}
#mainVisual .swiper-slide {
	position: relative;
}
#mainVisual h2 {
	position: absolute;
	top: 18%;
	left: 10.416666666%;
	width: 36.458333333%;
	z-index: 2;
	background: none;
	padding: 0;
	font-size: 0;
}
#mainVisual h2 .mvInner {
	position: relative;
}
#mainVisual h2 .mvTtl {
	margin-bottom: 6%;
	animation-delay: .5s;
	filter: blur(20px);
}
#mainVisual h2 .mvTxt {
	animation-delay: 1s;
	filter: blur(20px);
}
#mainVisual h2 .mvIllust {
	width: 33%;
	position: absolute;
	top: -22%;
	right: 25.5%;
	z-index: -1;
	animation-delay: 1.5s;
}
.loaded #mainVisual h2 .mvTtl {
	filter: blur(0);
}
.loaded #mainVisual h2 .mvTxt {
	filter: blur(0);
}

@media screen and (max-width: 768px){
	#mainVisual h2 {
		position: absolute;
		top: 6%;
		left: 50%;
		transform: translateX(-50%);
		width: 73.684210526%;
		z-index: 2;
		background: none;
		padding: 0;
		font-size: 0;
	}
	#mainVisual h2 .mvTtl {
		width: 100%;
		margin: 0 auto 9%;
	}
	#mainVisual h2 .mvIllust {
		width: 31.571429%;
		position: absolute;
		top: -11%;
		right: 26%;
		z-index: -1;
	}
}

#action {

}
#action h3 {
	width: 100%;
	text-align: center;
	font-size: 3rem;
	padding: 40px 0;
	background: #002f4f;
	color: #fff;
	margin-bottom: 100px;
	letter-spacing: .2em;
}
#action .contact {
}
#action .contact a {
	max-width: 480px;
	width: 48.214285714%;
	display: block;
	line-height: 100px;
	text-align: center;
	color: #fff;
	font-size: 2rem;
	letter-spacing: .2em;
	padding-left: 10px;
	box-sizing: border-box;
	position: relative;
}
#action .contact a:before {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 60px;
	transform: translateY(-50%);
	width: 12px;
	height: 20px;
	background: url(../common/img/icon_arrow_contact.svg)no-repeat center center / contain;
}
#action .contact a + a {
	margin-left: 50px;
}
#action .contact a.request {
	background: #00a199;
}
#action .contact a.application {
	background: #be9a57;
}
@media screen and (max-width: 768px){
	#action h3 {
		font-size: 1.875rem;
		padding: 20px 0;
		margin-bottom: 50px;
	}
	#action .contact {
		width: 85%;
		margin: 0 auto 40px;
	}
	#action .contact a {
		max-width: none;
		width: 100%;
		line-height: 70px;
		font-size: 1.375rem;
	}
	#action .contact a + a{
		margin-left: 0;
		margin-top: 20px;
	}
	#action .contact a:before{
		left: 30px;
		width: 7px;
		height: 12px;
	}
}


#guidance{
	margin-top: 200px;
	padding: 60px 0 150px;
	background: #e2e5e9;
	position: relative;
}
#guidance:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 20%;
	background: #fff;
}


/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	top:0;
	left:50%;
	transform: translateX(-50%);
}

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

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

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

/* 線の描写 */
.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:1px;
	height: 100px;
	background:#003862;
}


#guidance .inner {
	max-width: 1820px;
	position: relative;
	z-index: 2;
}
#guidance h3.en{
	font-size: 1.875rem;
	color: #003862;
	letter-spacing: .1em;
	text-align: center;
	margin-bottom: 100px;
}
#guidance .concept{
	font-size: 1.875rem;
	color: #003862;
	letter-spacing: .1em;
	text-align: center;
	position: relative;
	margin-bottom: 270px;
}
#guidance .concept .hoverTxt {
	color: rgba(255, 255, 255, .5);
	font-size: 9.895833333vw;
	line-height: 1;
	position: absolute;
	bottom: -13%;
	left: 9.34065934%;
}
#guidance .btnArea {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	padding: 60px 0;
	width: 74.285714285%;
	background: rgba(255, 255, 255, .85);
	font-size: 2.25rem;
	text-align: center;
	transition: .3s;
	z-index: 2;
}
#guidance a:hover .btnArea {
	background: rgba(0, 47, 79, .9);
}
#guidance .btnArea span,
#guidance .btnArea small {
	display: block;
	color: #002f4f;
	transition: .3s;
}
#guidance a:hover .btnArea span,
#guidance a:hover .btnArea small {
	color: #fff;
}
#guidance .btnArea span {
	padding-bottom: 38px;
	margin-bottom: 22px;
	position: relative;
}
#guidance a .btnArea p span:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #002f4f;
	transition: .3s;
}
#guidance a:hover .btnArea p span:after {
	background: #fff;
}
#guidance .btnArea small {
	font-size: 1.25rem;
}
#guidance .concept .btnArea {
	position: absolute;
	top: auto;
	left: auto;
	transform: none;
	right: 9.34065934%;
	width: 19.78021978%;
	bottom: -120px;
}

#guidance ul {
	width: 81.318681318%;
	margin: -80px auto 0;
}
#guidance ul li {
	width: 47.297297297%;
	position: relative;
	margin-top: 80px;
}

@media screen and (max-width: 1500px){
	#guidance .btnArea {
		font-size: 1.75rem;
		padding: 30px;
	}
	#guidance .btnArea span {
		padding-bottom: 28px;
		margin-bottom: 12px;
	}
	#guidance .btnArea small {
		font-size: 1rem;
	}
	#guidance .concept{
		margin-bottom: 200px;
	}
}
@media screen and (max-width: 1180px){
	#guidance .btnArea {
		font-size: 1.25rem;
	}
	#guidance .btnArea span {
		padding-bottom: 28px;
		margin-bottom: 12px;
	}
	#guidance a .btnArea p span:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #002f4f;
		transition: .3s;
	}
	#guidance .btnArea small {
		font-size: 1rem;
	}
}

@media screen and (max-width: 940px){
	#guidance .btnArea {
		padding: 20px;
	}
}

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

	#guidance{
		margin-top: 110px;
		padding: 30px 0 80px;
	}
	#guidance:after{
		height: 15%;
	}


	/*スクロールダウン全体の場所*/
	.scrolldown2{
	    /*描画位置※位置は適宜調整してください*/
		position:absolute;
		top:0;
		left:50%;
		transform: translateX(-50%);
	}

	/* 丸の描写 */
	.scrolldown2:before {
	    content: "";
	    /*描画位置*/
	    position: absolute;
	    bottom:0;
	    left:-2.5px;
		width:6px;
		height:6px;
	}

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

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

	/* 線の描写 */
	.scrolldown2:after{
		content:"";
	    /*描画位置*/
		position: absolute;
		bottom:0;
		left:0;
	    /*線の形状*/
		width:1px;
		height: 60px;
		background:#003862;
	}


	#guidance h3.en{
		font-size: 1.125rem;
		color: #003862;
		letter-spacing: .1em;
		text-align: center;
		margin-bottom: 60px;
	}
	#guidance .concept{
		font-size: 1.875rem;
		color: #003862;
		letter-spacing: .1em;
		text-align: center;
		margin-bottom: 100px;
		position: relative;
		margin-bottom: 150px;
	}
	#guidance .concept .hoverTxt {
		display: none;
	}
	#guidance .btnArea {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		padding: 25px 0;
		width: 90%;
		background: rgba(255, 255, 255, .85);
		font-size: 1.5rem;
		text-align: center;
		transition: .3s;
		z-index: 2;
	}
	#guidance .btnArea span {
		padding-bottom: 20px;
		margin-bottom: 6px;
	}
	#guidance .btnArea small {
		font-size: 1rem;
	}
	#guidance .concept .btnArea {
		position: absolute;
		top: auto;
		left: 50%;
		transform: translateX(-50%);
		right: auto;
		width: 90%;
		bottom: -80px;
	}

	#guidance ul {
		width: 100%;
		margin: -40px auto 0;
	}
	#guidance ul li {
		width: 100%;
		position: relative;
		margin-top: 40px;
	}

}