/* =============================================================
   about.html 専用
   下層ページ共通は page.css、トークンは style.css を前提にする。
   クラス名は ab- で始める（style.css の .statement 等と衝突させないため）
   ============================================================= */

/* --- 緑（Guardian のキーカラー）を、このページだけ水色に上書きする ---
   2026-09-10：「about の緑の部分、水色にして」との指示。
   page.css の --gd / --gd-ink / --gd-tint を about.html でだけ差し替える。
   about.css は page.css の後に読み込まれるので、:root への再宣言で上書きできる。
   financial-regtech.html は page.css の緑のまま（Guardian の色なので触っていない）。
   影響する箇所：.flow-step .n（番号）／.ri・.ri-wrap（線アイコンと下地）／
   .fact（地・見出し・箇条書きの点）／.gd-cta（グラデーションの左端）。
   2026-09-10：financial-regtech の CONCEPT / FOR にも同じ3値を当てた（page.css の .sec-sky）。
   **値を変えるときは両方そろえること。** */
:root {
  --gd:      var(--hp-sky);   /* #087f8c ロゴの青 */
  --gd-ink:  var(--hp-navy);  /* #102a43 淡い地の上に載る見出し用。--hp-sky だと 16px には薄い */
  --gd-tint: #edf4f5;         /* 旧 #eef7f6 と同じ明るさの、青寄りの淡色 */
}

/* --- FACT カードの地を白に ---
   2026-09-10：「薄青背景入ってるけど全然見えないので、白背景にして」との指示。
   about のこのセクションの地は --cream-2（#f3f5f7）で、カードの --gd-tint（#edf4f5）とは
   明るさがほぼ同じ（R-5 / G-1 / B+4）。青みが違うだけなので沈んで見えていた。
   白にすると地より明るくなり、カードとして分かれる。
   **financial-regtech の .fact は白地の上にあるので、そちらは淡い青のまま**
   （白にすると白地に白で完全に消える）。だから page.css ではなくここで当てている。 */
.fact { background: var(--paper); }

/* トップの背景写真。page.css の .page-head::before が var(--head-bg) を読む。
   url() の相対パスは「使う側の CSS ファイル」基準で解決されるので、
   HTML のインライン style ではなく必ず CSS ファイル側で指定すること
   （インラインだと css/images/... を探しにいって 404 になる）。 */
.page-head { --head-bg: url("../images/img_about-hero.webp"); }

/* --- 段落。読み物なので本文より少しゆったり --- */
.ab-body {
  margin-top: 34px;
  max-width: 860px;
  font-size: 16px;
  line-height: 2.15;
  color: var(--ink-700);
}
.flow + .ab-body,
.ab-steps + .ab-body { margin-top: 40px; }

/* -------------------------------------------------------------
   困りごとの並び
   ------------------------------------------------------------- */
/* 2026-09-14：auto-fit だと広い画面で5枚が1行に並んでいた。
   3列固定にして「3枚＋2枚」の2行にする（指示による）。
   2行目の2枚は上の行と同じ幅のまま＝右下は空ける。 */
.ab-issues {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.ab-issues li {
  position: relative;
  padding: 18px 20px 18px 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  font-size: 16px; font-weight: 700; line-height: 1.8;
  color: var(--ink-700);
}
/* 「うまくいっていない状態」の印。文字ではなく記号なので読み上げには乗らない */
.ab-issues li::before {
  content: "";
  position: absolute; left: 20px; top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--hp-sky) 22%, transparent);
  box-shadow: inset 0 0 0 2px var(--hp-sky);
}

/* -------------------------------------------------------------
   3つの問い
   ------------------------------------------------------------- */
.ab-q-box {
  margin-top: 44px;
  padding: 34px 38px 38px;
  border-radius: var(--r-card);
  background: var(--cream-2);
}
.ab-q-lead {
  font-size: 16px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-500);
}
.ab-q { margin-top: 14px; }
.ab-q li {
  position: relative;
  margin-top: 14px;
  padding-left: 30px;
  font-size: clamp(16px, 1.15vw, 16px);
  font-weight: 700; line-height: 1.95;
  color: var(--ink-900);
}
.ab-q li::before {
  content: "?";
  position: absolute; left: 0; top: 0;
  font-family: var(--f-en); font-size: 18px; font-weight: 800;
  color: var(--hp-sky);
}

/* -------------------------------------------------------------
   8つの手順
   ------------------------------------------------------------- */
.ab-steps {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.ab-step {
  padding: 22px 20px 24px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  box-shadow: var(--sh-sm);
}
.ab-step .n {
  display: block;
  font-family: var(--f-mono); font-size: 14px; font-weight: 500;
  letter-spacing: .1em; color: var(--hp-sky);
}
.ab-step .t {
  display: block; margin-top: 10px;
  font-size: 16px; font-weight: 700; line-height: 1.7;
  color: var(--ink-900);
}

/* -------------------------------------------------------------
   合言葉の箱（HANASHI + TECHNOLOGY / RegTech Infrastructure）
   ------------------------------------------------------------- */
.ab-mark {
  padding: 64px 56px 66px;
  border-radius: var(--r-card);
  background: var(--cream-2);
  text-align: center;
}
.ab-mark.is-end {
  margin-top: 46px;
  background: none;
  border: 1px solid var(--line);
}
.ab-mark-en {
  font-family: var(--f-en);
  font-size: clamp(20px, 2.1vw, 32px);
  font-weight: 800; letter-spacing: .01em; line-height: 1.35;
  color: var(--ink-900);
}
.ab-mark-sub {
  margin-top: 14px;
  font-family: var(--f-en);
  font-size: 16px;
  font-weight: 600; line-height: 1.75;
  color: var(--hp-sky);
}
.ab-mark-jp {
  margin-top: 26px;
  margin-inline: auto;
  max-width: 720px;
  font-size: 16px; line-height: 2.1;
  color: var(--ink-700);
  text-align: left;
}
.ab-mark.is-end .ab-mark-jp { text-align: center; }

/* .s-btn はヒーロー用に opacity:0 が当たっているので、ここでは使わずに専用の受け皿を持つ */
.ab-btn { margin-top: 30px; }

/* -------------------------------------------------------------
   画面が狭いとき
   ------------------------------------------------------------- */
@media (max-width: 1100px) {
  .ab-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ab-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 3列固定にしたので、ここで2列に落とす。
     以前は auto-fit(232px) が勝手に折り返していた */
  .ab-issues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-mark { padding: 46px 26px 48px; }
  .ab-q-box { padding: 28px 24px 30px; }
}
@media (max-width: 560px) {
  .ab-steps { grid-template-columns: 1fr; }
  .ab-issues { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------
   ORIGIN / WHY REGTECH / VISION の3枚（2026-09-15）
   img_about1〜3 は透過のイラストなので、page.css が敷いている
   台紙（#f4f8f9）を消す。about.css は page.css の後に読むので上書きできる。
   ※ page.css 側は触らない。financial-regtech の1枚は不透過で、
     台紙が letterbox の地として効いているため。
   ------------------------------------------------------------- */
.page-visual img {
  background: transparent;
  /* ふわふわ上下に漂わせる。3枚が揃って動くと機械的なので、
     開始位置を HTML 側の --fd（0 / -2s / -4s）で1枚ずつずらしてある */
  animation: abFloat 6s ease-in-out var(--fd, 0s) infinite;
}

@keyframes abFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  .page-visual img { animation: none; }
}