@charset "UTF-8";

/* main-visual
======================================================================*/

.main-visual.mv-quality {
  background-image: url(../../../../quality/images/mv.jpg);
  background-position: center center;
  background-size: cover;
  background-color: #000308;
}
@media screen and (max-width: 480px) {
  .main-visual.mv-quality {
    background-image: url(../../../../quality/images/mv_sp.jpg);
  }
}

/*  設備仕様
----------------------------------------------------------------*/

/*base*/
@media only screen and (min-width: 733px) {
  #content_wrap .pc_none {
    display: none;
  }
}

#content_wrap {
  max-width: 1000px;
  margin: 0 auto;
}

/* #content_wrap .f-gothic {
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-family: "Noto Serif JP", serif;
} */
#content_wrap .hstype01 {
  margin: 50px 0 0;
  padding: 5px 0;
  font-size: 2rem;
  line-height: 1.5;
  text-align: center;
  /* font-family: "Noto Serif JP", serif; */
  letter-spacing: 0.08em;
  color: #fff;
  background-image: linear-gradient(to right, #4f6077, #150201);
  position: relative;
  overflow: hidden;
}

#content_wrap .hstype02 {
  text-align: center;
  font-weight: normal;
  font-size: 32px;
  margin: 30px auto;
  line-height: 1.7em;
  color: #270b00;
  letter-spacing: 0.04em;
}
#content_wrap .hstype03 {
  padding: 4px 1px;
  border: 1px solid #270b00;
  text-align: center;
  /* font-size: 1rem; */
  font-weight: normal;
  color: #270b00;
}
.acc_con {
  display: inline-block;
  border: none;
  padding-bottom: 0;
}

/* 差し込み画像用 */

.image_yoko {
  margin: 30px 0;
}
.row_image {
  box-sizing: border-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex: 0 1 auto;
  -webkit-box-flex: 0;
  flex: 0 1 auto;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -8px;
  justify-content: space-between;
  padding: 0 15px;
}
.row_image-item {
  width: 48.5%;
}
.toilet_imge {
  margin-top: 30px;
}

@media only screen and (max-width: 640px) {
  .row_image {
    padding: 0 7px;
  }
  .image_yoko {
    margin: 20px 0 0;
  }
  .row_image-item {
    width: 100%;
  }
  .toilet_imge {
    margin-top: 20px;
    flex-direction: column-reverse;
  }
}

/* スマートフォン　レスポンシブ対応 */
@media only screen and (min-width: 0px) and (max-width: 1920px) {
  .intro.lp02 {
    padding-top: 6.25vw;
  }
  .intro.lp02 figure {
    width: 93.22916666666666vw;
    padding-bottom: 2.604166666666667vw;
    min-width: 1200px;
  }
  .intro.lp02 figure figcaption {
    top: 3.6458333333333335vw;
    font-size: 1.3020833333333335vw;
  }
  #lp01 .sec01,
  #lp01 .sec02,
  #lp02 .sec01,
  #lp02 .sec02,
  #lp02 .sec03 {
    width: 100%;
    min-width: 1000px;
    padding-top: 52.083333333333336vw;
    background-size: 100%;
  }
  #lp01 .sec03,
  #lp01 .sec04,
  #lp02 .sec04 {
    width: 100%;
    min-width: 1000px;
    padding-top: 54.6875vw;
    background-size: 100%;
  }
  .charactor div {
    width: 100%;
  }
  #lp01 .sec01 div dl,
  #lp02 .sec01 div dl {
    left: 19.791666666666664vw;
    bottom: -6.25vw;
    width: 22.291666666666668vw;
    padding: 3.125vw 3.6458333333333335vw;
  }
  #lp01 .sec02 div dl,
  #lp02 .sec02 div dl {
    left: 57.291666666666664vw;
    bottom: 0;
    width: 21.875vw;
    padding: 3.125vw 3.6458333333333335vw;
    z-index: 80;
  }
  #lp01 .sec03 div dl,
  #lp02 .sec03 div dl {
    left: 19.791666666666664vw;
    bottom: -5.729166666666666vw;
    width: 21.875vw;
    padding: 3.125vw 3.6458333333333335vw;
  }
  #lp01 .sec04 div dl,
  #lp02 .sec04 div dl {
    left: 57.291666666666664vw;
    bottom: 0px;
    width: 22.291666666666668vw;
    padding: 3.125vw 3.6458333333333335vw;
  }
  .charactor div dl dt {
    font-size: 1.4583333333333333vw;
    margin-bottom: 1.0416666666666665vw;
  }
  .charactor div dl dd {
    font-size: 0.8333333333333334vw;
  }
  #lp01 .sec03 div dl dd span {
    font-size: 0.625vw;
  }
  .sec01 div dl:before,
  .sec02 div dl:before,
  .sec03 div dl:before,
  .sec04 div dl:before {
    left: -1.5625vw;
    top: -2.083333333333333vw;
    width: 10vw;
    height: 5.625vw;
    background-size: 100%;
  }
}

@media only screen and (min-width: 0px) and (max-width: 1200px) {
  #lp01 .sec01,
  #lp01 .sec02,
  #lp01 .sec03,
  #lp02 .sec01,
  #lp02 .sec02,
  #lp02 .sec03 {
    padding-top: 650px;
  }
  #lp01 .sec04,
  #lp02 .sec04 {
    padding-top: 670px;
  }
  #lp01 .sec01 div dl,
  #lp02 .sec01 div dl {
    left: 200px;
    bottom: -50px;
    width: 304px;
    padding: 38px 44px;
  }
  #lp01 .sec02 div dl,
  #lp02 .sec02 div dl {
    left: 688px;
    bottom: 20px;
    width: 300px;
    padding: 38px 44px;
  }
  #lp01 .sec03 div dl,
  #lp02 .sec03 div dl {
    left: 200px;
    bottom: -50px;
    width: 310px;
    padding: 38px 44px;
  }
  #lp01 .sec04 div dl,
  #lp02 .sec04 div dl {
    left: 688px;
    bottom: 10px;
    width: 310px;
    padding: 38px 44px;
  }
  .charactor div dl dt {
    font-size: 18px;
  }
  .charactor div dl dd {
    font-size: 12px;
  }
  #lp01 .sec03 div dl dd span {
    font-size: 10px;
  }
  .sec01 div dl:before,
  .sec02 div dl:before,
  .sec03 div dl:before,
  .sec04 div dl:before {
    left: -20px;
    top: -24px;
    width: 120px;
    height: 68px;
    background-size: 100%;
  }
}

@media only screen and (min-width: 0px) and (max-width: 800px) {
  .buttons {
    bottom: 11.25vw;
  }
  .buttons li {
    width: 14.000000000000002vw;
  }
}

@media only screen and (min-width: 0px) and (max-width: 733px) {
  #content_wrap .sp_none {
    display: none !important;
  }
  #content_wrap .hstype01 {
    font-size: 1em;
  }
  #content_wrap .hstype02 {
    font-size: 1.8rem;
    margin: 20px auto;
  }
}
@media only screen and (min-width: 0px) and (max-width: 450px) {
  #content_wrap .hstype02 {
    margin: 10px auto;
  }
}