@charset "utf-8";

/*--------------------------------------------

main_head

---------------------------------------------*/
.main-head { position: relative; box-sizing: border-box; padding: 75px 0 135px; background-color: #C4D8E5;}
@media screen and (max-width: 599px) {
.main-head { padding: 40px 0 90px;}
}

.main-head .main-head__logo { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 1; width: 70%; max-width: 658px; margin: auto;}
.main-head .main-head__logo img:nth-of-type(1) { display: block; width: 100%;}
.main-head .main-head__logo img:nth-of-type(2) { display: none; width: 100%;}
@media screen and (max-width: 599px) {
.main-head .main-head__logo { max-width: 205px; margin: auto;}
.main-head .main-head__logo img:nth-of-type(1) { display: none; width: 100%;}
.main-head .main-head__logo img:nth-of-type(2) { display: block; width: 100%;}
}

.main-head .main-head__image { display: block; width: 90%; margin: 0 auto;}
.main-head .main-head__image img:nth-of-type(1) { display: block; width: 100%;}
.main-head .main-head__image img:nth-of-type(2) { display: none; width: 100%;}
@media screen and (max-width: 599px) {
.main-head .main-head__image { width: 80%; margin-bottom: 1em;}
.main-head .main-head__image img:nth-of-type(1) { display: none; width: 100%;}
.main-head .main-head__image img:nth-of-type(2) { display: block; width: 100%;}
}

.main-head .main-head__text01 { position: absolute; top: 30px; right: 30px; width: 55%; max-width: 687px;}
.main-head .main-head__text01 img:nth-of-type(1) { display: block; width: 100%;}
.main-head .main-head__text01 img:nth-of-type(2) { display: none; width: 100%;}
@media screen and (max-width: 599px) {
.main-head .main-head__text01 { position: static; width: 80%; max-width: 277px; margin: 0 auto 1em;}
.main-head .main-head__text01 img:nth-of-type(1) { display: none; width: 100%;}
.main-head .main-head__text01 img:nth-of-type(2) { display: block; width: 100%;}
}

.main-head .main-head__text02 { position: absolute; bottom: 90px; left: 30px; width: 55%; max-width: 687px;}
.main-head .main-head__text02 img { display: block; width: 100%;}
@media screen and (max-width: 599px) {
.main-head .main-head__text02 { position: static; width: 80%; max-width: none; margin: 0 auto;}
}


.main-info { display: flex; justify-content: space-between; align-items: center; height: 60px; position: absolute; bottom: 0; left: 0; z-index: 1; box-sizing: border-box; width: 100%; padding: 0 2.5%; background-color: #39749E; transition: 0.3s;}

.main-info.fixed { position: fixed; top: 0; left: 0; z-index: 999; width: 100%;}


.main-info .nav { width: 80%; max-width: 380px;}
.main-info .nav-list { display: flex; justify-content: space-between; align-items: center;}
.main-info .nav-list a { font-family: 'Oswald', sans-serif; font-size: 19px; font-weight: 400; letter-spacing: 0.2em; color: #fff;}
@media screen and (max-width: 599px) {
.main-info .nav {  position: fixed; top: 0; left: 0; z-index: 8; width: 80%; box-sizing: border-box; padding: 5em 0; height: 100vh; background-color: #39749E; transform: translateX(-100%);
  transition: all 0.6s;
}
.main-info .nav.active { transform: translateX(0%);
}
.main-info .nav-list { display: block; width: 80%; margin: 0 auto;}
.main-info .nav-list {transform: translateX(0);}
.main-info .nav-list li { border-bottom: 1px solid #fff; text-align: center;}
.main-info .nav-list a { display: block; padding: 1em 0;}
}

.main-info .tel { order: 2; width: 50%; max-width: 265px;}
.main-info .tel img { display: block; width: 100%;}


.menu-button { display: none; box-sizing: border-box; position: absolute; top: .5em; right: 2%; z-index: 9999; width: 50px; height: 42px; cursor: pointer;}
@media screen and (max-width: 599px) {
.menu-button { display: block;}
}


.menu-button span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  right    : 0;
  background : #fff;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.menu-button span:nth-of-type(1) {
  top: 10px;
}
.menu-button span:nth-of-type(2) {
  top: 20px;
}
.menu-button span:nth-of-type(3) {
  top: 30px;
}

.menu-button.active span:nth-of-type(1) {
  top : 20px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.menu-button.active span:nth-of-type(2),
.menu-button.active span:nth-of-type(3) {
  top: 20px;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}



.section__heading { opacity: 0; position: relative; width: 80%; max-width: 400px; overflow: hidden; margin: 0 auto; font-size: 14px; text-align: center; letter-spacing: 0.17em; color: #39749E;
transition: 0.5s;
animation-name: loadinganime2;
animation-timing-function:ease;
animation-duration: 1s;
animation-fill-mode: forwards;
}


.section__heading.animest b { display: block; overflow: hidden; font-weight: bold; letter-spacing: 0.17em;}
.section__heading.animest b::before { display: block; content: ""; width: 100%; max-width: 400px; height: 100%; position: absolute; top: 0; left: 0; right: 0; margin: auto; z-index: 1; background-color: #39749E;
transition: 0.5s;
animation-name: loadinganime;
animation-timing-function:ease;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes loadinganime {
  from {
    transform: translateX(0);
  }
  30%, 70% {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
@-webkit-keyframes loadinganime {
  from {
    transform: translateX(0);
  }
  30%, 70% {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loadinganime2 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes loadinganime2 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.section__heading span { display: block; font-family: 'Oswald', sans-serif; font-size: 85px; font-size: 8.5rem; line-height: 1.4;font-weight: 500; letter-spacing: 0;}
@media screen and (max-width: 599px) {
.section__heading span { font-size: 60px; font-size: 6rem;}
}


.about { box-sizing: border-box; padding: 136px 0 180px;}
@media screen and (max-width: 599px) {
.about { position: relative; padding: 80px 0 150px;}
}

.about__heading { margin-bottom: 80px;}
@media screen and (max-width: 599px) {
.about__heading { margin-bottom: 50px;}
}

.about__lead,
.about__text { width: 80%; margin: 0 auto;}
.about__lead { margin-bottom: 40px; font-size: 18px; font-weight: bold; letter-spacing: 0.12em; text-align: center;}
.about__text { font-size: 14px; text-align: center;}


.service { position: relative; padding: 190px 0; background-color: #C4D8E5;}
@media screen and (max-width: 768px) {
  .service { position: relative; padding: 100px 0 80px; background-color: #C4D8E5;}
}
@media screen and (max-width: 599px) {
.service { position: relative; padding: 100px 0 80px; background-color: #C4D8E5;}
}

.service__heading { position: absolute; top: -65px; left: 0; right: 0; z-index: 1; width: 80%; margin: auto;}
.service-item { width: 80%; max-width: 1050px; margin: 0 auto 35px; background-color: #39749E;}
.service-item > a { display: flex; justify-content: space-between; align-items: center;}
@media screen and (max-width: 768px) {
.service-item { max-width: 520px; padding-bottom: 3em;}
.service-item > a { display: block;}
}
@media screen and (max-width: 599px) {
.service__heading { position: absolute; top: -45px; left: 0; right: 0; z-index: 1; width: 80%; margin: auto;}
}

.service-item__photo { width: 50%;}
.service-item__photo img { display: block; width: 100%;}
@media screen and (max-width: 768px) {
.service-item__photo { width: 100%;}
}

.service-item__textbox { position: relative; width: 45%; padding: 25px 0 55px;}
.service-item__heading { margin-bottom: 32px; font-size: 20px;letter-spacing: 0.12em; color: #fff;}
.service-item__text { max-width: 390px; font-size: 14px; font-weight: 300; color: #fff;}
.service-item__button { position: absolute; bottom: 0; right: 0; z-index: 1; width: 160px;}
.service-item__button img { display: block; width: 100%;}
@media screen and (max-width: 768px) {
.service-item__textbox { position: relative; width: 45%; padding: 25px 0 35px;}
.service-item__heading { margin-bottom: 18px;}

.service-item__textbox { position: relative; width: 90%; margin: 0 0 0 auto;}
.service-item__text { width: 90%;}

.service-item__button { position: absolute; bottom: -1em; right: 0; z-index: 1; width: 160px;}
}
@media screen and (max-width: 599px) {
.service-item__button { position: absolute; bottom: -1.5em; right: 0; z-index: 1; width: 160px;}
}

.service-detail { display: flex; justify-content: center; align-items: center;}
.service-detail__item { position: relative; width: 90%; max-width: 670px; margin: auto; padding: 45px 0; background-color: #fff;}
.service-detail__heading { margin-bottom: 40px; font-size: 20px; font-size: 2rem; text-align: center; letter-spacing: 0.12em;}
.service-detail__price { width: 90%; max-width: 526px; margin: 0 auto; border: 1px solid #000;}
.service-detail__price tr:nth-child(even) { background-color: #E8EDF2;}
.service-detail__price th,
.service-detail__price td { width: 50%; padding: 0.5em 1.5em; font-size: 14px;}
.service-detail__price th { font-weight: normal; border-right: 1px solid #000;}
@media screen and (max-width: 599px) {
.service-detail__price th { font-weight: normal; border-right: 1px solid #000;}
}

.service-detail__price02 { box-sizing: border-box; width: 90%; max-width: 526px; margin: 0 auto; padding: 28px 0; font-size: 12px; text-align: center; border: 1px solid #000;}
.service-detail__price02 p { text-align: center;}
.service-detail__price02 span { display: block; width: 90%; max-width: 182px; margin: auto; text-align: center; font-size: 14px; font-weight: 400; background-color: #E8EDF2;}


.service-detail__button { position: absolute; top: 0; right: 1em; z-index: 1;}


.company { padding: 150px 0 180px;}
/* @media screen and (max-width: 599px) {
.company { padding: 80px 0;}
} */
@media screen and (max-width: 768px) {
  .company { padding: 80px 0;}
  }
  

.company__heading { margin-bottom: 90px;}
/* @media screen and (max-width: 599px) {
.company { background-color: #C4D8E5;}
.company__heading { margin-bottom: 50px;}
} */
@media screen and (max-width: 768px) {
  .company { background-color: #C4D8E5;}
  .company__heading { margin-bottom: 50px;}
  }
  
.company__inner {
  display: flex;
  justify-content: space-between;
  width: 80%; max-width: 890px;
  margin: 0 auto;
}
/* @media screen and (max-width: 599px) {
.company__inner {
  display: block;
  width: 100%; max-width: none;
}
} */
@media screen and (max-width: 768px) {
  .company__inner {
    display: block;
    width: 100%; max-width: none;
  }
}

.company__map {
  order: 2;
  width: 50%; max-width: 428px;
}
.company__map iframe {
  display: block;
  width: 100%;
  height: 100%;
}
/* @media screen and (max-width: 599px) {
.company__map {
  width: 100%; max-width: none; height: 280px;
}
} */
@media screen and (max-width: 768px) {
  .company__map {
    width: 100%; max-width: none; height: 280px;
  }
}  

.company__textbox {
  width: 48%; max-width: 410px;
}
/* @media screen and (max-width: 599px) {
.company__textbox {
  width: 85%; max-width: none;
  margin: auto;
}
} */
@media screen and (max-width: 768px) {
  .company__textbox {
    width: 85%; max-width: none;
    margin: auto;
  }
}


.company-list {}
.company-list__item {
  display: flex;
  justify-content: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid #000;
}
.company-list__item:nth-last-of-type(1) {
  border-bottom: none;
}
.company-list__item dt {
  width: 70px;
  font-size: 14px;
  text-align: center;
}
.company-list__item dd {
  box-sizing: border-box;
  width: 80%;
  padding: 0 1em;
  font-size: 14px;
}

.company-list__item .contact .contact-list__item {
  display: flex;
  align-items: center;
}
.company-list__item .contact .contact-list__item dt {
  text-align: left;
  width: 30px;
}
.company-list__item .contact .contact-list__item dt img {
  width: 20px;
  vertical-align: middle;
  padding-left: 4px;
}
.company-list__item .contact .contact-list__item dd {
  padding: 0 0.3em;
  white-space: nowrap;
  width: calc(100% - 30px);
}
/* .company-list__item .contact dl dt {
  width: 10%;
  min-width: 30px;
  position: relative;
  text-align: left;
}
.company-list__item .contact dl dt img {
  width: 18px;
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
}
.company-list__item .contact dl dd {
  width: 90%;
  padding: 0;
} */
@media screen and (max-width: 768px) {
}
  

.footer { padding: 1em 0; font-size: 16px; text-align: center; color: #fff; background-color: #39749E;}