/* about/index.html 専用のスタイル。site.css から切り出したもの（#212）。
   このファイルは about/index.html だけが読み込む。共通で使うものは site.css へ戻すこと。 */

/* 強調は色だけ。斜体にはしない（和文で斜体は崩れる） */
.abt-em {
  font-style: normal;
  font-weight: 800;
  color: var(--brand-cyan);
}
/* --- 01 WHO WE ARE：3つの力 ---------------------------------------------
   旧版はカード3枚だったが、面の情報量が増えるだけで序列がつかなかった。
   TOPのBUSINESSと同じ「3つの力」を扱うので事業名の表記は完全に揃えつつ、
   紙面の型は変える（TOP＝縦罫の3カラム／ここ＝横罫の3行）。 */
.abt-forces {
  margin-top: 3rem;
  border-top: 1px solid var(--border);
}
.abt-force {
  display: grid;
  gap: 0.75rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 900px) {
  .abt-force {
    grid-template-columns: 17rem 1fr;
    gap: 3rem;
    align-items: baseline;
    padding: 2.25rem 0;
  }
}

.abt-force__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.85rem;
  margin: 0;
}
/* 番号は cyan の小さな英字。TOPの「DEEP NAVYのベタ塗りラベル」は MISSION 側で
   使うので、ここでは一段弱い記号として置き、面のテンションを重ねない。 */
.abt-force__num {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--brand-cyan);
  font-variant-numeric: tabular-nums;
}
.abt-force__name {
  font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.4rem);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--brand-deep);
}
.abt-force__en {
  width: 100%;
  margin-top: 0.3rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: rgba(31, 145, 227, 0.75);
}
/* 「ひとつの手段だけでは、解決できない課題がある。」の一文。本文（.corp-lead）
   より強く、セクション見出し（.corp-title）より弱い中間の段。3つの力へ入る
   直前に置き、なぜ3つ束ねるのかを一段だけ強い声で言う。 */
.abt-turn {
  margin: 2.5rem 0 0;
  max-width: 44rem;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  font-weight: 800;
  line-height: 1.85;
  letter-spacing: -0.01em;
  color: var(--brand-deep);
}
.abt-force__text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.95;
  color: var(--muted-foreground);
}
/* --- 02 VISION -----------------------------------------------------------
   ページ最大の見せ場。写真は使わず、同心円と座標の細線だけで「価値の中心が
   広がっていく」形をつくる。意味のない装飾は足さない。 */
.abt-vision {
  padding-block: 6rem;
}

@media (min-width: 768px) {
  .abt-vision {
    padding-block: 10rem;
  }
}

@media (min-width: 1024px) {
  .abt-vision {
    padding-block: 9rem;
  }
}

/* 右側に図形を置かないぶん、余白そのものを見せ場にする。本文カラムは
   面の半分程度に抑え、右側は「埋めない領域」として意図的に空けておく。 */
.abt-vision__inner {
  max-width: 44rem;
}
/* ビジョンの一文はページ内で最も大きい和文。CONTACT の .corp-statement と
   同じ役割なので、同じ clamp の型を使い、行間だけ一段締めている。 */
.abt-vision__statement {
  margin: 1.25rem 0 0;
  font-size: clamp(1.75rem, 1.05rem + 3.2vw, 3.2rem);
  font-weight: 900;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: #fff;
  text-wrap: balance;
}
.abt-vision__rule {
  display: block;
  width: 3.5rem;
  height: 2px;
  margin-top: 2rem;
  background: var(--brand-cyan);
}
.abt-vision__lead {
  margin: 1.75rem 0 0;
  max-width: 34rem;
  font-size: 0.95rem;
  line-height: 2;
  color: rgba(255, 255, 255, 0.8);
}

@media (min-width: 768px) {
  .abt-vision__rule {
    margin-top: 1.75rem;
  }
  .abt-vision__lead {
    margin-top: 1.5rem;
  }
}

/* --- 03 MISSION ／ 04 VALUE ---------------------------------------------
   ひとつの白い面を続けて使う（機械的な交互配置にしない）。同じ「3つ」でも
   役割が違うので、型・文字サイズ・密度を変えて見え方を分ける。 */
/* MISSION：外に向けた役割。ラベル＋大きな文字を横に並べ、行数を少なく保つ */
.abt-missions {
  margin-top: 2.75rem;
  border-top: 1px solid var(--border);
}
.abt-mission {
  display: grid;
  gap: 0.9rem;
  padding: 1.9rem 0;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  .abt-mission {
    grid-template-columns: 9.5rem 1fr;
    gap: 2.5rem;
    align-items: center;
    padding: 2.5rem 0;
  }
}

/* TOP の .corp-col__num（SERVICE 01）と同じ言語＝DEEP NAVY のベタ塗り＋白文字。
   ただし字を一段小さく・字間を広く・上下の余白を大きく取り、BUSINESS の
   3カラムをそのまま持ってきたようには見せない。 */
.abt-mission__label {
  justify-self: start;
  display: inline-block;
  padding: 0.32rem 0.85rem;
  background: var(--brand-deep);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.22em;
  white-space: nowrap;
}
.abt-mission__text {
  margin: 0;
  font-size: clamp(1.15rem, 0.98rem + 0.75vw, 1.6rem);
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--brand-deep);
}
/* VALUE：日々のふるまい。MISSION より密度を上げ、文字を一段小さくし、
   記号を cyan の細線にする。3カラムにして縦罫で仕切る。 */
/* MISSION の最後の罫のすぐ下にもう1本引くと「空の4行目」に見えるため、
   VALUE 側は罫を持たず、余白だけで段落を変える。 */
.abt-value {
  margin-top: 4.5rem;
  padding-top: 0;
}

@media (min-width: 768px) {
  .abt-value {
    margin-top: 5.5rem;
    padding-top: 5rem;
  }
}

.abt-values {
  display: grid;
  margin-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.abt-value-item {
  position: relative;
  padding: 1.5rem 0 1.5rem 2.25rem;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  .abt-values {
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--border);
  }
  .abt-value-item {
    padding: 2rem 1.75rem 2rem 4rem;
    border-bottom: 0;
    border-left: 1px solid var(--border);
  }
  .abt-value-item:first-child {
    padding-left: 2.25rem;
    border-left: 0;
  }
  .abt-value-item:first-child .abt-value-item__mark {
    left: 0;
  }
  .abt-value-item:last-child {
    padding-right: 0;
  }
}

/* cyan の小さな十字。塗りのラベル（MISSION）に対して「線の記号」で応答する */
.abt-value-item__mark {
  position: absolute;
  top: 1.95rem;
  left: 0;
  width: 0.85rem;
  height: 0.85rem;
}

@media (min-width: 768px) {
  .abt-value-item__mark {
    top: 2.45rem;
    left: 1.75rem;
  }
}

.abt-value-item__mark::before,
.abt-value-item__mark::after {
  content: "";
  position: absolute;
  background: var(--brand-cyan);
}
.abt-value-item__mark::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
}
.abt-value-item__mark::after {
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
}
.abt-value-item__num {
  display: block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--brand-cyan);
}
.abt-value-item__text {
  margin: 0.55rem 0 0;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.8;
  color: var(--brand-deep);
}
/* --- 05 MESSAGE ----------------------------------------------------------
   ページ内で唯一「人」が写る面。accordion（details/summary）は廃止し、
   代表挨拶を最初から全文表示する1つの読み物として組む。

   中央軸の構成:
     見出し（左・他セクションと同じ位置）
       → 代表写真   56rem（896px）をセクションの水平中央へ
       → 本文       46rem（736px）＝写真より一段狭い measure を中央へ
       → 署名       本文カラムの右下へ静かに置く
   カードUI・shadow・大きな角丸・装飾的な署名UIは使わない。 */
.abt-message__body {
  margin-top: 2.75rem;
}
/* 写真＝MESSAGEの見せ場。現在公開版の代表写真とほぼ同じ横幅（PC1440で896px）。
   viewport全幅の full-bleed にはしない。左寄せに見えないよう中央へ置き、
   本文よりひとまわり広いことで「ここが見せ場」であることを示す。 */
.abt-message__figure {
  position: relative;
  overflow: hidden;
  max-width: 56rem;
  margin-inline: auto;
}
/* aspect-ratio は元画像と同じ 1494:645。cover でも切り取りが起きないため、
   人物・背景アートとも公開版と同じ見え方のまま拡大される。 */
.abt-message__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1494 / 645;
  object-fit: cover;
  color: transparent;
}
/* 写真の上に載せる紙質感は Recruit の PHOTO レシピ（.corp-photo-grain）。
   中間調の写真なので overlay が効く（KVのような明るい面とは条件が違う）。 */
.abt-message__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* 本文。長文なので1行が長くなりすぎない measure（46rem ≒ 和文46字）に絞り、
   写真と同じ中央軸へ揃える。<br> による強制改行は使わず、ブラウザ幅に応じた
   自然な折り返しに任せる。 */
/* 写真 896px ＞ リードコピー 816px ＞ 本文 736px の段階的な横幅にして、
   写真 → キャッチコピー → 本文 の情報階層を幅でも示す。すべて中央軸に揃える。
   箱そのものは 51rem まで広げ、通常段落だけ 46rem に絞り直す。 */
.abt-message__letter {
  max-width: 51rem;
  margin: 2.75rem auto 0;
}
.abt-message__letter > p {
  max-width: 46rem;
  margin-inline: auto;
}
.abt-message__letter p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--muted-foreground);
}
.abt-message__letter p + p {
  margin-top: 1.5rem;
}
/* 冒頭リード＝代表メッセージの入口。3段階の階層を、色ではなく
   文字サイズ・font-weight・line-height・余白だけでつくる。
     第1コピー .abt-message__lead    … 会社の定義。ここが最も強い
     第2コピー .abt-message__sublead … 第1コピーの説明。一段弱い
     本文      .abt-message__letter p … 16px / 1.9 / muted
   ⚠️ cyan・グラデーション文字・背景ベタ・カード・角丸・shadow・引用符・
      左の太いライン・アイコンは使わない。DEEP NAVY 一色のまま。
   ⚠️ 第1コピーはセクション見出し「代表挨拶」（.corp-title＝PC41.6px /
      TB37.6px / SP27.7px）より必ず小さく保つ。 */
.abt-message__letter .abt-message__lead {
  max-width: none;
  font-size: 1.3125rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--brand-deep);
}
.abt-message__letter .abt-message__sublead {
  max-width: none;
  margin-top: 1rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.8;
  color: var(--brand-deep);
  text-wrap: pretty;
}
/* リードのあとは通常の段落間より広く空け、ここから本文が始まることを示す。
   ただし間延びさせないため、段落間（1.5rem）の1.5倍程度に留める。 */
.abt-message__letter .abt-message__sublead + p {
  margin-top: 2.25rem;
}
/* 組版：日本語は原則どこでも折り返せるため、SPでは「され／る」「デ／ジタル」
   「テックカンパ／ニー」のような語中分断が起きる。意味のまとまりを nowrap で
   束ね、折り返しを語の切れ目へ寄せる。
   ⚠️ 文章全体を nowrap にはしない。束ねるのは最大でも8文字程度（実測 最大
      210px @21px）で、最も狭い 320px でも本文カラム 280px に必ず収まるため、
      どの幅でも横スクロールは発生しない。 */
.abt-message__nb {
  white-space: nowrap;
}

@media (min-width: 768px) {
  .abt-message__letter .abt-message__lead {
    font-size: 1.6875rem;
  }
  .abt-message__letter .abt-message__sublead {
    margin-top: 1.15rem;
    font-size: 1.125rem;
  }
  .abt-message__letter .abt-message__sublead + p {
    margin-top: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .abt-message__letter .abt-message__lead {
    font-size: 2rem;
  }
  .abt-message__letter .abt-message__sublead {
    font-size: 1.25rem;
  }
}

/* 署名は本文の締め。肩書きカードにも装飾UIにもせず、右下へ静かに置く。 */
.abt-message__letter .abt-message__sign {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0 0.85rem;
  margin-top: 3rem;
}
.abt-message__role {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
}
.abt-message__name {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--brand-deep);
}

@media (min-width: 768px) {
  .abt-message__letter {
    margin-top: 3.25rem;
  }
  .abt-message__letter p + p {
    margin-top: 1.65rem;
  }
}

/* --- 06 COMPANY ----------------------------------------------------------
   会社概要とオフィスをひとつの表に統合する。角丸カード・shadow・
   グラデーション枠は使わない。ラベルは弱く、値は強く。 */
.abt-spec {
  margin: 3rem 0 0;
  border-top: 1px solid var(--border);
}
.abt-spec__row {
  display: grid;
  gap: 0.5rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  .abt-spec__row {
    grid-template-columns: 12rem 1fr;
    gap: 2.5rem;
    padding: 1.65rem 0;
  }
}

.abt-spec__term {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(79, 93, 111, 0.85);
}
.abt-spec__en {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--brand-cyan);
}
.abt-spec__desc {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.9;
  color: var(--brand-deep);
  overflow-wrap: anywhere;
}
.abt-spec__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}
.abt-spec__list > li {
  position: relative;
  padding-left: 1rem;
}
/* 箇条書きの記号は丸ではなく cyan の短い罫。ページ全体の「線」の言語に揃える */
.abt-spec__list > li::before {
  content: "";
  position: absolute;
  top: 0.95em;
  left: 0;
  width: 0.5rem;
  height: 1px;
  background: var(--brand-cyan);
}
.abt-spec__addr {
  margin: 0;
}
.abt-spec__tel {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  /* 4.5rem → 4.1rem（約 -9%）。.corp-scene 自体は全ページ共通なので触らず、
     ABOUTの情報系セクションにだけクラスで限定する。 */
  .abt-scene--dense {
    padding-block: 4.1rem;
  }
  .abt-turn {
    margin-top: 2rem;
  }
  .abt-forces {
    margin-top: 2.75rem;
  }
  .abt-force {
    padding-block: 1.6rem;
  }
  .abt-missions {
    margin-top: 2.5rem;
  }
  .abt-mission {
    padding-block: 1.75rem;
  }
  .abt-value {
    margin-top: 4rem;
  }
  .abt-values {
    margin-top: 2.25rem;
  }
  .abt-value-item {
    padding-block: 1.375rem;
  }
  .abt-value-item__mark {
    top: 1.8rem;
  }
  .abt-spec {
    margin-top: 2.75rem;
  }
  .abt-spec__row {
    padding-block: 1.25rem;
  }
}