/* ========================================================================================= ^^
  Key visual for plan
============================================================================================ ^^ */
.c-key-visual {
  background: url(../images/plan/kv.jpg) no-repeat 50% 100%/cover;
}

/* ========================================================================================= ^^
  Planning
============================================================================================ ^^ */
#container .p-planning {
  padding: calc(64 * var(--min-ratio)) calc(10 * var(--min-ratio)) calc(80 * var(--min-ratio));
  background: linear-gradient(90deg, rgb(217, 215, 204) 0%, rgb(222, 220, 211) 2.93%, rgb(231, 229, 222) 10.96%, rgb(236, 234, 229) 22.25%, rgb(237, 235, 231) 53.62%, rgb(236, 233, 229) 80.01%, rgb(231, 228, 222) 89.52%, rgb(224, 219, 211) 96.27%, rgb(217, 210, 200) 100%);
}
@media (min-width: 768px) {
  #container .p-planning {
    padding: calc(128 * var(--max-ratio)) calc(10 * var(--max-ratio)) calc(158 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-planning {
    padding: calc(128 * var(--rem-ratio)) calc(10 * var(--rem-ratio)) calc(158 * var(--rem-ratio));
  }
}
#container .p-planning .c-title {
  margin-bottom: calc(31 * var(--min-ratio));
  font-family: var(--font-shippori);
  font-size: clamp(1.25rem, 1.047rem + 0.86vw, 1.75rem);
  color: #333;
  line-height: 1.7857142857;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-align: center;
}
#container .p-planning .c-title .small {
  font-size: clamp(0.813rem, 0.66rem + 0.65vw, 1.188rem);
}
@media (min-width: 768px) {
  #container .p-planning .c-title {
    margin-bottom: calc(31 * var(--max-ratio));
  }
  #container .p-planning .c-title .small {
    font-size: clamp(0.813rem, 0.271rem + 1.13vw, 1.188rem);
  }
}
@media (min-width: 1300px) {
  #container .p-planning .c-title {
    margin-bottom: calc(31 * var(--rem-ratio));
  }
}
#container .p-planning .c-text {
  margin-bottom: calc(43 * var(--min-ratio));
  font-size: clamp(0.875rem, 0.824rem + 0.22vw, 1rem);
  color: #333;
  line-height: 2.5;
  letter-spacing: 0.08em;
  text-align: center;
}
#container .p-planning .c-text .small {
  font-size: clamp(0.688rem, 0.637rem + 0.22vw, 0.813rem);
}
@media (min-width: 768px) {
  #container .p-planning .c-text {
    margin-bottom: calc(85 * var(--max-ratio));
  }
  #container .p-planning .c-text .small {
    font-size: clamp(0.688rem, 0.507rem + 0.38vw, 0.813rem);
  }
}
@media (min-width: 1300px) {
  #container .p-planning .c-text {
    margin-bottom: calc(85 * var(--rem-ratio));
  }
}
#container .p-planning .c-text em {
  font-size: clamp(0.813rem, 0.686rem + 0.54vw, 1.125rem);
  color: #754c24;
  font-weight: bold;
}
#container .p-planning .c-grid {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  grid-template-columns: 100%;
  row-gap: calc(40 * var(--min-ratio));
}
@media (min-width: 768px) {
  #container .p-planning .c-grid {
    grid-template-columns: repeat(2, 48.6607142857%);
    -moz-column-gap: 2.6785714286%;
    column-gap: 2.6785714286%;
    row-gap: unset;
  }
}
#container .p-planning .c-grid > .c-content {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
#container .p-planning .c-tab-menu__item {
  height: calc(143 * var(--min-ratio));
  filter: drop-shadow(0 3px 15px rgba(133, 124, 118, 0.48));
}
@media (min-width: 768px) {
  #container .p-planning .c-tab-menu__item {
    height: calc(143 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-planning .c-tab-menu__item {
    height: calc(143 * var(--rem-ratio));
  }
}
#container .p-planning .c-tab-menu__item.is-active .c-name {
  background-color: #a79159;
}
#container .p-planning .c-tab-menu__link.is-active .c-num {
  color: #a79159;
}
#container .p-planning .c-tab-menu__item.is-active .c-content {
  color: #754c24;
  font-weight: 700;
}
#container .p-planning .c-tab-menu__link,
#container .p-planning .c-tab-menu__inner {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 24.2201834862% 1fr;
}
#container .p-planning .c-tab-menu__link .c-name,
#container .p-planning .c-tab-menu__inner .c-name {
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  background-color: #685e59;
  font-size: clamp(0.813rem, 0.686rem + 0.54vw, 1.125rem);
  color: #fff;
  line-height: 1.4444444444;
  letter-spacing: 0.08em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: calc(5 * var(--min-ratio));
}
#container .p-planning .c-tab-menu__link .c-name--small,
#container .p-planning .c-tab-menu__inner .c-name--small {
  font-size: clamp(0.625rem, 0.524rem + 0.43vw, 0.875rem);
  line-height: 1.8571428571;
}
#container .p-planning .c-tab-menu__link .c-num,
#container .p-planning .c-tab-menu__inner .c-num {
  width: calc(18 * var(--min-ratio));
  height: calc(18 * var(--min-ratio));
  padding-bottom: calc(2 * var(--min-ratio));
  margin: 0;
  border-radius: calc(infinity * 1px);
  background-color: #fff;
  font-size: clamp(0.625rem, 0.524rem + 0.43vw, 0.875rem);
  color: #685e59;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  #container .p-planning .c-tab-menu__link .c-name,
  #container .p-planning .c-tab-menu__inner .c-name {
    row-gap: calc(5 * var(--max-ratio));
  }
  #container .p-planning .c-tab-menu__link .c-num,
  #container .p-planning .c-tab-menu__inner .c-num {
    width: calc(18 * var(--max-ratio));
    height: calc(18 * var(--max-ratio));
    padding-bottom: calc(2 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-planning .c-tab-menu__link .c-name,
  #container .p-planning .c-tab-menu__inner .c-name {
    row-gap: calc(5 * var(--rem-ratio));
  }
  #container .p-planning .c-tab-menu__link .c-num,
  #container .p-planning .c-tab-menu__inner .c-num {
    width: calc(18 * var(--rem-ratio));
    height: calc(18 * var(--rem-ratio));
    padding-bottom: calc(2 * var(--rem-ratio));
  }
}

#container .p-planning .c-tab-menu__link .c-content,
#container .p-planning .c-tab-menu__inner .c-content {
  width: 100%;
  height: 100%;
  padding: calc(10 * var(--min-ratio)) calc(20 * var(--min-ratio)) calc(10 * var(--min-ratio)) calc(30 * var(--min-ratio));
  background-color: #fff;
  font-size: clamp(0.625rem, 0.524rem + 0.43vw, 0.875rem);
  color: #000;
  list-style: 1.5714285714;
  letter-spacing: 0.08em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  filter: drop-shadow(0 3px 15px rgba(133, 124, 118, 0.48));
}
@media (min-width: 768px) {
  #container .p-planning .c-tab-menu__link .c-content,
  #container .p-planning .c-tab-menu__inner .c-content {
    padding: calc(10 * var(--max-ratio)) calc(20 * var(--max-ratio)) calc(10 * var(--max-ratio)) calc(30 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-planning .c-tab-menu__link .c-content,
  #container .p-planning .c-tab-menu__inner .c-content {
    padding: calc(10 * var(--rem-ratio)) calc(20 * var(--rem-ratio)) calc(10 * var(--rem-ratio)) calc(30 * var(--rem-ratio));
  }
}
#container .p-planning .c-tab-menu__link .c-content p:last-of-type,
#container .p-planning .c-tab-menu__inner .c-content p:last-of-type {
  margin-bottom: 0;
}
#container .p-planning .c-tab-menu__link .c-content .small,
#container .p-planning .c-tab-menu__inner .c-content .small {
  font-size: clamp(0.688rem, 0.688rem + 0vw, 0.688rem);
  line-height: 2;
}
#container .p-planning .c-tab-menu__link:hover .c-name {
  background-color: #a79159;
}
#container .p-planning .c-tab-menu__link:hover .c-num {
  color: #a79159;
}
#container .p-planning .c-tab-menu__link:hover .c-content {
  color: #754c24;
  font-weight: 700;
}
#container .p-planning .p-plan-panel {
  padding: calc(31 * var(--min-ratio)) calc(38 * var(--min-ratio));
}
@media (min-width: 768px) {
  #container .p-planning .p-plan-panel {
    padding: calc(31 * var(--max-ratio)) calc(38 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-planning .p-plan-panel {
    padding: calc(31 * var(--rem-ratio)) calc(40 * var(--rem-ratio));
  }
}

/* ========================================================================================= ^^
  comment
============================================================================================ ^^ */
#container .p-view {
  padding: calc(70 * var(--min-ratio)) calc(10 * var(--min-ratio)) 0;
  background-color: #fff;
}
@media (min-width: 768px) {
  #container .p-view {
    padding: calc(140 * var(--max-ratio)) calc(10 * var(--max-ratio)) 0;
  }
}
@media (min-width: 1300px) {
  #container .p-view {
    padding: calc(140 * var(--rem-ratio)) calc(10 * var(--rem-ratio)) 0;
  }
}
#container .p-view .c-title {
  margin-bottom: calc(31 * var(--min-ratio));
  font-family: var(--font-shippori);
  font-size: clamp(1.25rem, 1.047rem + 0.86vw, 1.75rem);
  color: #333;
  line-height: 1.7857142857;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-align: center;
}
@media (min-width: 768px) {
  #container .p-view .c-title {
    margin-bottom: calc(62 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-view .c-title {
    margin-bottom: calc(62 * var(--rem-ratio));
  }
}
#container .p-view .c-text {
  margin-bottom: calc(43 * var(--min-ratio));
  font-size: clamp(0.875rem, 0.824rem + 0.22vw, 1rem);
  color: #333;
  line-height: 2.5;
  letter-spacing: 0.08em;
  text-align: center;
}
@media (min-width: 768px) {
  #container .p-view .c-text {
    margin-bottom: calc(85 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-view .c-text {
    margin-bottom: calc(85 * var(--rem-ratio));
  }
}
#container .p-view .c-image {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
}

/* ========================================================================================= ^^
  Room plan
============================================================================================ ^^ */
#container .p-room-plan {
  padding: calc(53 * var(--min-ratio)) calc(10 * var(--min-ratio)) calc(35 * var(--min-ratio));
}
@media (min-width: 768px) {
  #container .p-room-plan {
    padding: calc(106 * var(--max-ratio)) calc(10 * var(--max-ratio)) calc(70 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-room-plan {
    padding: calc(106 * var(--rem-ratio)) calc(10 * var(--rem-ratio)) calc(70 * var(--rem-ratio));
  }
}
#container .p-room-plan .c-title {
  margin-bottom: calc(33 * var(--min-ratio));
  font-family: var(--font-shippori);
  font-size: clamp(1.25rem, 1.047rem + 0.86vw, 1.75rem);
  color: #333;
  line-height: 1.7857142857;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-align: center;
}
@media (min-width: 768px) {
  #container .p-room-plan .c-title {
    margin-bottom: calc(33 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-room-plan .c-title {
    margin-bottom: calc(33 * var(--rem-ratio));
  }
}
#container .p-room-plan .c-text {
  margin-bottom: calc(47 * var(--min-ratio));
  font-size: clamp(0.875rem, 0.824rem + 0.22vw, 1rem);
  color: #333;
  line-height: 2.5;
  letter-spacing: 0.08em;
  text-align: center;
}
@media (min-width: 768px) {
  #container .p-room-plan .c-text {
    margin-bottom: calc(94 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-room-plan .c-text {
    margin-bottom: calc(94 * var(--rem-ratio));
  }
}
#container .p-room-plan .c-grid {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto calc(40 * var(--min-ratio));
  row-gap: calc(30 * var(--min-ratio));
}
@media (min-width: 768px) {
  #container .p-room-plan .c-grid {
    margin-bottom: calc(83 * var(--max-ratio));
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: 2.5%;
    column-gap: 2.5%;
    row-gap: calc(30 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-room-plan .c-grid {
    margin-bottom: calc(83 * var(--rem-ratio));
    row-gap: calc(30 * var(--rem-ratio));
  }
}
#container .p-room-plan .c-grid + p {
  margin-bottom: calc(52 * var(--min-ratio));
  font-size: clamp(0.875rem, 0.723rem + 0.65vw, 1.25rem);
  color: #000;
  line-height: 1.5;
  letter-spacing: 0.081em;
  text-align: center;
}
@media (min-width: 768px) {
  #container .p-room-plan .c-grid + p {
    margin-bottom: calc(52 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-room-plan .c-grid + p {
    margin-bottom: calc(52 * var(--rem-ratio));
  }
}
#container .p-room-plan .c-plan-box {
  filter: drop-shadow(0 3px 15px rgba(133, 124, 118, 0.48));
}
#container .c-entry-banner {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}
#container .c-entry-banner__link {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}
#container .c-entry-banner__link .c-image-note {
  position: absolute;
  right: 0;
  bottom: 0;
}

/* ========================================================================================= ^^
  Plan note
============================================================================================ ^^ */
#container .p-plan-note {
  padding: calc(44 * var(--min-ratio)) calc(10 * var(--min-ratio)) calc(40 * var(--min-ratio));
  font-size: clamp(0.75rem, 0.75rem + 0vw, 0.75rem);
  line-height: 2;
  letter-spacing: 0.06em;
}
@media (min-width: 768px) {
  #container .p-plan-note {
    padding: calc(44 * var(--max-ratio)) calc(10 * var(--max-ratio)) calc(80 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-plan-note {
    padding: calc(44 * var(--rem-ratio)) calc(10 * var(--rem-ratio)) calc(80 * var(--rem-ratio));
  }
}
#container .p-plan-note .c-inner {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}
#container .p-plan-note p:last-of-type {
  margin-bottom: 0;
}

/* ========================================================================================= ^^
  Plan popup
============================================================================================ ^^ */
#container .p-sp-plan .c-image {
  position: relative;
}
#container .p-sp-plan .c-image .c-popup {
  width: 90%;
  border-radius: 5px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 15px rgba(133, 124, 118, 0.48));
  overflow: hidden;
  display: none;
}
#container .p-sp-plan .c-image .c-popup.is-show {
  display: block;
}
#container .p-sp-plan .c-image .c-popup .c-name {
  padding: calc(10 * var(--min-ratio));
  background-color: #685e59;
  font-size: clamp(0.813rem, 0.686rem + 0.54vw, 1.125rem);
  color: #fff;
  line-height: 1.4444444444;
  letter-spacing: 0.08em;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: calc(5 * var(--min-ratio));
  display: flex;
  justify-content: center;
  align-items: center;
}
#container .p-sp-plan .c-image .c-popup p.c-num {
  width: calc(18 * var(--min-ratio));
  height: calc(18 * var(--min-ratio));
  padding-bottom: calc(2 * var(--min-ratio));
  margin: 0;
  border-radius: calc(infinity * 1px);
  background-color: #fff;
  font-size: clamp(0.625rem, 0.524rem + 0.43vw, 0.875rem);
  color: #685e59;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
#container .p-sp-plan .c-image .c-popup .c-content {
  padding: calc(10 * var(--min-ratio));
  background-color: #fff;
  font-size: clamp(0.625rem, 0.524rem + 0.43vw, 0.875rem);
  color: #000;
  list-style: 1.5714285714;
  letter-spacing: 0.08em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
#container .p-sp-plan .c-image .c-popup-button {
  height: calc(24 * var(--min-ratio));
  padding: 0 calc(10 * var(--min-ratio));
  border: 1px solid #000;
  border-radius: calc(12 * var(--min-ratio));
  font-size: clamp(0.625rem, 0.524rem + 0.43vw, 0.875rem);
}

/* ========================================================================================= ^^
  Plan
============================================================================================ ^^ */