@charset "UTF-8";

/* ========================================================================================= ^^
  MODELROOM page styles
============================================================================================ ^^ */

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

/* ========================================================================================= ^^
  Lead section
============================================================================================ ^^ */
.p-modelroom-lead {
  padding: calc(60 * var(--min-ratio)) calc(20 * var(--min-ratio));
  text-align: center;
}

@media (min-width: 768px) {
  .p-modelroom-lead {
    padding: calc(80 * var(--max-ratio)) 0;
  }
}

@media (min-width: 1300px) {
  .p-modelroom-lead {
    padding: calc(80 * var(--rem-ratio)) 0;
  }
}

#container .p-modelroom-lead__title {
  font-family: var(--font-shippori);
  font-size: clamp(1.25rem, 1.047rem + 0.86vw, 1.75rem);
  font-weight: 400;
  color: #333;
  margin-bottom: calc(40 * var(--min-ratio));
  line-height: 1.7857142857;
  letter-spacing: 0.08em;
  text-align: center;
}

@media (min-width: 768px) {
  #container .p-modelroom-lead__title {
    margin-bottom: calc(40 * var(--max-ratio));
  }
}

.p-modelroom-lead__text {
  font-family: var(--font-shippori);
  font-size: calc(12 * var(--min-ratio));
  color: #685d58;
  line-height: 2;
}

@media (min-width: 768px) {
  .p-modelroom-lead__text {
    font-size: clamp(0.75rem, 0.288rem + 0.96vw, 1rem);
  }
}

/* ========================================================================================= ^^
  Gallery / Carousel
============================================================================================ ^^ */
.p-modelroom-gallery {
  max-width: calc(var(--max-layout-width) * 1px);
  margin: 0 auto;
  padding: 0 calc(20 * var(--min-ratio)) calc(60 * var(--min-ratio));
  position: relative;
}

@media (min-width: 768px) {
  .p-modelroom-gallery {
    padding: 0 calc(30 * var(--max-ratio)) calc(80 * var(--max-ratio));
  }
}

@media (min-width: 1300px) {
  .p-modelroom-gallery {
    padding: 0 calc(30 * var(--rem-ratio)) calc(80 * var(--rem-ratio));
  }
}

/* Main slider */
.p-modelroom-gallery__main {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.p-modelroom-gallery__main .swiper-slide {
  position: relative;
  background-color: #ccc;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-modelroom-gallery__main .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gray placeholder for dummy images */
.p-modelroom-gallery__placeholder {
  width: 100%;
  height: 100%;
  background-color: #c8c8c8;
  display: block;
}

/* Caption */
.p-modelroom-gallery__caption {
  position: absolute;
  bottom: 0;
  right: 0;
  font-family: var(--font-shippori);
  font-size: calc(11 * var(--min-ratio));
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
  padding: calc(4 * var(--min-ratio)) calc(8 * var(--min-ratio));
  z-index: 10;
  pointer-events: none;
}

@media (min-width: 768px) {
  .p-modelroom-gallery__caption {
    bottom: calc(10 * var(--max-ratio));
    right: calc(10 * var(--max-ratio));
    font-size: clamp(0.625rem, 0.264rem + 0.75vw, 0.875rem);
    padding: calc(4 * var(--max-ratio)) calc(8 * var(--max-ratio));
  }
}

/* Navigation buttons */
.p-modelroom-gallery__main .swiper-button-prev,
.p-modelroom-gallery__main .swiper-button-next {
  color: #fff;
  width: calc(44 * var(--min-ratio));
  height: calc(44 * var(--min-ratio));
  background-color: rgba(104, 93, 88, 0.7);
  border-radius: 50%;
}

@media (min-width: 768px) {
  .p-modelroom-gallery__main .swiper-button-prev,
  .p-modelroom-gallery__main .swiper-button-next {
    width: calc(56 * var(--max-ratio));
    height: calc(56 * var(--max-ratio));
  }
}

.p-modelroom-gallery__main .swiper-button-prev::after,
.p-modelroom-gallery__main .swiper-button-next::after {
  font-size: calc(18 * var(--min-ratio));
}

@media (min-width: 768px) {
  .p-modelroom-gallery__main .swiper-button-prev::after,
  .p-modelroom-gallery__main .swiper-button-next::after {
    font-size: calc(20 * var(--max-ratio));
  }
}

/* Thumbnails */
.p-modelroom-gallery__thumbs {
  margin-top: calc(10 * var(--min-ratio));
  overflow: hidden;
}

@media (min-width: 768px) {
  .p-modelroom-gallery__thumbs {
    margin-top: calc(10 * var(--max-ratio));
  }
}

.p-modelroom-gallery__thumbs .swiper-slide {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s;
  background-color: #c8c8c8;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.p-modelroom-gallery__thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-modelroom-gallery__thumbs .swiper-slide-thumb-active {
  opacity: 1;
  outline: 3px solid #685d58;
  outline-offset: -1px;
}

/* ========================================================================================= ^^
  Notes
============================================================================================ ^^ */
.p-modelroom-note {
  max-width: calc(var(--max-layout-width) * 1px);
  margin: 0 auto;
  padding: calc(40 * var(--min-ratio)) calc(20 * var(--min-ratio)) calc(60 * var(--min-ratio));
}

@media (min-width: 768px) {
  .p-modelroom-note {
    padding: calc(40 * var(--max-ratio)) calc(30 * var(--max-ratio)) calc(80 * var(--max-ratio));
  }
}

@media (min-width: 1300px) {
  .p-modelroom-note {
    padding: calc(40 * var(--rem-ratio)) calc(30 * var(--rem-ratio)) calc(80 * var(--rem-ratio));
  }
}

.p-modelroom-note p {
  font-family: var(--font-noto-serif);
  font-size: calc(11 * var(--min-ratio));
  color: #000;
  line-height: 1.8;
  margin-bottom: calc(6 * var(--min-ratio));
}

@media (min-width: 768px) {
  .p-modelroom-note p {
    font-size: clamp(0.625rem, 0.264rem + 0.75vw, 0.8125rem);
    margin-bottom: calc(6 * var(--max-ratio));
  }
}

/* ========================================================================================= ^^
  Plan model room tags (PC override)
============================================================================================ ^^ */
@media (min-width: 768px) {
  #container .p-plan-model-room__content {
    grid-template-columns: 45% 40%;
    justify-content: center;
    margin-right: 5%;
  }
  /* tags: 全幅・1行目・3列グリッドでセンター配置 */
  #container .p-plan-model-room__tags {
    grid-column: 1 / -1;
    grid-row: 1;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    gap: calc(10 * var(--max-ratio));
    margin-top: 0;
    margin-bottom: calc(30 * var(--max-ratio));
  }
  #container .p-plan-model-room__tags li img {
    width: calc(250 * var(--max-ratio));
    height: auto;
  }
  /* 図面・写真を2行目に */
  #container .p-plan-model-room__floorplan {
    grid-column: 1;
    grid-row: 2;
    flex: 0 0 35%;
  }
  #container .p-plan-model-room__detail {
    grid-column: 2;
    grid-row: 2;
    margin-top: calc(40 * var(--max-ratio));
  }
  #container .p-plan-model-room__floorplan img {
    max-height: 900px;
    width: auto;
    margin: 0 auto;
  }
}

/* ========================================================================================= ^^
  Plan link button
============================================================================================ ^^ */
.p-plan-model-room__plan-btn {
  text-align: center;
  margin-top: calc(80 * var(--min-ratio));
}

.p-plan-model-room__plan-btn a {
  display: inline-block;
  font-family: var(--font-cinzel);
  font-size: calc(12 * var(--min-ratio));
  letter-spacing: 0.12em;
  color: #685e59;
  border: 1px solid #685e59;
  padding: calc(14 * var(--min-ratio)) calc(40 * var(--min-ratio));
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}

.p-plan-model-room__plan-btn a:hover {
  background-color: #685e59;
  color: #fff;
}

@media (min-width: 768px) {
  #container .p-plan-model-room__plan-btn {
    margin-top: calc(90 * var(--max-ratio));
    grid-column: 1 / -1;
  }

  .p-plan-model-room__plan-btn a {
    font-size: clamp(0.625rem, 0.264rem + 0.75vw, 0.875rem);
    padding: calc(16 * var(--max-ratio)) calc(60 * var(--max-ratio));
  }
}

@media (min-width: 1300px) {
  #container .p-plan-model-room__plan-btn {
    margin-top: calc(90 * var(--rem-ratio));
  }

  .p-plan-model-room__plan-btn a {
    padding: calc(16 * var(--rem-ratio)) calc(60 * var(--rem-ratio));
  }
}

/* ========================================================================================= ^^
  Plan model room section overrides for modelroom page
============================================================================================ ^^ */
.p-plan-model-room {
  margin: 0 auto;
  max-width: calc(var(--max-layout-width) * 1px);
  padding: calc(20 * var(--min-ratio));
}

@media (min-width: 768px) {
  .p-plan-model-room {
    padding: calc(40 * var(--max-ratio)) calc(30 * var(--max-ratio));
  }
}

@media (min-width: 1300px) {
  .p-plan-model-room {
    padding: calc(40 * var(--rem-ratio)) calc(30 * var(--rem-ratio));
  }
}

/* ========================================================================================= ^^
  Photo crop overrides (PC) — keep object-fit: cover at all breakpoints
============================================================================================ ^^ */
@media (min-width: 768px) {
  #container .p-plan-model-room__photo img {
    height: calc(200 * var(--max-ratio));
    object-fit: cover;
  }
  #container .p-plan-model-room__photo--wide img {
    height: calc(240 * var(--max-ratio));
    object-fit: cover;
  }
  /* kagu_p_01〜04: トリミングなし・原寸比率表示 */
  #container .p-plan-model-room__photos .p-plan-model-room__photo:nth-child(1) img,
  #container .p-plan-model-room__photos .p-plan-model-room__photo:nth-child(2) img,
  #container .p-plan-model-room__photos .p-plan-model-room__photo:nth-child(3) img,
  #container .p-plan-model-room__photos .p-plan-model-room__photo:nth-child(4) img {
    height: auto;
    object-fit: unset;
  }
}

@media (min-width: 1300px) {
  #container .p-plan-model-room__photo img {
    height: calc(220 * var(--rem-ratio));
    object-fit: cover;
  }
  #container .p-plan-model-room__photo--wide img {
    height: calc(260 * var(--rem-ratio));
    object-fit: cover;
  }
  /* kagu_p_01〜04: トリミングなし・原寸比率表示 */
  #container .p-plan-model-room__photos .p-plan-model-room__photo:nth-child(1) img,
  #container .p-plan-model-room__photos .p-plan-model-room__photo:nth-child(2) img,
  #container .p-plan-model-room__photos .p-plan-model-room__photo:nth-child(3) img,
  #container .p-plan-model-room__photos .p-plan-model-room__photo:nth-child(4) img {
    height: auto;
    object-fit: unset;
  }
}