/* ===== 導入企業インタビュー（記事ページ）  styles.css の後に読み込む ===== */
.itv{font-size:17px}
.itv .wrap{max-width:var(--wrap)}

/* HERO */
.itv-hero{padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--rule)}
.itv-hero-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:32px clamp(32px,6vw,88px);align-items:end}
.itv-hero h1{margin-top:20px;font-family:var(--f-display);font-weight:900;color:var(--head);font-size:clamp(28px,4vw,48px);line-height:1.35;letter-spacing:.01em}
.itv-sub{margin-top:24px;font-family:var(--f-display);font-weight:700;color:var(--ink-2);font-size:clamp(17px,1.8vw,21px);line-height:1.7}
.itv-who{margin-top:32px;padding-top:20px;border-top:2px solid var(--head);display:flex;flex-wrap:wrap;gap:4px 20px;align-items:baseline}
.itv-who b{font-family:var(--f-display);font-size:19px;color:var(--head)}
.itv-who > span{font-size:16px;color:var(--ink-2)}
.itv-photo{margin:0;align-self:end}
.itv-photo img{display:block;width:100%;height:auto;border-radius:2px}

/* 事実帯 */
.itv-facts{padding:clamp(40px,5vw,64px) 0}
.itv-fact-row{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--head);border-bottom:1px solid var(--rule)}
.itv-fact-row > div{padding:24px 24px 28px 0;min-width:0}
.itv-fact-row > div + div{padding-left:24px;border-left:1px solid var(--rule)}
.itv-fact-row dt{font-family:var(--f-num);font-weight:900;color:var(--head);font-size:clamp(28px,3.4vw,42px);line-height:1.25}
.itv-fact-row dd{margin:10px 0 0;color:var(--ink-2);font-size:16px}

/* リード */
.itv-lead-sec{padding:0 0 clamp(56px,7vw,96px)}
.itv-lead{max-width:760px;font-size:clamp(18px,1.6vw,20px);line-height:2;color:var(--ink);font-weight:500}

/* Q&A：左に見出し、右に本文 */
.itv-qa{padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--rule)}
.itv-qa-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px clamp(32px,6vw,88px);align-items:start}
.itv-qa h2,.itv-col h2,.itv-co h2{font-family:var(--f-display);font-weight:900;color:var(--head);font-size:clamp(22px,2.4vw,30px);line-height:1.5}
.itv-body{max-width:760px;min-width:0}
.itv-body > * + *{margin-top:20px}
.itv-body .q{color:var(--ink-3);font-size:16px;font-weight:400}
.itv-body .q + .a{margin-top:12px}
.itv-body .a{color:var(--ink);line-height:2}
.itv-body .a b{font-family:var(--f-display);font-weight:700;color:var(--head);margin-right:.8em}
.itv-body .a b::after{content:"："}
.itv-body .n{color:var(--ink-2);line-height:2}
.itv-body .a + .n,.itv-pull + .n{margin-top:28px}

/* 引用の抜き出し */
.itv-pull{margin:40px 0 !important;padding:8px 0 8px 24px;border-left:4px solid var(--accent)}
.itv-pull p{font-family:var(--f-display);font-weight:700;color:var(--head);font-size:clamp(21px,2.4vw,28px);line-height:1.65}
.itv-pull + .n{margin-top:0}

/* 画面 */
.itv-shot{margin:36px 0 0}
.itv-shot .frame{background:var(--plate);border:1px solid var(--rule);border-radius:6px;padding:10px;box-shadow:var(--shadow)}
.itv-shot .frame img{display:block;width:100%;height:auto;border-radius:2px}
.itv-shot figcaption{margin-top:10px;font-size:13px;color:var(--ink-3)}

/* コラム */
.itv-col{padding:clamp(56px,7vw,96px) 0;background:var(--paper-2);border-top:1px solid var(--rule)}
.itv-col-k{font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--ink-3);margin-bottom:12px}
.itv-tbl{width:100%;border-collapse:collapse;margin-top:28px !important;background:var(--paper);font-size:16px}
.itv-tbl caption{caption-side:top;text-align:left;font-weight:700;color:var(--head);font-size:15px;padding-bottom:10px}
.itv-tbl thead th{font-size:13px;font-weight:700;color:var(--ink-3);letter-spacing:.06em;text-align:left;padding:10px 16px;border-bottom:2px solid var(--head)}
.itv-tbl tbody th{width:28%;text-align:left;font-family:var(--f-display);font-weight:700;color:var(--head);padding:14px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
.itv-tbl td{padding:14px 16px;border-bottom:1px solid var(--rule);color:var(--ink)}

/* 会社概要（控えめ） */
.itv-co{padding:clamp(48px,6vw,80px) 0;border-top:1px solid var(--rule)}
.itv-co h2{font-size:clamp(18px,1.8vw,21px)}
.itv-co-name{font-weight:700;color:var(--head);font-size:16px}
.itv-co-name a{color:var(--ink-2);font-weight:400;text-underline-offset:3px}
.itv-co-tbl{margin-top:12px;width:100%;max-width:640px;border-collapse:collapse;font-size:15px}
.itv-co-tbl th{width:32%;text-align:left;font-weight:500;color:var(--ink-3);padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.itv-co-tbl td{padding:10px 0;border-bottom:1px solid var(--rule);color:var(--ink-2)}

/* CTA（サイト本体のご案内と同じ濃い面） */
.itv-cta{background:var(--band);color:var(--band-ink);padding:clamp(56px,7vw,96px) 0}
.itv-cta-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px clamp(32px,6vw,88px);align-items:center}
.itv-cta-k{font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--band-ink-2)}
.itv-cta h2{margin-top:10px;font-family:var(--f-display);font-weight:900;color:#fff;font-size:clamp(22px,2.6vw,30px);line-height:1.5}
.itv-cta-body{margin-top:14px;color:var(--band-ink-2);font-size:16px;line-height:1.9}
.itv-cta-act{display:grid;gap:12px}
.itv-cta-act .btn{width:100%}
.itv-cta-sub{margin-top:8px;font-size:14px;color:var(--band-ink-2)}

/* 文字組み */
.itv h1,.itv h2,.itv p,.itv dt,.itv dd,.itv td,.itv th,.itv caption,.itv figcaption{word-break:auto-phrase;overflow-wrap:break-word}

/* タブレット */
@media (max-width:900px){
  .itv-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);align-items:start}
  .itv-qa-grid,.itv-cta-grid{grid-template-columns:minmax(0,1fr)}
  .itv-body{max-width:none}
}
/* スマホ */
@media (max-width:640px){
  .itv{font-size:16px}
  .itv-hero-grid{grid-template-columns:minmax(0,1fr)}
  .itv-photo{max-width:420px}
  .itv-fact-row{grid-template-columns:minmax(0,1fr)}
  .itv-fact-row > div{padding:20px 0}
  .itv-fact-row > div + div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .itv-pull{padding-left:16px;margin:32px 0 !important}
  .itv-tbl tbody th{width:34%;padding:12px 10px}
  .itv-tbl td{padding:12px 10px}
  .itv-tbl thead th{padding:10px}
}

/* 句の中の折り返し単位（余白なし）。全角スペースの区切りは .ph（サイト共通、句の間に余白） */
.pw{display:inline-block;max-width:100%}
.itv{line-break:strict}
/* 左の列：見出しと抜き出した引用 */
.itv-side .itv-pull{margin:32px 0 0 !important}
.itv-side .itv-pull p{font-size:clamp(19px,1.9vw,23px)}
@media (max-width:900px){.itv-side .itv-pull{margin:24px 0 8px !important}}