/*
 Theme Name:   Vogue Child
 Description:  vogue_tcd051の子テーマです
 Author:TCD
 Template:     vogue_tcd051
 Version:      1.0.0
*/

/* ここから下に、上書きしたい独自のCSSを追加していきます */

/* ============================================================
   489ban 宿泊検索モジュール - オーシャンビューイン希望ヶ丘
   ============================================================

/* ---- 489ban標準CSS(ベース。一部プロパティは下部で上書き) ---- */
#search_489ban dl{ display: inline-table; margin: 0 0 5px; width: 100%;}
#search_489ban dt,
#search_489ban dd{ margin: 0; padding: 0; display: table-cell; vertical-align: top;}
#search_489ban dt{ width: 80px;}
#search_489ban dd{ }

#search_489ban dd span,
#search_489ban label,
#search_489ban input,
#search_489ban select{ display: inline-block; margin: 2px 2px 5px;}

#search_489ban ul{}
#search_489ban li{ margin-bottom: 3px; list-style: none; display: inline-block;}

#search_489ban .inbox_489ban{ clear: both;}
#search_489ban .inbox_489ban:after {
    clear: both; content: "."; display: block;
    height: 0; font-size: 0; visibility: hidden;
}

#search_489ban .stay_489ban,
#search_489ban .room_489ban,
#search_489ban .person_489ban{ width: 50%; float: left;}

#search_489ban .stay_489ban dt,
#search_489ban .room_489ban dt,
#search_489ban .person_489ban dt{ width: auto;}

/* 子供人数入力(年齢選択サブフォーム。子供人数>0で動的に出現する想定。未検証) */
#search_489ban .child_489ban{
    border-bottom: 1px dotted #dedede;
}
#search_489ban .child_489ban:first-of-type{
    padding: 5px 0 0;
    border-top: 1px dotted #dedede;
}
#search_489ban .child_489ban:last-of-type{
    margin: 0 0 10px; padding: 0 0 5px;
}
#search_489ban .child_489ban dt{ width: auto;}
#search_489ban .child_489ban dd{ width: 70px; vertical-align: middle;}
#search_489ban .child_489ban dt span{ display: block; font-size: 12px;}

#search_489ban .price_489ban dt{ width: 65px;}
#search_489ban .price_489ban div{ display: inline-block;}
#search_489ban .price_489ban span{ font-size: 12px;}

#search_489ban .tag_489ban,
#search_489ban .tag_489ban dt,
#search_489ban .tag_489ban dd{ width: 100%; display: block;}
#search_489ban .tag_489ban .tag_mode_489ban{ font-size: 13px;}

#search_489ban .child_input p{ text-align: center; margin: 0;}


/* ============================================================
   ここからカスタム上書き
   ベースの#search_489ban自体の見た目(290px固定・グレー背景・
   ボーダー)は無効化し、レイアウトはflexで再構築しています。
============================================================ */

#search_489ban{
  width: auto;
  max-width: none;
  padding: 0;
  background: none;
  border: none;
  box-sizing: border-box;
}

/* dl/dt/ddのテーブル構造を解除
   (date_489ban, room_489ban, person_489banのみ対象。
    child_489ban等の未確認要素はベースのテーブル構造のまま) */
#search_489ban .date_489ban,
#search_489ban .room_489ban,
#search_489ban .person_489ban{
  display: block;
  width: auto;
  float: none;
  margin: 0;
}
#search_489ban .date_489ban dt,
#search_489ban .date_489ban dd,
#search_489ban .room_489ban dt,
#search_489ban .room_489ban dd,
#search_489ban .person_489ban dt,
#search_489ban .person_489ban dd{
  display: block;
  width: auto;
  vertical-align: top;
}

#search_489ban dl dt label{
  display: block;
  font-size: 12px;
  letter-spacing: .05em;
  color: #8A8072;
  margin-bottom: 6px;
}

#search_489ban select,
#search_489ban input[type="date"]{
  border: 1px solid #C9BEAB;
  background: #fff;
  padding: 8px 10px;
  height: 40px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  color: #333;
  margin: 0; /* ベースの margin:2px 2px 5px を解除 */
}

#search_489ban dd span{ /* 「室」「名」などの単位 */
  font-size: 13px;
  color: #333;
}

#search_489ban select.digits,
#search_489ban #adult,
#search_489ban #children{
  width: 64px;
}

#search_489ban .date_489ban dd{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
#search_489ban .date_489ban dd label{ /* 日付未定チェックボックス */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  margin-left: 8px;
  white-space: nowrap;
}

#search_489ban .room_489ban dd,
#search_489ban .person_489ban dd{
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 大人・子供を横並びに(.inbox_489ban内に person_489ban が2つ並ぶケース) */
#search_489ban .inbox_489ban{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
#search_489ban .inbox_489ban .room_489ban,
#search_489ban .inbox_489ban .person_489ban{
  flex: 0 0 auto;
}

#search_489ban button[name="searchButton489ban"]{
  display: block;
  margin-left: auto;
  padding: 12px 36px;
  width: auto; /* ベースの width:100% を解除 */
  background: #27B9C6;
  color: #fff;
  border: none;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  letter-spacing: .1em;
  cursor: pointer;
  transition: background .3s ease;
}
#search_489ban button[name="searchButton489ban"]:hover{
  background: #1F949E;
}

/* ============================================================
   reserve-note: 検索モジュール(.reserve-block)の直後に置く、
   グループホテル空室カレンダーへの誘導文
============================================================ */
.reserve-note{
  max-width: 1180px;
  margin: 16px auto 0;
  padding: 14px 24px;
  background: #F0FBFC;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  color: #8A8072;
}
.reserve-note a{
  color: #333 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 4px;
}
.reserve-note a:hover{ color: #27B9C6 !important; }
.reserve-note .arrow{
  display: inline-block;
  margin: 0 4px 0 2px; /* 右に4px確保: hover時のtranslateX(4px)と同じ分だけ余白を持たせて重なりを防ぐ */
  transition: transform .3s ease;
}
.reserve-note a:hover .arrow{ transform: translateX(4px); }
.reserve-note p{
  margin: 0;
}
.reserve-note__main{
  font-size: 18px !important;
  line-height: 1.5 !important;
}
.reserve-note p + p{
  margin-top: 6px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}


/* ============================================================
   検索バー: 枠線で囲むだけの軽い見た目。1行に集約。
   HTML: <div class="reserve-block"> #search_489ban .link-wrap </div>
============================================================ */
.reserve-block{
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid #C9BEAB;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.reserve-block #search_489ban{
  flex: 1 1 auto;
}

#search_489ban form{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.reserve-block #search_489ban dl dt label{
  color: #8A8072;
  margin-bottom: 4px;
}
.reserve-block #search_489ban .date_489ban dd label{
  color: #8A8072;
}
.reserve-block #search_489ban select,
.reserve-block #search_489ban input[type="date"]{
  background: transparent;
  border: none;
  border-bottom: 1px solid #C9BEAB;
  border-radius: 0;
  color: #333;
  padding: 4px 2px;
  height: auto;
}
.reserve-block #search_489ban select.digits,
.reserve-block #search_489ban #adult,
.reserve-block #search_489ban #children{
  width: 48px;
}

.reserve-block #search_489ban button[name="searchButton489ban"]{
  margin-left: 0;
  padding: 10px 28px;
  background: #27B9C6;
  color: #fff;
}
.reserve-block #search_489ban button[name="searchButton489ban"]:hover{
  background: #1F949E;
  color: #fff;
}


/* ============================================================
   タブ(空室検索 / 航空券付き宿泊プラン / レンタカー付宿泊プラン)
   HTML: .tabs > ul.tab-list > li.tab-item(active) / .tab-content > .tab-panel(active)
   ※ active切替はJS(classList)側で制御。CSSは見た目のみ担当。
============================================================ */
.tabs{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.tabs .tab-list{
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border-bottom: 1px solid #C9BEAB;
}
.tabs .tab-item{
  flex: 1;
  padding: 14px 8px;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  letter-spacing: .04em;
  color: #8A8072;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease;
}
.tabs .tab-item:hover{ color: #333; }
.tabs .tab-item.active{
  color: #333;
  background: #F0FBFC;
  border-bottom-color: #27B9C6;
  font-weight: 700;
}

.tab-content .tab-panel{ display: none; }
.tab-content .tab-panel.active{ display: block; }

/* 航空券付き/レンタカー付きタブの中身(外部提携会社への案内) */
.tab-content .tab-panel:nth-child(2),
.tab-content .tab-panel:nth-child(3){
  padding: 24px 32px;
  border: 1px solid #C9BEAB;
  font-family: "Noto Sans JP", sans-serif;
}
.tab-panel p.linkA,
.tab-panel p.linkB{
  margin: 0 0 16px;
}
.tab-panel p.linkA a,
.tab-panel p.linkB a{
  display: inline-block;
  padding: 10px 28px;
  background: #27B9C6;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .05em;
  transition: background .3s ease;
}
.tab-panel p.linkA a:hover,
.tab-panel p.linkB a:hover{
  background: #1F949E;
}
.tab-content .tab-panel:nth-child(2) > p:not(.linkA),
.tab-content .tab-panel:nth-child(3) > p:not(.linkB){
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.8;
  color: #8A8072;
}
.tab-content .tab-panel:nth-child(2) dl,
.tab-content .tab-panel:nth-child(3) dl{
  display: grid;
  grid-template-columns: 96px 1fr;
  row-gap: 8px;
  margin: 0;
  padding-top: 16px;
  font-size: 13px;
  border-top: 1px solid #C9BEAB;
}
.tab-content .tab-panel:nth-child(2) dt,
.tab-content .tab-panel:nth-child(3) dt{
  color: #8A8072;
}
.tab-content .tab-panel:nth-child(2) dd,
.tab-content .tab-panel:nth-child(3) dd{
  margin: 0;
  color: #333;
  line-height: 1.6;
}

@media (max-width: 768px){
  .tabs .tab-item{ padding: 10px 6px; font-size: 12px; line-height: 1.4; }

  .tab-content .tab-panel:nth-child(2),
  .tab-content .tab-panel:nth-child(3){
    padding: 20px;
  }
  .tab-content .tab-panel:nth-child(2) dl,
  .tab-content .tab-panel:nth-child(3) dl{
    grid-template-columns: 80px 1fr;
  }
}


/* ============================================================
   link-wrap: 右側に添えるテキストリンク(2列×2行)
============================================================ */
.reserve-block .link-wrap{
  flex: 0 0 auto;
}
.link-wrap ul{
  display: grid !important;
  grid-template-columns: repeat(2, auto) !important;
  gap: 6px 28px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.link-wrap li{
  display: block !important;
  flex: none !important;
  width: auto !important;
  margin: 0 !important;
  border: none !important;
  line-height: 1.8 !important;
}
.link-wrap a{
  display: inline-block;
  padding: 2px 0;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  color: #333 !important; /* インライン style="color:#333" を上書き(念のため明示) */
  text-decoration: none;
  background: none !important;
  transition: color .3s ease;
}
.link-wrap a::after{
  content: "›";
  margin-left: 4px;
}
.link-wrap a:hover{
  background: none !important;
  color: #27B9C6 !important;
}


/* ============================================================
   SP: 768px以下
============================================================ */
@media (max-width: 768px){
  .reserve-block{
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
    gap: 16px;
  }
  #search_489ban form{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
  }
  #search_489ban .date_489ban{
    flex: 1 1 100%; /* 宿泊日は単独行 */
  }
  #search_489ban .date_489ban dd{
    gap: 10px;
  }
  #search_489ban .date_489ban input[type="date"]{
    flex: 1 1 0; /* 2つの日付を横並びに */
    width: auto;
  }
  #search_489ban .inbox_489ban{
    flex: 1 1 auto; /* 部屋数ブロック・大人子供ブロックを同じ行に */
    gap: 10px; /* SPは大人/子供間の余白を詰める */
  }
  #search_489ban select.digits,
  #search_489ban #adult,
  #search_489ban #children{
    width: 46px; /* SPはさらにコンパクトに */
  }
  #search_489ban select,
  #search_489ban input[type="date"]{
    padding: 10px 6px; /* タップ領域を広げる */
    font-size: 16px; /* iOSでの自動ズームを防ぐため16px以上に */
  }
  #search_489ban input[type="date"]{
    width: 100%;
  }
  .reserve-block #search_489ban button[name="searchButton489ban"]{
    flex: 1 1 100%; /* 検索ボタンは単独行 */
    margin-left: 0;
    width: 100%;
    padding: 14px 28px; /* タップ領域44px以上を確保 */
    font-size: 15px;
  }

  .link-wrap ul{
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 8px !important;
  }

  .reserve-note{
    padding: 12px 16px;
  }
  .reserve-note__main{
    font-size: 13px !important;
  }
}

/*
slick 高さ取得
---------------------------*/
.p-hero-header__slider,
.p-hero-header__slider .slick-list,
.p-hero-header__slider .slick-track,
.p-hero-header__slider .slick-slide {
  height: 100%;
}