@charset "utf-8";

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, input, select, textarea {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-style: normal;
  font-weight: 400;
  vertical-align: bottom;
  background: transparent
  box-sizing: border-box;
}
article, aside, details, figcaption, figure, footer, header, menu, nav, section {
  display: block
}
html {
  font-size: 62.5%
}
body {
  font-family: sans-serif;
  line-height: 1
}
ul, ol {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none
}
a {
  margin: 0;
  padding: 0;
  vertical-align: bottom;
  background: transparent;
  outline: none
}
img {
  vertical-align: bottom;
  pointer-events: none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-callout:none;
  user-select:none;
  width: 100%;
  height: auto;
}
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none
}
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold
}
del {
  text-decoration: line-through
}
abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%
}
th, td {
  text-align: left;
  vertical-align: top
}
input, select, textarea {
  font-family: inherit
}
input[type="submit"] {
  cursor: pointer
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0
}
html {
  overflow: auto
}
body {
  min-width: 320px;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
  color: #111;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: .08em;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  background:#1996a7;
}
body.sg {
  height: auto
}
a {
  color: inherit;
  text-decoration: none;
}

span {
  font-weight: inherit
}
strong, b {
  font-weight: 700
}
img {
  max-width: 100%;
  height: auto
}
button, input {
  font-family: inherit
}

.sp-only{
  display: none;
}

@media screen and (max-width: 780px) {
  .sp-only{display: inline-block;}
  .pc-only{display: none;}
}

.cf:after{
  content:"";
  display: table;
  clear:both;
}


/* ===========================
        header
=========================== */

.hd{

}

.hd .inr{

}

.hd .inr .logo{
  padding: 1em;
  text-align: center;
}


.hd .inr .logo img{
  width: 100%;
  max-width: 300px;
}


/* ===========================
          footer
=========================== */
.ft{

}

.ft .inr{

}

.ft .inr .ft-logo{
  padding: 1em;
  text-align: center;
}


.ft .inr .ft-logo img{
  width: 100%;
  max-width: 300px;
}

.ft .inr .about{
  text-align: center;
  padding: 0 0 1em;
  color: #fff;
  line-height: 1.5;
}

.ft .inr .about .name{
  font-weight: bold;
  font-size: 1.5em;
}

.ft .inr .about .tel{
  font-size: 1.3em;
  font-weight: bold;
}

.ft .inr .about .address{
  margin-bottom: 1em;
}

.ft .inr .copy{
  color: #fff;
  font-size: 0.7rem;
  text-align: center;
  padding-bottom: 2em;
}


.cnt{
}

.cnt .inr{
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.fuwafuwa {
  animation: floating-y 1.4s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-3%);
  }
  100% {
    transform: translateY(3%);
  }
}

.katakata {
  animation-name: katakata;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: step-start;
}

@keyframes katakata {
  0% {
    transform: translateY(-2px) rotate(6deg);
  }
  25% {
      transform: translate(0) rotate(-6deg);
  }
  50% {
    transform: translateY(-2px) rotate(6deg);
  }
  75% {
      transform: translate(0) rotate(-6deg);
  }
}

.katakata2 {
  animation-name: katakata2;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: step-start;
}

@keyframes katakata2 {
  0% {
    transform: translateY(-2px) rotate(-6deg);
  }
  25% {
      transform: translate(0) rotate(6deg);
  }
  50% {
    transform: translateY(-2px) rotate(-6deg);
  }
  75% {
      transform: translate(0) rotate(6deg);
  }
}
/* ===========================
          main-image
=========================== */

.main-image{
  position: relative;
  background: url(../assets/image/common/bg-dotto.png);
  background-size: contain;
}

.main-image .inr{
  max-width: 1200px;
}

.main-image .main-image-hx{
  position: relative;
  z-index: 1;
}

.main-image .image{
  margin-top: -50px;
  padding: 0 100px;
  position: relative;
  z-index: 5;
}

.main-image .image img{

}

.main-image .main-image-hx img{

}

.main-image .main-sub-image{
    position: absolute;
    z-index: 10;
}

.main-image .main-sub-image img{
  width: 200px;
}

.main-image .main-sub-image.sub01{
  bottom: 0;
  left: 0;
}

.main-image .main-sub-image.sub02{
  bottom: 0;
  right: 0;
}

.main-image::before{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 90px 50vw 0 50vw;
    border-color: #1996a7 #ffe100 transparent #ffe100;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}

@media screen and (max-width: 780px) {
  .main-image .inr{
    padding-bottom: 5px;
  }
  .main-image .image{
    margin-top: 0;
    padding: 10px;
  }
  .main-image .main-sub-image img{
    width: 80px;
  }
  .main-image::before{
    border-color: #11a4b3 #ffe100 transparent #ffe100;
  }
}

/* ===========================
          whats
=========================== */

.what{
  background: #ffe100;
  padding: 130px 0;
}

.what .what-hx{
  padding: 1em 8em;
} 

.what .what-image-hx img{

}

.what .what-image{
  text-align: center;
  margin-bottom: 30px;
} 

.what .what-image img{
  width: 100%;
  max-width: 700px;
} 


.what .what-sub-image{
  position: absolute;
  z-index: 10;
}

.what .what-sub-image img{
  width: 180px;
}
.what .what-sub-image.sub01{
  left: 0;
}
.what .what-sub-image.sub02{
  right: 0;
}

.what .text{
  text-align: center;
} 

.what .text img{
  width: 100%;
  max-width: 800px;
} 

@media screen and (max-width: 780px) {
  .what{
    padding: 100px 0 70px;
  }
  .what .what-hx{
    padding: 1em 1em 3em;
  }
  .what .what-sub-image img{
    width: 100px;
  }
  .what .what-sub-image.sub01{
    left: 0;
    top: 70px;

  }
  .what .what-sub-image.sub02{
    right: 0;
    top: 70px;
  }
  .what .what-image {
    position: relative;
    z-index: 20;
    padding: 1em;
    margin-bottom: 10px;
  }
  .what .text {
    padding: 0 2em;
  }
}


/* ===========================
          vs
=========================== */

.vs{
  background: #fff;
  padding: 130px 0;
  text-align: center;
}

.vs .vs-image-hx{
  margin-bottom: 50px;
} 

.vs .vs-image-hx img{
  width: 100%;
  max-width: 600px;
}

.vs .text{
  margin-bottom: 50px;
}

.vs .text img{
  width: 100%;
  max-width: 700px;
}

.vs .text2{

}
.vs .text2 img{
  width: 100%;
  max-width: 800px;
}

@media screen and (max-width: 780px) {
  .vs{
    padding: 70px 0;
  }
  .vs .inr{
    padding: 0 1em;
    box-sizing: border-box;
  }
  .vs .vs-image-hx {
    margin-bottom: 30px;
    padding: 0 2em;
  }
}


/* ===========================
          price
=========================== */

.price{
  background: #ffe100;
  padding: 130px 0 0;
  text-align: center;
  position: relative;
}

.price .price-image-hx{
  margin-bottom: 50px;
} 

.price .price-image-hx img{
  width: 100%;
  max-width: 900px;
}

.price .price-image{
  text-align: center;
  margin-bottom: 30px;
} 

.price .price-image img{
  width: 100%;
  max-width: 700px;
} 


.price .price-sub-image{
  position: absolute;
  z-index: 1;
}

.price .price-sub-image img{
  width: 180px;
}
.price .price-sub-image.sub01{
  left: 0;
  top: 50%;
}
.price .price-sub-image.sub02{
  right: 0;
  top: 50%;
}

.price .text{
  text-align: center;
  margin-bottom: 20px;
} 

.price .text img{
  width: 100%;
  max-width: 800px;
} 

.price .text2{
  text-align: center;
  padding-bottom: 20px;
  position: relative;
  z-index: 5;
} 

.price .text2 img{
  width: 100%;
  max-width: 800px;
} 

.price .text3{
  text-align: center;
  margin-bottom: 50px;
  position: relative;
  z-index: 5;
} 

.price .text3 img{
  width: 100%;
  max-width: 1000px;
}

.price2::before{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 90px 50vw 0 50vw;
    border-color: #ffe100 #fff transparent #fff;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}

.price2{
  padding-top: 30px;
  padding-bottom: 40px;
}

.price2 .inr{
  width: 100%;
  max-width: 700px;
  border: solid 5px #111;
  background: #fff;
  padding-bottom: 0.7em;
}

.price2 .inr h1{
  font-size: 3rem;
  font-weight: bold;
  letter-spacing: 0.5em;
  padding: 0 0 0 0.5em;
  border-bottom: solid 5px #111;
  background: #ffe100;
  margin-bottom: 0.5em;
}

.price2 .inr .plice-list{
  padding: 0.2em 2em;
}

.price2 .inr .plice-list dt{
  font-weight: bold;
  font-size: 2.5rem;
  text-align: left;
  float: left;
}

.price2 .inr .plice-list dd{
  font-size: 2.5rem;
  text-align: right;
  float: right;
}

@media screen and (max-width: 780px) {
  .price {
    padding: 60px 1em 10px;
  }
  .price .text{
    padding: 0 1em;
  }
  .price .price-image-hx {
    margin-bottom: 20px;
  }
  .price .price-sub-image img {
    width: 90px;
  }
  .price2{
    padding-top: 0;
  }
  .price2 .inr h1{
    font-size: 2rem;
  }
  .price2 .inr .plice-list {
    padding: 0 2em;
  }
  .price2 .inr .plice-list dt {
    font-size: 1.5rem;
  }
  .price2 .inr .plice-list dd {
    font-size: 1.5rem;
  }

}


/* ===========================
          flow
=========================== */

.flow{
  background: #fff;
  text-align: center;
}

.flow .flow-image{
  position: relative;
  z-index: 20;
}

.flow .flow-image img{
  width: 100%;
  max-width: 1000px;
}

@media screen and (max-width: 780px) {
  .flow{
    padding: 50px 1em;
  }
}


/* ===========================
          before after
=========================== */

.ba{
  padding: 130px 0;
  text-align: center;
  position: relative;
}

.ba .ba-image-hx{
  margin-bottom: 50px;
} 

.ba .ba-image-hx img{
  width: 100%;
  max-width: 900px;
}

.ba::before{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50vw 90px 50vw;
    border-color: transparent #ffffff #1996a7 #ffffff;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
}

.ba .ba-list{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.ba .ba-list li{
  float: left;
  width: 50%;
}

.ba .ba-list li img{
  width: 100%;
  padding: 1em;
}

@media screen and (max-width: 780px) {
  .ba{
    padding: 50px 0;
  }
  .ba .ba-image-hx{
    margin-bottom: 10px;
  }
  .ba .ba-list li{
    float: none;
    width: 100%;
    padding: 0.5em 1em;
    box-sizing: border-box;
  }
  .ba .ba-list li img{
    box-sizing: border-box;
  }
}



/* ===========================
          contact
=========================== */

.contact{
  padding: 130px 0;
  position: relative;
}

.contact .inr{
  padding: 80px;
  width: 100%;
  max-width: 700px;
  background: #fff;
  border-radius: 30px;
}

.contact .contact-hx{
  margin-bottom: 30px;
  text-align: center;
  font-size: 3rem;
  font-weight: bold;
  line-height: 1;
} 

.contact .contact-hx .sub{
  font-size: 1.2rem;
}

.contact-box .contact-table{

}

.contact-box .contact-table .msg-text{
  text-align: center;
}

.contact-box .contact-table .msg-error{
  text-align: center;
  color: #ff2424;
}

.contact-box .contact-table .form-list{
  margin: 4em 0 4em;
}

.contact-box .contact-table .form-list dt{
  padding: 0.7em 0.7em 0.4em 0;
  letter-spacing: 0.07em;
  font-weight: normal;
}

.contact-box .contact-table .form-list dt .require{
  font-size: 0.7em;
  padding: 0.15em 0.5em;
  background: #111;
  color: #fff;
  vertical-align: text-top;
  margin-left: 1em;
}

.contact-box .contact-table .form-list dd{
}
.contact-box .contact-table .form-list dd .note{
  font-size: 0.7rem;
  font-style: normal;
  color: #999999;
  padding-top: 0.5em;
}

.contact-box .contact-table .form-list dd.err{
  background: #ffefef;
}

.contact-box .contact-table .form-list dd input{
  width: 100%;
  background: #ededed;
}

.contact-box .contact-table .form-list dd.radio{
  text-align: center;
  margin: 2em 0 1em;
}
.contact-box .contact-table .form-list dd input.radio{
  width: 1em;
  margin: 0 0.5em 0 2em;
  background: #ededed;
}

.contact-box .contact-table .form-list dd textarea{
  width: 100%;
  height: 8em;
  background: #ededed;
}

.contact-box .contact-table .hx-form-post{
  text-align: center;
  font-size: 1.1rem;
}

.contact-box .contact-table .text-form-post{
  text-align: center;
  line-height: 2;
}

.contact-box .contact-table

.contact-box .flexcroll{
  text-align: center;
}

.contact-box .flexcroll .flexcroll-text{
  font-size: 0.75rem;
  line-height: 2;
  border: solid 1px #999999;
  padding: 1em;
  width: 90%;
  margin: 0 auto 3em;
  text-align: left;
}

.btn-form{
  text-align: center;
}

.btn-form form{
  display: inline-block;
}

.btn-form button{
  display: inline-block;
  background: #fff;
  color: #111;
  letter-spacing: .1em;
  padding: 10px 50px;
  transition: all 0.5s ease;
  border: solid #111 1px;
}

.btn-form button:hover{
  background: #111;
  color: #fff;
  border: solid #fff 1px;
  text-decoration: none;
}
@media screen and (max-width: 780px) {
  .contact{
    padding: 1em;
    box-sizing: border-box;
    margin-bottom: 30px;
  }
  .contact .inr{
    padding: 2em;
    box-sizing: border-box;
    border-radius: 10px;
  }
  .contact .contact-hx{
    font-size: 2rem;
  }
}