/* 
************
# 共通
************
*/
:root {
  --color-brown: #7e736c;
  --color-blue: #23263e;
  --transition: 0.3s;
}

/* 
************
# 施設カード
************
*/
.c-blog-card__image {
  position: relative;
}
/* ## 空室・料金 */
.c-blog-card .room-status {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-block;
  background-color: #fff;
  padding: 4px 12px;
  border-radius: 4px;
}
.c-blog-card .room-status__label {
  font-size: 0.875rem;
}
/* ### 満室0室 */
.c-blog-card .room-status__label.is-full {
  color: #808080;
}
/* ### ◯空室あり10室以上 */
.c-blog-card .room-status__label.is-available {
  color: #2c9a6a;
}
/* ### △残9室以下 */
.c-blog-card .room-status__label.is-few {
  color: #b35a2a;
}

/* ## メタ情報 */
.c-blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.c-blog-card__label {
  font-size: 0.7rem !important;
  display: inline;
}
/* ### グーグルマップリンク */
.c-blog-card .hotel-map-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  margin-bottom: 4px;
  color: var(--color-brown);
  transition: var(--transition);
}
.c-blog-card .hotel-map-link:before {
  content: "";
  display: inline-block;
  width: 0.8lh;
  height: 0.8lh;
  -webkit-mask-image: url(../images/common/icon-map.svg);
  mask-image: url(../images/common/icon-map.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--color-brown);
}
/* #### ホバー */
@media (any-hover: hover) {
  .c-blog-card .hotel-map-link:hover {
    opacity: 0.7;
  }
}

/* ## お気に入りボタン */
.c-blog-card .favorite-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 2rem;
  height: 2rem;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0.8;
  display: grid;
  place-content: center;
  transition: var(--transition);
}
.c-blog-card .favorite-btn:after {
  content: "";
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  -webkit-mask-image: url(../images/common/icon-favorite.svg);
  mask-image: url(../images/common/icon-favorite.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--color-brown);
  transition: var(--transition);
}
/* ### ホバー */
@media (any-hover: hover) {
  .c-blog-card .favorite-btn:hover {
    background-color: var(--color-brown);
    opacity: 1;
  }
  .c-blog-card .favorite-btn:hover:after {
    background-color: #fff;
  }
}
/* ### お気に入り後 */
.c-blog-card .favorite-btn.is-fav {
  background-color: var(--color-blue);
  opacity: 1;
}
.c-blog-card .favorite-btn.is-fav:after {
  background-color: #fff;
}

/* 
************
# お気に入り一覧ページ
************
*/
.l-facilities--favorite .p-blog__contents {
  margin-top: 3.5rem;
  padding-top: 0;
}
/* ## ローディングアニメーション */
.fav-loading-spinner {
  width: 32px;
  height: 32px;
  border: 4px solid #eee;
  border-top: 4px solid var(--color-blue);
  border-radius: 50%;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
  margin: 30px auto 10px auto;
}
.fav-loading-text {
  text-align: center;
  color: #333;
  font-size: 1.1em;
}
@-webkit-keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
.fav-no-favorite {
  text-align: center;
  font-size: 1.2em;
  margin-top: 40px;
}
/* ## ヘッダーのお気に入りリンク */
.p-header__button__favorite a {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-blue);
  transition: var(--transition);
}
@media screen and (max-width: 767px) {
  .p-header__button__favorite a {
    font-size: 0;
  }
}
.p-header__button__favorite a:before {
  content: "";
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url(../images/common/icon-favorite.svg);
  mask-image: url(../images/common/icon-favorite.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--color-blue);
  transition: var(--transition);
}
@media screen and (max-width: 767px) {
  .p-header__button__favorite a:before {
    width: 1.25rem;
    height: 1.25rem;
  }
}
/* ### ホバー */
@media (any-hover: hover) {
  .p-header__button__favorite a:hover {
    opacity: 0.7;
  }
}

/* 
************
# 施設検索
************
*/
/* ## 余白調整 */
.l-facilities
  .p-blog__taxonom-list
  .js-accordion-contents
  .taxonom-list__wrap:first-child {
  border-top: 1px solid #eee;
  padding-block: 16px;
}
@media screen and (min-width: 768px) {
  .l-facilities
    .p-blog__taxonom-list
    .js-accordion-contents
    .taxonom-list__wrap:first-child {
    padding-block: 20px;
  }
}
/* ## 日付選択 */
.taxonom-list__wrap-date-input {
  background: #eee;
  position: relative;
  border-radius: 0.25rem;
}
.taxonom-list__wrap-date-input:after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.75rem;
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url(../images/common/icon_calendar.svg);
  mask-image: url(../images/common/icon_calendar.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: #000;
  pointer-events: none;
}
.p-blog__taxonom-list .js-date-range {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
  min-width: 12.75rem;
  cursor: pointer;
}
.taxonom-list__wrap-date {
  align-items: center;
}
@media screen and (min-width: 768px) {
  .l-facilities .p-blog__taxonom-list .taxonom-list__wrap .ttl-area {
    max-width: 24%;
  }
}
/* ## 人数選択 */
.search-num-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}
.search-num-wrap .num-btn {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-blue);
  color: #fff;
  display: grid;
  place-content: center;
  font-weight: bold;
  font-size: 1.25rem;
  position: relative;
  cursor: pointer;
}
.search-num-wrap .num-value {
  font-size: 1rem;
}
.search-num-wrap .notion {
  font-size: 0.875rem;
  margin-left: 1rem;
}
@media screen and (max-width: 767px) {
  .taxonom-list__wrap-date-input {
    margin: 16px 0 0 0;
  }
  .search-num-wrap .notion {
    font-size: 0.8125rem;
    margin-left: 0;
  }
}

/* ### マイナスボタン */
.num-decrease:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.7rem;
  height: 2px;
  background-color: #fff;
}
/* ### プラスボタン */
.num-increase:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.7rem;
  height: 2px;
  background-color: #fff;
}
.num-increase:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 0.7rem;
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  .search-num-wrap {
    margin: 16px 0 0 0;
  }
}
/* お気に入りがありません。 */
.no-favorite-text {
  padding-block: 4rem 2rem;
  text-align: center;
}

/* 
************
# TOPページの施設一覧
************
*/
.l-facilities--top .p-blog__contents {
  margin-top: 3.5rem;
  padding-top: 0;
}

/* 
************
# ヘッダーに「ホテルを探す」をリンク追加
************
*/
.p-header__button__hotel a {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-blue);
  transition: var(--transition);
}
@media screen and (max-width: 767px) {
  .p-header__button__hotel a {
    font-size: 0;
  }
}
.p-header__button__hotel a:before {
  content: "";
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  -webkit-mask-image: url(../images/common/icon-hotel.svg);
  mask-image: url(../images/common/icon-hotel.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--color-blue);
  transition: var(--transition);
}
@media screen and (max-width: 767px) {
  .p-header__button__hotel a:before {
    width: 1.6rem;
    height: 1.6rem;
    position: relative;
    top: -2px;
  }
}
/* ## ホバー */
@media (any-hover: hover) {
  .p-header__button__hotel a:hover {
    opacity: 0.7;
  }
}

/*
************
# 翻訳ボタン
************
*/
.button-language {
  color: var(--color-blue);
  border: solid 1px var(--color-blue);
  background: initial;
  transition: var(--transition);
}
@media screen and (max-width: 767px) {
  .button-language {
    border: none;
  }
}
.button-language:before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0.45rem;
  -webkit-mask-image: url(../images/common/icon-world.svg);
  mask-image: url(../images/common/icon-world.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background: var(--color-blue);
  width: 1.1rem;
  height: 1.1rem;
  transition: var(--transition);
}
@media screen and (max-width: 767px) {
  .button-language:before {
    width: 1.5rem;
    height: 1.5rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/*
************
# ハンバーガーボタン
************
*/
.hamburger span {
  background: var(--color-blue);
  transition: var(--transition);
}
.hamburger__label {
  color: var(--color-blue);
  transition: var(--transition);
}

/*
************
# ヘッダースクロール,ハンバーガーOPEN
************
*/
.l-header .p-header__button__hotel a,
.l-header .p-header__button__favorite a,
.l-header .p-header__button__laungage a,
.l-header .hamburger__label {
  color: #fff !important;
}
.l-header .button-language {
  border: solid 1px #fff !important;
}
@media screen and (max-width: 767px) {
  .l-header .button-language {
    border: none !important;
  }
}
.l-header .p-header__button__hotel a:before,
.l-header .p-header__button__favorite a:before,
.l-header .p-header__button__laungage a:before,
.l-header .hamburger span {
  background-color: #fff !important;
}
.p-header {
  position: fixed !important;
  background: var(--color-blue) !important;
}

/*
************
# カードレイアウト調整
************
*/
.p-blog__contents {
  padding-top: 0;
  margin-top: 0;
}

.l-facilities .p-blog__contents {
  margin-top: 0;
}

@media screen and (min-width: 768px) {
  .p-blog__contents {
    padding-top: 0;
    margin-top: 0;
  }
}

/*
************
# 通貨選択スタイル
************
*/
#currency-form {
  margin-block: 4rem;
  padding-inline: 2lh 1lh;
  font-size: 0.875rem;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
  padding-block: 0.25rem;
  border: 1px solid var(--color-blue);
  border-radius: 3px;
  background: #fff;
}
#currency-form:before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0.5lh;
  background: url(../images/common/icon-coin.svg) no-repeat center center /
    contain;
  width: 1lh;
  height: 1lh;
}
#currency-form:after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.25lh;
  background: url(../images/common/arrow-down.svg) no-repeat center center /
    contain;
  width: 0.5lh;
  height: 0.5lh;
}
.c-pulldown-select {
  color: var(--color-blue);
}

@media screen and (min-width: 768px) {
    .p-contact-part {
        margin-top: 10rem !important;
    }
}