/*
  About Us (company.html) — 2-part page: 会社として大切にしていること / Company 会社概要.
  company.html専用。tokens.css(--accent-blue,--gradient,--op-border等)を継承しつつ、
  TOPより演出を弱める(発光・ガラスなし、余白とタイポグラフィ・細いライン中心)。
  見出し・本文フォントはFV専用サブセットではなく、company.html自身が読み込む
  フルセットのNoto Serif JP/Sans JP(style.cssの--font-heading/--font-main)を使う。
  数字のみ、TOPの実績パネルと同じCormorant Garamond(css/cormorant.css)を継承。
  .tl-head/.tl-eyebrowはcss/top-lower.css(index.html専用)と同名だが、
  company.htmlはそちらを読み込まないため、ここで同等の見た目を独立して定義している。
*/

.tl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 40px; }
.tl-head h2 { margin: 0; font-family: var(--font-heading); font-size: clamp(22px,2.1vw,30px); font-weight: 700; letter-spacing: .03em; color: var(--navy); }
.tl-eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--font-latin); font-size: 11px; letter-spacing: .18em; color: #8693b4; white-space: nowrap; }
.tl-eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--gradient); }
@media (max-width: 760px) { .tl-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; } }

/* ---------- 1. 会社として大切にしていること ---------- */
.about-section { padding-top: 128px; padding-bottom: 64px; }
@media (max-width: 760px) { .about-section { padding-top: 96px; padding-bottom: 40px; } }

.about-intro { max-width: 780px; }
.about-intro > .tl-eyebrow { margin-bottom: 24px; }
.about-heading { margin: 0; font-family: var(--font-heading); font-size: clamp(28px,3.4vw,42px); font-weight: 700; line-height: 1.5; color: var(--navy); }
.about-intro p { margin: 0 0 20px; color: var(--secondary-text); line-height: 2; font-size: 16px; }

/* ---------- 汎用サブセクション(Technovargeとは/なぜ向き合うのか/企業にも向き合う/CLOSE) ----------
   .about-proofと同じ区切りリズム(margin-top/padding-top/border-top)を再利用し、
   新しいデザインを増やさずセクション間の呼吸だけを揃えている。
*/
.about-block { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--op-border); max-width: 720px; }
.about-block > .tl-eyebrow { margin-bottom: 16px; }
.about-block h2 { margin: 0 0 20px; font-family: var(--font-heading); font-size: clamp(22px,2.1vw,30px); font-weight: 700; letter-spacing: .03em; line-height: 1.5; color: var(--navy); }
.about-block p { margin: 0 0 20px; color: var(--secondary-text); line-height: 2; font-size: 16px; }
.about-block p:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .about-block { margin-top: 48px; padding-top: 40px; } }

/* MVV: Missionを最も力強く、Valueは30時間セクションへの橋渡しとして控えめに(既存h2サイズを基準に強弱のみ調整) */
.about-block h2.about-mission-heading { font-size: clamp(26px,3.2vw,38px); }
.about-block h2.about-value-heading { font-size: clamp(20px,2vw,26px); line-height: 1.6; margin-bottom: 24px; }

.about-commitment-text { margin: 0 0 20px; font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: clamp(18px,1.8vw,22px); line-height: 1.7; }

.about-closing { margin: 0; font-weight: 600; color: var(--navy); line-height: 2; font-size: 16px; }

.about-proof {
  margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--op-border);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(32px,5vw,64px); align-items: center; max-width: 720px;
}
.about-proof-figure { display: flex; flex-direction: column; gap: 12px; }
.about-proof-number-row { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.about-proof-figure .number { font-family: var(--font-number); font-size: clamp(86px,10.5vw,128px); font-weight: 500; letter-spacing: var(--tracking-number); color: var(--accent-blue); line-height: 1; }
.about-proof-unit { font-family: var(--font-latin); font-size: 12px; letter-spacing: .1em; color: #8693b4; line-height: 1.5; }
.about-proof-unit-sub { opacity: .7; }
.about-proof-caption { margin: 0; font-size: 13px; letter-spacing: .02em; color: var(--secondary-text); white-space: nowrap; }
.about-proof-label { margin: 0 0 14px; font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: clamp(20px,2vw,26px); line-height: 1.5; }
.about-proof-text p { margin: 0 0 12px; color: var(--secondary-text); line-height: 1.85; font-size: 14px; }
.about-proof-text p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .about-proof { grid-template-columns: 1fr; gap: 20px; margin-top: 48px; padding-top: 40px; }
  .about-proof-number-row { gap: 12px; }
  .about-proof-caption { white-space: normal; }
}

/* ---------- 2. Company 会社概要 ---------- */
.company-section { padding-top: 56px; padding-bottom: 96px; }
@media (max-width: 760px) { .company-section { padding-top: 40px; padding-bottom: 56px; } }

.about-company-table { margin: 0; max-width: 760px; }
.company-row { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--op-border); }
.company-row:first-child { border-top: 1px solid var(--op-border); }
.company-row dt { margin: 0; font-family: var(--font-latin); font-size: 12px; letter-spacing: .06em; color: #8693b4; padding-top: 2px; }
.company-row dd { margin: 0; font-size: 15px; color: var(--navy); line-height: 1.8; }

@media (max-width: 600px) {
  .company-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
}