/* ===== page-company.css ｜ 会社概要（Figma 14486:41787 / 1440×7108）=====
   デザイン言語: 色/書体トークンは base.css。英大見出し＋和ラベルのペア、共通ボタン(.btn)、コンテンツ幅1200中央（--pad-side）を全ページで使い回す。
   共通化（2026-09-15 recruit.html 追加時）: 下層FV写真あり(.lfv--photo)・ページ内ナビ(.pnav)・小見出し(.ttl) は lower.css へ移動。
   このページ固有: 年表(.timeline)、スタッフカード(.staff-card)、概要表(.spec)、アクセス(.office) */

.lfv__en--company{letter-spacing:-.6px}   /* Chrome の Lato はインク幅が +4px 広い → 6間隔で補正（Figma実測 416px） */


/* --- 代表メッセージ（14486:41789）: base3 / pt120 pb100 --- */
.msg{position:relative;width:100%;padding:120px var(--pad-side) 100px;background:var(--c-base3);overflow:hidden}
.msg__inner{display:flex;flex-direction:column;align-items:flex-start;gap:64px;width:100%;max-width:1200px;margin-inline:auto}
.msg__row{position:relative;display:flex;align-items:flex-start;gap:120px;width:100%}
/* 装飾（Rectangle34/35: ぼかし平行四辺形）。bbox中心を基準に配置し回転 */
.msg__deco{position:absolute;max-width:none;pointer-events:none}
.msg__deco--1{left:calc(50% - 674.1px);top:814.86px;width:148.06px;height:91px;transform:rotate(16deg)}
.msg__deco--2{left:399.27px;top:-38.49px;width:151.602px;height:91.244px;transform:rotate(145deg) scaleY(-1)}
.msg__photo{position:relative;flex:none;width:500px;height:606px;overflow:hidden;border-radius:var(--r-m)}
.msg__photo img{width:100%;height:100%;object-fit:cover}
.msg__text{position:relative;display:flex;flex:1 0 0;flex-direction:column;align-items:flex-start;gap:24px;min-width:1px}
.msg__head{display:flex;flex-direction:column;align-items:flex-start;gap:32px;width:100%}
.msg__catch{font-size:var(--fs-h3);font-weight:500;line-height:1.6;letter-spacing:.28px;white-space:nowrap}
.msg__body{display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:100%}
.msg__body p{width:100%;font-size:var(--fs-body-m);font-weight:400;line-height:2;letter-spacing:.16px}
.msg__em{font-weight:500;color:var(--c-text-sub)}
.msg__sign{display:flex;align-items:flex-end;gap:16px}
.msg__role{padding-bottom:1px;font-size:var(--fs-body-m);font-weight:500;line-height:1.6;letter-spacing:.16px;color:var(--c-gray);white-space:nowrap}
.msg__name{font-size:var(--fs-h5);font-weight:500;line-height:1.6;letter-spacing:.2px;white-space:nowrap}

/* --- 沿革（14486:41808）: 白 / py100 / 左だけ余白（年表は右端まで） --- */
.history{width:100%;padding:100px 0 100px var(--pad-side);background:var(--c-base);overflow:hidden}
.history__inner{display:flex;flex-direction:column;align-items:flex-start;gap:64px;width:100%}
.timeline{display:flex;align-items:flex-start;gap:5px;width:100%}
.timeline__item{display:flex;flex-direction:column;align-items:flex-start;flex:none}
.timeline__item:last-child{flex:1 0 0;min-width:1px}
.timeline__body{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:220px}
.timeline__year{display:flex;align-items:flex-end;width:100%;height:40px;font-family:var(--font-en);font-weight:600;font-size:40px;line-height:1;color:var(--c-text-sub);white-space:nowrap;font-feature-settings:normal}
.timeline__year time{display:flex;align-items:flex-end}
.timeline__month{font-size:24px;line-height:1}
.timeline__text{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.timeline__head{width:100%;font-size:var(--fs-h5);font-weight:500;line-height:1.6;letter-spacing:.2px}
.timeline__desc{width:100%;font-size:var(--fs-body-s);font-weight:400;line-height:1.6;letter-spacing:.14px}
/* 破線 24×80（x=12.5に縦線・dash 4/3） */
.timeline__dash{width:24px;height:80px;margin-top:12px;background:repeating-linear-gradient(to bottom,var(--c-main2) 0 4px,transparent 4px 7px);background-size:1px 100%;background-position:12px 0;background-repeat:no-repeat}
.timeline__foot{display:flex;align-items:center;gap:4px}
.timeline__item:last-child .timeline__foot{width:100%}
.timeline__dot{width:25px;height:25px;flex:none;background:url("../img/lower/company_ic_diamond.svg") center/25px 25px no-repeat}
.timeline__line{width:225px;height:1px;background:var(--c-border2)}
.timeline__item:last-child .timeline__line{flex:1 0 0;width:auto;min-width:1px;background:linear-gradient(to right,#cdcdcd,rgba(205,205,205,.2))}
/* 1440未満: Figma固定値(項目254×5)だと右端が切れるため、項目を等分して線だけ縮める（本文220は維持） */
@media (max-width:1439px){
  .timeline__item{flex:1 1 0;min-width:220px}
  .timeline__foot{width:100%}
  .timeline__line{flex:1 0 0;width:auto;min-width:1px}
}

/* --- スタッフ紹介（14486:41817）: base3 / py100 / 背景文字 overlay --- */
.staff{position:relative;width:100%;padding:100px var(--pad-side);background:var(--c-base3);overflow:hidden}
.staff__bgtext{position:absolute;top:70px;right:calc(50% - 714px);font-family:var(--font-en);font-weight:600;font-size:120px;line-height:1.2;letter-spacing:-1.1px;color:var(--c-base3);mix-blend-mode:overlay;white-space:nowrap;text-align:right;pointer-events:none;font-feature-settings:normal}   /* Chrome の Lato 幅補正: Figma実測インク幅 1418px */
.staff__inner{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:64px;width:100%;max-width:1200px;margin-inline:auto}
.staff__list{display:flex;flex-wrap:wrap;align-items:flex-start;gap:64px 36px;width:100%}
.staff-card{display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:376px}
.staff-card__img{width:100%;aspect-ratio:270/180;overflow:hidden;border-radius:var(--r-m)}
.staff-card__img img{width:100%;height:100%;object-fit:cover}
.staff-card__text{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;line-height:1.6}
.staff-card__title{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;width:100%;font-weight:500}
.staff-card__role{font-size:14px;letter-spacing:.14px;color:var(--c-gray);white-space:nowrap}
.staff-card__name{width:100%;font-size:var(--fs-h5);letter-spacing:.2px}
.staff-card__desc{width:100%;font-size:var(--fs-body-s);font-weight:400;letter-spacing:.14px}

/* --- 会社概要（14486:41828）: 白 / py100 / 左360(見出し＋写真300×364) ＋ 表720 --- */
.outline{width:100%;padding:100px var(--pad-side);background:var(--c-base);overflow:hidden}
.outline__inner{display:flex;align-items:flex-start;gap:120px;width:100%;max-width:1200px;margin-inline:auto}
.outline__side{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-under-h2);flex:none;width:360px}
.outline__photo{width:300px;height:364px;overflow:hidden;border-radius:var(--r-m)}
.outline__photo img{width:100%;height:100%;object-fit:cover}
.spec{display:flex;flex-direction:column;align-items:flex-start;flex:none;width:720px}
.spec__row{display:flex;align-items:flex-start;width:100%}
/* 行高: Figmaは 16px×1.6=25.6 を 26px に丸めて各行 83px（2行=109px）で描画しているため 26px 指定で合わせる */
.spec__th{flex:none;width:150px;padding:28px 8px;border-top:1px solid var(--c-border-sub);font-size:var(--fs-body-m);font-weight:500;line-height:26px;letter-spacing:.16px;white-space:nowrap}
.spec__row:nth-child(even) .spec__th{border-top-color:var(--c-main2)}
.spec__td{flex:1 0 0;min-width:1px;padding:28px 8px 28px 40px;border-top:1px solid var(--c-border2);font-size:var(--fs-body-m);font-weight:400;line-height:26px;letter-spacing:.16px}
.spec__row:last-child .spec__th{border-bottom:1px solid var(--c-border-sub)}
.spec__row:last-child .spec__td{padding-left:36px;border-bottom:1px solid var(--c-border2)}

/* --- アクセス（14486:41848）: base3 / pb160 / 左sticky ＋ 右720 --- */
/* pb は Figma値160 ＋ 1px（Figma側は各テキスト高を整数に丸めるためセクション計 1223.8→1224。フッター以降の 1px ズレをここで吸収） */
.access{width:100%;padding:0 var(--pad-side) calc(var(--sp-section-gap) + 1px);background:var(--c-base3)}
.access__inner{display:flex;align-items:flex-start;gap:120px;width:100%;max-width:1200px;margin-inline:auto}
.access__side{position:sticky;top:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-under-h3);flex:none;width:360px;padding:100px 0 160px}
.access__lead{font-size:var(--fs-body-m);font-weight:400;line-height:1.6;letter-spacing:.16px;white-space:nowrap}
.access__list{display:flex;flex-direction:column;align-items:flex-start;gap:64px;flex:none;width:720px;padding-top:100px}
.office{display:flex;flex-direction:column;align-items:flex-start;gap:24px;width:100%}
.office__info{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%}
.office__head{display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:100%}
.office__name{width:100%;padding-bottom:8px;border-bottom:1px solid var(--c-border);font-size:var(--fs-h5);font-weight:500;line-height:1.6;letter-spacing:.2px;color:var(--c-text-sub)}
.office__row{display:flex;align-items:flex-start;justify-content:space-between;width:100%}
.office__addr{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:var(--fs-body-m);font-weight:400;line-height:1.6;letter-spacing:.16px}
.office__note{width:100%;font-size:var(--fs-body-s);font-weight:400;line-height:1.6;letter-spacing:.14px;color:var(--c-gray)}
.office__map{width:100%;height:300px;overflow:hidden;border-radius:var(--r-m)}
.office__map img{width:100%;height:100%;object-fit:cover}
/* Google map ボタン（button-map）: 白 border main / pl20 pr8 py6 / gap40 / 文字15px / アイコン枠 p8 内18px に14px矢印を-45°回転 */
.btn-map{display:inline-flex;align-items:center;justify-content:center;gap:40px;flex:none;padding:6px 8px 6px 20px;background:var(--c-base);border:1px solid var(--c-border);border-radius:var(--r-m);color:var(--c-text-sub)}
.btn-map__label{padding-bottom:1px;font-size:15px;font-weight:500;line-height:1.2;letter-spacing:.15px;white-space:nowrap}
.btn-map__icon{display:flex;align-items:center;justify-content:center;padding:8px;background:var(--c-main);border-radius:3px;overflow:hidden}
.btn-map__box{display:flex;align-items:center;justify-content:center;width:18px;height:18px;overflow:hidden}
.btn-map__arrow{width:14px;height:14px;flex:none;transform:rotate(-45deg)}
.btn-map__arrow .ic-bar{fill:#b4e7ff}
.btn-map__arrow .ic-chev{fill:none;stroke:#fff;stroke-width:1.5}

/* --- Contact-footer 差分（Figma 14231:3432 このページのインスタンスは pt140 ＋ フッター上に罫線あり pt48。thanks ページ(pt100・罫線なし)と異なるため本ページのみ上書き） --- */
.contact-footer--lower{padding-top:140px}
.contact-footer--lower .footer__top{padding-top:48px;border-top:1px solid var(--c-gray)}

/* ===== SP（768px以下）: SPカンプ無し → TOP-SP（375）のルール（左右24px・SPトークン・1カラム）から導出 ===== */
@media (max-width:768px){

  /* --- 代表メッセージ: 写真→文の縦積み。装飾は右上に縮小配置（1は非表示） --- */
  .msg{padding:var(--sp-section-gap) var(--sp-side-m) 64px}
  .msg__inner{gap:40px}
  .msg__row{flex-direction:column;gap:32px}
  .msg__deco--1{display:none}
  .msg__deco--2{left:auto;right:-24px;top:-48px;width:96px;height:auto}
  .msg__photo{width:100%;height:auto;aspect-ratio:500/606}
  .msg__head{gap:24px}
  .msg__catch{white-space:normal}
  .msg__body p{line-height:1.9}

  /* --- 沿革: 横の年表→縦の年表（左に菱形＋縦線、右に本文） --- */
  .history{padding:var(--sp-section-gap) var(--sp-side-m)}
  .history__inner{gap:40px}
  .timeline{flex-direction:column;gap:0}
  .timeline__item{position:relative;flex:none;width:100%;min-width:0;padding:0 0 32px 40px}
  .timeline__item:last-child{padding-bottom:0}
  .timeline__body{width:100%}
  .timeline__year{height:auto;font-size:32px}
  .timeline__year:empty{display:none}
  .timeline__month{font-size:20px}
  .timeline__dash{display:none}
  .timeline__foot{position:absolute;left:0;top:0;bottom:0;flex-direction:column;gap:8px;width:25px}
  .timeline__item:last-child .timeline__foot{width:25px}
  .timeline__line,.timeline__item:last-child .timeline__line{flex:1 0 0;width:1px;height:auto;min-height:0;background:var(--c-border2)}
  .timeline__item:last-child .timeline__line{background:linear-gradient(to bottom,#cdcdcd,rgba(205,205,205,.2))}

  /* --- スタッフ紹介: 2列（gap16）。背景文字は縮小して右上へ --- */
  .staff{padding:var(--sp-section-gap) var(--sp-side-m)}
  .staff__bgtext{top:auto;bottom:16px;right:-4px;font-size:40px;letter-spacing:-.4px}
  .staff__inner{gap:40px}
  .staff__list{gap:32px 16px}
  .staff-card{width:calc((100% - 16px) / 2);gap:12px}
  .staff-card__role{font-size:12px;white-space:normal}

  /* --- 会社概要: 見出し→写真→表の縦積み。表は th/td を縦積み（thは12px太字） --- */
  .outline{padding:var(--sp-section-gap) var(--sp-side-m)}
  .outline__inner{flex-direction:column;gap:40px}
  .outline__side{width:100%;gap:24px}
  .outline__photo{width:100%;height:auto;aspect-ratio:300/364}
  .spec{width:100%}
  .spec__row{flex-direction:column}
  .spec__th{width:100%;padding:14px 0 4px;font-size:12px;font-weight:700;line-height:1.6;white-space:normal}
  .spec__td{width:100%;padding:0 0 14px;border-top:0;line-height:1.8}
  .spec__row:last-child .spec__th{border-bottom:0}
  .spec__row:last-child .spec__td{padding-left:0}

  /* --- アクセス: sticky解除。見出し→リード→（拠点名→住所→ボタン→地図）の縦積み --- */
  .access{padding:0 var(--sp-side-m) var(--sp-section-gap)}
  .access__inner{flex-direction:column;gap:0}
  .access__side{position:static;width:100%;padding:var(--sp-section-gap) 0 32px;gap:var(--sp-under-h3)}
  .access__lead{white-space:normal}
  .access__list{width:100%;padding-top:0;gap:40px}
  .office{gap:16px}
  .office__row{flex-direction:column;gap:12px}
  .office__map{height:200px}
}

/* ===== タブレット（769〜1200px）: カンプ未支給。PCの2カラムを保ったまま固定幅を可変にする ===== */
@media (min-width:769px) and (max-width:1200px){
  .outline__inner{gap:48px}
  .spec{flex:1 1 0;width:auto;min-width:0}
  .spec__th{width:120px}
  .access__list{flex:1 1 0;width:auto;min-width:0;padding-top:0;gap:40px}
  .msg__row{gap:48px}
  /* 代表写真: 固定500pxだと本文列が潰れるため幅を可変に。比率500:606を箱で固定し cover で切る（縦伸びしない） */
  .msg__photo{width:min(500px,42%);height:auto;aspect-ratio:500/606}
  .msg__deco--2{left:calc(min(500px,42%) - 120px)}   /* 装飾は写真の右上に追従（本文列に被らない位置） */
  .msg__catch{white-space:normal}
  .timeline__item{min-width:150px}
  .staff__bgtext{right:0}
}

/* 追記: 769〜1200px の細部（沿革カードと地図ボタンの折り返し） */
@media (min-width:769px) and (max-width:1200px){
  .timeline__body{width:auto;min-width:0}
  .btn-map{gap:16px}
  .contact__hours{white-space:normal}
}