@charset "UTF-8";

#living .page-head {
  position: relative;
  flex-direction: column-reverse;
  height: auto;
  background-image: none;
  background-image: linear-gradient(0deg, #fcf6e1, #f9d4d8 32%);
}
.page-head__lead {
  position: relative;
  padding: 35px 0 18px;
  width: 100%;
  background: #61c1be;
  text-align: center;
  color: #fff;
}
.page-head__lead::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 0;
  display: block;
  width: 100%;
  height: 15px;
  background: url(../assets/images/livingroom/wavy_line.svg) center top;
  background-size: 303px 15px;
  background-repeat: repeat-x;
}
.page-head__title {
  --size-value: calc(1440 / 100);
  margin-inline: auto;
  padding-top: 68px;
  width: min(calc(870vw / var(--size-value)), 960px);
}
#fanheater {
  padding-top: 40px;
}
.living-list .model-image__caption.-differ {
  position: absolute;
  top: 93px;
  left: -14px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #f88a6a;
  line-height: 1.2;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
}
.gasvalve__discount {
  line-height: 1.65;
}
.gasvalve__notes {
  margin-top: .2em;
  line-height: 1.6;
  text-align: center;
  font-size: 1.8rem;  
}
.replacecost {
  margin-top: 70px;
  text-align: center;
}
.replacecost__head {
  display: inline-block;
  padding: 1.15em 1.5em;
  border-top: solid 2px var(--base-color);
  border-bottom: solid 2px var(--base-color);
  text-align: center;
  line-height: 1;
  --max-size: 22;
  --min-size: 17;
  font-size: var(--clamp-size);
  font-weight: 700;
  color: var(--base-color);
}
.replacecost__notes {
  margin: 26px 0 25px 1em;
  text-align: center;
}
.replacecost__body {
  grid-template-columns: 295px 1fr;
  gap: 10px;
}
.conditions {
  flex-direction: column;
  padding: 38px;
  background: #eaf6fb;
  text-align: justify;
  line-height: 1.6;
  color: var(--base-color);
}
.conditions__title {
  display: block;
  margin-bottom: .75em;
  padding: .25em 2em;
  border-radius: 9999px;
  background: var(--accent-color);
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
}
.simulation {
  padding: 38px 48px;
  background: #f5f5f5;
}
.simulation__summary {
  width: 100%;
}
.simulation__item {
  position: relative;
  padding: 2px 0;
  line-height: 1.6;
}
.simulation__item.price-down {
  padding-top: 5px;
}
.simulation__item::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  width: 100%;
  border-bottom: dashed 1px #888;
  z-index: 1;
}
.simulation__item__name {
  position: relative;
  padding-right: 16px;
  background: #f5f5f5;
  text-align: left;
  font-size: 1.7rem;
  z-index: 2;
}
.simulation__item__cost {
  margin: 0;
  padding-left: 19px;
  background: #f5f5f5;
  text-align: right;
  font-size: 1.4rem;
  z-index: 2;
}
.simulation__item__cost .price {
  font-size: 2.2rem;
}
.simulation__item__cost .yen {
  font-size: 1.6rem;
}
.simulation__result {
  margin-top: 5px;
  text-align: right;
  line-height: 1;
  font-size: 1.5rem;
  font-weight: 700;
}
.simulation__result .total {
  font-size: 1.7rem;
}
.simulation__result .price {
  margin-left: 12px;
  font-size: 2.8rem;
}
.simulation__result .yen {
  font-size: 1.8rem;
}
.campaign-price {
  color: var(--price-color);
}
.campaign-period {
  display: block;
  font-size: 1.5rem;
}
@media screen and (max-width: 1279px) {
  .page-head__title {
    width: 85%;
  }
  .page-head__lead {
    padding-left: var(--whole-padding-sp);
    padding-right: var(--whole-padding-sp);
  }
  @media screen and (max-width: 1132px) {
    .replacecost__body {
      grid-template-rows: auto auto;
      grid-template-columns: 1fr;
    }
    .simulation {
      padding-left: 40px;
      padding-right: 40px;
    }
  }
  @media screen and (max-width: 1023px) {
    .page-head__title {
      padding-top: 55px;
      width: 100%;
    }
    .page-head__lead {
      padding-top: 30px;
      padding-bottom: 10px;
    }
    #fanheater {
      padding-top: 22px;
    }
    .living-list .model-image__caption.-differ {
      left: -7.35vw;
    }
  }
}
@media screen and (max-width: 743px) {
  .page-head__title {
    --size-value-sp: calc(375 / 100);
    padding-top: calc(28vw / var(--size-value-sp));
  }
  .page-head__lead {
    --size-value-sp: calc(375 / 100);
    padding-top: calc(18vw / var(--size-value-sp));
    padding-bottom: calc(13vw / var(--size-value-sp));
  }
  .page-head__lead::after {
    bottom: -10px;
    height: 10px;
    background-size: 202px 10px;
  }
  .page-head__lead img {
    width: 100%;
    max-width: 420px;
  }
  #fanheater {
    --size-value-sp: calc(375 / 100);
    padding-top: calc(14vw / var(--size-value-sp));
  }
  .living-list .model-image__caption.-differ {
    top: 79px;
    left: -12px;
    width: 70px;
    height: 70px;
    font-size: 1.4rem;
  }
	.gasvalve__notes {
    font-size: 1.5rem;
  }
  .replacecost {
    margin-top: 36px;
  }
  .replacecost__head {
    padding: .9em 1em;
  }
  .replacecost__notes {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: justify;
  }
  .conditions, .simulation {
    padding: 25px 20px;
  }
  .conditions__title {
    font-size: 1.6rem;
  }
  .simulation__item__name, .simulation__item__cost .yen {
    font-size: 1.5rem;
  }
  .simulation__item__cost {
    line-height: 1.1;
    font-size: 1.3rem;
  }
  .simulation__item__cost .price {
    font-size: 1.9rem;
  }
  .campaign-period {
    font-size: 1.4rem;
  }
  .simulation__result .total {
    font-size: 1.6rem;
  }
  .simulation__result .price {
    margin-left: 10px;
    font-size: 2.4rem;
  }
  .simulation__result .yen {
    font-size: 1.7rem;
  }
  @media screen and (max-width: 599px) {
    .simulation__item {
      flex-direction: column;
      align-items: flex-start;
      padding: 0 0 12px 0;
      border-bottom: dashed 1px #888;
      line-height: 1.5;
    }
    .simulation__item + div, .simulation__item.price-down {
      padding-top: 10px;
    }
    .simulation__item::after {
      content: none;
    }
    .simulation__item__name, .simulation__item__cost .yen {
      padding: 0;
    }
    .simulation__item__cost {
      padding: 3px 0 0 0;
    }
    .simulation__result {
      margin-top: 14px;
    }
    .campaign-price {
      text-align: left;
    } 
  }
}