/* loveho の記事・ページの部品（2026-10-29〜）
 * ユーザー（10-29）：WordPress のプラグインのカードでなく、自前の CSS で CTA を作る（これからの記事は WordPress を使わない）。
 * HTML は tools/lh_html.py が作る。静的の DB のページはこのファイルを読み込む。WordPress の下書きには must-use プラグイン
 * （code/wp/mu-plugins/loveho-parts.php）がこのファイルを読み込む。テーマ（SWELL）の本文の飾りに負けないよう、クラスを2つ重ねて指定する。
 */
.lh-rank, .lh-hotel, .lh-faq, .lh-calc, .lh-tbl, .lh-list { --lh-main: #0b4f6c; --lh-line: #dfe6ea; --lh-soft: #f3f7f9; --lh-text: #222; --lh-sub: #5b6670;
  --lh-hh: #e8590c; --lh-hh-dark: #c2410c; --lh-cp: #0e7490; --lh-cp-dark: #155e75; --lh-gold: #c8a12b; --lh-silver: #9aa5ae; --lh-bronze: #b0753e;
  color: var(--lh-text); line-height: 1.6; box-sizing: border-box; }
.lh-rank *, .lh-hotel *, .lh-faq *, .lh-calc *, .lh-tbl *, .lh-list * { box-sizing: border-box; }

/* ボタン（ハピホテ＝橙・カップルズ＝青緑） */
.lh-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.lh-btns .lh-btn { flex: 1 1 180px; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 46px; padding: 8px 12px;
  border-radius: 8px; font-weight: 700; font-size: 15px; line-height: 1.3; text-align: center; text-decoration: none; color: #fff;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .18); transition: transform .08s, box-shadow .08s; }
.lh-btns .lh-btn:hover { transform: translateY(1px); box-shadow: 0 2px 0 rgba(0, 0, 0, .18); color: #fff; opacity: 1; }
.lh-btns .lh-btn::after { content: "›"; font-size: 1.2em; margin-left: 2px; }
.lh-btns .lh-btn--hh { background: var(--lh-hh); }
.lh-btns .lh-btn--hh:hover { background: var(--lh-hh-dark); }
.lh-btns .lh-btn--cp { background: var(--lh-cp); }
.lh-btns .lh-btn--cp:hover { background: var(--lh-cp-dark); }
.lh-btns .lh-btn small { display: block; font-size: 11px; font-weight: 400; opacity: .9; }
.lh-btn img[width="0"] { display: none; }

/* 印（ネット予約・クーポンなど） */
.lh-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; padding: 0; }
.lh-tags .lh-tag { font-size: 12px; line-height: 1.4; padding: 2px 7px; border-radius: 4px; background: var(--lh-soft); color: var(--lh-main); border: 1px solid var(--lh-line); }
.lh-tags .lh-tag--on { background: #fff4e6; color: #a1410b; border-color: #f7c79b; }

/* 冒頭のランキング（ファーストビューの CTA） */
.lh-rank { border: 2px solid var(--lh-main); border-radius: 10px; overflow: hidden; margin: 1.2em 0 2em; background: #fff; }
.lh-rank .lh-rank__ttl { margin: 0; padding: 10px 14px; background: var(--lh-main); color: #fff; font-weight: 700; font-size: 17px; line-height: 1.4; }
.lh-rank .lh-rank__lead { margin: 0; padding: 8px 14px; background: var(--lh-soft); font-size: 13px; color: var(--lh-sub); }
.lh-rank .lh-rank__item { display: grid; grid-template-columns: 108px 1fr; gap: 6px 12px; padding: 14px; border-top: 1px solid var(--lh-line); position: relative; }
.lh-rank .lh-rank__photo { position: relative; }
.lh-rank .lh-rank__photo img, .lh-rank .lh-rank__noimg { width: 108px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; margin: 0; }
.lh-rank .lh-rank__no { position: absolute; left: -6px; top: -6px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 15px; color: #fff; background: var(--lh-main); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.lh-rank .lh-rank__no--1 { background: var(--lh-gold); }
.lh-rank .lh-rank__no--2 { background: var(--lh-silver); }
.lh-rank .lh-rank__no--3 { background: var(--lh-bronze); }
.lh-rank .lh-rank__name { margin: 0; font-weight: 700; font-size: 16px; line-height: 1.35; }
.lh-rank .lh-rank__where { margin: 2px 0 0; font-size: 12px; color: var(--lh-sub); }
.lh-rank .lh-rank__btns { grid-column: 1 / -1; flex-wrap: nowrap; }
.lh-rank .lh-rank__btns .lh-btn { flex: 1 1 0; min-width: 0; min-height: 42px; font-size: 13px; padding: 6px 8px; }   /* スマホでも横に2つ（縦に長くしない） */
.lh-rank .lh-rank__foot { margin: 0; padding: 8px 14px 12px; font-size: 12px; color: var(--lh-sub); border-top: 1px solid var(--lh-line); }
@media (min-width: 760px) {
  .lh-rank .lh-rank__item { grid-template-columns: 132px 1fr 230px; align-items: center; }
  .lh-rank .lh-rank__photo img, .lh-rank .lh-rank__noimg { width: 132px; }
  .lh-rank .lh-rank__btns { grid-column: auto; flex-direction: column; }
  .lh-rank .lh-rank__btns .lh-btn { flex: 0 0 auto; min-height: 46px; font-size: 15px; }
}

/* 料金（いちばん目立たせる数字） */
.lh-yen { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; }
.lh-yen .lh-yen__i { font-size: 13px; color: var(--lh-sub); white-space: nowrap; }
.lh-yen .lh-yen__i b { font-size: 18px; color: #c2410c; margin-left: 4px; font-weight: 700; }

/* 本文のホテルのカード */
.lh-hotel { border: 1px solid var(--lh-line); border-radius: 10px; overflow: hidden; margin: 1em 0 2em; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .05); }
.lh-hotel .lh-hotel__photo { position: relative; background: var(--lh-soft); }
.lh-hotel .lh-hotel__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0; }   /* カップルズの写真は 640×480 */
.lh-hotel .lh-hotel__credit { position: absolute; right: 6px; bottom: 6px; font-size: 11px; color: #fff; background: rgba(0, 0, 0, .55); padding: 1px 6px; border-radius: 3px; }
.lh-hotel .lh-hotel__body { padding: 12px 14px 4px; }
.lh-hotel .lh-hotel__name { margin: 0; font-weight: 700; font-size: 18px; line-height: 1.35; }
.lh-hotel .lh-hotel__where { margin: 2px 0 0; font-size: 13px; color: var(--lh-sub); }
.lh-hotel .lh-hotel__rate { margin: 6px 0 0; font-size: 13px; color: var(--lh-sub); }
.lh-hotel .lh-hotel__rate b { color: #b7791f; }
.lh-hotel .lh-pt { width: 100%; border-collapse: collapse; margin: 10px 0 0; font-size: 13px; }
.lh-hotel .lh-pt th, .lh-hotel .lh-pt td { border: 1px solid var(--lh-line); padding: 5px 6px; text-align: center; background: #fff; font-weight: 400; }
.lh-hotel .lh-pt thead th { background: var(--lh-soft); color: var(--lh-main); font-weight: 700; }
.lh-hotel .lh-pt tbody th { background: var(--lh-soft); white-space: nowrap; }
.lh-hotel .lh-pt td.lh-pt__min { color: #c2410c; font-weight: 700; }
.lh-hotel .lh-hotel__btns { padding: 10px 14px 14px; }
.lh-hotel .lh-hotel__note { margin: 0; padding: 0 14px 12px; font-size: 12px; color: var(--lh-sub); }

/* 写真が無いとき */
.lh-rank__noimg, .lh-hotel__noimg { display: flex; align-items: center; justify-content: center; background: var(--lh-soft); color: var(--lh-sub); font-size: 12px; }
.lh-hotel .lh-hotel__noimg { width: 100%; aspect-ratio: 4 / 3; }
@media (min-width: 760px) {   /* PC：写真を左、料金とボタンを右に */
  .lh-hotel { display: grid; grid-template-columns: 300px 1fr; grid-template-areas: "photo body" "photo btns" "photo note"; grid-template-rows: auto auto 1fr; }
  .lh-hotel .lh-hotel__photo { grid-area: photo; }
  .lh-hotel .lh-hotel__body { grid-area: body; }
  .lh-hotel .lh-hotel__btns { grid-area: btns; }
  .lh-hotel .lh-hotel__note { grid-area: note; }
  .lh-hotel .lh-hotel__photo img, .lh-hotel .lh-hotel__noimg { height: 100%; min-height: 225px; aspect-ratio: auto; }
}

/* よくある質問（見出しは h3 のまま・テーマの h3 の飾りを消す） */
.lh-faq { margin: 1em 0 2em; }
.lh-faq .lh-faq__item { border: 1px solid var(--lh-line); border-radius: 8px; margin: 0 0 12px; overflow: hidden; background: #fff; }
.lh-faq .lh-faq__q { margin: 0; padding: 12px 14px 12px 44px; position: relative; font-size: 16px; font-weight: 700; line-height: 1.5;
  background: var(--lh-soft); color: var(--lh-text); border: 0; }
.lh-faq .lh-faq__q::before, .lh-faq .lh-faq__q::after { content: none; display: none; }
.lh-faq .lh-faq__q .lh-faq__mark, .lh-faq .lh-faq__a .lh-faq__mark { position: absolute; left: 12px; top: 10px; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--lh-main); }
.lh-faq .lh-faq__a { position: relative; padding: 12px 14px 12px 44px; }
.lh-faq .lh-faq__a .lh-faq__mark { background: var(--lh-hh); }
.lh-faq .lh-faq__a p { margin: 0 0 .5em; }
.lh-faq .lh-faq__a p:last-child { margin-bottom: 0; }

/* 料金の計算機（code/components/lh-calc.js） */
.lh-calc { border: 2px solid var(--lh-main); border-radius: 10px; overflow: hidden; margin: 1em 0 2em; background: #fff; min-height: 120px; }
.lh-calc .lh-calc__ttl { margin: 0; padding: 10px 14px; background: var(--lh-main); color: #fff; font-weight: 700; font-size: 17px; }
.lh-calc .lh-calc__form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 14px; background: var(--lh-soft); }
.lh-calc .lh-calc__form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--lh-main); margin: 0; }
.lh-calc .lh-calc__form select { width: 100%; min-height: 44px; font-size: 16px; padding: 6px 8px; border: 1px solid #b9c6cd; border-radius: 6px; background: #fff; color: var(--lh-text); }
.lh-calc .lh-calc__sum { margin: 0; padding: 10px 14px; font-size: 14px; border-bottom: 1px solid var(--lh-line); }
.lh-calc .lh-calc__sum b { color: #c2410c; }
.lh-calc .lh-calc__row { display: grid; grid-template-columns: 30px 1fr; gap: 6px 10px; padding: 12px 14px; border-bottom: 1px solid var(--lh-line); align-items: start; }
.lh-calc .lh-calc__no { width: 26px; height: 26px; border-radius: 50%; background: var(--lh-main); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.lh-calc .lh-calc__name { margin: 0; font-weight: 700; font-size: 15px; line-height: 1.35; }
.lh-calc .lh-calc__where { margin: 0; font-size: 12px; color: var(--lh-sub); }
.lh-calc .lh-calc__price { margin: 2px 0 0; font-size: 12px; color: var(--lh-sub); }
.lh-calc .lh-calc__price b { font-size: 18px; color: #c2410c; margin-right: 6px; }
.lh-calc .lh-btns { grid-column: 2 / -1; }
.lh-calc .lh-btns .lh-btn { min-height: 40px; font-size: 14px; }
.lh-calc .lh-calc__note, .lh-calc .lh-calc__none { margin: 0; padding: 10px 14px; font-size: 12px; color: var(--lh-sub); }
@media (min-width: 760px) {
  .lh-calc .lh-calc__row { grid-template-columns: 30px 1fr 220px; align-items: center; }
  .lh-calc .lh-btns { grid-column: auto; flex-direction: column; }
  .lh-calc .lh-btns .lh-btn { flex: 0 0 auto; }   /* 縦並びでは flex-basis が高さに効くので外す */
}

/* データの表（スマホは横にスクロール・1列目を固定） */
.lh-tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1em 0 1.8em; border: 1px solid var(--lh-line); border-radius: 8px; background: #fff; }
.lh-tbl table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; max-width: none; margin: 0; font-size: 14px; line-height: 1.5; border: 0; }   /* テーマの max-width:100% で縮ませない */
.lh-tbl td.lh-n { white-space: nowrap; }   /* 料金・数字は折り返さない */
.lh-tbl th, .lh-tbl td { border: 0; border-bottom: 1px solid var(--lh-line); padding: 8px 10px; text-align: left; vertical-align: middle; max-width: 15em; background: #fff; }
.lh-tbl thead th { background: var(--lh-main); color: #fff; font-weight: 700; font-size: 13px; white-space: nowrap; }
.lh-tbl thead th small { display: block; font-weight: 400; font-size: 11px; opacity: .85; }
.lh-tbl tbody tr:nth-child(even) td { background: #fafcfd; }
.lh-tbl th:first-child, .lh-tbl td:first-child { position: sticky; left: 0; z-index: 1; font-weight: 700; box-shadow: 1px 0 0 var(--lh-line); }
.lh-tbl thead th:first-child { z-index: 2; }
@media (max-width: 759px) { .lh-tbl table { font-size: 13px; } .lh-tbl th, .lh-tbl td { padding: 7px 8px; max-width: 12em; } }

/* 全ホテルの一覧（code/components/lh-list.js が並べ替えと絞り込みを足す） */
.lh-list { margin: 1em 0 2em; }
.lh-list .lh-list__bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; padding: 12px; background: var(--lh-soft); border: 1px solid var(--lh-line); border-radius: 8px 8px 0 0; }
.lh-list .lh-list__sort { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; color: var(--lh-main); margin: 0; }
.lh-list .lh-list__sort select { min-height: 40px; font-size: 15px; padding: 4px 8px; border: 1px solid #b9c6cd; border-radius: 6px; background: #fff; color: var(--lh-text); }
.lh-list .lh-list__chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.lh-list .lh-chip { font-size: 13px; padding: 6px 10px; border-radius: 999px; border: 1px solid #b9c6cd; background: #fff; color: var(--lh-text); cursor: pointer; line-height: 1.3; }
.lh-list .lh-chip[aria-pressed="true"] { background: var(--lh-main); border-color: var(--lh-main); color: #fff; }
.lh-list .lh-list__count { margin: 0; width: 100%; font-size: 13px; color: var(--lh-sub); }
.lh-list .lh-tbl { margin-top: 0; border-radius: 0 0 8px 8px; border-top: 0; max-height: 80vh; overflow-y: auto; }
.lh-list .lh-tbl thead th { position: sticky; top: 0; z-index: 2; }
.lh-list .lh-tbl thead th:first-child { z-index: 3; }
.lh-list td.lh-list__h { min-width: 13em; max-width: 17em; }
.lh-list .lh-list__hw { display: flex; gap: 8px; align-items: flex-start; }
.lh-list td.lh-list__h img, .lh-list .lh-list__noimg { width: 56px; height: 42px; object-fit: cover; border-radius: 4px; flex: 0 0 56px; margin: 0; background: var(--lh-soft); display: block; }
.lh-list td.lh-list__h a { font-weight: 700; color: var(--lh-main); text-decoration: underline; }
.lh-list td.lh-list__h small { display: block; font-weight: 400; font-size: 11px; color: var(--lh-sub); }
.lh-list td.lh-list__h .lh-tag { display: inline-block; font-size: 10px; padding: 0 5px; margin: 2px 3px 0 0; border-radius: 3px; }
.lh-list td.lh-list__rate span { display: block; font-size: 12px; white-space: nowrap; }
.lh-list td.lh-list__none { color: var(--lh-sub); font-size: 12px; }
.lh-list tr[hidden] { display: none; }
.lh-list td.lh-list__h .lh-tag--on { background: #fff4e6; color: #a1410b; border: 1px solid #f7c79b; }

/* ホテルごとの一言の売り（料金のデータから）・ホテルのページへのリンク */
.lh-rank .lh-rank__catch, .lh-hotel .lh-hotel__catch { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: #a1410b; }
.lh-rank .lh-rank__name a, .lh-hotel .lh-hotel__name a { color: var(--lh-text); text-decoration: underline; text-decoration-color: #b9c6cd; }
.lh-hotel .lh-hotel__more { margin: 0; padding: 0 14px 12px; font-size: 13px; }
.lh-btns.lh-cta-row { margin: 8px 0 24px; }
.lh-calc .lh-calc__name a { color: var(--lh-text); }
.lh-rank .lh-rank__noimg { font-size: 11px; padding-left: 18px; }

/* ホテルのカード：スマホは写真を左に小さく・名前と売りを右に（縦に長くしない）。PC は写真を左に大きく（2026-10-29） */
.lh-hotel { display: grid; grid-template-columns: 120px 1fr; grid-template-areas: "photo head" "body body" "btns btns" "more more" "note note"; }
.lh-hotel .lh-hotel__photo { grid-area: photo; margin: 12px 0 0 12px; border-radius: 6px; overflow: hidden; align-self: start; }
.lh-hotel .lh-hotel__photo img, .lh-hotel .lh-hotel__noimg { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
.lh-hotel .lh-hotel__credit { font-size: 9px; padding: 0 4px; right: 3px; bottom: 3px; }
.lh-hotel .lh-hotel__head { grid-area: head; padding: 12px 12px 0; min-width: 0; }
.lh-hotel .lh-hotel__head .lh-hotel__name { font-size: 16px; }
.lh-hotel .lh-hotel__head .lh-hotel__where, .lh-hotel .lh-hotel__head .lh-hotel__rate { font-size: 12px; }
.lh-hotel .lh-hotel__body { grid-area: body; padding: 4px 12px 0; }
.lh-hotel .lh-hotel__btns { grid-area: btns; padding: 10px 12px 12px; flex-wrap: nowrap; }
.lh-hotel .lh-hotel__btns .lh-btn { flex: 1 1 0; min-width: 0; font-size: 13px; min-height: 44px; padding: 6px 8px; }
.lh-hotel .lh-hotel__more { grid-area: more; }
.lh-hotel .lh-hotel__note { grid-area: note; }
@media (min-width: 760px) {
  .lh-hotel { grid-template-columns: 280px 1fr; grid-template-areas: "photo head" "photo body" "photo btns" "photo more" "photo note"; grid-template-rows: auto auto auto auto 1fr; }
  .lh-hotel .lh-hotel__photo { margin: 0; border-radius: 0; align-self: stretch; }
  .lh-hotel .lh-hotel__photo img, .lh-hotel .lh-hotel__noimg { height: 100%; min-height: 210px; aspect-ratio: auto; }
  .lh-hotel .lh-hotel__credit { font-size: 11px; padding: 1px 6px; right: 6px; bottom: 6px; }
  .lh-hotel .lh-hotel__head { padding: 14px 16px 0; }
  .lh-hotel .lh-hotel__head .lh-hotel__name { font-size: 18px; }
  .lh-hotel .lh-hotel__body { padding: 4px 16px 0; }
  .lh-hotel .lh-hotel__btns { padding: 10px 16px 12px; }
  .lh-hotel .lh-hotel__btns .lh-btn { font-size: 15px; }
}

/* 予約できるホテルへの案内（報酬につながる動線） */
.lh-rsv { --lh-main: #0b4f6c; --lh-line: #f7c79b; --lh-soft: #fff7ef; --lh-text: #222; --lh-sub: #5b6670; --lh-hh: #e8590c; --lh-hh-dark: #c2410c; --lh-cp: #0e7490; --lh-cp-dark: #155e75;
  border: 2px solid #f0a35e; border-radius: 10px; background: #fff; margin: 1.2em 0 2em; overflow: hidden; color: var(--lh-text); line-height: 1.6; }
.lh-rsv * { box-sizing: border-box; }
.lh-rsv .lh-rsv__ttl { margin: 0; padding: 9px 14px; background: #fff1e3; color: #a1410b; font-weight: 700; font-size: 16px; }
.lh-rsv .lh-rsv__lead { margin: 0; padding: 6px 14px 0; font-size: 12px; color: var(--lh-sub); }
.lh-rsv .lh-rsv__item { display: grid; grid-template-columns: 84px 1fr; gap: 4px 10px; padding: 10px 14px; border-top: 1px solid #fde3cb; }
.lh-rsv .lh-rsv__item:first-of-type { border-top: 0; }
.lh-rsv .lh-rsv__photo img, .lh-rsv .lh-rank__noimg { width: 84px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; display: flex; margin: 0; height: auto; }
.lh-rsv .lh-rsv__name { margin: 0; font-weight: 700; font-size: 15px; line-height: 1.35; }
.lh-rsv .lh-rsv__name a { color: var(--lh-text); }
.lh-rsv .lh-rsv__where { margin: 0; font-size: 12px; color: var(--lh-sub); }
.lh-rsv .lh-yen .lh-yen__i b { font-size: 16px; }
.lh-rsv .lh-rsv__btns { grid-column: 1 / -1; flex-wrap: nowrap; }
.lh-rsv .lh-rsv__btns .lh-btn { flex: 1 1 0; min-width: 0; min-height: 40px; font-size: 13px; padding: 6px 8px; }
.lh-rsv .lh-rsv__more { margin: 0; padding: 8px 14px 12px; font-size: 14px; text-align: right; }
@media (min-width: 760px) {
  .lh-rsv .lh-rsv__item { grid-template-columns: 96px 1fr 230px; align-items: center; }
  .lh-rsv .lh-rsv__photo img, .lh-rsv .lh-rank__noimg { width: 96px; }
  .lh-rsv .lh-rsv__btns { grid-column: auto; flex-direction: column; }
  .lh-rsv .lh-rsv__btns .lh-btn { flex: 0 0 auto; font-size: 14px; }
}
.lh-calc .lh-calc__rsv { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 14px 12px; background: var(--lh-soft); font-size: 14px; font-weight: 700; color: var(--lh-main); }
.lh-calc .lh-calc__rsv input { width: 20px; height: 20px; }