/*
 * トップページ 新デザイン v3（2026-10-14）。LP v3 の部品CSS（lp-onsite-v3.css: 書体・格子・ボタン・縦見出し・緑の単色写真・固定ボタン）の上に重ねる。
 * 主役は冒頭の計算機（減らせる時間を数える）。各節は、右端に縦書きの見出し、左に番号とひとこと、その下に本文。
 * 色: 深緑・白・薄緑・麦色。赤は「5問1分で診断する」「無料相談はこちら」のボタンと、1.09倍の数字だけ。文字は14px以上。
 */
.tv { --tv-ease: cubic-bezier(.2,.7,.2,1); }
.tv :where(h1, h2, h3) { font-family: var(--ov-mincho); }
.tv .cat-tag { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--ov-green); border: 1px solid var(--ov-line); border-radius: 2px; padding: 1px 8px; text-decoration: none; background: #fff; }
.tv .cat-tag:hover { border-color: var(--ov-green); }
/* 親テーマの a:hover は赤になるので塞ぐ（赤はボタン2つと1.09倍だけ）。明るい面では深緑、深緑の面では白のまま */
.tv a:hover { color: var(--ov-green); }
.tv :is(.tv-hero, .tv-formula, .tv-env__stage, .tv-policy, .tv-theme) a:not(.ov-btn):hover, .tv a.tv-theme:hover, .tv-theme:hover :is(b, span) { color: #fff; }
.tv .ov-btn--line:hover, .tv .ov-btn--ghost:hover { color: var(--ov-green); }
.tv-theme:hover em { color: var(--ov-wheat); }
/* 「例：」の出し分け: 計算機を触るまでは、引き継ぎ先も例と明記し、相談カード・締めの一文は出さない */
.tv.is-own [data-tv-ex-label], .tv.is-own .tv-calc__ex { display: none; }
.tv:not(.is-own) .tv-gcard__echo { display: none; }
.tv:not(.is-own) .tv-own-on, .tv.is-own .tv-own-off { display: none; }
.tv-final__num-t a { color: var(--ov-green); font-weight: 700; }
.tv:not(.is-own) :is([data-tv-echo-result], [data-tv-echo-hours], [data-tv-echo-ratio], [data-tv-echo-task]) { background: rgba(226,215,176,.16); padding: 0 .14em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* トップでは、ヘッダー上の帯（h1 と同じ文言）を出さない */
body.tv-page .topbar { display: none; }
body.tv-page .site-header :focus-visible, body.tv-page .skip-link:focus-visible { outline-color: var(--ov-green); }
[data-tv-ex-label] { color: var(--ov-wheat); font-weight: 700; margin-right: 2px; }
.tv-steps em [data-tv-ex-label] { color: var(--ov-green); }
/* 数字が流れたことを、麦色の点灯で示す */
.tv.is-own :is([data-tv-echo-result], [data-tv-echo-hours], [data-tv-echo-ratio], [data-tv-echo-task]) { background: rgba(226,215,176,.38); padding: 0 .14em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tv-echo-tick { animation: tv-echo .9s var(--tv-ease); }
@keyframes tv-echo { 0% { background-color: rgba(226,215,176,.38); } 25% { background-color: rgba(226,215,176,.85); } 100% { background-color: rgba(226,215,176,.38); } }
/* JS が無いときは、動かない部品を出さない */
html:not(.ov-js) :is(.tv-calc__fields, .tv-formula__link, .tv-cities__lead-js, .tv-calc__note) { display: none; }
@media (min-width: 1001px) { html.ov-js .tv-env__k-env { display: none; } }
html:not(.ov-js) .tv-env__stage { grid-column: 1 / -1; }
/* 写真は自然な色のまま（LP の .ov-duo の緑の単色化・粒子は、トップでは使わない） */
.tv .ov-duo { background: #1c1f1d; }
.tv .ov-duo > img, .tv .ov-duo > picture > img { filter: none; mix-blend-mode: normal; }
.tv .ov-duo::after { display: none; }
/* 焦点の輪（深緑の面では麦色） */
.ov :is(.tv-hero, .tv-policy, .tv-env__stage, .tv-formula, .tv-cities__map) :is(a, button, select, input):focus-visible { outline-color: var(--ov-wheat); box-shadow: none; }
/* 見えてから現れる部品（JS が is-in を付ける。JS が無いときは最初から見えている） */
html.ov-js .tv [data-tv-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--tv-ease), transform .7s var(--tv-ease); animation: tv-safe 0s 2.5s forwards; }
html.ov-js .tv [data-tv-reveal].is-in { opacity: 1; transform: none; animation: none; }
@keyframes tv-safe { to { opacity: 1; transform: none; } }
/* 深緑の写真の上の注記は、読めるように影を付ける */
.tv .ov-cap { text-shadow: 0 1px 6px rgba(0,0,0,.55); }

/* ───────── 冒頭: 見出しと計算機 ───────── */
.tv-hero { position: relative; overflow: hidden; background: var(--ov-green); color: #fff; }
.tv-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(52% 60% at 72% 40%, rgba(255,255,255,.07), transparent 72%); pointer-events: none; }
.tv-hero__pref { position: absolute; right: -8%; top: -10%; width: clamp(380px, 56vw, 980px); color: var(--ov-wheat); opacity: .09; pointer-events: none; }
.tv-hero__pref .ov-mini { --sw: 2.4; width: 100%; height: auto; }
.tv-hero__in {
  position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(28px, 4.5vw, 80px); row-gap: 32px; align-items: center;
  padding-block: clamp(40px, 5.2vw, 84px) clamp(36px, 4.6vw, 72px); min-height: clamp(520px, calc(100svh - 124px), 820px);
}
@media (max-height: 920px) and (min-width: 1001px) {
  .tv-hero__in { align-items: start; padding-block: 32px 40px; min-height: 0; }
  .tv-hero__copy { gap: 16px; }
  .tv-hero__title { font-size: clamp(42px, 5.4vw, 76px); }
  .tv-calc { padding: 18px; gap: 12px; }
  .tv-calc__fields { gap: 10px; padding-top: 10px; }
  .tv-calc__v { font-size: 56px; }
  .tv-calc__note, .tv-field__ex { display: none; }   /* 業務ノートの高さでは、計算機を1画面に収めるため補足を畳む（01 がすぐ下にある） */
  .tv-calc__fields { gap: 8px; }
  .tv-sec__vh { font-size: clamp(26px, 2.6vw, 34px); top: 100px; }
}
.tv-hero__copy { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 26px); max-width: 38em; padding-top: 10px; }
.tv-kicker { font-size: 14px; font-weight: 700; letter-spacing: .14em; color: var(--ov-wheat); padding-top: 12px; border-top: 1px solid rgba(226,215,176,.45); align-self: flex-start; }
.tv-hero__title { font-weight: 800; font-size: clamp(42px, 6.2vw, 94px); line-height: 1.22; letter-spacing: .04em; font-feature-settings: "palt"; color: #fff; }
.tv-hero__lead { font-size: 16px; line-height: 1.9; color: rgba(255,255,255,.9); max-width: 32em; }
.tv-hero__lead b { color: #fff; }
.tv-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.tv-hero__sub { font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.74); max-width: 34em; }
@media (prefers-reduced-motion: no-preference) {
  .tv-hero__title { animation: ov-rise .9s var(--tv-ease) .1s backwards; }
  .tv-calc { animation: ov-rise .9s var(--tv-ease) .3s backwards; }
}
/* 計算機 */
.tv-calc { scroll-margin-top: 110px; position: relative; background: rgba(255,255,255,.055); border: 1px solid rgba(226,215,176,.5); border-radius: 6px; padding: clamp(18px, 2vw, 26px); display: grid; gap: 14px; }
.tv-calc__k { font-family: var(--ov-mincho); font-weight: 600; font-size: 15px; letter-spacing: .16em; color: var(--ov-wheat); display: flex; align-items: center; gap: 12px; }
.tv-calc__k::after { content: ""; flex: 1; height: 1px; background: rgba(226,215,176,.45); }
.tv-calc__out { display: grid; gap: 4px; }
.tv-calc__task { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.88); }
.tv-calc__ex { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--ov-wheat); margin-right: 4px; }
.tv-calc.is-own .tv-calc__ex { display: none; }
.tv-calc__taskname { font-family: var(--ov-mincho); font-weight: 600; font-size: 20px; color: #fff; letter-spacing: .04em; }
.tv-calc__num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; }
.tv-calc__v { font-family: var(--ov-mincho); font-weight: 800; font-size: clamp(48px, 4.8vw, 68px); line-height: 1; letter-spacing: -.02em; color: #fff; font-feature-settings: "palt"; font-variant-numeric: tabular-nums; }
.tv-calc__u { font-family: var(--ov-mincho); font-weight: 600; font-size: clamp(18px, 1.6vw, 24px); color: var(--ov-wheat); letter-spacing: .06em; }
.tv-calc__per { font-size: 15px; color: rgba(255,255,255,.78); letter-spacing: .06em; }
.tv-calc__year { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.8); }
.tv-calc__year b { color: #fff; font-family: var(--ov-mincho); font-size: 20px; font-weight: 600; }
.tv-calc__fields { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(226,215,176,.3); }
.tv-field { display: grid; gap: 4px; }
.tv-field__l { font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--ov-wheat); display: flex; align-items: baseline; gap: 6px; }
.tv-field__num { margin-left: auto; display: inline-flex; align-items: baseline; gap: 4px; }
.tv-field__n { width: 4.2em; min-height: 44px; padding: 4px 8px; border-radius: 4px; border: 1px solid rgba(226,215,176,.6); background: rgba(255,255,255,.07); color: #fff; font-family: var(--ov-mincho); font-weight: 600; font-size: 20px; text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.tv-field__n::-webkit-outer-spin-button, .tv-field__n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tv-field__o { font-family: var(--ov-mincho); font-weight: 600; font-size: 20px; color: #fff; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.tv-field__unit { font-size: 14px; color: rgba(255,255,255,.78); }
.tv-field__ex { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.62); }
.tv-field__text { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 4px; border: 1px solid rgba(226,215,176,.7); background: rgba(255,255,255,.07); color: #fff; font-family: var(--ov-gothic); font-size: 16px; }
.tv-field__text::placeholder { color: rgba(255,255,255,.5); }
.tv-range { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; background: transparent; cursor: pointer; margin: 0; }
.tv-range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, #e2d7b0 var(--tv-fill, 0%), rgba(226,215,176,.55) 0); border-radius: 1px; }
.tv-range::-moz-range-track { height: 2px; background: rgba(226,215,176,.55); border-radius: 1px; }
.tv-range::-moz-range-progress { height: 2px; background: #e2d7b0; border-radius: 1px; }
.tv-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -12px; cursor: grab; border-radius: 50%; background: #fff; border: 3px solid var(--ov-green); box-shadow: 0 0 0 2px var(--ov-wheat); transition: transform .15s; }
.tv-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--ov-green); box-shadow: 0 0 0 2px var(--ov-wheat); }
.tv-range:hover::-webkit-slider-thumb, .tv-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.tv-calc__note { font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.74); }
.tv-calc__note a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.6); }
.tv-calc__note a:hover { text-decoration-color: #fff; }
.ov .tv-calc__cta { justify-self: start; }
.tv-calc.is-tick .tv-calc__v { animation: tv-tick .35s var(--tv-ease); }
@keyframes tv-tick { from { transform: translateY(-4px); opacity: .6; } to { transform: none; opacity: 1; } }

/* ───────── 数字で見る栃木とAIのいま ───────── */
.tv-facts { background: #fff; border-top: 1px solid var(--ov-line); border-bottom: 1px solid var(--ov-line); }
.tv-facts__in { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(24px, 4vw, 64px); align-items: start; padding-block: clamp(32px, 4.4vw, 60px); }
.tv-facts__label { margin: 0; font-family: var(--ov-mincho); font-weight: 600; font-size: 15px; letter-spacing: .14em; line-height: 1.8; color: var(--ov-green); padding-top: 10px; border-top: 1px solid var(--ov-green); }
.tv-facts__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(16px, 2.4vw, 36px); }
.tv-facts__list li { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 4px; padding-top: 10px; border-top: 1px solid var(--ov-line); }
.tv-facts__list b { white-space: nowrap; font-family: var(--ov-mincho); font-weight: 600; font-size: clamp(32px, 3.6vw, 54px); line-height: 1.1; color: var(--ov-green); letter-spacing: .02em; font-feature-settings: "palt"; }
.tv-facts__list b.is-red { color: var(--ov-red); }
.tv-facts__list small { font-size: 16px; margin-left: .25em; }
.tv-facts__list span { font-size: 15px; line-height: 1.7; color: var(--ov-ink); }
.tv-facts__list em { font-style: normal; font-size: 14px; color: var(--ov-sub); }
.tv-facts__read { grid-column: 2; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--ov-line); font-family: var(--ov-mincho); font-weight: 600; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.8; letter-spacing: .03em; color: var(--ov-green); }

/* ───────── 節の共通の骨組み（番号＋ひとこと／縦書きの見出し／本文） ───────── */
.tv-sec { padding-block: var(--ov-sec); }
.tv-tools { padding-block: calc(var(--ov-sec) * .78); }
.tv-gate { padding-top: calc(var(--ov-sec) * .82); }
.tv-posts { padding-top: calc(var(--ov-sec) * .72); }
.tv-sec__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head vh" "body vh"; column-gap: clamp(28px, 6vw, 112px); align-items: start; }
.tv-sec__vh { grid-area: vh; position: sticky; top: 110px; color: var(--ov-green); }
.tv-sec__head { grid-area: head; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 22px; padding-bottom: 18px; margin-bottom: clamp(28px, 4vw, 52px); border-bottom: 1px solid var(--ov-line); }
.tv-no { font-family: var(--ov-mincho); font-weight: 800; font-size: clamp(48px, 6vw, 88px); line-height: .9; letter-spacing: -.02em; color: var(--ov-green); font-feature-settings: "palt"; }
.tv-sec__note { margin-left: auto; font-size: 15px; line-height: 1.7; color: var(--ov-sub); max-width: 26em; }
.tv-sec__link { margin-left: auto; font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--ov-green); border-bottom: 1px solid var(--ov-green); padding: 6px 0 2px; text-decoration: none; }
.tv-sec__head .tv-sec__note + .tv-sec__link { margin-left: 22px; }
.tv-sec__body { grid-area: body; min-width: 0; }
.tv-lead { font-family: var(--ov-mincho); font-weight: 600; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.95; letter-spacing: .03em; color: var(--ov-green); max-width: 40em; font-feature-settings: "palt"; }

/* ───────── 01 数える ───────── */
.tv-count__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ov-g); row-gap: clamp(28px, 4vw, 48px); }
.tv-count__body .tv-lead { grid-column: 1 / 10; }
.tv-count__photo { grid-column: 1 / 6; margin: 0; aspect-ratio: 4 / 5; border-radius: 6px; }
.tv-count__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-count__photo .ov-cap { position: absolute; left: 16px; bottom: 12px; z-index: 2; }
.tv-steps { grid-column: 6 / 13; list-style: none; margin: 0; padding: 0; }
.tv-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(16px, 2vw, 28px); padding: clamp(18px, 2.2vw, 28px) 0; border-top: 1px solid var(--ov-line); }
.tv-steps li:last-child { border-bottom: 1px solid var(--ov-line); }
.tv-steps__n { font-family: var(--ov-mincho); font-weight: 800; font-size: clamp(40px, 4vw, 58px); line-height: 1; color: var(--ov-green); min-width: 1.1em; font-feature-settings: "palt"; }
.tv-steps b { display: block; font-family: var(--ov-mincho); font-weight: 600; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5; color: var(--ov-green); margin-bottom: 6px; letter-spacing: .03em; }
.tv-steps p { font-size: 16px; line-height: 1.9; color: var(--ov-sub); }
.tv-steps em { display: block; margin-top: 8px; font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--ov-green); }
.tv-formula { grid-column: 1 / 13; background: var(--ov-green-deep); color: #fff; border-radius: 6px; padding: clamp(24px, 3vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 40px; align-items: center; }
.tv-formula__label { grid-column: 1 / -1; font-size: 14px; font-weight: 700; letter-spacing: .14em; color: var(--ov-wheat); }
.tv-formula__eq { grid-column: 1 / -1; font-family: var(--ov-mincho); font-weight: 600; font-size: clamp(18px, 2vw, 27px); line-height: 1.6; letter-spacing: .04em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.tv-formula__eq i { font-style: normal; color: var(--ov-wheat); }
.tv-formula__eq span { border-bottom: 2px solid var(--ov-wheat); padding-bottom: 2px; }
.tv-formula__live { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 16px; line-height: 1.8; color: rgba(255,255,255,.88); padding: 12px 16px; border: 1px solid rgba(226,215,176,.4); border-radius: 4px; background: rgba(255,255,255,.05); }
.tv-formula__live b { font-family: var(--ov-mincho); font-weight: 600; font-size: 20px; color: #fff; font-variant-numeric: tabular-nums; }
.tv-formula__live-k { font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--ov-wheat); margin-right: 6px; }
.tv-formula__text { font-size: 15px; line-height: 1.9; color: rgba(255,255,255,.82); max-width: 40em; }
.tv-formula__link { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .06em; border-bottom: 1px solid rgba(255,255,255,.7); padding: 6px 0 2px; text-decoration: none; white-space: nowrap; }
.tv-formula__link:hover { border-bottom-color: #fff; }

/* ───────── 02 選ぶ（いまの環境で切り替える） ───────── */
.tv-tools { background: var(--ov-tint); }
.tv-env { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ov-g); row-gap: 20px; }
.tv-env__q { grid-column: 1 / -1; font-family: var(--ov-mincho); font-weight: 600; font-size: clamp(18px, 1.7vw, 23px); color: var(--ov-green); letter-spacing: .04em; }
.tv-env__list { grid-column: 1 / 6; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); align-self: stretch; border-top: 1px solid var(--ov-line); }
.tv-env__b { appearance: none; background: none; border: 0; border-bottom: 1px solid var(--ov-line); border-left: 3px solid transparent; text-align: left; padding: 18px 16px 18px 18px; cursor: pointer; display: grid; gap: 4px; align-content: center; transition: background-color .2s, border-color .2s; }
.tv-env__b:hover { background: rgba(255,255,255,.6); }
.tv-env__b[aria-selected="true"] { background: #fff; border-left-color: var(--ov-green); }
.tv-env__env { font-family: var(--ov-mincho); font-weight: 600; font-size: clamp(17px, 1.5vw, 20px); color: var(--ov-green); letter-spacing: .03em; }
.tv-env__tool { font-size: 14px; color: var(--ov-sub); letter-spacing: .04em; }
.tv-env__stage { grid-column: 6 / 13; position: relative; overflow: hidden; min-height: clamp(360px, 36vw, 520px); color: #fff; padding: clamp(24px, 3vw, 44px); padding-bottom: 62px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 6px; }
.tv-env__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: -2; opacity: 0; transition: opacity .6s var(--tv-ease); }
.tv-env__stage[data-env="0"] .tv-env__bg[data-env="0"], .tv-env__stage[data-env="1"] .tv-env__bg[data-env="1"], .tv-env__stage[data-env="2"] .tv-env__bg[data-env="2"], .tv-env__stage[data-env="3"] .tv-env__bg[data-env="3"] { opacity: 1; }
html:not(.ov-js) .tv-env__bg[data-env="0"] { opacity: 1; }
.tv-env__stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,12,11,.86) 0%, rgba(10,12,11,.5) 55%, rgba(10,12,11,.12) 100%); }
.tv-env__panel { position: relative; z-index: 2; max-width: 36em; }
html.ov-js .tv-env__panel { display: none; }
html.ov-js .tv-env__panel.is-active { display: block; }
html:not(.ov-js) .tv-env__panel + .tv-env__panel { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.3); }
html:not(.ov-js) :is(.tv-env__list, .tv-cities__chips, .tv-cities__pick) { display: none; }
@media (prefers-reduced-motion: no-preference) { .tv-env__panel.is-active { animation: ov-rise .5s var(--tv-ease); } }
.tv-env__k { font-size: 14px; font-weight: 700; letter-spacing: .14em; color: var(--ov-wheat); margin-bottom: 8px; }
.tv-env__h { font-weight: 800; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.45; margin-bottom: 12px; font-feature-settings: "palt"; letter-spacing: .02em; }
.tv-env__t { font-size: 16px; line-height: 1.95; color: rgba(255,255,255,.9); }
.tv-env__cap { position: absolute; right: 14px; bottom: 12px; z-index: 2; background: rgba(10,12,11,.55); padding: 2px 8px; border-radius: 3px; }
.tv-env__note { grid-column: 1 / -1; font-size: 15px; line-height: 1.9; color: var(--ov-sub); max-width: 44em; }
.tv-env__note a { color: var(--ov-green); font-weight: 700; }

/* ───────── 03 相談する（4つの入口） ───────── */
.tv-gate__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); counter-reset: none; }
.tv-gcard { position: relative; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; height: 100%; background: #fff; border: 1px solid var(--ov-line); border-radius: 6px; overflow: hidden; text-decoration: none; color: var(--ov-ink); transition: transform .3s var(--tv-ease), box-shadow .3s var(--tv-ease), border-color .3s; }
.tv-gcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(23,53,42,.14); border-color: var(--ov-green); }
.tv-gcard__img.ov-duo img { transition: transform .6s var(--tv-ease); }
.tv-gcard:hover .tv-gcard__img.ov-duo img { transform: scale(1.04); }
.tv-gcard__img { display: block; aspect-ratio: 3 / 2; }
.tv-gcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-gcard__img--doc { background: var(--ov-tint); padding: 20px 14px 0; }
.tv-gcard__img--doc img { object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 6px 14px rgba(23,53,42,.22)); }
.tv-gcard__n { position: absolute; left: 14px; top: 14px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--ov-green); font-family: var(--ov-mincho); font-weight: 800; font-size: 19px; display: grid; place-items: center; }
.tv-gcard__label { font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--ov-sub); padding: 18px 20px 0; }
.tv-gcard__title { text-wrap: pretty; word-break: keep-all; overflow-wrap: anywhere; font-family: var(--ov-mincho); font-weight: 600; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: var(--ov-green); padding: 6px 20px 0; letter-spacing: .03em; min-height: calc(1.5em * 2 + 6px); }
.tv-gcard__text { font-size: 15px; line-height: 1.85; color: var(--ov-sub); padding: 10px 20px 0; text-wrap: pretty; }
.tv-gcard__echo { display: block; font-size: 14px; line-height: 1.7; color: var(--ov-green); padding: 10px 20px 0; }
.tv-gcard__echo b { font-family: var(--ov-mincho); font-weight: 600; font-size: 17px; }
.tv-gcard__more { font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--ov-green); padding: 16px 20px 22px; }
.tv-gcard__more::after { content: ""; display: block; width: 28px; height: 1px; background: var(--ov-green); margin-top: 8px; transition: width .3s var(--tv-ease); }
.tv-gcard:hover .tv-gcard__more::after { width: 56px; }
.tv-gate .ai-ask-row { margin-top: clamp(28px, 4vw, 48px); }

/* ───────── 04 読む（最新の記事・テーマ・市町） ───────── */
.tv-postgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ov-g); row-gap: 0; }
.tv-post--lead { grid-column: 1 / 7; grid-row: 1 / span 5; display: grid; gap: 18px; align-content: start; padding-right: clamp(0px, 1vw, 16px); }
.tv-post--lead .tv-post__thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; }
.tv-post__thumb { position: relative; background: var(--ov-tint); }
.tv-post__thumb img, .tv-post__thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-post__thumb::after { content: ""; position: absolute; inset: 0; background: rgba(23,53,42,0); pointer-events: none; }
.tv-post:hover .tv-post__thumb::after { opacity: 0; }
.tv-post--lead .tv-post__title { font-family: var(--ov-mincho); font-weight: 600; font-size: clamp(22px, 2.3vw, 33px); line-height: 1.55; letter-spacing: .03em; }
.tv-post__title { text-wrap: pretty; }
.tv-post__title a { color: var(--ov-green); text-decoration: none; }
.tv-post__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tv-post__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 14px; color: var(--ov-sub); margin-bottom: 8px; }
.tv-post__ex { font-size: 15px; line-height: 1.9; color: var(--ov-sub); text-wrap: pretty; }
.tv-post:not(.tv-post--lead) { grid-column: 7 / 13; display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 16px 0; border-top: 1px solid var(--ov-line); }
.tv-post:not(.tv-post--lead):last-child { border-bottom: 1px solid var(--ov-line); }
.tv-post:not(.tv-post--lead) .tv-post__thumb { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; }
.tv-post:not(.tv-post--lead) .tv-post__title { font-family: var(--ov-mincho); font-weight: 600; font-size: 17px; line-height: 1.6; letter-spacing: .02em; }
.tv-post:not(.tv-post--lead) .tv-post__meta { margin-bottom: 4px; }
/* テーマ */
.tv-themes { margin-top: 0; }
.tv-posts__k { margin-top: clamp(44px, 5.6vw, 72px); }
.tv-themes__k { font-size: 14px; font-weight: 700; letter-spacing: .2em; color: var(--ov-green); display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tv-themes__k::before { content: ""; width: 28px; height: 1px; background: var(--ov-green); }
.tv-themes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.tv-theme { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 6px; color: #fff; text-decoration: none; }
.tv-theme__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--tv-ease); }
.tv-theme:hover .tv-theme__bg { transform: scale(1.04); }
.tv-theme::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,12,11,.86) 0%, rgba(10,12,11,.3) 60%, rgba(10,12,11,.06) 100%); }
.tv-theme__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(18px, 2vw, 26px); display: grid; gap: 6px; }
.tv-theme__body b { font-family: var(--ov-mincho); font-weight: 600; font-size: clamp(22px, 2vw, 27px); letter-spacing: .04em; }
.tv-theme__body > span { font-size: 15px; line-height: 1.8; color: rgba(255,255,255,.88); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tv-theme__body > span span { display: inline; }
.tv-theme__body em { font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--ov-wheat); border-bottom: 1px solid rgba(226,215,176,.6); padding-bottom: 2px; justify-self: start; }
/* 市町から探す（LP の地図を使う。東京の点・線・縦書きの名前は出さず、記事のある市町を麦色で灯す） */
.tv-cities { margin-top: clamp(48px, 6vw, 84px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: "head head head head head head head head head head head head" "map map map map map map side side side side side side"; column-gap: var(--ov-g); row-gap: 24px; }
.tv-cities__head { grid-area: head; display: grid; gap: 10px; max-width: 44em; }
.tv-cities__map { grid-area: map; position: relative; background: var(--ov-green); border-radius: 6px; padding: clamp(12px, 2vw, 24px); overflow: hidden; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.tv-cities__map .ov-map__svg { width: 100%; height: auto; max-height: 100%; transform: scale(1.08); transform-origin: 50% 46%; }
.tv-cities__map :is(.ov-map__tokyo, .ov-map__route, .ov-map__lead, .ov-map__name, .ov-map__pin) { display: none; }
.tv-cities__map .ov-map__outer { stroke-dasharray: none; animation: none; }
.tv-cities__map .ov-map__inner, .tv-cities__map .ov-map__cities { animation: none; }
.tv-cities__map .ov-map__city { cursor: pointer; }
.tv-cities__map .ov-map__city.has-posts { stroke: transparent; stroke-width: 16px; vector-effect: non-scaling-stroke; paint-order: stroke; }
.tv-cities__lead-js--sp { display: none; }
.tv-cities__map .ov-map__city.has-posts { fill: rgba(226,215,176,.34); cursor: pointer; }
.tv-cities__map .ov-map__city.has-posts:hover, .tv-cities__map .ov-map__city.has-posts.is-hint { fill: rgba(226,215,176,.7); }
.tv-cities__map .ov-map__city.is-on { fill: var(--ov-wheat); filter: drop-shadow(0 0 calc(14px / var(--k, .7)) rgba(226,215,176,.6)); }
.tv-cities__side { grid-area: side; display: flex; flex-direction: column; gap: 14px; }
.tv-cities__foot { margin-top: auto; display: grid; gap: 6px; }
.tv-cities__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tv-cities__chip { appearance: none; min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--ov-green); background: #fff; color: var(--ov-green); font-family: var(--ov-gothic); font-size: 15px; font-weight: 700; letter-spacing: .04em; cursor: pointer; transition: background-color .2s, color .2s; }
.tv-cities__chip small { font-size: 14px; font-weight: 400; margin-left: 2px; }
.tv-cities__chip:hover { background: var(--ov-tint); }
.tv-cities__chip.is-on { background: var(--ov-green); color: #fff; }
.tv-cities__h { font-weight: 600; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.5; color: var(--ov-green); letter-spacing: .03em; }
.tv-cities__lead { font-size: 15px; line-height: 1.9; color: var(--ov-sub); }
.tv-cities__select { appearance: none; -webkit-appearance: none; width: 100%; max-width: 16em; min-height: 52px; padding: 10px 40px 10px 14px; border-radius: 4px; border: 1px solid var(--ov-green); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2317352a' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px; color: var(--ov-ink); font-family: var(--ov-gothic); font-size: 16px; cursor: pointer; }
.tv-cities__panel { min-height: 4em; }
.tv-cities__hint, .tv-cities__none { font-size: 15px; line-height: 1.9; color: var(--ov-sub); }
.tv-cities__sub { margin-top: 14px; font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--ov-green); }
.tv-cities__city { font-family: var(--ov-mincho); font-weight: 600; font-size: 20px; color: var(--ov-green); display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.tv-cities__city::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ov-wheat); box-shadow: 0 0 0 1px var(--ov-green); }
.tv-hero__pref .ov-mini__city { fill: currentColor; stroke: currentColor; }
.tv-cities__list { list-style: none; margin: 0; padding: 0; }
.tv-cities__list li { padding: 12px 0; border-top: 1px solid var(--ov-line); display: grid; gap: 2px; }
.tv-cities__list li:last-child { border-bottom: 1px solid var(--ov-line); }
.tv-cities__list a { font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--ov-green); text-decoration: none; }
.tv-cities__list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tv-cities__list time { font-size: 14px; color: var(--ov-sub); }
.tv-cities__all, .tv-cities__credit { font-size: 14px; line-height: 1.8; color: var(--ov-sub); }
.tv-cities__all a { color: var(--ov-green); font-weight: 700; }

/* ───────── 編集方針（縦書きの大見出しを右に立て、文章は左下に小さく） ───────── */
.tv-policy { position: relative; min-height: clamp(480px, 50vw, 680px); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: clamp(48px, 6vw, 88px) var(--ov-pad); column-gap: clamp(32px, 6vw, 120px); overflow: hidden; }
.tv-policy__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; z-index: -2; }
.tv-policy::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,12,11,.82) 0%, rgba(10,12,11,.42) 55%, rgba(10,12,11,.5) 100%); }
/* 縦書き: 2文は右から左へ2本の柱に並べる（flex にすると主軸が縦になり1本に繋がるので使わない） */
.tv-policy__v { grid-column: 2; align-self: start; writing-mode: vertical-rl; text-orientation: mixed; font-weight: 600; font-size: clamp(24px, 2.7vw, 40px); line-height: 1.5; letter-spacing: .12em; color: #fff; font-feature-settings: "palt"; }
.tv-policy__v span { display: block; }
.tv-policy__v span + span { margin-block-start: .5em; }
.tv-policy__note { grid-column: 1; display: grid; gap: 16px; justify-items: start; max-width: 32em; align-self: end; }
.tv-policy__k { color: var(--ov-wheat); }
.tv-policy__k::before { background: var(--ov-wheat); }
.tv-policy__note p { font-size: 16px; line-height: 2; color: rgba(255,255,255,.9); }
.tv-policy__note .ov-cap { font-size: 14px; }

/* ───────── 締め（冒頭の計算機の対。触った後だけ、右に同じ級数の数字が立つ） ───────── */
.tv-final { background: #fff; padding-block: var(--ov-sec); }
.tv-final__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(28px, 5vw, 96px); row-gap: 28px; align-items: center; }
.tv-final__main { display: grid; gap: 22px; justify-items: start; }
.tv:not(.is-own) .tv-final__num { opacity: .72; }
.tv-final h2 { font-weight: 600; font-size: clamp(26px, 3.2vw, 44px); line-height: 1.55; letter-spacing: .04em; color: var(--ov-green); max-width: 40em; }
.tv-final__text { font-size: 16px; line-height: 2; color: var(--ov-sub); max-width: 40em; }
.tv-final__act { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ov .tv-final__onsite { border-color: var(--ov-green); color: var(--ov-green); }
.ov .tv-final__onsite:hover { background: var(--ov-green); color: #fff; }
.tv-final__note { font-size: 14px; line-height: 1.8; color: var(--ov-sub); max-width: 44em; }
.tv-final__num { display: grid; gap: 6px; justify-items: start; padding: clamp(22px, 2.6vw, 34px); border: 1px solid var(--ov-line); border-left: 4px solid var(--ov-wheat); border-radius: 6px; background: var(--ov-tint); color: var(--ov-green); }
.tv-final__num-k { font-size: 14px; font-weight: 700; letter-spacing: .14em; color: var(--ov-sub); }
.tv-final__num-task { font-size: 16px; line-height: 1.6; }
.tv-final__num-task b { font-family: var(--ov-mincho); font-weight: 600; font-size: 20px; }
.tv-final__num-v { display: flex; align-items: baseline; gap: 8px; }
.tv-final__num-v b { font-family: var(--ov-mincho); font-weight: 800; font-size: clamp(56px, 5.6vw, 84px); line-height: 1; letter-spacing: -.02em; font-feature-settings: "palt"; font-variant-numeric: tabular-nums; }
.tv-final__num-v small { font-family: var(--ov-mincho); font-weight: 600; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: .06em; }
.tv-final__num-t { font-size: 15px; line-height: 1.7; }
.tv.is-own .tv-final__num :is([data-tv-echo-result], [data-tv-echo-task]) { background: none; padding: 0; }

/* ───────── 画面幅ごとの調整 ───────── */
@media (max-width: 1100px) {
  .tv-gate__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .tv-facts__in { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .tv-facts__read { grid-column: 1; }
  .tv-facts__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tv-hero__in { grid-template-columns: minmax(0, 1fr); min-height: 0; row-gap: 22px; align-items: start; }
  .tv-hero__copy { display: contents; }
  .tv-kicker { order: 1; } .tv-hero__title { order: 2; } .tv-hero__lead { order: 3; } .tv-calc { order: 4; } .tv-hero__actions { order: 5; } .tv-hero__sub { order: 6; }
  .tv-hero__pref { width: 120vw; right: -30vw; top: 30%; }
  .tv-sec__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "vh" "body"; }
  .tv-sec__vh { writing-mode: horizontal-tb; text-orientation: mixed; white-space: normal; position: static; font-size: clamp(25px, 5.6vw, 34px); line-height: 1.5; margin-bottom: 26px; font-feature-settings: "palt"; letter-spacing: .05em; }
  .tv-sec__vh .ov-tcy { display: inline; writing-mode: inherit; inline-size: auto; font-size: inherit; margin: 0; text-indent: 0; }
  .tv-sec__head { margin-bottom: 20px; }
  .tv-count__body .tv-lead, .tv-count__photo, .tv-steps, .tv-formula { grid-column: 1 / -1; }
  .tv-count__photo { aspect-ratio: 16 / 9; }
  .tv-env__list, .tv-env__stage { grid-column: 1 / -1; }
  .tv-env__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; align-self: start; border-top: 0; gap: 8px; }
  .tv-env__b { border: 1px solid var(--ov-line); border-radius: 4px; background: #fff; }
  .tv-env__b[aria-selected="true"] { border-color: var(--ov-green); box-shadow: inset 3px 0 0 var(--ov-green); }
  .tv-env__stage { min-height: 320px; }
  .tv-post--lead, .tv-post:not(.tv-post--lead) { grid-column: 1 / -1; grid-row: auto; }
  .tv-post--lead { margin-bottom: 8px; }
  .tv-cities { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "map" "side"; }
  .tv-final__in { grid-template-columns: minmax(0, 1fr); }
  .tv-cities__map { max-width: 520px; width: 100%; aspect-ratio: 4 / 3; scroll-margin-top: 0; }
  .tv-calc { scroll-margin-top: 0; }
  .tv-env__stage { padding-bottom: 62px; }
  .tv-cities__map .ov-map__svg { width: auto; height: 100%; max-width: 100%; }
  .tv-policy { grid-template-columns: minmax(0, 1fr); row-gap: 28px; align-items: start; min-height: 0; }
  .tv-policy__v { grid-column: 1; writing-mode: horizontal-tb; display: grid; gap: 0; font-size: clamp(25px, 5.4vw, 36px); line-height: 1.5; letter-spacing: .06em; }
  .tv-policy__note { grid-column: 1; }
  .tv-policy::before { background: linear-gradient(0deg, rgba(10,12,11,.88) 0%, rgba(10,12,11,.55) 60%, rgba(10,12,11,.3) 100%); }
}
@media (max-width: 760px) {
  body.tv-page .topbar { display: none; }
  .tv-themes__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tv-theme { aspect-ratio: auto; min-height: 0; }
  .tv-theme__body { position: relative; padding: 18px 18px 18px; }
  .tv-theme__body > span { display: none; }
  .tv-theme__body b { font-size: 21px; }
  .ov .tv-calc__cta { justify-self: stretch; width: 100%; }
  .tv-formula__live { font-size: 15px; }
  .tv-formula { grid-template-columns: minmax(0, 1fr); }
  .tv-theme { aspect-ratio: auto; }
  .tv-hero__lead-more { display: block; order: 3; font-size: 15px; line-height: 1.8; color: rgba(255,255,255,.84); }
  .tv-hero__lead { display: contents; }
  .tv-hero__lead b { order: 3; display: block; font-size: 16px; line-height: 1.9; }
  .tv-final__main { display: contents; }
  .tv-final h2 { order: 1; } .tv-final__text { order: 2; } .tv-final__num { order: 3; opacity: 1; } .tv-final__act { order: 4; } .tv-final__note { order: 5; }
  .tv-cities__lead-js--pc { display: none; } .tv-cities__lead-js--sp { display: inline; }
  .tv-hero__actions .ov-btn { width: 100%; }
  .tv-final__act { width: 100%; }
  .tv-final__act .ov-btn { width: 100%; }
}
@media (max-width: 600px) {
  .tv-hero__actions .ov-btn, .tv-final__act .ov-btn { padding-inline: 14px; min-width: 0; }
  .tv-gate__list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tv-gcard { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; }
  .tv-gcard__img { aspect-ratio: 16 / 7; }
  .tv-gcard__img--doc { padding: 10px 14px 0; }
  .tv-gcard__img--doc img { object-position: 50% 0; }
  .tv-gcard__label { padding: 14px 16px 0; }
  .tv-gcard__title { padding: 4px 16px 0; font-size: 19px; }
  .tv-gcard__text { padding: 8px 16px 0; font-size: 14px; line-height: 1.75; }
  .tv-gcard__echo { padding: 8px 16px 0; }
  .tv-gcard__more { padding: 12px 16px 16px; }
  .tv-gcard__n { width: 32px; height: 32px; font-size: 16px; left: 10px; top: 10px; }
  .tv-env__list { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tv-env__b { display: grid; gap: 2px; padding: 10px 12px; min-height: 48px; }
  .tv-env__env { font-size: 16px; }
  .tv .ov-bar { padding: 6px 16px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .tv .ov-bar .ov-btn { min-height: 46px; }
  .tv-post:not(.tv-post--lead) { grid-template-columns: 88px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html.ov-js .tv [data-tv-reveal] { opacity: 1; transform: none; transition: none; }
  .tv-gcard, .tv-theme__bg, .tv-gcard__more::after { transition: none; }
}
@media (max-width: 600px) {
  .tv-facts__list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tv-facts__list li { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: baseline; }
  .tv-facts__list li b { grid-row: 1 / span 2; font-size: clamp(26px, 8vw, 32px); }
  .tv-facts__list li span { grid-column: 2; }
  .tv-facts__list li em { grid-column: 2; }
}
