@charset "UTF-8";
* { padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }

h1, h2, h3 { font-weight: normal; line-height: 1.3; letter-spacing: 2px; }

h1, h2 { font-size: 40px; }

a { color: #000; text-decoration: none; }

ul li { list-style: none; }

body { font-family: seurat,meiryo,'ヒラギノ角ゴ pro w3','hiragino kaku gothic pro',sans-serif; line-height: 1.8; }

.small-container { max-width: 940px; margin: 0 auto; padding: 0 15px; }

header{
  position: fixed;
  width: 100%;
  top: 0;
  background: #fff;
  z-index: 10;
  box-shadow: 0px 2px 11px 0px rgba(204,204,204,0.75);
  -webkit-box-shadow: 0px 2px 11px 0px rgba(204,204,204,0.75);
  -moz-box-shadow: 0px 2px 11px 0px rgba(204,204,204,0.75);
}
header > div { position: relative; display: flex; justify-content: space-between;  align-items: center; padding: 20px 0!important; }
header h1{ font-size: 28px; }
header .hamburger { display: none; }
header nav ul li { display: inline-block; font-size: 14px; }
header nav ul li:last-child { margin-right: 0; }
header nav ul li a{
  position: relative;
  padding: 8px 10px;
}


header nav ul li a:before, header nav ul li a:after {
  content: '';
  position: absolute;
  width: 0%;
  height: 3px;
  bottom: -3px;
  background: #88f1c3;

}

header nav ul li a:before {
  left: 0;
}
header nav ul li a:after {
  right: 0;
  transition: width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

header nav ul li a:hover:before {
  width: 100%;
  transition: width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

header nav ul li a:hover:after {
  background: transparent;
  width: 100%;
  transition: 0s;
}

img { max-width: 100%; height: auto; }
main{ margin-top: 76px; }

.bg-bluish { background: #e3f3ec; }

.slider { margin-bottom: 0 !important; }
.slider .slide-img { width: 100%; height: 560px; background-size: cover; background-position: center; background-repeat: no-repeat; }
.slider .slide-img._01 { background-image: url(../img/slider1.png); }
.slider .slide-img._02 { background-image: url(../img/slider2.png); }
.slider .slide-img._03 { background-image: url(../img/slider3.png); }
.slider .slick-dots { bottom: 30px; }
.slider .slick-dots li { margin: 0; }
.slider .slick-dots li.slick-active button:before { color: #fff; }
.slider .slick-dots li button:before { font-size: 12px; }

.about { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 120px 15px; position: relative; }
.about > div { padding: 50px; background: #fff; position: absolute; max-width: 460px; }
.about > div h2 { margin-bottom: 20px; }
.about img { margin-left: auto; }

#intro{ background: #fafafa; }
.services { width: 1130px; max-width: 100%; margin: 0 auto; padding-top: 100px; }
.services h2 { text-align: center; margin-bottom: 100px; }
.services .services-list { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 15px; text-align: center; -ms-flex-pack: distribute; justify-content: space-around; margin-bottom: 85px; padding: 0 15px; }
.services .services-list > div {
  position: relative;
  width: calc(100% / 4);
  border: 1px solid #f1f1f1;
  background: #fff;
  padding: 20px 20px;
  border-radius: 6px;
  box-shadow: 0px 0px 5px 0px rgb(241 241 241 / 75%);
  -webkit-box-shadow: 0px 0px 5px 0px rgb(241 241 241 / 75%);
  -moz-box-shadow: 0px 0px 5px 0px rgba(241, 241, 241, 0.75);
}
.services .services-list > div > div{
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}
.services .services-list > div > div:before{
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  background: #fff;
  top: 7px;
  left: 7px;
  z-index: -1;
}
.services .services-list > div:nth-child(2), .services .services-list > div:nth-child(3) { margin: 0 25px; }
.services .services-list > div:nth-child(3){ margin-left: 0; }
.services .services-list h3 { font-size: 22px; letter-spacing: 0; margin-top: 35px; margin-bottom: 30px; }
.services .services-list p { text-align: left; }

.services .services-list.twocol{
  justify-content: space-between;
  flex-wrap: wrap;
}
.services .services-list.twocol > div{
  width: 49%;
  padding: 20px 20px 30px 20px;
}

.services .services-list.twocol > div:nth-child(2), .services .services-list.twocol > div:nth-child(3){
  margin: 0;
}

.services .services-list.twocol > div:nth-child(1), .services .services-list.twocol > div:nth-child(2){
  margin-bottom: 45px;
}

.location { width: 1190px; max-width: 100%; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: 30px; padding-bottom: 80px; }
.location > div { width: 49.4%; }
.location > div:first-child { background-color: #f4f6f8; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 20px; font-size: 15px; text-align: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.location > div:first-child h2 { margin-bottom: 35px; }
.location > div:last-child img { width: 100%; height: 100%; }

.inquiry { padding: 70px 0 125px; }
.inquiry h2 { text-align: center; }
.inquiry p { text-align: center; margin: 30px 0; font-size: 15px; }
.inquiry form{
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  border: 1px solid rgba(152, 169, 185, 0.21);
  box-shadow: 0px 10px 15px 0 rgb(125 126 166 / 5%);
}
.inquiry form .form-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.inquiry form .form-row > input { width: 49.5%; }
.inquiry form input, .inquiry form textarea { border: none; font-family:  arial; background: transparent; border-bottom: 1px solid #333; font-size: 16px; outline: 0; padding: 3px 3px 3px 12px; width: 100%; line-height: 28px; margin-bottom: 10px; color: #000; }
.inquiry form input:hover, .inquiry form textarea:hover { border-bottom: 1px solid #88f1c3; }
.inquiry form textarea { resize: none; height: 126px; padding-top: 12px; }
.inquiry form button { outline: 0; border: 0; background: #000; color: #fff; width: 100%; padding: 13px 10px; font-size: 18px; margin-top: 15px; border-radius: 30px; font-family: Arial,Helvetica; }
.inquiry form button:hover { opacity: 0.8; }

.map{ margin-bottom: -9px; }

footer {
  text-align: center;
  font-size: 14px;
  padding: 20px 10px 20px 10px;
  background: #333;
  color: #fff;
}

::-webkit-input-placeholder { color: #000; }

::-moz-placeholder { color: #000; }

:-ms-input-placeholder { color: #000; }

:-moz-placeholder { color: #000; }

.hamburger { height: 20px; width: 22px; position: absolute; top: 28px; right: 30px; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-transform: rotate(540deg); transform: rotate(540deg); z-index: 3; }
.hamburger .line { display: block; height: 2px; width: 100%; border-radius: 10px; background: #333; }
.hamburger .line1 { -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transition: -webkit-transform 0.4s ease-in-out; transition: -webkit-transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out; }
.hamburger .line2 { -webkit-transition: -webkit-transform 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; }
.hamburger .line3 { -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transition: -webkit-transform 0.4s ease-in-out; transition: -webkit-transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out; }
.hamburger.open .line1 { -webkit-transform: rotate(45deg); transform: rotate(45deg); position: relative; top: 2px; }
.hamburger.open .line2 { -webkit-transform: scaleY(0); transform: scaleY(0); }
.hamburger.open .line3 { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); position: relative; top: -1px; }

.status{ text-align: center; font-size: 14px; margin-top: 10px; color: #0e850e; }
.status .error{ color: #f94444; }


@media screen and (min-width: 1918px){
  .services{ width: 1400px; }
  .location{ width: 1740px; }
}

@media screen and (max-width: 900px) {
 .services .services-list{ flex-wrap: wrap; }
 .services .services-list > div{ width: calc(100% / 2 - 30px); }
 .services .services-list > div:nth-child(1), .services .services-list > div:nth-child(2){ margin-bottom: 50px }
 .services .services-list > div:nth-child(2), .services .services-list > div:nth-child(3){ margin: 0 }
 .location > div:first-child h2{ font-size: 35px }
}

@media screen and (max-width: 767px) { h1 { font-size: 20px; }
  h2 { font-size: 24px!important; }
  body.disable-scroll { position: fixed; width: 100%; overflow: hidden; }
  header > div { padding: 0 !important; text-align: center; display: block; }
  header h1 { position: relative; padding: 27px 0; border-bottom: 0; z-index: 3; font-size: 20px }
  header .hamburger { display: -webkit-box; display: -ms-flexbox; display: flex; }
  header nav { position: absolute; top: 0; left: 0; margin: 0; background: #fff; width: 100%; height: 100vh; -webkit-transition: opacity 0.1s ease-out; -moz-transition: opacity 0.1s ease-out; -o-transition: opacity 0.1s ease-out; z-index: 2; opacity: 0; }
  header nav.show { -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; opacity: 1; }
  header nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-top: 80px; }
  header nav ul li { font-size: 20px; margin-right: 0; padding: 0 10px; }
  header nav ul li a{ display: block; }
  .about { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 45px 15px; }
  .about > div { position: relative; background: transparent; padding: 0; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; margin-top: 45px; }
  .about > div p { font-size: 14px; }
  .slider .slide-img { height: 300px; }
  .slider .slick-dots { bottom: 15px; }
  .slider .slick-dots li { margin: 0 15px; }
  .slider .slick-dots li button:before { font-size: 28px; }
  .services { padding-top: 45px; }
  .services h2 { margin-bottom: 50px; }
  .services .services-list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 45px; }
  .services .services-list > div, .services .services-list.twocol > div { width: 100%; }
  .services .services-list > div:nth-child(2), .services .services-list > div:nth-child(3) { margin-left: 0; margin-right: 0; }
  .services .services-list > div:not(:last-child), .services .services-list.twocol > div:not(:last-child){ margin-bottom: 50px!important; }
  .services .services-list h3 { font-size: 20px; margin-top: 30px; margin-bottom: 20px; }
  .location { padding: 0; max-width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .location > div { width: 100%; }
  .location > div:first-child { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; padding: 45px 15px; text-align: left; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
  .location > div:first-child h2 { margin-bottom: 14px; }
  .inquiry { padding: 45px 15px 0 15px; }
  .inquiry p { margin: 20px 0 40px; }
  .inquiry form .form-row { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .inquiry form .form-row > input { width: 100%; }
  .inquiry form button { margin-top: 0; }
  .map { padding: 65px 15px; background: #e3f3ec; }
  .map iframe { height: 240px; }
}