/* =============================================================
   下層ページ共通（financial-regtech.html / about.html）
   style.css のトークン（--sv1..9 / --f-en / --sh-* など）を前提にする
   ============================================================= */

:root {
  --gd:      #2f8f86;   /* Guardian のキーカラー（決済レグテック） */
  --gd-ink:  #1d6b64;
  --gd-tint: #eef7f6;
}

/* --- 緑をやめて水色にするセクション --------------------------------
   2026-09-10：financial-regtech の CONCEPT と FOR で「緑の使用をやめて」との指示。
   ページ全体ではなく、この2セクションだけ。PRODUCTS の Guardian 緑は残す。
   --gd 系はカスタムプロパティなので、セクションに宣言すれば中身へ継承される。
   影響するのは .flow-step .n（番号）／.ri・.ri-wrap（線アイコンと下地）／
   .fact（地・見出し・箇条書きの点）。
   about.html は同じ3値をページ全体に当てている（css/about.css の :root）。
   **値を変えるときは about.css と揃えること。** */
.sec-sky {
  --gd:      var(--hp-sky);   /* #087f8c ロゴの青 */
  --gd-ink:  var(--hp-navy);  /* #102a43 淡い地の上に載る見出し用。--hp-sky だと 16px には薄い */
  --gd-tint: #edf4f5;         /* 旧 #eef7f6 と同じ明るさの、青寄りの淡色 */
}

/* 下層ページの地色は上から 白 → グレー → 白 → グレー → 白 の交互。
   main 直下のセクションは5つで、奇数＝白・偶数＝グレー(--cream-2)。
   .cloudy（＝白固定）はトップページ用の指定なので、ここで上書きしている。
   セクションを増減したら、この交互も自動で付け直る。 */
main > section:nth-of-type(odd)  { background: var(--paper); }
main > section:nth-of-type(even) { background: var(--cream-2); }

/* トップ（.page-head）の直後だけ、上の余白を詰める。
   .sec は style.css で padding: 150px 0。トップの下端にも余白があるので、
   そのまま 150px を足すと空きすぎて見えていた。
   2026-09-10：ここだけ 80px に。以降のセクションは 150px のまま。
   .page-head を持つのは下層9ページだけなので、記事ページと採用LPには当たらない。 */
.page-head + .sec { padding-top: 80px; }

/* 下層ページはヘッダーを最初から白帯にする（トップページだけ透過のまま）。
   ヘッダーは position:fixed なので、帯になったぶん中身が下に潜り込む。
   その高さぶん main を下げる。実測：PC 102px（上下22 + CTAボタン58）、
   860px以下 78px（上下14 + ハンバーガー50）。 */
.is-lower .header {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* 一番上にいる間は線も影もなし。影は .is-stuck（スクロール後）だけに付く */
}
.is-lower main { padding-top: 102px; }

/* 上の余白は白帯へ移したので、ここは帯の下の余白だけを持つ（190 → 96）。
   下は、背景写真が消えきる助走をとりつつ詰めた（150 → 90）。 */
.page-head {
  position: relative;
  padding: 96px 0 90px;
  background: var(--paper);
  overflow: hidden;
}
/* 中身の量に任せると、ページによって高さがバラバラになる（実測：
   financial-regtech 801px / service 720px / about 708px / company 518px）。
   ※ 2026-09-10 の実測（1440px・.inner の高さ）は
     financial-regtech 648px / about 518px / service 423px / company 321px。
   短いページだと背景写真がほとんど見えないので、下限を持たせる。
   ・写真を敷かないページ（blog / contact / 法務3点）は、自分のCSSで
     --head-min: auto にして、この下限を打ち消している
   ・1100px 以下は〈上に写真の帯・下に文字〉に切り替わっていて、
     写真は全部見えているので下限は要らない（下の 1100px ブロックで解除）
   ・2026-09-10 まで justify-content: center だった（伸びたぶんを下に余らせると
     間延びするため）。ただし中央そろえだと、**中身が短いページほどパンくずと見出しが
     下がる**。実測（1440px・下限640px）：
       financial-regtech 198px / about 198px / service 213px / company 264px
     下限を超えたページは余りが0で中央そろえが効かず、届かなかった service と company
     だけが「余りの半分」だけ押し下げられていた（company は余り133px → 67px 下がる）。
     ページを移動するとパンくずが飛ぶので、**上そろえに変更して全ページ 198px で固定**した。
     余ったぶんは下に出るが、そこは背景写真が見えるので間延びはしない */
.page-head {
  /* 2026-09-10：下限を 800px → 640px に。
     2026-09-14：さらに 640px → 560px に（指示による）。
     上そろえなのでパンくず・見出しの位置（198px）は動かない。変わるのは下の余白＝
     背景写真が見える高さだけ。 */
  min-height: var(--head-min, 560px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* トップの背景写真。マスクで左端を完全に透かし、右へ向かって濃くする。
   見出し・リード文は左カラムに収まるので、写真の上に文字が乗らない。
   背景そのものにグラデーションを重ねるのではなくマスクで抜いているので、
   下地（--cream-2＝グレー）の色を選ばない。 */
.page-head::before {
  content: "";
  position: absolute; inset: 0;
  /* 縦の起点。right top だと絵の上端から映るので、そのぶん送って
     「画像の上から N px 下」を枠の上端に合わせる。負の値＝絵を上へずらす。
     ページごとに変えたいときは、そのページのCSSで --head-y を上書きする。 */
  background: var(--head-bg, url("../images/img_regtech.webp")) right var(--head-y, -100px) / cover no-repeat;
  /* マスクを2枚重ねて、左（横）と下（縦）の両方から写真を消す。
     2枚は intersect＝重なったところだけ残す、で合成する。
     source-in は古い WebKit 用の同義キーワード。 */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, transparent 40%, rgba(0,0,0,.5) 54%, #000 66%),
    linear-gradient(to bottom, #000 0%, #000 40%, transparent 96%);
          mask-image:
    linear-gradient(to right, transparent 0%, transparent 40%, rgba(0,0,0,.5) 54%, #000 66%),
    linear-gradient(to bottom, #000 0%, #000 40%, transparent 96%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  opacity: .92;
  pointer-events: none;
}
/* 下のセクション（グレー）との境目をぼかす。写真だけでなく「白地ごと」
   溶かしたいので、::before（写真）の上にもう一枚かぶせて、下端に向かって
   次のセクションの色へ変えていく。透明の指定を transparent ではなく
   「同じ色の alpha 0」にしているのは、途中で灰色がかるのを避けるため。
   .inner は z-index:1 なので、文字はこの上に残る。 */
.page-head::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 170px;
  background: linear-gradient(to bottom, rgba(243,245,247,0) 0%, rgba(243,245,247,.72) 62%, var(--cream-2) 100%);
  pointer-events: none;
}
.page-head .inner { position: relative; z-index: 1; }

.crumb {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 14px; letter-spacing: .04em; color: var(--ink-500);
  margin-bottom: 26px;
}
.crumb a:hover { color: var(--ink-900); }
.crumb i { font-style: normal; color: var(--ink-300); }

.page-head .sec-en { font-size: clamp(38px, 5.2vw, 84px); }
.page-lead {
  margin-top: 30px;
  max-width: 760px;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 2.15;
}

/* -------------------------------------------------------------
   「金融レグテックとは」
   ファーストビューの情報量を抑えるため、白いカード（地色＋影＋左の太線）は
   やめて、細い線で囲うだけの小さな注記にしている。
   ------------------------------------------------------------- */
.rt-def {
  margin-top: 40px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  max-width: 620px;
}
.rt-def h2 {
  font-size: 16px; font-weight: 800; letter-spacing: .04em;
  color: var(--hp-sky);   /* ロゴの青。Guardian の緑ではなくブランド色で見出す */
}
.rt-def p { margin-top: 10px; font-size: 16px; line-height: 1.95; color: var(--ink-700); }

/* -------------------------------------------------------------
   コンセプト（5ステップ）
   ------------------------------------------------------------- */
/* 2026-09-10：カードの作りを変えた。
   ・左に大きな画像枠（グレー）を置く。あとで差し替えるアイコン画像の場所を確保するため。
     いまは既存の線アイコンを枠の中に入れてある（<svg> を <img> に置き換えれば済む）
   ・番号を大きくして目立たせた
   ・カード間の矢印をやめ、カードの縦中央を1本の線が通る形にして「つながり」を表す。
     線は .flow::before。カードの地は不透明なので、実際に見えるのは gap のところだけ。
   枠の大きさは --fw。カードが広い is-3（about）は大きめ、5枚並ぶページは控えめにしている。
   **HTMLは変えていない。** .ri-wrap / .n / .t の3きょうだいを、
   グリッドの行・列指定だけで〈左＝枠／右上＝番号／右下＝見出し〉に組み替えている。 */
.flow {
  position: relative;
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  --fw: 76px;
}
/* 3枚組（about の ORIGIN）。カードは横幅いっぱいのまま。
   2026-09-10：つなぐ線が gap 14px では見えなかったので、隙間を広げて線を出す。
   （いちど max-width で全体を縮めたが、狙いは「線を見せる」ことだったので撤回した） */
.flow.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); --fw: 116px; gap: 36px; }

/* カードをつなぐ1本の線。カードの縦中央を通す */
.flow::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px;
  /* var(--line)（黒10%）では隙間に出ていても見えなかったので濃くした。
     カードの地は不透明なので、実際に見えるのは gap のところだけ。 */
  background: rgba(16, 42, 67,.22);
  z-index: 0;
}
.flow-step {
  position: relative;
  z-index: 1;
  padding: 26px 20px 24px;
  background: var(--paper);
  border-radius: 18px;
  box-shadow: var(--sh-sm);
  border: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: var(--fw) minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
}
/* 左の画像枠は2行ぶんをまたいで縦中央に置く */
.flow-step .ri-wrap {
  grid-column: 1; grid-row: 1 / span 2;
  align-self: center;
  width: var(--fw); height: auto; aspect-ratio: 1;
  border-radius: 14px;
  background: var(--cream-2);
  margin-bottom: 0;
}
.flow-step .ri { width: 42%; height: 42%; }
/* 2026-09-10：枠にアイコン画像を入れた場合は、枠いっぱいに敷く。
   画像側が淡い地を持っているので、枠のグレーは画像の下に隠れる（＝読み込み前の受け皿）。
   角丸は枠から継ぎ、はみ出しは overflow で落とす。 */
.ri-wrap { overflow: hidden; }
.ri-wrap img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.flow-step .n {
  grid-column: 2; grid-row: 1;
  align-self: end;
  display: block;
  font-family: var(--f-mono); font-size: 22px; font-weight: 700;
  letter-spacing: .06em; line-height: 1.2; color: var(--gd);
}
.flow.is-3 .n { font-size: 30px; }
.flow-step .t {
  grid-column: 2; grid-row: 2;
  align-self: start;
  display: block; margin-top: 8px;
  font-size: 16px; font-weight: 700; line-height: 1.7;
  color: var(--ink-900);
}

/* -------------------------------------------------------------
   得意領域（3つ）
   ------------------------------------------------------------- */
.strength {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.strength-card {
  padding: 34px 32px 36px;
  background: var(--paper);
  border-radius: var(--r-card);
  box-shadow: var(--sh-md);
}
/* 2026-09-10：上端の5pxの色帯をやめた。
   事業ごとの色（インラインの --c）は、アイコンの線と下地の色として残っている。 */
/* 2026-09-14：見出しを 18px → 24px（指示による）。
   line-height 1.6 は 24px でも見出しの範囲内なので触っていない。 */
.strength-card h3 {
  font-size: 24px; font-weight: 800; letter-spacing: .02em; line-height: 1.6;
  text-align: center;
}
/* アイコンは大きく、中央に。本文は読ませるので左そろえのまま。
   2026-09-10：線アイコンから 3D のイラスト（icon_strength1〜3.webp）に差し替え、200px に。
   イラストが自前の白地を持っているので、事業色の下地（色10%）と角丸は外している
   （どのみち画像で隠れるうえ、読み込み前に色の四角が一瞬出るのを避けるため）。
   事業ごとの色は、イラストそのものが緑・朱・青紫で持っている。 */
.strength-card .ri-wrap {
  display: grid;
  margin-inline: auto;
  width: 200px; height: 200px;
  background: none;
  border-radius: 0;
}
.strength-card .ri { width: 44px; height: 44px; }
.strength-card p {
  margin-top: 16px; font-size: 16px; line-height: 2; color: var(--ink-700);
}
.strength-card .rel {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px dashed var(--line);
  font-size: 16px; letter-spacing: .03em; color: var(--ink-500);
}

/* -------------------------------------------------------------
   製品一覧（ステータス表記は必須）
   ------------------------------------------------------------- */
.prod-note {
  margin-top: 22px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--ghost);
  font-size: 16px; line-height: 1.9; color: var(--ink-700);
}
.prod-note b { color: var(--ink-900); }

.prod-grid {
  margin: 28px auto 0;
  max-width: 900px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.prod {
  position: relative;
  padding: 30px 30px 32px;
  background: var(--paper);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
  border: 1px solid var(--line-soft);
  transition: box-shadow .3s ease, transform .3s cubic-bezier(.3,0,.2,1);
}
/* 2026-09-10：ホバーは「クリックできるもの」だけに揃えた。
   これはリンクではないので反応させない。 */
.prod.is-lead { border-color: var(--gd); box-shadow: 0 0 0 1px var(--gd), var(--sh-md); }

.prod-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  /* 見出しと説明のあいだに細い罫線を1本。バッジは右端へ逃がす */
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink-900);
}
.prod-head .badge { margin-left: auto; }
/* 2026-09-11：見出しを 21px → 28px に。カードの並びを
   〈見出し → 小見出し → 画像 → 説明テキスト〉にしたので、頭を強くした。 */
/* 2026-09-15：製品名は「Pay Guardian」でひとつのシステム名なので、
   途中で折ったり色を分けたりしない。1行のまま置き、
   連番と罫線だけで見せる。 */
.prod h3 {
  font-family: var(--f-en);
  font-size: 28px; font-weight: 800; letter-spacing: -.015em; line-height: 1.25;
  color: var(--ink-900);
}

/* 01〜08 の連番。CSS カウンタなので、カードを増減しても振り直る */
.prod-grid { counter-reset: prod; }
.prod::before {
  counter-increment: prod;
  content: counter(prod, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  font-family: var(--f-en);
  font-size: 14px; font-weight: 700;
  letter-spacing: .18em; line-height: 1;
  color: var(--hp-sky);
}
.prod .jp { margin-top: 16px; font-size: 16px; font-weight: 700; color: var(--ink-700); }

/* Pay Guardian のジャケット。6面を組み立て、28秒でゆっくり一周する。 */
.prod-pic {
  margin-top: 28px;
  display: flex; justify-content: center;
}
.pg-jacket-stage {
  --j-w: 260px;
  --j-h: 330px;
  --j-d: 42px;
  width: min(100%, 360px);
  height: 390px;
  display: grid;
  place-items: center;
  perspective: 1050px;
  perspective-origin: 50% 45%;
  position: relative;
  isolation: isolate;
}
.pg-jacket-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 240px; height: 34px;
  left: 50%; bottom: 4px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(16,42,67,.17);
  filter: blur(15px);
}
.pg-jacket {
  position: relative;
  width: var(--j-w);
  height: var(--j-h);
  transform-style: preserve-3d;
  animation: pg-jacket-turn 28s linear infinite;
  will-change: transform;
}
.pg-jacket-stage:hover .pg-jacket { animation-play-state: paused; }
@keyframes pg-jacket-turn {
  from { transform: rotateY(-22deg); }
  to { transform: rotateY(338deg); }
}
.pg-jacket-face {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.pg-jacket-front, .pg-jacket-back {
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 25px 23px 20px;
  box-shadow: inset 0 0 0 1px rgba(16,42,67,.08);
}
.pg-jacket-front {
  transform: translateZ(calc(var(--j-d) / 2));
  background: linear-gradient(150deg, #fff 0%, #f1faf9 54%, #dcefeb 100%);
  color: #102a43;
}
.pg-jacket-front::before {
  content: "";
  position: absolute;
  inset: 65px -55px auto auto;
  width: 240px; height: 240px;
  border: 1px solid rgba(8,127,140,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(8,127,140,.035), 0 0 0 55px rgba(8,127,140,.025);
}
.pg-jacket-brand, .pg-jacket-front-foot {
  position: relative;
  z-index: 1;
  font: 800 10px/1.2 var(--f-en);
  letter-spacing: .16em;
}
.pg-jacket-emblem {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 64px; height: 64px;
  margin-top: 34px;
  border-radius: 18px;
  background: linear-gradient(135deg, #102a43, #087f8c);
  box-shadow: 0 12px 26px rgba(16,42,67,.18);
}
.pg-jacket-emblem span { width: 9px; height: 9px; border-radius: 50%; background: #b8fbf1; }
.pg-jacket-emblem span:nth-child(2) { background: #fff; }
.pg-jacket-front strong {
  position: relative;
  z-index: 1;
  margin-top: 26px;
  font: 800 41px/.94 var(--f-en);
  letter-spacing: -.045em;
}
.pg-jacket-rule { width: 45px; height: 3px; margin-top: 18px; border-radius: 2px; background: #087f8c; }
.pg-jacket-caption { margin-top: 14px; font-size: 13px; font-weight: 700; line-height: 1.6; }
.pg-jacket-front-foot { margin-top: auto; color: #087f8c; }
.pg-jacket-back {
  transform: rotateY(180deg) translateZ(calc(var(--j-d) / 2));
  background: linear-gradient(150deg, #102a43, #17435a 64%, #087f8c);
  color: #fff;
}
.pg-jacket-back .pg-jacket-brand { color: #b8fbf1; }
.pg-jacket-back strong { margin-top: 52px; font-size: 21px; font-weight: 800; line-height: 1.55; }
.pg-jacket-back-line { width: 45px; height: 3px; margin-top: 22px; background: #61d8d1; }
.pg-jacket-back-copy { margin-top: 17px; font-size: 12px; line-height: 1.6; }
.pg-jacket-back-steps { display: flex; gap: 5px; margin-top: 14px; }
.pg-jacket-back-steps i { padding: 5px 7px; border: 1px solid rgba(255,255,255,.38); border-radius: 20px; font-size: 10px; font-style: normal; }
.pg-jacket-back-foot { margin-top: auto; font: 800 16px/1 var(--f-en); }
.pg-jacket-spine {
  top: 0; left: calc(50% - var(--j-d) / 2);
  width: var(--j-d); height: var(--j-h);
  display: grid; place-items: center;
  background: linear-gradient(90deg, #123b4b, #087f8c);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.pg-jacket-spine span { writing-mode: vertical-rl; font: 800 17px/1 var(--f-en); letter-spacing: .08em; }
.pg-jacket-spine-right { transform: rotateY(90deg) translateZ(calc(var(--j-w) / 2)); }
.pg-jacket-spine-left { transform: rotateY(-90deg) translateZ(calc(var(--j-w) / 2)); }
.pg-jacket-spine-left span { font-size: 10px; }
.pg-jacket-edge {
  left: 0; top: calc(50% - var(--j-d) / 2);
  width: var(--j-w); height: var(--j-d);
  background: repeating-linear-gradient(0deg, #e0e9e8 0 1px, #f9fcfc 1px 4px);
}
.pg-jacket-top { transform: rotateX(90deg) translateZ(calc(var(--j-h) / 2)); }
.pg-jacket-bottom { transform: rotateX(-90deg) translateZ(calc(var(--j-h) / 2)); }
@media (max-width: 480px) {
  .pg-jacket-stage { --j-w: 190px; --j-h: 245px; --j-d: 32px; height: 300px; }
  .pg-jacket-stage::after { width: 175px; }
  .pg-jacket-front, .pg-jacket-back { padding: 17px 17px 14px; }
  .pg-jacket-emblem { width: 48px; height: 48px; margin-top: 20px; border-radius: 14px; }
  .pg-jacket-emblem span { width: 7px; height: 7px; }
  .pg-jacket-front strong { margin-top: 17px; font-size: 31px; }
  .pg-jacket-rule { margin-top: 12px; }
  .pg-jacket-caption { margin-top: 10px; font-size: 10px; }
  .pg-jacket-back strong { margin-top: 34px; font-size: 15px; }
  .pg-jacket-back-line { margin-top: 14px; }
  .pg-jacket-back-copy { margin-top: 11px; font-size: 10px; }
  .pg-jacket-back-steps { margin-top: 10px; }
  .pg-jacket-back-steps i { padding: 4px 5px; font-size: 8px; }
  .pg-jacket-spine span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-jacket { animation: none; transform: rotateY(-22deg); will-change: auto; }
}

.prod .desc { margin-top: 22px; font-size: 16px; line-height: 2; color: var(--ink-700); }

/* ステータスバッジ：状態を必ず明示する */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: .04em;
  white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-trial { background: rgba(47,143,134,.12); color: var(--gd-ink); }   /* 試験導入中 */
.badge-plan  { background: rgba(16, 42, 67,.06);   color: var(--ink-500); }  /* 構想 */
.prod .status-note {
  margin-top: 12px;
  font-size: 16px; letter-spacing: .03em; color: var(--ink-500);
}

.feat { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.feat li {
  position: relative;
  padding-left: 18px;
  font-size: 16px; line-height: 1.95; color: var(--ink-700);
}
.feat li::before {
  content: ""; position: absolute; left: 3px; top: .82em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gd);
  opacity: .5;
}

/* -------------------------------------------------------------
   主な対象
   ------------------------------------------------------------- */
.target-list {
  margin-top: 30px;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.target-list li {
  padding: 13px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 16px; font-weight: 700; color: var(--ink-700);
}

/* -------------------------------------------------------------
   実績・効果（書き方のルールに合わせた控えめな箱）
   ------------------------------------------------------------- */
.fact-grid {
  margin-top: 30px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px;
}
.fact {
  padding: 30px 32px;
  border-radius: var(--r-card);
  background: var(--gd-tint);
}
.fact h3 { font-size: 16px; font-weight: 800; color: var(--gd-ink); }
.fact p  { margin-top: 14px; font-size: 16px; line-height: 2; color: var(--ink-700); }
.fact ul { margin-top: 12px; }
.fact li { position: relative; padding-left: 18px; font-size: 16px; line-height: 2; color: var(--ink-700); }
.fact li::before {
  content: ""; position: absolute; left: 3px; top: .85em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gd); opacity: .5;
}

/* -------------------------------------------------------------
   CTA
   ------------------------------------------------------------- */
.gd-cta {
  margin-top: 90px;
  padding: 64px 60px;
  border-radius: 32px;
  background: linear-gradient(120deg, var(--gd-tint) 0%, #f3f5f7 100%);
  text-align: center;
}
.gd-cta h2 { font-size: clamp(22px, 2.2vw, 32px); font-weight: 800; line-height: 1.6; }
.gd-cta p  { margin-top: 20px; font-size: 16px; line-height: 2.1; color: var(--ink-700); }
.gd-cta .btn { margin-top: 34px; }
/* .s-btn はトップのヒーロー用クラスで初期状態が透明。ここでは普通に見せる */
.gd-cta .s-btn { opacity: 1; transform: none; }
.gd-cta .cta-note { margin-top: 20px; font-size: 14px; color: var(--ink-500); }

/* -------------------------------------------------------------
   レスポンシブ
   ------------------------------------------------------------- */
@media (max-width: 1100px) {
  /* .flow.is-3 は詳細度が高く（0,2,0）、ここの .flow（0,1,0）では上書きできない。
     about の3枚組が狭い画面でも3列のままになり、左の画像枠がカードからはみ出していた
     （375px でカード93px に枠113px）。2026-09-10：is-3 も一緒に指定して折り返す。 */
  .flow, .flow.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 2行以上に折り返すので、横1本の線は意味が合わなくなる。消す
     （矢印を消していたのと同じ理由・同じ幅） */
  .flow::before { display: none; }
  .strength { grid-template-columns: 1fr; }
  .prod-grid { grid-template-columns: 1fr; }
  .fact-grid { grid-template-columns: 1fr; }

  /* 狭い画面では「左を透かして右に写真」という横マスクの考え方が成り立たない。
     文字が画面幅いっぱいに広がるので、右から薄くしても必ず文字の下に写真が残る。
     そこで 1100px 以下は〈上に写真の帯・下に文字〉へ切り替える。
     写真は横方向を切らずに全部出す（＝スマホのほうがハッキリ見える）。
     帯の高さは --band。写真を出さないページ（blog / contact / 法務3点）は
     自分のCSSで --band を 0 にして、この余白も打ち消している。 */
  /* 帯レイアウトでは高さの下限は要らない（写真は全部見えている） */
  .page-head { --band: 280px; padding-top: calc(56px + var(--band)); min-height: 0; }
  .page-head::before {
    inset: 0 0 auto 0;
    height: var(--band);
    background-position: center center;
    background-size: cover;
    /* 下端だけ溶かす1枚マスク。横マスクは使わないので合成も要らない */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 100%);
    -webkit-mask-composite: source-over;
            mask-composite: add;
    opacity: 1;
  }
}
@media (max-width: 860px) {
  .is-lower main { padding-top: 78px; }
}
@media (max-width: 767px) {
  .page-head { padding: 72px 0 66px; }
  /* スマホは帯を少し低く。上の余白も詰める */
  .page-head { --band: 210px; padding-top: calc(44px + var(--band)); }
  .rt-def { padding: 20px 20px; }
  .flow, .flow.is-3 { grid-template-columns: 1fr; }
  .prod { padding: 26px 22px 28px; }
  /* 狭い画面で製品名が収まる大きさにする */
  .prod h3 { font-size: 24px; }
  .prod::before { margin-bottom: 12px; }
  .gd-cta { margin-top: 60px; padding: 44px 24px; border-radius: 24px; }
  .gd-cta .btn { min-width: 0; width: 100%; padding: 22px 24px; gap: 18px; }
}


/* -------------------------------------------------------------
   図版とアイコン（文字ばかりのページを軽くするため）
   ------------------------------------------------------------- */
/* 線アイコン。太さ・角の丸めをここで一括指定して、symbol 側は形だけ持つ */
.ri {
  width: 26px; height: 26px;
  fill: none;
  stroke: var(--c, var(--gd));
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ri-wrap {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--c, var(--gd)) 10%, transparent);
}
/* .flow-step の .ri-wrap / .ri のサイズは、2026-09-10 に上の .flow ブロックへ移した */
.strength-card .ri-wrap { margin-bottom: 22px; }

/* -------------------------------------------------------------
   画像の仮枠（差し替え前提）
   本番の素材が入るまでの場所取り。見た目で「まだ入っていない」と
   分かるように、破線＋薄いグレーにしてある。
   ------------------------------------------------------------- */
.ph {
  display: grid; place-items: center;
  margin: 0;
  padding: 24px;
  background: var(--ghost);
  border: 1px dashed rgba(16, 42, 67,.2);
  border-radius: var(--r-card);
  text-align: center;
}
.ph b {
  display: block;
  font-size: 14px; font-weight: 800; letter-spacing: .04em;
  color: var(--ink-500);
}
.ph span {
  display: block; margin-top: 8px;
  font-size: 14px; line-height: 1.8;
  color: var(--ink-300);
}
.ph-wide { aspect-ratio: 16 / 9; }   /* 横長。図版・スクリーンショット向き */
.ph-band { aspect-ratio: 24 / 7; }   /* 帯。セクションの区切りに置く写真向き */
.ph-4x3  { aspect-ratio: 4 / 3; }
.ph-sq   { aspect-ratio: 1; }

/* セクションの本文と同じ間隔で置くときに使う */
.ph-block { margin-top: 48px; }

@media (max-width: 767px) {
  .ph-band { aspect-ratio: 16 / 9; }
  .ph { padding: 18px; }
}

/* 固定ページの説明図とイラスト */
.page-visual { margin: 48px 0 0; }
.page-visual img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: contain; background: #f4f8f9; border-radius: 24px; }
.page-visual figcaption { margin-top: 12px; color: var(--ink-700); font-size: 14px; line-height: 1.9; }

/* -------------------------------------------------------------
   画像のあるセクションを2カラムに（2026-09-09）
   左＝見出し＋本文 ／ 右＝画像。
   カード群（.flow / .fact-grid / .target-list）は横に広い作りなので
   2カラムに入れず、従来どおり下にフル幅で残す。
   ------------------------------------------------------------- */
.sec-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 90px;
  align-items: center;
}
/* 左カラムの中身。.sec-head の上余白（34px）は
   ゴースト英字のぶんなので、2カラムでもそのまま活かす */
.sec-split-body > :first-child { margin-top: 0; }
/* 2カラムの中では画像の上余白が不要（グリッドの gap で間が取れている）。
   縦に並ぶ相手が見出し＋本文なので、高さの上限も少し伸ばす */
.sec-split .page-visual { margin: 0; }
.sec-split .page-visual img { max-height: 520px; }

/* 1100px 以下は1カラムへ。順序は 見出し＋本文 → 画像 のまま */
@media (max-width: 1100px) {
  .sec-split { grid-template-columns: 1fr; gap: 40px; }
  .sec-split .page-visual { margin-top: 8px; }
  .sec-split .page-visual img { max-height: 460px; }
}
/* 2026-09-10：白い枠で囲っていたのをやめ、見出しは枠の外・項目は上の .flow と同じカードにした。
   グリッドの列数と gap を .flow とそろえてあるので、**カードの横幅は上下でぴったり一致する**。
   （.flow の gap は 14px。about の3枚組だけ 36px だが、あちらは列数が違うので関係ない） */
.work-map { margin-top: 48px; }
.work-map > h3 { font-size: 20px; line-height: 1.7; margin-bottom: 18px; }
.work-map-steps { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; list-style: none; padding: 0; }
/* カードの形は .flow-step と同じ。ただし**上のステップより一段引いて見せる**ため、
   2026-09-10：影をやめ、地を白（--paper）から一段落とした --cream にした。
   セクションの地 #f3f5f7（輝度244.7）に対して
     上のステップ #ffffff（255）＋影 … 前に出る
     例のカード   #fafbfc（251）影なし … 一段引く
   影が無くても輪郭が消えないよう、枠線（--line-soft）は残している。 */
.work-map-steps li {
  padding: 26px 20px 24px;
  background: var(--cream);
  border-radius: 18px;
  border: 1px solid var(--line-soft);
}
/* 番号は上のステップと同じ大きさ・同じ色に */
.work-map-num { color: var(--gd); font-size: 22px; font-weight: 700; font-family: var(--f-mono); letter-spacing: .06em; line-height: 1.2; }
.work-map h4 { font-size: 16px; line-height: 1.7; margin: 8px 0 12px; }
.work-map p { font-size: 14px; line-height: 1.9; color: var(--ink-700); }
.rt-def a { text-decoration: underline; text-underline-offset: 4px; }
@media(max-width: 1100px) { .work-map-steps { grid-template-columns: repeat(2,minmax(0,1fr)); } }
/* 1列に落とす幅は .flow と同じ 767px にそろえた（もとは 600px で、上下でずれていた）。
   カードになったので、項目を区切る罫線はもう要らない */
@media(max-width: 767px)  { .work-map-steps { grid-template-columns: 1fr; } }