@charset "UTF-8";
/* =====================================================================
   私たちについて（about.html）専用
   -------------------------------------------------------------------
   採用サイト（careers.html / recruit.css）の見せ方を、コーポレートサイトの
   デザインシステムに移植したもの。借りているのは次の4つ:
     ・濃紺 #03111a 基調と明るいグレー #e7e8ec の交互で緩急をつける
     ・セクションを繋ぐ写真帯（濃紺を screen で重ね、次の地色へグラデ）
     ・青い枠 + 上辺3px + 内側グロー のカード
     ・円形ビジュアル（数値／AI×経営改善×建設）
   逆に借りていないもの: Barlow の英字ラベルと vw ベースの可変レイアウト。
   コーポレート側は .flabel（番号 + Futura）と 1440px 固定で統一しているため。

   読み込み順は styles.css → lp.css → about.css。
   ===================================================================== */

.ab {
  --ab-navy: #03111a;
  --ab-blue: #086dff;
  --ab-gray: #e7e8ec;
}

/* 画像は採用サイトと同じ素材を使っている（同じ会社・同じ撮影）。
   置き場所は images/recruit/ のまま参照する */


/* .inner の左右余白は .lpsec が持っている（.lpsec .inner { padding: 0 160px }）。
   ここは .lpsec を使わないので、同じガターを自前で持つ */
.ab-hero__in,
.ab-mission__in,
.ab-values__in,
.ab-team__in,
.ab-company__in,
.ab-join__in { padding-inline: 160px; }

/* ---------------------------------------------------------------
   共通パーツ
   --------------------------------------------------------------- */

/* 青い枠 + 上辺3px + 内側グロー。careers のカードと同じ質感 */
.ab-card {
  border: 1px solid var(--ab-blue);
  border-top-width: 3px;
  box-shadow: inset 0 -30px 50px 0 rgba(8, 109, 255, 0.2);
}

/* セクション間の写真帯。画像は枠の3倍の高さで置き中央だけ見せる */
.ab-band { position: relative; height: 280px; overflow: hidden; }
.ab-band img { position: absolute; left: 0; top: -100%; width: 100%; height: 300%; object-fit: cover; }
.ab-band__screen { position: absolute; inset: 0; background: var(--ab-navy); mix-blend-mode: screen; }
.ab-band__grad { position: absolute; inset: 0; }
.ab-band--to-light .ab-band__grad { background: linear-gradient(to top, var(--ab-gray) 0%, rgba(231,232,236,0) 100%); }
.ab-band--to-dark  .ab-band__grad { background: linear-gradient(to top, var(--ab-navy) 0%, rgba(3,17,26,0) 100%); }

/* 濃紺セクションの中では .flabel の英字も白抜きにする */
.ab-dark { background: var(--ab-navy); color: var(--white); }
.ab-dark .flabel__num, .ab-dark .flabel__en { color: var(--white); }

/* ---------------------------------------------------------------
   HERO
   --------------------------------------------------------------- */
.ab-hero {
  position: relative; height: 640px; overflow: hidden;
  display: flex; align-items: flex-end;
  background: var(--ab-navy); color: var(--white);
}
.ab-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 濃紺を screen で重ねて写真を締める（careers のヒーローと同じ処理） */
.ab-hero__screen { position: absolute; inset: 0; background: var(--ab-navy); mix-blend-mode: screen; }
.ab-hero__grad {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--ab-navy) 0%, rgba(3,17,26,0.92) 34%, rgba(3,17,26,0.5) 78%, rgba(3,17,26,0.78) 100%);
}
.ab-hero__deco { position: absolute; right: -80px; bottom: -160px; width: 560px; opacity: 0.18; }
.ab-hero__in { position: relative; padding-bottom: 96px; }
.ab-hero__body { width: 980px; display: flex; flex-direction: column; gap: 24px; }
.ab-hero__title {
  font-size: 56px; font-weight: 700; line-height: 1.35; letter-spacing: 2.8px; color: var(--white);
  text-shadow: 0 0 24px rgba(8, 109, 255, 0.45);
}
.ab-hero .ab-hero__lead { color: var(--white); max-width: 880px; }

/* ---------------------------------------------------------------
   01 MISSION
   --------------------------------------------------------------- */
/* [廃止] 「目指す生産性 10倍」の円（.ab-orb）と、その数値をカウントアップする
   about.js。2026年8月のミッション改訂で「10倍」を掲げなくなったため両方削除した。
   横並びだった .ab-mission__in は、本文を全幅で読ませる1カラムに戻している。 */
.ab-mission { padding: 140px 0; }
.ab-mission__text { display: flex; flex-direction: column; gap: 24px; }
.ab-mission__h { color: var(--white); line-height: 1.5; margin-bottom: 8px; }
/* ミッション本文は3段落ある。1カラムのまま全幅に流すと1行が長すぎて読みにくいので、
   欧文の推奨行長（1行 45〜75字相当）に近づくところで止める */
.ab-mission__text .p1,
.ab-mission__text > p { max-width: 900px; }
/* 素の <p>（管理画面のHTML欄から来るもの）にも .p1 の字面を当てる */
.ab-mission__text > p,
.ab-team__lead > p {
  font-size: 16px; font-weight: 400; line-height: 1.75; letter-spacing: 0.8px;
}

/* 社名の由来。ミッション本文を受ける枠。
   「KK Generation」= Kensetsu + Keystone + Generation が一目で分かることが目的なので、
   英字だけを大きく・青で立て、和訳はその下に小さく添える。
   幅は本文（900px）に揃えて、読みの流れを切らない。 */
.ab-origin {
  max-width: 900px;
  padding: 32px 36px 34px;
  display: flex; flex-direction: column; gap: 18px;
}
.ab-origin__lead { color: rgba(255, 255, 255, 0.82); }
/* リード文の中の社名。綴りは白のまま英字書体で置き、頭文字 K / K / G だけを
   青く抜く。下の3語（Kensetsu / Keystone / Generation）と色で対応させ、
   「どの文字がどの語なのか」を読む前に見せるのが狙い */
.ab-origin__name {
  font-family: var(--font-en); font-weight: 500;
  font-size: 1.15em; letter-spacing: 0.5px; color: var(--white);
}
.ab-origin__name b { font-weight: 500; color: var(--ab-blue); }
/* 結びの1文の中の「KK Generation」 */
.ab-origin__word {
  font-family: var(--font-en); font-weight: 500;
  letter-spacing: 0.5px; color: var(--ab-blue);
}
/* 3語を横並び。狭いときは wrap で素直に縦積みになる */
.ab-origin__terms { display: flex; flex-wrap: wrap; gap: 16px 64px; }
.ab-origin__term { display: flex; flex-direction: column; gap: 6px; }
.ab-origin__en {
  font-family: var(--font-en); font-weight: 500;
  font-size: 30px; line-height: 1.1; letter-spacing: 1px; color: var(--ab-blue);
}
/* dd の既定インデントを消す */
.ab-origin__ja { margin: 0; font-size: 15px; line-height: 1.6; color: var(--white); }
.ab-origin__note { color: rgba(255, 255, 255, 0.82); }

/* ---------------------------------------------------------------
   02 VALUES
   --------------------------------------------------------------- */
.ab-values { padding: 0 0 140px; }
.ab-values__in { display: flex; flex-direction: column; gap: 56px; }
/* 5枚を3列で流す。件数が増減してもCSSを触らずに済む */
.ab-vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
/* 本文は「一言の宣言 + 具体」の2段落。gap を詰めて1つの塊に見せる
   （番号・見出しとの間だけは margin で開ける） */
.ab-value { padding: 36px 32px 40px; display: flex; flex-direction: column; gap: 10px; }
.ab-value__num {
  font-family: var(--font-en); font-weight: 500;
  font-size: 40px; line-height: 1; letter-spacing: 2px; color: var(--ab-blue);
}
.ab-value__title { font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: 1px; color: var(--white); margin-bottom: 4px; }
/* 本文は .p2 相当。管理画面のHTML欄から来る素の <p> にも同じ字面を当てるので、
   クラスではなく「この枠の中の p」でも受ける（.faqitem__body と同じ考え方） */
.ab-value__text,
.ab-value > p {
  font-size: 14px; font-weight: 400; line-height: 1.75; letter-spacing: 0;
  color: rgba(255, 255, 255, 0.82);
}
/* 1段落目は宣言文。2段落目より少し明るくして主従をつける */
.ab-value__text:first-of-type,
.ab-value > p:first-of-type { color: var(--white); font-weight: 500; }

/* ---------------------------------------------------------------
   03 TEAM（明るい地）
   --------------------------------------------------------------- */
.ab-team { background: var(--ab-gray); color: var(--primary-1-2); padding: 120px 0 140px; }
.ab-team__in { display: flex; flex-direction: column; gap: 72px; }
/* 採用ページ（EXPERTISE）と同じ2段落のリード。中央寄せで幅を絞る */
.ab-team__lead { max-width: 1040px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; gap: 24px; }

/* AI × 経営改善 × 建設 の円。人物ワイヤーフレームを薄く敷く */
.ab-triad {
  position: relative; height: 420px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
}
.ab-triad__bg {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 860px; height: 420px; object-fit: cover; opacity: 0.18;
}
.ab-triad__ring {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 380px; height: 380px; border-radius: 50%;
  border: 1px solid rgba(8, 109, 255, 0.3);
  box-shadow: inset 0 0 160px 1px rgba(8, 109, 255, 0.2);
}
.ab-triad__logo { position: relative; width: 200px; height: auto; }
.ab-triad__title {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 40px; font-weight: 700; letter-spacing: 2px;
  color: var(--ab-blue); text-shadow: 0 0 40px var(--white);
}
.ab-triad__x { width: 22px; height: 22px; }
.ab-triad__lead { position: relative; max-width: 1000px; text-align: center; }

.ab-members { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.ab-member {
  background: var(--white); padding: 36px 36px 40px;
  border-top: 3px solid var(--ab-blue);
  display: flex; flex-direction: column; gap: 16px;
}
.ab-member__photo { width: 220px; height: auto; }
.ab-member__role { color: #4b5563; }
.ab-member__namerow { display: flex; align-items: baseline; gap: 16px; }
.ab-member__name { font-size: 24px; font-weight: 700; letter-spacing: 1.2px; }
.ab-member__en { font-family: var(--font-en); font-size: 14px; letter-spacing: 0.7px; color: var(--ab-blue); }

/* ---------------------------------------------------------------
   04 COMPANY
   --------------------------------------------------------------- */
.ab-company { padding: 140px 0; }
.ab-company__in { display: flex; flex-direction: column; gap: 56px; }
.ab-table { width: 100%; border-collapse: collapse; text-align: left; }
.ab-table th, .ab-table td {
  padding: 24px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 16px; line-height: 1.75; letter-spacing: 0.8px; vertical-align: top;
}
.ab-table th { width: 300px; font-weight: 700; color: #9fb3d9; }
.ab-table td { color: var(--white); }
.ab-table tr:first-child th, .ab-table tr:first-child td { border-top: 1px solid rgba(255, 255, 255, 0.18); }
/* .btn--hug は flex コンテナの子で使う前提。表セルに直接置くと下線（矢印）が
   セル幅いっぱいに伸びるので、内容幅に収める（lp.css の .dtable td と同じ） */
.ab-table td .btn--hug { width: max-content; }

/* ---------------------------------------------------------------
   採用CTA（careers の平行四辺形ボタン）
   --------------------------------------------------------------- */
.ab-join {
  padding: 120px 0 140px; color: var(--white);
  background: linear-gradient(180deg, var(--ab-navy) 0%, #051c2c 55%, #0042a1 100%);
  text-align: center;
}
.ab-join__in { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.ab-join__h { color: var(--white); text-shadow: 0 0 24px rgba(8, 109, 255, 0.5); }
.ab-entry {
  display: inline-flex; align-items: center; justify-content: center; gap: 20px;
  width: 320px; height: 88px; padding: 0 40px 0 80px;
  background: var(--ab-blue); color: var(--white);
  font-family: var(--font-en); font-weight: 500; font-style: italic;
  font-size: 34px; letter-spacing: 1.7px; white-space: nowrap;
  /* careers の ENTRY と同じマスク形（左辺を 20% 分そぎ落とす） */
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
  transition: filter 0.25s;
}
.ab-entry:hover { filter: brightness(1.12); }
/* 矢印は CSS で出す（.btn と同じ理由。styles.css の .btn::after 参照） */
.ab-entry::after {
  content: ""; flex: 0 0 auto;
  width: 20px; height: 22px;
  background: url("../images/recruit/arrow-ne.png") center / contain no-repeat;
}
.ab-join__note { color: rgba(255, 255, 255, 0.7); }

/* =====================================================================
   SP（〜767px）
   ===================================================================== */
@media (max-width: 767px) {
  .ab-hero__in, .ab-mission__in, .ab-values__in,
  .ab-team__in, .ab-company__in, .ab-join__in { padding-inline: 20px; }

  .ab-hero { height: auto; min-height: 480px; }
  .ab-hero__in { padding-block: 140px 56px; }
  .ab-hero__body { width: 100%; gap: 16px; }
  .ab-hero__title { font-size: 28px; letter-spacing: 1.4px; }
  .ab-hero__deco { width: 280px; right: -60px; bottom: -80px; }

  .ab-mission { padding: 72px 0; }
  .ab-mission__text { gap: 18px; }
  .ab-mission__h { margin-bottom: 4px; }
  .ab-origin { padding: 22px 20px 24px; gap: 14px; }
  .ab-origin__terms { gap: 14px 36px; }
  .ab-origin__en { font-size: 24px; }
  .ab-origin__ja { font-size: 14px; }

  .ab-values { padding-bottom: 72px; }
  .ab-values__in { gap: 32px; }
  .ab-vgrid { grid-template-columns: 1fr; gap: 16px; }
  .ab-value { padding: 24px 20px 28px; }
  .ab-value__num { font-size: 32px; }
  .ab-value__title { font-size: 17px; }

  .ab-band { height: 180px; }

  .ab-team { padding: 72px 0; }
  .ab-team__in { gap: 40px; }
  .ab-team__lead { text-align: left; gap: 16px; }
  .ab-triad { height: 300px; gap: 16px; }
  .ab-triad__bg { width: 100%; height: 300px; }
  .ab-triad__ring { width: 240px; height: 240px; top: 30px; }
  .ab-triad__logo { width: 130px; }
  /* 20px 固定だと「AI × CONSULTING × CONSTRUCTION」が約420pxになり、375〜393px幅の画面からはみ出す。
     画面幅に合わせて縮め（393pxで約15px）、それでも収まらない狭い端末では折り返す */
  .ab-triad__title { font-size: clamp(12px, 3.9vw, 20px); letter-spacing: 1px; gap: 6px; flex-wrap: wrap; }
  .ab-triad__x { width: 13px; height: 13px; }
  .ab-members { grid-template-columns: 1fr; gap: 20px; }
  .ab-member { padding: 24px 20px 28px; }
  .ab-member__photo { width: 160px; }
  .ab-member__name { font-size: 20px; }

  .ab-company { padding: 72px 0; }
  .ab-company__in { gap: 32px; }
  /* 表は行ごとに縦積みにする（lp.css の .dtable と同じ考え方） */
  .ab-table, .ab-table tbody, .ab-table tr, .ab-table th, .ab-table td { display: block; width: auto; }
  .ab-table th { border-bottom: 0; padding: 20px 0 4px; }
  .ab-table td { padding: 0 0 20px; }
  .ab-table tr:first-child th { border-top: 0; }

  .ab-join { padding: 72px 0; }
  .ab-join__in { gap: 28px; }
  .ab-entry { width: 260px; height: 68px; font-size: 26px; padding: 0 28px 0 56px; }
}