/* ---------------------------------------------------
	common
------------------------------------------------------ */
#pagetit::after {
  background: url(../img/highlights/pagetit_bg.jpg) center;
  background-size: cover;
}

/* ---------------------------------------------------
				totonoi
------------------------------------------------------ */
#totonoi {
  color: #9a6e24;
}
#totonoi .totonoi_bg {
  padding: 108px 0 112px;
  background: #e1d3bd;
  color: #2e3826;
}
#totonoi .totonoi_bg .sec_tit .num {
  display: inline-block;
  font-size: 6rem;
  font-weight: bold;
  line-height: 1;
}
#totonoi .totonoi_list {
  width: calc(100% - 32px);
  margin: 0 auto;
  gap: 16px;
}
#totonoi .totonoi_list > li {
  position: relative;
  width: calc(33.333% - 11px);
}
@media (any-hover: hover) {
  #totonoi .totonoi_list > li a:hover {
    filter: brightness(120%);
    opacity: 1;
  }
}
#totonoi .totonoi_list > li .list_img img {
  width: 100%;
}
#totonoi .totonoi_list > li .list_txt {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #faf7f7;
  font-size: 4rem;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
}
#totonoi .totonoi_col .sec_tit {
  width: 28%;
  margin: 0;
  font-size: 2rem;
  letter-spacing: 0;
  text-align: left;
}
#totonoi .totonoi_col .sec_tit .en {
  font-size: 4rem;
  line-height: 1;
  letter-spacing: 0.02em;
}
#totonoi .totonoi_col .col_img {
  width: 34.3%;
  max-width: 400px;
}
#totonoi .totonoi_col .col_txt {
  width: 28%;
}
#totonoi .totonoi_btn {
  margin-top: 48px;
  line-height: 1;
  text-align: center;
}
#totonoi .totonoi_btn .btn {
  color: #9a6e24;
}
@media (any-hover: hover) {
  #totonoi .totonoi_btn .btn:hover {
    background: #9a6e24;
    color: #faf7f7;
  }
}

@media screen and (max-width: 810px) {
  #totonoi .totonoi_bg {
    padding: 48px 0 48px;
  }
  #totonoi .totonoi_bg .sec_tit .num {
    font-size: 4rem;
  }
  #totonoi .totonoi_list {
    width: calc(100% - 32px);
    margin: 0 auto;
    gap: 12px;
  }
  #totonoi .totonoi_list > li {
    width: calc(33.333% - 8px);
  }
  #totonoi .totonoi_list > li .list_img img {
    aspect-ratio: 1/3;
    width: 100%;
    object-fit: cover;
  }
  #totonoi .totonoi_list > li .list_txt {
    font-size: 2.4rem;
  }
  #totonoi .totonoi_col .sec_tit {
    width: 70%;
    margin: 0 auto 32px;
    font-size: 2rem;
    letter-spacing: 0;
    text-align: left;
  }
  #totonoi .totonoi_col .sec_tit .en {
    font-size: 4rem;
    letter-spacing: 0.02em;
  }
  #totonoi .totonoi_col .col_img {
    width: 70%;
    max-width: 100%;
    margin: 0 auto 40px;
  }
  #totonoi .totonoi_col .col_txt {
    width: 100%;
    max-width: max-content;
    margin: 0 auto;
  }
  #totonoi .totonoi_btn {
    margin-top: 32px;
  }
}
/* ---------------------------------------------------
		bath
------------------------------------------------------ */
#bath {
  padding: 112px 0 84px;
  background: url(../img/common/bg_logo.svg) no-repeat left calc(50vw - 620px) top 380px;
  background-size: 640px;
}
#bath .bath_col {
  margin-top: 96px;
}
#bath .bath_col .col_img {
  width: 50%;
}
#bath .bath_col .col_txt {
  width: 44.6%;
}

@media screen and (max-width: 1440px) {
  #bath {
    background: url(../img/common/bg_logo.svg) no-repeat left 4% top 380px;
    background-size: 640px;
  }
}
@media screen and (max-width: 810px) {
  #bath {
    padding: 48px 0 48px;
    background: url(../img/common/bg_logo.svg) no-repeat left -20px top 10px;
    background-size: 320px;
  }
  #bath .bath_col {
    margin-top: 48px;
  }
  #bath .bath_col + .bath_col {
    margin-top: 40px;
  }
  #bath .bath_col .col_img {
    width: 100%;
    margin-bottom: 24px;
  }
  #bath .bath_col .col_txt {
    width: 100%;
  }
}
/* ---------------------------------------------------
		room
------------------------------------------------------ */
#room {
  padding: 84px 0;
  background: url(../img/common/bg_logo.svg) no-repeat left calc(50vw - 620px) top 350px;
  background-size: 640px;
}
#room .room_slide {
  margin-top: 96px;
  margin-bottom: 40px;
}
#room .room_slide .slide_item {
  padding: 0 10px;
}
#room .room_slide .slide_item img {
  width: 100%;
}
#room .totonoi_btn {
  margin-top: 32px;
}

@media screen and (max-width: 1440px) {
  #room {
    background: url(../img/common/bg_logo.svg) no-repeat left 4% top 350px;
    background-size: 640px;
  }
}
@media screen and (max-width: 810px) {
  #room {
    padding: 48px 0;
    background: url(../img/common/bg_logo.svg) no-repeat left -20px top 10px;
    background-size: 320px;
  }
  #room .room_slide {
    margin-top: 48px;
    margin-bottom: 40px;
  }
  #room .room_slide .slide_item {
    padding: 0 4px;
  }
  #room .room_slide .slide_item img {
    width: 100%;
  }
  #room .totonoi_btn {
    margin-top: 32px;
  }
}
/* ---------------------------------------------------
	breakfast
------------------------------------------------------ */
#breakfast {
  padding: 84px 0 112px;
  background: url(../img/common/bg_logo.svg) no-repeat left calc(50vw - 620px) top 350px;
  background-size: 640px;
}
#breakfast .breakfast_slide {
  width: 90%;
  margin: 96px auto 48px;
}
#breakfast .breakfast_slide .slide_item img {
  width: 100%;
}
#breakfast .totonoi_btn {
  margin-top: 32px;
}

@media screen and (max-width: 1440px) {
  #breakfast {
    background: url(../img/common/bg_logo.svg) no-repeat left 4% top 350px;
    background-size: 640px;
  }
}
@media screen and (max-width: 810px) {
  #breakfast {
    padding: 48px 0 64px;
    background: url(../img/common/bg_logo.svg) no-repeat left -20px top 10px;
    background-size: 320px;
  }
  #breakfast .breakfast_slide {
    width: 100%;
    margin: 48px auto 48px;
  }
  #breakfast .breakfast_slide .slide_item img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
  }
  #breakfast .totonoi_btn {
    margin-top: 32px;
  }
}
/* ---------------------------------------------------
	facility
------------------------------------------------------ */
#facility {
  padding: 108px 0 112px;
  background: #ecdee0;
}
#facility .facility_col {
  gap: 88px 0;
}
#facility .facility_col .col_item {
  width: 45.9%;
  max-width: 536px;
}
#facility .facility_col .col_item .item_img {
  margin-bottom: 32px;
}
#facility .facility_col .col_item .item_tit {
  position: relative;
  margin-bottom: 24px;
  font-size: 3rem;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 1.5;
  text-align: left;
}
#facility .facility_btn {
  margin-top: 92px;
  line-height: 1;
  text-align: center;
}

@media screen and (max-width: 810px) {
  #facility {
    padding: 48px 0 48px;
  }
  #facility .facility_col {
    gap: 48px 0;
  }
  #facility .facility_col .col_item {
    width: 100%;
    max-width: 100%;
  }
  #facility .facility_col .col_item .item_img {
    margin-bottom: 24px;
  }
  #facility .facility_col .col_item .item_tit {
    margin-bottom: 16px;
    font-size: 2.2rem;
  }
  #facility .facility_btn {
    margin-top: 40px;
  }
}
/* ---------------------------------------------------
		location
------------------------------------------------------ */
#location {
  position: relative;
  padding: 108px 0 108px;
  background: #2e3826;
  color: #c7af87;
}
#location .location_col {
  margin-top: 44px;
  align-items: flex-end;
}
#location .location_col .col_txt {
  width: calc(100% - 204px - 96px);
  margin-bottom: -8px;
}
#location .location_col .col_btn {
  width: 240px;
  line-height: 1;
}
#location .location_col .col_btn .btn {
  color: #c7af87;
}
@media (any-hover: hover) {
  #location .location_col .col_btn .btn:hover {
    background: #9a6e24;
    color: #faf7f7;
  }
}

@media screen and (max-width: 810px) {
  #location {
    padding: 48px 0 80px;
  }
  #location .location_col {
    margin-top: 24px;
  }
  #location .location_col .col_txt {
    width: 100%;
  }
  #location .location_col .col_btn {
    width: 100%;
    margin-top: 40px;
    text-align: center;
  }
}