/*
Theme Name: Hotel Theme PC 2025
Description: Hotel Trend PC theme (uses mu-plugins SCF)
Version: 1.0.0
Author: トレンド
*/
@charset "UTF-8";

/*
====================================================================
  pc.css — PC版メインスタイル
====================================================================*/

/* =============================================================
   Table of Contents
   =============================================================
   01. Global Base / Reset / Headings
   02. Search Form: 共通ラベルサイズ
   03. Global: Reset & Links
   04. Header: Topbar / Main / Buttons
   05. Global Navigation
   06. Main Visual & Search Form (Layout)
   07. Search Form: Inputs / Labels / Buttons
   08. Search Form: Filters & Room Types
   09. Banners: Lowest Price
   10. Info: Table & GoogleMap

  News関連は/mu-plugins/trend-assets/common/css/trend-news.css移管済み
   11. News: Top「お知らせ」ボックス
   12. News 共通（一覧／詳細）
   13. News アーカイブ一覧
   14. News シングル（記事詳細）
   15. News シングル：前後記事／一覧ページャー


   16. Points (Room Features)
   17. FAQ: Mock List & Footer
   18. FAQ: Easy Accordion（プラグイン）
   19. Hotel List Area（フッタートレンドホテル一覧）
   20. Footer / Brand Footer
   21. Flatpickr (Calendar) Custom
   22. UI: Back-to-Top Button
   23. Helpers / Utilities
   24. People Modal & Trigger
   25. Link Banner & Consolidated Sections
   26. Responsive

   27. Recruit（PC 兼 共通）
   /mu-plugins/trend-assets/common/css/trend-recruit.css

   28. /room：カード & MetaSlider レイアウト
   /mu-plugins/trend-assets/common/css/trend-room.css

   29. /access：年表UI（路線・徒歩・バス・車）
   /mu-plugins/trend-assets/common/css/trend-access.css

   30. Facilities & Breakfast（館内設備 & 朝食）
   /mu-plugins/trend-assets/common/css/trend-service.css
   
   31. /qa/ ページ専用 Easy Accordion 幅調整
   32. MetaSlider/FlexSlider 共通リセット
   =============================================================*/

/* =============================================================
   01. Global Base / Reset / Headings
   ============================================================= */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: "Meiryo", "Hiragino Sans", Arial, sans-serif;
  color: #332;
  font-size: 16px;
  overflow-x: hidden;
}
body {
  padding-top: 0;
}
.h1_title {
  display: block;
  padding: 10px;
  background-color: #5a340e;
  margin: 20px 0;
  font-size: 1.4rem;
  color: #fff;
}
body.trend-view-pc.page-template-page-service .h1_title {
  margin: 20px 0 5px !important;
}
#main .h2_title1 {
  display: inline-block;
  padding-left: 10px;
  border-left: 4px solid #594533;
  margin: 20px 0;
  font-size: 1.2rem;
}
#main {
  padding-bottom: 20px;
}

/* =============================================================
   02. Search Form: 共通ラベルサイズ
   ============================================================= */
/* フォームの主要ラベルを「部屋タイプを選択」と同サイズに揃える */
:root { --search-label-size: 16px; }

/* チェックイン／チェックアウト */
.search_box__t_inner #labelStart,
.search_box__t_inner #labelEnd { 
  font-size: var(--search-label-size);
}

/* ご利用部屋数／ご利用人数 */
.search_box__t_inner label[for="roomSelect"],
.search_box__t_inner label[for="personSelect"],
.search_box__t_inner #roomCountBlock > dt,
.search_box__t_inner #personCountBlock > dt {
  font-size: var(--search-label-size);
}

/* =============================================================
   03. Global: Reset & Links
   ============================================================= */
a {
  color: inherit;
  text-decoration: none;
}
a:hover,
a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1.5px;
  outline: none;
}

/* =============================================================
   04. Header: Topbar / Main / Buttons
   ============================================================= */
/* =============================================================
   PC: ヘッダーを完全固定（sticky が効かない環境向け）
   ============================================================= */

/* PCビューでは header-fixed-all を画面上部に固定 */
body.trend-view-pc .header-fixed-all {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(180, 150, 90, .04);
  z-index: 400;
}

/* 固定ヘッダー分だけ本文を下げる（数値は実際の高さを見て微調整） */
body.trend-view-pc .page-wrap {
  padding-top: 195px; /* 目安: トップバー + ロゴ行 + グロナビの高さぶん */
}
.header-topbar {
  background: transparent;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
.header-topbar::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 100vw;
  height: 100%;
  background: #ede3d7;
  z-index: -1;
}
.header-top-inner {
  width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  z-index: 1;
}
.header-lang {
  font-size: 15px;
  border-radius: 2px;
  border: 1px solid #d9d3ca;
  padding: 3px 10px 3px 8px;
  background: #fff;
  color: #6a5d47;
  margin-top: 2px;
}
.header-main {
  background: #fff;
  display: flex;
  justify-content: center;
}
.header-inner {
  width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 80px;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 24px;
}
.logo-svg {
  display: block;
  width: 330px;
  height: auto;
}
.header-tel {
  font-size: 1.3rem;
  color: #393939;
  font-weight: bold;
  letter-spacing: 1px;
  min-width: 250px;
  font-family: inherit;
}
.header-btn-wrap {
  display: flex;
  align-items: center;
  gap: 0;
}

/* =============================================================
   05. Global Navigation
   ============================================================= */
.global-menu-wrap{
  width: 100%;
  background: #fff;
  border-bottom: none;
  display: flex;
  justify-content: center;
  min-height: 60px;
  margin: 0 auto 10px;
  padding-bottom: 0px;
  position: relative;
}
.global-menu-wrap::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100vw;
  height: 2px;
  background: #f5c94b;
  pointer-events: none;
}
.global-menu{
  width: 1280px;
  display: flex;
  justify-content: space-between;
  gap: 0;
  margin-top: 2px;
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  height: 60px;
  align-items: stretch;
}
.global-menu > li.menu-item{
  flex: 1 1 0;
}
.global-menu > li.menu-item > a{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90%;
  padding: 0;
  background: #decdba;
  font-size: 16px;
  color: #1b1916;
  letter-spacing: 1.3px;
  transition: background .13s, color .13s;
  font-family: "Meiryo", sans-serif;
  box-shadow: 0 1px 1px #ebdbbc35;
  border-bottom: none;
  border-right: 2px solid #fff;
  border-left: 1px solid #fff;
}
.global-menu > li.menu-item:first-child > a{
  border-left: none;
}
.global-menu > li.menu-item:last-child > a{
  border-right: none;
}
.global-menu > li.menu-item > a:hover,
.global-menu > li.menu-item > a:focus-visible{
  background: #f2e5d4;
  color: #c57a00;
  outline: none;
}

/* =============================================================
   06. Main Visual & Search Form (Layout)
   ============================================================= */
.main-wrap {
  background: #decdba;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  max-width: 1280px;
  margin: 0 auto;
}
.visual-block {
  width: 820px;
  height: 640px;
}
.visual-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-inner {
  display: flex;
  align-items: flex-start;
  height: var(--mi-base-h, auto);
  overflow: visible;
  position: relative;
  z-index: 3;
  box-shadow: 0 0 12px rgba(0, 0, 0, .1);
}
.content_box_t {
  width: 460px;
  padding: 0 30px 0;
  background: #decdba;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  position: relative;
  height: var(--cb-base-h, auto);
  overflow: visible;
  align-self: flex-start;
  margin-left: -1px;
}
.search_box_t {
  width: 400px;
  background: #decdba;
  box-sizing: border-box;
  position: relative;
  margin-top: 0;
}
.search-title{
  background:#5c422a;
  color:#fff;
  font-weight:bold;
  font-size:1rem;
  padding:10px;
  text-align:center;
  margin: -10px -15px 10px;
}
.search_box__t_inner {
  padding: 10px 15px;
  position: relative;
  box-shadow: 0 8px 15px rgba(0, 0, 0, .12);
}

/* =============================================================
   07. Search Form: Inputs / Labels / Buttons
   ============================================================= */
.t_form_la, .t_form_lb, .t_form_lb2 {
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 12px;
}
.t_form_la dt, .t_form_lb dt, .t_form_lb2 dt {
  font-weight: bold;
  margin: 0;
}
.t_form_la dd, .t_form_lb dd, .t_form_lb2 dd {
  flex: 1;
  margin: 0;
}
.t_form_lb dt, .t_form_lb2 dt {
  margin-bottom: 5px;
}
.date-wrapper {
  position: relative;
  width: 100%;
}
.date-input {
  width: 100%;
  padding: 10px 14px 10px 40px;
  height: 35px;
  border: 1px solid #ccc;
  background: #faf8f7;
  font-size: 16px;
  box-sizing: border-box;
  margin-bottom: -5px;
  cursor: pointer;
}
.calendar-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  font-size: 18px;
  color: #e64747;
}
#labelNoDate {
  display: flex;
  align-items: center;
  margin-bottom: -12px;
  font-size: 16px;
}
#labelNoDate input {
  margin-right: 8px;
}
.room-person-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 5px;
}
.room-person-wrap dt {
  flex: 0 0 auto;
  margin: 0;
}
.room-person-wrap dd {
  flex: 1;
  margin: 0;
}

/* =============================================================
   08. Search Form: Filters & Room Types
   ============================================================= */
.filter ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.filter li {
  display: flex;
  align-items: center;
}
#submit_button,
.sidebar-search-btn {
  width: 100%;
  background: #f7931e;
  color: #fff;
  font-family: "Meiryo", "Hiragino Sans", Arial, sans-serif;
  font-size: 18px;
  text-align: center;
  line-height: 1;
  padding: 14px 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 16px;
  vertical-align: middle;
  transition: background .14s, color .14s;
}
#submit_button:hover,
.sidebar-search-btn:hover {
  background: #F9C07D;
  color: #000;
}
.rwithslink a {
  display: block;
  text-align: center;
  background: #eee;
  padding: 10px;
  color: #000;
  margin: 10px 0;
  transition: background .14s, color .14s;
}
.rwithslink a:hover {
  background: #ffe8b5;
}
.t_form_r_link ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.t_form_r_link li {
  width: 48%;
  text-align: center;
  margin: 4px 0;
}
.t_form_r_link a {
  color: #222;
  font-size: 16px;
}
details {
  margin-top: 12px;
}
details summary {
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
}
.roomtype-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 8px;
}
.roomtype-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
}

/* =============================================================
   09. Banners: Lowest Price
   ============================================================= */
.lowest-price-banner {
  background: #fff;
  color: #5d3b1e;
  font-size: 17px;
  text-align: center;
  padding: 6px 0;
  margin: 18px 0 16px;
  letter-spacing: 1px;
  font-weight: bold;
}
.lowest-price-banner img {
  display: inline-block;
  margin: 0 auto;
  vertical-align: middle;
}

/* =============================================================
   09. Banners: Lowest Price
   ============================================================= */
.lowest-price-banner {
  background: #fff;
  color: #5d3b1e;
  font-size: 17px;
  text-align: center;
  padding: 6px 0;
  margin: 18px 0 16px;
  letter-spacing: 1px;
  font-weight: bold;
}

/* 画像の基本形 */
.lowest-price-banner img {
  display: inline-block;
  margin: 0 auto;
  vertical-align: middle;
}

/* ===== Lowest Price バナー：控えめホバー ===== */
.lowest-price-banner a {
  display: inline-block;
  /* border-radius: 6px; */
  overflow: hidden;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    filter 0.35s ease;
}

/* 画像も明るさだけちょい変える */
.lowest-price-banner a img {
  transition:
    filter 0.35s ease;
}

/* ホバー時：ちょっとだけ浮かせる + 影 */
.lowest-price-banner a:hover,
.lowest-price-banner a:focus-visible {
  transform: translateY(-2px);              /* 拡大はナシ、上下移動だけ */
  box-shadow: 0 6px 16px rgba(0, 0, 0, .32);
}

.lowest-price-banner a:hover img,
.lowest-price-banner a:focus-visible img {
  filter: brightness(1.3);                 /* ほんの少し明るく */
}


/* =============================================================
   10. Info: Table & GoogleMap
   ============================================================= */
.section-title {
  background: #594533;
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 20px;
  padding: 10px 25px;
  font-weight: normal;
}
.info-box {
  background: #fff;
  padding: 0;
  font-size: 15px;
  line-height: 2;
  margin-bottom: 30px;
}
.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
  background: #fff;
}
.info-table th,
.info-table td {
  border: 1px solid #ccc;
  padding: 10px 12px;
  vertical-align: middle;
  font-size: 15px;
  text-align: left;
  background: #fff;
}
.info-table th {
  width: 200px;
  color: #866040;
  font-weight: bold;
}
.info-table td {
  color: #222;
}
.info-table a {
  color: #426ad3;
  word-break: break-all;
}
.info-map {
  margin: 12px auto;
  border: 1px solid #c1b39a;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.info-map img,
.info-map iframe {
  width: 100%;
  display: block;
  border: 0;
}

/* =============================================================
   16. Points (Room Features)
   ============================================================= */
.points-box {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom:30px;
  border: 1px solid #ccc;
  border-bottom: none;
}
.room-feature-list {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.room-feature {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border: none;
  padding: 15px;
  position: relative;
  min-height: 240px;
  margin-bottom: 0;
  border-bottom: 1px solid #ccc;
}
.room-feature dt {
  margin-right: 36px;
  flex-shrink: 0;
}
.room-feature dt img {
  width: 600px;
  height: 200px;
  object-fit: cover;
  background: #f8f8f8;
  border: 1px solid #e2e0de;
  border-radius: 8px;
}
.room-feature dd {
  flex: 1;
  font-size: 1rem;
  color: #543a15;
  line-height: 1.7;
  margin: 0;
  position: relative;
  min-width: 0;
  padding: 0 0 62px;
}
.room-feature dd p {
  margin-top: 0;
}

/* =============================================================
   17. FAQ: Mock List & Footer
   ============================================================= */
.faq-box{
  background:#fff;
  border:1px solid #c1b39a;
  margin:0 auto 30px;
  padding:0;
}
.faq-box .section-title{
  margin:0;
  border-bottom:1px solid #c1b39a;
}
.faq-list.mock{
  list-style:none;
  margin:0;
  padding:16px 20px 8px;
}
.faq-item{ margin:12px 0; }
.faq-link{
  display:flex;
  align-items:center;
  gap:10px;
  background:#eee;
  border:1px solid #e2d7c6;
  border-radius:8px;
  padding:14px 16px;
  color:#3f2f1f;
  text-decoration:none;
  font-weight:600;
  line-height:1.6;
}
.faq-icon{
  display:inline-block;
  width:1.2em;
  text-align:center;
  font-weight:700;
}
.faq-q::before{
  content:"Q.";
  margin-right:6px;
  font-weight:600;
}
.faq-link:hover{
  background:#eee;
  color:#3f2f1f;
  text-decoration:none;
}
.faq-footer{
  border-top:1px solid #c1b39a;
  padding:20px;
  text-align:right;
}

/* =============================================================
   18. FAQ: Easy Accordion（プラグイン出力に適用）
   ============================================================= */
.faq-box .sp-easy-accordion {
  margin:0;
  padding:16px 20px 8px;
}

/* 各項目ボックス */
.faq-box .sp-easy-accordion > .sp-ea-single{
  margin:12px 0;
  border:1px solid #e2d7c6;
  border-radius:8px;
  background:#eee;
  overflow:hidden;
}

/* 見出しリンク */
.faq-box .sp-easy-accordion > .sp-ea-single > .ea-header a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  color:#3f2f1f;
  font-weight:600;
  line-height:1.6;
  text-decoration:none;
}

/* 先頭アイコン（＋/−） */
.faq-box .sp-easy-accordion .ea-header a .ea-expand-icon{
  flex:0 0 auto;
  font-size:16px;
  color:#3f2f1f;
}

/* 開閉コンテンツ */
.faq-box .sp-easy-accordion > .sp-ea-single > .sp-collapse > .ea-body{
  background:#fff;
  color:#3f2f1f;
  padding:14px 16px;
  border-top:1px solid #e2d7c6;
}

/* アニメーションの滑らかさ */
.faq-box .sp-easy-accordion .spcollapsing{
  height:0;
  overflow:hidden;
  transition: height .3s;
}

/* =============================================================
   19. Hotel List Area（フッタートレンドホテル一覧）
   ============================================================= */
.hotel-list-area {
  background: #fff;
  margin-top: 22px;
}
.hotel-list-area .section-title {
  text-align: center;
  background: none;
  color: #000;
  font-size: 1.3rem;
  margin-bottom: 0px;
  padding: 10px 25px;
  font-weight: normal;
}
#hotellistset ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0 40px;
  padding: 0 20px;
  margin: 0 auto;
  max-width: 1980px;
  list-style: none;
}
#hotellistset ul > li{
  flex: 1 1 0;
  max-width: 32%;
  min-width: 320px;
  margin: 0 0 22px;
}
#hotellistset h4{
  background: #cbbba6;
  color: #543a15;
  font-size: 1.1rem;
  font-weight: normal;
  text-align: center;
  margin: 0 0 18px;
  padding: 12px 0 7px;
  letter-spacing: 3px;
  border-radius: 0;
  font-family: inherit;
}
#hotellistset dl{
  margin: 0;
  padding-left: 1rem;
}
#hotellistset dt{
  font-size: 1rem;
  font-weight: normal;
  color: #3E3E3E;
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  font-family: inherit;
  position: relative;
}
#hotellistset dt::before{
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 7px;
  background: url('data:image/svg+xml;utf8,<svg width="13" height="13" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 13,6.5 0,13" fill="%23F39CA8"/></svg>') no-repeat center/contain;
  vertical-align: middle;
}
#hotellistset dt a{
  color: #56351e;
  font-weight: normal;
  font-size: 1rem;
  transition: color .13s;
}
#hotellistset dt a:hover{
  color: #d25371;
}
#hotellistset dd{
  color: #85796e;
  font-size: 1rem;
  margin: 0 0 8px 20px;
  padding: 0 0 2px;
  font-family: "Meiryo", Arial, sans-serif;
  letter-spacing: 1px;
}

/* =============================================================
   20. Footer / Brand Footer
   ============================================================= */
.site-footer {
  width: 1280px;
  margin: 50px auto 0;
}
.footer {
  background: #fff;
  color: #4e3015;
  padding: 24px 0 16px;
  margin-top: 45px;
  font-size: 13px;
  border-top: 1px solid #eee;
}
.footer-banner .footer-banner-inner{
  background: #321d09;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 30px;
  flex-wrap: wrap;
}
.footer-block{
  min-width: 200px;
  font-size: 14px;
}
.block-left { flex: 4 4 0; }
.block-center { flex: 4 4 0; }
.block-right { flex: 2 2 0; padding-left: 10px; }
.block-left p,
.block-right p { margin: 0; }
.logo-white { width: 380px; margin-bottom: 10px; }
.footer-banner .footer-banner-inner .reserve-button{
  text-align: center;
  font-size: 1.1rem;
  width: 100%;
  display: inline-block;
  border-radius: 8px;
  background: #ff8600;
  color: #fff;
  margin: 0 0 20px;
  padding: 15px;
}
.footer-banner .footer-banner-inner .reserve-button:hover{
  background: #F9C07D;
  color: #000;
}
.footer-nav{
  color:#7e5a3d;
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
}
.footer-nav a,
.block-right a {
  color: #fff;
  font-size: .9rem;
}
.brand-footer-inner{
  display: flex;
  background: #3b220c;
  color: #fff;
  padding: 20px 15px 10px 25px;
  text-align: left;
  font-size: 13px;
}
.brand-footer-inner .brand-box{
  border: 1px solid #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  margin-bottom: 10px;
  position: relative;
}
.brand-footer-inner .brand-link{
  display: flex;
  align-items: center;
  color: #fff;
}
.brand-footer-inner .brand-link img{
  height: 50px;
  margin-right: 15px;
  display: block;
}
.brand-footer-inner .external-icon{
  margin-left: 10px;
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 14px;
}
.brand-footer-inner .brand-description{
  margin: 10px 0 0 15px;
  font-size: 13px;
}
.brand-footer .copyright{
  font-size: 12px;
  text-align: center;
  padding: 5px 0;
}


/* =============================================================
   FIX: footer が横にはみ出す問題（+66px）
   - inner の固定幅 + padding で 1280px を超えているケースを潰す
============================================================= */

/* フッター系のコンテナは padding を含めて幅計算する */
.site-footer,
.site-footer * {
  box-sizing: border-box;
}

/* 内側ラッパが固定幅のときでも、画面幅を超えないようにする */
.site-footer .footer-banner-inner,
.site-footer .brand-footer-inner,
.site-footer .hotel-list-area,
.site-footer #hotellistset {
  max-width: 100%;
}

/* flex子要素が “最小幅を持って縮まない” 問題を潰す（地味に効く） */
.site-footer .footer-banner-inner,
.site-footer .brand-footer-inner {
  min-width: 0;
}

/* inner が width:1280px 固定なら max-width 運用に差し替え */
.site-footer .footer-banner-inner,
.site-footer .brand-footer-inner {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}


/* =============================================================
   21. Flatpickr (Calendar) Custom
   ============================================================= */
.date-wrapper .flatpickr-calendar{
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
}
.flatpickr-calendar .flatpickr-months{
  border-radius: 6px 6px 0 0;
  background: #5c422a !important;
  border: 1px solid #5C422A !important;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month,
.flatpickr-calendar .flatpickr-months .flatpickr-year{
  color:#fff !important;
}
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month{
  color:#fff !important;
}
.flatpickr-calendar .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-next-month svg{
  fill:#fff !important;
}
.flatpickr-day{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 40px !important;
  width: 40px !important;
  line-height: 40px !important;
  text-align: center !important;
  font-size: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: top !important;
}
.flatpickr-day.inRange{
  background: #ffe5c4 !important;
  color: #321d09 !important;
  border-color: #ffe5c4 !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange{
  background: #ff8600 !important;
  border-color: #ff8600 !important;
  color: #fff !important;
  box-shadow: none !important;
}
.flatpickr-day.startRange:not(.endRange){
  border-top-left-radius: 999px !important;
  border-bottom-left-radius: 999px !important;
}
.flatpickr-day.endRange:not(.startRange){
  border-top-right-radius: 999px !important;
  border-bottom-right-radius: 999px !important;
}
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover{
  background: #ff8600 !important;
  color: #fff !important;
}
.flatpickr-day.inRange:hover{
  background: #ffe5c4 !important;
  color: #321d09 !important;
}
.flatpickr-day:hover:not(.selected):not(.startRange):not(.endRange):not(.inRange){
  background: transparent !important;
  color: #332 !important;
}
.flatpickr-day.saturday{
  color:#1e88e5 !important;
}
.flatpickr-day.sunday{
  color:#e53935 !important;
}

/* 祝日（後勝ち定義のみ残す） */
.flatpickr-day.holiday{
  background: #fde8ef !important;
  color: #d60045 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

/* ホバー */
.flatpickr-day.holiday:not(.selected):not(.startRange):not(.endRange):not(.inRange):hover{
  background: #f8bfd0 !important;
  color: #b00037 !important;
}

/* 範囲内 */
.flatpickr-day.holiday.inRange{
  background: #f7cddd !important;
  color: #b00037 !important;
}
.flatpickr-day.holiday.inRange:hover{
  background: #f3b3c7 !important;
}

/* 範囲の端・単体選択 */
.flatpickr-day.holiday.startRange:not(.endRange),
.flatpickr-day.holiday.endRange:not(.startRange),
.flatpickr-day.holiday.startRange.endRange,
.flatpickr-day.holiday.selected{
  background: #d60045 !important;
  color: #fff !important;
}

/* 開始日（左だけ丸） */
.flatpickr-day.holiday.startRange:not(.endRange){
  border-radius: 999px 0 0 999px !important;
}

/* 終了日（右だけ丸）★今回追加したい形 */
.flatpickr-day.holiday.endRange:not(.startRange){
  border-radius: 0 999px 999px 0 !important;
}

/* 単独選択 or start=end のときは完全な丸 */
.flatpickr-day.holiday.startRange.endRange,
.flatpickr-day.holiday.selected{
  border-radius: 999px !important;
}

/* 無効祝日 */
.flatpickr-day.holiday.flatpickr-disabled,
.flatpickr-day.holiday.flatpickr-disabled:hover{
  background: #fde8ef !important;
  color: #e0a3b0 !important;
  opacity: 1 !important;
}

.flatpickr-day.flatpickr-disabled.saturday,
.flatpickr-day.flatpickr-disabled.sunday,
.flatpickr-day.flatpickr-disabled.holiday,
.flatpickr-day.notAllowed.saturday,
.flatpickr-day.notAllowed.sunday,
.flatpickr-day.notAllowed.holiday{
  background:none !important;
  color:#ccc !important;
  opacity:.5 !important;
}
.flatpickr-weekdays .flatpickr-weekday:nth-child(1){
  color:#e53935 !important;
}
.flatpickr-weekdays .flatpickr-weekday:nth-child(7){
  color:#1e88e5 !important;
}
.flatpickr-calendar::before,
.flatpickr-calendar::after,
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after{
  display:none !important;
}
.flatpickr-calendar{
  z-index: 310 !important;
  margin:0 !important;
}
.flatpickr-wrapper{
  position:static !important;
}

/* 選択中・範囲内の土日は必ず白文字にする（色上書き） */
.flatpickr-day.saturday.selected,
.flatpickr-day.saturday.startRange,
.flatpickr-day.saturday.endRange,
.flatpickr-day.sunday.selected,
.flatpickr-day.sunday.startRange,
.flatpickr-day.sunday.endRange{
  color:#fff !important;
}



/* flatpickr 年入力の上下スピンボタンを消す */
.flatpickr-calendar .numInput.cur-year {
  -moz-appearance: textfield;      /* Firefox 用：数値入力の矢印を消す */
}

/* Chrome / Edge / Safari 用 */
.flatpickr-calendar .numInput.cur-year::-webkit-inner-spin-button,
.flatpickr-calendar .numInput.cur-year::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* 月・年セレクトの見た目（お好みで） */
.flatpickr-calendar .flatpickr-custom-month,
.flatpickr-calendar .flatpickr-custom-year {
  border: none;
  background: transparent;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 0 0.25em;
  outline: none;
  /* appearance: none; */
}
/* ▼をネイティブ表示させる */
@media (min-width: 768px) {
  .flatpickr-calendar .flatpickr-custom-month,
  .flatpickr-calendar .flatpickr-custom-year {
    -webkit-appearance: menulist-button !important;
    appearance: auto !important;
  }
}

/* ▼マークを自前で描く例 */
.flatpickr-calendar .flatpickr-current-month {
  position: relative;
}



/* ===== flatpickr ヘッダー中央寄せ調整 ===== */

/* 左右2つの月ブロックを 1:1 で分割 */
.flatpickr-calendar .flatpickr-months {
  display: flex;
}

.flatpickr-calendar .flatpickr-month {
  flex: 1 1 0;
}

/* 月 + 年 セレクトを中央に寄せる */
.flatpickr-calendar .flatpickr-current-month {
  display: flex;
  align-items: center;
  justify-content: center;  /* ★中央寄せ */
  gap: 0.25em;
}

/* 月・年セレクトの余計なマージンを消す */
.flatpickr-calendar .flatpickr-custom-month,
.flatpickr-calendar .flatpickr-custom-year {
  margin: 0;
}

/* PCカレンダー：年の黒い上下矢印だけ非表示にする */
.flatpickr-calendar .flatpickr-current-month .numInputWrapper .arrowUp,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper .arrowDown {
  display: none !important;
}

/* =============================================================
   22. UI: Back-to-Top Button（安全版）
   - 100vw を使わない（横伸び防止）
   - is-visible / is-show 両対応
   ============================================================= */

.page-wrap{
  max-width:1280px;
  margin:0 auto;
  position:relative;
}

#toTopBtn{
  position: fixed;
  bottom: 80px;
  right: 20px;                 /* ← まずは常に右20px */
  z-index: 2147483647;         /* ← 翻訳ウィジェットに勝つ */

  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: rgba(0,0,0,.72);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;

  font-size: 0;
  line-height: 1;
  color: transparent;
  cursor: pointer;
}

/* 画面が広い時だけ、1280幅基準に寄せる（100%ベースで横伸びしない） */
@media (min-width: 1320px){
  #toTopBtn{
    right: calc((100% - 1280px)/2 + 20px);
  }
}

#toTopBtn.is-visible,
#toTopBtn.is-show{
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

#toTopBtn:hover{
  background: rgba(0,0,0,.88);
  transform: scale(1.06);
}

#toTopBtn::before{
  content:"";
  --tri-w: 10px;
  --tri-h: 14px;
  width:0;
  height:0;
  border-left:  var(--tri-w) solid transparent;
  border-right: var(--tri-w) solid transparent;
  border-bottom:var(--tri-h) solid #fff;
  transform: translateY(-0.5px);
}




/* =============================================================
   23. Helpers / Utilities
   ============================================================= */
.margin-top-10 { margin-top: 10px !important; }
.margin-top-20 { margin-top: 20px !important; }
.margin-top-30 { margin-top: 30px !important; }
.margin-bottom-10 { margin-bottom: 10px !important; }
.margin-bottom-20 { margin-bottom: 20px !important; }
.margin-bottom-30 { margin-bottom: 30px !important; }
.disabled-block { opacity: .5; pointer-events: none; }
.disabled-label { color: #888 !important; }

/* news / faq フッターの線を消す（後勝ち） */
.news-footer { border-top: none; }
.faq-footer  { border-top: none; }

/* 汎用：先頭行はそのままで、2行目以降だけ下げる */
.text-indent-second {
  text-indent: -1em;
  padding-left: 1em;
}

/* =============================================================
   24. People Modal & Trigger
   ============================================================= */
.people-modal{
  position: fixed;
  inset: 0;
  z-index: 310;
  background: transparent;
  display: none;
  pointer-events: none;
}
.people-modal[hidden] {
  display: none !important;
}
.people-modal:not([hidden]) {
  display: block;
}
.people-modal{
  pointer-events: auto;
}
.people-modal__panel{
  pointer-events: auto;
}
.people-modal__panel{
  position: fixed;
  width: min(560px, calc(100vw - 32px));
  max-width: 96vw;
  max-height: min(80vh, 560px);
  overflow: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,.20);
  padding: 12px 16px;
}
.people-modal__head,
.people-modal__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 10px;
  border-bottom: 1px solid #eee;
}
.people-modal__close{
  appearance: none;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.people-modal__foot,
.people-modal__footer{
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 0 0;
  border-top: 1px solid #eee;
}
.people-modal__body{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
  row-gap: 14px;
  padding: 12px 0 8px;
}
.people-field{ margin: 0; }
.people-modal__body > .people-field{ grid-column: span 1; }
.people-modal__body > .people-split{ grid-column: 1 / -1; }
.people-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.people-modal__body > .people-preview,
.people-modal__body > .pm-preview {
  grid-column: 1 / -1;
  order: 99;
  width: 100%;
  margin-top: 2px;
  padding: 10px 14px;
  border: 1px dashed #c1b39a;
  border-radius: 8px;
  background: #fff8ef;
  color: #543a15;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .95rem;
}
.people-field select{
  width: 100%;
  height: 44px;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #faf8f7;
  font-size: 1rem;
}
.people-btn{
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: filter .15s ease;
}
.people-btn--ghost  { background:#fff; border:1px solid #ccc; color:#3b2a16; }
.people-btn--primary{ background:#f7931e; border:none; color:#fff; }
.people-btn--ghost:hover   { filter: brightness(.97); }
.people-btn--primary:hover { filter: brightness(1.05); }
.people-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  height:44px;
  min-width:220px;
  padding:0 14px;
  border:1px solid #ccc;
  border-radius:8px;
  background:#faf8f7;
  color:#543a15;
  font-size:1rem;
}
.people-trigger .icon{ font-size:1.2rem; }
.people-trigger .chevron{ font-size:1.2rem; margin-left:8px; }

/* =============================================================
   25. Link Banner & Consolidated Sections
   ============================================================= */
.link-banner{
  padding-bottom: 15px;
  margin-bottom:30px;
}
.link-banner-inner{
  background: #e9dfd5;
  padding: 20px 0;
}
.link-banner-inner ul{
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
}
.link-banner-inner li{
  display: flex;
  align-items: center;
  justify-content: center;
}
.link-banner a{
  display:block;
  position:relative;
  overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  transform:translateZ(0);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),
             box-shadow .35s ease;
}
.link-banner a:hover,
.link-banner a:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 6px 18px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
}
.all-view-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  background: #fff;
  color: #333;
  border: 1px solid #333;
  font-size: 1rem;
  letter-spacing: 2px;
  font-family: inherit;
  cursor: pointer;
  display: block;
  padding: 10px 36px 10px 20px;
  box-shadow: 0 1px 8px #d7c2aa44;
  transition: background .14s, color .14s, border-color .14s;
  z-index: 2;
}
.all-view-btn:hover {
  background: #a08036;
  color: #fff;
  border-color: #a08036;
}
.all-view-btn::after{
  content:"";
  position:absolute;
  top:50%;
  right:12px;
  width:.9em;
  height:.9em;
  transform:translateY(-50%);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4l12 8-12 8z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4l12 8-12 8z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/contain;
}
.room-feature .all-view-btn{
  margin:0 20px 20px 0;
} 
.news-footer .all-view-btn,
.faq-footer .all-view-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.reserve-btn a,
.check-btn a{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  font-size: 1rem;
  letter-spacing: 1px;
  line-height: 1.2;
  border-radius: 8px;
  border: none;
  padding: 0 30px;
  cursor: pointer;
  transition: background .12s, color .12s, filter .14s;
}
.reserve-btn a{
  border-radius: 8px;
  background: #ff8600;
  color: #fff;
  margin-right: 20px;
  padding: 0 40px;
}
.reserve-btn a:hover{
  background: #F9C07D;
  color: #000;
}
.check-btn a{
  border: 1px solid #29a9e0;
  border-radius: 8px;
  color: #29a9e0;
}
.check-btn a:hover{
  background: #e2f7ff;
  color: #1997c5;
}
.global-menu > li.menu-item > a,
.reserve-btn a,
.check-btn a,
.rwithslink a,
.sidebar-search-btn,
.footer-banner .reserve-button,
.brand-footer-inner .brand-link,
.all-view-btn{
  text-decoration: none;
}
.global-menu > li.menu-item > a:hover,
.reserve-btn a:hover,
.check-btn a:hover,
.rwithslink a:hover,
.sidebar-search-btn:hover,
.footer-banner .reserve-button:hover,
.brand-footer-inner .brand-link:hover,
.all-view-btn:hover{
  text-decoration: none;
}

/* =============================================================
   26. Responsive
   ============================================================= */
@media (max-width: 1280px) {
  .header-inner {
    width: 100vw;
    min-width: 0;
    flex-wrap: wrap;
    padding: 0 15px;
  }
  .logo-svg {
    width: 200px;
  }
  .header-tel {
    font-size: 1.1rem;
    min-width: 130px;
  }
  .header-btn-wrap {
    height: 50px;
  }
  .reserve-btn,
  .check-btn{
    font-size: 18px;
    height: 50px;
    padding: 0 20px;
    border-radius: 8px;
  }
  .global-menu{
    width: 100vw;
  }
}
@media (max-width: 1200px) {
  .related-hotels-list {
    flex-direction: column;
    gap: 32px;
    align-items: center;
  }
  .related-hotel {
    max-width: 95vw;
  }
  .related-hotel-title,
  .related-hotel-desc {
    font-size: 1.1rem;
  }
  .related-hotel img {
    width: 85vw;
    max-width: 370px;
    height: auto;
  }
  #hotellistset ul{
    flex-direction: column;
    gap: 28px 0;
  }
  #hotellistset ul > li{
    max-width: 100%;
  }
}
@media (min-width: 960px) {
  .search_box_t { position: relative; }
  .search_box__t_inner {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--search-inner-top, 0px);
    z-index: 10;
    background: #fff;
  }
  .search_box_t {
    min-height: var(--search-collapsed-h, 560px);
    margin-top: 30px;
  }
}

/* 「ご利用部屋数」プルダウン */
.search_box__t_inner #roomSelect {
  width: 100px; 
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #faf8f7;
  color: #543a15;
  font-size: 1rem;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* プルダウンと「室」の文字を横並びにする */
.search_box__t_inner #roomCountBlock dd {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* =============================================================
   27. Recruit（PC 兼 共通）—  /mu-plugins/trend-assets/common/css/trend-recruit.css
   ============================================================= */

/* =============================================================
   28. /room：カード & MetaSlider レイアウト /mu-plugins/trend-assets/common/css/trend-room.css
   ============================================================= */


/* =============================================================
   29. /access：年表UI（路線・徒歩・バス・車）/mu-plugins/trend-assets/common/css/trend-access.css
   ============================================================= */


/* =============================================================
   30. Facilities & Breakfast（館内設備 & 朝食）/mu-plugins/trend-assets/common/css/trend-service.css
   ============================================================= */


/* =============================================================
   31. /qa/ ページ専用 Easy Accordion 幅調整
   ============================================================= */
/* /qa/ ページ限定（body に page-name-qa が付く想定） */
body.page-name-qa #page .entry-content > div[id^="sp_easy_accordion-"]{
  max-width: 900px;
  margin: 0 auto;
  padding-inline: 12px;
}

/* =============================================================
   32. MetaSlider/FlexSlider 共通リセット
   ============================================================= */
/* コンタクトフォームは /mu-plugins/common/css/trend-contact.css */

/* MetaSlider/FlexSlider のデフォルト余白をなくす or 調整 */
.metaslider .flexslider { margin: 0 !important; }
.metaslider { margin-bottom: 0 !important; }
.metaslider .slides { margin: 0 !important; padding: 0; }

/* back-to-top 強制（上書き合戦回避） */
/* #toTopBtn{
  position: fixed !important;
  bottom: 80px !important;
  right: max(16px, calc((100vw - 1280px)/2 + 20px)) !important;
  z-index: 1000 !important;

  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  border: 3px solid #fff !important;
  background: rgba(0,0,0,.72) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;

  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, right .25s ease;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 0 !important;
  line-height: 1 !important;
  color: #fff !important;
  cursor: pointer !important;
}

#toTopBtn[hidden]{ display:none !important; }

#toTopBtn.is-visible{
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

#toTopBtn::before{
  content:"" !important;
  --tri-w: 10px;
  --tri-h: 14px;
  width:0 !important;
  height:0 !important;
  border-left:  var(--tri-w) solid transparent !important;
  border-right: var(--tri-w) solid transparent !important;
  border-bottom:var(--tri-h) solid #fff !important;
  transform: translateY(-0.5px) !important;
} */