/* ======================
   custom.css - 追加スタイル
   既存のstyle.cssを上書きする修正用
   ====================== */

/* -----------------------
   WP管理バー表示時のナビバー調整
   ログイン中は管理バー(32px)分だけ下げる
   ----------------------- */
body.admin-bar header .pc-nav {
  top: 32px !important;
}

body.admin-bar header .sp-only.sp-menu {
  top: 32px !important;
}

/* SPハンバーガーボタンに金色背景を付けてボタン位置を視認しやすくする */
header .sp-only.sp-menu #hamburger {
  background-color: #B49531 !important;
  border-radius: 0 0 0 4px;
}

/* SPハンバーガー本体は position:fixed; top:0 で固定されてるのでadmin-bar分下げる */
body.admin-bar header .sp-only.sp-menu #hamburger {
  top: 32px !important;
}

/* SPロゴ(鴨川ロゴ)も position:absolute; top:0 なのでadmin-bar分下げる */
body.admin-bar header .sp-only.sp-menu #logo-sp-brown,
body.admin-bar header .sp-nav.active #logo-sp-white {
  top: 32px !important;
}

/* SPハンバーガー展開メニュー(.sp-nav.active)もadmin-bar分下げる */
body.admin-bar header .sp-nav.active {
  top: 32px !important;
  height: calc(100% - 32px) !important;
}

@media (max-width: 782px) {
  body.admin-bar header .pc-nav {
    top: 46px !important;
  }
  body.admin-bar header .sp-only.sp-menu {
    top: 46px !important;
  }
  body.admin-bar header .sp-only.sp-menu #hamburger {
    top: 46px !important;
  }
  body.admin-bar header .sp-only.sp-menu #logo-sp-brown,
  body.admin-bar header .sp-nav.active #logo-sp-white {
    top: 46px !important;
  }
  body.admin-bar header .sp-nav.active {
    top: 46px !important;
    height: calc(100% - 46px) !important;
  }
}

/* -----------------------
   FVオーバーレイ (ニュースティッカー + 検索パネル)
   両方を1つのflexコンテナで管理して右下配置
   広いとき: 1行(ニュース ← 検索)、狭くなったら自動で2段に折り返し
   ----------------------- */
#index01 {
  position: relative !important;
}

.fv-overlay {
  position: absolute !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 100 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  max-width: calc(100% - 40px);
}

/* ニュースティッカーと検索パネル: 共通の透過白背景 + 影 */
.fv-news-ticker,
#index01 .fv-overlay .search-panel-frame {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18) !important;
  box-sizing: border-box !important;
}

.fv-news-ticker {
  position: relative !important;
  overflow: hidden !important;
  width: 350px;
  height: 96px;
  flex-shrink: 0;
}

/* 検索パネル外側(.search-panel-frame): ラッパーとして機能
   - フレーム自体の高さ96px、上下パディングで余白確保
   - 中の.directin-sp-formを縦中央に配置
   d-reserveが.search-panel-frameの中に直接<form>を注入するので、
   .search-panel-frame自体をflex centerコンテナにする */
#index01 .fv-overlay .search-panel-frame {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 6px 10px !important;
  height: 96px;
}

/* 中身のフォーム: d-reserve外部CSSのpadding/marginをリセット
   フォーム内部の要素は下寄せ(label→input構造をきれいに揃える) */
#index01 .fv-overlay .search-panel-frame .directin-sp-form {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0;
  width: 100%;
  align-items: flex-end !important;
}

#index01 .fv-overlay .search-panel-frame .directin-sp-form > div {
  margin: 0 4px !important;
}

/* 日付入力フィールド: カレンダーアイコンを完全削除(被り問題の根本解決)
   ラベル「宿泊日」が上にあるので機能上アイコンは不要 */
#index01 .fv-overlay .search-panel-frame .directin-sp-form-date-input-group input[type="text"],
#index01 .fv-overlay .search-panel-frame .directin-sp-form-date-input input[type="text"] {
  background-image: none !important;
  font-size: 13px !important;
  width: 300px !important;
  height: 34px !important;
  padding: 0 10px !important;
  line-height: 34px !important;
  box-sizing: border-box !important;
}

/* 人数・客室数のセレクト: 高さ34pxに統一 */
#index01 .fv-overlay .search-panel-frame .directin-sp-form-input label input[type="text"],
#index01 .fv-overlay .search-panel-frame .directin-sp-form-input label select {
  padding: 0 8px !important;
  height: 34px !important;
  line-height: 34px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
}

/* 検索ボタンも同じ34px高さ・親のalign-items:flex-endで下寄せ */
#index01 .fv-overlay .search-panel-frame .directin-sp-form-submit-button {
  padding-top: 0 !important;
  align-self: flex-end !important;
}

#index01 .fv-overlay .search-panel-frame .directin-sp-form-submit-button button {
  padding: 0 18px !important;
  height: 34px !important;
  line-height: 34px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* 日程未定チェックボックスを隠す。検索ボタンのラベルで代替する */
#index01 .fv-overlay .search-panel-frame .directin-sp-form-nodate-checkbox,
#index01 .fv-overlay .search-panel-frame .directin-sp-form-checkbox-group {
  display: none !important;
}

.fv-news-item {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 16px 20px;
  text-decoration: none;
  color: #333;
  transition: transform 0.4s ease, opacity 0.4s ease;
  transform: translateY(100%);
  opacity: 0;
  box-sizing: border-box;
}

.fv-news-item.active {
  display: block;
  transform: translateY(0);
  opacity: 1;
}

.fv-news-item.next {
  display: block;
  transform: translateY(100%);
  opacity: 0;
}

.fv-news-item.out {
  display: block;
  transform: translateY(-100%);
  opacity: 0;
}

.fv-news-item:hover {
  background-color: rgba(180, 149, 49, 0.1);
}

/* ニュース一覧へのリンク: 日付の右側(右端)に配置 */
.fv-news-all-link {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 2;
  font-size: 12px;
  color: #B49531;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: opacity 0.2s ease;
}
.fv-news-all-link:hover {
  opacity: 0.7;
}

.fv-news-date {
  display: block;
  font-size: 12px;
  color: #888;
  margin-bottom: 4px;
}

.fv-news-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

/* タブレット以下(≤980px): SP版
   - FV画像の最小高さを580pxに引き上げ(従来400px=4.5割程度だった)
   - お知らせと検索パネルを縦並び、お知らせを上、検索を下
   - 980-600px: 右寄せのまま自然幅(タブレット)
   - ≤600px: フル幅(スマホ) */
@media (max-width: 980px) {
  #index01 .swiper .swiper-wrapper .swiper-slide figure img {
    min-height: 580px !important;
    max-height: 700px !important;
    object-fit: cover;
  }

  .fv-overlay {
    bottom: 16px !important;
    right: 20px !important;
    left: auto !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    max-width: calc(100% - 40px);
  }

  /* お知らせを検索パネルの上に表示(DOM順は search→news なので order で逆転) */
  .fv-news-ticker {
    order: 1 !important;
    width: 350px !important;
    height: 60px;
    flex-shrink: 0 !important;
  }
  #index01 .fv-overlay .search-panel-frame {
    order: 2 !important;
    width: 350px !important;
    height: auto !important;
    padding: 8px 10px 12px !important;
    align-items: stretch !important;
  }

  /* 日付入力ラッパーが右端まで広がるよう padding/margin を完全リセット */
  #index01 .fv-overlay .search-panel-frame .directin-sp-form-date-input,
  #index01 .fv-overlay .search-panel-frame .directin-sp-form-date-input-group .directin-sp-form-input {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .fv-news-item {
    padding: 12px 16px;
  }

  .fv-news-all-link {
    top: 12px;
    right: 16px;
    font-size: 11px;
  }

  .fv-news-date {
    font-size: 11px;
  }

  .fv-news-title {
    -webkit-line-clamp: 1;
    font-size: 13px;
  }

  /* SP検索パネル: 2行構造
     [行1] 宿泊日(横幅いっぱい)
     [行2] 人数 / 客室数 / 検索ボタン
     内側form自体のpaddingは0、外側.search-panel-frame側で余白を持つ */
  #index01 .fv-overlay .search-panel-frame .directin-sp-form {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: flex-end !important;
    padding: 0 !important;
    min-height: 0;
  }

  /* [行1] 宿泊日 (アイコンなし、フル幅) */
  #index01 .fv-overlay .search-panel-frame .directin-sp-form-date-input-group {
    flex: 1 1 100% !important;
    margin: 0 !important;
    flex-direction: row !important;
  }
  #index01 .fv-overlay .search-panel-frame .directin-sp-form-date-input {
    flex: 1 1 auto !important;
  }
  #index01 .fv-overlay .search-panel-frame .directin-sp-form-date-input-group .directin-sp-form-date-input input[type="text"] {
    width: 100% !important;
    font-size: 14px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    height: 36px !important;
    line-height: 36px !important;
    background-image: none !important;
  }

  /* 行2の入力・ボタンは高さ36pxで揃える */
  #index01 .fv-overlay .search-panel-frame .directin-sp-form-input label input[type="text"],
  #index01 .fv-overlay .search-panel-frame .directin-sp-form-input label select {
    height: 36px !important;
    line-height: 36px !important;
  }

  /* [行2] 人数・客室数 (左寄せ、自然幅) */
  #index01 .fv-overlay .search-panel-frame .directin-sp-form-guest-room-input-group {
    flex: 0 0 auto !important;
    margin: 10px 8px 0 0 !important;
  }
  #index01 .fv-overlay .search-panel-frame .directin-sp-form-guest-room-input-group .directin-sp-form-guest-room-input input[type="text"] {
    width: 88px !important;
  }

  /* [行2] 検索ボタン (右へ伸びる) */
  #index01 .fv-overlay .search-panel-frame .directin-sp-form-submit-button {
    flex: 1 1 auto !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
  }
  #index01 .fv-overlay .search-panel-frame .directin-sp-form-submit-button button {
    width: 100% !important;
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 16px !important;
  }
}

/* スマホ幅(≤600px): フル幅で表示、パディングも詰める */
@media (max-width: 600px) {
  .fv-overlay {
    right: 12px !important;
    left: 12px !important;
    align-items: stretch !important;
    max-width: none !important;
  }
  .fv-news-ticker {
    width: 100% !important;
  }
  #index01 .fv-overlay .search-panel-frame {
    width: 100% !important;
    padding: 8px 10px 12px !important;
  }
}

/* 超狭幅(<=400px): 人数・客室と検索ボタンも縦並びに */
@media (max-width: 400px) {
  #index01 .fv-overlay .search-panel-frame .directin-sp-form-guest-room-input-group {
    flex: 1 1 100% !important;
    margin: 10px 0 0 !important;
  }
  #index01 .fv-overlay .search-panel-frame .directin-sp-form-submit-button {
    flex: 1 1 100% !important;
  }
}

/* -----------------------
   FV直下バナー (納涼床スイートなど特設プラン誘導)
   ----------------------- */
#fv-banner {
  width: 100%;
  padding: 30px 0;
  text-align: center;
  background-color: #f3f2ea;
}

#fv-banner .fv-banner-link {
  display: inline-block;
  max-width: 900px;
  width: 92%;
  transition: opacity 0.3s ease, transform 0.2s ease;
}

#fv-banner .fv-banner-link:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

#fv-banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

@media (max-width: 980px) {
  #fv-banner {
    padding: 20px 0;
  }
  #fv-banner .fv-banner-link {
    width: 94%;
  }
}

/* -----------------------
   #index08 リンクボタンセクション修正
   問題: SP版でボタン幅が狭く1文字ずつ改行される
   対応: タブレット以下で縦並び、vwでフォントサイズ調整
   ----------------------- */

#index08 div {
  justify-content: space-evenly !important;
  padding: 55px 0 !important;
}

#index08 div p {
  width: 30% !important;
}

#index08 div p a {
  writing-mode: horizontal-tb !important;
  font-size: clamp(14px, 2vw, 24px) !important;
  white-space: nowrap !important;
  padding: 16px 10px !important;
}

#index08::after {
  width: 100% !important;
  left: 0 !important;
}

/* タブレット・スマホ: 縦並び（元のCSSは980pxで切り替え） */
@media (max-width: 980px) {
  #index08 div {
    min-height: auto !important;           /* 300px固定を解除 */
    justify-content: center !important;
    flex-direction: column !important;
    width: 90% !important;
    padding: 40px 0 !important;
    gap: 20px !important;
  }

  #index08 div p {
    width: 80% !important;
    max-width: 300px !important;
    margin: 0 !important;
  }

  #index08 div p a {
    font-size: clamp(14px, 4vw, 18px) !important;
    padding: 14px 10px !important;
  }
}

/* -----------------------
   お知らせ投稿テキスト調整
   ----------------------- */
#news04 article .main .wrapper .inner p {
  padding: 50px 4% 40px !important;
  line-height: 2.2 !important;
}

@media (max-width: 980px) {
  #news04 article .main .wrapper .inner p {
    padding: 35px 4% 30px !important;
    line-height: 2.0 !important;
  }
}

/* -----------------------
   お知らせ詳細ページ 予約サイトCTAボタン
   投稿ごとに reservation_url が設定されている時のみ表示。
   ヘッダーの Reserve ボタン（.book a）と同じ配色: #b49531 → hover #d6b54d
   ----------------------- */
.news-reservation-cta {
  margin: 40px auto 60px;
  padding: 0 20px;
  text-align: center;
  max-width: 720px;
}

.news-reservation-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 320px;
  padding: 18px 36px;
  background-color: #b49531;
  color: #fff !important;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-radius: 2px;
  box-shadow: 0 4px 14px rgba(180, 149, 49, 0.18);
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.news-reservation-cta__btn:hover {
  background-color: #d6b54d;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(180, 149, 49, 0.28);
}

.news-reservation-cta__arrow {
  display: inline-block;
  font-size: 18px;
  transition: transform 0.3s ease;
}

.news-reservation-cta__btn:hover .news-reservation-cta__arrow {
  transform: translateX(4px);
}

.news-reservation-cta__sub {
  margin: 12px 0 0;
  font-size: 12px;
  color: #888;
  letter-spacing: 0.05em;
}

@media (max-width: 600px) {
  .news-reservation-cta {
    margin: 30px auto 40px;
  }
  .news-reservation-cta__btn {
    min-width: 0;
    width: 100%;
    padding: 16px 20px;
    font-size: 15px;
  }
}