/* ========================================================================================= ^^
  Plan detail
============================================================================================ ^^ */
#container .c-plan-detail {
  max-width: 1120px;
  width: 100%;
  padding: calc(60 * var(--min-ratio)) calc(30 * var(--min-ratio));
  margin: calc(40 * var(--min-ratio)) auto calc(70 * var(--min-ratio));
  background-color: rgba(255, 255, 255, 0.9);
  position: relative;
}
@media (min-width: 768px) {
  #container .c-plan-detail {
    padding: calc(60 * var(--max-ratio)) calc(60 * var(--max-ratio));
    margin-top: calc(75 * var(--max-ratio));
    margin-bottom: calc(140 * var(--max-ratio));
  }
}
@media (min-width: 1320px) {
  #container .c-plan-detail {
    padding: calc(140 * var(--rem-ratio)) calc(60 * var(--rem-ratio)) calc(60 * var(--rem-ratio));
    margin-top: calc(75 * var(--rem-ratio));
    margin-bottom: calc(140 * var(--rem-ratio));
  }
}
#container .c-plan-detail__header {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto calc(16 * var(--min-ratio));
  font-family: var(--font-cinzel);
  color: #685e59;
}
@media (min-width: 768px) {
  #container .c-plan-detail__header {
    margin-bottom: calc(16 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .c-plan-detail__header {
    margin-bottom: calc(16 * var(--rem-ratio));
  }
}
#container .c-plan-detail__header hr {
  width: 100%;
  margin-top: calc(9 * var(--min-ratio));
  margin-bottom: calc(24 * var(--min-ratio));
  border: none;
  border-top: 1px solid #666;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
@media (min-width: 768px) {
  #container .c-plan-detail__header hr {
    margin-top: calc(9 * var(--max-ratio));
    margin-bottom: calc(24 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .c-plan-detail__header hr {
    margin-top: calc(9 * var(--rem-ratio));
    margin-bottom: calc(24 * var(--rem-ratio));
  }
}
#container .c-plan-detail__title {
  padding: 0 calc(15 * var(--min-ratio));
  font-size: clamp(1.696rem, 1.401rem + 1.26vw, 2.423rem);
  line-height: 1;
  letter-spacing: 0.08em;
  font-weight: 400;
}
@media (min-width: 768px) {
  #container .c-plan-detail__title {
    padding: 0 calc(15 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .c-plan-detail__title {
    padding: 0 calc(15 * var(--rem-ratio));
  }
}
#container .c-plan-detail__title span {
  font-size: clamp(2.924rem, 2.416rem + 2.17vw, 4.177rem);
  letter-spacing: 0.14em;
}
#container .c-plan-detail .c-grid {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto calc(80 * var(--min-ratio));
  grid-template-columns: 100%;
}
@media (min-width: 768px) {
  #container .c-plan-detail .c-grid {
    margin-bottom: calc(175 * var(--max-ratio));
    grid-template-columns: 47.2% 52%;
    -moz-column-gap: 0.8008008008%;
    column-gap: 0.8008008008%;
  }
}
@media (min-width: 1300px) {
  #container .c-plan-detail .c-grid {
    margin-bottom: calc(175 * var(--rem-ratio));
  }
}
#container .c-plan-detail__plan {
  padding: 0 calc(15 * var(--min-ratio));
  margin-bottom: 0;
  font-size: clamp(1.224rem, 1.011rem + 0.91vw, 1.749rem);
  line-height: 1.5;
  letter-spacing: 0.06em;
}
@media (min-width: 768px) {
  #container .c-plan-detail__plan {
    padding: 0 calc(35 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .c-plan-detail__plan {
    padding: 0 calc(35 * var(--rem-ratio));
  }
}
@media (min-width: 768px) {
  #container .c-plan-detail__contents {
    padding-left: calc(35 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .c-plan-detail__contents {
    padding-left: calc(35 * var(--rem-ratio));
  }
}
#container .c-plan-detail__detail {
  font-size: clamp(0.875rem, 0.875rem + 0vw, 0.875rem);
  line-height: 2;
  letter-spacing: 0.08em;
}
#container .c-plan-detail__detail p:last-of-type {
  margin-bottom: 0;
}
#container .c-plan-detail__detail p .small {
  font-size: clamp(0.813rem, 0.813rem + 0vw, 0.813rem);
}
#container .c-plan-detail__features {
  width: 100%;
  margin-top: calc(45 * var(--min-ratio));
  display: grid;
  grid-template-columns: 100%;
  row-gap: calc(20 * var(--min-ratio));
}
@media (min-width: 768px) {
  #container .c-plan-detail__features {
    max-width: 360px;
    margin-top: calc(90 * var(--max-ratio));
    row-gap: calc(20 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .c-plan-detail__features {
    margin-top: calc(90 * var(--rem-ratio));
    row-gap: calc(20 * var(--rem-ratio));
  }
}
#container .c-plan-detail__features li {
  width: 100%;
  min-height: calc(50 * var(--min-ratio));
  padding: calc(8 * var(--min-ratio)) calc(10 * var(--min-ratio)) calc(8 * var(--min-ratio)) calc(23 * var(--min-ratio));
  background-color: #c5b097;
  font-size: clamp(0.875rem, 0.875rem + 0vw, 0.875rem);
  line-height: 1.5714285714;
  letter-spacing: 0.08em;
  text-indent: -0.9em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
@media (min-width: 768px) {
  #container .c-plan-detail__features li {
    min-height: calc(50 * var(--max-ratio));
    padding: calc(8 * var(--max-ratio)) calc(10 * var(--max-ratio)) calc(8 * var(--max-ratio)) calc(23 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .c-plan-detail__features li {
    min-height: calc(50 * var(--rem-ratio));
    padding: calc(8 * var(--rem-ratio)) calc(10 * var(--rem-ratio)) calc(8 * var(--rem-ratio)) calc(23 * var(--rem-ratio));
  }
}
#container .c-plan-detail__image {
  margin-top: calc(6 * var(--min-ratio));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#container .c-plan-detail__image figcaption {
  padding-top: calc(15 * var(--min-ratio));
  font-size: calc(12 * var(--min-ratio));
}
#container .c-plan-detail__image figcaption span {
  width: calc(44.75 * var(--min-ratio));
  height: calc(13 * var(--min-ratio));
  margin-left: 0.4em;
  background: url(../images/plan-detail/floorheating.jpg) no-repeat 0 0 / cover;
  display: inline-block;
  vertical-align: calc(-1 * var(--min-ratio));
}
@media (min-width: 768px) {
  #container .c-plan-detail__image {
    margin-top: calc(6 * var(--max-ratio));
  }
  #container .c-plan-detail__image figcaption {
    padding-top: calc(15 * var(--max-ratio));
    font-size: calc(12 * var(--max-ratio));
  }
  #container .c-plan-detail__image figcaption span {
    width: calc(89.5 * var(--max-ratio));
    height: calc(26 * var(--max-ratio));
    vertical-align: calc(-7 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .c-plan-detail__image {
    margin-top: calc(6 * var(--rem-ratio));
  }
  #container .c-plan-detail__image figcaption {
    padding-top: calc(15 * var(--rem-ratio));
    font-size: calc(12 * var(--rem-ratio));
  }
  #container .c-plan-detail__image figcaption span {
    width: calc(89.5 * var(--rem-ratio));
    height: calc(26 * var(--rem-ratio));
    vertical-align: calc(-7 * var(--rem-ratio));
  }
}
#container .c-plan-detail__image img {
  width: 100%;
  margin: 0 auto;
}
/* @media (min-width: 768px) {
  #container .c-plan-detail__image.type-a img {
    width: calc(339 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .c-plan-detail__image.type-a img {
    width: calc(339 * var(--rem-ratio));
  }
}
@media (min-width: 768px) {
  #container .c-plan-detail__image.type-e img {
    width: calc(367 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .c-plan-detail__image.type-e img {
    width: calc(367 * var(--rem-ratio));
  }
}
@media (min-width: 768px) {
  #container .c-plan-detail__image.type-k2 img {
    width: calc(521 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .c-plan-detail__image.type-k2 img {
    width: calc(521 * var(--rem-ratio));
  }
} */
#container .c-plan-detail .c-button {
  width: 100%;
  height: calc(50 * var(--min-ratio));
  margin: 0 auto;
}
@media (min-width: 768px) {
  #container .c-plan-detail .c-button {
    width: calc(250 * var(--max-ratio));
    height: calc(50 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .c-plan-detail .c-button {
    width: calc(250 * var(--rem-ratio));
    height: calc(50 * var(--rem-ratio));
  }
}
#container .c-plan-detail .c-button__link {
  font-size: clamp(0.688rem, 0.586rem + 0.43vw, 0.938rem);
}
#container .c-plan-detail__nav {
  width: calc(26 * var(--min-ratio));
  height: calc(30 * var(--min-ratio));
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
@media (min-width: 768px) {
  #container .c-plan-detail__nav {
    width: calc(26 * var(--max-ratio));
    height: calc(30 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .c-plan-detail__nav {
    width: calc(26 * var(--rem-ratio));
    height: calc(30 * var(--rem-ratio));
  }
}
#container .c-plan-detail__nav-link {
  width: 100%;
  height: 100%;
  background-color: #4d4d4d;
  display: block;
}
#container .c-plan-detail__nav-link[href="#"], #container .c-plan-detail__nav-link[href=""] {
  pointer-events: none;
  opacity: 0.5;
}
#container .c-plan-detail__nav--prev {
  left: 0;
}
@media (min-width: 768px) {
  #container .c-plan-detail__nav--prev {
    left: calc(30 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .c-plan-detail__nav--prev {
    left: calc(30 * var(--rem-ratio));
  }
}
#container .c-plan-detail__nav--prev .c-plan-detail__nav-link {
  -webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
  clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
}
#container .c-plan-detail__nav--next {
  right: 0;
}
@media (min-width: 768px) {
  #container .c-plan-detail__nav--next {
    right: calc(30 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .c-plan-detail__nav--next {
    right: calc(30 * var(--rem-ratio));
  }
}
#container .c-plan-detail__nav--next .c-plan-detail__nav-link {
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
  clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
}

/* ========================================================================================= ^^
  Plan detail
============================================================================================ ^^ */