@charset "utf-8";
/*----------------------------------------------------------------------------------
---------------------------------インポート------------------------------------------
----------------------------------------------------------------------------------*/
@import url("./font.css");
@import url("./reset.css");
/*----------------------------------------------------------------------------------
--------------------------------全デバイス共通---------------------------------------
----------------------------------------------------------------------------------*/

/*-----------------------------------ベース---------------------------------------*/
html{font-size:62.5%;}
body{
	font-family:YakuHanJP,"Noto Sans Japanese","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Osaka,sans-serif;
	font-weight: 400;
	font-size:1.55em;
	line-height:1.7;
	-webkit-text-size-adjust: none;
	box-sizing: border-box;
}
::selection{background:#e4e4ec; color:#043c79;}
::-moz-selection {background:#e4e4ec;color:#043c79;}
a{
	text-decoration:none;
	color:#021325;
	transition:.6s;
}
.sp_only{display: none!important}
.tab_only{display: none!important}
img{
	max-width: 100%;
	height: auto;
}
.preload * {
	-webkit-transition:none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}
.inview{
	opacity: 0;
	-webkit-transform: translateY(50px);
	-ms-transform: translateY(50px);
	transform: translateY(50px);
	transition: opacity 0.8s ease-out 0s, transform 0.8s ease-out 0s;
}
.inview.incontents{
	opacity: 1;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform:translateY(0);
}
#loader-bg {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: #ee7c01;
	z-index: 9999998;
}
#loader {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 200px;
	margin-top: -100px;
	margin-left: -200px;
	text-align: center;
	z-index: 9999999;
}
#loader img {animation: load_ani 1.75s ease-in-out infinite;}
@keyframes load_ani {
	0%   { transform: rotateY(0deg); }
	100% { transform: rotateY(360deg); }
}
#loader p{
	margin-top: 10px;
	color: #fff;
	font-size: 1.6rem;
	font-weight: bold;
	letter-spacing: 0.2em;
	font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	opacity: 0.75;
}


#header{
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 999;
}
#header header{
	box-sizing: border-box;
	padding: 15px 2.5%;
	max-width: 1280px;
	width: 90%;
	margin: 0 auto;
	background: url("../images/h_f_bg.png") repeat 0 0;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
	box-shadow: 0 0 8px rgba(0,0,0,.5);
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
	align-items: center;
}
#header header > div{
	
}
#header header > div.leftbox{width: 28%;}
#header header > div.rightbox{width: 66%;}



#header header nav ul{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
	align-items: center;
}

#header header nav ul li.navi01{width: 31.4%;}
#header header nav ul li.navi02{width: 42.85%;}
#header header nav ul li.navi03{width: 30%;}
#header header nav ul li.navi04{width: 25.7%;}

#header header a{transition: .3s;}
#header header nav ul li a{
	width: 100%;
	display: block;
	box-sizing: border-box;
	padding: 5px 10%;
	
}
#header header nav ul li:not(:last-child) a{
	background: url("../images/h_navi_line.png") no-repeat top right;
	background-size: 3px auto;
}







#con_body{
	background: no-repeat center top url("../images/body_bg_pc.jpg");
	min-height: 360vw;
	background-size: 100% auto;
}

#mv_section{
	height: 56vw;
	background: url("../images/gif_anime01.gif") no-repeat center bottom;
	background-size: 100% auto;
	box-sizing: border-box;
	padding: 130px 0 0 0;
}
#mv_section p{
	width: 60%;
	margin: 0 auto;
}
#mv_section .mv_anime{
	position: relative;
	width: 60%;
	margin: 0 auto;
}
#mv_section .mv_anime > i{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	animation-name: mv_ani;
	animation-duration: 2.2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
@keyframes mv_ani {
	0% {transform: translate(0px, 0px)}
    50% {transform: translate(0px, -5px)}
    100% {transform: translate(0px, 0px)}
}
#mv_section .mv_anime > i.anime01{animation-delay: 0;}
#mv_section .mv_anime > i.anime02{animation-delay: .5s;}
#mv_section .mv_anime > i.anime03{animation-delay: 1s;}


#sp_header{display: none;}

.section_base{
	position: relative;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center bottom;
}
#section1{
	height: 67vw;
	background-image: url("../images/gif_anime02.gif");
}
#section1 p{
	width: 50%;
	margin: 0 auto;
	padding-top: 8vw;
}
#section2{
	height: 53.25vw;
	background-image: url("../images/gif_anime04.gif");
	margin-bottom: 15.5vw;
}
#section2 p{
	width: 50%;
	margin: 0 auto;
	padding-top: 8vw;
}

#section3{
	height: 21.25vw;
	background-image: url("../images/gif_anime03.gif");
	background-position: center top;
	margin-bottom: 0;
}
#section3 p{
	width: 18%;
	margin: 0 auto;
}
#section3 p a{
	width: 100%;
	display: block;
	margin-left: 15vw;
}
#section4{
	height: 21.25vw;
	background-image: url("../images/gif_anime06.gif");
	margin-bottom: 9vw;
}
#section4 p{
	position: relative;
	width: 18%;
	margin: 0 auto;
}
#section4 p a{
	position: relative;
	width: 100%;
	display: block;
	margin-left: -11vw;
}
#section5{
	height: 34.25vw;
	background-image: url("../images/gif_anime05.gif");
	margin-bottom: 5vw;
}
#section5 p{
	position: relative;
	width: 28.12%;
	margin: 0 auto;
}/*
#section5 p a{
	position: relative;
	width: 100%;
	display: block;
	margin-left: 13.5vw;
	animation: mv_ani 1.5s  infinite;
}*/
#section5 p .airship{
	position: relative;
	width: 100%;
	display: block;
	margin-left: 13.5vw;
	animation: mv_ani 1.5s  infinite;
}

#section6{
	height: 33vw;
}
#section6 p{
	position: relative;
	width: 18%;
	margin: 0 auto;
}
#section6 p a{
	position: relative;
	width: 100%;
	display: block;
	margin-left: -20vw;
}
#section7{
	height: 21.25vw;
}
#section7 p{
	position: relative;
	width: 18%;
	margin: 0 auto 8vw;
}
#section7 p span{
	position: relative;
	width: 100%;
	display: block;
}
#section7 ul{
	width: 29%;
	margin: 0 auto;
	background: url("../images/body_sns_bg.png") no-repeat center bottom;
	background-size: 100% auto;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	padding: 0 1.5em 15px;
}
#section7 ul li{
	width: 32%;
	padding-left: 2%;
	box-sizing: border-box;
}

#footer{
	background: url("../images/h_f_bg.png") repeat 0 0;
	padding: 35px 3%;
	color: #fff;
	position: relative;
}
#footer footer{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
	align-items: center;
}
#footer footer .leftbox,
#footer footer .rightbox{width: 18%;}
#footer footer .centerbox{width: 50%;}


#footer footer .leftbox{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
	align-items: center;
}
#footer footer .leftbox .f_logo,
#footer footer .leftbox .f_sns{width: 45%;}
#footer footer .leftbox .f_sns ul{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
	align-items: center;
	margin-top: 14px;
}
#footer footer .leftbox .f_sns ul li{width: 30%;}
#footer footer .centerbox{
	text-align: center;
}
#footer footer .centerbox small{
	font-size: 1.6rem;
	font-weight: 500;
	letter-spacing: 0.1em;
}
#pagetop{
	display: none;
	position: fixed;
	right: 2%;
	bottom: 30px;
	width: 80px;
}

.sp_navi{display: none;}
/*----------------------------------------------------------------------------------
PCのみ
----------------------------------------------------------------------------------*/
@media screen and (min-width:1051px){
	html{overflow-x: hidden;}
	a:hover{opacity: .7;}
	#header header a:hover{opacity: .7;}
}
/*----------------------------------------------------------------------------------
タブレット・SP
----------------------------------------------------------------------------------*/
@media screen and (max-width:1050px){
	body{font-size:1.45em;}
}
/*----------------------------------------------------------------------------------
タブレット
----------------------------------------------------------------------------------*/
@media screen and (max-width:1050px) and (min-width:641px){
	.tab_only{display: inline-block!important;}
}
/*----------------------------------------------------------------------------------
SP
----------------------------------------------------------------------------------*/
@media screen and (max-width: 640px){
	.pc_only{display: none;}
	.sp_only{display: block!important;}
	br.sp_only{display: inline-block!important;}
	#loader {
		width: 120px;
		height: 120px;
		margin-top: -60px;
		margin-left: -60px;
	}
	#loader p{font-size: 1.35rem;}
	
	
	#header{display: none;}
	#con_body{
		min-height: 590vw;
		background-size: 162% auto;
		background-position: 58% 0;
	}

	
	
	
	
	#mv_section{
		height: 78vw;
		background-size: 162% auto;
		padding-top: 5vw;
	}
	#mv_section p,
	#mv_section .mv_anime{
		position: relative;
		width: 100%;
		margin: 0 auto;
	}
	.section_base{
		background-size: 162% auto;
		background-position: 58% bottom;
	}
	#section1{
		height: 107vw;
	}
	#section1 p{
		width: 95%;
	}
	#section2{
		height: 90vw;
		margin-bottom: 24vw;
	}
	#section2 p{
		width: 95%;
	}
	#section3{
		height: 32vw;
		background-position: 58% top;
	}
	#section3 p{
		width: 31%;
	}
	#section3 p a{
		margin-left: 18vw;
	}
	#section4{
		height: 38vw;
		margin-bottom: 12vw;
	}
	#section4 p{
		width: 31%;
	}
	#section4 p a{
		margin-left: -17vw;
	}
	#section5{
		height: 60vw;
		margin-bottom: 5vw;
	}
	#section5 p{
		width: 60%;
	}
	#section5 p a{margin-left: 14.5vw;}
	#section6{
		height: 55vw;
	}
	#section6 p{
		width: 31%;
	}
	#section6 p a{
		margin-left: -33vw;
	}
	#section7{
		height: 21.25vw;
	}
	#section7 p{
		position: relative;
		width: 31%;
		margin: 0 0 14vw 29vw;
	}
	#section7 ul{
		width: 61%;
		padding: 0 0.25em 15px;
	}
	#section7 ul li{
		width: 33%;
		padding-left: 1%;
	}

	#footer{
		background-size: 60px auto;
		padding: 25px 5%;
	}
	#footer footer{display: block;}
	#footer footer .leftbox{width: 100%;}
	#footer footer .rightbox{display: none;}
	#footer footer .centerbox{width: 100%;}
	#footer footer .leftbox{display: block;}
	#footer footer .leftbox .f_logo,
	#footer footer .leftbox .f_sns{
		width: 31%;
		margin: 0 auto;
	}
	#footer footer .leftbox .f_logo{margin-bottom: 20px;}
	#footer footer .leftbox .f_sns ul{margin-top: 10px;}
	#footer footer .centerbox{margin-top: 30px;}
	#footer footer .centerbox small{
		font-size: 1.2rem;
		letter-spacing: 0.05em;
	}
	#pagetop{
		right: 2.5%;
		bottom: 15px;
		width: 50px;
	}
	
	.sp_navi{display: block;}
	#sp_header{
		display: block;
		width: 94%;
		margin: 0 auto;
	}
	#sp_header h2{
		width: 20%;
		padding-top: 10px
	}
	#sp_header .sp_navi .navi_button,
	#sp_header .sp_navi nav{position: fixed;}
	#sp_header .sp_navi .navi_button{
		z-index: 999;
		
		top: 5px;
		right: 3.5%;
		width: 45px;
		height: 60px;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% auto;
		background-image: url("../images/sp_navi.png");
	}
	#sp_header .sp_navi nav{
		right: 0;
		top: 0;
		width:100%;
		height: 100vh;
		margin-right: -100%;
		background: url("../images/spnavi_bg.png") repeat 0 0;
		background-size: 100px 100px;
		overflow-x: hidden;
		z-index: 3;
		color: #fff;
		transition: .4s;
	}
	#sp_header .sp_navi nav h3{
		width: 60%;
		margin: 0 auto;
		padding: 10vw 0 7vw;
		box-sizing: border-box;
	}
	#sp_header .sp_navi nav ul{
		width: 90%;
		margin: 0 auto;
		border: solid 1px rgba(255,255,255,.5);
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		flex-wrap:wrap;
		justify-content: space-between;
		border-radius: 15px;
	}
	#sp_header .sp_navi nav ul li{
		width: 50%;
		box-sizing: border-box;
	}
	#sp_header .sp_navi nav ul li:nth-child(1),
	#sp_header .sp_navi nav ul li:nth-child(2){border-bottom: solid 1px rgba(255,255,255,.5);}
	#sp_header .sp_navi nav ul li:nth-child(1),
	#sp_header .sp_navi nav ul li:nth-child(3){border-right: solid 1px rgba(255,255,255,.5);}
	
	#sp_header .sp_navi nav ul li a{
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 3px;
	}
	
	
	#sp_header .sp_navi.open nav{margin-right: 0;}
	#sp_header .sp_navi.open .navi_button{background-image: url("../images/sp_navi_c.png");}

}