@charset "utf-8";

/* =reset
------------------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td,header, section, article, footer, article, aside, time ,nav,a{
margin:0;
padding:0;
}

fieldset,img{
  border:0;
}
address,caption,cite,code,dfn,em,th,var{
font-style:normal;
font-weight:normal;
}
ol,ul{
list-style:none;
}
caption,th{
text-align:left;
}
h1,h2,h3,h4,h5,h6{
font-size:100%;
font-weight:normal;
}
q:before,q:after{
content:'';
}
abbr,acronym{
border:0;
}
p{
text-justify:inter-ideograph;
margin: 0;
}

header, section, article, footer, article, aside, time ,nav { display: block; }

ul{
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-start: 0;
}
figure {
display: block;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
}

button{
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
}

:root {
  --key-color: #002CA5;
  --heading-text-color: #A2BBFF;
  --heading-font-family: "Roboto", sans-serif;
  --heading-font-size: min(4vw,18px);
  --heading-font-weight: Medium;
  --heading-line-height: 1.4;
  --heading-margin-bottom: 6px;
  --heading-padding-bottom: 14px;
  --link-color: #002CA5;
  --link-color-text: #fff;
  --text-font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

body { background: #fff; color: #000; counter-reset: number 0; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-feature-settings : "palt"; font-size: 16px; line-height: 1.6em; }
img { vertical-align: bottom; }
a { display: block; text-decoration: none; transition: .15s; outline: none; }
a:hover { opacity: .7; text-decoration: none; }
a:hover img { opacity: 0.8; filter: alpha(opacity=80); }
header { position: fixed; top: 0; width: 100%; z-index: 5; }
header .header-wrap { display: flex; align-items: center; margin: 0 auto; padding: 20px 40px 20px 20px; position: relative; width: 100%; z-index:2;}
header .header-wrap::before { background-color:#fff; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: .5; z-index: -1;}
header .header-logo { width: 200px; }
header .header-logo img { width:100%; }
header .header-right-wrap { position: relative; margin-left: auto; pointer-events: all; }
header .header-right-wrap ul { display:flex; align-items: center; flex-wrap: wrap; justify-content: space-between; }
header .header-right-wrap ul li a { color: #000; display: block; font-size: 12px; line-height: 1em; padding: 25px;}
header .header-right-wrap ul li.nav-contact { margin-left:25px; }
header .header-right-wrap ul li.nav-contact a { background-color: var(--link-color); border-radius: 50px; color:#fff; display: block; line-height: 1; padding:16px 45px;}
footer { background-color: #fff; text-align: center; width: 100%;  margin: 0 auto; padding: 50px 0; }
footer p { font-size: 12px; line-height: 1em;}

* { box-sizing: border-box; }
.section-wrap{ padding: 160px 0 180px; }
.section-wrap p:not(:last-of-type) { margin-bottom: 1em; }
.heading-wrap { position:relative; margin: 0 auto 20px; text-align:center; }
.heading-wrap h2 { color: var(--heading-text-color); font-family: var(--heading-font-family); font-size: var(--heading-font-size); font-weight: var(--heading-font-weight); letter-spacing: 10px; line-height: var(--heading-line-height); margin-bottom: var(--heading-margin-bottom); position:relative; }
.heading-wrap h2 + p { font-size:min(7.5vw,48px); line-height:1.4em; }
.section-inner-wrap-1000px { position: relative; margin: 0 auto; width: min(92%,1000px); }
.section-inner-wrap-form { position: relative; margin: 0 auto; width: min(92%,800px); }
.page_top { margin: 0; position: fixed; right: 50px; bottom: 50px; text-align: center; z-index: 10; }
.page_top a { background-color: var(--key-color); border-radius: 40px; color: #fff; display: block; font-size: 11px; height: 80px; line-height: 80px; transition: all .2s; width: 80px; }
.sp-nav { display: none; }
.pc-none { display: none; }
.sp-none { display: block; }
.link-off a { background: #ccc; border: none; box-shadow: none; pointer-events: none; }
.link-off a::after { display: none!important; }

#main-img { position: relative; width: 100%; height:40.625vw; overflow:hidden; margin-top:104.52px; }
#main-img::after { background: url(../images/main_background.jpg) left bottom no-repeat; background-size: contain; content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height:40.625vw; }
#main-img .main-img-heading-wrap { position:absolute; top: 50%; right:8vw; transform: translate3d(0px, -50%, 0px); width:min(44.531vw,855px); height: min(25.26vw,485px); z-index:1; }
#main-img .main-img-heading-wrap h2 img { width:100%; }

#contact { overflow: hidden; position:relative; }
#contact::after { background: url(../images/contact_background.jpg) right top no-repeat; background-size: contain; content: ""; display: block; position:absolute; top: 0; right: 0; width: min(55.104vw,1058px); height: min(41.041vw,788px); z-index: 0; }
#contact.section-wrap { padding:10vw 0 10vw; }
#contact .section-inner-wrap-1000px { z-index: 1;}
#contact .heading-wrap { text-align: left;}
#contact .heading-wrap h2 { color: #000; font-size:min(8vw,60px); letter-spacing: 2px; line-height: 1.4; margin-bottom:16px; }
#contact .contact-text { line-height: 2.8em; margin-bottom: 40px; }
#contact .link-button a  { background-color: var(--link-color); border-radius: 50px; color:#fff; display: block; font-size:16px; line-height: 1; padding: 25px 0; text-align:center; position:relative; width:100%; max-width:480px; transition:.1s; text-decoration:none; }

#detail { background: linear-gradient(to bottom, #0E2B54, #020F2F); color: #fff; position:relative; }
#detail .heading-wrap { margin-bottom: 60px;}
#detail .heading-wrap h2 + p { font-size:min(8vw,60px); letter-spacing:2px; }
#detail .detail-text { margin-bottom:50px; text-align:center; }
#detail .detail-content-wrap { display:flex; flex-wrap: wrap; margin-bottom: -4%; width:104%; }
#detail .detail-content-wrap .box02 { background: #000D31; border:1px solid #B1B184; border-radius: 8px; flex-basis:46%; max-width:46%; margin: 0 4% 4% 0; padding:32px; }
#detail .detail-content-wrap .box02 .features { font-size:14px; line-height:1.4; margin-bottom:6px; }
#detail .detail-content-wrap .box02 h3 { color: #B1B184; font-size: 22px; line-height: 1.2; margin-bottom:16px; }
#detail .detail-content-wrap .box02 img { margin-bottom: 16px; width:100%; }
#detail .detail-content-wrap .box02 .detail-box-text { font-size:14px; line-height:1.6; }

#companey { position:relative; background-color:#EDEFF5; }
#companey.section-wrap { padding:160px 0 160px;  }
#companey .section-inner-wrap-1000px { z-index:1; }
#companey .heading-wrap { padding-left:14px; position:relative; margin-bottom:80px; }
#companey dl { display:table; width:100%; margin-bottom: 3px; padding: 20px 0; z-index:1; }
#companey dl dt,
#companey dl dd { display:table-cell; vertical-align:middle; }
#companey dl dt { color: var(--key-color); font-weight: bold; letter-spacing: 10px; width:20%; }
#companey dl dd { width:80%; }

#page-contact main { overflow: hidden; position: relative; width:100%; }
#page-contact main::after { background:url(../images/contact_background.jpg) center bottom no-repeat; background-size:contain; content: ""; position: absolute; right: 0; bottom: -10vw; width: min(55.104vw,1058px); height: min(41.041vw,788px); z-index: -1; }
#page-contact .page-main-img { padding-top: 200px; }
#page-contact .main-wrap {  }
#page-contact .section-wrap { padding-top:30px; }
#page-contact .heading-wrap { text-align:center; margin-bottom:0px; }
#page-contact .heading-wrap h2 { color: #000; font-size:min(8vw,60px); letter-spacing: 2px; line-height: 1; margin-bottom:16px; }
#page-contact .heading-wrap h2 + p { color: var(--heading-text-color); font-family: var(--heading-font-family); font-size: var(--heading-font-size); font-weight: var(--heading-font-weight); letter-spacing: 10px; line-height: var(--heading-line-height); margin-bottom: var(--heading-margin-bottom); }
#page-contact .contact-text { font-size:16px; line-height: 1.6; text-align:center; margin-bottom:80px; }
#page-contact .link-button a { background-color: var(--key-color); border-radius: 50px; color:#fff; display: block; font-size:26px; font-weight:bold; line-height: 1.6; text-align:center; padding:10px; position:relative; margin:0 auto; width:min(80%,360px); transition:.1s; text-decoration:none; }
#page-contact footer { background-color:transparent; }
#page-contact  .link-button-back a { background-color: var(--key-color); border-radius: 12px; font-size: 18px; font-weight: bold; color: #fff; padding: 10px 32px; text-align: center; transition: 0.4s; width: min(80%,300px); margin: 0 auto; position: relative;}

#form dl { margin-bottom: 32px; width:100%; }
#form dl:last-of-type { margin-bottom:48px; }
#form dl dt { font-weight:bold; padding-bottom:8px; }
#form dl dt span { color:#ff0000; text-align:center; padding: 2px 10px; font-size: 10px; line-height: 1; margin-left: 8px;}
#form dl dd .form-input { padding: 16px 12px; width: 100%; font-size: 16px; border: solid 1px #ccc; border-radius: 4px; }
#form dl dd .form-input:focus-visible { outline: var(--key-color) auto 1px; }
#form dl dd textarea.form-input { height: 220px;}
#form .form-submit { text-align: center; }
#form .form-submit button { font-size: 16px; color: #fff; background-color: var(--link-color); border-radius: 50px; padding: 16px 32px; transition: 0.4s; cursor: pointer; display: block; width: min(80%,320px); margin: 0 auto; position: relative;}
#form .form-submit button:hover { opacity: .8; }
#form ::placeholder { color: #eee;}

@media screen and (max-width: 768px){
  :root {
    --heading-line-height: 1.4;
    --heading-margin-bottom: 0;
    --heading-padding-bottom: 14px;
  }

  /* = sp nav
  ------------------------------------------------------------------------------------------*/
  header { position:relative; }
  nav.header-wrap { display:none; }
  .sp-nav { display: block; }
  #toggle { background: var(--key-color); position: fixed; top: 0; right: 0; height: 45px; width: 45px; transition: .2s; z-index: 11; }
  #toggle .button { background: #fff; height: 4px; position: absolute; top: calc(50% - 2px); left: 20%; transition: .3s; width: 60%; }
  #toggle .button::before,
  #toggle .button::after { background: #fff; content: ""; display: block; height: 4px; position: absolute; top: 50%; left: 0; transition: .3s; width: 100%; }
  #toggle .button::before { margin-top: -12px; }
  #toggle .button::after { margin-top: 8px; }
  #toggle .close { background: transparent; top: calc(50% - 4px); }
  #toggle .close::before,
  #toggle .close::after{ margin-top: 0; }
  #toggle .close::before{ transform: rotate(-45deg); }
  #toggle .close::after{ transform: rotate(-135deg); }
  #menu { opacity: 0; transition: .3s; display: none;}
  #menu.open { display: block !important; opacity: 1; transition: .1s; }
  .nav-menu { background: rgba(0,0,0,.8); height: 100%; height: 100vh; position: fixed; top: 0; transition: .3s; width: 100%; width: 100vw; z-index: 10; }
  .nav-menu li:first-child { border-bottom: 1px solid #666; height: 45px; }
  .nav-menu li a { border-bottom: 1px solid #666; color: #fff; display: inherit; font-size: 14px; line-height: 1em; padding: 14px 0; width: 100%; text-align: center; }

  body { font-size: 16px; line-height: 1.6em; }
  header .header-logo { top:3vw; left:4vw; width:30vw; }
  header .header-right a { font-size:18px; padding: 3vw 4vw; }
  footer { padding: 30px 0; }
  .pc-none { display: block; }
  .sp-none { display: none; }

  .section-wrap { padding:16vw 0 20vw; }
  .page_top{ display: none; }  

  #main-img { height:81vw; margin-top: 0; }
  #main-img::after { width: 200vw; height: 83.25vw; left: -19vw; z-index: 1; }
  #main-img::before { background-color: rgba(0,0,0,.15); background-size: contain; content: ""; position: absolute; width: 100%; height: 100%; z-index: 2; }
  #main-img .main-img-heading-wrap { position: relative; top: 14vw; right: auto; left: 4%; transform:none; width:90%; height:auto; z-index: 3; }
  #contact::after { top: auto; bottom: -16vw; right: -8vw; width: 90vw; height: 67.2vw;}
  #contact.section-wrap { padding:12vw 0 25vw; }
  #contact .content-wrap { display:block; }
  #contact .content-wrap .box02:first-child { margin-bottom: 4vw; padding-right: 0; width:100%; }
  #detail .heading-wrap { width:100%; min-width: 100%; margin: 0 auto 14vw; }
  #detail .detail-content-wrap { display:block; width:100%; min-width:100%; }
  #detail .detail-content-wrap { margin:0 auto; }
  #detail .detail-content-wrap h3 { font-size:24px; }
  #detail .detail-content-wrap .box02 { width:100%; max-width:100%; margin-right:0; }
  #detail .detail-content-wrap .box02:not(:last-of-type)  { margin-bottom:10px; }
  #detail .detail-content-wrap .features { position:relative; }
  #companey.section-wrap { padding:16vw 0 20vw; }
  #companey .heading-wrap { margin-bottom:7vw; }
  #companey dl dt, #companey dl dd { display:block; width:100%; }
  #companey dl dt { margin-bottom:2vw; }
  #page-contact main::after { bottom: -30vw; right: -16vw; width: 141vw; height: 105vw; }
  #page-contact .page-main-img { padding-top:20vw; }
  #page-contact .contact-text { margin-bottom:16vw; }
}