@charset "UTF-8";

/* base */
* {
  box-sizing:border-box;
}

html {font-size:62.5%;}
ol, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, h7, form, p { margin:0; padding:0; }
img { border:0; }
li { list-style-type:none; }

body {
  position: relative;
  width:100%;
  margin:0;
  padding:0;
  color: #fff;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.875;
  background-color: #000;
  letter-spacing: 0.05em;
  -webkit-text-size-adjust: 100%;
}

a { overflow:hidden; -webkit-transition:.2s linear; transition:.2s linear;}
a:link		{color:#fff; text-decoration: none;}
a:visited	{color:#fff;}
a:hover		{opacity:0.8;}
a:active	{opacity:0.8;}
a img {-webkit-transition:.2s linear; transition:.2s linear;}
a:hover img {opacity:0.8;}
a.underline {text-decoration:underline;}
a[href^="tel:"] {pointer-events: none;}

img {
  max-width:100%;
  height:auto;
  vertical-align:top;
}

/* clearfix */
.clearfix:after {
  visibility:hidden;
  display:block;
  font-size:0;
  content:"";
  clear:both;
  height:0;
}
* html .clearfix { zoom: 1;} /* IE6 */
*:first-child+html .clearfix { zoom: 1;} /* IE7 */

.wrapper {overflow: hidden;}

/* header */
#header {position: absolute; top: 0; left: 0; width: 100%; padding: 20px 0; background: url(/img/bg_header.png) left top repeat; z-index: 99;}
#header .btn-trigger {display: none;}

/* nav */
#nav {display: flex; justify-content: flex-end; align-items: center; padding: 0 50px;}
#nav .nav_list {display: flex;}
#nav .nav_list li {font-size: 1.8rem; font-weight: bold;}
#nav .nav_list li + li {margin-left: 2em;}
#nav .nav_btn {margin-left: 40px;}
#nav .nav_btn a {position: relative; display: block; width: 200px; height: 50px; color: #000; font-size: 1.8rem; font-weight: bold; text-align: center; line-height: 50px; background-color: #fff; border-radius: 5px; box-shadow: 5px 5px 5px rgba(0,0,0,0.4);}
#nav .nav_btn a:after {content: "\f054"; position: absolute; right: 15px; top: 50%; font-family: "Font Awesome 5 Free"; font-weight: 900; transform: translateY(-50%);}

/* main */
#main section {position: relative;}
#main section:before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#main .main_inner {position: relative; width: 1100px;}
#main .main_inner-r {margin-left: auto; text-align: right;}
#main .main_ttl {display: inline-block; padding: 35px 60px; background-color: rgba(0,175,171,0.3); opacity:0; transform:translateX(-100%); transition:opacity 2s,transform .8s;}
#main .main_inner-r .main_ttl {transform:translateX(100%);}
#main .main_ttl.fadein {opacity:1; transform:translateX(0);}
#main .main_h2 {font-size: 4rem; font-weight: 700; font-family: 'Noto Sans JP', sans-serif;}
#main .main_lead {font-size: 1.8rem; font-weight: bold;}
#main .main_btn {position: relative; width: 300px; margin: 40px auto 0;}
#main .main_btn:after {content: "\f054"; position: absolute; right: 15px; top: 50%; font-family: "Font Awesome 5 Free"; font-weight: 900; transform: translateY(-50%);}
#main .main_btn-back:after {content: "\f053"; right: auto; left: 15px;}
#main .main_btn a, .main_btn input[type="submit"], .main_btn input[type="button"] {display: block; height: 60px; font-size: 1.8rem; text-align: center; line-height: 60px; border-radius: 10px; border: 2px solid #fff;}
#main .main_btn input[type="submit"], #main .main_btn input[type="button"] {width: 100%; color: #fff; background-color: transparent; cursor: pointer;}
#main .main_btn:hover:after {color: #000;}
#main .main_btn a:hover, #main .main_btn input[type="submit"]:hover, #main .main_btn input[type="button"]:hover {color: #000; background-color: #fff; opacity: 1;}
#main .fade {opacity: 0; transform : translate(0, 50px); transition : all 1500ms;}
#main .fade.scrollin{opacity: 1; transform: translate(0, 0);}


/* mv */
#mv {position: relative;}
#mv .mv_slide {height: 100vh; background-size: cover; background-position: center center;}
#mv .mv_txt {position: absolute; top: 50%; left: 50%; width: 100%; font-weight: 700; font-family: 'Noto Sans JP', sans-serif; text-align: center; transform: translate(-50%, -50%); z-index: 1;}
#mv .mv_txt h1 {position: relative; display: inline-block; padding-bottom: 30px; margin-bottom: 30px; font-size: 8rem; letter-spacing: 0.1em; line-height: 1;}
#mv .mv_txt h1:after {content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background-color: #fff; transition: all 2s;}
#mv .mv_txt h1.active:after {width: 100%;}
#mv .mv_txt .lead {font-size: 2rem;}
#mv .mv_scroll {position: absolute; left: 50%; bottom: 30px; width: 58px; transform: translateX(-50%); z-index: 1;}
#mv .mv_scroll a {display: block; width: 100%; height: 31px; background: url(/img/arrow_mv.png) left top / 100% auto no-repeat;}

/* swiper */
@-webkit-keyframes zoomUp {
  0% {-webkit-transform: scale(1); transform: scale(1);}
  100% {-webkit-transform: scale(1.15);transform: scale(1.15);}
}
@keyframes zoomUp {
  0% {-webkit-transform: scale(1); transform: scale(1);}
  100% {-webkit-transform: scale(1.15);transform: scale(1.15);}
}
.swiper-slide {overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.swiper-slide-active .mv_slide, .swiper-slide-duplicate-active .mv_slide, .swiper-slide-prev .mv_slide {-webkit-animation: zoomUp 12s linear 0s; animation: zoomUp 12s linear 0s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}

/* service */
#service {padding-bottom: 100px;}
#service:before {background: url(/img/bg_service.png) right bottom / 39% auto no-repeat;}
#service .service_wrap {padding: 40px 30px;}
#service .service_block {position: relative; width: 48%;}
#service .service_block:nth-of-type(1) {margin-left: auto;}
#service .service_block:nth-of-type(3) {margin-left: auto;}
#service .service_inner {position: relative; width: 100%; padding-top: 100%; border: 1px solid #fff; border-radius: 50%;}
#service .service_block:nth-of-type(2) .service_inner {margin-top: -50%;}
#service .service_block:nth-of-type(3) .service_inner {margin-top: calc(-50% + 40px);}
#service .service_detail {position: absolute; top: 50%; left: 50%; width: 100%; text-align: center; transform: translate(-50%, -50%);}
#service .service_h3 {margin-bottom: 30px; font-size: 3rem; font-weight: 700; font-family: 'Noto Sans JP', sans-serif;}
#service .service_h3 span {display: block; color: #999; font-size: 1.6rem;}
#service .service_img {display: flex; justify-content: center; align-items: center; margin-top: 50px;}
#service .service_block:nth-of-type(2) .service_img li + li {margin-left: 10px;}
#service .service_block:nth-of-type(3) .service_img li + li {margin-left: 20px;}

/* company */
#company {padding-bottom: 100px;}
#company:before {background: url(/img/bg_company.png) left bottom / 31% auto no-repeat;}
#company .company_detail {margin-top: 40px; padding: 0 50px; text-align: left;}
#company .company_detail dl {display: flex; flex-wrap: wrap; line-height: 1.2;}
#company .company_detail dt {width: 20%; padding: 15px 0; border-bottom: 1px solid #fff;}
#company .company_detail dd {position: relative; width: 80%; padding: 15px 0; border-bottom: 1px solid #fff;}
#company .company_detail dt:last-of-type {border-bottom: 0;}
#company .company_detail dd:last-of-type {border-bottom: 0;}
#company .company_detail dd span {position: relative; display: block; padding: 0 30px;}
#company .company_detail dd span:before {content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background-color: #fff;}

/* contact */
#contact {padding-bottom: 100px;}
#contact:before {background: url(/img/bg_contact.png) right bottom / 38% auto no-repeat;}
#contact .contact_form {margin-top: 40px; padding: 0 50px;}
#contact .contact_form dt {font-weight: bold; margin-bottom: 5px;}
#contact .contact_form dd {margin-bottom: 20px;}
#contact .contact_form dd:last-of-type {margin-bottom: 0;}
#contact .contact_form dd input[type="text"] {width: 100%; padding: 10px; border-radius: 5px;}
#contact .contact_form dd ul {display: flex;}
#contact .contact_form dd ul li + li {margin-left: 30px;}
#contact .contact_form .checklist input + label {position: relative; padding-left: 35px;}
#contact .contact_form .checklist input + label:before {content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px; background-color: #fff;}
#contact .contact_form .checklist input:checked + label:before {background-color: #00afab;}
#contact .contact_form .checklist input:checked + label:after {content: ""; position: absolute;}
#contact .contact_form .checklist input[type=checkbox] {position: absolute; visibility: hidden;}
#contact .contact_form .checklist input[type=checkbox] + label:before {border-radius: 3px;}
#contact .contact_form .checklist input[type=checkbox]:checked + label:after {left: 6px; top: 3px; width: 6px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform:rotate(45deg);}
#contact .contact_form .checklist input[type=checkbox] + label:after {top: 24px;}
#contact .contact_form .error {color: #ff0000;}
#contact .contact_confirm {margin-top: 100px;}
#contact .contact_confirm .lead {padding: 0 50px;}
#contact .contact_thanks {margin-top: 100px;}
#contact .contact_thanks .lead {text-align: center;}
#contact .contact_btn {display: flex; justify-content: center; margin-top: 40px;}
#contact .contact_btn .main_btn {margin: 0;}
#contact .contact_btn .main_btn + .main_btn {margin-left: 20px;}
#contact.no_bg:before {content: none;}

@media (max-width: 1200px) {
  /* main */
  #main .main_inner {width: 90%;}

  /* service */
  #service .service_block:nth-of-type(1) .service_img li {width: 30%;}
  #service .service_block:nth-of-type(2) .service_img li {width: 25%;}
  #service .service_block:nth-of-type(3) .service_img li {width: 10%;}
}

@media (max-width: 900px) {
  /* mv */
  #mv .mv_txt h1 {font-size: 6rem;}

  /* service */
  #service .service_h3 {margin-bottom: 20px; font-size: 2rem;}
  #service .service_h3 span {font-size: 1.3rem;}
  #service .service_txt {font-size: 1.3rem;}
  #service .service_img {margin-top: 20px;}

  /* contact */
  #contact .contact_form dd ul li {font-size: 1.3rem;}
}

@media (max-width: 680px) {
  #header {position: fixed; left: 0; right: 0; width: 100vw; background-image: none;}
  #header .btn-trigger {display: block; position: absolute; top: 50%; right: 10px; width: 28px; height: 24px; transform: translateY(-50%); cursor: pointer; z-index: 1;}
  #header .btn-trigger span {position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff;}
  #header .btn-trigger, #header .btn-trigger span {display: inline-block; transition: all .5s; box-sizing: border-box;}
  #header .btn-trigger span:nth-of-type(1) {top: 0;}
  #header .btn-trigger span:nth-of-type(2) {top: 50%; transform: translateY(-50%);}
  #header .btn-trigger span:nth-of-type(3) {bottom: 0;}
  #header .btn-trigger.active span:nth-of-type(1) {transform: translateY(10px) rotate(-45deg);}
  #header .btn-trigger.active span:nth-of-type(2) {left: 50%; opacity: 0; animation: active-btn-bar02 .8s forwards;}
  @keyframes active-btn-bar02 {
    100% {height: 0;}
  }
  #header .btn-trigger.active span:nth-of-type(3) {transform: translateY(-12px) rotate(45deg);}

  /* nav */
  #nav {position: fixed; top: 0; display: block; width: 100vw; padding: 0 0 20px; visibility: hidden; opacity: 0; transition: 0.5s; background-color: rgba(0,0,0,0.8);}
  #nav .nav_list {display: block; margin-top: 60px;}
  #nav .nav_list li {text-align: center;}
  #nav .nav_list li + li {margin-left: 0;}
  #nav .nav_btn {margin-top: 40px; margin-left: 0;}
  #nav .nav_btn a {margin: 0 auto;}

  /* main */
  #main .main_inner {width: 100%;}
  #main .main_ttl {padding: 15px 30px;}
  #main .main_h2 {font-size: 3rem;}
  #main .main_lead {font-size: 1.6rem;}
  #main .main_btn {width: 90%;}

  /* mv */
  #mv .mv_txt h1 {font-size: 4rem; line-height: 1.6;}
  #mv .mv_txt .lead {font-size: 1.6rem;}

  /* service */
  #service {padding-bottom: 50px;}
  #service .service_wrap {padding: 40px 15px 0;}
  #service .service_block {width: 100%;}
  #service .service_block:nth-of-type(2) .service_inner {margin-top: 20px;}
  #service .service_block:nth-of-type(3) .service_inner {margin-top: 20px;}

  /* company */
  #company {padding-bottom: 50px;}
  #company .company_detail {padding: 0 20px;}
  #company .company_detail dt {width: 100%; padding: 15px 0 0; font-weight: bold; border-bottom: none;}
  #company .company_detail dd {width: 100%;}
  #company .company_detail dd span {padding: 0 1em;}
  #company .company_detail dd span:before {content: none;}

  /* contact */
  #contact .contact_form {padding: 0 20px;}
  #contact .contact_form dd ul {display: block;}
  #contact .contact_form dd ul li {font-size: 1.6rem;}
  #contact .contact_form dd ul li + li {margin-left: 0;}
  #contact .contact_confirm .lead {padding: 0 20px;}
  #contact .contact_btn {flex-wrap: wrap;}
  #contact .contact_btn .main_btn + .main_btn {margin-left: 0; margin-top: 20px;}
}