@charset "UTF-8";
/* ============================================================
   lp-hotel4.css ― ホテルを会場のエリアごとに4件：4枚をぴったり並べて、左右の送りをなくす（比較時の名前は hotel4-fit.css）
   ・共通の widget.css / widget.js は変えていません。会場ブロック（.venue-box）の中だけに効きます
   ・カードの幅を「一覧の幅 ÷ 4」にするので、画面幅が変わっても4枚がちょうど収まります
     （ウィジェットは4枚とも見えていると判断して、左右のボタンを自分で消します）
   ・960px未満は4枚を横に並べると1枚が小さくなりすぎるため、2列×2段で全部見せます
   ・960px未満は、2列×2段のすぐ下に「〇〇のホテルをもっと見る」リンクを出します（20260924・6回目で文字リンクに）
     ページ内のほかのボタンと形がぶつからないよう、見出し右のリンクと同じ文字リンクの見た目です。
     見出し右の同じリンクは、下のリンクと重なるので960px未満だけ隠しています（PCは見出し右のリンクのまま）
   ============================================================ */

/* ---------- 「もっと見る」リンク（960px未満だけ表示） ---------- */
.venue-more-link { display: none; }
.venue-box .ltkRecoWidget__track { width: 100%; min-width: 0; }
.venue-box .ltkRecoWidget__card {
  flex: 1 1 0; width: auto; min-width: 0; max-width: none;
  contain-intrinsic-size: auto 16.5rem; }
.venue-box .ltkRecoWidget__imageWrap,
.venue-box .ltkRecoWidget__body { width: 100%; min-width: 0; max-width: none; }
/* カードの中身（ホテル名・料金など）は「275px固定」を前提にした幅なので、カードの幅に合わせる */
.venue-box .ltkRecoWidget__card { --tile-inner-width: 100%; }
/* 右端の影の逃げ場（20260924・4回目）
   送りがある一覧は「右端のカードが切れて、次がある」見せ方のため、右側だけ逃げ場を0にしています。
   4枚ぴったりの場合はそのままだと4枚目の右の影だけが切れて見えるので、左と同じ幅の逃げ場を右にも作ります。
   （一覧の外枠を左右に14pxずつ広げ、内側に14pxずつ余白をとる＝カードの位置と幅は変わりません） */
@media (min-width: 960px) {
  .venue-box .ltkRecoWidget__viewport {
    width: calc(100% + var(--ltk-edge, .875rem) * 2);
    max-width: calc(100% + var(--ltk-edge, .875rem) * 2);
    padding-right: var(--ltk-edge, .875rem);
    margin-right: calc(var(--ltk-edge, .875rem) * -1); }
}
/* 念のため：送りのボタンとドラッグ用のカーソルを出さない */
.venue-box .ltkRecoWidget__nav { display: none !important; }
.venue-box .ltkRecoWidget__viewport--draggable { cursor: auto; }

/* 960px未満（タブレット・SP）は、4枚を横に並べると1枚が小さくなりすぎるため2列×2段に */
@media (max-width: 959px) {
  /* 761〜959pxの間はウィジェットがPC表示のまま「2枚ずつ送る」と判断するので、送りを止めておく */
  .venue-box .ltkRecoWidget__track { transform: none !important; }
  /* 横スクロール用の余白（影の逃げ場・右に次のカードを見せる分）を戻して、見出しと同じ幅にする */
  .venue-box .ltkRecoWidget__viewport { width: auto; max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; overflow: visible; contain: none; }
  .venue-box .ltkRecoWidget__track {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px;
    padding-right: 0; }
  .venue-box .ltkRecoWidget__imageWrap { height: 7.5rem; min-height: 7.5rem; max-height: 7.5rem; }
  .venue-box .ltkRecoWidget__card { contain-intrinsic-size: auto 14rem; }
  /* 1枚が約160pxになるため、ホテル名を少し小さくする。
     星（左）と地域（右）は、PCと同じく1行に並べる（20260924・14回目）。
     1行に収まるよう、星と地域の文字を少し小さく（360px幅の端末で「名古屋」まで1行に収まる大きさ）。
     地域名がもっと長いときは「…」で省略されます */
  .venue-box .ltkRecoWidget__card .ltkRecoWidget__body,
  .venue-box .ltkRecoWidget__card--noPrice .ltkRecoWidget__body {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 4px;
    grid-template-rows: 2.625rem .375rem 1.25rem;
    grid-template-areas: "name name" ". ." "stars place";
    padding: .625rem .625rem .75rem; }
  .venue-box .ltkRecoWidget__hotelName { height: 2.625rem; min-height: 2.625rem; max-height: 2.625rem; font-size: 1rem; line-height: 1.3125rem; }
  /* 料金を出す一覧のとき（CSVの hidePrice が FALSE）：星と地域の1行の下に、料金の2行（「大人1人 1泊の料金」と金額） */
  .venue-box .ltkRecoWidget__card:not(.ltkRecoWidget__card--noPrice) .ltkRecoWidget__body {
    grid-template-rows: 2.625rem .375rem 1.25rem minmax(.5rem, 1fr) 1rem .125rem 2.25rem;
    grid-template-areas: "name name" ". ." "stars place" ". ." "priceNote priceNote" ". ." "price price"; }
  .venue-box .ltkRecoWidget__meta,
  .venue-box .ltkRecoWidget__stars { width: 4.75rem; min-width: 4.75rem; max-width: 4.75rem; }
  .venue-box .ltkRecoWidget__stars,
  .venue-box .ltkRecoWidget__starsBase,
  .venue-box .ltkRecoWidget__starsFill { font-size: .875rem; letter-spacing: .0625rem; }
  .venue-box .ltkRecoWidget__kv--place { justify-self: end; justify-content: flex-end; min-width: 0; max-width: 100%; }
  .venue-box .ltkRecoWidget__kv--place .ltkRecoWidget__label { flex: 0 0 1rem; width: 1rem; min-width: 1rem; height: 1rem; min-height: 1rem; }
  .venue-box .ltkRecoWidget__value--place { font-size: .8125rem; }

  /* リンク：ホテル2列×2段のすぐ下に、見出し右のリンクと同じ文字リンクで。見出し右の同じリンクは隠す */
  .venue-box .venue-more-link {
    display: block; margin-top: 6px; text-align: right;
    color: #0068B7; font-size: 14px; font-weight: 700; line-height: 1.6; text-decoration: none; }
  .venue-box .venue-more-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .venue-box > header > a,
  .venue-box .tp-venue__head .tp-venue__more,
  .venue-box .rt-venue__head .rt-venue__more { display: none; }
}

/* 画面幅340px以下（ごく小さい端末）は、星と地域が1行に収まらないので、星の下に地域を置く */
@media (max-width: 340px) {
  .venue-box .ltkRecoWidget__card .ltkRecoWidget__body,
  .venue-box .ltkRecoWidget__card--noPrice .ltkRecoWidget__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 2.625rem .375rem 1.25rem .25rem 1.25rem;
    grid-template-areas: "name" "." "stars" "." "place"; }
  .venue-box .ltkRecoWidget__card:not(.ltkRecoWidget__card--noPrice) .ltkRecoWidget__body {
    grid-template-rows: 2.625rem .375rem 1.25rem .25rem 1.25rem minmax(.5rem, 1fr) 1rem .125rem 2.25rem;
    grid-template-areas: "name" "." "stars" "." "place" "." "priceNote" "." "price"; }
  .venue-box .ltkRecoWidget__kv--place { justify-self: start; justify-content: flex-start; }
}