@charset "UTF-8";
/* CSS Document */

header{
	background-image: url("../img/top/main.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	padding-bottom: 38%;

}

/*section0*/
.sec0{
	background: #bfbfbf; 
	
}
.main{
	width: 1300px;
	height: 450px;
	margin: 0 auto;
	position: relative;
	z-index: 10;
}
.main_txt h2{
	position: absolute;
	top:-540px;
	animation-name: faderight;
    animation-duration: 2s;
    animation-iteration-count: 1;
}
@keyframes faderight {
from {
    opacity: 0;
    transform: translateX(-100px);
}
to {
    opacity: 1;
transform: translateX(0px);
}
}
.main_txt h3{
	position: absolute;
	top:-190px;
	font-size: 20px;
	font-weight: 900;
	color: #fff;
	animation-name: fadeleft;
    animation-duration: 2s;
    animation-iteration-count: 1;
	padding-bottom: 8%;
}
@keyframes fadeleft {
from {
    opacity: 0;
    transform: translateX(100px);
}
to {
    opacity: 1;
transform: translateX(0px);
}
}

.main_sp_frame{
	background-image: url("../img/top/main_sp.png");
	background-repeat: no-repeat;
	width: 393px;
	height: 788px;
	position: absolute;
	top: -650px;
	left: 750px;
	animation-name: fadein;
    animation-duration: 3s;
    animation-iteration-count: 1;
	
}
@keyframes fadein {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}

.main_sp_frame .btn{
	background: #023378;
	font-size: 20px;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 680px;
    text-align: center;
    padding: 20px 15px;
    font-weight: bold;
    background-color: #023378;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .2s;
    transition: all 1s;
}
.main_sp_frame .btn a{
	color: #fff;
	text-decoration: none;
}

/* マウスオーバー時 */
.main_sp_frame .btn:hover {
    background-color: #0b9eb6;
    color: #000000;
    cursor: pointer;
}


/*section1*/
.sec1{
	background: #000;
	padding-bottom: 160px;
	
}
.sec1 .sec1_mainbox{
	background-image: url("../img/top/sec01_bg.png");
	background-repeat: no-repeat;
	width: 1205px;
	height: 841px;
	margin: 0 auto 0 auto;
	z-index: 1;
	position: relative;
	top: -400px;	
	
}
.sec1 .about{
	width: 440px;
	height: 440px;
	background: #fff;
	border-radius: 20px;
	position: relative;
	top: 310px;
	left: 50px;
	padding: 20px;
}
.sec1 .about h3{
	width: 408px;
	margin: 0 auto;
	font-size: 30px;
	font-weight: 900;
	padding-top: 20px;
}
.sec1 .about p{
	font-size: 16px;
	padding: 20px;
	line-height: 2.0em;
}
.sec1 .sec_btn{
	width: 100%;
	margin-bottom: 20px;
	padding:30px!important;
	line-height: 3.0em!important;
	font-size: 20px!important;

}
	
/*section2*/
.sec2{
	background-image: url("../img/top/sec2_bg_img.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	
}
.sec2_mainbox{
	background-image: url("../img/top/sec2_bg.png");
	background-repeat: no-repeat;
	width: 1204px;
	height: 893px;
	margin: 0 auto;
	position: relative;
	top: -450px;
	
}
.sec2 .news_box{
	width: 1100px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	padding: 310px 0 30px 0;
}
.sec2 .news{
	width: 317px;
	margin: 0;
}
.sec2 .thumbnail{
	margin-bottom: 20px;
	
}
.sec2 .news .year{
	font-size:15px;
	margin-bottom: 5px;
}
.sec2 .news .news_tit{
	font-size:18px;
	font-weight: bold;
	margin-bottom: 5px;
}
.sec2 .news .article{
	font-size:15px;
	line-height: 1.7em;
	margin-bottom: 10px;
}
.sec2 .news .more{
	text-align: right;
	font-size:15px;
	margin-bottom: 5px;
}


.join{
	background-image: url("../img/top/sec3_bg.png");
	background-repeat: no-repeat;
	width: 1204px;
	margin: 0 auto;
	height: 264px;
	position: relative;
	top:-364px;
}
.join h3{
	background: #fff;
	width: 1204px;
	margin: 0 auto;
	height: auto;
	font-size: 50px;
	font-weight: bold;
	text-align: center;
	position: relative;
	top:264px;	
	padding: 30px 0 10px 0;
	border-radius: 20px;	
}

.sec3_odd{
	position: relative;
	margin-top: -170px;	
}
.sec3_odd .sec3_odd_pic{
	width: 1204px;
	margin: 0 auto;
}
.sec3_odd .sec3_odd_pic img{
	margin-left: 50px;
}
.sec3_odd .sec3_odd_txt_group{
	position: relative;
	top:-425px;	
	margin-left: 48%;
	background: #000;
	color: #fff;
	border-radius: 20px 0 0 20px;
	padding: 20px 0 20px 50px;
}
.sec3_odd .sec3_odd_txt_group h4{
	font-size: 30px;
	font-weight: bold;
	color: #fff;
	margin-bottom: 20px;
}
.sec3_odd .sec3_odd_txt p{
	width: 62%;
	margin-bottom: 20px;
	line-height: 1.7em;
}
.odd3{
	margin-top: -570px;
}
.odd_txt3{
	margin-top: 90px;
}
.sec3_eve{
	margin: 0;
}
.sec3_eve .sec3_eve_pic{
	width: 1204px;
	margin: 0 auto;
	text-align: right;
	position: relative;
	top:-300px;
}

.sec3_eve .sec3_eve_txt_group{
	position: relative;
	top:-710px;	
	margin-right: 45%;
	background: #000;
	color: #fff;
	border-radius: 0 20px 20px 0;
	padding: 20px 0 20px 50px;
}
.sec3_eve .sec3_eve_txt_group h4{
	font-size: 30px;
	font-weight: bold;
	color: #fff;
	margin: 0 0 20px 35%;
}
.sec3_eve .sec3_eve_txt p{
	width: 62%;
	margin: 0 20px 20px 35%;
	line-height: 1.7em;
}
.sec3 .sec_btn{
	width: 100%;
	margin-bottom: 20px;
	padding:30px!important;
	line-height: 3.0em!important;
	font-size: 20px!important;

}

.sec4 h3{
	width: 1213px;
	margin: -250px auto 0 auto;
}

.sec0,.main_sp_frame,.sec1,.sec2,.join,.sec3,.sec4{
	display: block!important;
}
.sec0_sp,.main_sp_frame_sp,.sec1_sp,.sec2_sp,.sec3_sp,.sec4_sp{
	display: none!important;
}


@media screen and (max-width: 1700px){
	.main{
	width: 80%;
	height: 450px;
}
	.main_txt h2{
	top:-540px;

}

.main_txt h3{
	top:-190px;
}
	.main_sp_frame{
	top: -600px;
	left: 750px;

}


}
@media screen and (max-width: 1500px){
	.main_txt h2{
	top:-490px;
}

.main_txt h3{
	top:-130px;
}
	.main_sp_frame{
		background-size: contain;
		width: 320px;
		height: 800px;
		top: -500px;
		left: 700px;

}
.main_sp_frame .btn{
    width: 80%;
    margin-top: 530px;

}
.sec3_odd .sec3_odd_txt p{
	width: 82%;
	margin-bottom: 20px;
}
.sec3_eve .sec3_eve_txt_group h4{
	font-size: 30px;
	margin: 0 0 20px 1%;
}
.sec3_eve .sec3_eve_txt p{
	width: 82%;
	margin: 0 20px 20px 1%;
}

}
@media screen and (max-width: 1350px){
	.main_txt h2{
	position: absolute;
	top:-420px;
}
	.main_txt h2 img{
		width: 80%;
	}

	.main_sp_frame{
	top: -450px;
	left: 700px;

}
.sec3_odd .sec3_odd_txt p{
	width: 92%;
	margin-bottom: 20px;
}
.sec3_eve .sec3_eve_txt_group h4{
	font-size: 30px;
	margin: 0 0 20px 1%;
}
.sec3_eve .sec3_eve_txt p{
	width: 92%;
	margin: 0 20px 20px 1%;
}
	
}
@media screen and (max-width: 1024px){
header{
	background-image: url("../img/top/sp/sp_main_bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 800px;
	margin: 0 auto;

}
.sec0_sp,.main_sp_frame_sp,.sec1_sp,.sec2_sp,.sec3_sp,.sec4_sp{
	display: block!important;
}
.sec0,.main_sp_frame,.sec1,.sec2,.join,.sec3,.sec4{
	display: none!important;
}
	
/*section0*/

.sec0_sp .main{
	width: 95%;
	height: 600px;
	margin: 0 auto;
	
}
.sec0_sp .main_txt h2{
	width: 100%;
	margin: 0 auto;
	position: absolute;
	top:-700px;
	text-align: center;
}
.sec0_sp .main_txt h2 img{
	width: 50%;
	}
.sec0_sp .main_txt h3{
	width: 100%;
	margin: 0 auto;
	position: absolute;
	top:-350px;
	font-size: 20px;
	font-weight: 900;
	color: #fff;
	animation-name: fadeleft;
    animation-duration: 2s;
    animation-iteration-count: 1;
	text-align: center;
}
.sec0_sp .main_sp_frame_sp{
	width: 100%;
	margin: 0 auto;

}
	.sec0_sp .sp_bg{
		background-image: url("../img/top/sp/sp_main_sp.png");
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	margin: 0 auto;
	height: 1164px;
	position: absolute;
	top: -950px;
	left: 0px;
	animation-name: fadein;
    animation-duration: 3s;
    animation-iteration-count: 1;
		
	}
	.sp_bg .btn{
	background: #023378;
	font-size: 20px;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1000px;
    text-align: center;
    padding: 30px 15px;
    font-weight: bold;
    background-color: #023378;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .2s;
    transition: all 1s;
}
.sp_bg .btn a{
	color: #fff;
	text-decoration: none;
}
	
	
/*section1*/
.sec1_sp{
	width: 95%;
	margin: 0 auto;
	background: #fff;
	padding-bottom: 160px;	
}
	.sec1_sp .number{
		margin-top: -300px;
		text-align: center;
	}
.sec1_sp .sec1_mainbox{
	background-image: url("../img/top/sp/sp_sec1_bg.png");
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 600px;
	
}
.sec1_sp .about{
	width: 90%;
	height: 320px;
	background: #fff;
	border-radius: 20px;
	position: relative;
	top: 200px;
	left: 0px;
	padding: 20px;
	margin: -10px auto 0 auto;
}
.sec1_sp .about h3{
	width: 100%;
	margin: 0 auto;
	font-size: 30px;
	font-weight: 900;
	padding-top: 10px;
	text-align: center;
}
.sec1_sp .about p{
	font-size: 16px;
	padding: 20px;
	line-height: 2.0em;
}
.sec1_sp .sec_btn{
	width: 95%;
	margin-bottom: 20px;
	padding:30px!important;
	line-height: 3.0em!important;
	font-size: 20px!important;

}
	
/*section2*/
	.sec2_sp .number2{
		text-align: center;
		margin: -150px 0 0 0;
	}
.sec2_sp .sec2_mainbox{
	width: 95%;
	margin: -10px auto 0 auto;
	background: #000;
	border-radius: 20px;
	position: relative;
	top: 0;
	height: auto;
	padding: 40px;
	box-sizing: border-box;
}
	.sec2_sp .news_ttl{
		text-align: center;
		padding: 20px 0;
	}
.sec2_sp .news_box{
	width: 100%;
	margin: 0 auto;
}
.sec2_sp .news{
	width: 100%;
	margin: 0;
	padding-bottom: 30px;
}
.sec2_sp .news img{
	width: 100%;
	margin-bottom: 20px;
}
.sec2 .thumbnail{
	width:100%;
	height: auto;
	object-fit: cover;
	
	}
.sec2_sp .news .year{
	font-size:15px;
	margin-bottom: 5px;
	color: #fff;
}
.sec2_sp .news .news_tit{
	font-size:18px;
	font-weight: bold;
	margin-bottom: 5px;
	color: #fff;
}
.sec2_sp .news .article{
	font-size:15px;
	line-height: 1.7em;
	margin-bottom: 10px;
	color: #fff;
}
.sec2_sp .news .more{
	text-align: right;
	font-size:15px;
	margin-bottom: 5px;
}

	
/*section3*/
	.number3,.sec3_ttl{
		text-align: center;
		padding-top: 50px;
	}
.sec3_sp .sec3_odd{
	width: 95%;
	margin: 0 auto;
}
	.sec3_sp .sec3_wrap{
		width: 95%;
		margin: -10px auto 0 auto;
		background: #000;
		border-radius: 20px;
		padding: 30px;
		box-sizing: border-box;
		
	}
	.sec3_sp_pic img{
		width: 100%;
		padding: 20px 0;
		
	}
	.sec3_txt_group{
		color: #fff;
		margin: 10px 0;
	}
	.sec3_txt_group h4{
		font-size: 25px;
		padding: 0 0 20px 0;
	}
	.sec3_sp .sec_btn{
		width: 100%;
		margin: 30px 0 50px 0;
	}
	
	

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

	
/*section0*/

.sec0_sp .main{
	width: 95%;
	height: 600px;
	margin: 0 auto;
	
}
.sec0_sp .main_txt h2{
	width: 100%;
	margin: 0 auto;
	position: absolute;
	top:-700px;
	text-align: center;
}
.sec0_sp .main_txt h2 img{
	width: 70%;
	}
.sec0_sp .main_txt h3{
	width: 100%;
	margin: 0 auto;
	position: absolute;
	top:-350px;
	font-size: 20px;
	font-weight: 900;
	color: #fff;
	animation-name: fadeleft;
    animation-duration: 2s;
    animation-iteration-count: 1;
	text-align: center;
}
.sec0_sp .main_sp_frame_sp{
	width: 50%;
	margin: 0 auto;

}
	.sec0_sp .sp_bg{
		background-image: url("../img/top/sp/sp_main_sp.png");
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	margin: 0 auto;
	height: 1164px;
	position: absolute;
	top: -950px;
	left: 0px;
	animation-name: fadein;
    animation-duration: 3s;
    animation-iteration-count: 1;
		
	}
	.sp_bg .btn{
	background: #023378;
	font-size: 20px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1000px;
    text-align: center;
    padding: 30px 15px;
    font-weight: bold;
    background-color: #023378;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .2s;
    transition: all 1s;
}
.sp_bg .btn a{
	color: #fff;
	text-decoration: none;
}
	
	
/*section1*/
.sec1_sp{
	width: 95%;
	margin: 0 auto;
	background: #fff;
	padding-bottom: 160px;	
}
	.sec1_sp .number{
		margin-top: -300px;
		text-align: center;
	}
.sec1_sp .sec1_mainbox{
	background-image: url("../img/top/sp/sp_sec1_bg.png");
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	height: 600px;
	
}
.sec1_sp .about{
	width: 80%;
	height: 320px;
	background: #fff;
	border-radius: 20px;
	position: relative;
	top: 150px;
	left: 0;
	padding: 20px;
	margin: -10px auto 0 auto;
}
.sec1_sp .about h3{
	width: 100%;
	margin: 0 auto;
	font-size: 30px;
	font-weight: 900;
	padding-top: 10px;
	text-align: center;
}
	.sec1_sp .about h3 img{
		width: 60%;
		text-align: center;
	}
.sec1_sp .about p{
	font-size: 16px;
	padding: 20px;
	line-height: 2.0em;
}
.sec1_sp .sec_btn{
	width: 95%;
	margin-bottom: 20px;
	padding:30px!important;
	line-height: 3.0em!important;
	font-size: 20px!important;

}


}
@media screen and (max-width: 670px){
	.sec0_sp .sp_bg{
	background-image: url("../img/top/sp/sp_main_sp.png");
	background-repeat: no-repeat;
	background-position: 50% 50%;
		background-size: contain;
	width: 85%;
	margin: 0 auto;
	height: 1164px;
	position: absolute;
	top: -950px;
	left:0;
	right: 0;
	animation-name: fadein;
    animation-duration: 3s;
    animation-iteration-count: 1;
		
	}
	.sp_bg .btn{
	background: #023378;
	font-size: 20px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 970px;
    text-align: center;
    padding: 25px 15px;
    font-weight: bold;
    background-color: #023378;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .2s;
    transition: all 1s;
}

}
@media screen and (max-width: 600px){
header{
	background-image: url("../img/top/sp/sp_main_bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 500px;
	margin: 0 auto;

}
.sec0_sp .main{
	width: 95%;
	height: 600px;
	margin: 0 auto;
	
}
.sec0_sp .main_txt h2{
	width: 100%;
	margin: 0 auto;
	position: absolute;
	top:-500px;
	text-align: center;
}
.sec0_sp .main_txt h2 img{
	width: 70%;
	}
.sec0_sp .main_txt h3{
	width: 100%;
	margin: 0 auto;
	position: absolute;
	top:-250px;
	font-size: 15px;
	font-weight: 900;
	color: #fff;
	animation-name: fadeleft;
    animation-duration: 2s;
    animation-iteration-count: 1;
	text-align: center;
}

.sec0_sp .sp_bg{
	background-image: url("../img/top/sp/sp_main_sp.png");
	background-repeat: no-repeat;
	background-position: 50% 50%;
		background-size: contain;
	width: 85%;
	margin: 0 auto;
	height: 1164px;
	position: absolute;
	top: -780px;
	left:0;
	right: 0;
	animation-name: fadein;
    animation-duration: 3s;
    animation-iteration-count: 1;
		
	}
	.sp_bg .btn{
	background: #023378;
	font-size: 20px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 820px;
    text-align: center;
    padding: 30px 15px;
    font-weight: bold;
    background-color: #023378;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .2s;
    transition: all 1s;
}
.sp_bg .btn a{
	color: #fff;
	text-decoration: none;
}


}
@media screen and (max-width: 414px){
	header{
	background-image: url("../img/top/sp/sp_main_bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 430px;
	margin: 0 auto;

}
.sec0_sp .main{
	width: 95%;
	height: 450px;
	margin: 0 auto;
	
}
.sec0_sp .main_txt h2{
	width: 100%;
	margin: 0 auto;
	position: absolute;
	top:-400px;
	text-align: center;
}
.sec0_sp .main_txt h2 img{
	width: 70%;
	}
.sec0_sp .main_txt h3{
	width: 100%;
	margin: 0 auto;
	position: absolute;
	top:-200px;
	font-size: 13px;
	font-weight: 900;
	color: #fff;
	animation-name: fadeleft;
    animation-duration: 2s;
    animation-iteration-count: 1;
	text-align: center;
}

	.sp_bg .btn{
	background: #023378;
	font-size: 18px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 795px;
    text-align: center;
    padding: 10px 15px;
    font-weight: bold;
    background-color: #023378;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .2s;
    transition: all 1s;
}
.sp_bg .btn a{
	color: #fff;
	text-decoration: none;
}

/*section1*/

.sec1_sp .about{
	width: 80%;
	height: 320px;
	background: #fff;
	border-radius: 20px;
	position: relative;
	top: 120px;
	left: 0;
	padding: 20px;
	margin: -10px auto 0 auto;
}

.sec1_sp .about p{
	font-size: 16px;
	padding: 20px;
	line-height: 1.8em;
}

.sec2_sp .sec_btn{
	width: 100%;
	margin: 0 auto;
	
	}
.number img ,.number2 img,.number3 img{
	width: 70%;
	margin: 0 auto;
	}
	.sec3_ttl img{
		width: 100%;
		margin: 0 auto;
	}
	.sec4_sp h3 img{
		width: 95%;
		margin: 0 auto;
		
	}
}