/*
 * n1a のレイアウト基準値。余白と最大幅はここから引き、個々のブロックで
 * clamp() を書き起こさない。
 *
 * 縦は 3xl（セクション間）> 2xl（セクション内の大区切り・繰り返す行の間）>
 * xl（見出し → 中身）> l/m（ブロック内）の序列で使う。同じ役割の余白が
 * 箇所ごとに 48 / 64 / 72px とばらけると、節の切れ目がどこなのか読めなくなる。
 *
 * 横は --n1a-content の1本だけ。セクションごとに最大幅が違うと、スクロール
 * したときに左右の端が行ったり来たりする。--n1a-content の 100% は使用箇所の
 * 包含ブロックで解決されるので、左右パディングを持たないセクションの直下に
 * 置くこと（パディング済みの箱の中で使うと余白が二重に掛かる）。
 *
 * nomo 本体の Tailwind（mt-200 等）は固定 px で画面幅に追従しないため、n1a の
 * セクションではマークアップ側から外してある。ここが唯一の指定元。
 */
:root {
  --n1a-gutter: clamp(20px, 4vw, 40px);
  --n1a-container: 1120px;
  --n1a-content: min(var(--n1a-container), 100% - var(--n1a-gutter) * 2);

  --n1a-space-2xs: 8px;
  --n1a-space-xs: clamp(12px, 1.2vw, 16px);
  --n1a-space-s: clamp(14px, 1.6vw, 20px);
  --n1a-space-m: clamp(20px, 2.2vw, 28px);
  --n1a-space-l: clamp(28px, 3.2vw, 44px);
  --n1a-space-xl: clamp(48px, 5vw, 80px);
  --n1a-space-2xl: clamp(72px, 7.5vw, 120px);
  --n1a-space-3xl: clamp(104px, 11vw, 176px);

  /*
   * KV のカード地と同じ濃紺。色そのものの指定元は public/assets/n1a-palette.js
   * （KV とセクションの波が引いている）で、CSS からは JS を読めないのでここに
   * 書き写している。片方だけ変えると、KV のカードとページの文字色がずれる。
   * 波のグラデーションの両端（--n1a-wave-from / --n1a-wave-to）は同じ表から
   * 生成されて n1a-wave-morph.css に入る。
   */
  --n1a-tone-deep: #0544bd;

  /*
   * ヘッダーのハンバーガーが座る位置。ドロワーの × をここに合わせるための
   * 単一の指定元で、ロゴ幅とボタンの大きさはこのファイル末尾のヘッダー節も
   * ここから引く（数値を2箇所に置くと、どちらかを直したとき × がずれる）。
   *
   * nomo の .headerBar は「上下パディング＋行の高さ」で組まれていて、行の高さは
   * いちばん背の高いロゴが決める。ロゴ画像は 1920x1080 なので高さは幅の 9/16。
   * ボタンはその行の中央に来るので、中心は pad + ロゴ高 / 2 になる。
   */
  --n1a-header-logo-w: clamp(112px, 12vw, 178px);
  --n1a-header-btn: 44px;
  --n1a-header-pad: 40px;
  --n1a-header-inset: 40px;
  --n1a-header-center: calc(var(--n1a-header-pad) + var(--n1a-header-logo-w) * 1080 / 1920 / 2);

  /* ハンバーガーの線。× も同じ太さ・角丸の線2本で組む。 */
  --n1a-header-line-w: 26px;
  --n1a-header-line-h: 3px;
  --n1a-header-line-gap: 7px;
  /* 線3本＋間隔2つ＝記号の高さ。× はこれと同じ高さの正方形に収める。 */
  --n1a-header-mark-h: calc(var(--n1a-header-line-h) * 3 + var(--n1a-header-line-gap) * 2);
}

/* nomo が headerBar のパディングを外し、高さを詰める幅（Tailwind の lg 未満）。 */
@media (max-width: 1023px) {
  :root {
    --n1a-header-pad: 0px;
    --n1a-header-inset: 16px;
  }
}

/*
 * セクション見出しは4つとも同じ扱いにする。nomo の .t-ja-display-l
 * （500 / +.09em / 固定 36-54px）と n1a のリード文（800 / -.035em / 可変）が
 * 混在していて、同じ階層の見出しが節ごとに別の書体設定になっていた。
 * マークアップ側から .t-ja-display-l を外し、こちらに寄せている。
 */
.n1a-about-heading,
.n1a-features-heading,
.n1a-steps-heading,
.n1a-pricing-title {
  width: var(--n1a-content);
  margin: 0 auto;
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -.035em;
  text-align: center;
}

/*
 * Ambient decoration is held still while its section is off screen.
 * n1a-idle-offscreen.js puts `n1a-idle` on each host as it leaves the viewport.
 *
 * These loops are infinite and purely decorative, so nothing is lost by
 * stopping them, but they are not free: while the key visual is on screen, 41
 * of the page's 63 animations belong to elements nobody can see, and they were
 * more than half of all per-frame style work. The vortex is what pays for it —
 * it shares the main thread with them, so their cost shows up as stutter in the
 * one animation the visitor is actually looking at.
 *
 * Everything listed here animates `transform`/`translate`/`opacity` only, so a
 * paused loop holds its current pose and resumes from it. Nothing here may
 * animate a property that affects layout. The wave paths are the one addition
 * that animates something else — `d`, which is geometry, not layout, so it
 * holds its pose the same way. It is also the most expensive loop on the page
 * to leave running, since every frame re-rasterises a full-width fill, and it
 * is the reason both wave strips are hosts here rather than only the copies.
 */
.n1a-idle .n1a-floating-ui,
.n1a-idle .n1a-float__body,
.n1a-idle .n1a-float__shadow,
.n1a-idle .wave-layout__shape01,
.n1a-idle .wave-layout__shape02,
.n1a-idle .wave-layout__shape03,
.n1a-idle .n1a-wave__path {
  animation-play-state: paused;
}

/* n1a brand replacement is render-blocking so the original loading marks never flash. */
[x-ref="loadingLogo"] {
  display: grid !important;
  width: min(47vw, 330px) !important;
  justify-items: center;
}

[x-ref="loadingLogo"] > img {
  display: none !important;
}

[x-ref="loadingLogo"]::before {
  content: "";
  display: block;
  width: min(43vw, 290px);
  aspect-ratio: 2216 / 728;
  background: url("/assets/n1a-logo-color-horizontal.png") center / contain no-repeat;
}

[x-ref="loadingLogo"]::after {
  content: "人柄でつながる経営者ビジネスマッチング";
  display: block;
  margin-top: -8px;
  color: #33218d;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(12px, 1.25vw, 16px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .08em;
  text-align: center;
  white-space: nowrap;
}

[x-ref="loadingContainer"] > div:has(+ [x-ref="loadingLogo"]) {
  display: grid !important;
  place-items: center;
  width: auto !important;
  height: auto !important;
}

[x-ref="loadingContainer"] > div:has(+ [x-ref="loadingLogo"]) > * {
  display: none !important;
}

[x-ref="loadingContainer"] > div:has(+ [x-ref="loadingLogo"])::after {
  content: "ZETTAICHI";
  color: var(--n1a-tone-deep);
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 800;
  letter-spacing: .06em;
}

/*
 * KV の地。カードは彩度の高い6色を使うので、色地に載せるとシアンやアイスの
 * カードが沈む。参照映像の拡散も白地なので、地は白で置いてカードに色を持たせる。
 *
 * `!important` と background-image の打ち消しが要る理由: このステージは nomo 側で
 * bg-gradation.webp を背景画像に持っていて、nomo のスタイルシートはこの上書きより
 * あとに読み込まれる。同じ詳細度では後勝ちなので、素の `background` では通らない。
 *
 * ステージは fixed・全画面・z-[-1] でページ全体の地でもある。差し替え前は渦が
 * ステージを覆い、スクロールしきると白へ飛んでいたので、白で置くのは以前の
 * 終着点と同じ。グラデーションに戻したいときはこの2行を外す。
 */
[x-data="webgl"] {
  --n1a-kv-progress: 0;
  isolation: isolate;
  background-color: #fff !important;
  background-image: none !important;
}

/*
 * カードフィールドの canvas。n1a-kv-cards-mount.js が前置きする。
 *
 * スクロールでの退場は、地が白なので白を被せるのではなくカードごと薄くして、
 * わずかに寄る。透明度と transform しか動かさないので、退場中もフレームあたりの
 * 塗り直しは発生しない。
 */
.n1a-kv-cards {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: calc(1 - var(--n1a-kv-progress) * var(--n1a-kv-progress));
  transform: scale(calc(1 + var(--n1a-kv-progress) * .18));
}

/*
 * コピーの登場（html.n1a-kv-burst）に合わせて 0 → 1 に動く係数。スクリムは
 * スクロール量でも薄くなるので、opacity そのものを transition すると退場が
 * 0.85 秒遅れて付いてくる。@property で数値として登録した変数だけを補間して、
 * 掛け算の結果を opacity に渡せば、退場側は今までどおり即応のままにできる。
 * 未対応のブラウザでは補間されずに切り替わるだけで、絵は壊れない。
 */
@property --n1a-kv-reveal {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

html {
  --n1a-kv-reveal: 0;
  transition: --n1a-kv-reveal .85s ease .3s;
}

html.n1a-kv-burst {
  --n1a-kv-reveal: 1;
}

/*
 * コピーの後ろだけ白を強める。見出しは #0544bd の面で、真後ろに濃紺や紫の
 * カードが来ると沈む。カード側の不透明度を下げると画面全体がくすむので、
 * 必要な範囲にだけ白を足して逃がす。
 *
 * 白を出すのはコピーと同時。溜めの間は中央にカードが積まれているだけなので、
 * そこに白を敷くとカードの色が理由もなく濁る。
 */
.n1a-kv-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(56% 38% at 50% 50%,
    rgba(255, 255, 255, .88) 0%,
    rgba(255, 255, 255, .64) 46%,
    rgba(255, 255, 255, 0) 78%);
  opacity: calc((1 - var(--n1a-kv-progress)) * var(--n1a-kv-reveal));
}

@media (max-width: 767px) {
  /* 縦画面はコピーが画面幅いっぱいに近いので、白を広めに取らないと足りない。 */
  .n1a-kv-scrim {
    background: radial-gradient(78% 34% at 50% 50%,
      rgba(255, 255, 255, .94) 0%,
      rgba(255, 255, 255, .78) 48%,
      rgba(255, 255, 255, 0) 80%);
  }
}

[x-ref="loadingContainer"] {
  display: none !important;
}

.main-inner {
  opacity: 1 !important;
}

[x-data="webgl"] .vignette-wrap,
[x-data="webgl"] .vignette {
  display: none !important;
}

/*
 * The nomo vortex is replaced by the n1a card field below. The canvas is
 * hidden rather than removed: the nomo webgl component keeps measuring it from
 * its own resize listener, so `display: none` makes every later resize throw.
 *
 * 除外が要るのは、差し替え後の KV も同じステージ内の canvas だから。ここを
 * 素の `canvas` に戻すと、カードフィールドごと巻き添えで消える。
 */
[x-data="webgl"] canvas:not(.n1a-kv-cards) {
  opacity: 0;
  visibility: hidden;
}

[x-data="webgl"]::before,
[x-data="webgl"]::after {
  display: none;
}

/*
 * Section waves — the seam between a light section and a gradient one.
 *
 * The wave is n1a's own now, not nomo's: a single dominant crest right of
 * centre with one small swell near the left edge. See scripts/gen-wave-shape.mjs
 * for the curve; the control points live there, not in the SVG.
 *
 * Behind the gradient wave sit three tinted copies of the same curve, each
 * lifted and lagged a little further, in the key visual's palette — pink,
 * violet, blue, landing on the purple-to-cyan gradient of the wave itself. No
 * spirals: the tie to the key visual is the palette, and the shear between
 * layers sliding at different speeds.
 *
 * nomo's three `wave-layout__shape0N` nodes are what carries them, so the
 * clone the steps transition makes picks the layers up for free.
 *
 * Every copy has to clear the top of the strip on its own: `.wave-layout` clips
 * with `overflow: hidden`, and there are 45px of clearance on desktop and none
 * at all below 768px. gen-wave-shape.mjs prints each copy's crest — keep them
 * all above zero.
 *
 * The drift uses `translate`, not `transform`, and `transform` is pinned to
 * `none`: nomo's `waveLayout` component writes a random per-node `translate3d`
 * onto these three every frame, and its 22-40px downward push is the same order
 * as the offsets stacking the copies, so it would scramble them.
 */
.wave-layout__shape01,
.wave-layout__shape02,
.wave-layout__shape03 {
  position: absolute !important;
  aspect-ratio: 2000 / 420 !important;
  height: auto !important;
  width: 138.89% !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  transform: none !important;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Back, highest, furthest behind. */
.wave-layout__shape03 {
  left: -31.60% !important;
  top: -29.27% !important;
  background-image: url("/assets/n1a-wave-layer-pink.svg") !important;
  animation-name: n1a-wave-drift-back;
  animation-duration: 34s;
}

.wave-layout__shape02 {
  left: -27.08% !important;
  top: -18.54% !important;
  background-image: url("/assets/n1a-wave-layer-violet.svg") !important;
  animation-name: n1a-wave-drift-mid;
  animation-duration: 27s;
}

/* Front, lowest, closest to the wave itself. */
.wave-layout__shape01 {
  left: -23.26% !important;
  top: -8.78% !important;
  background-image: url("/assets/n1a-wave-layer-blue.svg") !important;
  animation-name: n1a-wave-drift-front;
  animation-duration: 21s;
}

.wave-layout__front {
  background-image: url("/assets/n1a-wave-front.svg") !important;
}

/* The gradient section under the wave. nomo runs it violet to cyan; n1a runs it
   the other way. It has to match the wave's own gradient exactly or the seam
   between them shows as a colour step — both are set from gen-wave-shape.mjs's
   stops, so change them together. */
.wave-layout__front-pattern {
  background: linear-gradient(to right, var(--n1a-wave-from), var(--n1a-wave-to)) !important;
}

/* nomo lays two raster gradients over that ramp — `bg-gradient01` across the
   about section, `bg-gradient02` across the steps section. Both are dropped.
   Their colour direction is baked into a webp, but the real problem is that
   they shade *vertically*: the wave art is one horizontal ramp wherever it
   appears and cannot follow that, so the colour it meets differs depending on
   how far down the section the seam falls. Where the flipped wave butts against
   the steps section, that showed as a hard step in colour.
   Without them the section and the wave read from the same gradient and the
   seams close by construction. Nothing in nomo's bundles measures either node,
   so `display: none` is safe here. */
.bg-gradient01,
.bg-gradient02 {
  display: none !important;
}

/* Literal offsets, one block per copy — a keyframe that reads a custom property
   is not compositable and drags the drift onto the main thread. The middle copy
   runs the other way so the three shear against each other. */
@keyframes n1a-wave-drift-back {
  from { translate: -30px 0; }
  to { translate: 30px 0; }
}

@keyframes n1a-wave-drift-mid {
  from { translate: 38px 0; }
  to { translate: -38px 0; }
}

@keyframes n1a-wave-drift-front {
  from { translate: -26px 0; }
  to { translate: 26px 0; }
}

/*
 * The wave undulates by changing shape rather than by moving.
 *
 * n1a-wave-inline.js swaps all four background-images for the same curves as
 * inline SVG — an SVG loaded as an image renders in secure static mode, so
 * nothing inside it can be animated from here — and n1a-wave-morph.css carries
 * the states its `d` runs through. Both come out of gen-wave-shape.mjs, off the
 * same control points as the SVG files, which stay as the still fallback for
 * anything the script never reached.
 *
 * The front wave could not have been translated instead. Its fill is the same
 * horizontal ramp as `.wave-layout__front-pattern` under it, so any sideways
 * shift reopens the colour step along the seam those two were matched to close.
 * A morph leaves the fill registered and the closed bottom edge pinned; only
 * the crest travels. The copies keep their sideways drift on top of the morph,
 * on unrelated periods, so no two crests fall back into step.
 */
.n1a-wave--inlined {
  background-image: none !important;
}

/* Absolute rather than `height: 100%`: the front wave's height comes from an
   aspect-ratio, which a percentage height is not required to resolve against.
   All four hosts are positioned already. */
.n1a-wave__svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.n1a-wave__path {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.wave-layout__front .n1a-wave__path {
  animation-name: n1a-wave-morph-front;
  animation-duration: 19s;
}

.wave-layout__shape01 .n1a-wave__path {
  animation-name: n1a-wave-morph-layer;
  animation-duration: 16s;
}

/* Reversed, like the middle copy's drift, so the shear between the copies reads
   in the shapes as well as in their offsets. */
.wave-layout__shape02 .n1a-wave__path {
  animation-name: n1a-wave-morph-layer;
  animation-duration: 23s;
  animation-direction: reverse;
}

.wave-layout__shape03 .n1a-wave__path {
  animation-name: n1a-wave-morph-layer;
  animation-duration: 29s;
}

/* 蝶のモーダル・カード・画像はマークアップごと削除済み。残るのは共通バナーの
   装飾2枚（/assets/images/common/butterfly.webp）だけなので、それを伏せる。 */
img[src*="butterfly" i] {
  display: none !important;
}

/* The manifesto must be fully legible from its first rendered frame. */
[x-data="gradientText"],
[x-data="gradientText"] p,
[x-data="gradientText"] > * {
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
}

/*
 * 宣言文の上下の余白。
 *
 * 元の nomo は、宣言文のすぐ下が次のセクション（波）で、上には KV が
 * 抜けたあとの空きが 0.5vh 分そのまま残る。宣言文自体は画面の 4 割ほど
 * しかないので、波が画面下に入ってきた瞬間、文字が下半分に寄って上が
 * まるごと空く。スマホは画面が細長いぶん、その空きが目立つ。
 *
 * 直しているのは空きの量ではなく置き場所で、上から取った分をそのまま
 * 下へ回している。ページ全体の長さは変わらない。--n1a-story-shift が
 * 上から下へ移す量。増やすと文字が上へ、減らすと下へ動く。
 *
 * 素の指定は Tailwind の .mt-100 で、こちらは後から読ませてもらえない
 * （overrides は astro の css より先に読まれる）。要素名を足して
 * 詳細度で勝たせている。
 */
section[data-scetion="topStory"] {
  --n1a-story-shift: 200px;
  margin-top: calc(100px - var(--n1a-story-shift));
  margin-bottom: var(--n1a-story-shift);
}

@media (max-width: 767px) {
  section[data-scetion="topStory"] {
    --n1a-story-shift: 260px;
  }
}

.n1a-about-section {
  width: 100%;
  margin-top: var(--n1a-space-3xl);
}

.n1a-about-heading > span {
  display: inline;
  padding: 0;
  background: none;
}

.n1a-about-grid {
  display: grid;
  /* 右列の下限はカード幅（320px）。それより広く取ると 768px 付近で
     グリッドがコンテナから溢れる。 */
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
  align-items: center;
  gap: var(--n1a-space-xl);
  width: var(--n1a-content);
  margin: var(--n1a-space-xl) auto 0;
}

.n1a-about-copy {
  text-align: left !important;
}

.n1a-about-copy p {
  text-align: left !important;
}

.n1a-about-lead {
  max-width: 620px;
  font-size: clamp(26px, 3vw, 46px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -.035em;
}

.n1a-about-subcopy {
  max-width: 650px;
  margin-top: var(--n1a-space-m);
  font-size: clamp(15px, 1.35vw, 20px);
  font-weight: 700;
  line-height: 1.9;
}

/* 「n1a固有の仕組み」の手前に置く1行。見出しを持たないので、.n1a-features の
   ような heading → 中身の余白（--n1a-space-xl）は要らない。行そのものの組みは
   .n1a-feature-row を共有していて、1カラムへの落ち方も同じ規則に乗る。 */
.n1a-matching {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: var(--n1a-space-3xl);
}

.n1a-matching-inner {
  width: var(--n1a-content);
  margin-inline: auto;
}

/* 「商談だけに集中できる5ステップ」の手前に置く、機能紹介の交互レイアウト。
   ラベル → ビジュアル → コピー の順で、偶数行だけ左右を入れ替える。 */
.n1a-features {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: var(--n1a-space-3xl);
}

.n1a-features-list {
  display: grid;
  gap: var(--n1a-space-2xl);
  width: var(--n1a-content);
  margin: var(--n1a-space-xl) auto 0;
}

.n1a-feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--n1a-space-xl);
}

.n1a-feature-row--reverse .n1a-feature-visual {
  order: 2;
}

.n1a-feature-label {
  margin-bottom: var(--n1a-space-xs);
  color: rgba(255, 255, 255, .92);
  font-size: clamp(15px, 1.35vw, 20px);
  font-weight: 800;
  letter-spacing: .02em;
}

/* 実画面の録画。3本の縦横比は揃っていない（16:9 のものが混ざる）ので、高さは
   マークアップの width/height 属性から出させ、こちらでは決めない。読み込む前の
   高さも同じ属性から決まるので、動画が届いたときに下の行が突き上がらない。 */
.n1a-feature-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(18px, 2.2vw, 28px);
  /* 録画の中身は白い管理画面なので、届くまでの間だけ地を敷いて、渦の上に黒い
     矩形が出ないようにする。 */
  background: rgba(255, 255, 255, .14);
}

.n1a-feature-copy {
  text-align: left;
}

.n1a-feature-title {
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -.035em;
}

.n1a-feature-description {
  margin-top: var(--n1a-space-m);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 500;
  line-height: 2;
  text-align: justify;
}

/* 「独自のマッチング構造」の図。録画の3行と同じ枠に入る、唯一の作図。
   地は敷かない（背景は透明）ので、下の波のグラデーションがそのまま透ける。
   高さは viewBox の比から決まるので、動画の width/height 属性と同じく、
   読み込み前後で下の行が動かない。 */
.n1a-feature-diagram {
  display: block;
  width: 100%;
  height: auto;
}

/* 手書き感は、4隅の位置と丸みだけをずらしたパス（public/nomo/index.html の
   d 属性）が持っている。辺は定規で引いたようにまっすぐのまま ── 辺をたわませると
   ふにゃふにゃに見えて、このサイトの他の面（波・カード）と釣り合わない。
   線の色は同じ svg の中に置いた <linearGradient id="n1a-feature-diagram-stroke">。 */
.n1a-feature-diagram__box {
  /* 地は白の薄膜。下の波のグラデーションは透けたまま、箱の中だけがわずかに
     浮いて、線だけのときより3つのまとまりが取れる。濃くすると波の色が死んで
     白いカードが3枚並んでいるように見えるので、.12 より上げないこと
     （中の文字は白なので、地を上げるほど字も沈む）。 */
  fill: rgba(255, 255, 255, .12);
  stroke: url("#n1a-feature-diagram-stroke");
  stroke-width: 2.8;
  stroke-linejoin: round;
}

/* 「掛け合わせる」の ×。波の右側（紫）の上に置くので、対になる水色を差す。
   色そのものの指定元は public/assets/n1a-palette.js の cyan。 */
.n1a-feature-diagram__cross {
  fill: none;
  stroke: #2fd8f0;
  stroke-width: 4.5;
  stroke-linecap: round;
}

/* y は箱の中心ではなく文字のベースラインで置いてある（dominant-baseline は
   ブラウザによって効き方が違う）。字の大きさを変えるときは index.html の y も
   一緒に動かすこと。 */
.n1a-feature-diagram__text {
  fill: #fff;
  font-size: 19px;
  font-weight: 700;
  text-anchor: middle;
}

/* 図が何を出すのかを言う一行なので、図の添え字ではなく図の結論として置く。
   箱の中の文字（19px）を越えない範囲で、説明文（clamp(13px,1vw,16px)）より
   一段大きい。 */
.n1a-feature-caption {
  margin-top: var(--n1a-space-s);
  color: #fff;
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 700;
  text-align: center;
}

.n1a-steps {
  position: relative;
  width: 100%;
  margin-top: var(--n1a-space-3xl);
  margin-bottom: 0;
  padding-bottom: var(--n1a-space-2xl);
  overflow: hidden;
}

.n1a-steps::after {
  display: none;
}

.n1a-steps-transition {
  position: relative;
  z-index: 2;
  width: 100%;
  /* The clone sets the height — see `.n1a-steps-transition__source`, which is
     in flow rather than absolute for exactly this reason. Stating a height here
     instead means restating the clone's aspect ratio, and any mismatch shows:
     short by a pixel and the wave's trough is cropped to a straight edge across
     the band, long by a pixel and a hairline of bare background opens along the
     top, against the steps section. */
  height: auto;
  margin-top: -2px;
  margin-bottom: -2px;
  overflow: hidden;
  /* Shares its bottom edge with `.n1a-pricing-section`, so the two have to
     resolve to the same colour along it. The axis is horizontal for that
     reason: a diagonal one is projected over each box's own width AND height,
     and these two boxes differ in height by an order of magnitude, so the
     colours they meet with drift apart and the join shows as a faint rule
     across the page. Keep both declarations identical and horizontal. */
  background: linear-gradient(to right, #eef8ff 0%, #f8efff 53%, #fff2f8 100%);
}

/*
 * In flow, not absolute, so the band takes its height from the clone and the
 * two can never disagree by a rounding error. `left` plus the translate is the
 * centring the `min-width` needs below 720px — relative offsets do not change
 * the height the clone contributes, which is the point.
 * The tinted copies hang past this box on every side; the band clips them.
 */
.n1a-steps-transition__source {
  position: relative;
  left: 50%;
  width: 100%;
  min-width: 720px;
  aspect-ratio: 1440 / 205;
  transform: translateX(-50%) scaleY(-1);
  transform-origin: center center;
  /* Overhang the band's first row. The band and the clone are the same height,
     but they round to different subpixels, and the sliver that leaves at the
     top lets the band's light background show as a hairline against the steps
     section. The margins cancel, so the band's height is unchanged; the pixel
     comes off the bottom, where the band is already light and meets a light
     section. */
  margin-top: -1px;
  margin-bottom: 1px;
}

.n1a-steps-heading,
.n1a-steps-list {
  position: relative;
  z-index: 1;
}

.n1a-steps-list {
  display: grid;
  /* 行間の ↓ ピル（高さ58px）を廃止したので、その逃げのぶんだけ詰める。
     元の 88-140px はピルが収まる前提の広さで、置くものがないまま残すと
     行と行の関係が切れて間延びする。 */
  gap: var(--n1a-space-2xl);
  width: var(--n1a-content);
  margin: var(--n1a-space-xl) auto 0;
}

/* 列は fr で取る。以前は 400px / 440px の固定幅を space-between で振り分けて
   いたので、リストの幅を他のセクションに合わせると余りが全部行間に乗って
   画像とコピーが離れた。比率で持てば幅を揃えても関係は崩れない。 */
.n1a-step-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: var(--n1a-space-xl);
}

/* 行間に連結装飾は置かない。順序は `.n1a-step-number` が担う（13px から
   clamp(30px, 2.6vw, 42px) に上げたのはそのため）。ここに矢印・線・ドットの
   たぐいを足すと、番号がすでに言っていることを二度言うことになる。 */

.n1a-step-visual {
  width: 100%;
  overflow: hidden;
  border-radius: clamp(38px, 5vw, 68px);
  box-shadow: 0 26px 56px rgba(27, 18, 99, .24);
}

.n1a-step-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
}

.n1a-step-copy {
  text-align: left;
}

.n1a-step-number {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: var(--n1a-space-xs);
  color: rgba(255, 255, 255, .94);
  font-family: "Krona One", sans-serif;
  font-size: clamp(30px, 2.6vw, 42px);
  line-height: 1;
  /* 13px 時の .14em はこのサイズでは字間が開きすぎる。 */
  letter-spacing: .02em;
}

.n1a-step-number::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(255, 255, 255, .44), rgba(255, 255, 255, 0));
}

.n1a-step-title {
  font-size: clamp(25px, 2.3vw, 38px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -.035em;
}

.n1a-step-description {
  margin-top: var(--n1a-space-m);
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 500;
  line-height: 2;
  /* 和文は分割位置が限られるぶん、両端揃えにすると行末合わせのしわ寄せが
     字間に出て、行ごとに濃度が変わる。 */
  text-align: left;
}

[x-ref="flowerDecoWrap"] {
  transform: translateY(calc(var(--wave-top-height) * .14)) !important;
}

/* The nomo KV script scales `.flowerDeco` on every scroll frame. The flower art
   is replaced by `.n1a-people-field`, so keep an inert stub instead: without it
   the scroll handler throws on null and every later scroll effect stops. */
.n1a-flower-deco-stub {
  display: none;
}

/* Parts of the nomo page we hide instead of delete (original footer, bottom
   flower deco). Their scripts keep measuring these nodes on resize and feed
   `--wave-top-height` back into the layout, so the boxes have to stay
   measurable — `visibility` keeps the geometry, `position` keeps them out of
   the flow. */
.n1a-legacy-hidden {
  position: absolute !important;
  left: 0;
  top: 0;
  width: 100%;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/*
 * nomo のスクロール演出は、視界に入るまで opacity / filter / visibility を
 * 書き込んで要素を伏せる。ここに挙げた面は n1a 側で最初から見えているのが
 * 前提なので、まとめてその対象から外す。ブロックごとに同じ3行を書き足すと、
 * 面が増えたときに片方だけ書き漏れる。
 *
 * .n1a-float__shadow は入れないこと。自前の blur(8px) を持っているので、
 * filter: none を掛けると影が消える。
 */
.n1a-people-field,
.n1a-float {
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
}

/* 中身は親が見えていれば見えるので、visibility は要らない。 */
.n1a-float__body,
.n1a-float__body img {
  opacity: 1 !important;
  filter: none !important;
}

.n1a-people-field {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transform: translateY(12vh);
}

.n1a-float {
  --float-duration: 6.4s;
  --float-delay: 0s;
  position: absolute;
  width: clamp(180px, 23vw, 390px);
  aspect-ratio: 1;
}

.n1a-float__body {
  position: absolute;
  inset: 0;
  animation: n1a-float-body var(--float-duration) ease-in-out
    var(--float-delay) infinite;
  will-change: transform;
  z-index: 2;
}

.n1a-float__body img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.n1a-float__shadow {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -1%;
  height: 8%;
  border-radius: 50%;
  background: rgba(15, 20, 75, .68);
  filter: blur(8px);
  transform-origin: center;
  animation: n1a-float-shadow var(--float-duration) ease-in-out
    var(--float-delay) infinite;
  will-change: transform, opacity;
}

.n1a-float--8 {
  --float-duration: 6.8s;
  left: 7%;
  top: 4%;
}

.n1a-float--10 {
  --float-duration: 5.9s;
  --float-delay: -1.7s;
  right: 15%;
  top: 3%;
  width: clamp(165px, 20vw, 330px);
}

.n1a-float--11 {
  --float-duration: 7.3s;
  --float-delay: -4.1s;
  left: 12%;
  bottom: 0;
  width: clamp(170px, 21vw, 345px);
}

.n1a-float--12 {
  --float-duration: 6.2s;
  --float-delay: -3s;
  right: 5%;
  top: 38%;
  width: clamp(220px, 28vw, 455px);
}

.n1a-float--13 {
  --float-duration: 7.7s;
  --float-delay: -2.2s;
  left: 8%;
  top: 42%;
  width: clamp(165px, 20vw, 330px);
}

.n1a-float--14 {
  --float-duration: 5.6s;
  --float-delay: -4.7s;
  right: 12%;
  bottom: -2%;
  width: clamp(170px, 21vw, 345px);
}

.n1a-float--handshake {
  --float-duration: 7.1s;
  --float-delay: -3.6s;
  right: 29%;
  top: 12%;
  width: clamp(220px, 27vw, 440px);
}

.n1a-float--handshake .n1a-float__shadow {
  left: 25%;
  right: 25%;
  bottom: 1%;
}

@keyframes n1a-float-body {
  0%,
  100% {
    transform: translate3d(0, 12px, 0) rotate(-.7deg);
  }
  50% {
    transform: translate3d(0, -26px, 0) rotate(.7deg);
  }
}

@keyframes n1a-float-shadow {
  0%,
  100% {
    opacity: .68;
    transform: scaleX(1.34) scaleY(1.1);
  }
  50% {
    opacity: .22;
    transform: scaleX(.58) scaleY(.66);
  }
}

.n1a-person-carousel {
  /* 正面枠と背面枠の距離の半分(px)。この2倍が板の厚みになる。0 は厚みなし＝
     その場で反転する1枚の板。大きくすると2枚が離れて弧を描いて振れる。
     0 にできるのはカードに backface-visibility: hidden を入れてあるからで、
     2枚が同一平面に重なっても裏を向いている側は描かれない。これがないと
     z 争いを起こすか、背面の縁が正面のカードからはみ出して輪郭が二重に
     見える（縮小率が 900 / (900 + 2r) なので r が小さいほど詰まる）。 */
  --n1a-r: 0;
  /* 枠は正面と背面の2つだけ。1回の遷移で半回転する。 */
  --n1a-step: 180deg;
  position: relative;
  width: min(100%, 540px);
  height: 650px;
  justify-self: end;
  -webkit-perspective: 900px;
  perspective: 900px;
  /* 消失点をカード中心（top 24px + height 520/2）に合わせる。奥行きレイヤーの
     逆補正はこの一致が前提なので、カードの top / height を変えたら要追従。 */
  -webkit-perspective-origin: 50% 284px;
  perspective-origin: 50% 284px;
  /* カードは長押しの横スワイプで切り替える。選択できる状態のままだと、指を
     置いた瞬間に iOS が文字選択とコールアウト（コピー／調べる）を始めてしまい、
     スワイプが選択範囲の拡張にすり替わる。中身は読み物ではなくビジュアルなので、
     カルーセル全体で選択そのものを持たせない。 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* 横は JS が拾うので渡さない。縦スクロールだけブラウザに残す（none にすると
     カードの上から始めたスクロールでページが動かなくなる）。 */
  touch-action: pan-y;
}

/* 画像は長押しで「写真に追加」シートが出るうえ、デスクトップではドラッグして
   持ち出せてしまう。どちらもスワイプの邪魔になる。
   スワイプを拾っているのは .n1a-person-carousel 自身なので、子の画像から
   pointer-events を外しても切り替え操作には影響しない。 */
.n1a-person-carousel img {
  -webkit-user-drag: none;
  pointer-events: none;
}

/* 正面枠と背面枠だけを持つ回転台。動くのはこの1要素だけで、カードは持ち場から
   一切動かない。「出ていく側」と「入ってくる側」という別々の状態が存在しない
   ので、対称性は数値合わせではなく構造として保証される。
   4枚は背面枠に順番に仕込まれる。背面枠は正面のカードの真後ろで完全に隠れる
   位置にあるので、載せ替えは見えない。 */
.n1a-person-stage {
  --n1a-turn: 0deg;
  position: absolute;
  inset: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  /* 回転軸をカード中心＝消失点に一致させる */
  transform-origin: 50% 284px;
  /* リングを半径ぶん奥へ下げることで、正面に来たカードがちょうど Z=0
     （＝これまでと同じ位置・同じ大きさ）に着地する。浮かせたレイヤーの
     逆補正が正面で厳密に成立するのはこの相殺のおかげ。 */
  transform: translateZ(calc(var(--n1a-r) * -1px)) rotateY(var(--n1a-turn));
  /* 90° で表裏が入れ替わり、100° あたりで次のカードが読める向きになる。そこを
     速度の頂点にして、残り 80° を全体の 6 割の時間かけて減速しながら着地する。
     立ち上がり側（.55, 0）は据え置きで、変えたのは減速側だけ。
     この曲線が 0.5（＝90°）に達するのは進行の 37% 時点。カードの中身を差し替
     える n1a-profile-carousel.js の FACE_SWAP はこの値なので、曲線を変えたら
     必ず追従させること。ずれるとその間だけ中身のない色面が正面に出る。 */
  transition: transform 1.6s cubic-bezier(.55, 0, .1, 1);
  will-change: transform;
}

.n1a-person-card {
  --card-color: #6b35c8;
  /* .n1a-person-carousel の perspective と必ず同じ値にすること。
     +Z したレイヤーを正面で原寸に戻す逆補正 scale((p - z) / p) に使う。 */
  --n1a-p: 900;
  /* 0 = 正面枠 / 1 = 背面枠。JS が付け替える。 */
  --slot: 0;
  position: absolute;
  left: 50%;
  top: 24px;
  width: 320px;
  height: 520px;
  margin-left: -160px;
  overflow: visible;
  border-radius: 30px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.2), transparent 31%),
    var(--card-color);
  box-shadow: 0 35px 70px rgba(20, 13, 89, .35);
  transform-origin: 50% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  /* 裏を向いた側は描かない。正面枠と背面枠が同一平面に重なる（--n1a-r: 0）
     ことを許すのはこの1行で、半回転のちょうど中間で表裏が入れ替わる。JS が
     is-shown を差し替えるのも同じ中間点なので、面と中身が同時に切り替わる。 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: none;
  /* 枠に置くだけ。カード自身はアニメーションしない（transition を持たないので
     枠の載せ替えは常に瞬時に確定する）。
     opacity は一切動かさない（opacity < 1 の要素は grouping element 扱いで
     preserve-3d が平坦化され、浮かせたレイヤーが全部カード面に貼り付く）。 */
  transform:
    rotateY(calc(var(--slot) * var(--n1a-step)))
    translateZ(calc(var(--n1a-r) * 1px));
}

/* 枠に載っていない残りのカードは完全に伏せる */
.n1a-person-card:not(.is-staged) {
  visibility: hidden;
}

/* 厚みは持たせない（--n1a-r: 0）。厚みを戻す場合も、側面を持つ要素は置かない
   こと。カード面の辺にぴったり接する面を足すと 3D 空間で T 字交差になり、
   Chrome の交差ポリゴン分割が破綻して縦の継ぎ目と塗り残しが出る（青いカードで
   顕著だった不具合の原因）。厚みは枠の間隔だけで表現する。 */

/* 正面に来ている1枚。操作を受けるのはこのカードだけ。 */
.n1a-person-card.is-active {
  pointer-events: auto;
}

/* 中身を出すのは正面の1枚だけ。待機カードは色面だけを残してリングの奥行きに
   使う。4枚ぶんの浮遊UIが常に空間に散らばっていると、正面のプロフィールが
   読めなくなる。
   opacity ではなく visibility を使うのは、opacity < 1 の要素は grouping
   element 扱いになって preserve-3d が平坦化され、浮かせたレイヤーの奥行きが
   全部潰れるため。visibility は 3D の描画文脈に影響しない。 */
/* 背面枠のカードの影が正面カードの周りに滲むのを止める */
.n1a-person-card:not(.is-shown) {
  box-shadow: none;
}

.n1a-person-card:not(.is-shown) .n1a-floating-ui,
.n1a-person-card:not(.is-shown) .n1a-person-avatar,
.n1a-person-card:not(.is-shown) .n1a-person-card__company,
.n1a-person-card:not(.is-shown) .n1a-person-card__name,
.n1a-person-card:not(.is-shown) .n1a-person-card__meta {
  visibility: hidden;
}

.n1a-person-card__company,
.n1a-person-card__name,
.n1a-person-card__meta {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  font-weight: 900;
  letter-spacing: -.03em;
}

.n1a-person-card__name {
  top: 42px;
  font-size: 30px;
}

.n1a-person-card__company {
  top: 23px;
  padding: 0 24px;
  font-size: 12px;
  letter-spacing: .03em;
  opacity: .78;
}

.n1a-person-card__meta {
  top: 82px;
  padding: 0 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  opacity: .78;
}

.n1a-person-avatar {
  --z: 26;
  position: absolute;
  left: 50%;
  top: 51%;
  display: grid;
  place-items: center;
  width: 230px;
  height: 250px;
  overflow: visible;
  /* 要素中心がほぼ消失点上にあるので、逆補正は自身の中心基準で足りる。
     isolation はここでは外せない（::before の z-index:-1 がカード背景の
     裏へ抜ける）が、中身を同一平面に保つだけなので奥行きには影響しない。 */
  transform:
    translate(-50%, -50%)
    translateZ(calc(var(--z) * 1px))
    scale(calc((var(--n1a-p) - var(--z)) / var(--n1a-p)));
  isolation: isolate;
}

.n1a-person-avatar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 210px;
  height: 210px;
  border: 5px solid rgba(255,255,255,.24);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,.2);
  box-shadow: 0 18px 38px rgba(21, 12, 77, .25);
}

.n1a-person-avatar__crop {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 210px;
  height: 210px;
  overflow: hidden;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.n1a-person-avatar__crop img,
.n1a-person-avatar__head {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112%;
  height: 112%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  transform: translate(-50%, -36%);
  filter: drop-shadow(0 16px 18px rgba(27, 18, 82, .18));
}

.n1a-person-avatar__head {
  display: none;
}

.n1a-pricing-section {
  width: 100%;
  /* Pulled up over the wave band above. That band's height comes from an
     aspect-ratio, so its bottom edge lands on a fractional pixel and the two
     boxes end up one row apart — a white hairline of page background between
     two sections that are meant to be one continuous light field. The band's
     own `margin-bottom: -2px` is not enough to close it. */
  margin: -3px 0 0;
  /* 左右は各ブロックが --n1a-content で持つ。セクション側にも padding を置くと
     余白が二重に掛かり、背景だけ全幅・中身だけ内側という関係が崩れる。 */
  padding: var(--n1a-space-2xl) 0;
  /* Must stay identical to `.n1a-steps-transition`'s — they meet along this
     section's top edge. See the note there for why the axis is horizontal. */
  background: linear-gradient(to right, #eef8ff 0%, #f8efff 53%, #fff2f8 100%);
  color: #2f257d;
}

.n1a-pricing-lead {
  width: var(--n1a-content);
  max-width: 680px;
  margin: var(--n1a-space-m) auto 0;
  font-size: clamp(14px, 1.3vw, 18px);
  font-weight: 600;
  line-height: 1.9;
  text-align: center;
}

.n1a-pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--n1a-space-l);
  width: var(--n1a-content);
  margin: var(--n1a-space-xl) auto 0;
}

.n1a-price-card {
  --n1a-card-gap: var(--n1a-space-m);
  /* 本文は黒。差し色だけサイト共通のインディゴ〜バイオレット
     （メニュー・フッターの #3330a8 → #7748d3 → #2dbfd3）と同じ系統に揃えている。 */
  --n1a-card-ink: #14141a;
  --n1a-card-ink-muted: #6d67a4;
  --n1a-card-accent: #7748d3;
  display: flex;
  flex-direction: column;
  min-height: 570px;
  padding: clamp(30px, 3vw, 48px);
  border: 1px solid rgba(89, 69, 182, .16);
  border-radius: 36px;
  color: var(--n1a-card-ink);
  background: #fff;
  box-shadow: 0 24px 60px rgba(62, 46, 148, .14);
}

/* 縦のリズムはここ 1 か所で持つ。ブロックごとに margin-top を書くと、
   有無の変わる要素（上位プランだけの signal）を挟んだ時に間隔がずれる。 */
.n1a-price-card > * + * {
  margin-top: var(--n1a-card-gap);
}

.n1a-price-card--premium {
  border-color: rgba(119, 72, 211, .3);
  background: linear-gradient(165deg, #fff 58%, #f6f1ff);
  box-shadow: 0 28px 70px rgba(62, 46, 148, .2);
}

.n1a-price-card__label {
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 800;
  letter-spacing: -.01em;
}

.n1a-price-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.n1a-price-card__price strong {
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1;
  letter-spacing: -.05em;
}

.n1a-price-card__price span {
  font-size: 13px;
  font-weight: 700;
  color: var(--n1a-card-ink-muted);
}

.n1a-price-card__match {
  color: var(--n1a-card-ink-muted);
  font-size: 16px;
  font-weight: 800;
}

.n1a-price-card__coming-soon {
  margin-top: auto;
  padding: 16px 24px;
  border: 1px solid rgba(91, 69, 214, .26);
  border-radius: 14px;
  color: #5b45d6;
  background: rgba(151, 96, 255, .07);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
}

.n1a-price-card ul {
  display: grid;
  /* 行間ぶんの余白が乗るので、ブロック間の間隔より一段詰めて 1 つの塊に見せる。 */
  gap: var(--n1a-space-xs);
  /* ボタンは margin-top: auto で下端に寄るため、余りが 0 のカードでも
     リストと詰まらないように最低限の間隔をこちら側で確保する。 */
  margin-bottom: var(--n1a-card-gap);
  padding: 0;
  list-style: none;
}

.n1a-price-card li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.n1a-price-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--n1a-card-accent);
  font-weight: 900;
}

/* 上位プラン限定の機能。行そのものは他の項目と完全に同じ扱いにして、
   末尾のタグだけで差を出す。 */
.n1a-price-card__signal span {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--n1a-card-accent);
  background: rgba(119, 72, 211, .12);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  vertical-align: 2px;
}

.n1a-price-card__button {
  margin-top: auto;
  padding: 18px 24px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #3330a8, #7748d3 62%, #9760ff);
  box-shadow: 0 14px 30px rgba(76, 55, 190, .28);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transform: translateY(0);
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    filter .28s ease;
}

.n1a-price-card__button:hover,
.n1a-price-card__button:focus-visible {
  transform: translateY(-7px);
  box-shadow: 0 22px 42px rgba(76, 55, 190, .38);
  filter: brightness(1.06);
}

.n1a-price-card__button:active {
  transform: translateY(-2px);
  box-shadow: 0 15px 28px rgba(76, 55, 190, .3);
}

/* カード面から手前に浮かせるレイヤー群。--z がそのまま奥行き(px)。
   scale((p - z) / p) が遠近投影の逆補正、transform-origin をカード中心
   （＝消失点）に置くことで拡大と外向きのズレの両方が相殺され、正面では
   現状と同じ位置・同じ大きさに戻る。ズレるのは回転したときだけ。
   transform-origin は要素の左上からの px なので、left/top 指定の要素は
   定数で、right/bottom 指定の要素は 100%（＝自身の幅高さ）を挟んで書く。 */
.n1a-floating-ui {
  --z: 0;
  --n1a-depth:
    translateZ(calc(var(--z) * 1px))
    scale(calc((var(--n1a-p) - var(--z)) / var(--n1a-p)));
  position: absolute;
  z-index: 3;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  /* 浮いている分だけ影を落とす */
  box-shadow:
    0 calc(15px + var(--z) * .14px) calc(34px + var(--z) * .34px)
    rgba(31, 22, 101, .24);
  color: #312b55;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
  transform: var(--n1a-depth);
  animation: n1a-ui-float 3s ease-in-out infinite;
}

.n1a-floating-ui--radar {
  --z: 96;
  left: -92px;
  top: 68px;
  width: 142px;
  padding: 9px 11px 6px;
  transform-origin: 252px 192px;
}

.n1a-floating-ui--industry {
  --z: 58;
  right: -102px;
  top: 122px;
  max-width: 175px;
  transform-origin: calc(100% - 262px) 138px;
  animation-delay: -.6s;
}

.n1a-floating-ui--keywords {
  --z: 112;
  left: -108px;
  top: 244px;
  width: 185px;
  transform-origin: 268px 16px;
  animation-delay: -1.2s;
}

.n1a-floating-ui--interest {
  --z: 70;
  right: -108px;
  top: 248px;
  width: 175px;
  transform-origin: calc(100% - 268px) 12px;
  animation-delay: -1.9s;
}

.n1a-floating-ui--birthplace {
  --z: 44;
  left: -76px;
  bottom: 112px;
  min-width: 100px;
  transform-origin: 236px calc(100% - 148px);
  animation-delay: -.9s;
}

.n1a-floating-ui--deals {
  --z: 130;
  left: 38px;
  bottom: 58px;
  min-width: 120px;
  transform-origin: 122px calc(100% - 202px);
  animation-delay: -1.5s;
}

.n1a-floating-ui--hobby {
  --z: 84;
  right: -96px;
  bottom: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 176px;
  min-height: 166px;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform-origin: calc(100% - 256px) calc(100% - 226px);
  animation-delay: -2.3s;
}

.n1a-floating-label {
  display: block;
  margin-bottom: 4px;
  color: var(--card-color);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}

.n1a-keyword-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.n1a-keyword-chips span {
  padding: 3px 6px;
  border-radius: 999px;
  color: #fff;
  background: var(--card-color);
  font-size: 9px;
  white-space: nowrap;
}

.n1a-floating-ui--hobby img {
  display: block;
  width: 168px;
  height: 142px;
  object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(22, 16, 76, .22));
}

.n1a-hobby-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  margin-top: -3px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 20px rgba(31, 22, 101, .18);
  color: #312b55;
  font-size: 10px;
  font-weight: 900;
}

.n1a-steps ~ .bottom-flower-deco {
  display: none !important;
}

/*
 * ドロワーとフッターの共通部品。
 *
 * この2つは「ブランド列＋MENU 列」という同じ組みを、濃色の地の上で出し分けて
 * いるだけなので、体裁はここ1箇所から引く。片方だけ直すと、開いたメニューと
 * フッターで字面や下線の出方がずれる。それぞれで違う値（ロゴ幅・下線を離す
 * 量・出現順の --i）は各節に残してある。
 */
.n1a-global-navigation a:focus-visible,
.n1a-menu-close:focus-visible,
.n1a-footer a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .9);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ブランド列（ロゴ → 一言 → 運営会社のリンク）。 */
.n1a-menu-brand,
.n1a-footer-brand {
  display: grid;
  justify-items: start;
  gap: var(--n1a-space-m);
}

/* 色付きのロゴを白く抜いて使う。濃色の地に置くのはこの2箇所だけ。 */
.n1a-menu-logo img,
.n1a-footer-logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

/* 列の小見出し（MENU）。 */
.n1a-menu-nav__title,
.n1a-footer-nav__title {
  color: rgba(255, 255, 255, .58);
  font-family: "Krona One", sans-serif;
  font-size: 11px;
  letter-spacing: .16em;
}

/*
 * リンクの下線。右から消えて左から出る。リンクの位置を動かさずに反応を返す
 * ため、text-decoration ではなく擬似要素で持つ。文字から下線までの間隔だけは
 * 字の大きさが違うので、各節の bottom で決める。
 */
.n1a-menu-links__label::after,
.n1a-footer-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .3s ease;
}

.n1a-menu-links a:hover .n1a-menu-links__label::after,
.n1a-menu-links a:focus-visible .n1a-menu-links__label::after,
.n1a-footer-nav a:hover::after,
.n1a-footer-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/*
 * 全画面ドロワー。フッターと同じ組みにしてある：左にブランド（白ロゴ＋一言＋
 * 運営会社のピル）、右に MENU の導線、区切りは 1px のヘアライン、ホバーは
 * 下線が右から消えて左から出る。ヘッダーから開く面とページの最後の面が同じ
 * 語彙なら、メニューは「別サイト」ではなくこのサイトの一部として読める。
 *
 * 横幅はページの他のセクションと同じ --n1a-content で、ドロワー自身は左右の
 * パディングを持たない。開いた瞬間にロゴの左端とリンクの右端が、その裏にある
 * セクションの左右端とそのまま揃う。以前は 680px の中央寄せで、閉じている
 * ときの版面とも、フッターとも揃っていなかった。
 */
.n1a-global-navigation {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  place-items: center;
  overflow-y: auto;
  padding: clamp(96px, 13vh, 148px) 0 clamp(56px, 9vh, 104px);
  color: #fff;
  background:
    radial-gradient(circle at 82% 8%, rgba(255, 122, 225, .34), transparent 42%),
    radial-gradient(circle at 10% 90%, rgba(45, 191, 211, .3), transparent 46%),
    linear-gradient(145deg, #3330a8, #7748d3 55%, #2dbfd3);
}

/* 縦に余裕のない画面では中央寄せをやめる。grid の中央寄せは、中身が
   コンテナより高くなると上側が overflow の外に出てスクロールで戻れない。 */
@media (max-height: 720px) {
  .n1a-global-navigation {
    align-items: start;
  }
}

/*
 * 閉じるボタンはハンバーガーと同じ「線だけ」の記号にする。囲みも地色も持たない
 * （丸い枠を足すと、同じ場所にある同じ役割のボタンが開閉で別物に見える）。
 * 位置・大きさ・線の太さは全部ハンバーガーと同じ変数から引く。
 */
.n1a-menu-close {
  position: absolute;
  right: var(--n1a-header-inset);
  top: calc(var(--n1a-header-center) - var(--n1a-header-btn) / 2);
  display: grid;
  width: var(--n1a-header-btn);
  height: var(--n1a-header-btn);
  place-items: center;
  padding: 0;
  border: 0;
  color: #fff;
  background: none;
  cursor: pointer;
  opacity: 0;
  translate: 0 14px;
  /* 並び順は .on 側の transition-delay と対応している（前2つ＝出現、最後＝ホバー）。 */
  transition:
    opacity .5s ease,
    translate .5s cubic-bezier(.22, 1, .36, 1),
    rotate .35s cubic-bezier(.22, 1, .36, 1);
}

/* ハンバーガーのホバーは線の色を一段持ち上げているが、こちらの線は白なので
   同じことができない。代わりに 1/4 回転で返す（× は 90° 対称なので、
   形は変えずに動きだけが返る）。 */
.n1a-menu-close:hover {
  rotate: 90deg;
}

/* 45° に倒すので、腕の長さはハンバーガーの記号の高さの √2 倍。
   ハンバーガー側の白いハローは地の色が渦から白セクションまで変わるために
   付けているもので、グラデーション1枚のドロワーには要らない。 */
.n1a-menu-close__lines {
  position: relative;
  display: block;
  width: calc(var(--n1a-header-mark-h) * 1.4142);
  height: var(--n1a-header-line-h);
}

.n1a-menu-close__lines span {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: #fff;
}

.n1a-menu-close__lines span:first-child { rotate: 45deg; }
.n1a-menu-close__lines span:last-child { rotate: -45deg; }

.n1a-menu-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--n1a-space-xl);
  width: var(--n1a-content);
}

.n1a-menu-logo {
  display: block;
  width: clamp(132px, 13vw, 178px);
}

/* nomo は html に overflow-wrap: anywhere と line-break: normal を敷いていて、
   そのままだと「…プラットフォ／ーム」のように長音が行頭に落ちる。見出しなので
   禁則を効かせる。 */
.n1a-menu-title {
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -.02em;
  overflow-wrap: normal;
  line-break: strict;
}

/* フッターの一言と同じ体裁。欧文だけ折り返しを止める理由も同じ。 */
.n1a-menu-tagline {
  max-width: 30em;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.95;
  letter-spacing: .03em;
  overflow-wrap: normal;
  word-break: normal;
}

.n1a-menu-nav {
  width: clamp(288px, 32vw, 420px);
}

/* 左右2列は版面が 1000px 前後ないと成立しない。タブレット幅ではブランド列が
   狭くなりすぎて見出しが「…プラットフォー／ム」と割れるので、その手前で積む。 */
@media (max-width: 1023px) {
  .n1a-menu-inner {
    grid-template-columns: 1fr;
    gap: var(--n1a-space-l);
  }

  .n1a-menu-nav {
    width: 100%;
  }
}

.n1a-menu-links {
  position: relative;
  display: grid;
  margin: var(--n1a-space-m) 0 0;
  padding: 0;
  list-style: none;
}

/* 罫線は border ではなく擬似要素で持つ。開くときに左から引かれる線として
   1本ずつ出したいので、太さではなく scaleX で動かせる必要がある。 */
.n1a-menu-links::before,
.n1a-menu-links li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, .22);
  transform-origin: left center;
}

.n1a-menu-links::before { top: 0; }

.n1a-menu-links li {
  position: relative;
}

.n1a-menu-links li::after { bottom: 0; }

.n1a-menu-links a {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: clamp(14px, 1.4vw, 20px);
  padding: clamp(15px, 1.7vw, 21px) 0;
}

.n1a-menu-links__index {
  color: rgba(255, 255, 255, .5);
  font-family: "Krona One", sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  transition: color .25s ease;
}

.n1a-menu-links a:hover .n1a-menu-links__index,
.n1a-menu-links a:focus-visible .n1a-menu-links__index {
  color: #fff;
}

.n1a-menu-links__label {
  position: relative;
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 700;
  letter-spacing: .01em;
}

/* 下線の作りはドロワーとフッターの共通部品側。ここは離す量だけ持つ。 */
.n1a-menu-links__label::after {
  bottom: -5px;
}

.n1a-menu-links a::after {
  content: "→";
  font-size: 14px;
  transition: translate .3s cubic-bezier(.22, 1, .36, 1);
}

.n1a-menu-links a:hover::after,
.n1a-menu-links a:focus-visible::after {
  translate: 5px 0;
}

/*
 * 開くときの出方。ドロワー自体は nomo の clip-path のワイプ（右→左, .8s）に
 * 乗ったままなので、中身はその面が通り過ぎた後を追う。.on は開く 100ms 後に
 * 付き、閉じる 700ms 前に外れる（どちらも nomo の header コンポーネント）。
 *
 * transition で組むのはそのため。アニメーションだと .on が外れた瞬間に中身が
 * 消えて、面のワイプだけが残る。transition なら delay が 0 に戻るので、閉じる
 * ときはまとめて引いてから面が閉じる。
 *
 * 上げ幅と easing はプロフィールカードのキーワードチップと同じ。サイト内で
 * 「出てくる」動きが1種類なら、面ごとに別の癖が付かない。
 */
.n1a-menu-brand > *,
.n1a-menu-nav__title,
.n1a-menu-links li {
  opacity: 0;
  translate: 0 14px;
  transition: opacity .55s ease, translate .55s cubic-bezier(.22, 1, .36, 1);
}

.n1a-menu-links::before,
.n1a-menu-links li::after {
  transform: scaleX(0);
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}

.n1a-global-navigation.on .n1a-menu-brand > *,
.n1a-global-navigation.on .n1a-menu-nav__title,
.n1a-global-navigation.on .n1a-menu-links li {
  opacity: 1;
  translate: 0 0;
  transition-delay: calc(.3s + var(--i, 0) * .07s);
}

.n1a-global-navigation.on .n1a-menu-links::before,
.n1a-global-navigation.on .n1a-menu-links li::after {
  transform: scaleX(1);
  transition-delay: calc(.32s + var(--i, 0) * .07s);
}

.n1a-global-navigation.on .n1a-menu-close {
  opacity: 1;
  translate: 0 0;
  /* 出現（opacity / translate）だけ遅らせる。最後はホバーの分なので 0s。 */
  transition-delay: .5s, .5s, 0s;
}

/* MENU のラベルと ul の上罫線は、1行目（--i:4）の直前に出す。 */
.n1a-menu-nav__title { --i: 3; }
.n1a-menu-links::before { --i: 3; }

/* ドロワーとフッターに同じ「株式会社ZETTAICHI HP」リンクが出るので、形も1つに
   する。以前はドロワーがピル、フッターが下線付きテキストだった。 */
.n1a-menu-company,
.n1a-footer-company {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 13px 20px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  transition: border-color .25s ease, background-color .25s ease;
}

.n1a-menu-company:hover,
.n1a-footer-company:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .14);
}

/* ブランド列の他の要素より一段離す（gap の上に足す差分だけ）。 */
.n1a-menu-company {
  margin-top: var(--n1a-space-xs);
}

/*
 * フッター。ブランド（ロゴ＋一言＋運営会社）と導線（サイト内リンク）を左右に
 * 分け、その下に細い罫線で区切ったクレジット行を敷く2段構成。
 *
 * 以前は4つの要素を 2x2 のグリッドに置いていたので、ナビが右上、コピーライトが
 * 右下に飛んで真ん中が空き、どれが主でどれが従なのか読めなかった。上段＝案内、
 * 下段＝クレジット、と役割で段を分けている。
 *
 * 左右の余白と最大幅はページの他のセクションと同じ --n1a-content。フッターの
 * ロゴの左端が、直上の料金カードの左端と揃う。
 */
.n1a-footer {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 0 !important;
  margin: 0 !important;
  padding: var(--n1a-space-2xl) 0 var(--n1a-space-l);
  color: #fff;
  background:
    radial-gradient(88% 120% at 4% -12%, rgba(88, 235, 224, .34), transparent 56%),
    radial-gradient(72% 110% at 98% 112%, rgba(255, 140, 226, .26), transparent 58%),
    linear-gradient(135deg, #2d258c, #6337b9 58%, #273293);
}

.n1a-footer ~ *:not(script) {
  display: none !important;
}

html:has(.n1a-footer),
body:has(.n1a-footer) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.n1a-footer:last-child {
  margin-bottom: 0 !important;
}

.n1a-footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--n1a-space-xl);
  width: var(--n1a-content);
  margin: 0 auto;
}

.n1a-footer-logo {
  display: block;
  width: 150px;
}

.n1a-footer-tagline {
  max-width: 34em;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.95;
  letter-spacing: .03em;
  /* nomo は html に overflow-wrap: anywhere を敷いているので、放っておくと
     "Big Five" が Big / Five に割れる。和文の折り返しは変えずに欧文だけ守る。 */
  overflow-wrap: normal;
  word-break: normal;
}

/* 右端をコンテナの端（＝直上の料金カードの右端）に揃える。左を揃えると
   項目ごとに長さが違うぶん右側がばらけて、フッターの縁が二重に見える。 */
.n1a-footer-nav {
  display: grid;
  gap: var(--n1a-space-s);
  justify-items: end;
  text-align: right;
}

.n1a-footer-nav ul {
  display: grid;
  gap: var(--n1a-space-s);
  justify-items: end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.n1a-footer-nav a {
  position: relative;
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
}

.n1a-footer-nav a::after {
  bottom: -4px;
}

.n1a-footer-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--n1a-space-2xs) var(--n1a-space-m);
  width: var(--n1a-content);
  margin: var(--n1a-space-xl) auto 0;
  padding-top: var(--n1a-space-m);
  border-top: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
  letter-spacing: .02em;
}

.n1a-radar-title {
  margin-bottom: -4px;
  color: var(--card-color);
  font-size: 10px;
  letter-spacing: .08em;
}

/* 枠（五角形・軸・OCEAN の文字）は index.html の <symbol> を <use> で引いている。
   <use> の中には CSS のセレクタが届かないので、文字の体裁は継承される性質
   （fill / font-size / font-weight）として svg 側に置く。 */
.n1a-radar {
  display: block;
  width: 120px;
  height: 120px;
  fill: #615c78;
  font-size: 8px;
  font-weight: 900;
}

.n1a-radar__shape {
  fill: color-mix(in srgb, var(--card-color) 30%, transparent);
  stroke: var(--card-color);
  stroke-width: 2;
  /* 中心（viewBox の 60,60）を基点に 0 から開く。transform-box を明示するのは、
     指定しないと基準ボックスが図形自身のバウンディングボックスになり、原点が
     チャートの中心からずれるため。 */
  transform-box: view-box;
  transform-origin: 60px 60px;
  transform: scale(0);
}

/*
 * カードの中身の組み立て。JS が is-shown を付けた瞬間＝半回転の 37% 地点
 * （表裏が入れ替わり、カードが読める向きになるところ）から始まる。
 * そこから着地までは約 1.0 秒あるので、レーダーはちょうど着地で開き切り、
 * キーワードは着地の直後に出そろう。is-shown はカードが正面に来るたびに
 * 付け外しされるので、4枚それぞれで再生される。
 */
.n1a-person-card.is-shown .n1a-radar__shape {
  animation: n1a-radar-grow .9s cubic-bezier(.22, 1, .36, 1) .16s both;
}

@keyframes n1a-radar-grow {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

.n1a-keyword-chips span {
  opacity: 0;
}

.n1a-person-card.is-shown .n1a-keyword-chips span {
  animation: n1a-chip-in .4s cubic-bezier(.22, 1, .36, 1) both;
}

/* 1つずつ 0.22 秒ずらす。現状は3つだが、増えても崩れないよう5つまで敷く。 */
.n1a-person-card.is-shown .n1a-keyword-chips span:nth-child(1) { animation-delay: .52s; }
.n1a-person-card.is-shown .n1a-keyword-chips span:nth-child(2) { animation-delay: .74s; }
.n1a-person-card.is-shown .n1a-keyword-chips span:nth-child(3) { animation-delay: .96s; }
.n1a-person-card.is-shown .n1a-keyword-chips span:nth-child(4) { animation-delay: 1.18s; }
.n1a-person-card.is-shown .n1a-keyword-chips span:nth-child(5) { animation-delay: 1.4s; }

@keyframes n1a-chip-in {
  from { opacity: 0; translate: 0 5px; scale: .86; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

/* 出身・累計商談・人柄・関心領域は、値を1文字ずつ出す。文字ごとの span と
   通し番号 --i は n1a-profile-carousel.js が組み立てる。JS が動かなかった
   場合は span 自体が作られないので、素のテキストがそのまま見える。 */
.n1a-char {
  display: inline-block;
  opacity: 0;
}

/* 英数字が続く部分。ここだけ語中で折り返さない。 */
.n1a-word {
  white-space: nowrap;
}

.n1a-person-card.is-shown .n1a-char {
  animation: n1a-char-in .34s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--n1a-type-start, 0s) + var(--i, 0) * 55ms);
}

/* 4つが一斉に打ち始めると、どこを読めばいいのか分からなくなる。左下の短い値
   （出身）から始めて右へ送る。いちばん長い関心領域でも 1.7 秒あたりで打ち
   終わるので、レーダーが開き切る 1.06 秒、キーワードが出そろう 1.8 秒の間に
   収まり、正面で静止している 2.6 秒を超えない。 */
.n1a-floating-ui--birthplace { --n1a-type-start: .30s; }
.n1a-floating-ui--industry { --n1a-type-start: .38s; }
.n1a-floating-ui--deals { --n1a-type-start: .46s; }
.n1a-floating-ui--interest { --n1a-type-start: .60s; }

@keyframes n1a-char-in {
  from { opacity: 0; translate: 0 .3em; scale: .82; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

.n1a-carousel-dots {
  position: absolute;
  left: 0;
  bottom: 30px;
  display: flex;
  justify-content: center;
  gap: 9px;
  width: 100%;
}

.n1a-carousel-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.38);
  cursor: pointer;
  transition: transform .25s ease, background .25s ease;
}

.n1a-carousel-dots button.is-active {
  background: #fff;
  transform: scale(1.45);
}

/* 浮きは transform ではなく translate プロパティで動かす。transform は
   --n1a-depth を読んだまま静止させ、アニメーションは変数を参照しない独立
   プロパティ側だけにする。キーフレームが変数を読むとコンポジタに乗らず、
   28個ぶんが毎フレーム メインスレッドを踏むため（実測でページ全体の
   スタイル再計算の最大要因）。translate は transform より外側に掛かるので
   奥行きスケール分だけ振幅が変わるが、その差は 0.5px 未満。 */
@keyframes n1a-ui-float {
  0%, 100% { translate: 0 -4px; }
  50% { translate: 0 4px; }
}

.n1a-carousel-hint {
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  color: rgba(255,255,255,.74);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
}

@media (max-width: 767px) {
  /* ヘッダーのロゴとボタンが一段小さくなる幅。× もこれに追従する。 */
  :root {
    --n1a-header-logo-w: 108px;
    --n1a-header-btn: 40px;
    --n1a-header-line-w: 24px;
    --n1a-header-line-h: 2.5px;
    --n1a-header-line-gap: 6px;
  }

  [x-ref="loadingLogo"] {
    width: min(76vw, 290px) !important;
  }

  [x-ref="loadingLogo"]::before {
    width: min(68vw, 250px);
  }

  [x-ref="loadingLogo"]::after {
    font-size: 11px;
    letter-spacing: .035em;
  }

  /* 幅・余白は :root のトークンが画面幅に追従するので、ここで持つのは
     1カラムへの組み替えと級数だけ。 */
  .n1a-about-grid {
    grid-template-columns: 1fr;
  }

  .n1a-about-copy {
    font-size: 15px;
    line-height: 1.9;
  }

  .n1a-about-lead {
    font-size: 28px;
  }

  .n1a-about-subcopy {
    font-size: 15px;
  }

  .n1a-feature-row {
    grid-template-columns: 1fr;
    gap: var(--n1a-space-l);
  }

  /* 1カラムでは常に「ラベル＋ビジュアル → コピー」の順に戻す。 */
  .n1a-feature-row--reverse .n1a-feature-visual {
    order: 0;
  }

  /* ただし「独自のマッチング構造」は、1カラムでは文章が先。図は文章の裏づけで、
     何を表しているのかを読んでからでないと3つの箱の意味が取れない。
     （「n1a固有の仕組み」の3行は実画面の録画で、それ自体が何かを示すので
     ビジュアルが先のまま） */
  .n1a-matching .n1a-feature-copy {
    order: -1;
  }

  .n1a-feature-label {
    font-size: 16px;
  }

  .n1a-feature-title {
    font-size: 24px;
  }

  .n1a-feature-description {
    font-size: 14px;
  }

  /* 1カラムでは図が画面幅まで縮む。viewBox の比で字も一緒に縮むので、
     ここだけ字を起こして箱の中の文字が読める大きさに戻す。 */
  .n1a-feature-diagram__text {
    font-size: 23px;
  }

  .n1a-step-row {
    grid-template-columns: 1fr;
    gap: var(--n1a-space-l);
  }

  .n1a-step-visual {
    width: 88%;
    margin-inline: auto;
  }

  .n1a-step-copy {
    text-align: left;
  }

  .n1a-step-number {
    gap: 12px;
    /* clamp の下限 30px は、27px のタイトルに対して大きすぎる。 */
    font-size: 28px;
  }

  .n1a-step-title {
    font-size: 27px;
  }

  .n1a-pricing-grid {
    grid-template-columns: 1fr;
  }

  .n1a-price-card {
    min-height: 0;
    border-radius: 28px;
  }

  /* SP は1カラム。上に詰めるのは、ブランド＋導線を積むと画面より高くなり、
     中央寄せだと先頭のロゴがスクロールで戻れない位置に出るため。 */
  .n1a-global-navigation {
    align-items: start;
    padding: 96px 0 56px;
  }

  /* 2行に収める。24px だと「経営者マッチングプラットフォーム」が
     iPhone 幅の版面に入らず3行になる。 */
  .n1a-menu-title {
    font-size: 21px;
  }

  .n1a-menu-tagline {
    max-width: none;
  }

  .n1a-footer-inner {
    grid-template-columns: 1fr;
  }

  /* 1カラムでは右寄せの根拠（コンテナ右端との整列）がなくなる。 */
  .n1a-footer-nav,
  .n1a-footer-nav ul {
    justify-items: start;
    text-align: left;
  }

  .n1a-step-description {
    font-size: 14px;
    line-height: 1.9;
  }

  /* SP でも PC と同じ 3D を出す。カードの寸法や浮遊UIの位置を SP 用に置き直すと、
     消失点（perspective-origin）を基準に組んである奥行きの逆補正
     scale((p - z) / p) の前提が崩れ、浮きが全部カード面に貼り付いてしまう。
     なので SP 用の寸法はいっさい持たない。PC と同じ 540 x 650 のシーンを
     そのまま作り、外側から一度だけ縮小して画面幅に収める。 */
  .n1a-person-carousel {
    /* シーンの実寸に対する縮小率。丸ごと縮める以上この値がそのまま文字の
       大きさになるので、版面ガター(20px)ではなく 8px まで攻めて、浮遊UIの
       外縁が画面端に触れるところまでを使う。
       実際の値は n1a-profile-carousel.js が画面幅から出してインラインで載せる。
       ここの .5 は JS が走る前と JS 無効時のための固定値で、320px 幅でも収まる。

       以前はここを CSS だけで出そうとして
         --n1a-fit: min(1, tan(atan2(100vw - 16px, 540px)))
       と書いていたが、WebKit は atan2() の2つの引数の単位が揃っていないとき
       （100vw 由来の長さ と px）変換を取りこぼし、まったく違う値を返す。
       Chrome の DevTools では正しく 0.66 前後になるのに、実機の iOS Safari
       だけカードが巨大化・反転したのはこれが原因。scale() に負の数が入ると
       拡大と 180° 回転が同時に起きる。数を作る計算はブラウザに任せない。 */
    --n1a-fit: .5;
    width: 100%;
    /* 高さは PC のまま（基底の 650px）にしておくこと。ドットとヒントはこの箱の
       下端を基準に置いてあるので、縮小に合わせて height を詰めると2つとも
       せり上がってカードに重なる。箱は PC と同じ寸法のまま作り、縮んで余った
       ぶんを負のマージンで詰めて後続セクションを引き上げる。 */
    margin-bottom: calc(650px * (var(--n1a-fit) - 1));
    justify-self: center;
    transform: scale(var(--n1a-fit));
    /* 基点はシーンの上端中央。カードは left: 50% で中央にいるので、左右対称に
       縮んで版面のどちら側にもはみ出さない。 */
    transform-origin: top center;
  }

  .n1a-float {
    width: clamp(135px, 46vw, 220px);
  }

  .n1a-float--8 {
    left: -3%;
    top: 2%;
  }

  .n1a-float--10 {
    right: 2%;
    top: 12%;
    width: clamp(125px, 39vw, 190px);
  }

  .n1a-float--11 {
    left: -1%;
    bottom: 8%;
    width: clamp(130px, 40vw, 200px);
  }

  .n1a-float--12 {
    right: -8%;
    top: 48%;
    width: clamp(170px, 57vw, 270px);
  }

  .n1a-float--13 {
    left: -5%;
    top: 38%;
    width: clamp(125px, 40vw, 195px);
  }

  .n1a-float--14 {
    right: 2%;
    bottom: -3%;
    width: clamp(130px, 42vw, 205px);
  }

  .n1a-people-field {
    transform: translateY(9vh);
  }

  .n1a-float--handshake {
    right: -5%;
    top: 24%;
    width: clamp(170px, 54vw, 260px);
  }

}

/* ============================================================
   拡大表示（n1a-lightbox.js）
   対象は「n1a固有の仕組み」の実画面（動画・画像）と、「商談だけに集中できる
   5ステップ」の画像。動画のときは、その行の3つの文字も一緒に大きくする。
   ============================================================ */

/* 押せることは、まずカーソルと、押し込みに寄る動きで示す。枠線やアイコンを
   足すと、行ごとに並んだ画像の上に同じ記号が5つ並んで、内容より記号が目立つ。 */
.n1a-feature-visual img,
.n1a-feature-video,
.n1a-step-visual img {
  cursor: zoom-in;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.n1a-feature-visual img:hover,
.n1a-feature-video:hover,
.n1a-step-visual img:hover,
.n1a-feature-visual img:focus-visible,
.n1a-feature-video:focus-visible,
.n1a-step-visual img:focus-visible {
  transform: scale(1.03);
}

.n1a-feature-visual img:focus-visible,
.n1a-feature-video:focus-visible,
.n1a-step-visual img:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .95);
  outline-offset: 3px;
}

/* 静止画に差し替えたときも、動画と同じ角丸・同じ幅で収まるようにしておく。 */
.n1a-feature-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(18px, 2.2vw, 28px);
}

/* 暗幕。開いていない間も DOM には残すが、visibility で読み上げ・タブ移動の
   対象から外す（display:none だと開くときの遷移が効かない）。 */
.n1a-lightbox {
  position: fixed;
  inset: 0;
  /* nomo の .texture-noise（全面のざらつき）が z-index:1000 で最前面に張って
     いるので、その上に出す。拡大した画像にまでノイズを乗せると、細い文字の
     入った実画面が読みづらくなる。ヘッダー（z-50）とドロワーはこの下。 */
  z-index: 1001;
  /* 中身は .n1a-lightbox__stage の margin:auto で真ん中に置く。grid や flex の
     centering だと、動画＋説明が縦に収まらないときに上へはみ出したぶんが
     切り落とされ、送っても戻れなくなる。 */
  display: flex;
  overflow-y: auto;
  /* 中を送りきっても、その先が背後の文書へ渡らないようにする。 */
  overscroll-behavior: contain;
  padding: clamp(20px, 5vw, 64px);
  /* 拡大した画像の外に、色として読めるものを残さない。背後は渦から白まで
     変わるので、暗さは背景側ではなくこの1枚で決める。 */
  background: rgba(9, 6, 34, .86);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  cursor: zoom-out;
  transition: opacity .32s ease, visibility .32s;
}

.n1a-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.n1a-lightbox__stage {
  /* flex の中の margin:auto。収まるうちは中央、あふれたら上端から送れる。 */
  margin: auto;
  width: 100%;
  /* flex の子は既定で min-width:auto = 中身の最小幅より縮まない。動画の幅は
     min(100%, …px) で書いてあり、この px のほうが最小幅として読まれるので、
     置かないと狭い画面で暗幕が横にはみ出す。 */
  min-width: 0;
  /* 拡がる動きは、実画面だけでなく器ごと持たせる。動画1枚だけが大きくなると、
     横に並んだ3つの文字が「最初からそこにあった」ように見えて、押して拡げた
     という手応えが出ない。中身をまとめて1つの塊として大きくする。

     どこから拡がるかは n1a-lightbox.js が押したものを測って決め、開始の姿を
     transform として直接置く（FLIP）。ここに書いてある scale(.9) は、測れな
     かったとき（動きを控える設定など）に中央で拡がるための控え。 */
  transform: scale(.9);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.n1a-lightbox.is-open .n1a-lightbox__stage {
  transform: scale(1);
}

/* 画像のときは器を使わず、画像1枚だけを真ん中に置く（従来どおり）。 */
.n1a-lightbox[data-mode="image"] .n1a-lightbox__stage {
  display: grid;
  justify-items: center;
}

.n1a-lightbox[data-mode="image"] .n1a-lightbox__video,
.n1a-lightbox[data-mode="image"] .n1a-lightbox__copy,
.n1a-lightbox[data-mode="video"] .n1a-lightbox__image {
  display: none;
}

/* 動画のときは、実画面と、その行が持っていた3つの文字を横に並べる。文字のほうを
   狭くするのは、説明の1行が長くなりすぎると、動画から目を戻した先で行を見失う
   ため。 */
.n1a-lightbox[data-mode="video"] .n1a-lightbox__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 3.4vw, 56px);
  max-width: min(1400px, 100%);
}

/* 左右を入れ替えている行を押したときは、暗幕の中も入れ替える（data-side は
   n1a-lightbox.js が押した行を見て置く）。ページで右にあった実画面が暗幕では
   左に出ると、押したものが画面を横切って滑り、拡がったようには見えない。
   同じ側に出れば、動きはその場で大きくなるだけになる。 */
.n1a-lightbox[data-mode="video"][data-side="end"] .n1a-lightbox__stage {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
}

.n1a-lightbox[data-side="end"] .n1a-lightbox__video {
  order: 2;
}

.n1a-lightbox[data-side="end"] .n1a-lightbox__copy {
  order: 1;
}

/* 高さは暗幕のパディングを引いた残り。横長・縦長のどちらが来ても、暗幕から
   はみ出してスクロールを呼ばないようにする。 */
.n1a-lightbox__image,
.n1a-lightbox__video {
  display: block;
  max-width: min(1080px, 100%);
  max-height: calc(100svh - clamp(40px, 10vw, 128px));
  width: auto;
  height: auto;
  border-radius: clamp(16px, 2vw, 28px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
}

/* 動画は、読み込む前から実寸ぶんの場所を取らせる。metadata が届くのを待つと、
   <video> の既定の 300×150 で一度出てから実寸へ飛ぶ。縦横比は3本で揃っていない
   ので、開くときに JS が --n1a-video-ratio として渡す。
   幅の上限を高さから逆算しているのは、横に長く背の低い画面で max-height 側だけ
   が効いて縦に潰れるのを避けるため（幅で止めれば比は崩れない）。
   左右の上限を画像の 1080px に合わせないのは、横に説明を置いたぶんだけ小さく
   見えてしまうから。 */
.n1a-lightbox__video {
  --n1a-video-ratio: 16 / 9;
  aspect-ratio: var(--n1a-video-ratio);
  width: min(100%, calc((100svh - clamp(40px, 10vw, 128px)) * var(--n1a-video-ratio)));
  max-width: 100%;
  max-height: none;
  justify-self: center;
}

/* 暗幕はどこを押しても閉じる（cursor: zoom-out）が、動画だけは止める／流すに
   割り当てている。押した先が違うことは、まずカーソルで見せる。 */
.n1a-lightbox[data-mode="video"] .n1a-lightbox__video {
  cursor: pointer;
}

.n1a-lightbox__copy {
  max-width: 46ch;
  color: #fff;
  text-align: left;
  /* 大きさは器の動きが運ぶので、ここでは持たない（二重に掛かる）。持つのは
     濃さだけ。運ばれている途中の小さい文字が、読めないまま目に入るのを避ける
     ため、少し遅れて、器が落ち着くころに追いつく。 */
  opacity: 0;
  transition: opacity .34s ease .12s;
}

.n1a-lightbox.is-open .n1a-lightbox__copy {
  opacity: 1;
}

/* ページ上の3つ（ラベル・見出し・説明）を、そのままの序列で一回り大きくする。 */
.n1a-lightbox__label {
  margin-bottom: var(--n1a-space-xs);
  color: rgba(255, 255, 255, .92);
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 800;
  letter-spacing: .02em;
}

.n1a-lightbox__title {
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -.035em;
}

.n1a-lightbox__description {
  margin-top: var(--n1a-space-m);
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 500;
  line-height: 2;
  text-align: justify;
}

/* × はドロワーのものと同じ組み（同じ太さ・角丸の線2本）。 */
.n1a-lightbox__close {
  /* 暗幕自身が backdrop-filter を持つので、fixed の基準はこの暗幕になる。
     画面に貼り付いたまま、中身だけが送られる。 */
  position: fixed;
  top: var(--n1a-header-inset, 40px);
  right: var(--n1a-header-inset, 40px);
  display: grid;
  width: var(--n1a-header-btn, 44px);
  height: var(--n1a-header-btn, 44px);
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
}

.n1a-lightbox__close-lines {
  position: relative;
  display: block;
  width: var(--n1a-header-line-w, 26px);
  height: var(--n1a-header-mark-h, 23px);
}

.n1a-lightbox__close-lines span {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  height: var(--n1a-header-line-h, 3px);
  border-radius: 2px;
  background: #fff;
}

.n1a-lightbox__close-lines span:first-child {
  transform: translateY(-50%) rotate(45deg);
}

.n1a-lightbox__close-lines span:last-child {
  transform: translateY(-50%) rotate(-45deg);
}

.n1a-lightbox__close:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .95);
  outline-offset: 4px;
  border-radius: 6px;
}

/* 止める／流す。動画を拡大したときだけ出す。× と同じ組み（同じ大きさの当たり
   判定に、白い線だけの印）で、その左隣に並べる。押せるものを画面の右上に
   まとめておけば、拡大した実画面の上には何も乗らず、文字も隠れない。
   実画面の中央に大きな ▶ を重ねる手もあるが、そこに映っているのは細い字の入った
   UI で、いちばん読ませたいところを塞ぐことになる。 */
.n1a-lightbox__toggle {
  position: fixed;
  top: var(--n1a-header-inset, 40px);
  right: calc(var(--n1a-header-inset, 40px) + var(--n1a-header-btn, 44px));
  display: grid;
  width: var(--n1a-header-btn, 44px);
  height: var(--n1a-header-btn, 44px);
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
}

/* 画像のときは止めるものがない。 */
.n1a-lightbox[data-mode="image"] .n1a-lightbox__toggle {
  display: none;
}

/* 印は「いま押すと何が起きるか」を出す。流れている間は ❙❙、止まっている間は ▶。
   止まっているほうを ▶ にするのは、動きの止まった画面を前にして探すのが
   「もう一度流すもの」だから。 */
.n1a-lightbox__toggle-mark {
  display: flex;
  width: var(--n1a-header-mark-h, 23px);
  height: var(--n1a-header-mark-h, 23px);
  justify-content: center;
  gap: calc(var(--n1a-header-line-h, 3px) * 1.6);
}

.n1a-lightbox__toggle-mark span {
  display: block;
  width: calc(var(--n1a-header-line-h, 3px) * 1.5);
  height: 100%;
  border-radius: 2px;
  background: #fff;
}

/* ▶ は2本のうち1本を三角に切り替えて作る（要素を足すと、切り替えのたびに
   組み直すことになる）。左を少し空けて、見た目の重心を丸い当たり判定の中央に置く。 */
.n1a-lightbox[data-playing="off"] .n1a-lightbox__toggle-mark span:first-child {
  width: 85%;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  border-radius: 0;
}

.n1a-lightbox[data-playing="off"] .n1a-lightbox__toggle-mark span:last-child {
  display: none;
}

.n1a-lightbox__toggle:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .95);
  outline-offset: 4px;
  border-radius: 6px;
}

/* 横に文字を置く余地がなくなったら、ページ上と同じ「実画面 → 文字」の縦一列に
   戻す。動画の高さを画面の半分までに抑えるのは、その下に文字が続くことを、
   送る前に分かるようにするため。 */
@media (max-width: 900px) {
  .n1a-lightbox[data-mode="video"] .n1a-lightbox__stage,
  .n1a-lightbox[data-mode="video"][data-side="end"] .n1a-lightbox__stage {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(18px, 4vw, 28px);
    justify-items: center;
    /* × の真下に文字が来ないよう、その手前から始める。 */
    padding-top: clamp(28px, 8vw, 48px);
  }

  /* 1カラムでは、ページ側と同じく必ず「実画面 → 文字」の順に戻す。 */
  .n1a-lightbox[data-side="end"] .n1a-lightbox__video,
  .n1a-lightbox[data-side="end"] .n1a-lightbox__copy {
    order: 0;
  }

  .n1a-lightbox[data-mode="video"] .n1a-lightbox__video {
    width: min(100%, calc(52svh * var(--n1a-video-ratio)));
  }

  .n1a-lightbox__copy {
    max-width: none;
  }
}

@media (max-width: 767px) {
  /* 画面幅より大きくは出せないので、拡大の効きは左右の余白ぶんで決まる。
     正方形の実画面（1254px 角）は、この幅では横がそのまま上限になる。 */
  .n1a-lightbox {
    padding: 12px;
  }

  .n1a-lightbox__close {
    top: 16px;
    right: 16px;
  }

  .n1a-lightbox__toggle {
    top: 16px;
    right: calc(16px + var(--n1a-header-btn, 44px));
  }

  .n1a-lightbox__image {
    max-height: calc(100svh - 24px);
  }
}

/*
 * ここから下は、ヘッダー・KV のコピー・ページ上部へ戻るボタンなど、nomo の
 * 部品を n1a の見た目に置き換えるぶん。以前は page.tsx が文字列で持っていて
 * 実行時に <style> として差し込んでいたが、同じ文書に効く指定が2つのファイルに
 * 割れていた。指定元はこのファイル1つにする。
 *
 * 打ち消しに !important が要るのは、nomo 本体の CSS がこのファイルより後ろで
 * 読まれるため（順序ではなく詳細度で勝つ n1a 独自クラスには要らない）。
 */

header a[title="ホームに戻る"] {
  width: var(--n1a-header-logo-w, clamp(112px, 12vw, 178px)) !important;
}

header a[title="ホームに戻る"] img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

.headerBar > ul {
  display: none !important;
}

/* nomo はローディング演出の完了で $store.ui.headerShow を立ててヘッダーを出すが、
   n1a はそのローディング自体を殺しているのでフラグが永久に立たない。
   .main-inner を強制表示しているのと同じ理由でヘッダーも常時表示にする。 */
header {
  opacity: 1 !important;
}

/* nomo は 1320px 以上でヘッダーを「1fr / ナビ / 1fr」の3カラムにするため、
   中央のナビを隠すとメニューボタンが中央カラムに落ちて画面上部中央に残る。 */
.headerBar {
  grid-template-columns: 1fr max-content !important;
}

.n1a-menu-button {
  pointer-events: auto;
  display: grid;
  width: var(--n1a-header-btn, 44px);
  height: var(--n1a-header-btn, 44px);
  place-items: center;
  border: 0;
  background: none;
}

/* 地の色が KV の渦（ピンク〜青紫）から白セクションまで変わるので、
   線そのものに白のハローを付けてどの背景でも輪郭が残るようにする。 */
.n1a-menu-button__lines {
  display: grid;
  gap: var(--n1a-header-line-gap, 7px);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9));
}

.n1a-menu-button__lines span {
  display: block;
  width: var(--n1a-header-line-w, 26px);
  height: var(--n1a-header-line-h, 3px);
  border-radius: 2px;
  background: var(--n1a-tone-deep);
  transition: background-color .2s;
}

.n1a-menu-button:hover .n1a-menu-button__lines span {
  background: #0b56d8;
}

#copyLottie > :not(.n1a-kv-copy) {
  display: none !important;
}

#copyLottie {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: 50svh !important;
  bottom: auto !important;
  display: grid !important;
  width: min(90%, 860px) !important;
  margin: 0 !important;
  place-items: center !important;
  text-align: center !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10 !important;
}

/* 和文に -0.055em は欧文ディスプレイ用の詰めで、かなが接触して潰れる。
   Zen Kaku Gothic New は字面が大きめなので -0.02em で十分締まる。 */
/* カードが弾けるまでは出さない。合図（html.n1a-kv-burst）は再生ループを持つ
   n1a-kv-cards-mount.js が付ける。溜め（震え）の最中にコピーが載っていると、
   弾けたことが「コピーの登場」として読めなくなる。 */
#copyLottie .n1a-kv-copy {
  display: block;
  opacity: 0;
  /* 弾けた破片が集まって文字になる速度感。上げすぎると単なる遅延に見える。 */
  transform: translateY(16px) scale(.97);
  filter: blur(8px);
  transition:
    opacity .85s ease .3s,
    transform .85s cubic-bezier(.2, .8, .25, 1) .3s,
    filter .85s ease .3s;
  color: var(--n1a-tone-deep);
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: clamp(44px, 5.8vw, 84px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  white-space: normal;
  text-align: center;
  text-shadow: 0 2px 18px rgba(26, 25, 109, 0.13);
}

html.n1a-kv-burst #copyLottie .n1a-kv-copy {
  opacity: 1;
  transform: none;
  filter: none;
}

#copyLottie .n1a-kv-copy__sub {
  display: block;
  margin-top: .55em;
  font-size: clamp(14px, 1.35vw, 20px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .04em;
}

[x-ref="introCopy"] {
  display: none !important;
}

/* nomo のボタンは使わない。$refs.btnScrollDown が要るので残したまま隠す。 */
.btn-scroll-down {
  display: none !important;
}

@media (max-width: 767px) {
  #copyLottie {
    width: 92% !important;
  }

  #copyLottie .n1a-kv-copy {
    font-size: clamp(38px, 13vw, 58px);
  }

  #copyLottie .n1a-kv-copy__sub {
    font-size: clamp(12px, 3.5vw, 15px);
  }
}