@charset "UTF-8";

/* ============================================================
   /about/ ページ固有スタイル（プレフィックス: AB-）

   設計方針（CLAUDE.md / ユーザー指示）:
   ・レイアウトは Wrapper1000 を軸、文字ブロックは WrapperP で左右余白、
     横並びは DispTbl（PT-DispTblCell + PT-G##）で実装。
   ・文字サイズ・色・余白・背景は共通クラス（heading / heading2 / lead /
     FS120 / FCDarkBlue / FCBlue / FCWhite / StatLG / StatNavy 等）に任せる。
   ・このファイルに持つのは「共通クラスで賄えない独自部分」だけ:
       1) 英語overline（AB-ov）
       2) HERO の特大見出し（AB-hero__title）と Scroll 装飾（AB-scroll）
       3) HERO コラージュ（AB-collage / c-main 等）
       4) 写真トリミング（AB-fig：角丸・影・3:2クロップ）
       5) 数字カードの枠（AB-num）
       6) カードの枠・ホバー（AB-cap）と二面（AB-face）
       7) 文章ブロック（AB-prose）と設備注記（AB-eqnote）
       8) スクロール表示 reveal は共通へ移行（common-extend.css/.js の .reveal を使用）
   配色トークン（既存アクセント）:
       濃紺 #02386d（= 共通 FCDarkBlue）/ 青 #2489ce / 淡青背景 #f5faff
   ============================================================ */

/* 1) ============================ 英語overline ============================ */
.AB-ov {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .32em;
  color: #2489ce;
  text-transform: uppercase;
  margin: 0 0 .9em;
}

.AB-ov::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
}

/* 中央寄せ（is-center）のときは右側にも線を出す */
.AB-ov.is-center {
  justify-content: center;
}

.AB-ov.is-center::after {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
}

/* 濃紺背景（StatNavy）の上に乗せる overline は明るい青に */
.AB-ov-onNavy {
  color: #8cc4f3;
}


/* 2) ============================ HERO 特大見出し ＋ Scroll 装飾 ============================
   見出しは共通クラスに無い主役級サイズのため独自。色は共通 FCDarkBlue を併用。 */
/* HERO 背景：白→淡青のグラデ（index2 の雰囲気。共通に該当が無いため独自） */
.AB-hero {
  background: linear-gradient(180deg, #fff 0%, #f5faff 100%);
}

.AB-hero__title {
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height: 1.32;
  font-weight: 900;
  letter-spacing: .01em;
  margin: .1em 0 0;
}

/* アクセント語（青） */
.AB-hero__title .mk {
  color: #2489ce;
}

/* Scroll インジケーター（下に伸び縮みする横線） */
.AB-scroll {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-top: 2.4em;
  font-size: .7rem;
  letter-spacing: .3em;
  color: #5b6573;
  text-transform: uppercase;
}

.AB-scroll::after {
  content: "";
  width: 42px;
  height: 1px;
  background: #5b6573;
  animation: ab-line 1.8s ease-in-out infinite;
}

@keyframes ab-line {

  0%,
  100% {
    transform: scaleX(.4);
    opacity: .4;
    transform-origin: left;
  }

  50% {
    transform: scaleX(1);
    opacity: 1;
    transform-origin: left;
  }
}


/* 3) ============================ HERO コラージュ（3枚） ============================ */
.AB-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
}

.AB-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 18px 40px -22px rgba(2, 56, 109, .5);
}

.AB-collage .c-main {
  grid-column: 1 / 3;
  aspect-ratio: 16/9;
}

.AB-collage .c-sub1 {
  aspect-ratio: 3/4;
}

.AB-collage .c-sub2 {
  /* sub1 と同じサイズで揃える指定（旧: 1/1 正方形 → 3/4 縦長）。
     2枚のサブ写真の高さ・比率を一致させ、コラージュの見た目を均一にするため。 */
  aspect-ratio: 3/4;
}


/* 4) ============================ 写真トリミング（AB-fig） ============================
   角丸・影は共通に無い見せ方なので独自。アスペクト比を固定して中央クロップ。 */
.AB-fig {
  display: block;
  margin: 0;
  overflow: hidden;
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 20px 44px -26px rgba(2, 56, 109, .55);
}

.AB-fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 標準トリミング（横3:2）。AB-fig系の基準となる横長比率。
   一般的な写真をクセなく中央クロップしたいとき用。 */
.AB-fig-32 {
  aspect-ratio: 3 / 2;
}

/* 縦長トリミング（5:6）。会社概要など、隣の縦に長い表と高さを合わせたい写真用。
   AB-fig-32（横3:2）の縦長版として用意。 */
.AB-fig-56 {
  aspect-ratio: 5 / 6;
}

/* さらに縦長のトリミング（3:4）。AB-fig-56（5:6）より縦に伸ばしたいとき用。
   人物の立ち姿や、より縦長の表と高さを揃えたい写真に使う。 */
.AB-fig-34 {
  aspect-ratio: 3 / 4;
}

/* 横長トリミング（5:3）。会社概要の入口写真など、セクション幅いっぱいの
   横ぶち抜きバナーに使う。実画像(1400x857≒5:3)に近い比率でクロップを最小化。 */
.AB-fig-53 {
  aspect-ratio: 5 / 3;
}

/* 背景を抜いた透過イラスト(SVG)用。枠の影が浮いて不自然になるため、
   この修飾クラスを付けた図だけドロップシャドウを打ち消す（写真コラージュの影は維持）。 */
.AB-fig--flat {
  box-shadow: none;
}


/* 5) ============================ 数字カード枠（AB-num） ============================
   IN NUMBER セクションの各カードの枠。数字自体のサイズ・太字・色は共通クラス
   （SecBiggestTit / FDArial / FDB / FCABBlue 等）に任せている。 */
.AB-num {
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 16px;
  padding: clamp(20px, 3vw, 30px);
}


/* 6) ============================ カード枠（AB-cap）＋ 二面（AB-face） ============================ */
.AB-cap {
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 16px;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}

.AB-cap:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -26px rgba(2, 56, 109, .55);
}

/* カード内の写真は上だけ角丸（AB-fig の角丸を打ち消し、カードの角に合わせる） */
.AB-cap .AB-fig {
  border-radius: 0;
  box-shadow: none;
}

.AB-cap__body {
  padding: 16px 18px 18px;
}

/* 二面（FRONT / BACK）：淡青の小箱 */
.AB-face {
  background: #f5faff;
  border-radius: 14px;
  padding: 16px 18px;
}


/* 7) ============================ 文章ブロック（AB-prose）＋ 設備注記（AB-eqnote） ============================
   レイアウト幅/背景/見出しはコモン（Wrapper1000 / WrapperP / heading / StatLG 等）に寄せ、
   ここはコモンに無い「文章の最大幅」「破線枠の注記」だけを持つ。 */

/* 文章を読みやすい幅（最大46em）で中央寄せ。ABOUT本文・3本柱リードに使う */
.AB-prose {
  max-width: 46em;
  margin-left: auto;
  margin-right: auto;
}

.AB-prose p {
  margin: 0 0 1.3em;
}

.AB-prose p:last-child {
  margin-bottom: 0;
}

/* 設備の補足注記（破線枠ボックス） */
.AB-eqnote {
  padding: 20px 22px;
  background: #fff;
  border: 1px dashed #2489ce;
  border-radius: 14px;
  color: #36404d;
  line-height: 1.9;
}


/* 8) スクロール表示 reveal は common-extend.css の汎用 .reveal に統合したため、
      本ページ固有の定義は撤去（同名クラスの二重定義を避ける）。 */