@charset "utf-8";
/* =========================================================================
   トップのヒーロー＋その下の紹介（指示 2026-09-18）

   ・絵柄は添付画像のとおり：水色の空、浮かぶ写真カード4枚、白い細い線と点、中央に PASSO と
     「一歩が、未来をつくる。」。空は添付画像から写真・ロゴ・線を抜いた1枚（images/photo/hx-bg.jpg）、
     写真カードは添付画像から遠近をほどいて起こした4枚を、CSS の perspective / rotate で同じ傾きに戻している。
     ロゴは添付画像の字形をなぞった SVG、線もなぞった SVG（どちらも拡大してもにじまない）。
   ・ヒーローから下の紹介への移り方：
       背景（.hx-bg）は画面に固定し、ヒーローと紹介をひとつの土台（.hx-stage）に入れる。
       土台全体に「透明 → 水色 → 濃い青」のグラデーション（.hx-veil）を重ねるので、スクロールすると
       固定した背景がだんだん青に沈み、その上に紹介の白い文字がぼけから浮かび上がる。
       土台の下端で白いページに切り替わる（土台の clip-path で固定背景をこの中だけに見せる）。
   ・寸法の単位：添付画像（1672×941）の 1px を --k に置き、どの画面でも構図が上のヘッダーの下に収まるようにする。
       空の画像だけは object-fit: cover で画面いっぱい。縦長の画面は写真カードを縦に並べ替える。
   ・JS は書いていない。紹介の出現だけ既存の [data-av-in]（script.js）に乗せている。
   ・以前のヒーロー（01〜06のモーション版）は _removed/hero-0106.css と
     _removed/body_index-hero-0106-and-greet.html に残してある。
   ========================================================================= */

:root {
  --hx-out: cubic-bezier(.215, .61, .355, 1);   /* 出現の減速カーブ（0.9秒で止まる） */
}

/* ---------------------------------------------------------------- 土台と単位 */
.hx-stage {
  /* 構図はヘッダー（--hd-h）の下の領域に収める。空の画像だけは画面いっぱい（ヘッダーの裏まで） */
  --k:  min(calc(100vw / 1672), calc((100vh - var(--hd-h)) / 941));  /* 添付画像の1px */
  --kc: var(--k);     /* 写真カード */
  --ka: var(--k);     /* ロゴ・タグライン・細い線 */
  position: relative;
  clip-path: inset(0);          /* 固定した背景をこの土台の中だけに見せる */
  background: #eaf5fd;          /* 空の画像が来る前の下地 */
}

/* ---------------------------------------------------------------- 固定する背景 */
.hx-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}
.hx-bg__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  animation: hx-plate 2.4s var(--hx-out) both;
}

/* 写真カード：左上を画面の中心からの距離で置き、添付画像と同じ傾きに戻す */
.hx-card {
  position: absolute;
  left: calc(50% + var(--x) * var(--kc));
  top: calc(50% + var(--hd-h) / 2 + var(--y) * var(--kc));
  width: calc(var(--w) * var(--kc));
  aspect-ratio: var(--ar);
  animation: hx-rise .9s var(--hx-out) both;
}
.hx-card__in {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(17 * var(--kc));
  transform:
    perspective(calc(var(--w) * var(--pr) * var(--kc)))
    rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
  box-shadow:
    0 0 0 calc(2 * var(--kc)) rgba(255, 255, 255, .78),
    0 0 calc(26 * var(--kc)) calc(5 * var(--kc)) rgba(255, 255, 255, .6),
    0 calc(18 * var(--kc)) calc(40 * var(--kc)) rgba(28, 92, 160, .16);
  animation: hx-float var(--fl, 8s) ease-in-out var(--fd, 0s) infinite alternate;
}
.hx-card__in picture { display: contents; }   /* スマホ用の写真（<source>）と切り替える箱。img の大きさはカードに合わせる */
.hx-card__in img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* ガラスの照り返し */
.hx-card__in::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, .16) 100%);
}

/* 添付画像での位置（単位は添付画像の px・画面の中心から）と傾き */
.hx-card--1 { --x: -600.55; --y: -388.9;  --w: 416.1; --ar: 3 / 2;  --pr: 1.697; --rx: -19.5deg;  --ry: 30.69deg;  --rz: 11.7deg;  --fl: 7.6s; --fd: -1.2s; animation-delay: .45s; }
.hx-card--2 { --x: 346.2;   --y: -403.45; --w: 475.2; --ar: 16 / 9; --pr: 6.313; --rx: -27.01deg; --ry: -29.81deg; --rz: -5.21deg; --fl: 9.2s; --fd: -4.1s; animation-delay: .6s; }
.hx-card--3 { --x: -863.4;  --y: -24.6;   --w: 433.4; --ar: 6 / 5;  --pr: 2.171; --rx: 9.63deg;   --ry: -37.62deg; --rz: 5.57deg;  --fl: 8.4s; --fd: -2.6s; animation-delay: .75s; }
.hx-card--4 { --x: 210.55;  --y: 28.85;   --w: 530.7; --ar: 8 / 5;  --pr: 1.212; --rx: 10.92deg;  --ry: -30.01deg; --rz: 4.64deg;  --fl: 10s;  --fd: -6s;   animation-delay: .9s; }

/* 細い線と点（添付画像の座標のまま描いて、画面の中心に合わせて置く） */
.hx-arcs {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--hd-h) / 2);
  width: calc(1672 * var(--ka));
  height: calc(941 * var(--ka));
  max-width: none;
  overflow: visible;
  translate: -50% -50%;
  filter: drop-shadow(0 0 calc(3 * var(--ka)) rgba(255, 255, 255, .85));
}
.hx-arcs__line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: hx-draw 1.9s cubic-bezier(.45, 0, .25, 1) forwards;
}
.hx-arcs__line--a { --len: 3521; animation-duration: 3.2s; animation-delay: .7s; }   /* 左から入って真円を1周する1本の線（2026-09-18）。以前と同じ速さで描く */
.hx-arcs__dot {
  fill: #fff;
  transform-box: fill-box;
  transform-origin: center;
  animation: hx-dot .6s var(--hx-out) both;
}
.hx-arcs__dot--1 { animation-delay: 1.53s; }   /* 線がその点に届く時刻（3.2秒の描画・同じ緩急から計算） */
.hx-arcs__dot--2 { animation-delay: 1.74s; }
.hx-arcs__dot--3 { animation-delay: 1.92s; }

/* ---------------------------------------------------------------- 透明 → 水色 → 濃い青
   止まっているときはヒーローの下の方だけうっすら青く、スクロールで背景が沈んでいく。
   位置はヒーローの高さを基準にする（PCで土台の 27% / 56% / 100% にあたる） */
.hx-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(78, 201, 238, 0) calc(100svh * .57),
    rgba(24, 154, 211, .9) calc(100svh * 1.18),
    #0e639c 100%);
}

/* ---------------------------------------------------------------- ヒーローの中身 */
.hx {
  position: relative;
  z-index: 2;
  height: 100svh;
  padding-top: var(--hd-h);     /* 上のヘッダーの分 */
  display: grid;
  place-items: center;
}
.hx__id {
  display: grid;
  justify-items: center;
  row-gap: calc(40 * var(--ka));
  margin: 0;
  translate: 0 calc(-10.75 * var(--ka));
  color: #fff;
  font-weight: 300;
  line-height: 1;
}
.hx__logo {
  display: block;
  width: calc(632 * var(--ka));
  height: auto;
  aspect-ratio: 632 / 108;
  overflow: visible;
  filter: drop-shadow(0 0 calc(16 * var(--ka)) rgba(255, 255, 255, .35));
  animation: hx-rise .9s var(--hx-out) 1.05s both;
}
.hx__tag {
  display: block;
  padding-left: calc(16.7 * var(--ka));    /* 字間のぶん右に寄るのを戻す */
  font-size: calc(31.5 * var(--ka));
  font-weight: 300;
  letter-spacing: calc(16.7 * var(--ka));
  white-space: nowrap;
  text-shadow: 0 0 calc(14 * var(--ka)) rgba(40, 110, 190, .25);
  animation: hx-rise .9s var(--hx-out) 1.3s both;
}

/* ---------------------------------------------------------------- 紹介（青に沈んだ背景の上） */
.hx-about {
  position: relative;
  z-index: 2;
  padding: 158px 20px 204px;
  color: #fff;
  text-align: center;
}
.hx-about__in { max-width: 1100px; margin-inline: auto; }
.hx-about__label {
  display: inline-block;
  padding: 2px 14px;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 99px;
  font-family: var(--f-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.6;
}
.hx-about__ttl {
  margin-top: 26px;
  font-size: 50px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.4;
}
.hx-about__en {
  margin-top: 24px;
  font-family: var(--f-en);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .09em;
  line-height: 1.7;
}
.hx-about__txt {
  width: min(100%, 700px);   /* 2026-09-18 本文差し替えで 570→700px（長い1文が1行に収まる幅） */
  margin: 58px auto 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 2.1;
}
/* 本文は段落の間を空け、「〜にお困りのあなたへ」は小見出しとして太く大きく（2026-09-18） */
.hx-about__txt p + p { margin-top: 1.1em; }
.hx-about__txt p.hx-about__sub {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.7;
}
.hx-about__txt p + p.hx-about__sub { margin-top: 2.6em; }
.hx-about__txt p.hx-about__sub + p { margin-top: 1.3em; }
.hx-about__txt p.hx-about__close { margin-top: 2.6em; font-weight: 700; }
.hx-about__btn { margin-top: 56px; }
.hx-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 60px;
  padding: 0 90px 0 32px;   /* 右＝矢印の枠 68px＋文字と区切り線の間 22px */
  border-radius: 99px;
  background: linear-gradient(270deg, var(--c-blue-l), var(--c-blue));
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(6, 60, 110, .22);
  transition: filter .4s var(--hx-out), box-shadow .4s var(--hx-out);
}
.hx-btn:hover { filter: brightness(1.08); box-shadow: 0 12px 34px rgba(6, 60, 110, .3); }
.hx-btn__ic {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 68px;
  display: grid;
  place-items: center;
}
.hx-btn__ic::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 24px;
  translate: 0 -50%;
  background: rgba(255, 255, 255, .55);
}
.hx-btn__ic svg { display: block; width: 22px; height: 22px; transition: translate .4s var(--hx-out); }
.hx-btn:hover .hx-btn__ic svg { translate: 4px 0; }

/* 下からぼけて浮かび上がる（script.js が画面に入ったとき .is-in を付ける） */
.hx-rise[data-av-in] {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(30px);
  transition: opacity .9s var(--hx-out), filter .9s var(--hx-out), transform .9s var(--hx-out);
}
.hx-rise[data-av-in].is-in { opacity: 1; filter: blur(0); transform: none; }

/* ---------------------------------------------------------------- 1画面ずつ送る（吸い付き）は廃止（指示 2026-09-20）
   「カクつく・戻される」原因だったので scroll-snap をやめた。
   ヘッダーの下で止める指定（scroll-padding-top）だけは、ページ内リンクのために残す。 */
html { scroll-padding-top: var(--hd-h); }

/* ---------------------------------------------------------------- 下にスクロールすると同時に消える（指示 2026-09-18）
   ロゴ・タグライン（.hx）と白い線（.hx-arcs）を、スクロール量に合わせて薄くする（画面の半分ほどで消える）。
   スクロール連動のアニメーション（animation-timeline: scroll()）が使えないブラウザでは消えないだけ。 */
@supports (animation-timeline: scroll()) {
  .hx,
  .hx-arcs {
    animation: hx-away linear both;
    animation-duration: auto;       /* 時間ではなくスクロールの範囲に割り当てる */
    animation-timeline: scroll(root);
    animation-range: 0 55vh;
  }
}
@keyframes hx-away { to { opacity: 0; } }

/* ---------------------------------------------------------------- 背景をゆっくり動かす（指示 2026-09-20）
   背景を画面に固定したままだと、最初の1画面はスクロールしても絵が動かず「重い・引っかかる」と感じる
   （実測：スマホで200px送っても画面の見た目は24%しか変わらなかった）。
   そこで背景だけ、ページの4割ほどの速さで上へ動かす（1画面ぶん送る間に 42svh 動く）。
   背景の下に空く帯は青いベール（.hx-veil）が覆うので、継ぎ目は出ない。
   スクロール連動のアニメーション（animation-timeline: scroll()）が使えないブラウザでは、今までどおり固定されるだけ。 */
@supports (animation-timeline: scroll()) {
  .hx-bg {
    animation: hx-bgpar linear both;
    animation-duration: auto;       /* 時間ではなくスクロールの範囲に割り当てる */
    animation-timeline: scroll(root);
    animation-range: 0 100svh;
  }
}
@keyframes hx-bgpar { to { translate: 0 -42svh; } }

/* ---------------------------------------------------------------- 動き */
@keyframes hx-plate { from { opacity: 0; scale: 1.06; } to { opacity: 1; scale: 1; } }
@keyframes hx-rise  { from { opacity: 0; filter: blur(10px); translate: 0 30px; } to { opacity: 1; filter: blur(0); translate: 0 0; } }
@keyframes hx-float { from { translate: 0 calc(-7 * var(--kc)); } to { translate: 0 calc(7 * var(--kc)); } }
@keyframes hx-draw  { to { stroke-dashoffset: 0; } }
@keyframes hx-dot   { from { opacity: 0; scale: 0; } to { opacity: 1; scale: 1; } }

/* ---------------------------------------------------------------- 縦長の画面：写真カードを上下に並べ替える
   構図の単位を縦長用（430×860）に替え、ロゴは画面幅の約8割にする */
@media (max-aspect-ratio: 1 / 1) {
  .hx-stage {
    --kc: min(calc(100vw / 430), calc((100vh - var(--hd-h)) / 860));
    --ka: min(calc(100vw / 790), calc((100vh - var(--hd-h)) / 1600));
  }
  .hx-card--1 { --x: -196; --y: -392; --w: 236; }
  .hx-card--2 { --x: -18;  --y: -262; --w: 226; }
  .hx-card--3 { --x: -210; --y: 118;  --w: 196; }
  .hx-card--4 { --x: -50;  --y: 236;  --w: 246; }
  .hx-arcs__line { stroke-width: 3.4; }
  .hx-arcs__dot { scale: 1.6; }
}

/* ---------------------------------------------------------------- スマホの紹介（寸法は画面幅に比例） */
@media (max-width: 767px) {
  .hx-about { padding: 21vw 7.7vw 38vw; }
  .hx-about__label { padding: .55vw 3.32vw; font-size: 3.04vw; }
  .hx-about__ttl { margin-top: 3.87vw; font-size: 6.4vw; }   /* 1行目の12字が1行に収まる大きさ */
  .hx-about__en { margin-top: 6.4vw; font-size: 3.32vw; }
  .hx-about__txt { margin-top: 9vw; font-size: 3.87vw; text-align: left; word-break: auto-phrase; }
  .hx-about__txt p.hx-about__sub { font-size: 4.6vw; }
  .hx-pc { display: none; }
  .hx-about__btn { margin-top: 7.7vw; }
  .hx-btn { height: 15.5vw; min-width: 65.3vw; padding: 0 17.7vw 0 5.5vw; font-size: 3.6vw; }
  .hx-btn__ic { width: 12.2vw; }
  .hx-btn__ic::before { height: 6.2vw; }
  .hx-btn__ic svg { width: 5.4vw; height: 5.4vw; }
}

/* ---------------------------------------------------------------- スマホ（縦向き）のヒーロー（指示 2026-09-18）
   添付画像（_tools/svh/mockups/top-sp-2026-09-18b.png・941×1672）を再現：写真4枚を上下に2枚ずつ、中央に PASSO とタグライン。
   ★その後の指示で写真4枚は出さず、ロゴとタグラインを 1.3 倍にして画面の中央に置いた（TEXT_SCALE）。
   ・空＝添付画像から写真・ロゴ・タグラインを抜いた1枚（images/photo/hx-bg-sp.jpg・上下に 360px ずつ空を足して 941×2392）。
     白い線と点は画像から消し（ぼけたガラス板は残す）、PC と同じ線の SVG（.hx-arcs）を重ねる（2026-09-18 指示）。
   ・写真＝添付画像の写真の枠の四隅に合わせて置く。枠の対角線の交点を中心に、matrix()（2D の傾き・伸び）と
     片側の遠近（perspective＋rotateY）で四角形に合わせる。
   ・ロゴ＝PC と同じ SVG の字を、線を太くし（8.4）、字の間を添付画像に合わせて詰める。
   ・値はすべて _tools/svh/gen_top_sp_css.py が書き出す（写真の値は mk_top_sp.py）。ここを手で直さない。
   ・単位 --ks＝添付画像の 1px。構図はヘッダーの下の領域に収め、その中央に添付画像の中央を合わせる。
   ・動き（写真が下からぼけて出て上下に浮く・ロゴとタグラインが順に出る）は PC と同じ。 */
@media (max-width: 767px) and (max-aspect-ratio: 1 / 1) {
  .hx-stage {
    --ks: min(calc(100vw / 941), calc((100vh - var(--hd-h)) / 1672));
    --kc: var(--ks);
  }
  .hx-bg__plate {
    inset: auto;
    left: 50%;
    top: calc(50% + var(--hd-h) / 2);
    width: max(100vw, calc(941 * var(--ks)));
    height: calc(2392 * var(--ks));
    translate: -50% -50%;
  }
  /* 白い線は PC と同じ SVG（1本につないだ線・同じ描かれ方）。輪がスマホの幅に収まる大きさ（ビュー単位 1＝添付画像の 1.2px） */
  .hx-arcs { --ka: calc(1.2 * var(--ks)); }
  /* 添付画像の最初の画面は下まで明るい＝青い幕は最初の画面の下端からかける */
  .hx-veil {
    background: linear-gradient(to bottom,
      rgba(78, 201, 238, 0) calc(100svh * .96),
      rgba(24, 154, 211, .9) calc(100svh * 1.4),
      #0e639c 100%);
  }
  /* 写真カード4枚はスマホでは出さない（指示 2026-09-18）。戻すときは下の display: none を消せば、添付画像の位置に並ぶ */
  .hx-card { display: none; }
  .hx-card {
    left: calc(50% + (var(--cx) - var(--cw) / 2) * var(--ks));
    top: calc(50% + var(--hd-h) / 2 + (var(--cy) - var(--ch) / 2) * var(--ks));
    width: calc(var(--cw) * var(--ks));
    aspect-ratio: auto;
    height: calc(var(--ch) * var(--ks));
  }
  .hx-card__in { border-radius: calc(22 * var(--ks)); }
  .hx-card--1 { --cx: -188.4; --cy: -501.87; --cw: 402.4; --ch: 337.3; }
  .hx-card--1 .hx-card__in { transform: matrix(0.9760, 0.0196, -0.1975, 0.9621, 0, 0) rotate(0.2deg) perspective(calc(753.1 * var(--ks))) rotateY(30deg) scaleX(1.1547) rotate(-0.2deg); }
  .hx-card--2 { --cx: 249.92; --cy: -375.62; --cw: 411.4; --ch: 297.9; }
  .hx-card--2 .hx-card__in { transform: matrix(0.9801, 0.1646, -0.0798, 0.9853, 0, 0) rotate(-100.48deg) perspective(calc(984.0 * var(--ks))) rotateY(30deg) scaleX(1.1547) rotate(100.48deg); }
  .hx-card--3 { --cx: -301.56; --cy: 409.96; --cw: 331.4; --ch: 407.1; }
  .hx-card--3 .hx-card__in { transform: matrix(0.9790, -0.0293, -0.1163, 0.9799, 0, 0) rotate(161.34deg) perspective(calc(787.3 * var(--ks))) rotateY(30deg) scaleX(1.1547) rotate(-161.34deg); }
  .hx-card--4 { --cx: 161.54; --cy: 444.98; --cw: 455.1; --ch: 346.8; }
  .hx-card--4 .hx-card__in { transform: matrix(0.9284, -0.0399, -0.0339, 0.9437, 0, 0) rotate(-171.54deg) perspective(calc(478.3 * var(--ks))) rotateY(30deg) scaleX(1.1547) rotate(171.54deg); }
  /* 文字は固定した空と同じ基準（100vh の中央）に置く */
  .hx { height: 100vh; overflow-x: clip; }   /* 字を詰めたロゴの SVG の箱が右へはみ出す分を切る（字は中） */
  .hx__id { row-gap: 0; translate: none; }
  .hx__logo {
    position: relative;          /* 位置は left/top で（translate は出現の動き hx-rise が使う） */
    left: calc(61.09 * var(--ks));
    top: calc(-23.68 * var(--ks));
    width: calc(885.0 * var(--ks));
  }
  .hx__logo g { stroke-width: 8.4; }
  .hx__logo path:nth-of-type(2) { translate: -25.68px 0; }
  .hx__logo path:nth-of-type(3) { translate: -45.34px 0; }
  .hx__logo path:nth-of-type(4) { translate: -64.22px 0; }
  .hx__logo circle { translate: -89.07px 0; }
  .hx__tag {
    padding-left: calc(13.78 * var(--ks));
    font-size: calc(46.800000000000004 * var(--ks));
    font-feature-settings: "palt";
    letter-spacing: calc(13.78 * var(--ks));
    position: relative;
    left: calc(17.80 * var(--ks));
    top: calc(23.84 * var(--ks));
  }
  /* 「、」は書体の palt が効かないので、後ろを添付画像の送り（30px）まで詰める */
  .hx__tag-c { margin-right: calc(-19.5 * var(--ks)); }
}

/* ---------------------------------------------------------------- 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  .hx-bg__plate,
  .hx-card,
  .hx-card__in,
  .hx__logo,
  .hx__tag,
  .hx-arcs__dot { animation: none; }
  .hx-arcs__line { animation: none; stroke-dashoffset: 0; }
  .hx, .hx-arcs { animation: none; }
  .hx-bg { animation: none; }
  .hx-rise[data-av-in] { opacity: 1; filter: none; transform: none; transition: none; }
  html { scroll-snap-type: none; }
}