@charset "UTF-8";
/*fv*/
#fv{
	width: 100%;
	height: 100vh;
	background-image:url(../img/index/bg_gray.jpg);
	background-size: 100% 100%;
}
#fv .catch{
	position: absolute;
	top: 38vh;
	left: 15vw;
}
#fv .catch h2{
	margin-bottom: 0.8em;
	font-size: 5rem;
	font-weight: bold;
}
#fv .catch p{
	font-size: 1.6rem;
	font-weight: bold;
}

/*sec01*/
#sec01{
	padding: 8% 0;
	background: #1c3039;
}
#sec01 .wrap{
	max-width: 85vw;
}
#sec01 h2{
	position: relative;
	font-size: 3.6rem;
	color: #FFF;
	font-weight: bold;
}
#sec01 h2:after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: calc(100% - 7em);
	height: 1px;
	margin: auto;
	border-bottom: 3px solid #fff;
}
#sec01 h2 + .flex{
	margin-bottom: 5%;
}
#sec01 .txt{
	width: 45%;
	margin-top: 5%;
}
#sec01 .txt p{
	color: #FFF;
	line-height: 2;
}
#sec01 .image{
	width: 50%;
}
#sec01 h3{
	position: relative;
	padding-bottom: 1em;
	margin-bottom: 2em;
	font-size: 2.3rem;
	color: #FFF;
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.3em;
}
#sec01 h3:after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 4em;
	height: 1px;
	margin: auto;
	border-bottom: 3px solid #fff;
}
#sec01 .box{
	max-width: 800px;
	margin: auto;
	border: 3px solid #fff;
	-webkit-border-radius: 50px;
	        border-radius: 50px;
}
#sec01 .box .top{
	padding: 8% 0 5%;
	border-bottom: 3px solid #fff;
}
.ie #sec01 .box .top{
	height: 170px;
}
#sec01 .box .top .logo{
	max-width: 280px;
	width: 75%;
	margin: 0 auto 3%;
}
#sec01 .box .top .logo + p{
	font-size: 1.2rem;
	color: #FFF;
	font-weight: bold;
	text-align: center;
}
#sec01 .box .bottom .in{
	padding: 3% 0;
	border-left: 3px solid #fff;
}
#sec01 .box .bottom .in:first-child{
	width: 33%;
	border-left: none;
}
#sec01 .box .bottom .in:nth-child(2){
	width: 33%;
}
#sec01 .box .bottom .in:nth-child(3){
	width: 33%;
}
#sec01 .box .bottom .in h4{
	position: relative;
	display: flex;
	-webkit-justify-content: center;
	        justify-content: center;
	-webkit-align-items: center;
	        align-items: center;
	width: 100%;
	height: 5em;
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
	font-size: 1.5rem;
	color: #FFF;
	font-weight: bold;
	text-align: center;
	letter-spacing: 0;
}
#sec01 .box .bottom .in h4:after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 3.5em;
	height: 1px;
	margin: auto;
	border-bottom: 2px solid #fff;
}
#sec01 .box .bottom .in p{
	font-size: 1.2rem;
	color: #FFF;
	font-weight: bold;
	text-align: center;
}

/*sec02*/
#sec02{
	padding: 7% 0 3.5%;
}
#sec02 .photo{
	width: 50%;
}
#sec02 .content{
	width: 45%;
}
#sec02 .content h2{
	position: relative;
	padding-bottom: 0.8em;
	margin-bottom: 0.8em;
	font-size: 2.2rem;
	font-weight: bold;
}
#sec02 .content h2:after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3em;
	height: 1px;
	border-bottom: 3px solid #1c3039;
}
#sec02 .content .read{
	margin-bottom: 5%;
}
#sec02 .content .read p{
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 2;
}
#sec02 .content .txt{
	margin-bottom: 10%;
}
#sec02 .content .txt p{
	font-size: 1.2rem;
	line-height: 2;
}
#sec02 .banner a,#sec03 .banner a{
	display: flex;
	-webkit-justify-content: center;
	        justify-content: center;
	-webkit-align-items: center;
	        align-items: center;
	width: 100%;
	margin-top: 10%;
}
#sec02 .banner p{
	font-size: 3.2rem;
	color: #FFF;
	font-weight: bold;
	letter-spacing: 0;
}

/*sec03*/
#sec03{
	padding: 3.5% 0;
}
#sec03 .photo{
	-webkit-order: 2;
	    -ms-order: 2;
	        order: 2;
	width: 50%;
}
#sec03 .content{
	-webkit-order: 1;
	    -ms-order: 1;
	        order: 1;
	width: 45%;
}
#sec03 .content h2{
	position: relative;
	padding-bottom: 0.8em;
	margin-bottom: 0.8em;
	font-size: 2.2rem;
	font-weight: bold;
}
#sec03 .content h2:after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3em;
	height: 1px;
	border-bottom: 3px solid #1c3039;
}
#sec03 .content .read{
	margin-bottom: 5%;
}
#sec03 .content .read p{
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 2;
}
#sec03 .content .txt{
	margin-bottom: 10%;
}
#sec03 .content .txt p{
	font-size: 1.1rem;
	line-height: 2.3;
	letter-spacing: 0;
}

/*sec04*/
#sec04{
	padding: 3.5% 0 7%;
}
#sec04 .photo{
	width: 50%;
}
#sec04 .content{
	width: 45%;
}
#sec04 .content h2{
	position: relative;
	padding-bottom: 0.8em;
	margin-bottom: 0.8em;
	font-size: 2.2rem;
	font-weight: bold;
}
#sec04 .content h2:after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3em;
	height: 1px;
	border-bottom: 3px solid #1c3039;
}
#sec04 .content .read{
	margin-bottom: 5%;
}
#sec04 .content .read p{
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 2;
}
#sec04 .content .txt{
	margin-bottom: 10%;
}
#sec04 .content .txt p{
	font-size: 1.1rem;
	line-height: 2.3;
}

/*news*/
#news{
	padding: 6% 0 2%;
	background: #e7e5de;
}
#news h2{
	margin-bottom: 1em;
	font-size: 3.6rem;
	font-weight: bold;
	text-align: center;
}
#news .txt{
	margin-bottom: 5%;
}
#news .txt p{
	font-size:0.9rem;
	line-height: 2;
	letter-spacing: 0px;	
}
#news h3{
	position: relative;
	margin-bottom: 2em;
	font-size: 1.8rem;
	font-weight: bold;
	letter-spacing: 0;
}
#news h3:after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: calc(100% - 4em);
	height: 1px;
	margin: auto;
	border-bottom: 1px solid #1c3039;
}
#news .flex{
	margin-bottom: 5%;
}
#news .in{
	width: calc(94% / 3);
}
#news .in .photo{
	margin-bottom: 1%;
}
#news .in img{
	width: 100%;
}
#news .in .txt{
	padding-bottom: 3%;
	margin-bottom: 3%;
	border-bottom: 1px solid #1c3039;
}
#news .in .txt p{
	font-weight: bold;
}
#news .in .date{
	font-size: 1rem;
	font-weight: bold;
}

/*youtube*/
#youtube{
	padding: 2% 0 10%;
	background: #e7e5de;
}
#youtube h2{
	position: relative;
	margin-bottom: 2em;
	font-size: 1.8rem;
	font-weight: bold;
	letter-spacing: 0;
}
#youtube h2:after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: calc(100% - 6em);
	height: 1px;
	margin: auto;
	border-bottom: 1px solid #1c3039;
}
#youtube .flex{
	margin-bottom: 5%;
}
#youtube .in{
	width: calc(95% / 2);
}
#youtube .in .photo{
	margin-bottom: 5%;
}
#youtube .in img{
	width: 100%;
}
#youtube .in .txt{
	padding-bottom: 3%;
	margin-bottom: 3%;
	border-bottom: 1px solid #1c3039;
}
#youtube .in .txt p{
	font-size:1.1rem;
	line-height: 2;
	letter-spacing: 0px;
	font-weight:bold;
}
#youtube .in .date{
	font-size: 1rem;
	font-weight: bold;
}

@media screen and (max-width: 896px){
	#fv{
		height: 70vh;
	}

	#fv .catch{
		top: 30vh;
		left: 0;
		right: 0;
		width: 90%;
		margin: auto;
	}
	#fv .catch h2{
		font-size: 4.2rem;
	}

	#sec01 h2 + .flex{
		display: block;
	}
	#sec01 .txt{
		width: 100%;
		margin: 0 auto;
	}
	#sec01 .txt p{
		line-height: 250%;
		}
	#sec01 .image{
		width: 90%;
		margin: 30px auto 30px;
	}
	
	#sec01 .box .top .logo{
		max-width: 200px;
		margin:10px auto 10px;
	}
	#sec02{
		padding: 10% 0 5%;
	}
	#sec02 .flex,
	#sec03 .flex,
	#sec04 .flex{
		display: block;
	}
	#sec02 .photo,
	#sec03 .photo,
	#sec04 .photo{
		width: 100%;	
		margin: 0 auto 5%;
	}
	#sec02 .content,
	#sec03 .content,
	#sec04 .content{
		width: 100%;
	}
	#sec02 .content .txt,
	#sec03 .content .txt,
	#sec04 .content .txt{
		margin-bottom: 5%;
	}
	#sec02 .banner{
		margin-top: 5%;
	}

	#sec03{
		padding: 5% 0;
	}

	#sec04{
		padding: 5% 0 10%;
	}

	#news{
		padding: 10% 0 5%;
	}

	#youtube{
		padding: 5% 0 10%;
	}
}

@media screen and (max-height: 450px){
	#fv .catch{
		top: 40vh;
		left: 6vw;
	}
	#fv .catch h2{
		font-size: 2.8rem;
	}
	#fv .catch p{
		font-size: 1.4rem;
	}

	#sec01 .box .bottom .in h4{
		font-size: 1.8rem;
	}
}

@media screen and (max-width: 660px){
	#fv .catch h2{
		font-size: 3.8rem;
	}
	#fv .catch p{
		font-size: 1.4rem;
	}
}

@media screen and (max-width: 600px){
	#fv .catch h2{
		font-size: 3rem;
	}
}

@media screen and (max-width: 480px){
	#fv .catch{
		left: 0;
		right: 0;
		width: 90%;
		margin: auto;
	}
	#fv .catch h2{
		font-size: 2rem;
	}
	#fv .catch p{
		font-size: 1rem;
	}

	#sec01 h2{
		margin-bottom: 0.5em;
		font-size: 2rem;
	}
	#sec01 h2:after{
		width: calc(100% - 6em);
		border-bottom: 1px solid #fff;
	}
	#sec01 .txt p{
		line-height: 1.8;
	}
	#sec01 h3{
		font-size: 1.6rem;
	}
	#sec01 h3:after{
		border-bottom: 1px solid #fff;
	}
	#sec01 .box{
		border: 4px solid #fff;
		border-radius: 20px;
	}
	#sec01 .box .top{
		border-bottom: 2px solid #fff;
	}
	#sec01 .box .top .logo{
		max-width: 200px;
	}
	#sec01 .box .top .logo + p{
		font-size: 1rem;
	}
	#sec01 .box .bottom{
		display: block;
	}
	#sec01 .box .bottom .in{
		width: 100% !important;
		padding: 5% 0;
		border-left: none;
		border-top: 2px solid #fff;
	}
	#sec01 .box .bottom .in h4{
		height: auto;
		font-size: 1.4rem;
	}

	#sec02 .content h2,
	#sec03 .content h2,
	#sec04 .content h2{
		padding-bottom: 0.3em;
		font-size: 2rem;
	}
	#sec02 .content h2:after,
	#sec03 .content h2:after,
	#sec04 .content h2:after{
		border-bottom: 1px solid #1c3039;
	}
	#sec02 .content .read p,
	#sec03 .content .read p,
	#sec04 .content .read p{
		font-size: 1.2rem;
	}
	#sec02 .content .txt p,
	#sec03 .content .txt p,
	#sec04 .content .txt p{
		font-size: 1rem;
		line-height: 1.8;
	}
	#sec02 .banner a{
	}
	#sec02 .banner p{
		font-size: 1.6rem;
	}

	#news h2{
		font-size: 2.6rem;
	}
	#news h3,
	#youtube h2{
		font-size: 1.6rem;
	}
	#news .txt p{
		line-height: 1.8;
	}
	#news .flex,
	#youtube .flex{
		display: block;
	}
	#news .in,
	#youtube .in{
		width: 100%;
		margin-bottom: 5%;
	}
}
@media screen and (max-width: 320px){
	#sec02 .banner p{
		font-size: 1.4rem;
	}
}