@charset "UTF-8";
/* 離れ客室 特設ページ
*****************************************************************/
/* mixin
*********************************************************************/
/* カラー */
/* media query */
/* SP縦から */
/* SP横から */
/* タブレット縦から */
/* 1280 */
/* フルワイド */
/* フルワイド */
img {
  max-width: 100%;
  height: auto;
}

/* ============ VISUAL ============ */
.area_visual {
  position: relative;
}

.block_main_s {
  width: 100%;
  height: calc(100vh - 120px);
  line-height: 0;
  overflow: hidden;
}
@media all and (max-width: 896px) {
  .block_main_s {
    height: auto;
    aspect-ratio: 16/11;
  }
}

.block_main_s .main {
  width: 100%;
  height: 100%;
}

.block_main_s .main img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.pagettl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

.kv_lockup {
  width: 26vw;
  max-width: 430px;
  min-width: 220px;
}

/* ============ INTRO / POINT 共通の水彩背景 ============ */
#intro, #point {
  background: #d8f1ef url(../images/bg_watercolor.jpg) center center/cover fixed;
}

/* ============ INTRO ============ */
.area_intro {
  padding: 6vw 8vw 4vw;
}
@media all and (max-width: 480px) {
  .area_intro {
    padding: 40px 20px 20px;
  }
}

.intro_inner {
  max-width: 1000px;
  margin: auto;
  text-align: center;
  position: relative;
}

.intro_oke {
  width: 12vw;
  max-width: 180px;
  min-width: 90px;
  margin: 0 auto 1vw;
}

.ttl_intro img {
  width: 100%;
  max-width: 760px;
}

.txt_intro {
  margin-top: 3vw;
  font-size: clamp(1.4rem, 1.04vw, 2rem);
  line-height: 2.1em;
  color: #271510;
  font-weight: 400;
}
@media all and (max-width: 896px) {
  .txt_intro {
    text-align: justify;
  }
}
@media all and (max-width: 480px) {
  .txt_intro {
    margin-top: 24px;
  }
}

/* ============ POINT ============ */
.area_point {
  padding: 2vw 8vw 6vw;
}
@media all and (max-width: 480px) {
  .area_point {
    padding: 10px 20px 40px;
  }
}

.ttl_point {
  text-align: center;
  padding-bottom: 3vw;
}
@media all and (max-width: 480px) {
  .ttl_point {
    padding-bottom: 24px;
  }
}

.ttl_point img {
  width: 100%;
  max-width: 720px;
}

.point_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.6vw;
}
@media all and (max-width: 896px) {
  .point_list {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 560px;
    margin: auto;
  }
}

.point_item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: 0;
}

.point_img {
  line-height: 0;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 3/2;
}

.point_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.point_badge {
  width: 42%;
  max-width: 200px;
  min-width: 120px;
  padding: 1.4vw 0 0.6vw;
}
@media all and (max-width: 480px) {
  .point_badge {
    padding: 12px 0 6px;
  }
}

.point_hd {
  font-size: clamp(1.7rem, 1.45vw, 2.6rem);
  line-height: 1.4em;
  font-weight: 500;
  color: #271510;
}

.point_txt {
  margin-top: 1vw;
  font-size: 1.4rem;
  line-height: 2em;
  text-align: justify;
  color: #271510;
}
@media all and (max-width: 480px) {
  .point_txt {
    margin-top: 10px;
  }
}

.wave_divider {
  width: 100vw;
  background: url(../images/wave.svg) bottom center/100% 100% no-repeat;
  position: absolute;
  top: 0px;
}

/* ============ ROOMS ============ */
#rooms {
  position: relative;
}

.area_rooms {
  width: 100vw;
  position: relative;
}

.rooms_band {
  position: relative;
  width: 100vw;
  line-height: 0;
}

.rooms_band__img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
@media (width <= 480px) {
  .rooms_band__img {
    aspect-ratio: 1/1;
  }
}

.rooms_band__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rooms_band__copy {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
}

.rooms_band__copy .vertical {
  writing-mode: vertical-rl;
  color: #000;
  font-size: clamp(1.4rem, 1.5vw, 2.8rem);
  line-height: 1.9em;
  font-weight: 500;
  font-weight: 400;
}
@media (width <= 480px) {
  .rooms_band__copy .vertical {
    line-height: 1.6em;
  }
}

.rooms_band__en {
  position: absolute;
  left: 0;
  bottom: -0.1%;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 2.6vw, 5rem);
  letter-spacing: 0.02em;
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.35);
}

.rooms_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media all and (max-width: 480px) {
  .rooms_list {
    grid-template-columns: 1fr;
  }
}

.rooms_item {
  line-height: 0;
}

.rooms_item__img {
  aspect-ratio: 3/2;
  overflow: hidden;
}

.rooms_item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rooms_item__cap {
  line-height: 1.6em;
  text-align: center;
  padding: 1.6vw 4vw 2.6vw;
  font-size: clamp(1.4rem, 1.25vw, 2.4rem);
  color: #271510;
}
@media all and (max-width: 480px) {
  .rooms_item__cap {
    padding: 16px 20px 24px;
  }
}

.rooms_item__cap .tatami {
  display: block;
  font-weight: 700;
}

/* ============ STORY ============ */
.area_story {
  padding: 6vw 8vw 4vw;
}
@media all and (max-width: 480px) {
  .area_story {
    padding: 40px 20px 20px;
  }
}

.block_story {
  background: #FDF6ED;
  position: relative;
  padding-block: 6vw;
  padding-inline: 20px;
}
@media all and (max-width: 480px) {
  .block_story {
    padding-block: 40px;
  }
}

.story_head {
  text-align: center;
}

.story_check {
  width: 9vw;
  max-width: 130px;
  min-width: 70px;
  position: absolute;
  top: -2.5vw;
  left: 50%;
  transform: translateX(-50%);
}
@media all and (max-width: 480px) {
  .story_check {
    top: -20px;
  }
}

.ttl_story img {
  width: 100%;
  max-width: 760px;
}

.story_lead {
  margin-top: 2vw;
  font-size: clamp(1.4rem, 1.04vw, 2rem);
  line-height: 2em;
  color: #271510;
}
@media all and (max-width: 896px) {
  .story_lead {
    text-align: justify;
  }
}
@media all and (max-width: 480px) {
  .story_lead {
    margin-top: 20px;
  }
}

.story_timeline {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 3vw auto 0;
}

/* ============ ENDING ============ */
.area_ending {
  position: relative;
  width: 100vw;
  line-height: 0;
}

.ending_img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
@media all and (max-width: 480px) {
  .ending_img {
    aspect-ratio: 4/5;
  }
}

.ending_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ending_copy {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
}

.ending_lead {
  color: #fff;
  font-size: clamp(1.4rem, 1.35vw, 2.6rem);
  line-height: 1.6em;
  letter-spacing: 0.05em;
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.4);
}

.ending_feelfree {
  margin-top: 9vw;
}

.ending_feelfree img {
  width: 26vw;
  max-width: 420px;
  min-width: 200px;
  filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.25));
}

/* ============ RESERVE CTA ============ */
#reserve_cta {
  background: #FDF6ED;
}

.btn_reserve {
  text-align: center;
  padding: 4vw 20px 6vw;
  font-size: clamp(1.5rem, 1.25vw, 2.2rem);
  line-height: 1.5em;
  color: #271510;
}

.btn_reserve a {
  color: #271510;
}

.btn_reserve img {
  margin-top: 10px;
  width: 300px;
  max-width: 80%;
}