/* ============================================================
   /tanren/ — パフォーマンス評価アプリ TANREN（旧 tanren.jp からの移植）
   色と余白は tokens.css の変数だけで決める。生の16進数は書かない。
   ライトが既定、data-theme="dark" でも読める。
   ============================================================ */

.tn-body{background:var(--bg);color:var(--text);font-family:var(--font)}
/* lp.css の main{overflow:hidden} は position:sticky を殺すので、ここで戻す */
.tn-main{padding-top:74px;overflow:visible}
.tn-inner{max-width:var(--max);margin:0 auto;padding:0 max(24px,calc((100vw - var(--max))/2))}

/* ---------- ヒーロー ---------- */
.tn-hero{position:relative;padding:58px 0 40px;background:var(--bg);border-bottom:1px solid var(--line)}
.tn-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent);pointer-events:none}
:root[data-theme="dark"] .tn-hero:before{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
.tn-hero .tn-inner{position:relative;z-index:1}
.tn-kicker{display:flex;align-items:center;gap:10px;margin:0 0 18px;font:800 11px var(--font-mono);letter-spacing:.18em;color:var(--brand)}
.tn-kicker i{width:28px;height:2px;background:var(--brand)}
.tn-kicker span{border:1px solid var(--line-strong);color:var(--text-muted);padding:5px 9px;letter-spacing:.06em}
.tn-h1{margin:0;font-size:clamp(30px,4.4vw,52px);line-height:1.18;letter-spacing:-.035em;font-weight:900}
.tn-heroLead{max-width:74ch;margin:20px 0 0;font-size:15px;line-height:2;color:var(--text-2);border-left:3px solid var(--brand);padding-left:16px}

/* ---------- ゾーン内サブナビ ---------- */
.tn-zonenav{position:sticky;top:74px;z-index:20;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.tn-zonenavInner{max-width:var(--max);margin:0 auto;padding:0 max(24px,calc((100vw - var(--max))/2));display:flex;gap:2px;overflow-x:auto;scrollbar-width:thin}
.tn-zonenav a{flex:none;padding:14px 14px;font-size:12.5px;font-weight:700;color:var(--text-2);white-space:nowrap;border-bottom:2px solid transparent}
.tn-zonenav a:hover{color:var(--brand)}
.tn-zonenav a[aria-current="page"]{color:var(--brand);border-bottom-color:var(--brand)}

/* ---------- セクション ---------- */
.tn-sec{padding:56px 0;border-bottom:1px solid var(--line)}
.tn-sec:last-of-type{border-bottom:0}
.tn-sec--sunken{background:var(--surface-2)}
.tn-sec--brandsoft{background:var(--brand-weak)}
/* 旧サイトの背景画像をそのまま敷く。暗い画像のときだけ文字を白へ倒す。 */
/* 背景画像の上でも本文が読めるよう、地色の薄幕を1枚かぶせてから文字を載せる。
   薄幕は --bg なので、明るい配色では白っぽく、暗い配色では黒っぽくなる。 */
.tn-sec--bgimg{background-image:linear-gradient(var(--tn-scrim),var(--tn-scrim)),var(--tn-bg);background-size:cover;background-position:center;background-repeat:no-repeat;--tn-scrim:color-mix(in srgb,var(--bg) 80%,transparent)}
.tn-sec--onDark{--tn-scrim:color-mix(in srgb,#090a0d 55%,transparent)}
.tn-sec--onDark{color:var(--text-inv)}
.tn-sec--onDark .tn-h,.tn-sec--onDark .tn-rt,.tn-sec--onDark .tn-rt strong,.tn-sec--onDark .tn-rt p{color:var(--text-inv)}
.tn-sec--onDark .tn-rt a{color:var(--brand-soft)}
.tn-sec--onDark .tn-chips li span,.tn-sec--onDark .tn-chips li a{border-color:var(--line-inv);color:var(--text-inv)}
.tn-sec--onDark .tn-btn{border-color:var(--text-inv);background:transparent;color:var(--text-inv)}

/* lp.css のナビ・スマホメニューは明るい地を直接書いているので、暗い配色のときだけ上書きする */
:root[data-theme="dark"] .tn-body .nav{background:rgba(9,10,13,.92);border-bottom-color:var(--line)}
:root[data-theme="dark"] .tn-body .mobileMenu{background:rgba(9,10,13,.97)}
:root[data-theme="dark"] .tn-body .navCta{background:var(--brand-fill);color:var(--text-inv)!important}
.tn-sec--part{padding:44px 0 0;border-bottom:0}
.tn-secKicker{margin:0 0 10px;font:800 10px var(--font-mono);letter-spacing:.18em;color:var(--brand)}
.tn-h--part{font-size:clamp(24px,3vw,34px);border-top:3px solid var(--brand);padding-top:16px}

/* ---------- 行と段 ---------- */
.tn-row{display:grid;gap:28px 34px;align-items:start;margin:0 0 34px}
.tn-row:last-child{margin-bottom:0}
.tn-row--1{grid-template-columns:1fr}
.tn-row--2,.tn-row--3,.tn-row--4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.tn-row--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tn-row--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tn-row--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tn-row--rev{direction:rtl}
.tn-row--rev>.tn-col{direction:ltr}
.tn-col{min-width:0}
.tn-col>*:first-child{margin-top:0}
.tn-col>*:last-child{margin-bottom:0}

/* ---------- 見出しと本文 ---------- */
.tn-h{scroll-margin-top:130px;letter-spacing:-.02em;font-weight:800;line-height:1.4}
h2.tn-h{margin:0 0 20px;font-size:clamp(22px,2.8vw,32px)}
h3.tn-h{margin:0 0 14px;font-size:clamp(17px,2vw,21px)}
h4.tn-h,h5.tn-h{margin:0 0 10px;font-size:16px}
h2.tn-h+.tn-rt,h3.tn-h+.tn-rt{margin-top:0}

.tn-rt{margin:0 0 18px;font-size:15px;line-height:2;color:var(--text-2)}
.tn-rt>*:first-child{margin-top:0}
.tn-rt>*:last-child{margin-bottom:0}
.tn-rt p{margin:0 0 14px}
.tn-rt strong{color:var(--text);font-weight:800}
.tn-rt a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.tn-rt h2,.tn-rt h3,.tn-rt h4{color:var(--text);font-weight:800;line-height:1.5;margin:24px 0 12px;letter-spacing:-.015em}
.tn-rt h2{font-size:21px}
.tn-rt h3{font-size:17px}
.tn-rt h4{font-size:15px}
.tn-rt ul,.tn-rt ol{margin:0 0 14px;padding-left:1.35em}
.tn-rt li{margin:0 0 8px}
.tn-rt li::marker{color:var(--brand)}
.tn-rt img{display:block;max-width:100%;height:auto;margin:16px 0;border:1px solid var(--line)}
.tn-rt blockquote{margin:16px 0;padding:4px 0 4px 16px;border-left:3px solid var(--brand);color:var(--text-2)}
.tn-rt code{font-family:var(--font-mono);font-size:.92em;background:var(--surface-2);padding:2px 5px}
.tn-rt--check{font-weight:800;color:var(--text);font-size:16px;border-left:3px solid var(--brand);padding-left:12px}
.tn-rt--check em{font-style:normal}

/* 表 */
.tn-rt table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13.5px;line-height:1.75;display:block;overflow-x:auto}
.tn-rt th,.tn-rt td{border:1px solid var(--line-strong);padding:9px 11px;text-align:left;vertical-align:top;min-width:9em}
.tn-rt th{background:var(--surface-2);color:var(--text);font-weight:800}
.tn-rt td p:last-child,.tn-rt th p:last-child{margin-bottom:0}
.tn-rt td ul,.tn-rt td ol{margin-bottom:0}

/* ---------- 画像 ---------- */
.tn-fig{margin:0 0 20px}
.tn-fig--center{margin-left:auto;margin-right:auto}
.tn-fig img{display:block;width:100%;height:auto;border:1px solid var(--line);background:var(--surface)}
.tn-row--4 .tn-fig img,.tn-row--3 .tn-fig img{border:0;background:none}

/* ---------- ボタン ---------- */
.tn-btnwrap{margin:0 0 18px}
.tn-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-width:220px;padding:15px 18px;border:1px solid var(--ink);background:var(--surface);color:var(--text);font-size:13px;font-weight:800;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.tn-btn:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--ink)}
.tn-btn--primary{background:var(--brand-fill);border-color:var(--brand-fill);color:var(--brand-ink)}
.tn-btn--ghost{background:transparent}
:root[data-theme="dark"] .tn-btn{border-color:var(--line-strong)}

/* ---------- 動画 ---------- */
.tn-video{position:relative;margin:0 0 20px;aspect-ratio:16/9;background:var(--ink);border:1px solid var(--line)}
.tn-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- アイコン ---------- */
.tn-icon{margin:0 0 12px;color:var(--brand)}
.tn-icon svg{width:38px;height:38px}

/* ---------- 目次チップ（旧タブの見出し） ---------- */
.tn-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;list-style:none}
.tn-chips li span,.tn-chips li a{display:inline-block;padding:9px 14px;border:1px solid var(--line-strong);font-size:12.5px;font-weight:700;color:var(--text-2)}
.tn-chips li a:hover{border-color:var(--brand);color:var(--brand)}

.tn-hr{border:0;border-top:1px solid var(--line-strong);margin:28px 0}

/* ---------- FAQ ---------- */
.tn-faq{border:1px solid var(--line-strong);margin:0 0 -1px;background:var(--surface)}
.tn-faq summary{display:flex;gap:12px;align-items:flex-start;padding:17px 20px;cursor:pointer;font-size:15px;font-weight:800;color:var(--text);line-height:1.7;list-style:none}
.tn-faq summary::-webkit-details-marker{display:none}
.tn-faq summary:before{content:"Q";flex:none;font:800 12px var(--font-mono);color:var(--brand);padding-top:3px}
.tn-faq summary:after{content:"＋";margin-left:auto;color:var(--text-muted);font-weight:700}
.tn-faq[open] summary:after{content:"−"}
.tn-faq[open] summary{border-bottom:1px solid var(--line)}
.tn-faqBody{padding:18px 20px 6px}
.tn-faqBody .tn-rt{margin-bottom:12px}

/* ---------- CTA ---------- */
.tn-ctaBox{background:var(--ink);color:var(--text-inv);padding:44px 40px;border-left:4px solid var(--brand)}
.tn-ctaKicker{margin:0 0 12px;font:800 10px var(--font-mono);letter-spacing:.18em;color:var(--brand-soft)}
.tn-ctaTitle{margin:0 0 14px;font-size:clamp(20px,2.6vw,29px);font-weight:900;letter-spacing:-.03em;line-height:1.4}
.tn-ctaLead{margin:0 0 26px;font-size:14px;line-height:1.95;color:var(--text-inv-2)}
.tn-ctaActions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.tn-ctaBox .tn-btn{border-color:var(--text-inv);background:transparent;color:var(--text-inv)}
.tn-ctaBox .tn-btn:hover{box-shadow:4px 4px 0 var(--brand)}
.tn-ctaBox .tn-btn--primary{background:var(--brand);border-color:var(--brand);color:var(--text-inv)}

/* ---------- 導入事例 ---------- */
.tn-caseGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}
.tn-caseCard{display:flex;flex-direction:column;gap:10px;padding:0 0 20px;border:1px solid var(--line-strong);background:var(--surface);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.tn-caseCard:hover{transform:translateY(-3px);box-shadow:6px 6px 0 var(--ink)}
.tn-caseThumb{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2);border-bottom:1px solid var(--line)}
.tn-caseThumb img{width:100%;height:100%;object-fit:contain;display:block;padding:14px;background:var(--surface)}
.tn-caseCompany{padding:16px 18px 0;font:800 11px var(--font-mono);letter-spacing:.08em;color:var(--brand)}
.tn-caseCatch{padding:0 18px;font-size:15px;font-weight:800;line-height:1.6;color:var(--text)}
.tn-caseLead{padding:0 18px;font-size:12.5px;line-height:1.85;color:var(--text-muted)}
.tn-caseMore{margin-top:auto;padding:8px 18px 0;font-size:12px;font-weight:800;color:var(--text-2)}
.tn-caseMore i{font-style:normal;margin-left:6px;color:var(--brand)}

/* ---------- 問い合わせ ---------- */
.tn-sec--contact{background:var(--surface-2)}
.tn-sec--contact .tn-lead{max-width:62ch;margin:0 0 26px;font-size:14px;line-height:1.95;color:var(--text-2)}
.tn-form{max-width:620px;display:grid;gap:14px;padding:30px;background:var(--surface);border:1px solid var(--line-strong)}
.tn-form .vmForm__label{color:var(--text)}
:root[data-theme="dark"] .tn-form input,:root[data-theme="dark"] .tn-form textarea{background:var(--surface-2);color:var(--text);border-color:var(--line-strong)}
:root[data-theme="dark"] .tn-form .vmForm__note{color:var(--text-2)}

.tn-footer{border-top:1px solid var(--line)}

/* ---------- 画面が狭いとき ---------- */
@media (max-width:900px){
  .tn-row--3,.tn-row--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tn-ctaBox{padding:32px 24px}
}
@media (max-width:640px){
  .tn-main{padding-top:64px}
  .tn-zonenav{top:64px}
  .tn-row--2,.tn-row--3,.tn-row--4{grid-template-columns:1fr}
  .tn-row--rev{direction:ltr}
  .tn-sec{padding:40px 0}
  .tn-hero{padding:34px 0 28px}
  .tn-form{padding:22px 18px}
  .tn-btn{min-width:0;width:100%}
}