/* =========================================================
   会社を知る /about/ — about.css（lower.css の後に読む）
   01 強み3点／02 代表メッセージ／03 ミッション（背景の図形 M12）／04 歩み（左に見出し、右に年表）／05 会社概要と拠点
   ========================================================= */

/* 01 強み */
.strengths { margin: 0; padding: 0; list-style: none; }
.strengths .lpanel__in { display: flex; flex-direction: column; height: 100%; }
.strengths .lpanel__text { flex: 1; }
.strengths .text-link { align-self: flex-start; }

/* 02 代表メッセージ */
.message__media .ph-frame { aspect-ratio: 4 / 3; }
.message__cap { margin-top: 12px; font-size: 13px; font-weight: var(--fw-bold); letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.message .split__body > .sec-head { margin-bottom: 28px; }
.message .split__body { align-self: start; }

/* 03 ミッション・バリュー：見出し（ミッション）を中央に大きく。背景に吹き出しと円 */
.mission__head .sec-title { font-size: calc(var(--fs-h2) * 1.08); }
.values { margin: 0; padding: 0; list-style: none; }
.value__in { height: 100%; padding: 28px 24px 26px; border-radius: var(--radius-m); background: var(--color-tint); text-align: center; }
.value__en { font-size: 11px; font-weight: var(--fw-medium); line-height: 1.5; letter-spacing: .16em; color: var(--color-ink-sub); }
.value__title { margin-top: 6px; font-size: 20px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: .12em; }
.value__text { margin-top: 12px; font-size: 14px; line-height: 1.9; letter-spacing: var(--ls-ja); text-align: left; }
.bgs--mission .s1 { left: 2%; top: 80px; width: 7%; --c: var(--color-layer); --sp: -50; --i: 0; --fd: 6.8s; --fy: -12px; --fr: -6deg; }
.bgs--mission .s2 { left: 9.5%; top: 150px; width: 2.2%; --c: var(--color-brand-mid); --blend: normal; --sp: -80; --i: 1; --fd: 4.8s; --fy: -8px; }
.bgs--mission .s3 { left: 90%; top: 120px; width: 6%; --c: var(--color-tint); --sp: 60; --i: 2; --fd: 8s; --fy: -10px; --fr: 6deg; }
@media (max-width: 1023px) {
  .bgs--mission .s1 { left: -4%; top: 40px; width: 16%; }
  .bgs--mission .s2 { left: 12%; top: 110px; width: 4%; }
  .bgs--mission .s3 { left: 86%; top: 60px; width: 14%; }
}

/* 04 歩み */
.history__list .timeline__time { color: var(--color-ink); }
.history__list .timeline__item:last-child .timeline__title { display: inline-block; padding: 0 10px; border-radius: var(--radius-xs); background: var(--color-brand); color: var(--color-on-brand); }

/* 05 会社概要と拠点 */
.offices__title { margin-top: 56px; margin-bottom: 16px; }
.offices { margin: 0; padding: 0; list-style: none; }
.office { padding: 0; }
.office__in { height: 100%; padding: 22px 20px 20px; }
.office__area {
  display: inline-block; padding: 1px 10px; border-radius: var(--radius-xs);
  background: var(--color-brand); color: var(--color-on-brand);
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1.7; letter-spacing: .08em;
}
.office__name { margin-top: 10px; font-size: 18px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-heading); }
.office__addr { margin-top: 8px; font-size: 14px; line-height: 1.8; letter-spacing: var(--ls-ja); }
.office__postal, .office__street { display: block; }
.office__street { word-break: auto-phrase; text-wrap: balance; }
.office__access { margin-top: 8px; font-size: 13px; line-height: 1.8; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.office__opened { margin-top: 8px; font-size: 12px; line-height: 1.7; color: var(--color-gray); }

@media (min-width: 768px) {
  .value__in { padding: 34px 30px 30px; }
  .value__title { font-size: 22px; }
}
@media (min-width: 1024px) {
  .history { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 80px; align-items: start; }
  .history__head { position: sticky; top: 120px; }
  .history .lsec__inner > .sec-head, .history > .sec-head { margin-bottom: 0; }
  .history__list { padding-top: 8px; }
  .offices__title { margin-top: 72px; }
}