/* SHOWA GROUP様 競合分譲地ウォッチ（デモ）
   色・書体は https://www.showa-jutaku.co.jp/ の実測（primary #065bac / accent #c08a3e / Noto Sans JP + Poppins）
   箱（角丸カード・数字タイル・色ボタン）は使わず、罫線・余白・文字の大きさで組む */
:root {
  --p: #065bac; --p2: #3379bb; --pd: #054786; --pl: #dce8f3; --pbg: #f5f8fc;
  --a: #c08a3e; --ad: #a97937; --al: #f7f1e8;
  --ink: #2b2b2b; --sub: #555; --dim: #8a8a8a; --line: #cddeee; --line2: #e6edf5; --paper: #ffffff;
  --c-kanju: #a8453f; --c-yangu: #2f7d5b; --c-meiji: #7a5c99; --c-belle: #5f7784; --c-showa: #065bac;
  --en: 'Poppins', 'Noto Sans JP', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #fff; }
body { font-family: 'Noto Sans JP', -apple-system, 'Hiragino Sans', sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 975px; transform-origin: 0 0; background: var(--paper); overflow: hidden; }
.scr { position: absolute; inset: 0; display: none; background: var(--paper); }
.scr.on { display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font-family: inherit; color: inherit; }
.en { font-family: var(--en); letter-spacing: .08em; }

/* ---------- タイトル ---------- */
.title .l { position: absolute; left: 130px; top: 0; bottom: 0; width: 820px; display: flex; flex-direction: column; justify-content: center; }
.title .logo { width: 250px; margin-bottom: 64px; }
.title .kick { font-family: var(--en); font-size: 17px; letter-spacing: .32em; color: var(--p); font-weight: 500; }
.title .jk { font-size: 22px; font-weight: 500; margin-top: 14px; color: var(--sub); }
.title h1 { font-size: 70px; line-height: 1.32; font-weight: 700; margin-top: 30px; letter-spacing: .02em; }
.title h1 em { font-style: normal; color: var(--p); }
.title .sub { font-size: 24px; line-height: 1.85; margin-top: 34px; color: var(--sub); }
.title .note { font-size: 15px; color: var(--dim); margin-top: 46px; padding-top: 18px; border-top: 1px solid var(--line); width: 700px; line-height: 1.7; }
.title .by { position: absolute; left: 0; bottom: 56px; font-family: var(--en); font-size: 14px; letter-spacing: .3em; color: var(--dim); }
.title .r { position: absolute; right: 0; top: 0; bottom: 0; width: 860px; overflow: hidden; }
.title .r img { width: 100%; height: 100%; object-fit: cover; }
.title .r::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--p); }
.title.on .l > * { animation: up .9s cubic-bezier(.2,.7,.2,1) both; }
.title.on .l > *:nth-child(2) { animation-delay: .12s } .title.on .l > *:nth-child(3) { animation-delay: .2s } .title.on .l > *:nth-child(4) { animation-delay: .32s } .title.on .l > *:nth-child(5) { animation-delay: .5s } .title.on .l > *:nth-child(6) { animation-delay: .7s }
.title.on .r img { animation: zoom 9s ease-out both; }
@keyframes up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

/* ---------- いま ---------- */
.before .l { position: absolute; left: 130px; top: 0; bottom: 0; width: 640px; display: flex; flex-direction: column; justify-content: center; }
.before .kick { font-family: var(--en); font-size: 17px; letter-spacing: .32em; color: var(--a); font-weight: 500; }
.before h2 { font-size: 64px; font-weight: 700; margin-top: 18px; }
.before p { font-size: 34px; line-height: 1.7; margin-top: 36px; font-weight: 500; }
.before .s { font-size: 21px; line-height: 1.9; color: var(--sub); margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.before .r { position: absolute; left: 860px; right: 90px; top: 110px; bottom: 110px; }
.win { position: absolute; width: 760px; height: 470px; background: #fff; border: 1px solid #c9ced6; box-shadow: 0 18px 40px rgba(20,40,70,.16); overflow: hidden; }
.win .bar { height: 42px; background: #eef1f5; border-bottom: 1px solid #d5dae1; display: flex; align-items: center; padding: 0 16px; gap: 8px; }
.win .bar i { width: 11px; height: 11px; border-radius: 50%; background: #cfd4db; }
.win .bar span { margin-left: 16px; flex: 1; height: 26px; background: #fff; border: 1px solid #d5dae1; font-size: 14px; line-height: 24px; padding: 0 12px; color: #555; font-family: var(--en); letter-spacing: .02em; }
.win .pg { padding: 26px 30px; }
.win .pg .h { font-size: 22px; font-weight: 700; }
.win .pg .ln { height: 12px; background: #eceff3; margin-top: 16px; }
.win .pg .gr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.win .pg .gr div { height: 120px; background: #e8ecf1; }
.win .pg .gr div:nth-child(2n) { background: #dfe5ec; }
.win .pg .pr { margin-top: 18px; font-size: 18px; color: #555; }
.win .pg .pr b { color: var(--a); font-size: 22px; }
.before.on .win { animation: up .7s both; }
.before.on .win:nth-child(2) { animation-delay: .6s } .before.on .win:nth-child(3) { animation-delay: 1.2s } .before.on .win:nth-child(4) { animation-delay: 1.8s } .before.on .win:nth-child(5) { animation-delay: 2.4s }
.before .memo { position: absolute; right: 0; bottom: -40px; width: 380px; background: #fffdf3; border: 1px solid #e8dfc2; padding: 22px 26px; font-size: 18px; line-height: 1.9; box-shadow: 0 10px 24px rgba(0,0,0,.1); transform: rotate(-2deg); }
.before .memo b { display: block; font-size: 15px; color: var(--a); letter-spacing: .1em; margin-bottom: 4px; }
.before.on .memo { animation: up .7s 3.3s both; }

/* ---------- アプリ共通の上端 ---------- */
.app .top { position: absolute; left: 0; right: 0; top: 0; height: 76px; display: flex; align-items: center; padding: 0 40px; border-bottom: 1px solid var(--line); background: #fff; z-index: 20; }
.app .top img { height: 30px; }
.app .top .nm { margin-left: 26px; padding-left: 26px; border-left: 1px solid var(--line); font-size: 21px; font-weight: 700; letter-spacing: .04em; }
.app .top .nm small { font-size: 13px; font-weight: 500; color: var(--dim); margin-left: 12px; letter-spacing: .06em; }
.app .top nav { margin-left: 56px; display: flex; gap: 40px; height: 100%; }
.app .top nav a { display: flex; align-items: center; font-size: 16px; font-weight: 500; color: var(--sub); border-bottom: 3px solid transparent; padding-top: 3px; cursor: pointer; }
.app .top nav a.on { color: var(--p); border-bottom-color: var(--p); }
.app .top .upd { margin-left: auto; text-align: right; font-size: 14px; color: var(--sub); line-height: 1.45; }
.app .top .upd b { display: block; font-size: 17px; color: var(--ink); font-weight: 700; }
.app .top .upd b i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3a9a63; margin-right: 8px; vertical-align: 2px; }
.app .top .demo { margin-left: 26px; font-size: 12.5px; color: var(--dim); border-left: 1px solid var(--line); padding-left: 20px; line-height: 1.5; }

/* ---------- ウォッチ画面 ---------- */
.wt .side { position: absolute; left: 0; top: 76px; bottom: 0; width: 330px; border-right: 1px solid var(--line); padding: 22px 30px; overflow: hidden; background: #fff; z-index: 10; }
.wt .side .eh { font-family: var(--en); font-size: 12.5px; letter-spacing: .28em; color: var(--p); font-weight: 500; }
.wt .side .jh { font-size: 23px; font-weight: 700; margin-top: 4px; }
.fg { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line2); }
.fg .k { font-size: 13.5px; color: var(--dim); font-weight: 500; letter-spacing: .06em; margin-bottom: 8px; display: flex; justify-content: space-between; }
.fg .k a { color: var(--p); cursor: pointer; font-size: 12.5px; }
.chk { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.chk label { display: flex; align-items: center; font-size: 16px; cursor: pointer; padding: 3px 0; user-select: none; }
.chk label i { width: 17px; height: 17px; border: 1.5px solid #9fb3c8; margin-right: 8px; position: relative; flex: none; background: #fff; }
.chk label.on i { background: var(--p); border-color: var(--p); }
.chk label.on i::after { content: ''; position: absolute; left: 4.5px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.chk label .dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; flex: none; }
.chk label small { color: var(--dim); font-size: 13px; margin-left: 6px; font-family: var(--en); }
.chk.co label { width: 100%; }
.st { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; font-size: 16px; }
.st select, .st input, .pr input { border: none; border-bottom: 1.5px solid #9fb3c8; font-size: 18px; padding: 4px 2px; background: transparent; outline: none; }
.st select { width: 100%; font-weight: 500; margin-bottom: 6px; }
.st input { width: 54px; text-align: center; font-family: var(--en); font-weight: 500; }
.st select:focus, .st input:focus, .pr input:focus { border-bottom-color: var(--p); }
.pr { display: flex; align-items: flex-end; gap: 8px; font-size: 16px; }
.pr input { width: 82px; text-align: right; font-family: var(--en); font-weight: 500; }
.tg { display: flex; align-items: center; gap: 12px; font-size: 16px; cursor: pointer; user-select: none; }
.tg u { width: 42px; height: 22px; border-radius: 11px; background: #cfd8e3; position: relative; transition: background .2s; flex: none; }
.tg u::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .2s; }
.tg.on u { background: var(--a); } .tg.on u::after { left: 23px; }
.tg small { color: var(--dim); font-size: 13px; }
.wt .side .src { margin-top: 18px; font-size: 12px; color: var(--dim); line-height: 1.7; border-top: 1px solid var(--line2); padding-top: 12px; }

.wt .mapw { position: absolute; left: 330px; top: 76px; width: 760px; bottom: 0; }
#map { position: absolute; inset: 0; background: #eef2f5; }
.wt .mapw .lg { position: absolute; left: 18px; bottom: 18px; z-index: 500; background: rgba(255,255,255,.94); padding: 12px 16px; font-size: 13.5px; line-height: 1.9; border-left: 3px solid var(--p); }
.wt .mapw .lg span { display: inline-flex; align-items: center; margin-right: 14px; }
.wt .mapw .lg span i { width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.wt .mapw .lg .ne { color: var(--ad); }
.wt .mapw .att { position: absolute; right: 8px; bottom: 6px; z-index: 500; font-size: 11px; color: #666; background: rgba(255,255,255,.8); padding: 1px 6px; }
.wt .mapw .geo { position: absolute; right: 12px; top: 12px; z-index: 500; font-size: 12px; color: var(--dim); background: rgba(255,255,255,.9); padding: 4px 10px; }
.mk { border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); transition: transform .2s, opacity .3s; }
.mk.fade { opacity: .18; }
.mk-wrap.hot .mk { box-shadow: 0 0 0 3px var(--a), 0 1px 4px rgba(0,0,0,.35); }
.mk-wrap.hot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid var(--a); animation: ring 1.6s ease-out infinite; }
.mk-wrap.sel .mk { transform: scale(1.7); }
@keyframes ring { from { transform: scale(1); opacity: 1; } to { transform: scale(3.4); opacity: 0; } }
.leaflet-tooltip.tt { font-family: 'Noto Sans JP', sans-serif; font-size: 13px; border-radius: 0; border: 1px solid var(--line); box-shadow: 0 4px 10px rgba(0,0,0,.12); padding: 6px 10px; }

.wt .main { position: absolute; left: 1090px; right: 0; top: 76px; bottom: 0; background: #fff; }
.wt .mh { display: flex; align-items: flex-end; padding: 22px 32px 14px; border-bottom: 1px solid var(--line); }
.wt .mh .t { font-size: 15px; color: var(--sub); }
.wt .mh .t b { font-family: var(--en); font-size: 44px; font-weight: 500; color: var(--ink); margin-right: 6px; line-height: 1; letter-spacing: 0; }
.wt .mh .t .of { margin-left: 10px; color: var(--dim); }
.wt .mh .cond { margin-left: 22px; font-size: 14px; color: var(--p); line-height: 1.6; padding-bottom: 3px; flex: 1; }
.wt .mh .vw { margin-left: auto; display: flex; gap: 22px; font-size: 15px; font-weight: 500; }
.wt .mh .vw a { color: var(--dim); cursor: pointer; padding-bottom: 4px; border-bottom: 2px solid transparent; white-space: nowrap; }
.wt .mh .vw a.on { color: var(--p); border-bottom-color: var(--p); }
.lh, .lr { display: grid; grid-template-columns: 112px 1fr 128px 158px 88px; gap: 0 14px; align-items: center; padding: 0 32px; }
.lh { font-size: 12.5px; color: var(--dim); height: 36px; border-bottom: 1px solid var(--line2); letter-spacing: .05em; }
.lh span:nth-child(4), .lr .pc { text-align: right; }
.rows { position: absolute; left: 0; right: 0; top: 141px; bottom: 0; overflow-y: auto; scrollbar-width: none; }
.rows::-webkit-scrollbar { display: none; }
.lr { min-height: 70px; border-bottom: 1px solid var(--line2); cursor: pointer; transition: background .2s; position: relative; }
.lr:hover, .lr.hv { background: var(--pbg); }
.lr.sel { background: var(--pl); }
.lr .co { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; line-height: 1.35; }
.lr .co i { width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; flex: none; }
.lr .nm { font-size: 16.5px; font-weight: 700; line-height: 1.4; padding: 10px 0; }
.lr .nm small { display: block; font-size: 13px; font-weight: 400; color: var(--sub); margin-top: 2px; }
.lr .nm .bd { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 7px; margin-left: 8px; vertical-align: 2px; letter-spacing: .04em; }
.bd.nw { background: var(--a); color: #fff; }
.bd.pcg { background: #fff; color: var(--ad); border: 1px solid var(--a); }
.bd.smp { background: #eee; color: #777; }
.lr .sta { font-size: 14px; line-height: 1.45; }
.lr .sta b { font-family: var(--en); font-size: 17px; font-weight: 500; }
.lr .sta span { color: var(--dim); font-size: 12.5px; display: block; }
.lr .pc { font-family: var(--en); font-size: 17px; font-weight: 500; line-height: 1.35; }
.lr .pc small { font-family: 'Noto Sans JP'; font-size: 12px; font-weight: 400; color: var(--sub); }
.lr .pc .no { font-family: 'Noto Sans JP'; font-size: 12.5px; color: var(--ad); font-weight: 500; line-height: 1.45; display: block; }
.lr .pc .was { display: block; font-size: 12.5px; color: var(--dim); text-decoration: line-through; }
.lr .lt { font-size: 13.5px; color: var(--sub); line-height: 1.45; text-align: right; }
.lr .lt b { font-family: var(--en); font-weight: 500; color: var(--ink); font-size: 16px; }
.lr.hot::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--a); }
.lr.hot { animation: glow 1.8s ease-in-out 2; }
@keyframes glow { 0%, 100% { background: #fff; } 50% { background: var(--al); } }
.lr.enter { animation: fade .5s both; }
.empty { padding: 60px 32px; color: var(--dim); font-size: 17px; line-height: 1.8; }

/* 会社 × エリア */
.mx { position: absolute; left: 0; right: 0; top: 104px; bottom: 0; padding: 26px 32px; display: none; }
.mx.on { display: block; }
.mx table { width: 100%; border-collapse: collapse; }
.mx th, .mx td { border-bottom: 1px solid var(--line2); height: 64px; text-align: center; font-size: 15px; }
.mx thead th { font-size: 14px; color: var(--sub); font-weight: 500; height: 46px; border-bottom: 1.5px solid var(--ink); }
.mx tbody th { text-align: left; font-weight: 700; font-size: 15px; }
.mx tbody th i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
.mx td { font-family: var(--en); font-size: 26px; font-weight: 400; position: relative; }
.mx td .bg { position: absolute; left: 10%; right: 10%; bottom: 12px; height: 4px; background: var(--pl); }
.mx td .bg u { position: absolute; left: 0; top: 0; bottom: 0; background: var(--p); }
.mx td.z { color: #c9d2dc; }
.mx td small { font-size: 11.5px; color: var(--ad); font-family: 'Noto Sans JP'; position: absolute; right: 8px; top: 6px; }
.mx .tot td, .mx .tot th { border-bottom: none; border-top: 1.5px solid var(--ink); font-weight: 500; }
.mx .ft { margin-top: 18px; font-size: 13.5px; color: var(--dim); line-height: 1.8; }
.mx .fail { margin-top: 12px; font-size: 14px; color: var(--c-kanju); }

/* 物件の詳細（右から） */
.drawer { position: absolute; right: 0; top: 76px; bottom: 0; width: 830px; background: #fff; border-left: 1px solid var(--line); box-shadow: -14px 0 30px rgba(20,40,70,.1); transform: translateX(105%); transition: transform .45s cubic-bezier(.2,.7,.2,1); z-index: 30; padding: 30px 40px; }
.drawer.on { transform: none; }
.drawer .x { position: absolute; right: 30px; top: 26px; font-size: 14px; color: var(--sub); cursor: pointer; border-bottom: 1px solid var(--sub); }
.drawer .co { font-size: 15px; font-weight: 700; display: flex; align-items: center; }
.drawer .co i { width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
.drawer h3 { font-size: 32px; font-weight: 700; margin-top: 8px; line-height: 1.35; }
.drawer .ad { font-size: 16px; color: var(--sub); margin-top: 6px; }
.drawer .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: 26px; }
.drawer .two > div { border-top: 2px solid var(--ink); padding-top: 14px; }
.drawer .two > div.pt { border-top-color: var(--a); }
.drawer .cap { font-size: 13px; letter-spacing: .1em; color: var(--dim); font-weight: 500; }
.drawer .cap b { display: block; font-size: 19px; color: var(--ink); letter-spacing: .02em; margin-top: 2px; }
.drawer dl { display: grid; grid-template-columns: 100px 1fr; border-bottom: 1px solid var(--line2); padding: 11px 0; font-size: 15.5px; line-height: 1.55; }
.drawer dt { color: var(--dim); font-size: 14px; }
.drawer dd b { font-family: var(--en); font-weight: 500; font-size: 19px; }
.drawer dd .no { color: var(--ad); font-weight: 700; }
.drawer .lk { display: inline-block; margin-top: 14px; font-size: 15px; color: var(--p); border-bottom: 1px solid var(--p); cursor: pointer; }
.drawer .pl a { display: block; font-size: 15px; color: var(--p); padding: 10px 0; border-bottom: 1px solid var(--line2); }
.drawer .pl a::after { content: '→'; float: right; color: var(--dim); }
.drawer .inp { margin-top: 18px; }
.drawer .inp .k { font-size: 14px; color: var(--sub); }
.drawer .inp .row { display: flex; align-items: flex-end; gap: 10px; margin-top: 8px; }
.drawer .inp input { border: none; border-bottom: 1.5px solid #9fb3c8; font-size: 24px; width: 160px; padding: 4px 2px; font-family: var(--en); text-align: right; outline: none; }
.drawer .inp input.url { font-size: 14px; width: 100%; text-align: left; font-family: 'Noto Sans JP'; margin-top: 10px; }
.drawer .inp input:focus { border-bottom-color: var(--a); }
.drawer .inp .sv { margin-left: 10px; font-size: 15px; font-weight: 700; color: var(--ad); border-bottom: 1.5px solid var(--a); cursor: pointer; padding-bottom: 2px; }
.drawer .inp .saved { margin-top: 12px; font-size: 14px; color: var(--sub); line-height: 1.7; min-height: 48px; }
.drawer .inp .saved b { color: var(--ink); font-family: var(--en); font-size: 18px; font-weight: 500; }
.drawer .cmp { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.8; color: var(--sub); }
.drawer .cmp b { color: var(--ink); }
.drawer .gt { font-size: 12.5px; color: var(--dim); margin-top: 14px; }

/* 取得の実行（早送り表示） */
.run { position: absolute; left: 1090px; right: 0; top: 76px; bottom: 0; background: #fff; z-index: 25; padding: 44px 52px; display: none; }
.run.on { display: block; }
.run .rh { display: flex; align-items: baseline; gap: 24px; }
.run .clk { font-family: var(--en); font-size: 60px; font-weight: 300; }
.run .rt { font-size: 22px; font-weight: 700; }
.run .bar { height: 3px; background: var(--line2); margin-top: 20px; position: relative; overflow: hidden; }
.run .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--a); transition: width .5s linear; }
.run .s { display: grid; grid-template-columns: 30px 1fr 170px; align-items: center; font-size: 18px; padding: 15px 0; border-bottom: 1px solid var(--line2); color: #b7c2cf; transition: color .3s; }
.run .s .ic { width: 16px; height: 16px; border: 1.5px solid #c9d3de; border-radius: 50%; }
.run .s .rs { text-align: right; font-size: 15px; font-family: var(--en); opacity: 0; transition: opacity .3s; }
.run .s.doing { color: var(--ink); }
.run .s.doing .ic { border-color: var(--a); border-top-color: transparent; animation: spin .8s linear infinite; }
.run .s.done { color: var(--ink); }
.run .s.done .ic { background: var(--p); border-color: var(--p); }
.run .s.done .rs { opacity: 1; color: var(--p); }
.run .s.ng .rs { opacity: 1; color: var(--c-kanju); font-family: 'Noto Sans JP'; font-size: 13.5px; }
.run .ffw { margin-top: 24px; font-size: 14px; color: var(--dim); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 閲覧の記録（宿題③） ---------- */
.vw3 .l { position: absolute; left: 0; top: 76px; bottom: 0; width: 560px; border-right: 1px solid var(--line); padding: 44px 50px; }
.vw3 .l .eh { font-family: var(--en); font-size: 13px; letter-spacing: .28em; color: var(--p); font-weight: 500; }
.vw3 .l h2 { font-size: 31px; line-height: 1.45; margin-top: 10px; }
.vw3 .l .ld { font-size: 17px; line-height: 1.9; color: var(--sub); margin-top: 20px; }
.vw3 .l ol { list-style: none; margin-top: 30px; counter-reset: n; }
.vw3 .l li { counter-increment: n; display: grid; grid-template-columns: 50px 1fr; padding: 16px 0; border-top: 1px solid var(--line2); font-size: 17px; line-height: 1.6; font-weight: 500; }
.vw3 .l li::before { content: '0' counter(n); font-family: var(--en); color: var(--a); font-size: 20px; }
.vw3 .l li span { display: block; font-size: 14px; color: var(--dim); font-weight: 400; }
.vw3 .l .nt { position: absolute; left: 50px; right: 50px; bottom: 30px; font-size: 13px; color: var(--dim); line-height: 1.7; border-top: 1px solid var(--line2); padding-top: 12px; }
.vw3 .c { position: absolute; left: 560px; top: 76px; bottom: 0; width: 620px; border-right: 1px solid var(--line); }
.vw3 .c .hd { padding: 26px 34px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; }
.vw3 .c .hd b { font-size: 20px; }
.vw3 .c .hd span { margin-left: auto; font-size: 13px; color: var(--dim); }
.vr { display: grid; grid-template-columns: 1fr 150px 90px; padding: 16px 34px; border-bottom: 1px solid var(--line2); cursor: pointer; align-items: center; transition: background .2s; }
.vr:hover { background: var(--pbg); } .vr.on { background: var(--pl); }
.vr .n { font-size: 18px; font-weight: 700; }
.vr .n small { display: block; font-size: 13px; color: var(--sub); font-weight: 400; margin-top: 2px; }
.vr .w { font-size: 14px; color: var(--sub); }
.vr .m { font-family: var(--en); font-size: 20px; text-align: right; }
.vr .m small { font-size: 12px; font-family: 'Noto Sans JP'; color: var(--dim); }
.vr .hot { color: var(--ad); font-size: 12.5px; font-weight: 700; display: block; }
.vw3 .r { position: absolute; left: 1180px; right: 0; top: 76px; bottom: 0; padding: 30px 44px; }
.vw3 .r .who { font-size: 28px; font-weight: 700; }
.vw3 .r .who small { font-size: 14px; color: var(--dim); font-weight: 400; margin-left: 12px; }
.vw3 .r .meta { font-size: 15px; color: var(--sub); margin-top: 6px; }
.tlv { margin-top: 22px; border-left: 2px solid var(--line); margin-left: 6px; }
.tlv .e { position: relative; padding: 0 0 16px 26px; }
.tlv .e::before { content: ''; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--p); }
.tlv .e.q::before { background: var(--a); border-color: var(--a); }
.tlv .e .d { font-size: 13.5px; color: var(--dim); font-family: var(--en); }
.tlv .e .p { font-size: 16.5px; font-weight: 500; margin-top: 2px; line-height: 1.5; }
.tlv .e .p span { font-family: var(--en); color: var(--p); margin-left: 8px; font-weight: 500; }
.tlv .e.on { animation: up .5s both; }
.vw3 .r .next { margin-top: 10px; padding-top: 16px; border-top: 2px solid var(--a); font-size: 16px; line-height: 1.8; }
.vw3 .r .next b { display: block; font-size: 13px; color: var(--ad); letter-spacing: .1em; }

/* ---------- おわり ---------- */
.close .in { position: absolute; left: 150px; right: 150px; top: 0; bottom: 70px; display: flex; flex-direction: column; justify-content: center; }
.close .kick { font-family: var(--en); font-size: 17px; letter-spacing: .32em; color: var(--p); }
.close h2 { font-size: 56px; margin-top: 16px; font-weight: 700; }
.close .need { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 60px; margin-top: 56px; }
.close .need .i { border-top: 2px solid var(--ink); padding-top: 22px; opacity: 0; transform: translateY(16px); transition: all .6s; }
.close .need .i.on { opacity: 1; transform: none; }
.close .need .n { font-family: var(--en); font-size: 22px; color: var(--a); }
.close .need .t { font-size: 29px; font-weight: 700; margin-top: 10px; }
.close .need .s { font-size: 18.5px; line-height: 1.85; color: var(--sub); margin-top: 14px; }
.close .msg { margin-top: 64px; font-size: 32px; line-height: 1.7; font-weight: 500; opacity: 0; transition: opacity .8s; }
.close .msg em { font-style: normal; color: var(--p); font-weight: 700; }
.close .msg.on { opacity: 1; }
.close .ft { position: absolute; left: 150px; right: 150px; bottom: 44px; font-size: 15px; color: var(--dim); border-top: 1px solid var(--line); padding-top: 16px; display: flex; justify-content: space-between; }
.close .ft img { height: 22px; }

.toast { position: absolute; right: 40px; bottom: 40px; transform: translate(0, 30px); background: var(--ink); color: #fff; font-size: 16px; padding: 14px 26px; opacity: 0; transition: all .35s; z-index: 60; pointer-events: none; }
.toast.on { opacity: 1; transform: none; }
.toast i { color: var(--a); font-style: normal; margin-right: 10px; }

.lr.calm::before { display: none; } .lr.calm { animation: none; }
.fg .nt { font-size: 12px; color: var(--dim); margin-top: 8px; line-height: 1.6; }

.after .r.ph { left: 900px; right: 0; top: 0; bottom: 0; overflow: hidden; }
.after .r.ph img { width: 100%; height: 100%; object-fit: cover; }
.after .r.ph::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--p); }
.after .cap2 { position: absolute; left: 56px; bottom: 56px; background: rgba(255,255,255,.95); padding: 20px 28px; font-size: 20px; font-weight: 500; border-left: 4px solid var(--a); }
.after .cap2 b { font-family: var(--en); font-size: 34px; font-weight: 400; margin-right: 16px; color: var(--p); vertical-align: -3px; }
.after .kick { color: var(--p); }
.after.on .r img { animation: zoom 9s ease-out both; }
.after.on .cap2 { animation: up .7s 1s both; }

.clbl span { position: absolute; left: 0; bottom: 6px; transform: translateX(-50%); white-space: nowrap; background: #fff; border: 1px solid var(--p); color: var(--p); font-size: 13.5px; font-weight: 700; padding: 4px 10px; }
.stmk i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; background: #fff; border: 3px solid var(--ink); }

/* 画面送りのボタン */
#pager{position:fixed;right:18px;bottom:16px;z-index:9999;display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.94);border-top:1px solid #065bac;box-shadow:0 2px 10px rgba(0,0,0,.08);font-family:Poppins,'Noto Sans JP',sans-serif;user-select:none}
#pager a{display:block;padding:8px 16px;font-size:18px;color:#065bac;cursor:pointer;line-height:1}
#pager a:hover{background:#dce8f3}
#pager span{font-size:12px;letter-spacing:.08em;color:#6e6e6e;min-width:44px;text-align:center}
#pager.first a[data-p="-1"],#pager.last a[data-p="1"]{opacity:.25;pointer-events:none}