/* ============================================================
   KABUKI company.css（会社概要ページ専用）
   Figma: node 296:3187（PC）/ 320:1594（SP）
   色・フォント値は必ず tokens.css の var() を参照する。
   tokens.css に無い値（淡いグレー背景・暗背景上の区切り線・大見出しの
   フォントサイズ等）は var() から color-mix() / calc() で導出し、
   各所にコメントで根拠を残す（front.css と同じ方針）。
   ============================================================ */

/* ================================================
   p-company__hero
   Figma: node 296:3187 内 hero-wrapper（296:3191, y=93〜348）
   ================================================ */
.p-company__hero {
  background-color: var(--color-black);
}

.p-company__hero-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 40px 32px;
}

@media (min-width: 768px) {
  .p-company__hero-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding-block: 64px 56px;
  }
}

.p-company__hero-heading-block {
  /* 2026-08-03 SOTA決定（Hero見出しブロックのカノニカル型統一）: DOM順を
     Company→会社概要に変更したため、order ハックは撤去。SP/PCとも同じ
     縦積み・左揃え・gap8pxで統一（他ページと共通のブロック構造）。 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.p-company__hero-eyebrow {
  /* 2026-08-03 SOTA決定: 全ページ共通の日本語ラベルサイズ（SP=fs-14 / PC=fs-18）に統一
     （旧実装はブレークポイント共通18pxだった）。 */
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--color-white);
}

@media (min-width: 768px) {
  .p-company__hero-eyebrow {
    font-size: var(--fs-18);
  }
}

.p-company__hero-title {
  /* 2026-08-03 SOTA決定: 全ページ共通の英語見出しサイズ（SP=fs-32 / PC=fs-48*2）に統一
     （旧実装はSP側がfs-32*1.5=48pxの近似値だった）。 */
  font-size: var(--fs-32);
  color: var(--color-white);
}

@media (min-width: 768px) {
  .p-company__hero-title {
    font-size: calc(var(--fs-48) * 2);
  }
}

.p-company__hero-tagline {
  /* Figma実測（365:2501）: 22px Bold・テキストボックス幅504px
     （旧実装は16px Regular・幅420pxの近似値だった） */
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  line-height: var(--lh-jp);
  color: var(--color-white);
  max-width: 504px;
}

/* ================================================
   p-company__section-head（Message / Value / Member / Company Overview 共通見出し）
   TOP ページ（p-front__*-head-en / -head-sub）で確立済みの見出し規模を踏襲
   ================================================ */
.p-company__section-head {
  /* SP実測（325:2047 Message / 323:1954 Member / 325:1985 Company Overview）:
     3セクション共通で英字見出しを上・日本語サブラベルを下に中央揃えで
     縦積みする専用レイアウト。旧実装はPCの横並びをSPにもそのまま適用して
     いたため、特に Value 見出しが3〜4行に折り返して大きく崩れていた。 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .p-company__section-head {
    /* Figma実測（297:3568, 320:1461, 300:3688）: gap 20px（旧実装は12pxの近似値） */
    flex-direction: row;
    align-items: baseline;
    text-align: left;
    gap: 20px;
  }
}

.p-company__section-head-en {
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-company__section-head-en {
    font-size: var(--fs-48);
  }
}

.p-company__section-head-sub {
  /* Figma実測: Message/Member/Company Overview/Value（2行目）の各サブラベルは
     共通して22px Regular（297:3566, 297:3542, 300:3572で確認）。
     2026-07-31: 田中さんSP指摘によりSP側はFigma仕様の16pxに修正
     （旧実装は22pxをSP/PC共通で適用していた）。PC（≥768px）は22pxを維持
     （下記メディアクエリで再指定）。Value見出しのみ内訳が異なるため
     さらに下部で個別上書きする。 */
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-company__section-head-sub {
    font-size: var(--fs-22);
  }
}

/* Company Overview は黒帯背景のため見出しを白反転（--on-dark） */
.p-company__section-head--on-dark .p-company__section-head-en,
.p-company__section-head--on-dark .p-company__section-head-sub {
  color: var(--color-white);
}

/* ================================================
   p-company__photo-placeholder（写真コンテナ）
   代表写真・メンバー写真・地図は納品画像に差し替え済み（2026-07-24）。
   地図固有の上書き（グレー背景解除）は p-company__map セクション内
   .p-company__map-placeholder に定義する。
   ================================================ */
.p-company__photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gray);
  /* Figma実測（320:1578 katakawa 2 等）: 角丸10px（旧実装は12pxの近似値） */
  border-radius: 10px;
  overflow: hidden;
}

/* picture 経由の実画像のみを対象にする（map.php の透かし img は対象外） */
.p-company__photo-placeholder picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-company__photo-placeholder-mark {
  width: 30%;
  height: auto;
  opacity: 0.25;
}

.p-company__photo-placeholder--portrait {
  /* SP: Figma photo-mask 実測 353x277（横長）/ PC: 246x316（縦長）と
     ブレークポイントで縦横比が入れ替わる（要確認・報告参照） */
  aspect-ratio: 353 / 277;
  width: 100%;
  max-width: 353px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .p-company__photo-placeholder--portrait {
    aspect-ratio: 246 / 316;
    width: 246px;
    max-width: none;
    flex-shrink: 0;
  }
}

.p-company__photo-placeholder--square {
  /* Figma 実測: PC 250x230 / SP 353x324（比率ほぼ同一のため単一値で兼用） */
  aspect-ratio: 250 / 230;
  width: 100%;
}

@media (min-width: 768px) {
  .p-company__photo-placeholder--square {
    width: 250px;
    flex-shrink: 0;
  }
}

/* ================================================
   p-company__message（代表メッセージ）
   Figma: node 296:3187 内 Message（296:3459 見出し / 296:3462 本文 /
   296:3466 署名）+ 写真（351:2244 photo-mask）
   ================================================ */
.p-company__message {
  background-color: var(--color-white);
  padding-block: 40px;
}

@media (min-width: 768px) {
  .p-company__message {
    padding-block: 64px;
  }
}

.p-company__message-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) {
  .p-company__message-inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
  }
}

.p-company__message-body {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .p-company__message-body {
    max-width: 610px; /* Figma 本文テキストボックス実測 610px */
  }
}

.p-company__message-text {
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  /* Figma実測（296:3462）: line-height 1.8。2026-07-29: tokens.css に --lh-body(1.8)
     追加のため、直値からトークン参照に置換。 */
  line-height: var(--lh-body);
  color: var(--color-black);
}

.p-company__message-text + .p-company__message-text {
  /* 2026-07-31: 石黒指摘により1段落だった本文を意味の区切りで3段落に分割。
     段落間の余白はFigma指定なし（1段落テキストのため）。行間(lh-body 1.8)
     との視覚的差を出すため1emで設定（要確認）。 */
  margin-top: 1em;
}

.p-company__message-signature {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.p-company__message-signature-title {
  /* Figma実測（296:3464）: 14px Bold・黒（旧実装は色gray-text・非Boldの近似値） */
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

.p-company__message-signature-name {
  /* Figma実測（296:3465）: 20px Bold（旧実装は18pxの近似値） */
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

.p-company__message-photo {
  align-self: center;
}

@media (min-width: 768px) {
  .p-company__message-photo {
    align-self: flex-start;
  }
}

/* ================================================
   p-company__values（メンバーの価値観）
   Figma: node 296:3187 内 bg-section（297:3539, y=863〜1219、淡いグレー背景）
   淡いグレー背景は tokens.css に無いため --color-gray から color-mix() で導出
   （front.css の p-front__service--ai と同じ根拠）
   ================================================ */
.p-company__values {
  /* Figma実測（297:3539 bg-section）: #F7FBF9 = 既存トークン --color-bg-section と
     完全一致（旧実装はcolor-mix()による近似値だった） */
  background-color: var(--color-bg-section);
  padding-block: 40px;
}

@media (min-width: 768px) {
  .p-company__values {
    padding-block: 56px;
  }
}

/* Value見出しの実測（296:3469 / 296:3470 / 296:3473）:
   通常のsection-headパターン（sub=22px regular / en=32→48px bold）とは逆転しており、
   「メンバーの価値観」が32px Bold、"Value"＋サブコピーが22pxという固有の組み方
   （PC1440フレームで既に32px/22pxで確定・デスクトップでも拡大されない）。
   共通クラスのDOM構造はそのまま、この見出しのみ実測値で個別上書きする。
   なお "Value" と "こんな思考の方と働きたい" の間にある短い装飾横線（Vector 36,
   幅43px）は現状未実装・要確認（新規クラスが必要になるため保留）。 */
.p-company__values .p-company__section-head {
  /* SP実測（323:1953）: 1行目に見出し全幅（メンバーの価値観）、2行目に
     Value＋サブコピーを中央揃えで横並びさせる2段組み。section-head の
     縦積みデフォルトを row+wrap で上書きし、sub:first-child を flex-basis
     100% にして強制改行させる。 */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 12px;
}

.p-company__values .p-company__section-head-sub:first-child {
  flex: 1 0 100%;
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
}

.p-company__values .p-company__section-head-en {
  font-size: var(--fs-22);
}

@media (min-width: 768px) {
  .p-company__values .p-company__section-head {
    /* Figma実測（320:1593 PC）: 1行の横並びに戻る */
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 30px;
  }

  .p-company__values .p-company__section-head-sub:first-child {
    flex: 0 0 auto;
  }
}

.p-company__values-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .p-company__values-list {
    flex-direction: row;
    flex-wrap: wrap;
    /* Figma実測（320:1560→320:1556間のx差）: カード間gap 30px（旧実装は24px） */
    gap: 30px;
  }
}

.p-company__value-card {
  /* 2026-07-31: 田中さんSP指摘によりSPはgrid化。Value(eyebrow)+番号を1列目に
     縦積み、本文(label)を2列目に配置する（旧実装はflexの横一列で3要素が
     並び読みにくかった）。列間はcolumn-gap、Value~番号の行間はrow-gapで
     個別調整（row-gap値はFigma詳細指定なし・近接性優先の判断値、要確認）。 */
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 20px;
  background-color: var(--color-white);
  /* Figma実測（300:3673 Frame 291）: 角丸10px・枠線1px solid #B3B3B3
     （旧実装は枠線なし・角丸12pxの近似値だった）。
     2026-07-29: tokens.css のグローバル --color-border-mid(#B3B3B3) に統合。 */
  border-radius: 10px;
  border: 1px solid var(--color-border-mid);
  padding: 20px 24px;
}

.p-company__value-eyebrow {
  /* SP: gridで1列目1行目に配置（Value/番号を縦積み） */
  grid-column: 1;
  grid-row: 1;
}

.p-company__value-number {
  /* SP: gridで1列目2行目に配置（Value/番号を縦積み） */
  grid-column: 1;
  grid-row: 2;
}

.p-company__value-label {
  /* SP: gridで2列目に配置し、Value+番号の2行分を縦方向中央に配置 */
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
}

@media (min-width: 768px) {
  .p-company__value-card {
    /* PC: 従来通りflexの縦積み中央揃えに戻す（非破壊） */
    display: flex;
    flex: 1 1 200px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 24px 16px;
  }
}

.p-company__value-eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  /* Figma実測（297:3510）: 赤 #DA0000 = --color-red（旧実装はgray-textの近似値） */
  color: var(--color-red);
  order: -1;
}

@media (min-width: 768px) {
  .p-company__value-eyebrow {
    order: initial;
  }
}

.p-company__value-number {
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  flex-shrink: 0;
}

.p-company__value-label {
  /* Figma実測（297:3513）: 16px Bold（旧実装は14pxの近似値） */
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  line-height: var(--lh-jp);
  color: var(--color-black);
}

/* ================================================
   p-company__member（メンバー紹介）
   Figma: node 296:3187 内 見出し（320:1461）+ カード2枚
   （320:1588 片川 / 320:1589 石黒）
   ================================================ */
.p-company__member {
  background-color: var(--color-white);
  padding-block: 40px;
}

@media (min-width: 768px) {
  .p-company__member {
    padding-block: 56px;
  }
}

.p-company__member-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 768px) {
  .p-company__member-list {
    flex-direction: row;
    gap: 40px;
  }
}

.p-company__member-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 768px) {
  .p-company__member-card {
    flex: 1 1 0;
    flex-direction: row;
    align-items: flex-start;
    /* Figma実測（320:1588）: 写真-テキスト間gap 30px（旧実装は24px） */
    gap: 30px;
  }
}

.p-company__member-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-company__member-title {
  /* Figma実測（320:1581）: 12px Bold・黒（旧実装は14px・非Bold・gray-textの近似値） */
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

.p-company__member-name {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.p-company__member-name-jp {
  /* Figma実測（320:1583）: 20px Bold（旧実装は24pxの近似値） */
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

.p-company__member-name-en {
  /* Figma実測（320:1584）: 14px・黒（Inter Semi-Boldだが、u-font-enのMontserrat Bold
     を踏襲。色はgray-textではなく黒。要確認: フォントウェイトの厳密一致は600だが
     tokens.cssに該当値がなくbold(700)で近似） */
  font-size: var(--fs-14);
  color: var(--color-black);
}

.p-company__member-bio {
  /* Figma実測（320:1586）: 14px Regular・黒（旧実装はgray-textの近似値） */
  font-size: var(--fs-14);
  line-height: var(--lh-jp);
  color: var(--color-black);
}

/* ================================================
   p-company__overview（Company Overview・黒帯テーブル）
   Figma: node 296:3187 内「[要確認]-about-us_pc-05」（300:3690）+
   背景 bg-section（300:3686, 黒背景。低解像度俯瞰スクリーンショットで確認）
   ================================================ */
.p-company__overview {
  background-color: var(--color-black);
  padding-block: 40px;
}

@media (min-width: 768px) {
  .p-company__overview {
    padding-block: 56px;
  }
}

.p-company__overview-table {
  display: flex;
  flex-direction: column;
}

.p-company__overview-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block: 20px;
  /* 暗背景上の区切り線: tokens.css に該当色が無いため --color-white から
     color-mix() で半透明化して導出（Figma Vector 実測は白系の細い罫線）。
     内部の行間仕切り（Vector 38系）は1px、テーブル外枠（Vector 37/45）は
     2px相当のため、外枠のみ下記で太くする。 */
  border-bottom: 1px solid color-mix(in srgb, var(--color-white) 15%, transparent);
}

.p-company__overview-row:first-child {
  border-top: 2px solid color-mix(in srgb, var(--color-white) 15%, transparent);
}

.p-company__overview-row:last-child {
  /* Figma実測（300:3608 Vector45）: 最下行の外枠は2px（内部の1px仕切りより太い） */
  border-bottom: 2px solid color-mix(in srgb, var(--color-white) 15%, transparent);
}

@media (min-width: 768px) {
  .p-company__overview-row {
    flex-direction: row;
    align-items: baseline;
    gap: 40px;
    padding-block: 20px; /* Figma実測: 行間隔72px（ラベルfs-20×lh1.6=32、余白20+32+20=72で一致） */
  }
}

.p-company__overview-label {
  /* Figma実測（300:3574等）: 20px Bold・白（旧実装は14px・gray-lightの近似値） */
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  margin: 0;
}

@media (min-width: 768px) {
  .p-company__overview-label {
    /* Figma実測: 区切り線（Vector46, x=313）までの列幅313px（旧実装は240pxで
       最長ラベル「有料職業紹介事業者許可番号」が収まらない近似値だった） */
    flex: 0 0 313px;
    border-right: 1px solid color-mix(in srgb, var(--color-white) 15%, transparent);
  }
}

.p-company__overview-value {
  /* Figma実測（300:3575等）: 18px Regular・白（旧実装は16pxの近似値） */
  font-size: var(--fs-18);
  color: var(--color-white);
  margin: 0;
  line-height: var(--lh-jp);
}

/* ================================================
   p-company__map（地図・フルブリード）
   Figma: node 296:3187 内 photo-mask（300:3668, y=2518〜3037）/
   SP: 325:2054（y=4227〜4706）
   2026-07-29: 静的地図画像を Google マップの keyless iframe 埋め込みに
   置換（SOTA 判断）。コンテナの高さ比（SP 393:479 / PC 1440:519）は
   確定版の地図エリアに合わせて据え置き、iframe を絶対配置でフィットさせる。
   ================================================ */
.p-company__map {
  background-color: var(--color-white);
}

.p-company__map-placeholder {
  position: relative;
  border-radius: 0;
  /* Figma 実測比率: SP 393x479 / PC 1440x519（ブレークポイントで大きく変わる） */
  aspect-ratio: 393 / 479;
  background-color: transparent;
  overflow: hidden;
}

@media (min-width: 768px) {
  .p-company__map-placeholder {
    aspect-ratio: 1440 / 519;
  }
}

.p-company__map-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}