/*============================
commmon
============================*/
html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,cite,code,img,q,samp,small,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,figcaption,figure,footer,header,nav,section,time,audio,video {margin:0;padding:0;border:0;outline:0;font-size:100%;font-style:normal;vertical-align:baseline;background-color:transparent; }body {line-height:1; }blockquote,q {quotes:none; }blockquote:before,blockquote:after,q:before,q:after {content:'';content:none; }a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent; }table {border-collapse:collapse;border-spacing:0; }input,select {vertical-align:top; }article,aside,footer,header,main,nav,section{display:block; }
html { font-size:62.5%; overflow-y: scroll;}
body {
	background-color:#1f248e;
	color:#001011;
	text-align:center; }
img { vertical-align: top;}
a:link    { text-decoration:none; }
a:active  { text-decoration:underline; }
a:visited { text-decoration:none; }
a:hover img { opacity: 0.8; }
* { transition: ease-in-out, 0.5s; font-family: 'Noto Sans JP', sans-serif;}


/* clearfix */
.clearfix:after { content:""; display:block; clear:both; height:0px; visibility:hidden; }
.clearfix { min-height:1px; }

p { margin:1em 0 0; font-size:1.5rem; line-height:1.7em; color: #001011; }
ul,ol,dl,li,dt.dd { margin: 1em 0 0; padding: 0; list-style-position: inside; }
h2 { margin:3em 0 1em; font-size:28px; line-height:200%; font-weight: 500; text-align: center; color: #001011; }
h3 { margin:0.5em 0 0; font-size:2.4rem; line-height:1.7em; }



/* loading */
#loader-bg {
  display: none; position: fixed; top: 0px; left: 0px;  z-index: 100;
  width: 100%; height: 100%; background: #1f248e;
}
#loader {
  display: none; z-index: 2;
  position: fixed; top: 80vh; left: 0; right: 0;
  width: 370px; height: 10px; margin: auto;
  text-align: center; color: #fff; }
#loading p {position: absolute; margin: -27vh auto 0; top: 40vh; right: 0;left: 0;}
/* loading bar */
#progress-box { width: 100%; height: 6px; background: #777; position: relative;}
#progress-bar {  width: 0; height: 4px; background: #fff; position: absolute; left: 0; top: 0;}

@media (max-width: 767px) {
	#loader { bottom: -60vh; width: 50%; }
	#loading p {width: 50%;}
	#loading p img {width: 100%; height: auto;}
	#progress-box { width: 100%; height: 6px; background: #777; position: relative;}
	#progress-bar {  width: 0; height: 4px; background: #fff; position: absolute; left: 0; top: 0;}
}

#wrap { min-width: auto; text-align: left; }
#wrap .text-center { text-align: center; }
#content {overflow: hidden;}

#loading-sp { display: none;}
@media (max-width: 767px) {
	#loading-sp { display: block; position:fixed; height: 100vh; width: 100%; background: #1f248e; z-index:10; top: 0; transition: ease-in-out, 0.5s;}
	#loading-sp p {position: absolute; width: 50%;margin: -27vh auto 0; top: 40vh; right: 0;left: 0; text-align: center;}
	#loading-sp p img {width: 100%; height: auto;}
	#loading-sp.sp-open { top: -120vh;}

	#loading-sp p:after { display: block; content:"Enter"; margin-top: 20px; font-size: 18px; color: #fff; animation:blink 1.5s ease-in-out infinite alternate;}
	@keyframes blink{ 0% {opacity:0;} 100% {opacity:1;} }

	#loading-sp + header, #loading-sp + header + #content, #loading-sp + header + #content + main {position:fixed;}
	#loading-sp.sp-open + header,#loading-sp.sp-open + header + #content,#loading-sp.sp-open + header + #content + main {position: static; overflow: hidden;}
}

#split { position: fixed; width: 100%; height: 100vh; z-index: 3; animation: areaHidden; animation-delay: 4s; animation-fill-mode:forwards}
#split-l { transition: .5s ease-in; transition-delay: 1s; position: absolute; left: -49%;  transform:skewX(-30deg); background: #1f248e; width: 100%; height: 100vh; }
#split-r { transition: .5s ease-in; transition-delay: 1s; position: absolute; right: -49%; transform:skewX(-30deg); background: #1f248e; width: 100%; height: 100vh; }
#split p { transition: .5s ease-in; transition-delay: 1s; position: absolute; margin: -27vh auto 0; top: 40vh; right: 0;left: 0; text-align: center;}
#split.open #split-l { width: 0;}
#split.open #split-r { width: 0;}
#split.open p { opacity: 0;}

@keyframes areaHidden { 0% { visibility: visible;} 100% {visibility:hidden;} }

@media (max-width: 767px) {
	#split { display: none;}
}

header { position: fixed; background: #fff; width: 100%; z-index: 2; opacity: 0;
	animation: fadeIn;  animation-duration: 1s; animation-delay: 3s;  animation-fill-mode:forwards;}
header p { margin: 0; }
header p.logo { width: 18%; margin-left: 5%; line-height: 6vw; }
header p.logo img { vertical-align: middle; }
header p.button { position: absolute; top:3vw; right: 0; width: 23%; background: #fff; }
header p img { width: 100%; height: auto; }

@media (max-width: 767px) {
  header { position: fixed !important; top: 0; background: #fff; width: 100%; height: 40px; z-index: 2; opacity: 1; padding: 3vh 0; height: auto;
  animation: fadeIn; animation-duration: 0; animation-delay: 0; animation-fill-mode:forwards;}
  header p.logo { width: 50%; margin-left: 5%; line-height: 6vw; }
  header p.button { position: absolute; top:50%;  bottom: 0; margin-top: -5%; right: 0; width: 40%; background: #fff; }
  #content{ padding-top: 40px; width: 100%; overflow: hidden;}
}


#visual { padding-top: 6vw; background: #fff; }
#visual img { width: 100%; height: auto; }
#visual #area1, #visual #area2, #visual #area3 { position: relative; overflow: hidden; }
#visual p { position: absolute; margin: 0; top: 0; }
#visual #area1 p:first-child, #visual #area2 p:first-child, #visual #area3 p:first-child { position: static; }

#visual #area1 .mov1-1{ width: 100%; height: auto; opacity: 0;    animation: fadeIn;  animation-duration: 0.5s; animation-delay: 1.7s;   animation-fill-mode:forwards; }
#visual #area1 .mov1-2{ width: 100%; height: auto; right: -100vw; animation: rightIn;  animation-duration: 0.9s; animation-delay: 1.0s; animation-fill-mode:forwards; }
#visual #area1 .mov1-3{ width: 100%; height: auto; left:  -100vw; animation: leftIn; animation-duration: 0.8s; animation-delay: 1.1s; animation-fill-mode:forwards; }
#visual #area1 .mov1-4{ width: 100%; height: auto; left:  -100vw; animation: leftIn; animation-duration: 0.9s; animation-delay: 1.0s; animation-fill-mode:forwards; }
#visual #area1 .mov1-5{ width: 100%; height: auto; right: -100vw; animation: rightIn; animation-duration: 0.5s; animation-delay: 2s; animation-fill-mode:forwards; }
@keyframes fadeIn { 0% { opacity:0;} 100% {opacity:1;} }
@keyframes leftIn { 0% { left:  -100vw;} 100% {left: 0;} }
@keyframes rightIn{ 0% { right: -100vw;} 100% {right:0;} }

@media (max-width: 767px) {
  #visual, #visua2, #visua3 { display: none; }
}


#slide{ height:0; background: #fff;}
#slide ul{ display: none;}

@media (max-width: 767px) {
  #slide{ display: block; height: auto;}
	#slide ul{ display: block;}
  #slide img{ display:inline; width: 100%; height: auto;}
  
}



#cont-foot{ background: url(../img/footer-bg.png) no-repeat center top / cover #fff; padding-bottom: 20vh; }

#message { display: table; width: 100%; height: 40vh; }
#message p { display: table-cell; text-align: center; vertical-align: middle; width: 100%; height: 40vh; font-size: 24px; line-height: 200%; font-weight: 300;}
#message p br { display: none; }
#message p br:nth-child(1) { display: block; }

@media (max-width: 767px) {
	#cont-foot{ background: url(../img/footer-bg.png) no-repeat center top / 100% auto #fff; }
	#message p{  font-size: 5vw; }
	#message p br { display: block; }
}

#purpose { display: table; vertical-align: middle; }
#purpose .box { display: table-cell; vertical-align: middle; width:49%; padding-left: 1%; text-align: center; }
#purpose .box .inner { background: #fff; padding: 40px 10px;}
#purpose .box h2 { margin: 0 0 1em; font-size: 28px; font-weight: 500;}
#purpose .box p {text-align: left; display: inline-block; line-height: 200%; font-size: 16px; font-weight: 300;}
#purpose .pic { display: table-cell; vertical-align: middle; width: 47%; padding-left:2.9%;}
#purpose .pic p img { width: 100%; height: auto;}

@media (max-width: 767px) {
	#purpose { display: flex; flex-direction: column-reverse; flex-wrap: wrap;}
	#purpose .box { display: block; width:100%; padding-left: 0;}
	#purpose .box .inner { background: none; padding: 40px 0;}
	#purpose .box h2 {}
	#purpose .box p {}
	#purpose .pic { display: block; width: 100%; padding: 0; }
}

#subimages { margin-top: 10vh; background: #fff;}
#subimages ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap;}
#subimages ul li { margin: 0; padding: 0; list-style: none; max-width: 33.3%;}
#subimages ul li img { width: 100%; height: auto;}

@media (max-width: 767px) {
	#subimages ul li { margin: 0; padding: 0; list-style: none; max-width: 50%;}
}

footer { background: #1f248e; }
footer .content-inner { position: relative; width: 100%; }

p.gotop.active { opacity: 1; display: block; }
p.gotop { position: fixed; width: 6.6%; margin: 0; right: 80px; bottom: 10vh; opacity:0; }
p.gotop a img { width: 100%; height: auto; }



@media (max-width: 767px) {
	p.gotop {width: 60px; margin: 0; right: 10px; }
}

footer #company { color: #fff; }
footer #company h2 { padding-top: 3em; color: #fff; }
footer #company dl { display: table; text-align: center; margin: 0 auto; line-height: 2; }
footer #company dl dt { float:left; clear:left; margin-top: 1em; width: 5em; font-size: 16px; font-weight: 300; line-height: 200%; vertical-align: top; text-align: left; }
footer #company dl dd { float:left; margin-top: 1em; font-size: 16px; font-weight: 300; line-height: 200%; text-align: left; }

@media (max-width: 767px) {
	footer #company dl { width: 90%; margin: 0 auto; }
	footer #company dl dt { display: block; margin-top: 1em; width: 100%; vertical-align: top; }
	footer #company dl dd { display: block; margin-top: 0; width: 100%; }
}

footer p { text-align: center; }
footer p.contact { width: 88%; margin: 20vh auto 35vh;}
footer p.contact a { display: block; background: url(../img/btn-contact-footer-bg.png) no-repeat 0 0 / 100% auto; }
footer p.contact a img { width: 100%; height: auto;}

footer p.logo { }
footer p.copyright { color: #fff; padding-bottom: 10px; }

@media (max-width: 767px) {
	footer p.logo { width:70%; margin: auto;}
	footer p.logo img { width: 100%; height: auto; }
}


.noise {
	background: url(../img/noise.png);6px; }
}