@charset "utf-8";
/*========================================================================================================================


  ◇◆◇ アクアクララ ◇◆◇
  
  
========================================================================================================================*/
/*----------------------------------------------------------------------------------------------------

  hero
  
----------------------------------------------------------------------------------------------------*/
.hero {
  width: 100%;
  background: url(../image/hero.jpg) no-repeat center center;
}
.hero h2 {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
@media print, screen and (min-width:641px) {
  .hero {
    height: 400px;
  }
}
@media screen and (max-width:640px) {
  .hero {
    height: 0;
    padding-top: 34%;
    background-size: cover;
  }
}

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

  安心・安全なアクアクララのお水
  
----------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width:641px) {
  .anshin {
    padding-top: 40px;
    padding-bottom: 60px;
  }
}
@media screen and (max-width:640px) {
  .anshin {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
  }
}
.anshin_sbj {
  display: inline-block;
  border-top: 1px solid #6d9ad5;
  border-bottom: 1px solid #6d9ad5;
  line-height: 1;
  padding: 0.75rem;
  margin-top: 2rem;
  color: #306ab4;
  font-size: 93.8%;
}
.anshin_hkensa {
  border: 1px solid #d2d6d9;
}
.anshin_hkensa dt {
  font-weight: bold;
  padding-bottom: 0.25rem;
}
@media print, screen and (min-width:641px) {
  .anshin_roka {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .anshin_hkensa {
    padding: 1.5rem;
  }
}
@media screen and (max-width:640px) {
  .anshin_roka {
    margin-top: 1.25rem;
    margin-bottom: 1.75rem;
  }
  .anshin_hkensa {
    padding: 1.25rem;
  }
}

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

  災害時の備蓄に
  
----------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width:641px) {
  .sonae-warp {
    padding-bottom: 60px;
  }
}
@media screen and (max-width:640px) {
  .sonae-warp {
    padding-bottom: 2rem;
  }
}
.sonae-warp .l-headline:after {
  content: "";
  display: block;
  width: 100%;
  height: 0.5rem;
}
.sonae {
  border: 2px solid #f4d955;
  background-color: #fef8dc;
  position: relative;
}
.sonae ul:after {
  content: "";
  width: 360px;
  height: 185px;
  background: url(../image/sonae.png) no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 2rem;
  bottom: 1.5rem;
}
.sonae ul {
  list-style: none;
  padding: 1.75rem;
  box-sizing: border-box;
}
.sonae li {
  margin-top: 0.5rem;
  padding-left: 2rem;
  position: relative;
  line-height: 1.6;
}
.sonae li:first-child {
  margin-top: 0;
}
.sonae li:before {
  content: "";
  display: inline-block;
  width: 1.65rem;
  height: 1.65rem;
  background: url(../image/ic-check.png) no-repeat left top;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 0.15rem;
}
.jirei ul {
  list-style: none;
  border: 2px solid #76c27f;
  background-color: #eef7ef;
  padding: 1.5rem;
  box-sizing: border-box;
}
.jirei li {
  margin-top: 0.5rem;
  padding-left: 2rem;
  position: relative;
  line-height: 1.6;
}
.jirei li:first-child {
  margin-top: 0;
}
@media screen and (max-width:640px) {
  .sonae ul:after {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 30%;
    position: inherit;
    right: inherit;
    bottom: inherit;
  }
  .sonae ul {
    padding: 1.25rem;
  }
}

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

  サービスのポイント
  
----------------------------------------------------------------------------------------------------*/
.svpoint_sbj {
  display: inline-block;
  border-top: 1px solid #6d9ad5;
  border-bottom: 1px solid #6d9ad5;
  line-height: 1;
  padding: 0.75rem;
  margin-top: 2rem;
  color: #306ab4;
  font-size: 93.8%;
}
.svpoint_img {
  text-align: center;
  padding-top: 0.5rem;
}
@media print, screen and (min-width:641px) {
  .svpoint {
    padding-bottom: 60px;
  }
  .svpoint_img {
    padding-bottom: 2rem;
  }
}
@media screen and (max-width:640px) {
  .svpoint {
    padding-bottom: 2rem;
  }
  .svpoint_img {
    padding-bottom: 1.75rem;
  }
}

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

  月々のご利用料金のイメージ
  
----------------------------------------------------------------------------------------------------*/
.pricesys_sbj {
  display: inline-block;
  border-top: 1px solid #6d9ad5;
  border-bottom: 1px solid #6d9ad5;
  line-height: 1;
  padding: 0.75rem;
  margin-top: 2rem;
  color: #306ab4;
  font-size: 93.8%;
}
.pricesys_img {
  text-align: center;
}
@media print, screen and (min-width:641px) {
  .pricesys {
    padding-bottom: 60px;
  }
  .pricesys_img {
    padding-top: 2rem;
  }
}
@media screen and (max-width:640px) {
  .pricesys {
    padding-bottom: 2rem;
  }
  .pricesys_img {
    padding-top: 1.75rem;
  }
}

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

  サンキューセット
  
----------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width:641px) {
  .startup_img {
    margin-top: 60px;
  }
}
@media screen and (max-width:640px) {
  .startup_img {
    margin-top: 2rem;
  }
}

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

  プラン
  
----------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width:641px) {
  .plan_img {
    margin-top: 60px;
  }
}
@media screen and (max-width:640px) {
  .plan_img {
    margin-top: 2rem;
  }
}

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

  商品ラインナップ
  
----------------------------------------------------------------------------------------------------*/
.lineup-warp {
  background-color: #d8f3fd;
}
.lineup-txt {
  padding: 0.5rem 0;
}
.lineup-txt b {
  display: inline-block;
  margin-bottom: 0.5rem;
}
@media print, screen and (min-width:641px) {
  .lineup-warp {
    padding-top: 50px;
    padding-bottom: 60px;
  }
  .lineup-txt {
    text-align: center;
  }
  .lineup-txt b {
    margin-top: 0.25rem;
    font-size: 125%;
  }
}
@media screen and (max-width:640px) {
  .lineup-warp {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .lineup-txt b {
    font-size: 118.8%;
  }
}
.lineupBox_head {
  background-color: #4fbbe5;
  color: #fff;
  font-weight: bold;
  line-height: 1.6;
  padding: 0.75rem 1rem;
}
.lineupBox_body, .lineupBox_cols {
  background-color: #fff;
}
@media print, screen and (min-width:641px) {
  .lineupBox_head {
    margin-top: 30px;
    font-size: 125%;
  }
  .lineupBox_body {
    padding: 1.5rem;
  }
}
@media screen and (max-width:640px) {
  .lineupBox_head {
    margin-top: 1rem;
  }
  .lineupBox_body {
    padding: 1.25rem;
  }
}
.lineupBox_body .photo {
  width: 200px;
  display: block;
  float: left;
  text-align: center;
  margin-right: 1.5rem;
}
.lineupBox_body .price {
  color: #ea282d;
  font-size: 118.8%;
  vertical-align: middle;
  margin-right: 0.75rem;
}
.lineupBox_body .priceS,
.lineupBox_body .priceS2 {
  display: inline-block;
  line-height: 1;
  padding: 0.35rem;
  font-size: 87.5%;
  vertical-align: middle;
}
.lineupBox_body .priceS {
  background-color: #fbe681;
}
.lineupBox_body .priceS2 {
  background-color: #f59e2e;
  color: #fff;
}
.lineupBox_body .priceS:not(:last-of-type),
.lineupBox_body .priceS2:not(:last-of-type) {
  margin-right: 0.5rem;
}
.lineupBox_body p.come {
  box-sizing: border-box;
  padding-top: 0.5rem;
  font-size: 93.8%;
}
.lineupBox_body .advance-color {
  margin: 1.25rem 0 0.5rem 0;
}
@media print, screen and (min-width:641px) {
  .lineupBox_body p.come {
    padding-left: 1.5rem;
    margin-left: 200px;
  }
}
@media screen and (max-width:640px) {
  .lineupBox_body {
    padding-top: 2rem;
  }
  .lineupBox_body .photo {
    width: 35%;
  }
  .lineupBox_body .photo img {
    max-width: 140px;
  }
  .lineupBox_body p.come {
    clear: both;
    padding-top: 1rem;
  }
  .lineupBox_body .priceS,
  .lineupBox_body .priceS2 {
    margin-top: 0.5rem;
  }
  .price-multiple-box {
    width: calc(65% - 1.5rem);
    display: inline-block;
  }
}

/* 便利アイテム /-------------------------------------------------------------------- */
.lineupBox_cols {
  padding: 1.5rem 0.75rem;
  display: flex;
  flex-wrap: wrap;
}
.lineupBox_cols .col {
  width: 50%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.lineupBox_cols .col:nth-of-type(n+3) {
  margin-top: 2rem;
}
.lineupBox_cols .col .photo {
  display: block;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid #d2d6d9;
  margin-bottom: 0.75rem;
}
.lineupBox_cols .col p.come {
  font-size: 93.8%;
  line-height: 1.6;
  padding-bottom: 0.25rem;
  padding-top: 0.25rem;
}
.lineupBox_cols .col .itemmei {
  color: #38a4ce;
  line-height: 1.5;
  display: inline-block;
}
.lineupBox_cols .col .price {
  color: #ea282d;
  line-height: 1.5;
  display: block;
  margin-top: auto;
}
@media screen and (max-width:640px) {
  .lineupBox_cols {
    padding: 1.25rem 0.75rem;
  }
  .lineupBox_cols .col {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
@media screen and (max-width:600px) {
  .lineupBox_cols.responBlock {
    width: 600px;
  }
}

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

  サービス詳細
  
----------------------------------------------------------------------------------------------------*/
.svPhoto {
  display: flex;
  column-gap: 1rem;
}
@media print, screen and (min-width:641px) {
  .svPhoto {
    padding-bottom: 60px;
  }
}
@media screen and (max-width:640px) {
  .svPhoto {
    padding-bottom: 2rem;
  }
}

.svDetail {
  text-align: left;
}
@media print, screen and (min-width:641px) {
  .svDetail {
    padding-bottom: 60px;
  }
}
@media screen and (max-width:640px) {
  .svDetail {
    margin-top: -0.5rem;
    padding-bottom: 2rem;
  }
}
.svDetail_Tbl th, .svDetail_Tbl td {
  box-sizing: border-box;
}
.svDetail_Tbl tr:first-child th, .svDetail_Tbl tr:first-child td {
  border-top: 0;
}
.svDetail_Tbl th {
  background-color: #4fbbe5;
  color: #fff;
  line-height: 1.4;
}
.svDetail_Tbl td {
  line-height: 1.6;
}
.svDetail_Tbl .area {
  display: inline-block;
  margin-bottom: 0.25rem;
}
@media print, screen and (min-width:641px) {
  .svDetail_Tbl {
    border: 2px solid #4fbbe5;
  }
  .svDetail_Tbl th, .svDetail_Tbl td {
    border-top: 1px solid #95d6ef;
    padding: 1rem;
  }
  .svDetail_Tbl th {
    width: 25%;
    font-size: 112.5%;
    text-align: center;
    vertical-align: top;
  }
}
@media screen and (max-width:640px) {
  .svDetail_Tbl th, .svDetail_Tbl td {
    display: block;
    width: 100%;
    padding: 1rem;
  }
  .svDetail_Tbl th {
    font-size: 106.3%;
    text-align: left;
    padding: 0.75rem 1rem;
  }
  .svDetail_Tbl td {
    border-left: 1px solid #4fbbe5;
    border-right: 1px solid #4fbbe5;
    border-bottom: 1px solid #4fbbe5;
  }
  .svDetail_Tbl tr:before {
    content: "";
    display: block;
    background-color: #fff;
    height: 1rem;
  }
  .svDetail_Tbl tr:first-child:before {
    display: none;
  }
}
.svDetail_inquiry {
  margin-left: -0.75rem;
  padding-bottom: 1rem;
}
.svDetail_inquiry dl {
  background-color: #e4f7fe;
  width: 50%;
  float: left;
  box-sizing: border-box;
  text-align: center;
  border-left: 0.75rem solid #fff;
  padding: 1.25rem;
}
.svDetail_inquiry dt {
  font-weight: bold;
}
.svDetail_inquiry dd {
  padding-top: 0.5rem;
}
.svDetail_inquiry dd ul {
  list-style: none;
  display: inline-block;
  text-align: left;
}
.svDetail_inquiry dd li {
  padding-top: 0.25rem;
}
.svDetail_inquiry dd li:first-child {
  padding-top: 0;
}
@media print, screen and (min-width:641px) {
  .svDetail_inquiry dd.tel {
    padding-top: 1rem;
  }
}
@media screen and (max-width:640px) {
  .svDetail_inquiry {
    margin-left: 0;
    padding-bottom: 0.25rem;
  }
  .svDetail_inquiry dl {
    width: 100%;
    float: none;
    border-left: 0;
    margin-bottom: 0.75rem;
  }
}

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

  お問い合わせ
  
----------------------------------------------------------------------------------------------------*/
.inquiry-warp {
  text-align: center;
}
@media print, screen and (min-width:641px) {
  .inquiry-warp {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
@media screen and (max-width:640px) {
  .inquiry-warp {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.inquiry-warp ul {
  list-style: none;
  letter-spacing: -0.5rem;
}
.inquiry-warp li {
  display: inline-block;
  letter-spacing: normal;
}
.inquiry:before {
  content: "";
  display: block;
  width: 100%;
  height: 25px;
  background: url(../image/inquiry-head.png) no-repeat center top;
  background-size: contain;
  margin-bottom: 1.75rem;
}
.inquiry li {
  margin-left: 1rem;
  margin-right: 1rem;
}
.inquiry-btn li {
  width: 50%;
}
.inquiry-btn li:first-child {
  text-align: left;
}
.inquiry-btn li:last-child {
  text-align: right;
}
@media print, screen and (min-width:641px) {
  .inquiry-btn {
    padding-top: 40px;
  }
}
@media screen and (max-width:640px) {
  .inquiry-warp .responBlock {
    width: 900px;
  }
  .inquiry-btn {
    padding-top: 2.5rem;
  }
}
.reference-p {
  margin-left: 215px !important;
  text-indent: -1em;
}
@media screen and (max-width:640px) {
  .reference-p {
    margin-left: 1.25rem !important;
    text-indent: -1em;
  }
}

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

  備考
  
----------------------------------------------------------------------------------------------------*/
.nbBox {
  background-color: #f3f4f6;
  padding: 1.5rem;
}
.nbBox ul {
  margin-left: 1.25rem;
}
.nbBox li:not(:first-child) {
  padding-top: 0.25rem;
}
@media print, screen and (min-width:641px) {
  .nbBox {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}
@media screen and (max-width:640px) {
  .nbBox {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
  }
}