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

body, html {
	font-size: 6.25%;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
	scroll-behavior: smooth;
}
.bgvideo{ position: fixed; z-index: -1; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; overflow: hidden; pointer-events: none}
.bgvideo video{ min-height: 100vh; min-width: 100vw; width: auto; height: auto; object-fit: cover}

div.container {width: 96%; max-width: 1260px; margin: 0 auto;}
a {text-decoration: none; transition: 0.3s}
a:hover {opacity: 0.5}
p {line-height: 1.6; font-size: 15rem;}
img {max-width: 100%}
hr {display: block; border-bottom: 1px solid #ccc; margin: 60px auto}
sup {font-size: 80%; vertical-align: super}

h2.section-title {font-family: "Montserrat", sans-serif; font-weight: normal; font-size: 36rem; position: relative; line-height: 1.8;}
h2.section-title::after {content: ''; width: 60px; height: 1px; background-color: #00a0e9; position: absolute; bottom: 0; left: 0;}

a.btn-blue { display: inline-block; padding: 15px 35px; margin-right: 5px; border: 1px solid #fff; box-sizing: border-box; font-size: 14rem; color: #fff; border-radius: 50px; background: linear-gradient(90deg,rgba(0, 46, 111, 1) 0%, rgba(0, 175, 255, 1) 100%); transition: 0.5s;}
a.btn-blue:hover { padding: 15px 25px 15px 45px;}

a.btn-white { display: inline-block; padding: 15px 35px; margin-right: 5px; border: 1px solid #005bac; box-sizing: border-box; font-size: 14rem; color: #005bac; border-radius: 50px; background: #fff; transition: 0.5s;}
a.btn-white:hover { padding: 15px 25px 15px 45px;}

a.btn-text { display: inline-block; color: #00a0e9; padding: 2px 0; border-bottom: 2px solid #00a0e9; font-weight: bold; font-size: 14rem; transition: 0.5s;}
a.btn-text:hover { padding: 2px 15px 2px 0; }

@media screen and (max-width: 1024px) {
	div.container {width: 90%;}
	h2.section-title {font-size: 30rem; line-height: 1.8;}
	h2.section-title::after { width: 60px;}
	a.btn-blue { display: block; max-width: 240px; margin: 0 auto 20px auto; text-align: center}
	a.btn-white{ display: block; max-width: 240px; margin: 0 auto 20px auto; text-align: center}
}

.pc_show{display: inline}
.sp_show{display: none}

@media screen and (max-width: 1024px) {
	.pc_show{display: none}
	.sp_show{display: inline}
}

/* Header NAVI */
.header {position: fixed; width: 100%; display: flex; justify-content: space-between; 
	padding: 0 10rem; box-sizing: border-box; height: 64px; z-index: 999999; transition: 0.5s}
.header:hover {background: rgba(255,255,255,1);}
.head-active {background: rgba(255,255,255,0.8);}

.header a {font-size: 13rem; color: #333; display: flex; align-items: center; height: 46px; margin-top: 10px; padding: 0 10px; }
.header a img {display: block; height: 70%; width: auto;}

.header-logo {display: block; opacity: 0; transition: 0.5s}
.head-active .header-logo {opacity: 1}

.nav { display: flex; justify-content: space-between; flex-wrap: wrap;}
.nav ul { list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; height: 100%}
.nav ul li { display: block; height: 100%}
.nav ul li a { padding: 0 10px;}
.nav ul li a:hover { color: #00a0e9}
.nav ul li.link-contact a {display: inline-block; padding: 12px 25px; box-sizing: border-box; font-size: 13rem; color: #fff; border-radius: 50px; background: linear-gradient(90deg,rgba(0, 46, 111, 1) 0%, rgba(0, 175, 255, 1) 100%); transition: 0.5s;}
.nav ul li.link-contact a:hover { padding: 12px 20px 12px 30px;}

@media screen and (max-width: 1024px) {
     .header {height: 42px; padding: 0 6px; background: rgba(255,255,255,0.8);}
	.header a {font-size: 11rem; height: 36px; margin-top: 4px; padding: 0 4px; }
	.header a img { height:50%;}
	.nav ul li {  }
	.nav ul li.link-contact a {padding: 10px 8px; font-size: 11rem; border-radius: 6px}
	.nav ul li.link-contact a:hover {padding: 10px 4px 10px 12px;}
	.header-logo {opacity: 1;}
}

/* Main */
.hero {background: #fff; padding-top: 70px; height: 80vh;}
.hero .container{ position: relative; height: 75vh; max-width: 100vw;}

.hero-content { position: absolute; left: 20px; top: 4vw; width: 45vw; z-index: 2}
.hero-content h1{ }
.hero-content h1 img{ display: block; max-width: 60%; margin-bottom: 4vw;}
.hero-content h2{ color: #005bac; font-size: 40rem; font-weight: normal; font-family: serif; line-height: 1.5; letter-spacing: 3px; margin-bottom: 2vw}
.hero-content p{color: #005bac; font-size: 15rem; line-height: 2; margin-bottom: 30px}

/*animation*/
.hero-image-container {position: absolute; right: 0; top: 0; width: 62vw; max-width: 95vh; height: 115%;  z-index: 1;}

.slideshow {
  position: relative;
  width: 100%;
  height: 100%;
}

.slideshow li {
  position: absolute;
  top: 0;
  left: 0;
	height: 100%;
  width: auto;
  opacity: 0;
  animation: fade 16s infinite;
}

.slideshow li:nth-child(1) {
  animation-delay: 0s;
}
.slideshow li:nth-child(2) {
  animation-delay: 4s;
}
.slideshow li:nth-child(3) {
  animation-delay: 8s;
}
.slideshow li:nth-child(4) {
  animation-delay: 12s;
}

@keyframes fade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  25% { opacity: 1; }
  40% { opacity: 0; }
  100% { opacity: 0; }
}

.slideshow li::after { content: ''; position: absolute; width: 95%; height: 99.5%; max-height: 55.9vw; top: 0; left: 0; background: linear-gradient(90deg,rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.6) 25%, rgba(255, 255, 255, 0) 35%);}

.slideshow li img {display: block; max-height: 100%; width: auto;}

@media screen and (max-width: 1024px) {
	.hero { padding-top: 46px; height: auto}
	.hero .container{ position: relative; height: auto; max-height: none; width: 100vw }
	.hero-image-container {position: relative; width: 100vw; height: 90vw; max-width: 100%}
	.hero-image-container img{ display: block; height: 100%; max-width: 100%;}
	
	.hero-content { position: static; width: 90vw; margin: 20px auto 60px auto}
	.hero-content h1{ }
	.hero-content h1 img{ max-width: 80%; margin: 0 auto 10vw auto;}
	.hero-content h2{ font-size: 28rem; margin-bottom: 2vw}
	.hero-content p{ }

	.slideshow li::after { content:none; }
}

/* Core */
#core{padding-top: 120px; padding-bottom: 100px; background: #002b6b url("../img/core_bg.png") no-repeat center center; background-size: cover;}
#core .container { color: #fff; min-height: 60vh}
.core-3clumn {display: flex; justify-content: space-around; flex-wrap: wrap; margin-bottom: 80px;}
.core-3clumn div {width: 30%; background-size: cover; background-position: center; padding: 160px 20px 20px 20px; box-sizing: border-box; position: relative;}
.core-3clumn div:nth-child(1) {background-image: url("../img/core01.png"); transform: translate(0, 30px)}
.core-3clumn div:nth-child(2) {background-image: url("../img/core02.png")}
.core-3clumn div:nth-child(3) {background-image: url("../img/core03.png"); transform: translate(0, -30px)}
.core-3clumn div::after {content: ''; display: block; width: 104%; height: 104%; border: 1px solid #fff; position: absolute; top: -2%; left: -2%; opacity: 0.5;}
.core-3clumn div h3 { background: linear-gradient(90deg,rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%); color: #333; display: inline-block; font-size: 14rem; padding: 5px 30px 5px 15px; margin-left: -35px; margin-bottom: 10px;}
.core-3clumn div h2 { font-size: 26rem; font-weight: normal; font-family: serif; line-height: 1.2;; margin-bottom: 5px; text-shadow: 0 0 4px rgba(0,0,0,0.9)}
.core-3clumn div p {font-size: 13rem; line-height: 1.2; text-shadow: 0 0 0.9 rgba(0,0,0,0.9)}

.core-sub {display: block; width: 65%; margin:0 0 0 auto;}
.core-sub h4 { font-size: 24rem; font-weight: normal; margin-bottom: 15px;}
.core-sub p { font-size: 14rem;}

#core h2.section-title {margin-bottom: 60px;}

@media screen and (max-width: 1024px) {
	#core{padding-top: 60px; padding-bottom: 60px; background: #002b6b url("../img/core_bg.png") no-repeat center top; background-size: contain;}
	.core-3clumn {display: block; margin-bottom: 40px;}
	.core-3clumn div {width: 100%; padding: 130px 10px 20px 10px; margin-bottom: 40px}
	.core-3clumn div:nth-child(1), .core-3clumn div:nth-child(3) {transform: none}
	.core-3clumn div h3 { padding: 5px 30px 5px 35px;}
	.core-3clumn div h2 { font-size: 24rem; }
	.core-sub {width: 98%; margin:0 0 0 auto; border-left: 1px solid #ccc; padding-left: 20px; box-sizing: border-box}
	.core-sub h4 { font-size: 18rem;}
}

/* contact01 */
#contact-intro {padding-top: 120px; padding-bottom: 60px;}
#contact-intro h2.section-title {color: #00a0e9; margin-bottom: 30px;} 
.content-2clumn { display: flex; flex-wrap: wrap; justify-content: space-between;}
.content-2clumn div { width: 48%}
.content-2clumn div p { margin-bottom: 20px}
.content-2clumn div img { width: 100%}

#flow{}
.flow-list{padding: 0 0 80px 0}
.flow-list h3 {color: #00a0e9; display: block; text-align: center; font-size: 20rem; margin-bottom: 30px;}
.flow-list ol{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.flow-list ol li{ display: block; position: relative; width: 19%; box-sizing: border-box; border: 1px solid #00a0e9; border-radius: 10px; padding: 20px 0 15px 0}
.flow-list ol li div{ display: block; height: 6vw; max-height: 110px;}
.flow-list ol li div img{ display: block; max-width: 100%; height: 86%; margin: 0 auto }
.flow-list ol li p { display: block; font-size: 14rem; font-weight: bold; text-align: center; line-height: 1.3}

.flow-list ol li::after{ content: '＞'; font-size: 13rem; font-weight: bold; box-sizing: border-box; padding: 6px 6px; display: inline-block;border-radius: 40px; background-color: #00a0e9; color: #fff; line-height: 1; position: absolute; right: -20px; top: calc(50% - 10px);}
.flow-list ol li:last-child::after{ content: none; }

@media screen and (max-width: 1024px) {
	#contact-intro {padding-top: 60px;}
	#contact-intro h2.section-title {} 
	.content-2clumn { display: block;}
	.content-2clumn div { width: 100%}
	.content-2clumn div p { }
	.content-2clumn div img { }
	
	.flow-list h3 {font-size: 18rem;}
	.flow-list ol{ display: block; }
	.flow-list ol li{ width: 100%; display: flex; padding:  15px 0 15px 0}
	.flow-list ol li div{ height: auto; max-height: auto; width: 30%}
	.flow-list ol li div img{ max-width: 40%; height: auto; margin: 0 auto }
	.flow-list ol li p { text-align: left;}
	.flow-list ol li{ margin-bottom: 15px}
	.flow-list ol li::after{ content: '▼'; font-size: 11rem; right: calc(50% - 10px); top: calc(100% - 10px);}
}

/* about */
#about { background: #e6eaea url("../img/about_bg.png") no-repeat left top; background-size: auto 120%; padding-top: 100px; padding-bottom: 100px;}
#about .container{}
#about .container div{ width: 50%; margin: 0 0 0 auto; text-shadow: 0 0 3px rgba(255,255,255,1)}
#about .container div h2{ color: #00a0e9; margin-bottom: 20px;}
#about .container div h3{ font-size: 18rem; margin-bottom: 20px;}
#about .container div p{ margin-bottom: 20px;}

#future {padding-top: 40px; padding-bottom: 60px;}

.content-4clumn{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.content-4clumn li { width: 24%}
.content-4clumn li img { width: 100%}
.content-4clumn li p strong { display: block; font-size: 16rem; line-height: 1.4; padding: 15px 0 10px 0}
.content-4clumn li p { font-size: 14rem; color: #333;}

@media screen and (max-width: 1024px) {
	#about { background-size: 150% auto; padding-top: 75vw; padding-bottom: 20vw }
	#about .container div{ width: 100%; }
	#about .container div h2{ }
	#about .container div h3{ }
	#about .container div p{ }
	.content-4clumn li { width: 48%}
	.content-4clumn li img { }
	.content-4clumn li p strong { font-size: 14rem; padding: 10px 0 8px 0}
	.content-4clumn li p { font-size: 13rem;  line-height: 1.5; margin-bottom: 20px}

}

/* documents */
#documents { background-color: #e7e7e7; padding-top: 100px; padding-bottom: 60px;}
#documents .container h2.section-title {color: #00a0e9; margin-bottom: 30px;} 
#documents .container div h3{ font-size: 18rem; margin-bottom: 20px;}
ul.list-square { margin-bottom: 20px}
ul.list-square li { display: block; font-size: 14rem; margin-bottom: 6px;}
ul.list-square li::before { content:'■'; color: #00a0e9; display: inline-block; margin-right: 5px; font-size: 13rem;}

@media screen and (max-width: 1024px) {
	#documents { padding-top: 60px;}
}

/* contact-footer */
#contact-footer { background: linear-gradient(90deg,rgba(0, 46, 111, 1) 0%, rgba(0, 175, 255, 1) 100%); padding-top: 80px; padding-bottom: 60px; color: #fff;}
#contact-footer .container h2.section-title {color: #00a0e9; margin-bottom: 30px;} 

/* faq */
.faq { padding-top: 60px; padding-bottom: 60px;}
.faq h4 {color: #fff; display: block; font-size: 22rem; margin-bottom: 30px;}
.faq h4::after { content: ''; display: inline-block;; width: 50px; height: 1px; background-color: #fff; vertical-align: middle; margin-left: 10px}
.faq ol {}
.faq ol li { display: block; background-color: rgba(255,255,255,0); border: 1px solid rgba(255,255,255,0.5); box-sizing: border-box; margin: 0 auto 10px auto; color: #fff; cursor: pointer; position: relative; transition: 0.5s}
.faq ol li::before{ content: 'Q'; font-weight: bold; font-size: 46rem; position: absolute; top: 2px; left: 10px; color:#00a7f678; font-family: serif; z-index: 1 }
.faq ol li strong{ display: block; padding: 25px 25px 20px 35px; font-size: 18rem; font-family: serif; position: relative; z-index: 2}
.faq ol li div{ max-height: 1px; overflow: hidden; transition: 0.5s;}
.faq ol li div p{ display: block; padding: 5px 25px 30px 35px; color: #333; font-size: 14rem; line-height: 1.8; transition: 0.5s;}
.faq ol li div p span{ display: block; font-weight: bold; color: #111; font-size: 16rem;}

.faq ol li.a-open { background-color: rgba(255,255,255,1); border: 1px solid rgba(255,255,255,1); color: #005bac;}
.faq ol li.a-open div { max-height: 1000px}

@media screen and (max-width: 1024px) {
	.faq { padding-bottom: 20px;}
	.faq h4 { font-size: 18rem; }
	.faq ol li::before{ font-size: 36rem; top: 2px; left: 10px; }
	.faq ol li strong{ padding: 20px 15px 15px 30px; font-size: 16rem;}
	.faq ol li div p{ padding: 10px 15px 30px 30px; font-size: 15rem; line-height: 1.6;}
}

#foot {}
.footer {background: #111; padding: 60px 0;}

.footer .container {display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%}
.foot_logo {width: 35%; color: #fff; font-weight: bold; font-size: 13rem}
.foot_logo img{display: block; width: 100%; margin-bottom: 5px}

.foot-navs {display: flex; justify-content: flex-end; flex-wrap: wrap}
.foot-navs li{display: inline-block; border: 1px solid #fff; margin-left: 10px; position: relative;}
.foot-navs li::before{ content: ''; display: block; background: #fff; width: 0px; height: 100%; position: absolute; transition: width 0.5s }
.foot-navs li:hover::before{ width: 100%;}
.foot-navs li a{display: block; color: #fff; font-size: 12rem; padding: 14px 30px 10px 30px; font-weight: bold; position: relative;z-index: 2}
.foot-navs li a:hover{ color: #111; opacity: 1 }

.copyright { display: block; width: 100%; color: #fff; font-size: 11rem; text-align: center; margin-top: 40px}

@media screen and (max-width: 1024px) {
	.footer .container {display: block; width: 90%}
	.foot_logo {display: block; width: 100%; font-size: 11rem; text-align: center; margin-bottom: 20px}
	
	.foot-navs {display: block;}
	.foot-navs li{display: block; margin-bottom: 10px;}
	.foot-navs li a{ padding: 10px 30px 10px 30px; }
}