@charset "UTF-8";
/* ============================================================
   ltike.css  ローチケ旅行 おすすめ記事TOP
   これ1本でページ全体のデザインを持っています。

   中身は3つのまとまりに分かれています。
     1. ページ本体      … 見出し・カード・一覧・サイドバーなど
     2. 共通ヘッダー調整 … #g_header の余白だけ
     3. 検索窓          … 航空券／ホテルのタブと、その中身の調整
     4. ホテル検索窓    … ツール側の土台（3が上書きします）

     4. ホテル検索窓  … いただいたツール（V9.6）のCSSをそのまま収録
   ============================================================ */

/* ============================================================
   1. ページ本体
   ============================================================ */
/* ============================================================
   ltike-media.css
   担当：ページ本体のほぼ全部
     リセット／パンくず／PAGE TOP／:root の色とフォント／
     見出し(.secTtl)／注目の記事(.featured)／カード(.cardV .cardH)／
     絞り込み(.filter .chip)／一覧(.cardGrid)／ページャ(.pager)／
     サイドバー(.side)／ランキング(.rank)／人気エリア(.areaTile)／
     航空券モック(.fmock)／バナー(.bnrGrid)
   検索窓まわりだけは ltike-search.css が担当しています。
   ============================================================ */
/* ============================================================
   ローチケ旅行 おすすめ記事TOP
   ベースは既存LPフォーマット（css/style.css）のリセットとパンくずをそのまま使用。
   その下に、Figma「記事ページTOP_PC / _SP」に合わせたページ用スタイルを追加。
   ============================================================ */

/* ------------------------------------------------------------
   html5doctor.com Reset Stylesheet v1.6.1（既存LPと同じ）
   ------------------------------------------------------------ */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body { line-height: 1; }

article, aside, section, div, p, main, header, footer { box-sizing: border-box; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }

body {
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "游ゴシック", YuGothic, sans-serif;
  color: #333;
  font-size: 16px;
  line-height: 1.4;
  -webkit-text-size-adjust: none; }

/* パンくず設定（既存LPと同じ） */
.breadclumb {
  background-color: #FAFAFA;
  padding: .5rem;
  font-size: .825em;
  /* scroll だと環境によっては常にバーが出てしまうため auto に */
  overflow-x: auto; }
.breadclumb ul { width: 100%; margin: 0 auto; white-space: nowrap; }
.breadclumb ul li { display: inline; position: relative; padding-right: 1em; }
.breadclumb ul li:after {
  position: absolute;
  right: -.4em;
  top: 0;
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  transform: rotate(-90deg);
  margin: 0 0.3rem;
  background: url(https://img2.tour.l-tike.com/image/common/pc/icon_arrow_gray.svg) no-repeat center transparent;
  background-size: contain; }
.breadclumb ul li.last { padding-right: 0; }
.breadclumb ul li.last:after { content: none; }
.breadclumb a { color: #0074BD; text-decoration: none; }
.breadclumb a:hover { text-decoration: underline; }

/* ページTOPに戻る（既存LPと同じ挙動・見た目は最小限） */
#scroll-top { position: fixed; right: 16px; bottom: 16px; z-index: 40; }
#scroll-top a {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 56px; height: 56px; border-radius: 9999px;
  background: #0074BE; color: #fff; text-decoration: none;
  font-size: 11px; line-height: 1.2; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,.25); }


/* ============================================================
   ここから おすすめ記事TOP 用
   ※ ヘッダー／フッターの読み込み領域には影響させない
   ============================================================ */
:root{
  --blue:#0074BE;
  --blue-link:#0074BD;
  --badge-bg:#E9F8FF;
  --pink:#D3136A;
  --ink:#000;
  --ink-sub:#616161;
  --ink-sub-sp:#5E5E5E;
  --line:#C9C9C9;
  --line-input:#DDDDDD;
  --card-shadow:0 1px 8px rgba(0,0,0,.2);
  --font:"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  --font-form:'Noto Sans JP',"Hiragino Kaku Gothic ProN",sans-serif;
  --title-lines:3;      /* 記事タイトルは3行で「…」 */

  --tab-off-bg:#F2F5F8; --tab-off-ink:#616161; --tab-off-icon:#9AA6B2;
}

.ltMain, .ltMain *, .ltTitle, .protoBar{ box-sizing:border-box; }
.ltMain img{ display:block; max-width:100%; }
.ltMain a{ color:inherit; text-decoration:none; }
.ltMain :focus-visible, .ltTitle :focus-visible{ outline:3px solid #FABB00; outline-offset:2px; }
.ltMain [hidden]{ display:none !important; }
.visuallyHidden{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* 検証バナー（本番不要） */
.protoBar{ background:#2b2b2b; color:#fff; font-size:12px; line-height:1.6; padding:8px 16px; text-align:center; }
.protoBar strong{ color:#FABB00; }

/* ページタイトル */
.ltTitle{
  max-width:80rem; margin:0 auto; padding:1rem 2rem 0;
  font-size:1.875rem; line-height:2.8125rem; font-weight:600; color:#000;
  font-family:var(--font);
}

/* レイアウト */
.ltMain{
  max-width:1280px; margin:0 auto; padding:24px 32px 64px;
  display:grid; grid-template-columns:803px 314px; justify-content:space-between; gap:99px;
  align-items:stretch;
  font-family:var(--font); color:var(--ink); line-height:1.7; font-size:15px;
}
@media (max-width:1279px){ .ltMain{ grid-template-columns:minmax(0,1fr) 314px; gap:40px; } }
@media (max-width:1023px){
  .ltTitle{ padding:0.75rem 1rem 0; font-size:1.5rem; line-height:2.25rem; }
  .ltMain{ grid-template-columns:minmax(0,1fr); gap:40px; padding:16px 16px 40px; }
}

/* 見出し */
.secTtl{
  display:flex; align-items:center; gap:4px;
  padding:4px 0; border-bottom:.5px solid var(--blue);
  font-size:24px; line-height:36px; font-weight:600; margin:0 0 16px;
}
.secTtl svg{ width:30px; height:30px; flex:none; fill:var(--blue); display:block; }
/* 画像アイコン（.ttlIcon）は、SVGとまったく同じ大きさ・位置で表示します */
.secTtl .ttlIcon{ width:30px; height:30px; flex:none; object-fit:contain; display:block; }
.sec + .sec{ margin-top:64px; }
.side .secTtl{ font-size:20px; line-height:30px; gap:8px; margin-bottom:12px; align-items:center; }
/* 見出しの行の高さ（30px）に合わせます。24pxだと small に見えていました */
.side .secTtl svg,
.side .secTtl .ttlIcon{ width:28px; height:28px; display:block; }
@media (max-width:1023px){
  .secTtl{ font-size:20px; line-height:30px; }
  .secTtl svg,
  .secTtl .ttlIcon{ width:24px; height:24px; }
  .sec + .sec{ margin-top:40px; }
}

/* カテゴリバッジ */
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:2px 8px; background:var(--badge-bg); border-radius:9999px;
  color:var(--blue); font-size:12px; line-height:18px; font-weight:600; white-space:nowrap;
}
.badge--sm{ font-size:10px; line-height:15px; }

/* 注目の記事 */
.featured{ display:flex; gap:16px; align-items:stretch; }
.featured__main{ width:360px; flex:none; }
.featured__sub{ display:flex; flex-direction:column; gap:16px; flex:1; min-width:0; }

/* サムネイル：画像を切らずに全部見せ、余白は同じ画像をぼかして敷く */
.thumbBox{ position:relative; overflow:hidden; background:#e9eef2; }
.thumbBox__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:blur(14px) saturate(1.1); transform:scale(1.15); opacity:.85;
}
/* contain だと、画像の縦横比が枠と違うときに上下（または左右）に帯が出ます。
   枠いっぱいに敷き詰める cover に変えました。 */
.thumbBox__img{ position:relative; width:100%; height:100%; object-fit:cover; display:block; }

.cardV{
  display:flex; flex-direction:column; background:#fff; border-radius:8px;
  filter:drop-shadow(var(--card-shadow)); overflow:hidden; height:100%;
}
.cardV .thumbBox{ width:100%; aspect-ratio:360/200; border-radius:8px 8px 0 0; }
.cardV__body{ padding:12px; display:flex; flex-direction:column; gap:24px; flex:1; }
.cardV__head{ display:flex; flex-direction:column; gap:8px; }
.cardV__ttl{
  margin:0; font-size:20px; line-height:30px; font-weight:600;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--title-lines); overflow:hidden;
}
.cardV__date{ font-size:14px; line-height:21px; color:var(--ink-sub); margin:auto 0 0; }

/* カードにマウスを乗せたとき：少し浮かせて「押せる」ことを伝えます
   （タッチ端末には効かないので、SPの見た目は変わりません） */
.cardV, .cardH{ transition:transform .18s ease, filter .18s ease; }
@media (hover:hover){
  .cardV:hover, .cardH:hover{
    transform:translateY(-2px);
    filter:drop-shadow(0 4px 14px rgba(0,0,0,.24));
  }
  .cardV:hover .cardV__ttl, .cardH:hover .cardH__ttl{ color:var(--blue-link); }
}

.cardH{
  display:flex; background:#fff; border-radius:8px; overflow:hidden;
  filter:drop-shadow(0 1px 8px rgba(0,0,0,.19));
}
.cardH .thumbBox{ width:150px; flex:none; align-self:stretch; }
.cardH__body{ padding:12px; display:flex; flex-direction:column; justify-content:space-between; gap:4px; flex:1; min-width:0; }
.cardH__head{ display:flex; flex-direction:column; gap:8px; }
.cardH__ttl{
  margin:0; font-size:14px; line-height:21px; font-weight:600;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--title-lines); overflow:hidden;
}
.cardH__date{ font-size:12px; line-height:18px; color:var(--ink-sub); }

@media (max-width:1023px){
  .featured{ flex-direction:column; }
  .featured__main{ width:100%; }
  .cardV__ttl{ font-size:18px; line-height:27px; }
  .cardV__date{ color:var(--ink-sub-sp); }
  .cardH{ filter:drop-shadow(0 1px 8px rgba(0,0,0,.25)); }
  .cardH .thumbBox{ width:120px; }
  .cardH__date{ font-size:10px; line-height:15px; color:var(--ink-sub-sp); }
}

/* 新着記事グリッド */
.cardGrid{ display:flex; flex-wrap:wrap; gap:24px; align-items:stretch; }
.cardGrid > *{ width:251px; }
.cardGrid .cardV .thumbBox{ aspect-ratio:251/140; }
.cardGrid .cardV__body{ gap:8px; justify-content:space-between; }
.cardGrid .cardV__ttl{ font-size:16px; line-height:24px; min-height:calc(24px * var(--title-lines)); }
@media (max-width:1279px){
  .cardGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cardGrid > *{ width:auto; }
}
/* タブレット〜大きめのスマホ：1列だと間延びするので2列にします */
@media (max-width:1023px){ .cardGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } }
@media (max-width:599px){ .cardGrid{ grid-template-columns:1fr; } }

/* 絞り込み */
.filter{ margin-bottom:16px; }
.filter__search{ position:relative; margin-bottom:16px; }
.filter__search input{
  width:100%; height:44px; padding:0 16px 0 44px;
  border:1px solid var(--line-input); border-radius:8px;
  font-family:var(--font-form); font-size:14px; letter-spacing:-.019em; color:#000;
}
.filter__search input::placeholder{ color:#999; }
.filter__search svg{ position:absolute; left:14px; top:13px; width:18px; height:18px; fill:var(--blue); pointer-events:none; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  border:1px solid var(--blue); background:#fff; color:var(--blue);
  border-radius:9999px; padding:5px 14px; font-family:var(--font);
  font-size:13px; line-height:18px; font-weight:600; cursor:pointer;
}
.chip:hover{ background:var(--badge-bg); }
.chip[aria-pressed="true"]{ background:var(--blue); color:#fff; }
.chip small{ font-weight:300; opacity:.8; margin-left:4px; }
.resultCount{ text-align:right; font-size:14px; line-height:21px; color:var(--ink-sub); margin:16px 0 12px; }

.empty{ border:1px dashed var(--line); border-radius:8px; padding:40px 20px; text-align:center; color:var(--ink-sub); font-size:14px; }
.empty p{ margin:0 0 8px; }

/* ページャ */
.pager{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:32px; flex-wrap:wrap; }
.pager button{
  min-width:40px; height:40px; border-radius:9999px; border:1px solid var(--line-input);
  background:#fff; color:var(--blue); font-family:var(--font); font-size:14px; font-weight:600; cursor:pointer;
}
.pager button[aria-current="true"]{ background:var(--blue); color:#fff; border-color:var(--blue); }
.pager button:disabled{ opacity:.35; cursor:default; }
@media (hover:hover){
  .pager button:not(:disabled):not([aria-current="true"]):hover{ background:var(--badge-bg); border-color:var(--blue); }
}

/* サイドバー */
.side{ display:flex; flex-direction:column; align-self:stretch; }
.side .sec + .sec{ margin-top:40px; }
/* 検索窓などは .side__follow という別の入れ物に入っていて
   .sec + .sec が効かないため、同じ余白を明示します */
.side .sec + .side__follow,
.side .side__follow > .sec + .sec{ margin-top:40px; }

/* PC：下までスクロールしても付いてくる領域 */
@media (min-width:1024px){
  .side__follow{ position:sticky; top:16px; }
}

/* ランキング */
.rank{ list-style:none; margin:0; padding:16px 0 0; display:flex; flex-direction:column; gap:16px; }
.rank li{ display:flex; gap:8px; padding-bottom:8px; border-bottom:.5px solid var(--line); }
.rank li:last-child{ border-bottom:none; padding-bottom:0; }
.rank__medal{ position:relative; width:30px; height:30px; flex:none; display:flex; align-items:center; justify-content:center; }
.rank__medal svg{ position:absolute; inset:0; width:30px; height:30px; }
.rank__medal span{ position:relative; font-size:10px; line-height:13px; font-weight:600; letter-spacing:-.011em; }
.rank li:nth-child(1) .rank__medal svg{ fill:#FABB00; } .rank li:nth-child(1) .rank__medal span{ color:#735600; }
.rank li:nth-child(2) .rank__medal svg{ fill:#CCCCCC; } .rank li:nth-child(2) .rank__medal span{ color:#666666; }
.rank li:nth-child(3) .rank__medal svg{ fill:#866F6F; } .rank li:nth-child(3) .rank__medal span{ color:#FFFFFF; }
.rank li:nth-child(n+4) .rank__medal svg{ fill:#BDE5FF; } .rank li:nth-child(n+4) .rank__medal span{ color:#0098E5; }
/* 300（細字）だと日本語の小さい文字がかすれて読みにくいため 400 に */
.rank__ttl{ font-size:14px; line-height:21px; font-weight:400; }
@media (hover:hover){ .rank__ttl:hover{ color:var(--blue-link); text-decoration:underline; } }

/* 人気エリア */
.areaGrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.areaTile{
  position:relative; display:block; aspect-ratio:152/101; border-radius:4px; overflow:hidden;
}
.areaTile img{ width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
@media (hover:hover){ .areaTile:hover img{ transform:scale(1.06); } }
.areaTile::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.2); border-radius:4px; }
.areaTile span{
  position:absolute; left:12px; bottom:8px; z-index:1;
  color:#fff; font-size:20px; line-height:30px; font-weight:600; letter-spacing:-.011em;
  text-shadow:0 1px 4px rgba(0,0,0,.45);
}
.areaTile span.is-long{ font-size:18px; line-height:27px; }
/* SP・タブレットではサイドバーが全幅になるため、2列だとタイルが巨大になります。
   幅に応じて列数が増えるようにしています。 */
@media (max-width:1023px){
  .areaGrid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .areaTile span{ font-size:18px; line-height:27px; }
  .areaTile span.is-long{ font-size:16px; line-height:24px; }
}

/* 航空券ウィジェット枠 */
.widgetSlot .secTtl{ border-bottom-color:#000; }
.widgetNote{
  margin:0 0 12px; padding:8px 10px; border:1px dashed var(--blue); border-radius:4px;
  background:#F7FBFE; color:var(--blue); font-size:11px; line-height:1.6; font-weight:600;
}
.fmock{ display:flex; flex-direction:column; gap:24px; }
.fmock__radios{ display:flex; gap:16px; }
.fmock__radio{ display:flex; align-items:center; gap:8px; font-size:16px; line-height:24px; }
.fmock__radio i{ width:18px; height:18px; border:1px solid #929292; border-radius:9999px; background:#fff; display:flex; align-items:center; justify-content:center; }
.fmock__radio.is-on i::before{ content:""; width:12px; height:12px; border-radius:9999px; background:var(--blue); }
.fmock__fields{ display:flex; flex-direction:column; gap:12px; }
.fmock__pair{ position:relative; display:flex; gap:12px; }
.fmock__input{
  flex:1; min-width:0; height:44px; border:1px solid var(--line-input); border-radius:8px; background:#fff;
  display:flex; align-items:center; gap:10px; padding:0 12px;
  font-family:var(--font-form); font-size:14px; line-height:21px; letter-spacing:-.019em;
}
.fmock__input svg{ width:20px; height:20px; flex:none; fill:var(--blue); }
.fmock__input.is-placeholder{ color:#999; }
.fmock__swap{
  position:absolute; left:50%; top:2px; transform:translateX(-50%);
  width:40px; height:40px; border-radius:9999px; background:var(--blue); border:3px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center;
}
.fmock__swap svg{ width:24px; height:24px; fill:#fff; }
.fmock__cta{
  height:45px; background:var(--pink); border-radius:4px; border:none; color:#fff;
  font-family:var(--font-form); font-size:14px; font-weight:700; letter-spacing:-.019em; cursor:not-allowed;
}

/* バナー */
.bnrGrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.bnrGrid a, .bnrGrid div{
  aspect-ratio:149/111.75; border-radius:4px; overflow:hidden;
  background:#eef2f5; display:flex; align-items:center; justify-content:center;
  color:#9bb0bd; font-size:11px;
}
.bnrGrid img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:1023px){
  .bnrGrid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
}

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

/* ============================================================
   2. 共通ヘッダーの調整
   ============================================================ */
/* ============================================================
   ltike-header-fix.css
   担当：共通ヘッダー（tour.l-tike.com から読み込む header.html）の微調整だけ
   ここ以外のページ本体には一切効きません。
   ============================================================ */
/* アイコン下の余白(.4rem)のみを無効化：最小リスクの上書き */
#g_header .icon{margin-bottom:0 !important;}

/* ============================================================
   3. 検索窓（航空券／ホテル）
   ============================================================ */
/* ============================================================
   ltike-search.css
   担当：航空券／ホテルの切り替えタブと、その枠まわり

   ※ 航空券の自動パーツ（ltike-widget-ph）の「中身」は、
     ローチケ側のCSSが後から読み込まれるうえ Shadow DOM の場合もあるため、
     ここからは届きません。中身の調整は ltike-search.js の WIDGET_CSS で
     行っています（元のファイルは書き換えていません）。
   ============================================================ */

/* ------------------------------------------------------------
   タブ
   検索窓カードの上辺に差し込む形にして、
   選んだタブと中身が地続きに見えるようにしています。
   ------------------------------------------------------------ */
.searchTabs{
  display:flex;
  margin:1rem 0 0;
}
.searchTab{
  flex:1; min-width:0;
  position:relative; z-index:1;
  height:2.875rem; margin-bottom:-1px;
  border:1px solid var(--line-input);
  border-bottom:1px solid var(--line-input);
  border-radius:0.5rem 0.5rem 0 0;
  background:var(--tab-off-bg); color:var(--tab-off-ink);
  font-family:var(--font); font-size:0.875rem; font-weight:600; letter-spacing:-.011em;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:0.375rem;
  transition:background-color .15s ease, color .15s ease;
}
.searchTab + .searchTab{ margin-left:-1px; }
.searchTab svg{ width:1.125rem; height:1.125rem; fill:var(--tab-off-icon); flex:none; }
/* 選択中のタブだけ、アイコンも文字と同じ青にします */
.searchTab[aria-selected="true"] svg{ fill:var(--blue); }
.searchTab:hover{ background:#E9EEF3; color:var(--tab-off-ink); }
.searchTab[aria-selected="true"]{
  z-index:2;
  background:#fff; color:var(--blue); font-weight:700;
  border-bottom-color:#fff;
  box-shadow:inset 0 3px 0 var(--blue);
}
.searchTab:focus-visible{ outline:3px solid #FABB00; outline-offset:-3px; }

/* ------------------------------------------------------------
   パネル（タブの下に続く1枚のカード）
   ------------------------------------------------------------ */
.searchPanel{
  position:relative;
  padding:1rem 0.875rem;
  border:1px solid var(--line-input);
  border-radius:0 0 0.5rem 0.5rem;
  background:#fff;
}
.searchPanel[hidden]{ display:none !important; }

.searchLoading{
  padding:1.75rem 0.75rem; margin:0; text-align:center;
  color:var(--ink-sub); font-size:0.8125rem; line-height:1.6;
}

.widgetSlot ltike-widget-ph{ display:block; width:100%; }

/* パーツがまだ登録されていない間は、中のslot文字（「航空券検索」など）が
   そのまま素の文字として見えてしまうので隠します */
.widgetSlot ltike-widget-ph:not(:defined){ display:none; }

/* ------------------------------------------------------------
   読み込み中の仮置き（スケルトン）
   検索窓が出そろうと .is-widget-ready が付いて消えます。
   ------------------------------------------------------------ */
.fskel{ display:flex; flex-direction:column; gap:0.75rem; }
.fskel__row{ display:flex; gap:0.75rem; }
.fskel__row .fskel__bar{ flex:1; min-width:0; }
.fskel__bar{
  display:block; height:2.75rem; border-radius:0.5rem;
  background:linear-gradient(90deg,#EEF2F6 25%,#F7FAFC 37%,#EEF2F6 63%);
  background-size:400% 100%;
  animation:fskelShine 1.4s ease infinite;
}
.fskel__bar--radios{ height:1.25rem; width:9rem; margin-bottom:0.25rem; border-radius:0.25rem; }
.fskel__bar--cta{ height:2.8125rem; margin-top:0.5rem; border-radius:0.25rem; }
@keyframes fskelShine{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }

/* 検索窓が出たら仮置きは消します */
.searchPanel.is-widget-ready .fskel{ display:none; }
@media (prefers-reduced-motion:reduce){ .fskel__bar{ animation:none; background:#EEF2F6; } }

/* 自動パーツの中身は、shadowRoot ができた時点で先回りしてスタイルを入れています
   （ltike-app.js の WIDGET_CSS）。隠して待つ必要はありません。 */

/* 自動パーツが読めなかったときだけ出る見本 */
.fmock[hidden]{ display:none !important; }
.searchPanel .fmock{ gap:0.875rem; }

/* ------------------------------------------------------------
   ホテル検索窓（hotel-search-widget.css の上書き）

   航空券の検索窓と同じ形にそろえています。
     ・入力欄は高さ 2.75rem ／ 角丸 0.5rem ／ 枠線 #DDDDDD
     ・ラベルは小さな青文字（航空券の「行き」「帰り」と同じ調子）
     ・目的地と人数にはアイコン（自動パーツと同じ絵柄）
     ・検索ボタンはピンクで横幅いっぱい
   hotel-search-widget.css / .js は書き換えていません。
   ------------------------------------------------------------ */
.widgetSlot [data-hotel-search-widget]{ margin:0; font-family:var(--font); }
.widgetSlot [data-hotel-search-widget] .hsw-box{
  --main:#0074BE; --main-dark:#005a91; --main-soft:#E9F8FF;
  --accent:#D3136A; --border:#DDDDDD;
  max-width:none;
}
/* ページ側に h2 があるのでウィジェット内の見出しは出さない */
.widgetSlot [data-hotel-search-widget] .hsw-hero{ display:none; }
.widgetSlot [data-hotel-search-widget] .hsw-body{ padding:0; }
.widgetSlot [data-hotel-search-widget] .hsw-form{ gap:0.75rem; }

/* 並び：目的地は全幅、日付は2つ並べ、部屋数は全幅 */
.widgetSlot [data-hotel-search-widget] .hsw-main-row{
  grid-template-columns:1fr 1fr !important;
  gap:0.75rem;
}
.widgetSlot [data-hotel-search-widget] .hsw-main-row .hsw-field:nth-child(1),
.widgetSlot [data-hotel-search-widget] .hsw-main-row .hsw-field:nth-child(4){
  grid-column:1 / -1;
}
.widgetSlot [data-hotel-search-widget] .hsw-room-row,
.widgetSlot [data-hotel-search-widget] .hsw-ages{
  grid-template-columns:1fr !important;
}

/* ラベルは小さく、航空券の「行き」「帰り」と同じ青に */
.widgetSlot [data-hotel-search-widget] .hsw-label{
  font-family:var(--font); font-size:0.625rem; font-weight:700;
  line-height:1; color:var(--blue);
}

/* 入力欄：航空券とまったく同じ形 */
.widgetSlot [data-hotel-search-widget] .hsw-input,
.widgetSlot [data-hotel-search-widget] .hsw-select{
  height:2.75rem; padding:0 0.75rem;
  border:1px solid var(--line-input); border-radius:0.5rem;
  font-family:var(--font-form); font-size:0.8125rem; font-weight:400;
  letter-spacing:-.019em;
}
/* 目的地だけアイコン付き（自動パーツと同じ絵柄） */
.widgetSlot [data-hotel-search-widget] .hsw-place{
  padding:0 2.25rem 0 2.25rem;
  background:url(https://img2.tour.l-tike.com/image/common/pc/icon_place_light_gray.svg) no-repeat 0.625rem center;
  background-size:1.25rem 1.25rem;
}
.widgetSlot [data-hotel-search-widget] .hsw-input::placeholder{ color:#999; }
.widgetSlot [data-hotel-search-widget] .hsw-clear{
  width:1.75rem; height:1.75rem; bottom:0.5rem; right:0.5rem; font-size:1rem;
}

/* 候補リスト */
.widgetSlot [data-hotel-search-widget] .hsw-suggest{
  top:4rem; border-radius:0.5rem;
}
.widgetSlot [data-hotel-search-widget] .hsw-suggest-status{ font-size:0.75rem; }
.widgetSlot [data-hotel-search-widget] .hsw-name{ font-size:0.8125rem; }
.widgetSlot [data-hotel-search-widget] .hsw-meta{ font-size:0.6875rem; }
.widgetSlot [data-hotel-search-widget] .hsw-badge{
  min-width:2.5rem; padding:0.1875rem 0.375rem; font-size:0.625rem;
}

/* 人数：航空券の「人数を選択」と同じ見た目のボタンに */
.widgetSlot [data-hotel-search-widget] .hsw-guests{
  border:0; border-radius:0; background:transparent; overflow:visible;
}
.widgetSlot [data-hotel-search-widget] .hsw-guests-toggle{
  height:2.75rem; padding:0 0.75rem 0 2.25rem;
  border:1px solid var(--line-input); border-radius:0.5rem;
  background:#fff url(https://img2.tour.l-tike.com/image/common/pc/icon_people.svg) no-repeat 0.625rem center;
  background-size:1.25rem 1.25rem;
}
.widgetSlot [data-hotel-search-widget] .hsw-guests-toggle .hsw-label{ display:none; }
.widgetSlot [data-hotel-search-widget] .hsw-guests-summary{
  font-family:var(--font-form); font-size:0.8125rem; font-weight:400; color:#222;
}
.widgetSlot [data-hotel-search-widget] .hsw-toggle-mark{
  width:1.5rem; height:1.5rem; font-size:0.875rem;
}
.widgetSlot [data-hotel-search-widget] .hsw-guests-panel{ padding:0.75rem 0 0; }
.widgetSlot [data-hotel-search-widget] .hsw-room{
  padding:0.75rem; border-radius:0.5rem;
}
.widgetSlot [data-hotel-search-widget] .hsw-room-title{ font-size:0.75rem; }
.widgetSlot [data-hotel-search-widget] .hsw-room-note{
  margin:0; font-size:0.6875rem;
}

/* 検索ボタン：航空券と同じピンク */
.widgetSlot [data-hotel-search-widget] .hsw-actions{ display:block; }
.widgetSlot [data-hotel-search-widget] .hsw-submit{
  height:2.8125rem; width:100%; max-width:none;
  border-radius:0.25rem; box-shadow:none;
  font-family:var(--font-form); font-size:0.875rem; font-weight:700; letter-spacing:-.019em;
}
.widgetSlot [data-hotel-search-widget] .hsw-submit:hover{ background:#b81059; }
.widgetSlot [data-hotel-search-widget] .hsw-error{ font-size:0.75rem; }
.widgetSlot [data-hotel-search-widget] .hsw-foot{
  margin:0.625rem 0 0; text-align:left; font-size:0.6875rem; line-height:1.6;
}

/* ------------------------------------------------------------
   SP
   ------------------------------------------------------------ */
@media (max-width:1023px){
  .searchTabs{ margin-top:0.75rem; }
}


/* ------------------------------------------------------------
   ホテル検索窓：宿泊日の欄とカレンダー（2026-09 追加）

   ブラウザ標準の日付欄は見た目を変えられないため、
   ltike-app.js の「4-2」でサイト用のカレンダーに置き換えています。
   欄は航空券の「行き／帰り」と同じ形（小さな青い見出し＋日付）、
   カレンダーは航空券の日付パネルと同じ白地・同じ影にしています。
     青      #0074BE  選んだ日・土曜・操作できるもの
     薄い青  #E9F8FF  泊まる期間の帯
     赤      #D0342C  日曜・祝日
     グレー  #C4CBD2  選べない日
   ------------------------------------------------------------ */
.widgetSlot [data-hotel-search-widget] .hsw-stay{ position:relative; display:block; }
.widgetSlot [data-hotel-search-widget] .hsw-stay__box{
  position:relative; display:flex; align-items:stretch;
  height:2.75rem; border:1px solid var(--line-input); border-radius:0.5rem; background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.widgetSlot [data-hotel-search-widget] .hsw-stay.is-open .hsw-stay__box{ border-color:var(--blue); box-shadow:0 0 0 2px rgba(0,116,190,.14); }
.widgetSlot [data-hotel-search-widget] .hsw-stay__icon{
  position:absolute; left:0.75rem; top:50%; width:1.25rem; height:1.25rem; margin-top:-0.625rem;
  fill:var(--blue); pointer-events:none;
}
.widgetSlot [data-hotel-search-widget] .hsw-stay__btn{
  flex:1 1 0; min-width:0; margin:0; padding:0 0.5rem 0 2.625rem;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:0.1875rem;
  border:0; border-radius:0.5rem 0 0 0.5rem; background:transparent; color:#222;
  font-family:var(--font-form); text-align:left; cursor:pointer;
}
.widgetSlot [data-hotel-search-widget] .hsw-stay__btn + .hsw-stay__btn{ padding-left:0.75rem; border-left:1px solid #EEF1F4; border-radius:0; }
.widgetSlot [data-hotel-search-widget] .hsw-stay__btn:hover{ background:#F7FBFE; }
.widgetSlot [data-hotel-search-widget] .hsw-stay__btn.is-active{ background:#F1F8FD; }
.widgetSlot [data-hotel-search-widget] .hsw-stay__btn:focus-visible{ outline:3px solid #FABB00; outline-offset:-3px; }
.widgetSlot [data-hotel-search-widget] .hsw-stay__ttl{ font-size:0.625rem; font-weight:700; line-height:1; color:var(--blue); letter-spacing:0; }
.widgetSlot [data-hotel-search-widget] .hsw-stay__val{
  display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:0.8125rem; line-height:1.2; letter-spacing:-.019em;
}
.widgetSlot [data-hotel-search-widget] .hsw-stay__btn.is-active .hsw-stay__val{ color:var(--blue); font-weight:700; }
.widgetSlot [data-hotel-search-widget] .hsw-stay__nights{
  flex:none; align-self:center; margin:0 0.625rem 0 0.25rem; padding:0.1875rem 0.5rem;
  border-radius:9999px; background:var(--badge-bg); color:var(--blue);
  font-family:var(--font-form); font-size:0.6875rem; font-weight:700; line-height:1.2;
}
.widgetSlot [data-hotel-search-widget] .hsw-stay__nights:empty{ display:none; }

.widgetSlot [data-hotel-search-widget] .hsw-cal{
  position:absolute; z-index:60; left:0; right:0; top:calc(100% + 0.375rem);
  max-width:22rem; padding:0.75rem 0.75rem 0.625rem;
  background:#fff; border:1px solid var(--line-input); border-radius:0.5rem;
  box-shadow:0 0.5rem 2rem rgba(0,0,0,.22);
  font-family:var(--font-form); color:#222;
  animation:hswCalIn .14s ease-out;
}
.widgetSlot [data-hotel-search-widget] .hsw-cal[hidden]{ display:none !important; }
@keyframes hswCalIn{ from{ opacity:0; transform:translateY(-0.25rem); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .widgetSlot [data-hotel-search-widget] .hsw-cal{ animation:none; } }

.widgetSlot [data-hotel-search-widget] .hsw-cal__head{ display:flex; align-items:center; justify-content:space-between; gap:0.5rem; }
.widgetSlot [data-hotel-search-widget] .hsw-cal__month{ font-size:0.9375rem; font-weight:700; line-height:1.4; letter-spacing:-.011em; }
.widgetSlot [data-hotel-search-widget] .hsw-cal__nav{
  width:2rem; height:2rem; margin:0; padding:0 0 0.125rem;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-input); border-radius:9999px; background:#fff;
  color:var(--blue); font-size:1.125rem; line-height:1; cursor:pointer;
}
.widgetSlot [data-hotel-search-widget] .hsw-cal__nav:hover:not(:disabled){ background:#E9F8FF; border-color:#BFE3F7; }
.widgetSlot [data-hotel-search-widget] .hsw-cal__nav:disabled{ color:#C4CBD2; cursor:default; }
.widgetSlot [data-hotel-search-widget] .hsw-cal__nav:focus-visible, .widgetSlot [data-hotel-search-widget] .hsw-cal__day:focus-visible, .widgetSlot [data-hotel-search-widget] .hsw-cal__close:focus-visible{
  outline:3px solid #FABB00; outline-offset:-1px; }

.widgetSlot [data-hotel-search-widget] .hsw-cal__guide{
  margin:0.5rem 0 0.375rem; padding:0.3125rem 0.5rem; border-radius:0.25rem;
  background:#F4F7FA; color:#444; font-size:0.75rem; font-weight:600; line-height:1.4; text-align:center;
}

.widgetSlot [data-hotel-search-widget] .hsw-cal__week, .widgetSlot [data-hotel-search-widget] .hsw-cal__grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.widgetSlot [data-hotel-search-widget] .hsw-cal__week{ padding:0.25rem 0; border-bottom:1px solid #EEF1F4; }
.widgetSlot [data-hotel-search-widget] .hsw-cal__week span{ font-size:0.6875rem; line-height:1.4; color:#616161; text-align:center; }
.widgetSlot [data-hotel-search-widget] .hsw-cal__week .is-sun{ color:#D0342C; }
.widgetSlot [data-hotel-search-widget] .hsw-cal__week .is-sat{ color:var(--blue); }
.widgetSlot [data-hotel-search-widget] .hsw-cal__grid{ row-gap:0.125rem; margin-top:0.375rem; }

.widgetSlot [data-hotel-search-widget] .hsw-cal__day{
  position:relative; height:2.375rem; margin:0; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:0; background:transparent; color:#222;
  font-family:var(--font-form); font-size:0.8125rem; line-height:1; cursor:pointer;
}
.widgetSlot [data-hotel-search-widget] .hsw-cal__num{
  position:relative; width:2.125rem; height:2.125rem;
  display:flex; align-items:center; justify-content:center; border-radius:0.375rem;
}
.widgetSlot [data-hotel-search-widget] .hsw-cal__day.is-sun{ color:#D0342C; }
.widgetSlot [data-hotel-search-widget] .hsw-cal__day.is-sat{ color:var(--blue); }
.widgetSlot [data-hotel-search-widget] .hsw-cal__day:hover:not(:disabled) .hsw-cal__num{ box-shadow:inset 0 0 0 1px var(--blue); }
/* 今日の印（小さな点） */
.widgetSlot [data-hotel-search-widget] .hsw-cal__day.is-today .hsw-cal__num::after{
  content:""; position:absolute; left:50%; bottom:0.25rem; width:0.25rem; height:0.25rem;
  margin-left:-0.125rem; border-radius:9999px; background:currentColor; }
/* 選べない日 */
.widgetSlot [data-hotel-search-widget] .hsw-cal__day:disabled{ color:#C4CBD2; cursor:default; }
/* 泊まる期間の帯。チェックイン日・チェックアウト日の半分まで伸ばして途切れないようにします */
.widgetSlot [data-hotel-search-widget] .hsw-cal__day.is-range{ background:#E9F8FF; }
.widgetSlot [data-hotel-search-widget] .hsw-cal__day.is-in.has-range{ background:linear-gradient(90deg,transparent 50%,#E9F8FF 50%); }
.widgetSlot [data-hotel-search-widget] .hsw-cal__day.is-out{ background:linear-gradient(90deg,#E9F8FF 50%,transparent 50%); }
.widgetSlot [data-hotel-search-widget] .hsw-cal__day.is-in .hsw-cal__num,
.widgetSlot [data-hotel-search-widget] .hsw-cal__day.is-out .hsw-cal__num{ background:var(--blue); color:#fff; font-weight:700; box-shadow:none; }
/* チェックアウトを選んでいる途中の「仮の範囲」は薄めに */
.widgetSlot [data-hotel-search-widget] .hsw-cal__day.is-range.is-preview{ background:#F3FAFE; }
.widgetSlot [data-hotel-search-widget] .hsw-cal__day.is-out.is-preview{ background:linear-gradient(90deg,#F3FAFE 50%,transparent 50%); }
.widgetSlot [data-hotel-search-widget] .hsw-cal__day.is-out.is-preview .hsw-cal__num{ background:#fff; color:var(--blue); box-shadow:inset 0 0 0 2px var(--blue); }

.widgetSlot [data-hotel-search-widget] .hsw-cal__foot{
  display:flex; align-items:flex-end; justify-content:space-between; gap:0.5rem;
  margin-top:0.5rem; padding-top:0.5rem; border-top:1px solid #EEF1F4;
}
.widgetSlot [data-hotel-search-widget] .hsw-cal__note{ font-size:0.6875rem; line-height:1.5; color:#616161; }
.widgetSlot [data-hotel-search-widget] .hsw-cal__noteMain{ display:block; color:#222; font-weight:700; }
.widgetSlot [data-hotel-search-widget] .hsw-cal__noteSub{ display:block; }
.widgetSlot [data-hotel-search-widget] .hsw-cal__close{
  flex:none; margin:0; padding:0.3125rem 0.75rem;
  border:1px solid var(--line-input); border-radius:0.25rem; background:#fff;
  color:var(--blue); font-family:var(--font-form); font-size:0.75rem; font-weight:700; line-height:1.4; cursor:pointer;
}
.widgetSlot [data-hotel-search-widget] .hsw-cal__close:hover{ background:#E9F8FF; }

/* 目的地・人数の欄も、アイコンと文字の間を航空券の欄とそろえます
   （アイコン：左から0.75rem・幅1.25rem ／ 文字：左から2.625rem） */
.widgetSlot [data-hotel-search-widget] .hsw-place{ padding-left:2.625rem; background-position:0.75rem center; }
.widgetSlot [data-hotel-search-widget] .hsw-guests-toggle{ padding-left:2.625rem; background-position:0.75rem center; }


/* ============================================================
   4. ホテル検索窓の土台（hotel-search-widget.css をそのまま収録）
   ここより前の「3. 検索窓」が、この上に色や大きさを重ねています。
   ツール側を更新したときは、この区切りから下を貼り替えてください。
   ============================================================ */
/* hotel-search-widget.css : ローチケ旅行馴染ませ版 V9.5 */
[data-hotel-search-widget],[data-hotel-search-widget] *{box-sizing:border-box}
[data-hotel-search-widget]{display:block;width:100%;margin:0 auto 32px;color:#333;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Meiryo",sans-serif;line-height:1.5}
[data-hotel-search-widget] .hsw-box{--main:#0068b7;--main-dark:#005291;--main-soft:#eef7fc;--accent:#f39800;--border:#d8dee5;--text:#222;--muted:#66717d;width:100%;max-width:1100px;margin:0 auto;background:#fff;color:var(--text)}
[data-hotel-search-widget] .hsw-hero{padding:0 0 12px;border-bottom:3px solid var(--main)}
[data-hotel-search-widget] .hsw-kicker{display:none}
[data-hotel-search-widget] .hsw-title{margin:0;font-size:24px;line-height:1.4;font-weight:700;color:#222}
[data-hotel-search-widget] .hsw-lead{margin:5px 0 0;color:#555;font-size:14px;line-height:1.7}
[data-hotel-search-widget] .hsw-body{padding:18px 0 0;background:#fff}
[data-hotel-search-widget] .hsw-form{display:grid;gap:14px}
[data-hotel-search-widget] .hsw-row{display:grid;gap:12px;align-items:end}
[data-hotel-search-widget] .hsw-main-row{grid-template-columns:minmax(250px,1.7fr) 1fr 1fr 130px}
[data-hotel-search-widget] .hsw-field{position:relative;display:grid;gap:6px;min-width:0}
[data-hotel-search-widget] .hsw-label{color:#333;font-size:13px;font-weight:700}
[data-hotel-search-widget] .hsw-input,[data-hotel-search-widget] .hsw-select{width:100%;height:48px;border:1px solid #bfc7cf;border-radius:3px;background:#fff;padding:0 12px;color:#222;font:inherit;font-size:15px;font-weight:500;outline:0;box-shadow:none;appearance:auto}
[data-hotel-search-widget] .hsw-input:focus,[data-hotel-search-widget] .hsw-select:focus{border-color:var(--main);box-shadow:0 0 0 2px rgba(0,104,183,.16)}
[data-hotel-search-widget] .hsw-place{padding-right:42px}
[data-hotel-search-widget] .hsw-clear{position:absolute;right:8px;bottom:8px;width:32px;height:32px;border:0;border-radius:50%;background:#edf1f4;color:#5b6670;font-size:18px;line-height:1;cursor:pointer}
[data-hotel-search-widget] .hsw-suggest{position:absolute;z-index:9999;left:0;right:0;top:72px;border:1px solid #bac6cf;border-radius:3px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.16);display:none;overflow:hidden}
[data-hotel-search-widget] .hsw-suggest.is-open{display:block}
[data-hotel-search-widget] .hsw-suggest-status{padding:9px 12px;background:#f5f7f9;color:#555;font-size:13px;border-bottom:1px solid #e2e7eb}
[data-hotel-search-widget] .hsw-suggest-list{max-height:300px;overflow:auto;margin:0;padding:0;list-style:none}
[data-hotel-search-widget] .hsw-suggest-btn{width:100%;display:flex;justify-content:space-between;gap:12px;border:0;border-top:1px solid #edf0f2;background:#fff;padding:11px 12px;text-align:left;cursor:pointer}
[data-hotel-search-widget] .hsw-suggest-btn:hover,[data-hotel-search-widget] .hsw-suggest-btn.is-active{background:var(--main-soft)}
[data-hotel-search-widget] .hsw-name{display:block;color:#222;font-size:15px;font-weight:700}
[data-hotel-search-widget] .hsw-meta{display:block;margin-top:2px;color:#687582;font-size:12px}
[data-hotel-search-widget] .hsw-badge{height:max-content;min-width:46px;text-align:center;border-radius:2px;padding:3px 7px;font-size:11px;font-weight:700}
[data-hotel-search-widget] .hsw-badge.city{background:var(--main);color:#fff}
[data-hotel-search-widget] .hsw-badge.area{background:#fff5e6;color:#8d5600;border:1px solid #efc77c}
[data-hotel-search-widget] .hsw-guests{border:1px solid var(--border);border-radius:4px;background:#fff;overflow:hidden}
[data-hotel-search-widget] .hsw-guests-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;border:0;background:#f5f8fa;padding:11px 14px;text-align:left;cursor:pointer}
[data-hotel-search-widget] .hsw-guests-summary{display:block;color:#222;font-size:15px}
[data-hotel-search-widget] .hsw-toggle-mark{display:grid;place-items:center;width:28px;height:28px;border:1px solid #c8d0d7;border-radius:50%;background:#fff;color:var(--main);font-size:18px;font-weight:700}
[data-hotel-search-widget] .hsw-guests-panel{padding:14px}
[data-hotel-search-widget] .hsw-rooms{display:grid;gap:12px}
[data-hotel-search-widget] .hsw-room{min-width:0;margin:0;padding:12px 14px 14px;border:1px solid #dce2e7;border-radius:3px;background:#fff}
[data-hotel-search-widget] .hsw-room-title{padding:0 6px;color:var(--main);font-size:14px;font-weight:700}
[data-hotel-search-widget] .hsw-room-row{display:grid;grid-template-columns:180px 180px 1fr;gap:12px;align-items:end}
[data-hotel-search-widget] .hsw-room-note{margin:0 0 14px;color:var(--muted);font-size:12px}
[data-hotel-search-widget] .hsw-ages{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid #e2e7eb}
[data-hotel-search-widget] .hsw-age-field{display:grid;gap:6px;min-width:0}
[data-hotel-search-widget] .hsw-age-label{font-size:12px;font-weight:700}
[data-hotel-search-widget] .hsw-actions{display:flex;justify-content:center}
[data-hotel-search-widget] .hsw-submit{width:100%;max-width:360px;height:52px;border:0;border-radius:3px;background:var(--accent);color:#fff;font-size:17px;font-weight:700;cursor:pointer;box-shadow:0 2px 0 #c97800}
[data-hotel-search-widget] .hsw-submit:hover{background:#df8600}
[data-hotel-search-widget] .hsw-error{display:none;margin-top:12px;padding:10px 12px;border-left:4px solid #d92d20;background:#fff2f0;color:#b42318;font-size:13px}
[data-hotel-search-widget] .hsw-error.is-show{display:block}
[data-hotel-search-widget] .hsw-foot{margin:10px 0 0;color:#66717d;font-size:12px;text-align:center}
[data-hotel-search-widget] .hsw-preview-url{display:none;margin-top:10px;padding:10px;border:1px solid #dfe5e9;background:#f6f8fa;color:#596773;font-size:11px;word-break:break-all}
[data-hotel-search-widget] .hsw-preview-url.is-show{display:block}
[hidden]{display:none!important}
@media(max-width:860px){[data-hotel-search-widget] .hsw-main-row{grid-template-columns:1fr 1fr}[data-hotel-search-widget] .hsw-field:first-child{grid-column:1/-1}[data-hotel-search-widget] .hsw-room-row{grid-template-columns:1fr 1fr}[data-hotel-search-widget] .hsw-room-note{grid-column:1/-1}[data-hotel-search-widget] .hsw-ages{grid-template-columns:repeat(2,minmax(120px,1fr))}}
@media(max-width:560px){[data-hotel-search-widget] .hsw-title{font-size:20px}[data-hotel-search-widget] .hsw-main-row,[data-hotel-search-widget] .hsw-room-row,[data-hotel-search-widget] .hsw-ages{grid-template-columns:1fr}[data-hotel-search-widget] .hsw-field:first-child{grid-column:auto}[data-hotel-search-widget] .hsw-guests-panel{padding:10px}[data-hotel-search-widget] .hsw-submit{max-width:none}}


/* ------------------------------------------------------------
   都道府県での絞り込み（アコーディオン）

   数が多いので、最初は閉じています。
   記事に都道府県が1つも付いていないときは、行ごと出ません。
   ------------------------------------------------------------ */
.areaFilter{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.areaFilter[hidden]{display:none}
.areaFilter__toggle{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;
  border:1px solid var(--line-input);border-radius:9999px;background:#fff;
  font-family:var(--font);font-size:13px;color:var(--ink-sub);cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease}
.areaFilter__toggle:hover{background:#F2F5F8;border-color:var(--blue)}
.areaFilter__toggle[aria-expanded="true"]{border-color:var(--blue);color:var(--blue)}
.areaFilter__label{font-weight:700}
.areaFilter__now{color:var(--blue-link);font-weight:700}
.areaFilter__mark{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:9999px;background:#F2F5F8;font-size:12px;line-height:1}
.areaFilter .chips{margin-top:10px}
.areaFilter .chips[hidden]{display:none}

/* 日付の欄は、どこを押してもカレンダーが開きます */
[data-hotel-search-widget] .hsw-field--date{cursor:pointer}
[data-hotel-search-widget] .hsw-field--date .hsw-label{cursor:pointer}
[data-hotel-search-widget] .hsw-field--date .hsw-input{cursor:pointer}
[data-hotel-search-widget] .hsw-field--date .hsw-input::-webkit-calendar-picker-indicator{cursor:pointer}


/* ------------------------------------------------------------
   OS やブラウザがダークモードのとき、ネイティブの部品
   （ラジオ・チェックボックス・日付欄・プルダウン）が
   暗い配色で描かれます。このサイトは白地の前提なので、
   明るい配色に固定します。
   ------------------------------------------------------------ */
:root { color-scheme: light; }
:root input, :root select, :root textarea { color-scheme: light; }


/* ============================================================
   メインスライダー（旧「注目の記事」を置き換え）

   数値はデザインデータのとおりです。
     PC  札450px / 画像450x225 / すき間24px / ドット12px
     SP  札311px / 画像311x163 / すき間16px / ドット10px
   ============================================================ */
.mainSliderSec[hidden]{ display:none; }
.mainSlider{ position:relative; }

.mainSlider__track{
  display:flex; gap:24px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:auto;
  padding:8px 2px 16px; margin:0 -2px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.mainSlider__track::-webkit-scrollbar{ display:none; }
.mainSlider__track:focus-visible{ outline:3px solid #FABB00; outline-offset:2px; }
/* PCではつかんで動かせます */
@media (hover:hover) and (pointer:fine){
  .mainSlider__track{ cursor:grab; }
  .mainSlider__track.is-grabbing{ cursor:grabbing; user-select:none; }
  .mainSlider__track.is-grabbing .msCard{ pointer-events:none; }
}

.msCard{
  flex:0 0 450px; max-width:450px; scroll-snap-align:center;
  display:flex; flex-direction:column; border-radius:8px; overflow:hidden;
  background:#fff; filter:drop-shadow(0 1px 8px rgba(0,0,0,.2));
  text-decoration:none; color:inherit;
  transition:transform .15s ease;
}
.msCard:hover{ transform:translateY(-2px); }
.msCard:hover .msCard__ttl{ color:var(--blue-link); }

.msCard__img{
  display:block; width:100%; height:auto; aspect-ratio:2 / 1;
  object-fit:cover; background:#B1B1B1; border-radius:8px 8px 0 0;
}
.msCard__body{
  display:flex; flex-direction:column; justify-content:space-between; gap:24px;
  padding:12px; background:#fff; border-radius:0 0 8px 8px; flex:1;
}
.msCard__head{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.msCard__badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:2px 8px; border-radius:9999px; background:var(--badge-bg);
  color:var(--blue); font-size:12px; line-height:18px; font-weight:600; white-space:nowrap;
}
.msCard__ttl{
  margin:0; font-size:18px; line-height:27px; font-weight:600; color:#000;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.msCard__date{ margin:0; font-size:14px; line-height:21px; font-weight:300; color:var(--ink-sub); }

.mainSlider__dots{ display:flex; justify-content:center; align-items:center; gap:12px; margin-top:8px; }
.msDot{
  width:12px; height:12px; padding:0; border:0; border-radius:9999px;
  background:rgba(0,116,190,.15); cursor:pointer; transition:background-color .15s ease;
}
.msDot:hover{ background:rgba(0,116,190,.35); }
.msDot[aria-selected="true"]{ background:var(--blue); }
.msDot:focus-visible{ outline:3px solid #FABB00; outline-offset:2px; }

@media (max-width:767px){
  .mainSlider__track{ gap:16px; padding-bottom:12px; }
  .msCard{ flex-basis:311px; max-width:311px; }
  .msCard__img{ aspect-ratio:311 / 163; }
  .msCard__ttl{ -webkit-line-clamp:3; }
  .mainSlider__dots{ gap:10px; }
  .msDot{ width:10px; height:10px; }
}

/* 動きを減らす設定の人には、なめらかスクロールを使いません */
@media (prefers-reduced-motion:reduce){
  .mainSlider__track{ scroll-behavior:auto; }
  .msCard{ transition:none; }
  .msCard:hover{ transform:none; }
}


/* ------------------------------------------------------------
   PCではスライダーだけ画面いっぱいに広げます。
   真ん中の札がちょうど中央に来て、左右の札がはみ出して見えます。

   overflow-x:clip は、横スクロールだけを切って
   サイドバーの追従（position:sticky）は壊さないための指定です。
   ------------------------------------------------------------ */
@media (min-width:768px){
  body{ overflow-x:clip; }

  /* 2カラムの外に置いているので、余計な位置ずらしは不要です。
     幅はそのまま（ページ全体の幅）で、中のトラックだけ端まで使います。 */
  .mainSliderSec{ width:100%; margin-left:0; margin-right:0; }
  /* 札1枚（450px）が画面の中央に来るだけの余白を、左右に確保します */
  .mainSlider__track{
    padding-left:calc((100vw - 450px) / 2);
    padding-right:calc((100vw - 450px) / 2);
    scroll-padding-left:calc((100vw - 450px) / 2);
    scroll-padding-right:calc((100vw - 450px) / 2);
  }
}

/* 画面が狭いときは札のほうが大きくなるので、余白は最小限に */
@media (min-width:768px) and (max-width:560px){
  .mainSlider__track{ padding-left:16px; padding-right:16px; }
}