@charset "UTF-8";
/* ===================================================================
   私たちについて（about.html）ページ固有スタイル
   Figma: about us  2006:90 (375 × 6759)
     ページ見出し      2006:401 (375×390)
     経営理念          2006:403 (375×1092)
     これまでの取り組み 2008:474 (375×1776)
     代表挨拶          2007:405 (375×1098)
     代表の経歴・ご紹介 2019:622 (375×921)
     会社概要          2019:653 (375×712)
   共通部品（ヘッダー／メニュー／フッター／Topへ／PC固定背景／.sechead2）は
   css/style.css を参照。ページ固有クラスは ab- 接頭辞。
   =================================================================== */

:root {
  --c-navy2: #2a4d9a;      /* 経営理念セクション背景 */
  --c-pale: #f6f9ff;       /* 会社概要セクション背景 */
  --c-label: #2275fa;      /* 会社概要の項目名 */
}

/* 1. ページ見出しは共通コンポーネント .pagehead（css/style.css）を使用
*/

/* -------------------------------------------------------------------
   2. 経営理念（2006:403 / 375×1092）
   ------------------------------------------------------------------- */
.ab-philosophy {
  position: relative;
  padding: 72px var(--pad-side);
  background: var(--c-navy2);
  color: var(--c-white);
  overflow: hidden;
}
.ab-philosophy__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .2;
}

.ab-philosophy__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}

/* 見出し：gap 8 / 小見出しは16px Regular（他セクションと異なる） */
.ab-philosophy .sechead2 { gap: 8px; }
.ab-philosophy .sechead2__row { width: auto; }
.ab-philosophy .sechead2__ja,
.ab-philosophy .sechead2__note { color: var(--c-white); }
/* Figmaは24pxと12pxが1ノード＝行高24px。12px側の行ボックスが行を押し広げないよう1emに抑える */
.ab-philosophy .sechead2__sub { font-size: 12px; line-height: 1; font-weight: 700; }
.ab-philosophy__note { font-size: 16px; font-weight: 400; line-height: 24px; color: var(--c-white); white-space: nowrap; }

.ab-philosophy__body { display: flex; flex-direction: column; align-items: flex-start; gap: 48px; }

/* Figmaでは高さ0の枠に1pxの線が上側へはみ出して配置されている（＝占有高0） */
.ab-hr { width: 100%; max-width: var(--w-content); height: 1px; margin-top: -1px; }

.ab-core { display: flex; gap: 10px; align-items: flex-start; justify-content: center; width: 100%; max-width: var(--w-content); }

/* 縦ラベルの基本形は共通の .vlabel。ここでは高さと文字サイズのみ指定 */
.ab-core__label { height: 177px; }
.ab-core__label--02 { height: 178px; }
.ab-core__label > span { font-size: 14px; }

.ab-core__body { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 277px; max-width: calc(100% - 34px); }
.ab-core__title { width: 100%; font-size: 24px; font-weight: 400; line-height: 32px; }
.ab-core__text { width: 100%; font-size: 14px; font-weight: 400; line-height: 24px; }

/* -------------------------------------------------------------------
   3. これまでの取り組み（2008:474 / 375×1776）
   ------------------------------------------------------------------- */
.ab-works { padding: 72px var(--pad-side); display: flex; flex-direction: column; align-items: flex-start; gap: 56px; }

.ab-works__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 56px; }
.ab-works__lead { width: 100%; max-width: var(--w-content); font-size: 14px; font-weight: 400; line-height: 24px; }

.ab-works__list { display: flex; flex-direction: column; align-items: center; gap: 64px; width: 100%; }

/* 各項目はフレーム幅(375px)いっぱい ＝ セクションの左右余白32pxを食い抜く */
.ab-work {
  display: flex;
  align-items: center;
  width: calc(100% + var(--pad-side) * 2);
  margin: 0 calc(var(--pad-side) * -1);
}

/* 縦組みの見出し：幅15pxで1文字ずつ折り返す（Figmaと同じ作り） */
.ab-work__tab { flex: 0 0 64px; display: flex; align-items: center; align-self: stretch; }
.ab-work__tab span {
  width: 15px;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: var(--c-blue);
  word-break: break-all;
  line-break: anywhere;
}
/* 64pxの枠のうち32pxはRectangle 24（余白）。左タブは枠左から32px、右タブは枠右から32px */
.ab-work__tab--left { justify-content: flex-start; padding-left: 32px; }
.ab-work__tab--right { justify-content: flex-end; padding-right: 32px; }

.ab-work__main { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; width: 311px; max-width: calc(100% - 64px); }

.ab-work__thumb { width: 100%; height: 100px; border-radius: 4px; overflow: hidden; }
.ab-work__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Figmaのトリミング位置（枠高100px基準の％をpxに換算。
   CSSの margin の％は「幅」基準で解決されるため、％のままでは合わない） */
.ab-work__thumb img.crop-bochi  { height: 233.25px; margin-top: -86.45px; }
.ab-work__thumb img.crop-sousai { height: 207.36px; margin-top: -41.31px; }
.ab-work__thumb img.crop-pet    { height: 207.33px; margin-top: -53.67px; }

.ab-work__list { display: flex; align-items: flex-start; width: 100%; }
.ab-work__list p { width: 100%; font-size: 14px; font-weight: 400; line-height: 24px; color: var(--c-blue); }
.ab-work__list--pad-right { padding-right: 32px; }
.ab-work__list--pad-left { padding-left: 32px; }

/* -------------------------------------------------------------------
   4. 代表挨拶（2007:405 / 375×1098）
   ------------------------------------------------------------------- */
.ab-greeting { position: relative; padding: 72px var(--pad-side); overflow: hidden; }
.ab-greeting__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.ab-greeting__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 48px; }

.ab-greeting__portrait { width: 158px; height: 158px; }

.ab-greeting__body { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: var(--w-content); }
.ab-greeting__text { width: 100%; font-size: 14px; font-weight: 400; line-height: 24px; }

/* -------------------------------------------------------------------
   5. 代表の経歴・ご紹介（2019:622 / 375×921）
   ------------------------------------------------------------------- */
.ab-profile { padding: 72px var(--pad-side); }
.ab-profile__inner { display: flex; flex-direction: column; align-items: center; gap: 48px; }

.ab-profile__body { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: var(--w-content); }

/* Figmaは1つのテキストノード（24px＋14px混在）で 311×101 */
.ab-profile__name { width: 100%; text-align: center; font-size: 14px; font-weight: 400; line-height: 24px; }
.ab-profile__name b { font-size: 24px; font-weight: 400; line-height: 24px; }

.ab-profile__history { display: flex; gap: 8px; align-items: flex-start; width: 100%; font-size: 14px; font-weight: 400; line-height: 32px; white-space: nowrap; }

.ab-profile__text { width: 100%; font-size: 14px; font-weight: 400; line-height: 24px; }

/* -------------------------------------------------------------------
   6. 会社概要（2019:653 / 375×712）
   ------------------------------------------------------------------- */
.ab-company { padding: 72px var(--pad-side); background: var(--c-pale); }
.ab-company__inner { display: flex; flex-direction: column; align-items: center; gap: 48px; }

.ab-company__list { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: var(--w-content); }

.ab-company__row { width: 100%; font-size: 14px; font-weight: 400; line-height: 24px; }
.ab-company__row dt { color: var(--c-label); }
.ab-company__row dd { margin: 0; color: var(--c-blue); }