/* ---------------------------------------------------
	common
------------------------------------------------------ */
#mainvisual {
  background: url(../img/room/mainvisual.jpg) center;
  background-size: cover;
}

#contents {
  padding-bottom: 250px;
}

.room_sec {
  padding: 120px 0 0;
}
.room_sec .sec_tit {
  margin-bottom: 28px;
}
.room_sec .en_tit {
  margin-bottom: 44px;
  color: var(--sub_color);
  line-height: 1.5;
  letter-spacing: 0.2em;
}
.room_sec .room_lead {
  margin-bottom: 40px;
  text-align: center;
}
.room_sec .room_slide {
  margin-bottom: 64px;
}
.room_sec .room_slide .slide_item {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.6s;
}
.room_sec .room_slide .slick-active .slide_item {
  opacity: 1;
}
.room_sec .append_dots {
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.4));
}
.room_sec .room_logo {
  margin-bottom: 44px;
  line-height: 1;
}
.room_sec .room_icons {
  position: absolute;
  right: 0;
  top: 0;
  gap: 8px;
  font-size: 1.1rem;
  line-height: 1.2;
  justify-content: flex-start;
  text-align: center;
}
.room_sec .room_icons > li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 78px;
  height: 78px;
  background: #0e1d38;
  border: 1px solid var(--border_color);
}
.room_sec .room_icons .icon {
  height: 32px;
  line-height: 32px;
}
.room_sec .room_icons .icon img {
  vertical-align: middle;
}
.room_sec .room_icons .txt {
  display: flex;
  min-height: 2.4em;
  margin-top: 4px;
  flex-direction: column;
  justify-content: center;
}
.room_sec .room_col {
  margin-top: 92px;
}
.room_sec .room_col .col_detail {
  width: 46.3%;
}
.room_sec .room_col .col_detail .en_tit {
  margin-bottom: 20px;
}
.room_sec .room_col .col_detail .table th {
  width: 30%;
}
.room_sec .room_col .col_layout {
  width: 46.3%;
}
.room_sec .room_col .col_layout .layout_img {
  text-align: center;
}
.room_sec .room_bath {
  margin-top: 92px;
}
.room_sec .room_bath .bath_box {
  padding: 44px 32px 60px;
  border: 1px solid var(--border_color);
}
.room_sec .room_bath .bath_slide {
  max-width: 640px;
  margin: 0 auto 28px;
}
.room_sec .room_bath .bath_slide .slick-prev {
  left: -80px;
}
.room_sec .room_bath .bath_slide .slick-next {
  right: -80px;
}
.room_sec .room_bath .bath_img .img {
  width: 22.3%;
  max-width: 240px;
}
.room_sec .room_bath .bath_img.col02 .img {
  width: 48.2%;
  max-width: 520px;
}
.room_sec .room_bath .bath_txt {
  max-width: 640px;
  margin: 0 auto;
}
.room_sec .room_facility {
  position: relative;
  margin-top: 96px;
}
.room_sec .room_facility .facility_btn {
  position: absolute;
  right: 0;
  top: 0;
}
.room_sec .room_facility .facility_btn .arrow {
  margin-left: 28px;
}
.room_sec .room_facility .facility_list {
  padding: 44px 0;
  border: 1px solid var(--border_color);
  gap: 16px;
  justify-content: center;
}
.room_sec .room_facility .facility_list .list_row {
  width: 22.3%;
}
.room_sec .room_facility .facility_list dt {
  padding: 0 16px 16px;
  border-bottom: 1px solid var(--border_color);
}
.room_sec .room_facility .facility_list dd {
  padding: 16px 16px 0;
}
.room_sec .room_facility .facility_list ul li {
  padding-left: 1em;
  text-indent: -1em;
}
.room_sec .room_btn {
  margin-top: 64px;
  text-align: center;
}
.room_sec .room_btn .btn_reserve {
  width: 680px;
}
.room_sec .room_btn .btn_reserve::before {
  left: 4%;
}

@media screen and (max-width: 810px) {
  #contents {
    padding-bottom: 80px;
  }
  .room_sec {
    padding: 60px 0 0;
  }
  .room_sec .sec_tit {
    margin-bottom: 28px;
  }
  .room_sec .en_tit {
    margin-bottom: 32px;
  }
  .room_sec .room_lead {
    margin-bottom: 40px;
  }
  .room_sec .room_slide {
    margin-bottom: 32px;
  }
  .room_sec .room_slide .slide_item {
    opacity: 1;
  }
  .room_sec .room_slide .slide_item img {
    aspect-ratio: 4/3;
    object-fit: cover;
  }
  .room_sec .room_logo {
    float: left;
    margin-bottom: 32px;
  }
  .room_sec .sec_lead {
    clear: both;
  }
  .room_sec .room_icons {
    position: static;
    float: right;
    margin-bottom: 24px;
    gap: 4px;
    max-width: calc(100% - 100px);
    justify-content: flex-end;
    font-size: 1rem;
  }
  .room_sec .room_icons > li {
    width: 70px;
    height: 70px;
  }
  .room_sec .room_col {
    margin-top: 48px;
  }
  .room_sec .room_col .col_detail {
    width: 100%;
  }
  .room_sec .room_col .col_detail .en_tit {
    margin-bottom: 20px;
  }
  .room_sec .room_col .col_detail .table th,
  .room_sec .room_col .col_detail .table td {
    font-size: 1.3rem;
  }
  .room_sec .room_col .col_detail .table th {
    width: 28%;
  }
  .room_sec .room_col .col_layout {
    width: 100%;
    margin-top: 48px;
  }
  .room_sec .room_col .col_layout .layout_img img {
    max-width: 55%;
  }
  .room_sec .room_col .col_layout .layout_img.small img {
    max-width: 40%;
  }
  .room_sec .room_col .col_layout .layout_img.wide img {
    max-width: 80%;
  }
  .room_sec .room_bath {
    margin-top: 64px;
  }
  .room_sec .room_bath .bath_box {
    padding: 32px 24px 32px;
  }
  .room_sec .room_bath .bath_slide .slick-prev {
    left: -20px;
  }
  .room_sec .room_bath .bath_slide .slick-next {
    right: -20px;
  }
  .room_sec .room_bath .bath_img {
    gap: 16px;
  }
  .room_sec .room_bath .bath_img .img {
    width: calc(50% - 8px);
    max-width: 50%;
  }
  .room_sec .room_bath .bath_img.col02 .img {
    width: 100%;
    max-width: 100%;
  }
  .room_sec .room_facility {
    margin-top: 64px;
  }
  .room_sec .room_facility .en_tit {
    margin-bottom: 16px;
  }
  .room_sec .room_facility .facility_btn {
    position: static;
    margin-bottom: 16px;
    font-size: 1.2rem;
    text-align: right;
  }
  .room_sec .room_facility .facility_btn .arrow {
    margin-left: 10px;
  }
  .room_sec .room_facility .facility_list {
    padding: 24px 16px;
    gap: 24px 16px;
    font-size: 1.2rem;
    line-height: 2.1;
  }
  .room_sec .room_facility .facility_list .list_row {
    width: calc(50% - 8px);
  }
  .room_sec .room_facility .facility_list dt {
    padding: 0 8px 10px;
    font-size: 1.4rem;
  }
  .room_sec .room_facility .facility_list dd {
    padding: 10px 8px 0;
  }
  .room_sec .room_btn {
    margin-top: 32px;
  }
  .room_sec .room_btn .btn_reserve::before {
    left: 3%;
  }
}
/* ---------------------------------------------------
		room_nav
------------------------------------------------------ */
#room_nav_wrap {
  position: fixed;
  left: 3%;
  bottom: 24px;
  width: 210px;
  color: var(--main_color);
  border-radius: 5px;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: opacity 0.5s;
  z-index: 1000;
}
#room_nav_wrap.show .room_nav_open .icon {
  transform: scale(1, -1);
}
#room_nav_wrap.show .room_nav {
  height: auto;
  padding: 0 12px 16px;
  opacity: 1;
  visibility: visible;
}
#room_nav_wrap.active {
  opacity: 1;
  visibility: visible;
}
#room_nav_wrap .room_nav_open {
  position: relative;
  padding: 16px 16px;
  background: #edece8;
  font-size: 1.6rem;
  cursor: pointer;
}
#room_nav_wrap .room_nav_open .icon {
  position: absolute;
  right: 16px;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
#room_nav_wrap .room_nav {
  height: 0;
  opacity: 0;
  background: #edece8;
  visibility: hidden;
  transition: opacity 0.5s;
  overflow: hidden;
}
#room_nav_wrap .room_nav li {
  position: relative;
  border-bottom: 1px solid #b9c5cf;
}
#room_nav_wrap .room_nav li a {
  display: block;
  padding: 8px 8px;
  color: var(--main_color);
}
@media (any-hover: hover) {
  #room_nav_wrap .room_nav li a:hover {
    background: #d4e6ed;
    opacity: 1;
  }
}

@media screen and (max-width: 1280px) {
  #room_nav_wrap {
    left: 20px;
  }
}
@media screen and (max-width: 810px) {
  #room_nav_wrap {
    left: auto;
    right: 16px;
    bottom: 72px;
    width: 180px;
    letter-spacing: 0;
  }
  #room_nav_wrap.show .room_nav {
    padding: 0 8px 8px;
  }
  #room_nav_wrap .room_nav_open {
    padding: 12px;
    font-size: 1.5rem;
  }
  #room_nav_wrap .room_nav {
    font-size: 1.2rem;
  }
}
/* ---------------------------------------------------
	lead
------------------------------------------------------ */
#lead .map_tit {
  margin-bottom: 32px;
  color: var(--sub_color);
  font-size: 2.6rem;
  letter-spacing: 0.2em;
}
#lead .bg_box {
  margin-top: 92px;
  margin-bottom: 64px;
  padding: 64px 36px;
  background: #0e1d38;
  text-align: center;
}
#lead .bg_box .box_txt {
  margin-top: 16px;
}
#lead .bg_box .box_txt .icon {
  margin-right: 8px;
}
#lead .page_nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  background: none;
  gap: 8px;
  font-size: 1.1rem;
  line-height: 1.5;
  text-align: center;
}
#lead .page_nav li {
  width: calc(14.2857142857% - 7px);
}
#lead .page_nav a {
  display: flex;
  min-height: 140px;
  padding: 0;
  background: #173e5f;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
@media (any-hover: hover) {
  #lead .page_nav a:hover {
    background: var(--sub_color);
    color: var(--main_color);
    opacity: 1;
  }
  #lead .page_nav a:hover .logo svg {
    fill: var(--main_color);
  }
}
#lead .page_nav .logo svg {
  fill: #fff;
  stroke: none;
  transition: fill 0.3s;
}
#lead .page_nav .logo_umi {
  width: 34px;
  height: 37px;
}
#lead .page_nav .logo_kazu {
  width: 35px;
  height: 33px;
}
#lead .page_nav .logo_kayo {
  width: 31px;
  height: 73px;
}
#lead .page_nav .logo_akatsuki {
  width: 31px;
  height: 75px;
}
#lead .page_nav .logo_zen {
  width: 34px;
  height: 33px;
}
#lead .page_nav .logo_yasoda {
  width: 31px;
  height: 78px;
}
#lead .page_nav .logo_mika {
  width: 31px;
  height: 78px;
}
#lead .page_nav .logo_mio {
  width: 34px;
  height: 34px;
}
#lead .page_nav .logo_miyabi {
  width: 33px;
  height: 75px;
}
#lead .page_nav .logo_mori {
  width: 37px;
  height: 35px;
}
#lead .page_nav .logo_unn {
  width: 32px;
  height: 35px;
}
#lead .page_nav .logo_haru {
  width: 34px;
  height: 34px;
}
#lead .page_nav .logo_noa {
  width: 31px;
  height: 76px;
}
#lead .page_nav .logo_omichi {
  width: 31px;
  height: 72px;
}

@media screen and (max-width: 810px) {
  #lead .map_tit {
    margin-bottom: 24px;
    font-size: 2rem;
    letter-spacing: 0.2em;
  }
  #lead .bg_box {
    width: 100%;
    margin-top: 64px;
    margin-bottom: 48px;
    padding: 32px 16px;
  }
  #lead .page_nav {
    gap: 8px;
    font-size: 1rem;
  }
  #lead .page_nav li {
    width: calc(25% - 6px);
  }
  #lead .page_nav a {
    flex-direction: column;
    min-height: 120px;
    gap: 8px;
  }
  #lead .page_nav .logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 64px;
    order: -1;
  }
  #lead .page_nav .logo svg {
    width: 25px;
    height: auto;
  }
}
/* ---------------------------------------------------
	umi
------------------------------------------------------ */
#umi {
  background: url(../img/room/umi_bg_01.png) no-repeat right calc(50vw + 100px) top 800px;
}

@media screen and (max-width: 810px) {
  #umi {
    background: url(../img/room/umi_bg_01.png) no-repeat left -80px top calc(180px + 50vw);
    background-size: 400px;
  }
}
/* ---------------------------------------------------
	kazu
------------------------------------------------------ */
#kazu {
  background: url(../img/room/kazu_bg_01.png) no-repeat right calc(50vw + 100px) top 720px;
}

@media screen and (max-width: 810px) {
  #kazu {
    background: url(../img/room/kazu_bg_01.png) no-repeat left -80px top calc(180px + 50vw);
    background-size: 400px;
  }
}
/* ---------------------------------------------------
	kayo
------------------------------------------------------ */
#kayo {
  background: url(../img/room/kayo_bg_01.png) no-repeat right calc(50vw - 100px) top 800px;
}

@media screen and (max-width: 810px) {
  #kayo {
    background: url(../img/room/kayo_bg_01.png) no-repeat left -80px top calc(180px + 90vw);
    background-size: 400px;
  }
}
/* ---------------------------------------------------
	akatsuki
------------------------------------------------------ */
#akatsuki {
  background: url(../img/room/akatsuki_bg_01.png) no-repeat right calc(50vw - 100px) top 870px;
}

@media screen and (max-width: 810px) {
  #akatsuki {
    background: url(../img/room/akatsuki_bg_01.png) no-repeat left -80px top calc(180px + 90vw);
    background-size: 400px;
  }
}
/* ---------------------------------------------------
	zen
------------------------------------------------------ */
#zen {
  background: url(../img/room/zen_bg_01.png) no-repeat right calc(50vw - 100px) top 870px;
}

@media screen and (max-width: 810px) {
  #zen {
    background: url(../img/room/zen_bg_01.png) no-repeat left -80px top calc(180px + 90vw);
    background-size: 400px;
  }
}
/* ---------------------------------------------------
	yasoda
------------------------------------------------------ */
#yasoda {
  background: url(../img/room/yasoda_bg_01.png) no-repeat right calc(50vw - 100px) top 860px;
}

@media screen and (max-width: 810px) {
  #yasoda {
    background: url(../img/room/yasoda_bg_01.png) no-repeat left -120px top calc(180px + 102vw);
    background-size: 480px;
  }
}
/* ---------------------------------------------------
	mika
------------------------------------------------------ */
#mika {
  background: url(../img/room/mika_bg_01.png) no-repeat right calc(50vw - 60px) top 820px;
}

@media screen and (max-width: 810px) {
  #mika {
    background: url(../img/room/mika_bg_01.png) no-repeat left -80px top calc(180px + 90vw);
    background-size: 400px;
  }
}
/* ---------------------------------------------------
	mio
------------------------------------------------------ */
#mio {
  background: url(../img/room/mio_bg_01.png) no-repeat right calc(50vw - 60px) top 820px;
}

@media screen and (max-width: 810px) {
  #mio {
    background: url(../img/room/mio_bg_01.png) no-repeat left -80px top calc(180px + 90vw);
    background-size: 400px;
  }
}
/* ---------------------------------------------------
	miyabi
------------------------------------------------------ */
#miyabi {
  background: url(../img/room/miyabi_bg_01.png) no-repeat right calc(50vw - 60px) top 820px;
}

@media screen and (max-width: 810px) {
  #miyabi {
    background: url(../img/room/miyabi_bg_01.png) no-repeat left -80px top calc(180px + 90vw);
    background-size: 400px;
  }
}
/* ---------------------------------------------------
	mori
------------------------------------------------------ */
#mori {
  background: url(../img/room/mori_bg_01.png) no-repeat right calc(50vw - 100px) top 880px;
}

@media screen and (max-width: 810px) {
  #mori {
    background: url(../img/room/mori_bg_01.png) no-repeat left -80px top calc(180px + 90vw);
    background-size: 400px;
  }
}
/* ---------------------------------------------------
	unn
------------------------------------------------------ */
#unn {
  background: url(../img/room/unn_bg_01.png) no-repeat right calc(50vw - 130px) top 820px;
}

@media screen and (max-width: 810px) {
  #unn {
    background: url(../img/room/unn_bg_01.png) no-repeat left -80px top calc(180px + 90vw);
    background-size: 400px;
  }
}
/* ---------------------------------------------------
	haru
------------------------------------------------------ */
#haru {
  background: url(../img/room/haru_bg_01.png) no-repeat right calc(50vw + 130px) top 950px;
}

@media screen and (max-width: 810px) {
  #haru {
    background: url(../img/room/haru_bg_01.png) no-repeat left -80px top calc(180px + 100vw);
    background-size: 300px;
  }
}
/* ---------------------------------------------------
	noa
------------------------------------------------------ */
#noa {
  background: url(../img/room/noa_bg_01.png) no-repeat right calc(50vw - 100px) top 900px;
}

@media screen and (max-width: 810px) {
  #noa {
    background: url(../img/room/noa_bg_01.png) no-repeat left -80px top calc(180px + 100vw);
    background-size: 400px;
  }
}
/* ---------------------------------------------------
	omichi
------------------------------------------------------ */
#omichi {
  padding-bottom: 120px;
  background: url(../img/room/omichi_bg_01.png) no-repeat right calc(50vw - 60px) top 800px;
}

@media screen and (max-width: 810px) {
  #omichi {
    background: url(../img/room/omichi_bg_01.png) no-repeat left -80px top calc(180px + 100vw);
    background-size: 400px;
  }
}
/* ---------------------------------------------------
	amenity
------------------------------------------------------ */
#amenity {
  padding: 120px 0 0;
}
#amenity .amenity_img {
  margin-top: 32px;
}
#amenity .amenity_img .img {
  width: 31.8%;
  max-width: 320px;
}

@media screen and (max-width: 810px) {
  #amenity {
    padding: 60px 0 0;
  }
}
@media screen and (max-width: 640px) {
  #amenity {
    padding: 60px 0 0;
  }
  #amenity .amenity_img {
    gap: 8px;
  }
  #amenity .amenity_img .img {
    width: calc(50% - 4px);
    max-width: 50%;
  }
  #amenity .amenity_img .img:nth-of-type(1) {
    width: 100%;
    max-width: 100%;
  }
}
/* ---------------------------------------------------
	info
------------------------------------------------------ */
#info {
  padding: 120px 0;
}
#info .table th {
  width: 28%;
}
#info .cancel_list .list_row {
  display: flex;
}
#info .cancel_list dt {
  min-width: 15.5em;
  background: url(../img/room/icon_dots@2x.png) repeat-x center left;
  background-size: 15px;
}
#info .cancel_list dt span {
  padding-right: 6px;
  background: var(--bg_color);
}
#info .cancel_list dd {
  min-width: 12em;
}

@media screen and (max-width: 810px) {
  #info {
    padding: 60px 0;
  }
  #info .table th {
    width: 100%;
  }
  #info .cancel_list .list_row {
    flex-wrap: wrap;
  }
  #info .cancel_list dt {
    width: 100%;
  }
  #info .cancel_list dd {
    width: 100%;
  }
}