/* ==========================================================================
   80-v4.css — みるとべ v4(R2「旅のノート」・2026-10-13)
   写し元: mirutobe/design-20261011/3-proto/R2/tokens.css + style.css + data/s3/s3.css(S3-R2 の 63 面で使った正本)。生成: 変換スクリプトで機械的に。
   規律:
     - すべての選択子は `body.mt-v4` で始める(未スコープ 0)。:root の変数も `body.mt-v4` に置く。
       試作の `html { -webkit-text-size-adjust }`・`html:has(dialog[open])`・`body { … }` は `body.mt-v4` に寄せた
       (`html:has(dialog[open]) { overflow: hidden }` は `body.mt-v4:has(dialog[open])`。body の overflow は html が visible のとき viewport に伝わる)。
       試作の `*, *::before, *::after`(box-sizing)は body 自身にも掛かるので、`body.mt-v4` と `body.mt-v4 *` の両方に書く。
     - 値は試作のまま。変えたのは次の 3 つだけ。
       (1) ルート相対の長さ単位は px に直す(R2 の CSS には 0 個で、変換は 0 件。親 Xwrite は `html { font-size: 62.5% }` で html が 10px なので、足すときは 16 倍の px にする)。
       (2) 本番だけの補い(R2 に無い部品: 写真の無いセール札・順位・セール行、最近のコメント)。値は R2 の変数と数字だけ。
       (3) ファイル末尾の「環境の打ち消し」。親が body・dialog に付ける値を、試作が描かれた条件(親 CSS 無し)に戻す。
     - クラス名は試作のまま。.bx(BudouX の題)だけ本番の部品が付ける。
     - @font-face・@keyframes は無い。書体は mtb-v4-fonts(Google Fonts・Josefin Sans 700 + M PLUS 1 800・text= で絞る)が別に読む。
   ========================================================================== */


/* ---------------- tokens.css ---------------- */
/* みるとべ S2 試作 R2(参考2 旅のノート)の値の台帳。
   出どころは各行のコメント。「Yu の決定」= Yu が 10/12 17:1x にキャンバス版37の板(canvas-r2/boards/r2-*.dc.html)を見て「これで進めて」と答えた値。
   板は inline style だけなので、ここに集めた名前を style.css が引く。 */
body.mt-v4 {
  /* ---- 色 ---- */
  --ink: #0E2433;            /* Yu の決定(キャンバス版37の板・10/12): 板 r2-* の文字色・フッターの地・太い枠 */
  --muted: #566573;          /* Yu の決定(キャンバス版37の板・10/12): 板の補助の字(日付・出典・説明)。白地で 5.99:1・潮色の地で 4.9:1 */
  --accent: #0A6C97;         /* Yu の決定(キャンバス版37の板・10/12): 板の data-props 既定の {{accent}}。白地で 5.8:1 */
  --surface: #DDEBF3;        /* Yu の決定(キャンバス版37の板・10/12): 板の「潮色」の地(セール帯・行き先・入力欄・丸ボタン) */
  --white: #FFFFFF;          /* 板の白(カード・ヘッダーの地) */
  --coral: #FF7A45;          /* Yu の決定(キャンバス版37の板・10/12): 締切3日以内の「あと◯日」の札。字は --ink(6.1:1) */
  --rule: #DDE5EA;           /* 板の区切り線(白地の上の ol/ul・表の枠) */
  --rule-on-surface: #C7DCE8; /* 板の潮色の地の上の区切り線・SP の行き先の枠 */
  --line: #D3DCE2;           /* 板の枠線(前の記事のボタン・目次・箱の枠) */
  --line-tag: #C9D3DA;       /* 板の新着カードのカテゴリ札の枠 */
  --line-chip: #B5CEDD;      /* 板の PC の行き先の札の枠 */
  --footer-ad: rgba(255, 255, 255, 0.88); /* 板は .8 の 12px。16px に上げたので .88 にして比を稼ぐ(ink 地で 11:1 以上) */
  --field-line: #7A8B96;     /* 検査 2(入力欄の枠は 3:1 以上)の試作の判断: 検索欄の枠。白地に 3.5:1。板の検索欄は枠なし(潮色の地だけ・白地に 1.2:1) */
  --shadow-card: 0 12px 32px rgba(14, 36, 51, 0.14); /* 板の写真に重ねる白いカードの影(PC) */
  --shadow-card-sp: 0 8px 24px rgba(14, 36, 51, 0.12); /* 板の同じ影の SP 版 */
  --scrim: rgba(14, 36, 51, 0.75); /* 板の売り場一覧の写真クレジット帯の地(今週の3枚) */

  /* ---- 書体 ---- */
  --font-head: "Josefin Sans", "M PLUS 1", sans-serif; /* Yu の選択(10/12): 見出し=Josefin Sans + M PLUS 1。Google Fonts css2 を text= で絞る */
  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif; /* 親の決定(SPEC-R2): 本文は端末のゴシック。板は Noto Sans JP を読んでいたが、書体 100KB に入らないため */
  --head-weight: 800;        /* 板の CSS は 900 だが読み込みは M PLUS 1 の 800 まで・Josefin Sans は 700 まで。実際に描かれる太さに合わせる */

  /* ---- 余白の幅(板 1440 と 390 の実測) ---- */
  --gut: 16px;               /* 板 SP(390)の左右の余白 */
  --gut-pc: 80px;            /* 板 PC(1440)の左右の余白。900〜1359 は 40px にする(試作の判断: 板に無い幅) */
  --post-w: 1100px;          /* 板 r2-post-pc(1440)の記事の中身の幅(左右 170px の余白・本文 720 + 間 56 + 右の列 324)。これより広い画面では中身の幅を固定 */
  --measure: 1280px;         /* 板 PC の中身の幅(1440 − 80×2)。これより広い画面では中身の幅を固定 */

  /* ---- 角丸 ---- */
  --r-lg: 16px;              /* 板の大きな写真・セール帯・箱 */
  --r-md: 14px;              /* 板のカード・小さめの写真 */
  --r-sm: 12px;              /* 板の新着の写真・目次 */
  --r-xs: 10px;              /* 板の PC 行き先の札・ランキング写真 */
  --r-tag: 6px;              /* 板の日付の札 */

  /* ---- 押せる大きさ ---- */
  --tap-main: 44px;          /* SPEC-R2: SP の主な操作 */
  --tap: 40px;               /* SPEC-R2: その他 */

  /* ---- 字の下限 ---- */
  --fs-min: 14px;            /* design_check #4: 14px 未満の字は全幅で 0。板の 11〜13px は 14px に上げた */
  --fs-body: 16px;           /* design_check #4: SP の本文は 16px 以上 */
}


/* ---------------- style.css ---------------- */
/* みるとべ S2 試作 R2(参考2 旅のノート)。値は tokens.css。見た目の正本は canvas-r2/boards/r2-*.dc.html。
   1つの CSS で 390〜1440。切り替えは 900px(板の PC=1440・SP=390 の間)。 */
body.mt-v4,
body.mt-v4 *,
body.mt-v4 *::before,
body.mt-v4 *::after { box-sizing: border-box; }
body.mt-v4 { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body.mt-v4:has(dialog[open]) { overflow: hidden; }
body.mt-v4 { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.7; color: var(--ink); background: var(--white); font-variant-numeric: lining-nums; }
body.mt-v4 img { max-width: 100%; }
body.mt-v4 a { color: inherit; text-decoration: none; }
body.mt-v4 h1,
body.mt-v4 h2,
body.mt-v4 h3,
body.mt-v4 p,
body.mt-v4 ul,
body.mt-v4 ol { margin: 0; padding: 0; }
body.mt-v4 ul, body.mt-v4 ol { list-style: none; }
body.mt-v4 button { font: inherit; color: inherit; cursor: pointer; }
body.mt-v4 svg { flex: none; }
body.mt-v4 :where(h1, h2, h3, h4, p, a, li, td, th, dd, dt, figcaption) { word-break: auto-phrase; overflow-wrap: break-word; }
body.mt-v4 h1,
body.mt-v4 h2,
body.mt-v4 h3,
body.mt-v4 .fh { font-family: var(--font-head); font-weight: var(--head-weight); }
body.mt-v4 :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.mt-v4 .skip { position: absolute; left: 8px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--ink); color: var(--white); }
body.mt-v4 .skip:focus { top: 8px; }
body.mt-v4 .nw { white-space: nowrap; }
@media (max-width: 899px) { body.mt-v4 .pc-only { display: none !important; } body.mt-v4 .band.band--pc { display: none; } }
@media (min-width: 900px) { body.mt-v4 .sp-only { display: none !important; } body.mt-v4 .band.band--sp { display: none; } }

/* ---- ヘッダー・帯・チップ ---- */
body.mt-v4 .chrome { display: flex; flex-direction: column; }
body.mt-v4 .hdr { order: 1; display: flex; align-items: center; justify-content: space-between; height: 68px; padding: 10px var(--gut); }
body.mt-v4 .band { order: 2; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; background: var(--accent); color: var(--white); font-size: 14px; font-weight: 700; }
body.mt-v4 .chips { order: 3; display: flex; gap: 6px; overflow-x: auto; padding: 8px var(--gut) 4px; white-space: nowrap; scrollbar-width: none; }
body.mt-v4 .chips::-webkit-scrollbar { display: none; }
body.mt-v4 .hdr__logo { order: 0; display: flex; align-items: center; min-height: 44px; font-size: 24px; line-height: 1; letter-spacing: 0.04em; white-space: nowrap; }
body.mt-v4 .hdr__sbtn { order: -1; }
body.mt-v4 .hdr__mbtn { order: 1; }
body.mt-v4 .hdr__btn { display: flex; align-items: center; justify-content: center; width: var(--tap-main); height: var(--tap-main); border: 0; background: var(--surface); color: var(--ink); padding: 0; }
body.mt-v4 .hdr__nav, body.mt-v4 .hdr__en, body.mt-v4 .hdr .search { display: none; }
body.mt-v4 .chip { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; width: 62px; font-size: 14px; font-weight: 700; line-height: 1.2; }
body.mt-v4 .chip__ic { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: var(--surface); color: var(--accent); }
body.mt-v4 .chip.is-on .chip__ic { background: var(--accent); color: var(--white); }

body.mt-v4 .search__box { position: relative; display: block; }
body.mt-v4 .search__box input { display: block; width: 100%; height: 52px; padding: 0 56px 0 16px; border: 1px solid var(--field-line); outline: 0; background: var(--surface); font: inherit; font-size: 16px; color: var(--ink); }
body.mt-v4 .search__box:focus-within input { outline: 2px solid var(--accent); outline-offset: 2px; }
body.mt-v4 .search__box input::placeholder { color: var(--muted); opacity: 1; }
body.mt-v4 .search__go { position: absolute; top: 4px; right: 4px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: var(--white); color: var(--ink); padding: 0; }
body.mt-v4 .nv { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 52px; height: 64px; padding: 0 2px; font-size: 14px; font-weight: 700; line-height: 1.2; }
body.mt-v4 .nv .ic { color: var(--accent); }
body.mt-v4 .nv[aria-current] { box-shadow: inset 0 -3px 0 var(--accent); }

@media (min-width: 900px) {
  body.mt-v4 { --gut: 40px; }
  body.mt-v4 .chrome { --nv-gap: 12px; }
  body.mt-v4 .band { order: 0; height: 42px; font-size: 15px; }
  body.mt-v4 .hdr { order: 1; flex-wrap: wrap; height: auto; padding: 12px var(--gut) 0; gap: 8px 16px; }
  body.mt-v4 .chips, body.mt-v4 .hdr__sbtn, body.mt-v4 .hdr__mbtn { display: none; }
  body.mt-v4 .hdr__logo { font-size: 32px; }
  body.mt-v4 .hdr__en { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 4px; margin-left: auto; font-size: 14px; font-weight: 700; }
  body.mt-v4 .hdr .search { display: block; width: 200px; }
  body.mt-v4 .hdr__nav { display: flex; align-items: center; justify-content: space-between; order: 3; width: 100%; white-space: nowrap; }
}
@media (min-width: 1200px) {
  body.mt-v4 .hdr { flex-wrap: nowrap; height: 88px; padding: 0 var(--gut); }
  body.mt-v4 .hdr__nav { order: 0; width: auto; margin-left: auto; justify-content: flex-start; gap: 12px; }
  body.mt-v4 .hdr__en { margin-left: 0; }
}
@media (min-width: 1360px) {
  body.mt-v4 { --gut: 80px; }
  body.mt-v4 .hdr__nav { gap: 20px; }
  body.mt-v4 .hdr .search { width: 236px; }
}

/* ---- メニュー(SP) ---- */
body.mt-v4 .menu { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 10px var(--gut) 32px; border: 0; background: var(--white); color: var(--ink); overflow-y: auto; }
body.mt-v4 .menu:not([open]) { display: none; }
body.mt-v4 .menu::backdrop { background: rgba(14, 36, 51, 0.4); }
body.mt-v4 .menu__top { display: flex; align-items: center; justify-content: space-between; height: 48px; margin-bottom: 8px; }
body.mt-v4 .menu__logo { font-size: 24px; line-height: 1; letter-spacing: 0.04em; }
body.mt-v4 .menu__h { margin: 24px 0 4px; font-size: 18px; line-height: 1.4; }
body.mt-v4 .menu__list li { border-bottom: 1px solid var(--rule); }
body.mt-v4 .menu__list a { display: flex; align-items: center; gap: 14px; min-height: 56px; font-size: 17px; font-weight: 700; }
body.mt-v4 .menu__ic { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; background: var(--surface); color: var(--accent); }
body.mt-v4 .menu__list--plain a { min-height: 48px; font-size: 16px; font-weight: 500; }
@media (min-width: 900px) { body.mt-v4 .menu { display: none !important; } }

/* ---- 回る列(写真・セールのカード) ---- */
body.mt-v4 .rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
body.mt-v4 .rail::-webkit-scrollbar { display: none; }
body.mt-v4 .rail > * { scroll-snap-align: start; }

/* ---- 写真の透かしを切る(板 6783 の下寄せ拡大) ---- */
body.mt-v4 .wm { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
body.mt-v4 .wm img { position: absolute; left: 50%; bottom: var(--wm-b, -6px); display: block; width: auto; height: calc(var(--wm-k, 1.34) * 100%); max-width: none; transform: translateX(-50%); }

/* ---- 小さな札 ---- */
body.mt-v4 .tag { display: inline-block; padding: 0 8px; border: 1px solid var(--line-tag); color: var(--ink); font-size: 14px; line-height: 1.5; }
body.mt-v4 .tag--on { border-color: var(--accent); color: var(--accent); font-weight: 700; }

/* ---- 写真の横流し(トップ) ---- */
body.mt-v4 .hero { --slide-w: calc(100cqw - 64px); container-type: inline-size; padding-top: 8px; }
body.mt-v4 .rail--hero { gap: 12px; padding: 0 var(--gut) 4px; padding-inline-end: calc(100cqw - var(--gut) - var(--slide-w)); clip-path: inset(0 0 0 var(--gut)); scroll-padding-inline-start: var(--gut); }
body.mt-v4 .hs { display: block; flex: 0 0 var(--slide-w); }
body.mt-v4 .hs__img { display: block; width: 100%; height: clamp(272px, 52cqw, 420px); object-fit: cover; }
body.mt-v4 .hs__card { position: relative; display: block; margin: -48px 12px 0; padding: 14px 16px 16px; background: var(--white); box-shadow: var(--shadow-card-sp); }
body.mt-v4 .hs__meta { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
body.mt-v4 .hs__meta .tag { padding: 0 8px; }
body.mt-v4 .hs__h { display: block; margin-top: 8px; font-size: 22px; line-height: 1.35; letter-spacing: 0.01em; }
body.mt-v4 .hs__sub { display: block; margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--muted); }
body.mt-v4 .hs__cr { display: block; margin: 6px 14px 0; font-size: 14px; color: var(--muted); text-align: right; }
body.mt-v4 .sp-br { display: inline; }
@media (min-width: 900px) {
  body.mt-v4 .hero { --slide-w: min(1000px, calc(100cqw - 2 * var(--gut) - 120px)); }
  body.mt-v4 .rail--hero { gap: 20px; padding-bottom: 8px; }
  body.mt-v4 .hs__img { height: clamp(300px, 32cqw, 460px); }
  body.mt-v4 .hs__card { width: min(640px, calc(100% - 64px)); margin: -120px 0 0 32px; padding: 16px 24px 20px; box-shadow: var(--shadow-card); }
  body.mt-v4 .hs__meta { gap: 12px; }
  body.mt-v4 .hs__meta .tag { padding: 0 9px; }
  body.mt-v4 .hs__h { margin-top: 12px; font-size: 36px; line-height: 1.3; }
  body.mt-v4 .hs__sub { margin-top: 6px; font-size: 17px; font-weight: 500; line-height: 1.6; color: var(--ink); }
  body.mt-v4 .hs__ex { display: block; margin-top: 12px; font-size: 15px; line-height: 1.8; color: var(--muted); }
  body.mt-v4 .hs__cr { margin: 8px 8px 0 0; }
  body.mt-v4 .hero__ctl { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 4px var(--gut) 0; }
  body.mt-v4 .sp-br { display: none; }
}
body.mt-v4 .rbtn { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--line); background: var(--white); color: var(--ink); padding: 0; }
body.mt-v4 .rbtn--on { border-color: var(--ink); background: var(--ink); color: var(--white); }

/* ---- 締切が近いセール ---- */
body.mt-v4 .sale { margin: 20px 0 0; padding: 16px 0; background: var(--surface); }
body.mt-v4 .sale__head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 var(--gut); }
body.mt-v4 .sale__h { font-size: 26px; line-height: 1.3; }
body.mt-v4 .sale__all { display: inline-flex; align-items: center; min-height: var(--tap); margin-block: -8px; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
body.mt-v4 .rail--sale { gap: 12px; align-items: stretch; padding: 16px var(--gut) 0; padding-inline-end: var(--gut); clip-path: inset(0 0 0 var(--gut)); scroll-padding-inline-start: var(--gut); }
body.mt-v4 .sc { display: flex; flex-direction: column; flex: 0 0 240px; background: var(--white); overflow: hidden; }
body.mt-v4 .sc__ph { display: block; height: 140px; overflow: hidden; }
body.mt-v4 .sc__img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.mt-v4 .sc .wm { --wm-k: 1.34; --wm-b: -6px; }
body.mt-v4 .sc__b { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 12px 16px 16px; }
body.mt-v4 .sc__d { display: flex; align-items: center; gap: 8px; }
body.mt-v4 .dleft { padding: 0 8px; border: 1px solid var(--ink); font-weight: 700; font-size: 14px; line-height: 1.5; }
body.mt-v4 .dleft--hot { padding: 1px 9px; border: 0; background: var(--coral); color: var(--ink); }
body.mt-v4 .sc__date { font-weight: 700; font-size: 14px; font-variant-numeric: lining-nums tabular-nums; }
body.mt-v4 .sc__al { font-size: 14px; color: var(--muted); line-height: 1.5; }
body.mt-v4 .sc__nm { font-weight: 700; font-size: 15px; line-height: 1.5; }
body.mt-v4 .sc__price { font-size: 22px; line-height: 1.3; }
body.mt-v4 .sc__tax { font-family: var(--font-body); font-weight: 500; font-size: 14px; }
body.mt-v4 .sc__pd { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; font-size: 14px; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
body.mt-v4 .sc--end { justify-content: center; gap: 8px; flex-basis: 168px; padding: 12px 20px; background: var(--accent); color: var(--white); }
body.mt-v4 .sc--end__a { font-size: 14px; font-weight: 700; }
body.mt-v4 .sc--end__n { font-size: 40px; line-height: 1; }
body.mt-v4 .sc--end__l { font-size: 14px; font-weight: 700; line-height: 1.5; text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 900px) {
  body.mt-v4 .sale { margin: 32px var(--gut) 0; padding: 24px 0; overflow: hidden; }
  body.mt-v4 .sale__head { gap: 16px; padding: 0 32px; }
  body.mt-v4 .sale__h { font-size: 38px; line-height: 1.25; }
  body.mt-v4 .sale__all { margin-left: auto; margin-block: -7px; font-size: 15px; text-underline-offset: 5px; }
  body.mt-v4 .rail--sale { gap: 16px; padding: 16px 32px 4px; padding-inline-end: 32px; clip-path: inset(0 0 0 32px); scroll-padding-inline-start: 32px; }
  body.mt-v4 .sc { flex-basis: 290px; }
  body.mt-v4 .sc__ph { height: 172px; }
  body.mt-v4 .sc .wm { --wm-k: 1.34; --wm-b: -7px; }
  body.mt-v4 .sc__b { padding: 16px; }
  body.mt-v4 .sc__al { font-size: 14px; }
  body.mt-v4 .sc__nm { font-size: 16px; }
  body.mt-v4 .sc__price { font-size: 24px; }
  body.mt-v4 .sc--end { gap: 10px; flex-basis: 200px; padding: 16px 20px; }
  body.mt-v4 .sc--end__a { font-size: 15px; }
  body.mt-v4 .sc--end__n { font-size: 52px; }
  body.mt-v4 .sc--end__l { font-size: 15px; line-height: 1.6; }
}

/* ---- トップの本体(新着・よく読まれている記事・モデルプラン・制度と旅行術) ---- */
body.mt-v4 .hg > section { padding: 28px var(--gut) 0; }
body.mt-v4 .sh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
body.mt-v4 .sh--rank { justify-content: flex-start; gap: 10px; }
body.mt-v4 .sh__h { font-size: 24px; line-height: 1.3; }
body.mt-v4 .sh__a { display: inline-flex; align-items: center; min-height: var(--tap); margin-block: -8px; font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
body.mt-v4 .sh__n { font-size: 14px; color: var(--muted); }
body.mt-v4 .newg { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; margin-top: 12px; }
body.mt-v4 .nc { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.mt-v4 .nc__ph { display: block; height: 116px; overflow: hidden; }
body.mt-v4 .nc__img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.mt-v4 .nc .wm { --wm-k: 1.34; --wm-b: -5px; }
body.mt-v4 .nc__t { font-weight: 700; font-size: 14px; line-height: 1.55; }
body.mt-v4 .nc__m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }

body.mt-v4 .rklist { margin-top: 12px; border-bottom: 1px solid var(--rule); }
body.mt-v4 .rklist li { border-top: 1px solid var(--rule); }
body.mt-v4 .rk { display: grid; grid-template-columns: 28px 80px minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px 0; }
body.mt-v4 .rk__n { font-size: 34px; line-height: 1; color: var(--accent); text-align: center; }
body.mt-v4 .rk__img { display: block; width: 80px; height: 64px; object-fit: cover; }
body.mt-v4 .rk__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.mt-v4 .rk__ti { font-weight: 700; font-size: 14px; line-height: 1.55; text-wrap: pretty; }
body.mt-v4 .rk__c { font-size: 14px; color: var(--muted); }

body.mt-v4 .hg > .hg__plan .plang { margin-top: 12px; }
body.mt-v4 .pb { display: block; }
body.mt-v4 .pb__img { display: block; width: 100%; height: clamp(220px, 66vw, 360px); object-fit: cover; }
body.mt-v4 .pb__cr, body.mt-v4 .ps__cr { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); text-align: right; }
body.mt-v4 .pb__d { display: block; margin-top: 6px; font-size: 18px; color: var(--accent); }
body.mt-v4 .pb__t { display: block; font-size: 22px; line-height: 1.4; text-wrap: pretty; }
body.mt-v4 .pb__s { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
body.mt-v4 .plang__s { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
body.mt-v4 .ps { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.mt-v4 .ps__img { display: block; width: 100%; height: 132px; object-fit: cover; }
body.mt-v4 .ps__d { font-size: 15px; color: var(--accent); }
body.mt-v4 .ps__t { font-size: 14px; line-height: 1.55; text-wrap: pretty; }
body.mt-v4 .ps__s { font-size: 14px; line-height: 1.6; color: var(--muted); }
body.mt-v4 .plang__cr { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }

body.mt-v4 .hg > .hg__rule { margin-top: 28px; padding: 20px var(--gut); background: var(--surface); }
body.mt-v4 .rllist { margin-top: 4px; }
body.mt-v4 .rllist li { border-bottom: 1px solid var(--rule-on-surface); }
body.mt-v4 .rllist li:last-child { border-bottom: 0; }
body.mt-v4 .rl { display: flex; flex-direction: column; padding: 10px 0; }
body.mt-v4 .rllist li:last-child .rl { padding-bottom: 0; }
body.mt-v4 .rl__d { font-size: 14px; line-height: 1.5; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
body.mt-v4 .rl__t { font-weight: 700; font-size: 15px; line-height: 1.6; text-wrap: pretty; }

body.mt-v4 .dest { padding: 28px var(--gut) 24px; }
body.mt-v4 .dcs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
body.mt-v4 .dc { display: inline-flex; align-items: baseline; gap: 6px; min-height: var(--tap); padding: 10px 10px; border: 1px solid var(--rule-on-surface); font-weight: 700; font-size: 14px; line-height: 1.3; }
body.mt-v4 .dc__n { font-weight: 500; font-size: 14px; color: var(--muted); }

@media (min-width: 900px) {
  body.mt-v4 .hg { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 29.86vw, 430px); grid-template-rows: auto 1fr auto; column-gap: 44px; padding: 48px var(--gut) 0; }
  body.mt-v4 .hg > section { padding: 0; }
  body.mt-v4 .hg__new { grid-column: 1; grid-row: 1 / 3; }
  body.mt-v4 .hg__rank { grid-column: 2; grid-row: 1; }
  body.mt-v4 .hg > .hg__rule { grid-column: 2; grid-row: 2; align-self: start; margin-top: 36px; padding: 0; background: none; }
  body.mt-v4 .hg > .hg__plan { grid-column: 1 / -1; grid-row: 3; margin-top: 48px; }
  body.mt-v4 .sh { gap: 20px; }
  body.mt-v4 .sh__h { font-size: 32px; }
  body.mt-v4 .sh__a { margin-block: -7px; font-size: 15px; text-underline-offset: 5px; }
  body.mt-v4 .hg__rank .sh__h, body.mt-v4 .hg__rule .sh__h, body.mt-v4 .hg__rule > .sh__h { font-size: 28px; }
  body.mt-v4 .sh--rank { gap: 12px; }
  body.mt-v4 .newg { gap: 28px 20px; margin-top: 16px; }
  body.mt-v4 .nc { gap: 8px; }
  body.mt-v4 .nc__ph { height: 232px; }
  body.mt-v4 .nc .wm { --wm-k: 1.39; --wm-b: -9px; }
  body.mt-v4 .nc__t { font-size: 17px; line-height: 1.6; }
  body.mt-v4 .nc__m { gap: 6px 10px; }
  body.mt-v4 .rklist { margin-top: 16px; }
  body.mt-v4 .rk { grid-template-columns: 40px 92px minmax(0, 1fr); gap: 16px; padding: 16px 0; }
  body.mt-v4 .rk__n { font-size: 44px; }
  body.mt-v4 .rk__img { width: 92px; height: 70px; }
  body.mt-v4 .rk__ti { font-size: 15px; line-height: 1.6; }
  body.mt-v4 .rk__t { gap: 0; }
  body.mt-v4 .rl__d { line-height: 1.6; }
  body.mt-v4 .rllist { margin-top: 16px; border-bottom: 1px solid var(--rule); }
  body.mt-v4 .rllist li { border-bottom: 0; border-top: 1px solid var(--rule); }
  body.mt-v4 .rl { padding: 14px 0; }
  body.mt-v4 .rllist li:last-child .rl { padding-bottom: 14px; }
  body.mt-v4 .plang { display: grid; grid-template-columns: minmax(0, 780fr) minmax(0, 472fr); gap: 28px; margin-top: 16px !important; }
  body.mt-v4 .pb__img { height: auto; aspect-ratio: 780 / 500; }
  body.mt-v4 .pb__cr, body.mt-v4 .ps__cr { margin-top: 6px; }
  body.mt-v4 .pb__d { margin-top: 14px; font-size: 22px; line-height: 1.3; }
  body.mt-v4 .pb__t { font-size: 32px; }
  body.mt-v4 .pb__s { font-size: 16px; line-height: 1.6; }
  body.mt-v4 .plang__s { display: flex; flex-direction: column; gap: 24px; margin-top: 0; }
  body.mt-v4 .ps { display: block; }
  body.mt-v4 .ps__img { height: 200px; }
  body.mt-v4 .ps__d { display: block; margin-top: 14px; font-size: 17px; line-height: 1.3; }
  body.mt-v4 .ps__t { display: block; font-size: 21px; line-height: 1.4; }
  body.mt-v4 .ps__s { display: block; margin-top: 2px; }
  body.mt-v4 .dest { margin-top: 48px; padding: 32px var(--gut) 36px; background: var(--surface); }
  body.mt-v4 .dest .sh { gap: 20px; }
  body.mt-v4 .dest .sh__a { margin-left: auto; color: var(--ink); }
  body.mt-v4 .dcs { gap: 10px; margin-top: 16px; }
  body.mt-v4 .dc { padding: 10px 14px; border-color: var(--line-chip); font-size: 15px; }
}
@media (max-width: 899px) {
  body.mt-v4 .dest { background: var(--white); }
}

/* ---- フッター ---- */
body.mt-v4 .ft { background: var(--ink); color: var(--white); padding: 14px var(--gut) 10px; text-align: center; }
body.mt-v4 .ft__ad { font-size: 16px; text-wrap: balance; line-height: 1.5; color: var(--footer-ad); }
body.mt-v4 .ft__logo { margin-top: 8px; font-size: 20px; line-height: 1; }
body.mt-v4 .ft__nav { margin-top: 2px; text-wrap: balance; font-size: 14px; font-weight: 500; }
body.mt-v4 .ft__nav a { display: inline-flex; align-items: center; min-height: var(--tap-main); margin: 0 6px; color: var(--white); }
@media (min-width: 900px) {
  body.mt-v4 .ft { padding: 12px var(--gut) 8px; text-align: left; }
  body.mt-v4 .ft__ad { font-size: 17px; text-wrap: wrap; }
  body.mt-v4 .ft__in { display: flex; flex-direction: column; align-items: flex-start; }
  body.mt-v4 .ft__row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0 24px; width: 100%; }
  body.mt-v4 .ft__logo { margin-top: 0; }
  body.mt-v4 .ft__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 20px; margin-top: 0; }
  body.mt-v4 .ft__nav a { min-height: var(--tap); margin: 0; }
}

@media (prefers-reduced-motion: reduce) { body.mt-v4, body.mt-v4 * { scroll-behavior: auto !important; } }

/* ---- パンくず(セール・一覧・記事で共通) ---- */
body.mt-v4 .crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding: 6px var(--gut) 0; font-size: 14px; color: var(--muted); }
body.mt-v4 .crumb a { display: inline-flex; align-items: center; min-height: var(--tap-main); margin: -11px -8px; padding: 0 8px; color: var(--muted); }
@media (min-width: 900px) { body.mt-v4 .crumb { gap: 0 10px; padding: 4px var(--gut) 0; } body.mt-v4 .crumb a { min-height: var(--tap); margin-block: -9px; } }

/* ---- いま買えるセール ---- */
body.mt-v4 .sp-head { padding: 10px var(--gut) 0; }
body.mt-v4 .sp-head__h { font-size: 32px; line-height: 1.3; }
body.mt-v4 .sp-head__p { margin-top: 4px; font-size: 16px; line-height: 1.75; }
body.mt-v4 .sp-head__n { margin-right: 2px; font-size: 24px; line-height: 1; color: var(--accent); }
body.mt-v4 .jcs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
body.mt-v4 .jc { display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 16px; background: var(--surface); font-weight: 700; font-size: 15px; }
body.mt-v4 .jc__n { font-weight: 500; font-size: 14px; color: var(--muted); }
body.mt-v4 .sg { padding: 28px var(--gut) 0; }
body.mt-v4 .sg--now { margin-top: 16px; padding: 12px 14px; background: var(--surface); }
body.mt-v4 .sg__h { display: flex; align-items: baseline; gap: 10px; }
body.mt-v4 .sg--now .sg__h { padding: 0 2px; }
body.mt-v4 .sg__t { font-size: 24px; line-height: 1.3; }
body.mt-v4 .sg__n { font-size: 14px; font-weight: 700; }
body.mt-v4 .sg__r { font-size: 14px; color: var(--muted); }
body.mt-v4 .sg__l { margin-top: 4px; border-bottom: 1px solid var(--rule); }
body.mt-v4 .sg__l > li { border-top: 1px solid var(--rule); }
body.mt-v4 .sg--now .sg__l { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; border: 0; }
body.mt-v4 .sg--now .sg__l > li { border: 0; }

body.mt-v4 .sr { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 0; }
body.mt-v4 .sr__ph { position: relative; display: block; width: 100px; height: 74px; overflow: hidden; }
body.mt-v4 .sr__img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.mt-v4 .sr .wm { --wm-k: 1.36; --wm-b: -18px; }
body.mt-v4 .sr__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.mt-v4 .sr__d { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; line-height: 1.5; }
body.mt-v4 .sr__date { font-weight: 700; font-size: 14px; font-variant-numeric: lining-nums tabular-nums; }
body.mt-v4 .sr__al { font-size: 14px; line-height: 1.5; color: var(--muted); }
body.mt-v4 .sr__nm { font-weight: 700; font-size: 15px; line-height: 1.5; }
body.mt-v4 .sr__nm--hl { line-height: 1.55; }
body.mt-v4 .sr__price { font-size: 20px; line-height: 1.3; }
body.mt-v4 .sr__tax { font-family: var(--font-body); font-weight: 500; font-size: 14px; }
body.mt-v4 .sr:not(.sr--big) .sr__pdl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 899px) { body.mt-v4 .sr__pd .nw { white-space: normal; } }
@media (min-width: 900px) { body.mt-v4 .sr:not(.sr--big) .sr__pdl { position: static; width: auto; height: auto; overflow: visible; clip-path: none; } }
body.mt-v4 .sr__pd { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 6px; font-size: 14px; line-height: 1.5; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
body.mt-v4 .sr--big { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; background: var(--white); }
body.mt-v4 .sr--big .sr__ph { width: 100%; height: 180px; }
body.mt-v4 .sr--big .sr__tx { gap: 4px; padding: 12px 16px 14px; }
body.mt-v4 .sr--big .dleft { font-size: 15px; }
body.mt-v4 .sr--big .sr__date { font-size: 16px; }
body.mt-v4 .sr--big .sr__nm { font-size: 17px; }
body.mt-v4 .sr--big .sr__price { font-size: 26px; }
body.mt-v4 .sr__cr2 { font-size: 14px; line-height: 1.5; color: var(--muted); }

body.mt-v4 .rkband { margin-top: 48px; padding: 32px var(--gut) 36px; background: var(--surface); }
body.mt-v4 .rkband .sh__h { font-size: 30px; }
body.mt-v4 .rkband__l { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: 16px; }
body.mt-v4 .rkband__l > li { display: flex; border-top: 1px solid var(--rule-on-surface); }
body.mt-v4 .rkband .rk { flex: 1; grid-template-columns: 34px 80px minmax(0, 1fr); gap: 14px; padding: 14px 0; }
body.mt-v4 .rkband .rk__n { font-size: 36px; }
body.mt-v4 .rkband .rk__img { width: 80px; height: 60px; }
body.mt-v4 .rkband .rk__ti { font-size: 15px; line-height: 1.6; }
body.mt-v4 .sales-end { height: 28px; }

@media (min-width: 900px) {
  body.mt-v4 .sp-head { padding: 18px var(--gut) 0; }
  body.mt-v4 .sp-head__h { font-size: 48px; }
  body.mt-v4 .sp-head__p { margin-top: 8px; font-size: 17px; line-height: 1.5; }
  body.mt-v4 .sp-head__n { margin-right: 3px; font-size: 30px; }
  body.mt-v4 .sgs { padding: 0 var(--gut); }
  body.mt-v4 .sg { margin-top: 40px; padding: 0; }
  body.mt-v4 .sg--now { margin-top: 24px; padding: 16px 20px; }
  body.mt-v4 .sg--now .sg__h { padding: 0; }
  body.mt-v4 .sg__h { gap: 16px; }
  body.mt-v4 .sg__t { font-size: 30px; }
  body.mt-v4 .sg--now .sg__t { font-size: 32px; }
  body.mt-v4 .sg__n { font-size: 16px; }
  body.mt-v4 .sg__l { margin-top: 6px; }
  body.mt-v4 .sg--now .sg__l { gap: 10px; margin-top: 12px; }
  body.mt-v4 .sr { grid-template-columns: 192px minmax(0, 1fr) 300px; gap: 20px; align-items: center; padding: 16px 0; }
  body.mt-v4 .sr__ph { width: 100%; height: 120px; }
  body.mt-v4 .sr .wm { --wm-k: 1.34; --wm-b: -6px; }
  body.mt-v4 .sr__tx { gap: 5px; }
  body.mt-v4 .sr__d { flex-wrap: nowrap; gap: 10px; }
  body.mt-v4 .sr__date { font-size: 15px; }
  body.mt-v4 .sr__nm { font-size: 18px; }
  body.mt-v4 .sr__nm--hl { grid-column: 2 / -1; }
  body.mt-v4 .sr--hl .sr__tx { grid-column: 2 / -1; }
  body.mt-v4 .sr__price { font-size: 28px; text-align: right; }
  body.mt-v4 .sr__pd { flex-wrap: nowrap; }
  body.mt-v4 .sr--big { display: grid; grid-template-columns: 280px minmax(0, 1fr) 260px; padding: 12px 20px 12px 12px; }
  body.mt-v4 .sr--big .sr__ph { height: 158px; }
  body.mt-v4 .sr--big .sr__tx { gap: 6px; padding: 0; }
  body.mt-v4 .sr--big .dleft { font-size: 15px; }
  body.mt-v4 .sr--big .sr__date { font-size: 17px; }
  body.mt-v4 .sr--big .sr__nm { font-size: 20px; line-height: 1.45; }
  body.mt-v4 .sr--big .sr__price { font-size: 32px; line-height: 1.25; }
  body.mt-v4 .sr__cr { position: absolute; right: 0; bottom: 0; max-width: 100%; padding: 2px 6px; background: var(--scrim); color: var(--white); font-size: 14px; line-height: 1.4; text-align: right; }
}

/* ---- 観光・旅行記の一覧 ---- */
body.mt-v4 .cat { padding: 6px var(--gut) 28px; }
body.mt-v4 .cat__h { display: flex; align-items: baseline; gap: 10px; }
body.mt-v4 .cat__t { font-size: 32px; line-height: 1.3; }
body.mt-v4 .cat__n { font-size: 15px; font-weight: 700; }
body.mt-v4 .ch { display: block; margin-top: 12px; }
body.mt-v4 .ch__img { display: block; width: 100%; height: calc((100vw - 2 * var(--gut)) * 0.754); max-height: 420px; object-fit: cover; }
body.mt-v4 .ch__card { position: relative; display: block; margin: -40px 12px 0; padding: 14px 16px 16px; background: var(--white); box-shadow: var(--shadow-card); }
body.mt-v4 .ch__meta { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
body.mt-v4 .ch__h { display: block; margin-top: 10px; font-size: 21px; line-height: 1.35; }
body.mt-v4 .ch__sub { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--muted); }
body.mt-v4 .ch__cr { display: block; margin: 6px 6px 0 0; font-size: 14px; color: var(--muted); text-align: right; }
body.mt-v4 .cg { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; margin-top: 20px; }
body.mt-v4 .cc { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.mt-v4 .cc__ph { display: block; height: 116px; overflow: hidden; }
body.mt-v4 .cc__img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.mt-v4 .cc .wm { --wm-k: 1.34; --wm-b: -5px; }
body.mt-v4 .cc__tx { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.mt-v4 .cc__t { font-weight: 700; font-size: 14px; line-height: 1.55; }
body.mt-v4 .cc__m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; line-height: 1.4; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
body.mt-v4 .cc__cr { font-size: 14px; }
body.mt-v4 .cc:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; align-items: center; padding-top: 4px; }
body.mt-v4 .cc:last-child:nth-child(odd) .cc__ph { height: 104px; }
body.mt-v4 .cc:last-child:nth-child(odd) .cc__tx { gap: 8px; }
body.mt-v4 .cc:last-child:nth-child(odd) .cc__t { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 16px; line-height: 1.45; }
body.mt-v4 .pager { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; }
body.mt-v4 .pager__r { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
body.mt-v4 .pg { display: flex; align-items: center; justify-content: center; width: var(--tap-main); height: var(--tap-main); border: 1px solid var(--line); font-weight: 700; font-size: 16px; font-variant-numeric: lining-nums tabular-nums; }
body.mt-v4 .pg.is-on { border-color: var(--accent); background: var(--accent); color: var(--white); }
body.mt-v4 .pg--next { width: auto; gap: 4px; padding: 0 14px; border: 0; background: var(--surface); font-size: 15px; }
body.mt-v4 .pager__c { font-size: 14px; color: var(--muted); }
body.mt-v4 .cband { display: none; }
@media (min-width: 900px) {
  body.mt-v4 .cat { padding: 16px var(--gut) 0; }
  body.mt-v4 .cat__h { gap: 16px; }
  body.mt-v4 .cat__t { font-size: 52px; }
  body.mt-v4 .cat__n { font-size: 18px; }
  body.mt-v4 .ch__img { height: calc((100vw - 2 * var(--gut)) * 0.384); max-height: 492px; }
  body.mt-v4 .ch__card { width: min(660px, calc(100% - 72px)); margin: -132px 0 0 36px; padding: 16px 24px 20px; box-shadow: var(--shadow-card); }
  body.mt-v4 .ch__meta { font-size: 14px; }
  body.mt-v4 .ch__h { margin-top: 10px; font-size: 38px; }
  body.mt-v4 .ch__sub { font-size: 16px; color: var(--ink); }
  body.mt-v4 .ch__ex { display: block; margin-top: 10px; font-size: 15px; line-height: 1.8; color: var(--muted); }
  body.mt-v4 .cg { gap: 28px 20px; margin-top: 28px; }
  body.mt-v4 .cc { gap: 8px; }
  body.mt-v4 .cc__ph { height: 320px; }
  body.mt-v4 .cc .wm { --wm-k: 1.34; --wm-b: -10px; }
  body.mt-v4 .cc__tx { gap: 8px; }
  body.mt-v4 .cc__t { margin-top: 6px; font-family: var(--font-head); font-weight: var(--head-weight); font-size: 22px; line-height: 1.5; }
  body.mt-v4 .cc__m { gap: 6px 10px; }
  body.mt-v4 .cc:last-child:nth-child(odd) { grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 8px; }
  body.mt-v4 .cc:last-child:nth-child(odd) .cc__ph { height: 320px; }
  body.mt-v4 .cc:last-child:nth-child(odd) .cc__t { margin-top: 0; font-size: 30px; line-height: 1.45; }
  body.mt-v4 .pager { align-items: flex-start; margin-top: 36px; }
  body.mt-v4 .pager__r { justify-content: flex-start; }
  body.mt-v4 .pg { width: 48px; height: 48px; }
  body.mt-v4 .pg--next { width: auto; }
  body.mt-v4 .cband { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 38.9vw, 560px); gap: 56px; margin-top: 48px; padding: 32px var(--gut) 36px; background: var(--surface); }
  body.mt-v4 .cband .sh { justify-content: space-between; }
  body.mt-v4 .cband .sh__h { font-size: 28px; }
  body.mt-v4 .cband .sh__a { margin-block: 0; color: var(--ink); }
  body.mt-v4 .cband .sh--rank { justify-content: flex-start; gap: 10px; }
  body.mt-v4 .cband .dc { padding: 10px 14px; border-color: var(--line-chip); font-size: 15px; }
  body.mt-v4 .cband .dcs { margin-top: 16px; }
}
body.mt-v4 .rtl { margin-top: 16px; border-bottom: 1px solid var(--rule-on-surface); }
body.mt-v4 .rtl > li { border-top: 1px solid var(--rule-on-surface); }
body.mt-v4 .rt { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 12px 0; }
body.mt-v4 .rt__n { font-size: 26px; line-height: 1; color: var(--accent); }
body.mt-v4 .rt__t { font-weight: 700; font-size: 14px; line-height: 1.6; text-wrap: pretty; }

/* ---- 記事(article-*.html) ---- */
/* body の class(pg-post・is-en)は body.mt-v4 に続けて書く。試作では body に付く class なので、子孫の形(body.mt-v4 .pg-post)だと当たらない(10/13 固定ページの中身が x=0 に張り付いていた) */
body.mt-v4.pg-post { --pad: max(var(--gut), calc((100% - var(--post-w)) / 2)); }
body.mt-v4 .crumb--art { padding-inline: var(--pad); }
body.mt-v4 .ah { padding: 8px var(--pad) 0; }
body.mt-v4 .ah__box { position: relative; display: block; overflow: hidden; aspect-ratio: 358 / 190; }
body.mt-v4 .ah__img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.mt-v4 .ah__box--wm .ah__img { position: absolute; left: 50%; bottom: -4.7%; width: 117.3%; height: auto; max-width: none; transform: translateX(-50%); }
body.mt-v4 .ah__cr { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--muted); text-align: right; }
body.mt-v4 .post { display: flex; flex-direction: column; }
body.mt-v4 .post__a { min-width: 0; padding: 0 var(--gut); }
body.mt-v4 .post__s, body.mt-v4 .as-stick { display: contents; }
body.mt-v4 .am { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 16px; font-size: 14px; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
body.mt-v4 .am__cat { display: inline-flex; align-items: center; min-height: var(--tap); margin: -8px 0 -7px; }
body.mt-v4 .am__cat .tag { padding: 0 9px; font-weight: 700; }
body.mt-v4 .at { margin-top: 12px; font-size: 25px; line-height: 1.35; letter-spacing: 0.01em; }
body.mt-v4 .hb { margin-left: -0.5em; }
body.mt-v4 .ab { margin-top: 10px; font-size: 14px; }
body.mt-v4 .ab span { color: var(--muted); }
body.mt-v4 .ab a { display: inline-flex; align-items: center; min-height: var(--tap); margin: -8px 0 -8px 8px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
body.mt-v4 .fx { margin-top: 16px; padding: 16px 16px 14px; background: var(--surface); }
body.mt-v4 .fx__t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
body.mt-v4 .fx__l { flex: 0 0 100%; font-size: 14px; font-weight: 700; }
body.mt-v4 .fx__d { font-size: 28px; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; }
body.mt-v4 .fx__go { padding: 2px 12px; background: var(--coral); color: var(--ink); font-weight: 700; font-size: 16px; }
body.mt-v4 .fx__dl { margin-bottom: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; margin-top: 12px; font-size: 14px; line-height: 1.65; }
body.mt-v4 .fx__dl dt { padding: 10px 0; border-top: 1px solid var(--rule-on-surface); color: var(--muted); }
body.mt-v4 .fx__dl dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--rule-on-surface); font-weight: 500; }
body.mt-v4 .fx__dl dt:last-of-type, body.mt-v4 .fx__dl dd:last-of-type { padding-bottom: 0; }
body.mt-v4 .fx__amt { font-size: 24px; line-height: 1.3; }
body.mt-v4 .fx__s { display: block; font-size: 14px; font-weight: 400; color: var(--muted); }
body.mt-v4 .ap { margin-top: 16px; font-size: 16px; line-height: 1.8; word-break: normal; }
body.mt-v4 .ap--lead { margin-top: 16px; }
body.mt-v4 .ap--cmp { margin-top: 20px; }
body.mt-v4 .ap a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
body.mt-v4 .toc { margin-top: 16px; border: 1px solid var(--line); }
body.mt-v4 .toc__s { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap-main); padding: 0 16px; list-style: none; cursor: pointer; font-weight: 700; font-size: 15px; }
body.mt-v4 .toc__s::-webkit-details-marker { display: none; }
body.mt-v4 .toc__r { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; color: var(--muted); }
body.mt-v4 .toc[open] .toc__ic { transform: rotate(180deg); }
body.mt-v4 .toc__l { padding: 0 16px 12px 30px; font-size: 15px; line-height: 1.8; list-style: decimal; }
body.mt-v4 .toc__l a { display: block; padding: 7px 0; }
body.mt-v4 .ah2 { margin-top: 32px; font-size: 22px; line-height: 1.4; scroll-margin-top: 16px; }
body.mt-v4 .fare { margin-top: 12px; }
body.mt-v4 .fare table { display: block; width: 100%; }
body.mt-v4 .fare caption { display: block; margin: 0 0 6px; font-size: 14px; color: var(--muted); text-align: left; }
body.mt-v4 .fare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body.mt-v4 .fare tbody { display: block; border-bottom: 1px solid var(--rule); }
body.mt-v4 .fare tr { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
body.mt-v4 .fare tbody th { flex: 0 0 100%; font-size: 14px; font-weight: 700; line-height: 1.55; text-align: left; }
body.mt-v4 .fare__p { font-size: 22px; line-height: 1.25; }
body.mt-v4 .fare__d { font-size: 14px; color: var(--muted); }
body.mt-v4 .abxs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
body.mt-v4 .abx { padding: 14px 16px; }
body.mt-v4 .abx--fit { background: var(--surface); }
body.mt-v4 .abx--bk { border: 1px solid var(--line); }
body.mt-v4 .abx__t { font-size: 18px; line-height: 1.4; }
body.mt-v4 .abx__p { margin-top: 6px; font-size: 16px; line-height: 1.75; word-break: normal; }
body.mt-v4 .acta { margin-top: 20px; padding: 16px 16px 14px; border: 2px solid var(--ink); }
body.mt-v4 .acta__t { font-size: 19px; line-height: 1.45; }
body.mt-v4 .acta__n { margin-top: 8px; font-size: 16px; line-height: 1.75; color: var(--muted); }
body.mt-v4 .acta__go { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 360px; height: 48px; margin-top: 14px; background: var(--accent); color: var(--white); font-weight: 700; font-size: 17px; }
body.mt-v4 .acta__f { margin-top: 8px; font-size: 16px; line-height: 1.75; color: var(--muted); }
body.mt-v4 .asrc { margin-top: 20px; font-size: 14px; line-height: 1.7; color: var(--muted); }

/* 右の列と下の部分(900 未満は記事の下に積み、タグ → 締切が近いほかのセール → コメントの順) */
body.mt-v4 .as-h { font-size: 22px; line-height: 1.3; }
body.mt-v4 .as-hd { display: flex; align-items: baseline; gap: 10px; }
body.mt-v4 .as-n { font-size: 14px; color: var(--muted); }
body.mt-v4 .as-sale, body.mt-v4 .as-rank { display: none; }
body.mt-v4 .as-tags { order: 3; margin-top: 28px; padding: 0 var(--gut); }
body.mt-v4 .as-cmt { order: 5; margin: 28px 0; padding: 0 var(--gut); }
body.mt-v4 .as-none { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--muted); }
body.mt-v4 .tgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
body.mt-v4 .tg { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px; border: 1px solid var(--rule-on-surface); font-size: 14px; line-height: 1.3; }
body.mt-v4 .tg__n { font-size: 14px; color: var(--muted); }
body.mt-v4 .arel { order: 4; margin-top: 28px; padding: 20px var(--gut); background: var(--surface); }
body.mt-v4 .arel__h { font-size: 22px; line-height: 1.3; }
body.mt-v4 .rr-l { margin-top: 12px; }
body.mt-v4 .rr-l > li { border-top: 1px solid var(--rule); }
body.mt-v4 .rr { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; }
body.mt-v4 .rr__img { display: block; width: 96px; height: 72px; object-fit: cover; }
body.mt-v4 .rr__b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.mt-v4 .rr__d { display: flex; align-items: center; gap: 8px; }
body.mt-v4 .rr__date, body.mt-v4 .ss__date { font-weight: 700; font-size: 14px; font-variant-numeric: lining-nums tabular-nums; }
body.mt-v4 .rr__t { font-weight: 700; font-size: 14px; line-height: 1.55; }
body.mt-v4 .as-btn { display: flex; align-items: center; justify-content: center; height: 46px; margin-top: 6px; background: var(--white); font-weight: 700; font-size: 14px; }
body.mt-v4 .as-btn--w { height: 48px; margin-top: 8px; font-size: 15px; }
body.mt-v4 .as-sub { margin-top: 2px; font-size: 14px; color: var(--muted); }
body.mt-v4 .ss-l { margin-top: 12px; }
body.mt-v4 .ss-l > li { border-top: 1px solid var(--rule-on-surface); }
body.mt-v4 .ss { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; }
body.mt-v4 .ss__d { display: flex; align-items: center; gap: 8px; }
body.mt-v4 .ss__t { font-weight: 700; font-size: 15px; line-height: 1.55; }
body.mt-v4 .ar-l { margin-top: 16px; border-bottom: 1px solid var(--rule); }
body.mt-v4 .ar-l > li { border-top: 1px solid var(--rule); }
body.mt-v4 .ar { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 12px 0; }
body.mt-v4 .ar__n { font-size: 24px; line-height: 1; color: var(--accent); }
body.mt-v4 .ar__t { font-weight: 700; font-size: 14px; line-height: 1.6; text-wrap: pretty; }
@media (min-width: 900px) and (max-width: 1099px) {
  body.mt-v4 .as-sale { display: block; order: 1; margin: 28px var(--gut) 0; padding: 16px 20px; background: var(--surface); }
  body.mt-v4 .as-rank { display: block; order: 2; margin-top: 28px; padding: 0 var(--gut); }
  body.mt-v4 .arel { order: 5; }
  body.mt-v4 .as-cmt { order: 4; }
}
@media (min-width: 900px) {
  body.mt-v4 .ah { padding-top: 12px; }
  body.mt-v4 .ah__box { aspect-ratio: 1100 / 376; }
  body.mt-v4 .ah__box--wm .ah__img { bottom: -24.2%; width: 107.3%; }
  body.mt-v4 .ah__cr { margin-top: 6px; }
  body.mt-v4 .at { font-size: 40px; }
  body.mt-v4 .fx { margin-top: 20px; padding: 16px 24px; }
  body.mt-v4 .fx__l { flex: 0 0 auto; }
  body.mt-v4 .fx__d { font-size: 34px; }
  body.mt-v4 .fx__go { font-size: 18px; }
  body.mt-v4 .fx__dl { grid-template-columns: 110px minmax(0, 1fr); column-gap: 20px; margin-top: 18px; font-size: 15px; }
  body.mt-v4 .fx__dl dt { padding: 12px 0; }
  body.mt-v4 .fx__amt { font-size: 28px; }
  body.mt-v4 .ap { font-size: 17px; line-height: 1.85; }
  body.mt-v4 .ap--lead { margin-top: 20px; }
  body.mt-v4 .toc__s { min-height: 52px; padding: 0 18px; }
  body.mt-v4 .toc__l { padding: 0 18px 16px 32px; }
  body.mt-v4 .ah2 { margin-top: 44px; font-size: 28px; }
  body.mt-v4 .fare { margin-top: 16px; overflow-x: auto; border: 1px solid var(--rule); }
  body.mt-v4 .fare table { display: table; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
  body.mt-v4 .fare caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body.mt-v4 .fare thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: table-header-group; }
  body.mt-v4 .fare thead tr { background: var(--surface); }
  body.mt-v4 .fare thead th { padding: 12px 16px; font-size: 14px; font-weight: 700; text-align: left; }
  body.mt-v4 .fare tbody { display: table-row-group; border-bottom: 0; }
  body.mt-v4 .fare tr { display: table-row; padding: 0; border-top: 0; }
  body.mt-v4 .fare tbody th, body.mt-v4 .fare tbody td { display: table-cell; padding: 14px 16px; border-top: 1px solid var(--rule); font-size: 15px; font-weight: 700; text-align: left; }
  body.mt-v4 .fare tbody td.fare__p { font-size: 20px; line-height: 1.6; white-space: nowrap; }
  body.mt-v4 .fare tbody td.fare__d { font-weight: 400; color: var(--ink); font-size: 14px; white-space: nowrap; }
  body.mt-v4 .abxs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; }
  body.mt-v4 .abx { padding: 16px 20px; }
  body.mt-v4 .abx__t { font-size: 20px; }
  body.mt-v4 .abx__p { margin-top: 8px; font-size: 15px; }
  body.mt-v4 .acta { padding: 16px 24px; }
  body.mt-v4 .acta__t { font-size: 22px; }
  body.mt-v4 .acta__go { height: 56px; margin-top: 18px; }
  body.mt-v4 .acta__n, body.mt-v4 .acta__f { font-size: 14px; line-height: 1.6; }
  body.mt-v4 .acta__f { margin-top: 10px; }
  body.mt-v4 .as-h { font-size: 20px; line-height: 1.4; }
  body.mt-v4 .as-tags .as-h, body.mt-v4 .as-cmt .as-h { font-size: 22px; }
}
@media (min-width: 1100px) {
  body.mt-v4 .post { display: grid; grid-template-columns: var(--pad) minmax(0, 720fr) 56px minmax(0, 324fr) var(--pad); }
  body.mt-v4 .post__a { grid-column: 2; padding: 0 0 48px; }
  body.mt-v4 .post__s { display: block; grid-column: 4; padding-top: 20px; }
  body.mt-v4 .as-sale { display: block; padding: 16px 20px; background: var(--surface); }
  body.mt-v4 .as-stick { display: block; position: sticky; top: 24px; margin-top: 32px; }
  body.mt-v4 .as-rank { display: block; }
  body.mt-v4 .as-tags, body.mt-v4 .as-cmt { margin: 32px 0 0; padding: 0; }
  body.mt-v4 .as-tags .as-h, body.mt-v4 .as-cmt .as-h { font-size: 20px; line-height: 1.4; }
  body.mt-v4 .tgs { margin-top: 16px; }
  body.mt-v4 .tg { font-weight: 700; }
  body.mt-v4 .as-none { margin-top: 16px; }
  body.mt-v4 .arel { grid-column: 1 / -1; margin-top: 0; padding: 32px var(--pad) 36px; }
  body.mt-v4 .arel__h { font-size: 28px; }
  body.mt-v4 .arel__pc { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: 16px; }
  body.mt-v4 .arel__pc .rr-l { margin-top: 0; }
  body.mt-v4 .arel__pc .rr { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 14px 0; }
  body.mt-v4 .arel__pc .rr__img { width: 120px; height: 80px; }
  body.mt-v4 .arel__pc .rr__t { font-size: 16px; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  body.mt-v4 .arel__pc { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: 16px; }
  body.mt-v4 .arel__pc .rr-l { margin-top: 0; }
  body.mt-v4 .arel { padding-inline: var(--gut); }
}

/* ---- 長い記事の本文(article-649.html: 本番の .entry-content をそのまま入れ、中の部品の見た目だけここで付ける) ---- */
body.mt-v4 .mt-body { font-size: 16px; line-height: 1.8; }
body.mt-v4 .mt-body > * + * { margin-top: 16px; }
body.mt-v4 .mt-body p { word-break: normal; font-size: 16px; line-height: 1.8; }
body.mt-v4 .mt-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
body.mt-v4 .mt-body h2 { margin-top: 44px; font-size: 22px; line-height: 1.4; scroll-margin-top: 16px; }
body.mt-v4 .mt-body h3 { margin-top: 32px; font-size: 19px; line-height: 1.45; scroll-margin-top: 16px; }
body.mt-v4 .mt-body ul, body.mt-v4 .mt-body ol { padding-left: 1.5em; list-style: revert; }
body.mt-v4 .mt-body figure { margin: 0; }
body.mt-v4 .mt-body img { height: auto; }
body.mt-v4 .mt-v3-h2__day { display: block; font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); }
body.mt-v4 .mt-v3-answer { padding: 16px; background: var(--surface); }
body.mt-v4 .mt-v3-answer__main { display: flex; flex-direction: column; }
body.mt-v4 .mt-v3-answer__label { font-weight: 700; font-size: 14px; }
body.mt-v4 .mt-v3-answer__big { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 34px; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; }
body.mt-v4 .mt-v3-answer__unit { margin-left: 0.25em; font-size: 20px; }
body.mt-v4 .mt-v3-answer__sub { font-size: 14px; color: var(--muted); }
body.mt-v4 .mt-body .mt-v3-answer__lead { margin-top: 12px; }
body.mt-v4 .mt-v3-intent { color: var(--muted); }
body.mt-v4 .mt-v3-table { overflow-x: auto; border: 1px solid var(--rule); }
body.mt-v4 .mt-v3-table__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(9em, 1fr); }
body.mt-v4 .mt-v3-table__row + .mt-v3-table__row { border-top: 1px solid var(--rule); }
body.mt-v4 .mt-v3-table__row--head { background: var(--surface); font-weight: 700; font-size: 14px; }
body.mt-v4 .mt-v3-table__cell { padding: 12px 16px; font-size: 15px; line-height: 1.6; overflow-wrap: break-word; }
body.mt-v4 .mt-v3-table--rail { overflow-x: auto; }
body.mt-v4 .mt-v3-table--rail .mt-v3-table__row { grid-auto-columns: minmax(10em, 1fr); min-width: 640px; }
body.mt-v4 .mt-v3-table--cost .mt-v3-table__row { grid-template-columns: 1.1fr 1.3fr 1.1fr 2fr; grid-auto-flow: row; min-width: 640px; }
body.mt-v4 .mt-v3-table__day { font-weight: 700; color: var(--accent); }
body.mt-v4 .mt-v3-table__total { font-weight: 700; }
body.mt-v4 .mt-v3-table__asof { font-size: 14px; color: var(--muted); }
body.mt-v4 .mt-v3-num { font: inherit; font-variant-numeric: lining-nums tabular-nums; }
body.mt-v4 .mt-v3-figure img { display: block; width: 100%; }
body.mt-v4 .mt-v3-figure__cap { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--muted); }
body.mt-v4 .mt-v3-spot { padding-top: 16px; border-top: 2px solid var(--ink); }
body.mt-v4 .mt-v3-spot__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; }
body.mt-v4 .mt-v3-spot__name { font-weight: 700; font-size: 19px; line-height: 1.45; }
body.mt-v4 .mt-v3-spot__dur { color: var(--muted); font-size: 14px; }
body.mt-v4 .mt-v3-spot__lead, body.mt-v4 .mt-v3-spot__tip, body.mt-v4 .mt-v3-spot__info { margin-top: 12px; }
body.mt-v4 .mt-v3-spot__info { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); column-gap: 16px; font-size: 15px; line-height: 1.7; }
body.mt-v4 .mt-v3-spot__info dt, body.mt-v4 .mt-v3-spot__info dd { margin: 0; padding: 8px 0; border-top: 1px solid var(--rule); }
body.mt-v4 .mt-v3-spot__info dt { font-weight: 700; }
body.mt-v4 .mt-v3-spot__info dd > a:only-child { display: inline-block; min-height: var(--tap); padding-block: 8px; }
body.mt-v4 .mt-v3-stay__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; border-top: 1px solid var(--rule); }
body.mt-v4 .mt-v3-stay__name { font-weight: 700; }
body.mt-v4 .mt-v3-stay__budget { color: var(--muted); font-size: 14px; }
body.mt-v4 .mt-v3-cta { padding: 16px; background: var(--surface); }
body.mt-v4 .mt-v3-cta__text { display: flex; flex-direction: column; gap: 2px; }
body.mt-v4 .mt-v3-cta__kicker-row { display: flex; gap: 8px; font-size: 14px; color: var(--muted); }
body.mt-v4 .mt-v3-cta__title { font-weight: 700; font-size: 19px; }
body.mt-v4 .mt-v3-cta__note { font-size: 15px; line-height: 1.7; }
body.mt-v4 .mt-v3-cta__asof { display: block; font-size: 14px; color: var(--muted); }
body.mt-v4 .mt-v3-cta__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
body.mt-v4 .mt-body .mt-v3-cta__btn { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap-main); padding: 0 18px; border: 1px solid var(--ink); background: var(--white); color: var(--ink); font-weight: 700; text-decoration: none; }
body.mt-v4 .mt-body .mt-v3-cta__btn--primary { border-color: var(--accent); background: var(--accent); color: var(--white); }
body.mt-v4 .mt-v3-cta__imp { position: absolute; width: 1px; height: 1px; }
body.mt-v4 .mt-v3-cta__foot { margin-top: 10px; font-size: 14px; color: var(--muted); }
body.mt-v4 .mt-v3-pitfalls { padding-left: 16px; border-left: 3px solid var(--accent); }
body.mt-v4 .mt-v3-pitfalls h3:first-child { margin-top: 0; }
body.mt-v4 .mt-v3-sources { font-size: 14px; line-height: 1.7; color: var(--muted); }
body.mt-v4 .mt-body .toc_block { display: none; }
body.mt-v4 .toc + .mt-body { margin-top: 16px; }
@media (min-width: 900px) {
  body.mt-v4 .mt-body { font-size: 17px; line-height: 1.85; }
  body.mt-v4 .mt-body p { font-size: 17px; line-height: 1.85; }
  body.mt-v4 .mt-body h2 { margin-top: 56px; font-size: 28px; }
  body.mt-v4 .mt-body h3 { font-size: 21px; }
  body.mt-v4 .mt-v3-answer { padding: 20px 24px; }
  body.mt-v4 .mt-v3-answer__big { font-size: 44px; }
  body.mt-v4 .mt-v3-spot__name { font-size: 21px; }
  body.mt-v4 .mt-v3-spot__info { font-size: 16px; }
  body.mt-v4 .mt-v3-stay__row { grid-template-columns: 9em minmax(0, 1fr) max-content; column-gap: 16px; }
  body.mt-v4 .mt-v3-cta { padding: 20px 24px; }
  body.mt-v4 .mt-v3-cta__title { font-size: 21px; }
}

/* ---- 比べるページ(compare.html) ---- */
body.mt-v4 .cmp { padding: 20px var(--gut) 48px; }
body.mt-v4 .cmp__t { font-size: 28px; line-height: 1.3; }
body.mt-v4 .cmp__p { margin-top: 8px; font-size: 16px; line-height: 1.8; }
body.mt-v4 .cmp__s { margin-top: 32px; }
body.mt-v4 .cmp__h a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 20px; line-height: 1.4; text-decoration: underline; text-underline-offset: 4px; }
body.mt-v4 .cmp__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 32px; margin-top: 8px; }
body.mt-v4 .cf { --ih: 3200; margin: 0; }
body.mt-v4 .cf__c { font-size: 14px; color: var(--muted); }
body.mt-v4 .cf__box { position: relative; width: calc(var(--w) * var(--k) * 1px); height: calc(var(--ih) * var(--k) * 1px); overflow: hidden; border: 1px solid var(--line); }
body.mt-v4 .cf__f { position: absolute; left: 0; top: 0; display: block; width: calc(var(--w) * 1px); height: calc(var(--ih) * 1px); border: 0; background: var(--white); transform: scale(var(--k)); transform-origin: 0 0; }

/* ---- 角丸の台帳(板の4段+小+円)。役割ごとの値をここ1か所に集める。値は tokens.css の --r-* ---- */
body.mt-v4 .skip, body.mt-v4 .rk__img, body.mt-v4 .fx__go { border-radius: 8px; }
body.mt-v4 .hdr__btn,
body.mt-v4 .chip__ic,
body.mt-v4 .search__go,
body.mt-v4 .menu__ic,
body.mt-v4 .rbtn { border-radius: 50%; }
body.mt-v4 .search__box input,
body.mt-v4 .hs__img,
body.mt-v4 .pb__img,
body.mt-v4 .ch__img,
body.mt-v4 .ah__box,
body.mt-v4 .fx,
body.mt-v4 .acta,
body.mt-v4 .mt-v3-answer,
body.mt-v4 .mt-v3-cta { border-radius: var(--r-lg); }
body.mt-v4 .tag, body.mt-v4 .dleft { border-radius: var(--r-tag); }
body.mt-v4 .hs__card,
body.mt-v4 .nc__ph,
body.mt-v4 .ps__img,
body.mt-v4 .cc__ph,
body.mt-v4 .pg,
body.mt-v4 .toc,
body.mt-v4 .acta__go,
body.mt-v4 .as-btn,
body.mt-v4 .mt-body .mt-v3-cta__btn { border-radius: var(--r-sm); }
body.mt-v4 .sc,
body.mt-v4 .sr--big,
body.mt-v4 .ch__card,
body.mt-v4 .cc:last-child:nth-child(odd) .cc__ph,
body.mt-v4 .abx,
body.mt-v4 .mt-v3-table { border-radius: var(--r-md); }
body.mt-v4 .dc,
body.mt-v4 .jc,
body.mt-v4 .sr__ph,
body.mt-v4 .rkband .rk__img,
body.mt-v4 .tg,
body.mt-v4 .rr__img { border-radius: var(--r-xs); }
body.mt-v4 .sr--big .sr__ph { border-radius: 0; }
@media (min-width: 900px) {
  body.mt-v4 .hs__card,
body.mt-v4 .ps__img,
body.mt-v4 .cc__ph,
body.mt-v4 .fare { border-radius: var(--r-md); }
  body.mt-v4 .sale, body.mt-v4 .sg--now, body.mt-v4 .sr--big { border-radius: var(--r-lg); }
  body.mt-v4 .rk__img, body.mt-v4 .sr--big .sr__ph { border-radius: var(--r-xs); }
  body.mt-v4 .sr__ph { border-radius: var(--r-sm); }
  body.mt-v4 .sr__cr { border-radius: 6px 0 10px 0; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  body.mt-v4 .as-sale { border-radius: var(--r-lg); }
}
@media (min-width: 1100px) {
  body.mt-v4 .as-sale { border-radius: var(--r-lg); }
}


/* ---------------- data/s3/s3.css ---------------- */
/* みるとべ S3(R2 を全部の面へ)。R2/style.css の後に読む。値は R2/tokens.css の変数と、R2/style.css が使っている数字だけ(新しい変数は足していない)。
   ここにあるのは「R2 の試作に無かった部品」と「本番の本文(.entry-content)の中の部品」の見た目だけ。R2 の規則は上書きしない
   (例外は SP のフッターの運営者情報など4つの高さ: SPEC-R2-S3 の指示で 44px の2段 → 40px の1行)。 */

/* 見えない字(セールの札の本番の題名・「｜」で割った題名の「｜」)。画面には出さず、字の列だけを本番の題名と同じにする */
body.mt-v4 .sc__b,
body.mt-v4 .sr__tx,
body.mt-v4 .pb,
body.mt-v4 .ps,
body.mt-v4 .hs { position: relative; }
body.mt-v4 .vh { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- フッター: SP の運営者情報など4つは行の送りを 40px の1行にする(R2 は 44px の2段)。押せる面は 44px のまま(design_check は nav の a を主な操作として 44px を求めるので、上下 -2px の余白で重ねて 40px 送りにする)。390 で1行に入らなければ balance で 2・2 に分かれる ---- */
body.mt-v4 .ft__nav a { min-height: var(--tap-main); margin: -2px 8px; }
body.mt-v4 .ft a:focus-visible { outline-color: var(--white); }
@media (min-width: 900px) { body.mt-v4 .ft__nav a { min-height: var(--tap); margin: 0; } }

/* ---- メニュー(SP)の検索欄 ---- */
body.mt-v4 .menu__search { margin-top: 4px; }

/* ---- 小さな札(セールの状態・終了・予告) ---- */
body.mt-v4 .dleft { white-space: nowrap; }
body.mt-v4 .st { display: inline-block; padding: 0 8px; border: 1px solid var(--line-tag); font-size: 14px; font-weight: 700; line-height: 1.5; }
body.mt-v4 .st__d { white-space: nowrap; font-size: 14px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
body.mt-v4 .sc__d { flex-wrap: wrap; }

/* ---- 一覧(観光・旅行記の器をカテゴリ・タグ・新着・検索・行き先に) ---- */
body.mt-v4 .cat__h { flex-wrap: wrap; }
body.mt-v4 .cat__t { min-width: 0; }
body.mt-v4 .cat__n { white-space: nowrap; }
body.mt-v4 .cat__lead { margin-top: 8px; font-size: 16px; line-height: 1.75; }
body.mt-v4 .cat__s { margin-top: 12px; max-width: 560px; }
body.mt-v4 .ch__ex { display: none; }
body.mt-v4 .cc__d { white-space: nowrap; }
body.mt-v4 .cc__s { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
body.mt-v4 .cc--np { grid-column: 1 / -1; }
body.mt-v4 .cc--np .cc__tx { flex: 1; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); }
body.mt-v4 .cc--np .cc__t { font-size: 16px; line-height: 1.5; }
body.mt-v4 .cc--np:last-child:nth-child(odd) { display: flex; flex-direction: column; padding-top: 0; }
body.mt-v4 .cc--np:last-child:nth-child(odd) .cc__t { font-family: var(--font-body); font-size: 16px; line-height: 1.5; }
@media (min-width: 900px) { body.mt-v4 .cc--np .cc__t, body.mt-v4 .cc--np:last-child:nth-child(odd) .cc__t { margin-top: 0; font-size: 20px; line-height: 1.5; } }
body.mt-v4 .nc--np { grid-column: 1 / -1; padding: 14px 16px; border: 1px solid var(--line); }
@media (min-width: 900px) { body.mt-v4 .nc--np .nc__t { font-size: 19px; } }
/* 文字だけの札(全幅)の前に1枚だけ残った写真の札は、R2 の「最後の1枚」(style.css .cc:last-child:nth-child(odd))と同じ横長にする(build.py s_pack) */
body.mt-v4 .cc.cc--row, body.mt-v4 .nc.nc--row { grid-column: 1 / -1; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; align-items: center; padding-top: 4px; }
body.mt-v4 .cc--row .cc__ph, body.mt-v4 .nc--row .nc__ph { height: 104px; }
body.mt-v4 .cc--row .cc__tx { gap: 8px; }
body.mt-v4 .nc.nc--row { grid-template-rows: auto auto; align-content: center; row-gap: 6px; }
body.mt-v4 .nc--row .nc__ph { grid-row: 1 / span 2; }
body.mt-v4 .nc--row .nc__t, body.mt-v4 .nc--row .nc__m { grid-column: 2; }
body.mt-v4 .nc--row .nc__t { align-self: end; }
body.mt-v4 .nc--row .nc__m { align-self: start; }
body.mt-v4 .cc--row .cc__t { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 16px; line-height: 1.45; }
body.mt-v4 .nc--row .nc__t { font-size: 16px; line-height: 1.5; } /* 新着の札の題は R2 で本文の書体。見出しの書体にすると text= の字から漏れる(§9-9) */
@media (min-width: 900px) {
  body.mt-v4 .cc.cc--row, body.mt-v4 .nc.nc--row { grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 8px; }
  body.mt-v4 .cc--row .cc__ph { height: 320px; }
  body.mt-v4 .nc--row .nc__ph { height: 232px; }
  body.mt-v4 .cc--row .cc__t { margin-top: 0; font-size: 30px; line-height: 1.45; }
  body.mt-v4 .nc--row .nc__t { font-size: 19px; line-height: 1.55; }
}
/* 見た目では2枚で組になっている最後の札(DOM の数では奇数)は、R2 の「最後の1枚」の横長を外して普通の札に戻す(build.py s_pack) */
body.mt-v4 .cc.cc--pair:last-child:nth-child(odd) { grid-column: auto; display: flex; flex-direction: column; gap: 6px; align-items: stretch; padding-top: 0; }
body.mt-v4 .cc.cc--pair:last-child:nth-child(odd) .cc__ph { height: 116px; }
body.mt-v4 .cc.cc--pair:last-child:nth-child(odd) .cc__tx { gap: 6px; }
body.mt-v4 .cc.cc--pair:last-child:nth-child(odd) .cc__t { font-family: inherit; font-weight: 700; font-size: 14px; line-height: 1.55; }
@media (min-width: 900px) {
  body.mt-v4 .cc.cc--pair:last-child:nth-child(odd) { gap: 8px; padding-top: 0; }
  body.mt-v4 .cc.cc--pair:last-child:nth-child(odd) .cc__ph { height: 320px; }
  body.mt-v4 .cc.cc--pair:last-child:nth-child(odd) .cc__tx { gap: 8px; }
  body.mt-v4 .cc.cc--pair:last-child:nth-child(odd) .cc__t { margin-top: 6px; font-family: var(--font-head); font-weight: var(--head-weight); font-size: 22px; line-height: 1.5; }
}
body.mt-v4 .pg--gap { width: auto; min-width: 20px; border: 0; }
body.mt-v4 .cband--one { grid-template-columns: minmax(0, 1fr); }
body.mt-v4 .more { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--rule); }
body.mt-v4 .more .dcs { margin-top: 12px; }

/* 行き先の一覧(地域ごと) */
body.mt-v4 .rgs { margin-top: 32px; }
body.mt-v4 .rgs > .sh__h { padding-bottom: 8px; border-bottom: 2px solid var(--ink); font-size: 28px; }
body.mt-v4 .rg { padding: 14px 0 16px; border-bottom: 1px solid var(--rule); }
body.mt-v4 .rg__t { font-size: 20px; line-height: 1.4; }
body.mt-v4 .rg__t a { display: inline-flex; align-items: baseline; gap: 8px; min-height: var(--tap); }
body.mt-v4 .rg__n { font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--muted); }
body.mt-v4 .rg .dcs { margin-top: 4px; }
@media (min-width: 900px) { body.mt-v4 .rg { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 24px; align-items: start; } body.mt-v4 .rg .dcs { margin-top: 0; } }
/* 行き先の各ページ */
body.mt-v4 .dg { margin-top: 36px; }
body.mt-v4 .dg > .sh__h { padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
body.mt-v4 .dg .ch { margin-top: 16px; }
body.mt-v4 .dg .dcs { margin-top: 12px; }
body.mt-v4 .dg__more { margin-top: 16px; }
body.mt-v4 .dg__more a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
body.mt-v4 .facts { margin-top: 24px; padding: 16px; background: var(--surface); }
body.mt-v4 .facts__h { font-size: 20px; line-height: 1.4; }
body.mt-v4 .facts__asof { margin-top: 2px; font-size: 14px; color: var(--muted); }
body.mt-v4 .facts__dl { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); column-gap: 16px; margin: 10px 0 0; font-size: 15px; line-height: 1.7; }
body.mt-v4 .facts__dl dt, body.mt-v4 .facts__dl dd { margin: 0; padding: 8px 0; border-top: 1px solid var(--rule-on-surface); }
body.mt-v4 .facts__dl dt { font-weight: 700; }

/* ---- 右の列の無い面(固定ページ・404・検索の0件) ---- */
body.mt-v4 .solo__p { margin-top: 12px; font-size: 16px; line-height: 1.8; }
body.mt-v4 .solo__n { display: block; font-size: 20px; font-weight: 700; color: var(--accent); }
body.mt-v4 .solo__note { margin-top: 4px; font-size: 16px; line-height: 1.7; color: var(--muted); }
@media (min-width: 900px) { body.mt-v4 .solo__note { font-size: 14px; } }
body.mt-v4 .solo__s { margin-top: 16px; max-width: 560px; }
body.mt-v4 .solo__sec { margin-top: 36px; }
body.mt-v4 .solo__sec .dcs, body.mt-v4 .solo__sec .tgs { margin-top: 12px; }
body.mt-v4 .solo__sec .rtl { margin-top: 12px; }
body.mt-v4 .solo__back { margin-top: 32px; }
body.mt-v4 .solo__back a { display: inline-flex; align-items: center; min-height: var(--tap-main); padding: 0 20px; background: var(--surface); font-weight: 700; }
body.mt-v4 .post--solo .post__a { padding-bottom: 36px; }
@media (min-width: 900px) and (max-width: 1099px) { body.mt-v4 .post--solo .post__a { max-width: calc(720px + 2 * var(--gut)); } }
@media (min-width: 1100px) {
  body.mt-v4 .post--solo { display: block; }
  body.mt-v4 .post--solo .post__a { max-width: 720px; margin-left: var(--pad); padding-bottom: 48px; }
}

/* ---- 記事 ---- */
body.mt-v4 .at--m { font-size: 22px; line-height: 1.4; }
body.mt-v4 .at--l { font-size: 20px; line-height: 1.45; }
body.mt-v4 .ab--upd { margin-top: 8px; }
body.mt-v4 .ab--upd time { font-weight: 700; }
body.mt-v4 .toc__n { font-weight: 500; }
@media (min-width: 900px) {
  body.mt-v4 .at--m { font-size: 34px; line-height: 1.4; }
  body.mt-v4 .at--l { font-size: 28px; line-height: 1.45; }
}
body.mt-v4 .rr--np { grid-template-columns: minmax(0, 1fr); }

/* 記事の終わり(行き先・予約・前後・関連) */
body.mt-v4 .tl { display: flex; flex-direction: column; gap: 32px; margin-top: 48px; padding-top: 24px; border-top: 2px solid var(--ink); }
body.mt-v4 .tl__dest a { display: inline-flex; align-items: center; min-height: var(--tap-main); font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
body.mt-v4 .tl__sub { display: block; font-size: 14px; line-height: 1.6; color: var(--muted); }
body.mt-v4 .tl .acta { margin-top: 0; }
body.mt-v4 .acta__go { height: auto; min-height: 48px; padding: 8px 16px; line-height: 1.4; text-align: center; }
@media (min-width: 900px) { body.mt-v4 .acta__go { min-height: 56px; } }
body.mt-v4 .bk-l { margin-top: 8px; border-bottom: 1px solid var(--rule); }
body.mt-v4 .bk-l > li { border-top: 1px solid var(--rule); }
body.mt-v4 .bk { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: var(--tap-main); padding: 10px 0; }
body.mt-v4 .bk__b { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
body.mt-v4 .bk__n { font-size: 14px; line-height: 1.6; color: var(--muted); }
body.mt-v4 .pns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
body.mt-v4 .pn { display: flex; flex-direction: column; gap: 2px; min-height: var(--tap-main); padding: 12px 16px; border: 1px solid var(--line); }
body.mt-v4 .pn__l { font-size: 14px; color: var(--muted); }
body.mt-v4 .pn__t { font-size: 15px; font-weight: 700; line-height: 1.55; }
body.mt-v4 .tl__rel .rllist { margin-top: 8px; border-bottom: 1px solid var(--rule); }
body.mt-v4 .tl__rel .rllist li { border-top: 1px solid var(--rule); border-bottom: 0; }
body.mt-v4 .tl__rel .rllist li:last-child .rl { padding-bottom: 10px; }
@media (min-width: 900px) {
  body.mt-v4 .pns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  body.mt-v4 .pn--next { text-align: right; }
  body.mt-v4 .pn--next:only-child { grid-column: 2; }
  body.mt-v4 .tl__rel .rllist li:last-child .rl { padding-bottom: 14px; }
}

/* ---- EN ---- */
body.mt-v4 .hg--en .hg__rule { grid-row: 1; }
body.mt-v4.is-en .hs__h,
body.mt-v4.is-en .ch__h,
body.mt-v4.is-en .cc__t,
body.mt-v4.is-en .sc__nm { overflow-wrap: break-word; }

/* ---- 本文(.entry-content)の中の部品。本番の本文は書き換えず、見た目だけを R2 の値で付ける ---- */
body.mt-v4 .mt-body > .wp-block-group, body.mt-v4 .mt-body .wp-block-group__inner-container { min-width: 0; }
body.mt-v4 .mt-body :is(.wp-block-group__inner-container, .mt-v3-pitfall, .mt-v3-pitfalls, .mt-v3-article, .mt-v3-spot, .mt-v3-timeline__content, .mt-v3-steps__content, .p-entry__capsule, .wp-block-details, .mt-v3-news-points, .mt-v3-answer, .mt-v3-cta, .mt-v3-news-facts, .mt-v3-news-ended) > * + * { margin-top: 12px; }
body.mt-v4 .mt-body .toc_target { scroll-margin-top: 16px; }
body.mt-v4 .mt-body :is(li, dt, dd, th, td) { word-break: normal; }
body.mt-v4 .mt-body .mt-v3-h2--day__label, body.mt-v4 .mt-body .day-label { display: block; font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); }
body.mt-v4 .mt-body .mt-v3-h2--day__text { display: block; }

/* 答えの箱 */
body.mt-v4 .mt-v3-answer > .mt-v3-answer__num { display: inline; font-family: var(--font-head); font-weight: var(--head-weight); font-size: 34px; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; }
body.mt-v4 .mt-v3-answer > .mt-v3-answer__unit { display: inline; margin-left: 0.25em; font-size: 20px; }
body.mt-v4 .mt-v3-answer > .mt-v3-answer__label, body.mt-v4 .mt-v3-answer > .mt-v3-answer__note, body.mt-v4 .mt-v3-answer > .mt-v3-answer__lead { display: block; }
body.mt-v4 .mt-v3-answer__big--text { font-size: 28px; }
body.mt-v4 .mt-v3-answer__note, body.mt-v4 .mt-v3-answer__kicker, body.mt-v4 .mt-v3-answer__stat { font-size: 14px; color: var(--muted); }

/* 事実の箱(ニュース) */
body.mt-v4 .mt-v3-news-facts { padding: 16px; background: var(--surface); }
body.mt-v4 .mt-v3-news-facts__main { display: flex; flex-direction: column; }
body.mt-v4 .mt-v3-news-facts__label { font-weight: 700; font-size: 14px; }
body.mt-v4 .mt-v3-news-facts__big { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 34px; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; }
body.mt-v4 .mt-v3-news-facts__unit { margin-left: 0.25em; font-size: 20px; }
body.mt-v4 .mt-v3-news-facts__sub { font-size: 14px; color: var(--muted); }
body.mt-v4 .mt-v3-news-facts__dl { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); column-gap: 16px; margin: 12px 0 0; font-size: 15px; line-height: 1.7; }
body.mt-v4 .mt-v3-news-facts__dl dt, body.mt-v4 .mt-v3-news-facts__dl dd { margin: 0; padding: 8px 0; border-top: 1px solid var(--rule-on-surface); }
body.mt-v4 .mt-v3-news-facts__dl dt { font-weight: 700; }
@media (max-width: 767px) {
  body.mt-v4 .mt-v3-news-facts__dl { grid-template-columns: minmax(0, 1fr); }
  body.mt-v4 .mt-v3-news-facts__dl dt { padding-bottom: 0; }
  body.mt-v4 .mt-v3-news-facts__dl dd { padding-top: 0; border-top: 0; }
}
body.mt-v4 .mt-v3-news-ended { padding: 16px; border: 1px solid var(--line); }
body.mt-v4 .mt-v3-news-ended__body { display: flex; flex-direction: column; }
body.mt-v4 .mt-v3-news-ended__label { font-size: 14px; font-weight: 700; color: var(--muted); }
body.mt-v4 .mt-v3-news-ended__title { font-weight: 700; font-size: 19px; line-height: 1.45; }
body.mt-v4 .mt-v3-news-ended__note { font-size: 14px; color: var(--muted); }
body.mt-v4 .mt-body .mt-v3-news-ended__go { display: inline-flex; align-items: center; min-height: var(--tap-main); font-weight: 700; }

/* 定義の行(要点・見逃さない方法・ニュースの要点) */
body.mt-v4 .mt-v3-deflist__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; border-top: 1px solid var(--rule); }
body.mt-v4 .mt-v3-deflist__label { font-weight: 700; }
body.mt-v4 dl.mt-v3-watch dt { padding-top: 10px; border-top: 1px solid var(--rule); font-weight: 700; }
body.mt-v4 dl.mt-v3-watch dd { margin: 0; padding-bottom: 10px; }
@media (min-width: 768px) { body.mt-v4 .mt-v3-deflist__row { grid-template-columns: minmax(0, 9em) minmax(0, 1fr); column-gap: 16px; } }

/* チェックリスト(ul 型・旧い div 型・箱が文を包む型) */
body.mt-v4 .mt-body .mt-v3-checklist { padding-left: 0; list-style: none; }
body.mt-v4 .mt-v3-checklist__item { display: grid; grid-template-columns: 1.25em minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--rule); }
body.mt-v4 .mt-v3-checklist__item > br { display: none; }
body.mt-v4 .mt-v3-checklist__item > .mt-v3-checklist__box { display: inline-block; width: 1em; height: 1em; border: 2px solid var(--muted); line-height: 1; text-align: center; color: var(--accent); font-size: 16px; }
body.mt-v4 .mt-v3-checklist > .mt-v3-checklist__box > .mt-v3-checklist__text { display: block; padding: 10px 0; border-top: 1px solid var(--rule); }

/* 手順・時刻の並び */
body.mt-v4 .mt-v3-steps__no { display: block; font-size: 14px; font-weight: 700; color: var(--accent); }
body.mt-v4 .mt-v3-steps__name { font-weight: 700; }
body.mt-v4 .mt-v3-steps__row { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); column-gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); }
body.mt-v4 .mt-v3-steps__desc { margin: 4px 0 0; }
body.mt-v4 .mt-v3-timeline__item { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 16px; border-top: 1px solid var(--rule); }
body.mt-v4 .mt-v3-timeline__item + .mt-v3-timeline__item { margin-top: 16px; }
body.mt-v4 .mt-v3-timeline__time { font-weight: 700; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
body.mt-v4 .mt-v3-timeline__content > * + * { margin-top: 10px; }
body.mt-v4 .mt-v3-timeline__content h3 { margin-top: 0; }
@media (min-width: 768px) { body.mt-v4 .mt-v3-timeline__item { grid-template-columns: 5em minmax(0, 1fr); column-gap: 16px; } }

/* いま開催中(ハブの本文の一覧) */
body.mt-v4 .mt-v3-hub-now { padding: 16px; background: var(--surface); }
body.mt-v4 .mt-v3-hub-now__head { display: flex; flex-wrap: wrap; gap: 4px 10px; font-weight: 700; }
body.mt-v4 .mt-v3-hub-now__count { font-weight: 400; color: var(--muted); }
body.mt-v4 .mt-body a.mt-v3-hub-now__item { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-height: var(--tap-main); padding: 10px 0; border-top: 1px solid var(--rule-on-surface); color: var(--ink); text-decoration: none; }
body.mt-v4 .mt-v3-hub-now__head + .mt-v3-hub-now__item { margin-top: 8px; }
body.mt-v4 .mt-v3-hub-now__body { display: flex; flex-direction: column; }
body.mt-v4 .mt-v3-hub-now__name { font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
body.mt-v4 .mt-v3-hub-now__note, body.mt-v4 .mt-v3-hub-now__end { font-size: 14px; color: var(--muted); }

/* 注意・落とし穴・読み方 */
body.mt-v4 .mt-body .mt-v3-caution { padding: 16px 16px 16px calc(16px + 1.5em); background: var(--surface); }
body.mt-v4 .mt-body .mt-v3-caution li + li { margin-top: 6px; }
body.mt-v4 .mt-v3-pitfalls > div > h3:first-child { margin-top: 0; }
body.mt-v4 .mt-v3-pitfall + .mt-v3-pitfall { margin-top: 20px; }
body.mt-v4 .mt-v3-pitfall > h3 { margin-top: 0; }
body.mt-v4 .p-entry__capsule { padding: 16px; background: var(--surface); }
body.mt-v4 .mt-v3-legend { color: var(--muted); }

/* よくある問い(details) */
body.mt-v4 .mt-body .wp-block-details { border-top: 1px solid var(--rule); }
body.mt-v4 .mt-body details > summary { display: list-item; min-height: var(--tap-main); padding: 10px 0; font-weight: 700; cursor: pointer; }
body.mt-v4 .mt-body .wp-block-details[open] { padding-bottom: 12px; }

/* 出典 */
body.mt-v4 .mt-v3-sources__head, body.mt-v4 .mt-v3-sources__title { font-weight: 700; color: var(--ink); }
body.mt-v4 .mt-body .mt-v3-sources__list { margin-top: 8px; padding-left: 0; list-style: none; }
body.mt-v4 .mt-v3-sources__row { padding: 6px 0; border-top: 1px solid var(--rule); }
body.mt-v4 .mt-v3-sources__asof { margin-left: 8px; white-space: nowrap; }
body.mt-v4 .mt-v3-sources__row > a,
body.mt-v4 .mt-v3-deflist__body > a,
body.mt-v4 .eyecatch-credit > a,
body.mt-v4 .mt-body li > a,
body.mt-v4 .mt-body td > a,
body.mt-v4 .mt-body dd > a,
body.mt-v4 .mt-v3-table__cell > a { padding-block: 14px; }
@media (min-width: 900px) { body.mt-v4 .mt-body .mt-v3-sources--line,
body.mt-v4 .mt-body .mt-v3-credit,
body.mt-v4 .mt-body .mt-v3-photo-credit,
body.mt-v4 .mt-body .mt-hub-logic__disc { font-size: 14px; } }
body.mt-v4 .mt-body .mt-v3-sources--line,
body.mt-v4 .mt-body .mt-v3-credit,
body.mt-v4 .mt-body .mt-v3-photo-credit,
body.mt-v4 .mt-body .mt-hub-logic__disc,
body.mt-v4 .mt-body .eyecatch-credit { color: var(--muted); }
body.mt-v4 .mt-v3-figure__caption, body.mt-v4 .mt-body figcaption { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* 本文の ボタンの形の a(class=btn) */
body.mt-v4 .mt-body a.btn { display: inline-flex; align-items: center; min-height: var(--tap-main); padding: 0 20px; background: var(--accent); color: var(--white); font-weight: 700; text-decoration: none; }
body.mt-v4 .mt-body .mt-v3-cta__btn > a.btn { display: block; min-height: 0; padding: 12px 0; background: none; color: inherit; }

/* 宿の行(旧い書き方) */
body.mt-v4 .mt-v3-stay__item { padding: 12px 0; border-top: 1px solid var(--rule); }
body.mt-v4 .mt-v3-stay__item > br { display: none; }
body.mt-v4 .mt-v3-stay__item > span { display: block; }
body.mt-v4 .mt-v3-stay__why { margin-top: 2px; }

/* 予約の箱・セールの CTA(新しい aside 型と、a 1本の旧い型) */
body.mt-v4 .mt-v3-cta__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
body.mt-v4 .mt-v3-cta__kicker, body.mt-v4 .mt-v3-cta__pr { font-size: 14px; color: var(--muted); }
body.mt-v4 .mt-v3-cta__note, body.mt-v4 .mt-v3-cta__desc { display: block; }
body.mt-v4 .mt-body .mt-v3-cta__go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; justify-self: start; min-height: var(--tap-main); padding: 8px 20px; line-height: 1.5; background: var(--accent); color: var(--white); font-weight: 700; text-decoration: none; }
body.mt-v4 .mt-body a.mt-v3-cta { display: flex; align-items: center; min-height: var(--tap-main); color: var(--ink); font-weight: 700; text-decoration: none; }
body.mt-v4 .mt-v3-cta + .mt-v3-cta { margin-top: 12px; }
@media (min-width: 768px) { body.mt-v4 .mt-v3-cta__head { grid-template-columns: minmax(0, 1fr) max-content; align-items: center; column-gap: 24px; } }
body.mt-v4 .mt-v3-stay__why { color: var(--ink); }
body.mt-v4 .mt-v3-hub-link a { display: inline-flex; align-items: center; min-height: var(--tap-main); }

/* 表: <table>(枠の中だけを横に送る。列の数ぶんの最小幅は本文の --mt-v3-tmin)と、div の表 */
body.mt-v4 .mt-v3-tablewrap,
body.mt-v4 .wp-block-table,
body.mt-v4 .mt-v3-table-wrap,
body.mt-v4 .mt-v3-scroll { overflow-x: auto; }
body.mt-v4 .mt-v3-tablewrap > table { min-width: var(--mt-v3-tmin, 100%); }
body.mt-v4 .mt-body .wp-block-table, body.mt-v4 .mt-body .mt-v3-table-wrap, body.mt-v4 .mt-body .mt-v3-tablewrap { border: 1px solid var(--rule); }
body.mt-v4 .mt-body .mt-v3-scroll .mt-v3-tablewrap { border: 0; }
body.mt-v4 .mt-body table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
body.mt-v4 .mt-body th, body.mt-v4 .mt-body td { padding: 10px 14px; border-top: 1px solid var(--rule); text-align: left; vertical-align: top; overflow-wrap: break-word; }
body.mt-v4 .mt-body thead th, body.mt-v4 .mt-body thead td { border-top: 0; background: var(--surface); font-size: 14px; font-weight: 700; }
body.mt-v4 .mt-body figure table { margin: 0; }
/* 枠(tablewrap)の無い素の表は、狭い幅では表の中だけを横に送る(ページを横にあふれさせない) */
@media (max-width: 899px) { body.mt-v4 .mt-body > table, body.mt-v4 .mt-body :not(.mt-v3-tablewrap):not(.wp-block-table):not(.mt-v3-table-wrap) > table { display: block; max-width: 100%; overflow-x: auto; } }
body.mt-v4 .mt-v3-table__co { font-weight: 700; }
body.mt-v4 .mt-v3-table__dot { display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.4em; background: var(--accent); }
body.mt-v4 .mt-v3-table--steps .mt-v3-table__row { grid-template-columns: minmax(9em, 0.45fr) minmax(0, 1fr); grid-auto-flow: row; }
body.mt-v4 .mt-v3-table--steps .mt-v3-steps__no { margin-bottom: 2px; }

/* 運営者情報・方針の定義の並び */
body.mt-v4 .mt-colophon dt { margin-top: 20px; font-weight: 700; }
body.mt-v4 .mt-colophon dd { margin: 0; }

/* お問い合わせのフォーム(本番の Contact Form 7 の HTML のまま) */
body.mt-v4 .mt-body .wpcf7 label { display: block; font-weight: 700; }
body.mt-v4 .mt-body .wpcf7-form-control-wrap { display: block; margin-top: 6px; font-weight: 500; }
body.mt-v4 .mt-body .wpcf7 input[type="text"],
body.mt-v4 .mt-body .wpcf7 input[type="email"],
body.mt-v4 .mt-body .wpcf7 input[type="url"],
body.mt-v4 .mt-body .wpcf7 textarea { display: block; width: 100%; min-height: var(--tap-main); padding: 8px 12px; border: 1px solid var(--field-line); background: var(--white); font: inherit; font-size: 16px; color: var(--ink); }
body.mt-v4 .mt-body .wpcf7 textarea { min-height: 160px; }
body.mt-v4 .mt-body .wpcf7 input[type="submit"] { min-height: 48px; padding: 0 32px; border: 0; background: var(--accent); color: var(--white); font: inherit; font-weight: 700; cursor: pointer; }
body.mt-v4 .mt-body .wpcf7 p + p { margin-top: 16px; }
body.mt-v4 .mt-body .wpcf7-response-output:empty { display: none; }
body.mt-v4 .screen-reader-response, body.mt-v4 .hidden-fields-container { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; border: 0; clip-path: inset(50%); }

/* ---- 角丸の台帳(S3 で足した分。値は同じ変数を使い、役割ごとに1か所にまとめる) ---- */
body.mt-v4 .st { border-radius: var(--r-tag); }
body.mt-v4 .facts,
body.mt-v4 .mt-v3-news-facts,
body.mt-v4 .mt-v3-hub-now,
body.mt-v4 .p-entry__capsule,
body.mt-v4 .mt-body .mt-v3-caution { border-radius: var(--r-lg); }
body.mt-v4 .cc--np .cc__tx,
body.mt-v4 .nc--np,
body.mt-v4 .mt-v3-news-ended,
body.mt-v4 .mt-body .wp-block-table,
body.mt-v4 .mt-body .mt-v3-table-wrap,
body.mt-v4 .mt-body .mt-v3-tablewrap { border-radius: var(--r-md); }
body.mt-v4 .pn,
body.mt-v4 .bk,
body.mt-v4 .mt-body a.btn,
body.mt-v4 .solo__back a,
body.mt-v4 .mt-body .wpcf7 input[type="text"],
body.mt-v4 .mt-body .wpcf7 input[type="email"],
body.mt-v4 .mt-body .wpcf7 input[type="url"],
body.mt-v4 .mt-body .wpcf7 textarea,
body.mt-v4 .mt-body .wpcf7 input[type="submit"],
body.mt-v4 .mt-body .mt-v3-cta__go { border-radius: var(--r-sm); }
body.mt-v4 .mt-v3-table__dot { border-radius: 50%; }


/* ==== 本番だけの補い(R2 に無い部品・値は R2 の変数と数字だけ) ==== */
/* 題を BudouX で割った語(.bx)。題は keep-all で、語の中では割らず、語の間か overflow-wrap で折る。D7 の U+2060 で結んだ所は .nb が割らせない。 */
body.mt-v4 .bx { word-break: keep-all; overflow-wrap: anywhere; }
body.mt-v4 .bx .nb { white-space: nowrap; }
/* 写真の無い記事の札(本番には写真を持たない記事がある。R2 の試作は全件に写真を付けていた) */
body.mt-v4 .sc--np .sc__b { padding-top: 16px; }
body.mt-v4 .sc--np { border: 1px solid var(--line); }
body.mt-v4 .rk--np { grid-template-columns: 28px minmax(0, 1fr); }
@media (min-width: 900px) { body.mt-v4 .rk--np { grid-template-columns: 40px minmax(0, 1fr); } }
body.mt-v4 .rkband .rk--np { grid-template-columns: 34px minmax(0, 1fr); }
body.mt-v4 .sr--np { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { body.mt-v4 .sr--np { grid-template-columns: minmax(0, 1fr); } }
body.mt-v4 .sr--np .sr__tx { grid-column: 1 / -1; }
/* 最近のコメント(記事の右の列・R2 は「まだありません」の文だけだった) */
body.mt-v4 .cm-l { margin-top: 12px; }
body.mt-v4 .cm-l > li { border-top: 1px solid var(--rule); }
body.mt-v4 .cm { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; }
body.mt-v4 .cm__t { font-size: 14px; line-height: 1.6; }
body.mt-v4 .cm__m { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* ==== 環境の打ち消し(試作に無い・値は試作の計算値) ====
   親 Xwrite の body は `font-weight: var(--body-font-weight, 500)`(本番は 500)と `font-feature-settings: "palt"` を持つ
   (2026-10-12 に本番の body で getComputedStyle を取って確認)。試作は親 CSS の無い静的ページで、400 と normal だった。
   そのままだと本文が 1 段太くなり、かなの字幅が詰まる。
   同じ body に `word-break: break-word` もある(継承する)。これは overflow-wrap: anywhere と同じ効き方で、表のマスの最小幅が
   1 字になって列が潰れる(試作の .entry-content th, td が overflow-wrap: break-word で避けた崩れ。本番の CSS を載せた実測で、
   モデルプランの表の列幅が最大 16px ずれた)。試作の body は word-break: normal だったので戻す。 */
body.mt-v4 {
  font-weight: 400;
  font-feature-settings: normal;
  word-break: normal;
}
/* 親 Xwrite の `dialog { display: block }`(site.min.css・(0,0,1))が、ブラウザ既定の `dialog:not([open]) { display: none }` を
   作者の規則として上書きし、閉じた SP メニューが常に全面に出る(本番の CSS を載せた 390・1440 の実測で確認)。既定に戻す。 */
body.mt-v4 dialog:not([open]) {
  display: none;
}

/* 本番だけの補い: 実際のトップでロゴを包む h1(mtb_v4p_header)。箱を作らず、ヘッダーの並びを試作のままにする。 */
body.mt-v4 .hdr__h1 { display: contents; }

/* 本番だけの補い: 記事のコメント欄(親の comments_template のまま)。枠はお問い合わせの欄と同じ値(親の淡い枠は白地に 1.36:1 で、§9-2 の非テキストの比 3 に届かない・10/13 の ON の検査)。 */
body.mt-v4 .comment-respond input[type="text"], body.mt-v4 .comment-respond input[type="email"], body.mt-v4 .comment-respond input[type="url"], body.mt-v4 .comment-respond textarea { border: 1px solid var(--field-line); background: var(--white); color: var(--ink); font: inherit; font-size: 16px; }

/* 本番だけの補い: 1440 を超える画面では、中身の幅を 1280(板 1440 の中身)で止めて真ん中に寄せる(Yu 10/13「ブラウザ表示した時の幅がおかしい」・1920 で中身が 1745 に伸びていた)。
   --gut を広げるだけなので、帯や面の背景は画面いっぱいのまま。写真の横流しの右の覗きは、1440 と同じく中身の右端から 80px で切る。50vw はスクロールバーを含むが、左右に同じ値を当てるので中身は真ん中に来る。 */
@media (min-width: 1441px) {
  body.mt-v4 { --gut: max(80px, calc(50vw - 640px)); }
  body.mt-v4 .rail--hero { clip-path: inset(0 calc(var(--gut) - 80px) 0 var(--gut)); }
}