@charset "UTF-8";

/* ============================================================
   吉井財務研究所 採用サイト
   style.scss  —  Sass でコンパイル後、Tailwind が処理する
   build: npm run build   /  watch: npm run watch
   ------------------------------------------------------------
   @use は必ずファイル先頭に並べる必要があるため、
   @tailwind ディレクティブも partial 経由で読み込んで順序を担保する。
   ============================================================ */

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

/* ============================================================
   base — リセット & タイポグラフィの土台
   ============================================================ */

:root {
  /* 背景装飾（カーブ）の基準幅。
     1920px までは Figma のサイズそのまま、それより広い画面では
     ビューポート幅に追従させて左右の端まで図形を行き渡らせる。 */
  --canvas-w: max(1920px, 100vw);
}

html {
  scroll-behavior: smooth;
}

body{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ------------------------------------------------------------
   中間幅（SPブレークポイント〜1919px）は 1920px のデザインを
   そのまま比例縮小して収める。
   ・JS（initPageScale）が .l-page に zoom を設定し、
     <html> に .is-scaled を付ける
   ・1920px 固定のままだと 1884px 未満でヘッダーロゴ・CTA などが
     画面外に切れてしまうため
   ------------------------------------------------------------ */

.is-scaled body {
  min-width: 0;
}

.is-scaled .l-page {
  width: 1920px;
}

img,
svg {
  display: block;
  max-width: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ------------------------------------------------------------
   レイアウト土台
   ------------------------------------------------------------ */

/* ページ全体。背景レイヤーの絶対配置基準になる */

.l-page {
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
}

/* Figma のコンテンツ幅 1280px（x=320〜1600）*/

.l-inner{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
}

/* Figma の 1920px キャンバス座標をそのまま使うための絶対配置ヘルパー。
   --x / --y は Figma のページ座標（px）をそのまま入れる。
   画面幅が 1920 を超えても中央基準で保たれる。 */

.u-canvas {
  position: absolute;
  left: calc(50% - 960px + var(--x, 0px));
  top: var(--y, 0px);
  width: var(--w, auto);
  height: var(--h, auto);
}

/* 装飾レイヤー（クリック不可） */

.u-deco {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* ============================================================
   utilities
   ============================================================ */

/* SVG の <defs> だけを保持する非表示要素 */

.u-svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* スクリーンリーダー用 */

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Figma の角丸写真ウィンドウ。--w/--h の枠に画像をトリミングして収める。
   内側 img は --iw/--ih/--ix/--iy（Figma の実寸・オフセット）で配置する。 */

.u-photo {
  overflow: hidden;
  border-radius: 20px;
}

.u-photo > img {
  position: absolute;
  left: var(--ix, 0px);
  top: var(--iy, 0px);
  width: var(--iw, 100%);
  height: var(--ih, 100%);
  -o-object-fit: cover;
     object-fit: cover;
}

/* ============================================================
   button
   ・c-btn        : 青いピルボタン（212x46 / Figma 12:78, 117:31 ほか）
   ・c-btn-entry  : ヘッダーのオレンジ CTA（170x50 / Figma 139:6）
   ・c-btn-cta    : 大サイズ CTA（340x79 / Figma 139:17）
   ============================================================ */

.c-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  --tw-bg-opacity: 1;
  background-color: rgb(22 96 201 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  /*
   * isolation: isolate で stacking context を作り、グラデーション層（z-index:-1）が
   * テキストの下・ボタン背景色の上に収まるようにする。
   */
  isolation: isolate;
  /* 幅はテキスト量に合わせる（inline-flex なので中身なり）。
     右の padding は「矢印20px + 右余白14px + 文字との間隔20px」ぶん。 */
  width: auto;
  height: 46px;
  padding-left: 23px;
  padding-right: 54px;
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.42px;
  /* ホバー時のグラデーション層：イエロー→ブルー（Figma node-id=186-1221）。
     ホバーできる環境だけ。タッチ端末は :hover が残り続けることがあるので出さない。
     幅を 2 倍に伸ばしておき、ホバー中はその位置を左右に往復させ続ける
     （＝グラデーションが流れ続ける）。 */
}

.c-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(92deg, #ffe464 0%, #cdc264 33%, #929d81 66%, #1660c9 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  /* アニメーションは常に「付けたまま」で、動かすかどうかだけ切り替える。
     ホバーを外したときにアニメーションごと消すと、background-position が
     初期位置へ瞬間移動してしまい、消えていく途中で目に見えてしまう。
     一時停止なら位置を保ったまま、opacity だけが徐々に戻る。 */
  animation: btn-gradient 1s ease-in-out infinite alternate;
  animation-play-state: paused;
}

@media (hover: hover) {
  .c-btn:hover::before {
    opacity: 1;
    transition: opacity 0.3s ease;
    animation-play-state: running;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-btn::before, .c-btn:hover::before {
    transition: none;
    animation: none;
  }
}

.c-btn {
  /* 右端の丸矢印アイコン（Figma: x=178 / y=13 / 20x20） */
}

.c-btn__icon {
  position: absolute;
  top: 13px;
  right: 14px;
  width: 20px;
  height: 20px;
}

@keyframes btn-gradient {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 50%;
  }
}

.c-btn-entry{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  /* ::before（紺の塗り）を黄色の背景の上・文字の下に収めるための
     スタッキングコンテキストと、角丸でのはみ出し防止 */
  isolation: isolate;
  overflow: hidden;
  /* 矢印は #icoArrow が currentColor を使うので、color 指定で文字と同色になる */
  background-color: #fcd300;
  color: #181818;
  width: 170px;
  height: 50px;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 0.48px;
  transition: color 0.5s ease;
  /* 募集要項の「応募する」（.c-btn-cta）と同じ動き：
     ホバーで紺（#000e4e）が左から右へ塗りつぶし、外すと右へ抜けて黄色に戻る。
     scaleX の基点を「通常時は右・ホバー中は左」に切り替えている。 */
}

.c-btn-entry::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #000e4e;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s ease;
  pointer-events: none;
}

.c-btn-entry__icon {
  width: 15.77px;
  height: 14.68px;
  flex: none;
  transition: transform 0.3s ease;
}

@media (hover: hover) {
  .c-btn-entry:hover {
    color: #fff;
  }

  .c-btn-entry:hover .c-btn-entry__icon {
    transform: translateX(5px);
  }

  .c-btn-entry:hover::before {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-btn-entry {
    transition: none;
  }

  .c-btn-entry::before, .c-btn-entry__icon {
    transition: none;
  }
}

/* ============================================================
   section-head — 各セクション共通の見出しセット
   Figma: Career(12:95-97) / Vision(131:79-81) / Growth / People / Blog / Flow
   ・EN   : Outfit SemiBold 65px / lh40 / +1.95px / y-blue
   ・JA   : Zen Kaku Gothic New Bold 26px / lh40 / +0.78px
   ・lead : Zen Kaku Gothic New Medium 16px / lh34 / +0.32px
   ============================================================ */

/* 見出し（日本語）とリード文は、セクションごとに丸ごと上書きされる箇所が多い
   （.p-cta__lead / .p-hero__lead / .p-blog__lead / .p-flow__ja …）。
   ユーティリティ層は最後に出るため HTML に出すと上書きが効かなくなるので、
   この 2 つは SCSS に置いたままにする。 */

.c-sec-ja{
  white-space: nowrap;
  font-size: 26px;
  line-height: 40px;
  letter-spacing: 0.78px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.c-sec-lead{
  font-size: 18px;
  line-height: 34px;
  letter-spacing: 0.32px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

/* ------------------------------------------------------------
   トータルサポート図（Figma 最新PC 186:1159 + tags）
   基準ボックス: x834 y2281 / 500 x 331
   ------------------------------------------------------------ */

.c-diagram {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 500/331;
}

.c-diagram__img {
  position: absolute;
  left: 8%;
  top: -3.3%;
  width: 65.8%;
  height: auto;
}

.c-diagram__tag{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  border-radius: 4px;
  background-color: #e0e7f9;
  color: #1660c9;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  /* Figma は 125px 幅（14px の文字）。16px にすると「コンサルティング」（約 130px）が
     折り返して下の矢印イラストに乗るので、中心（40.3%）を保ったまま広げる */
}

.c-diagram__tag--1 {
  left: 26.3%;
  top: 0;
  width: 28%;
  height: 8.2%;
}

.c-diagram__tag--2 {
  left: 0;
  top: 23.6%;
  width: 15.4%;
  height: 8.5%;
}

.c-diagram__tag--3 {
  left: 67.2%;
  top: 22.4%;
  width: 15.6%;
  height: 13.9%;
}

.c-diagram__tag--4 {
  left: 0;
  top: 65%;
  width: 15.4%;
  height: 8.5%;
}

.c-diagram__tag--5 {
  left: 67.4%;
  top: 65.3%;
  width: 16.6%;
  height: 8.5%;
  background-color: #fff;
}

.c-diagram__tag--6 {
  left: 33.2%;
  top: 88.5%;
  width: 15.4%;
  height: 8.5%;
}

/* ============================================================
   background — ページ背後のグラデーションカーブ / 下部ブロブ
   Figma: 01_home2 > Mask group (131:86) ※ Home/Desktop フレームの下層
   ------------------------------------------------------------
   ・カーブ2枚は同一パス形状（サイズ・回転違い）。
     アニメーション用に path を分離してインライン SVG で配置している。
   ============================================================ */

.p-bg{
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  z-index: 0;
  height: 8945px;
  /* Figma ページ全高 8078px ＋ Career 238px ＋ Growth 34px ＋ Flow のバナー 337px ＋ Vision の平均年収 218px */
  overflow: hidden;
  pointer-events: none;
}

/* ------------------------------------------------------------
   カーブの登場アニメーション
   ・カーブに沿った軸（＝SVG のローカル座標）で左→右にワイプ
   ・先端はソフトエッジ
   ・下地 path とグラデーション path に時間差をつけ、
     色が後から追いかけてくるように見せる
   ・JS 無効時／prefers-reduced-motion 時は最終状態のまま
   ------------------------------------------------------------ */

@property --curve-wipe {
  syntax: "<percentage>";

  inherits: false;

  initial-value: 120%;
}

/* カーブは常に画面の左右いっぱいまで届かせる。
   --canvas-w（= max(1920px, 100vw)）を基準に、Figma の座標を比率で持つ。
   ・left  : calc(50% + --canvas-w * (figmaX / 1920 - 0.5))
   ・width : calc(--canvas-w * (figmaW / 1920))
   縦は px 固定なので、広い画面では横方向にだけ伸びる
   （＝コンテンツとカーブの縦位置関係が変わらない）。 */

.p-bg__curve {
  position: absolute;
}

/* アニメーションの発火位置。
   [data-anim-trigger="N"] が付いた要素が画面の最下部に入った瞬間に、
   対応するカーブ（[data-anim-index="N"]）が再生される。

   ・カーブ01 → 下記の 1px の目印（--trigger-y で位置を調整）
   ・カーブ02 → Growth の見出し（index.html の .p-growth__en に直接付与）
     見出しそのものを目印にしているので、レイアウトを変えてもズレない。 */

.p-bg__trigger {
  position: absolute;
  left: 0;
  top: var(--trigger-y, 0px);
  width: 1px;
  height: 1px;
  visibility: hidden;
}

.p-bg__trigger--01 {
  --trigger-y: 1400px;
}

.p-bg__curve01 {
  --curve-start: 0.25s;
}

.p-bg__curve-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* 既定は最終状態（JS 無効でも正しく表示される） */
  --curve-wipe: 120%;
  -webkit-mask-image: linear-gradient(90deg, #000 var(--curve-wipe), transparent calc(var(--curve-wipe) + 18%));
          mask-image: linear-gradient(90deg, #000 var(--curve-wipe), transparent calc(var(--curve-wipe) + 18%));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

.p-bg__curve-layer--grad {
  --curve-delay: 0.2s;
}

/* JS 有効時のみ初期非表示 */

.js .p-bg__curve-layer {
  --curve-wipe: -20%;
}

.js .p-bg__curve.is-revealed .p-bg__curve-layer {
  --curve-wipe: 120%;
  transition: --curve-wipe 1.6s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--curve-start, 0s) + var(--curve-delay, 0s));
}

@media (prefers-reduced-motion: reduce) {
  .js .p-bg__curve-layer,
  .js .p-bg__curve.is-revealed .p-bg__curve-layer {
    --curve-wipe: 120%;
    transition: none;
  }
}

/* ------------------------------------------------------------
   カーブ01 : Figma 117:6 (Vector 3)  x=-256 / y=-14 / 2240x2054
   ------------------------------------------------------------ */

.p-bg__curve01 {
  left: calc(50% + var(--canvas-w) * -0.6333333);
  top: -14px;
  width: calc(var(--canvas-w) * 1.1666667);
  height: 2047px;
}

/* ------------------------------------------------------------
   カーブ02 : Figma 117:21 (Vector 4) x=-504 / y=1759 / -8deg
   外枠 2932.476 x 2747.089（回転後のバウンディングボックス）
   中身 2623.236 x 2405.414 を -8deg 回転
   ------------------------------------------------------------ */

.p-bg__curve02 {
  left: calc(50% + var(--canvas-w) * -0.7567708);
  top: 2353px;
  width: calc(var(--canvas-w) * 1.5273313);
  height: 2747.089px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-bg__curve02-rotate {
  position: relative;
  flex: none;
  width: calc(var(--canvas-w) * 1.3662688);
  height: 2405.414px;
  transform: rotate(-8deg);
}

/* ------------------------------------------------------------
   下部ブロブ（募集要項の背景）: 全ページ共通の inc/bg-blob.html
   Figma トップ PC（839:77 内 Group 104 / 175:1001）を、ブロブ・写真・回転マスクごと
   1 枚に書き出した画像。縦位置だけ各ページの SCSS で --y を上書きする。
   ------------------------------------------------------------ */

.p-bg__blob {
  --x: -1642px;
  --y: 7167px;
  --w: 5169px;
  --h: 4269px;
  /* 1920px より広い画面では、画面幅に合わせて拡大する
     （--bg-blob-k = 画面幅 / 1920。main.js の initBgBlobScale が入れる）。
     拡大の中心はキャンバス中央（ブロブ座標 x2602）とアーチの一番低い所の高さ（y900）。
     画像の左右の端がどの画面幅でも画面の端に揃い、はみ出すのは主に下側（フッターより下で見えない）。
     アーチの中心（x2584.5）との横ずれは 3840px 幅でも 17.5px。 */
  transform: scale(var(--bg-blob-k, 1));
  transform-origin: 2602px 900px;
}

/* 画像の範囲はブロブ座標 x1642〜3562 / y0〜1738（= キャンバスの x0〜1920）。
   フッターより下（y1500 前後〜）は見えないので、ブロブの下側は画像に含めていない。 */

.p-bg__blob-img {
  position: absolute;
  left: 1642px;
  top: 0;
  width: 1920px;
  max-width: none;
  height: 1738px;
}

/* ============================================================
   header — Figma 最新PC: home/desktop (188:1379) y30〜124
   ============================================================ */

.l-header{
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  z-index: 60;
  height: 100px;
  /* ページ最上部でも背景を敷く。
     z-index はもともとヘッダー(60) > 背景(0) で正しいが、背景を敷かないと
     背後のカーブがヘッダーの帯を透けて見え、前面に来ているように見える。 */
  background-color: #fff;
}

.l-header__logo {
  --x: 27px;
  --y: 30px;
  --w: 280px;
  --h: 49px;
}

.l-header__logo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ロゴ下の "Recruit site"（Figma 27,84）
   header の外に出しているので、追従ヘッダーとは一緒に動かない。
   ヘッダー（100px）の下端をまたぐと、スクロール時に白背景で
   文字が横に切れてしまうので、真下（100px）に揃えている。 */

.l-tagline {
  --x: 27px;
  --y: 100px;
  color: #1f60c9;
  font-size: 18px;
  font-weight: 500;
  line-height: 40px;
}

/* グローバルナビ : x=479 起点 / 各アイテム間 51px。
   縦はヘッダーの中央（--y ではなく top: 50% で合わせる） */

.l-header__nav {
  --x: 479px;
  display: flex;
  align-items: center;
  top: 50%;
  gap: 51px;
  transform: translateY(-50%);
}

.l-header__entry {
  --x: 1725px;
  --y: 19px;
}

/* ------------------------------------------------------------
   PC: 追従ヘッダー
   ・下方向にスクロールしている間は画面の外へ逃がす
   ・上方向にスクロールしたら上から降りてくる
   ・ページ最上部では背景を敷かない（デザインどおりの見た目）。
     途中で出てくるときは、背面のコンテンツに文字が重なって
     読めなくなるので白を敷く。
   ・SP／タブレットは _sp.scss が別に fixed 指定を持っている
   ------------------------------------------------------------ */

@media (min-width: 1024px) {
  .js .l-header {
    position: fixed;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
  }

  .js .l-header.is-hidden {
    transform: translateY(-100%);
  }

  /* 最上部でも白を敷くようにしたので .is-stuck での塗り分けは不要。
     クラス自体は JS が付け外ししているのでセレクタは残す。 */

  .js .l-header.is-stuck {
    background-color: #fff;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .l-header {
    transition: none;
  }
}

/* ============================================================
   footer — Figma 最新PC: y7800 〜 8078（bg 7841〜8078 / #1660c9）
   ============================================================ */

.l-footer{
  position: relative;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  height: 278px;
}

/* 背面の青帯。position は指定しない（.u-canvas の absolute を壊さないため、
   子要素には z-index だけを与える） */

.l-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 41px;
  z-index: 0;
  height: 237px;
  background-color: #1660c9;
}

.l-footer > * {
  z-index: 1;
}

.l-footer__logo {
  --x: 38px;
  --y: 89px;
  --w: 329px;
  --h: 57px;
}

.l-footer__logo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.l-footer__tagline {
  --x: 57px;
  --y: 146px;
  font-size: 18px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 0.54px;
}

/* 旧2列ナビは使わない */

.l-footer__nav {
  display: none;
}

/* --- 4列の入れ子ナビ（Figma x531 / 773 / 929 / 1102） --- */

.l-footer__sp-nav {
  --x: 531px;
  --y: 101px;
  --w: 800px;
  display: grid;
  grid-template-columns: 242px 156px 173px auto;
  align-content: start;
}

.l-footer__sp-parent:hover,
.l-footer__sp-child:hover {
  opacity: 0.7;
}

.l-footer__sp-parent {
  font-size: 18px;
  font-weight: 500;
}

.l-footer__sp-child {
  font-size: 16px;
  font-weight: 500;
}

/* 列ごとの配置（HTML の並び順に対応） */

.l-footer__sp-nav > :nth-child(1) {
  grid-column: 2;
  grid-row: 1;
}

.l-footer__sp-nav > :nth-child(2) {
  grid-column: 2;
  grid-row: 2;
}

.l-footer__sp-nav > :nth-child(3) {
  grid-column: 2;
  grid-row: 3;
}

/* 1列目は TOP を先頭にして 1 行ずつ下げる */

.l-footer__sp-nav > .l-footer__top {
  grid-column: 1;
  grid-row: 1;
}

.l-footer__sp-nav > :nth-child(4) {
  grid-column: 1;
  grid-row: 2;
}

.l-footer__sp-nav > :nth-child(5) {
  grid-column: 1;
  grid-row: 3;
}

.l-footer__sp-nav > :nth-child(6) {
  grid-column: 1;
  grid-row: 4;
}

.l-footer__sp-nav > :nth-child(7) {
  grid-column: 3;
  grid-row: 1;
}

.l-footer__sp-nav > :nth-child(8) {
  grid-column: 3;
  grid-row: 2;
}

.l-footer__sp-nav > :nth-child(9) {
  grid-column: 3;
  grid-row: 3;
}

.l-footer__sp-nav > :nth-child(10) {
  grid-column: 3;
  grid-row: 4;
}

.l-footer__sp-nav > :nth-child(11) {
  grid-column: 4;
  grid-row: 1;
}

.l-footer__sp-nav > :nth-child(12) {
  grid-column: 4;
  grid-row: 2;
}

/* 外部リンク（Figma 57,8027 / 225,8027） */

.l-footer__links {
  --x: 57px;
  --y: 227px;
  display: flex;
  align-items: center;
  gap: 34px;
}

.l-footer__link:hover {
  opacity: 0.7;
}

.l-footer__link img {
  width: 18px;
  height: 14px;
  -o-object-fit: contain;
     object-fit: contain;
}

.l-footer__copyright {
  --x: 1600px;
  --y: 244px;
  --w: 257px;
  text-align: right;
  font-size: 12px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.36px;
}

/* ============================================================
   hero — Figma 最新PC: y0 〜 1500
   ============================================================ */

/* ============================================================
   セクション本文の順次フェードイン（PC 専用）

   使い方
     @use '../reveal';
     @include reveal.stagger('.p-hero', ('.p-hero__catch', '.p-hero__lead', …));

   ・JS（main.js の initTextReveal）が、対象セクションが画面に
     入った時点で .is-text-in を付ける。順番と遅延はここが持つ。
   ・.js が付いているときだけ伏せるので、JS 無効／読み込み失敗時は
     最初から最終状態で表示される。
   ・SP／タブレット（〜1023px）はオープニング演出と SP レイアウトが
     同じ役割を担うため、min-width: 1024px 限定にしている。
   ============================================================ */

.p-hero {
  position: relative;
  height: 1500px;
}

/* ------------------------------------------------------------
   登場アニメーション（背景カーブ01に連動）
   ------------------------------------------------------------ */

.js .p-hero__illust {
  opacity: 0;
  transition: opacity 0.9s ease 1.35s;
}

.js .p-hero.is-revealed .p-hero__illust {
  opacity: 1;
}

.js .p-hero [data-hero-item] {
  --reveal-delay: calc(2.05s + var(--reveal-order, 0) * 0.16s);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.55s ease var(--reveal-delay), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay);
}

.js .p-hero.is-revealed [data-hero-item] {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .js .p-hero__illust,
  .js .p-hero [data-hero-item] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- キャッチコピー（アウトライン化 SVG / Figma 212:11 : 313,221 746x287） ---
   Figma の書き出しは右に 123.5px の空白を含んでいて、SP で中央寄せすると
   文字が左に寄って見える。SVG 側の viewBox を文字の実寸（622.5x287）に
   詰めてあるので、ここの --w も 746 ではなく 622.5。
   左端は 0 から始まっているので、PC の文字の位置・大きさは変わらない。 */

.p-hero__catch {
  --x: 313px;
  --y: 221px;
  --w: 622.5px;
  --h: 287px;
}

.p-hero__catch img {
  width: 100%;
  height: 100%;
}

/* --- リード文（Figma 313,550 / w717 / 20px lh40） --- */

.p-hero__lead {
  --x: 313px;
  --y: 550px;
  --w: 717px;
  /* 段落の間。Figma は空行 1 行（40px）だが、差し替え後の本文だと
     「あなたの成長が会社の成長となる。」とボタンがヒーロー（1500px）に
     収まらなくなるので 22px にしている */
}

.p-hero__lead p + p {
  margin-top: 22px;
}

.p-hero__lead {
  font-size: 20px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 0.4px;
}

/* --- 小見出し（Figma 313,1237） --- */

.p-hero__sub {
  --x: 313px;
  /* Figma は 1237px。導入文の差し替えで本文が 122px 伸びたので、
     同じ間隔（本文の下から 49px）を保つ位置に下げている */
  --y: 1359px;
  --w: 717px;
  color: #181818;
  font-size: 26px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: 2.08px;
}

.p-hero__btn {
  --x: 313px;
  --y: 1443px;
}

/* --- 岡山市街地のイラスト（Figma 188:1378 / 1038,410 884x590） --- */

.p-hero__illust {
  --x: 1038px;
  --y: 410px;
  --w: 884px;
  --h: 590px;
  mix-blend-mode: darken;
}

.p-hero__illust img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* --- 写真コラージュ（Figma のクリップ枠 / 画像オフセット） --- */

.p-hero__photo01 {
  --x: 1511px;
  --y: 157px;
  --w: 326px;
  --h: 230px;
  --iw: 384px;
  --ih: 270px;
  --ix: -29px;
  --iy: -12px;
}

.p-hero__photo02 {
  /* Figma は x927 だが、それだとリード文（313〜1030）に 103px 重なるので
     110px 右へ寄せて、イラストの左端（1038）に合わせている */
  --x: 1037px;
  --y: 489px;
  --w: 307px;
  --h: 217px;
  --iw: 346px;
  --ih: 243px;
  --ix: -30px;
  --iy: -8px;
}

.p-hero__photo03 {
  --x: 1158px;
  --y: 226px;
  --w: 173px;
  --h: 173px;
  --iw: 361px;
  --ih: 238px;
  --ix: -173px;
  --iy: -2px;
}

.p-hero__photo04 {
  --x: 1116px;
  --y: 802px;
  --w: 253px;
  --h: 317px;
  --iw: 494px;
  --ih: 324px;
  --ix: -138px;
  --iy: -8px;
}

.p-hero__photo05 {
  --x: 1609px;
  --y: 907px;
  --w: 192px;
  --h: 192px;
  --iw: 336px;
  --ih: 258px;
  --ix: -124px;
  --iy: -32px;
}

.p-hero__photo06 {
  --x: 1349px;
  --y: 1177px;
  --w: 269px;
  --h: 190px;
  --iw: 269px;
  --ih: 190px;
  --ix: 0px;
  --iy: -7px;
}

/* ------------------------------------------------------------
   PC: 左側のテキストを 1 項目ずつフェードイン
   ・発火は「ヒーローが画面に入ったら」（＝トップでは読み込み直後）
   ・背景のグラデーション（カーブ01）はこれが終わってから再生される
     （順番の制御は main.js の heroTextDoneAt）
   ・SP／タブレットはオープニング演出が同じ役割を持つので対象外
   ------------------------------------------------------------ */

@media (min-width: 1024px) {
  .js .p-hero .p-hero__catch {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-hero .p-hero__lead {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-hero .p-hero__sub {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-hero .p-hero__btn {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-hero.is-text-in .p-hero__catch {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }

  .js .p-hero.is-text-in .p-hero__lead {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .p-hero.is-text-in .p-hero__sub {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.3s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }

  .js .p-hero.is-text-in .p-hero__btn {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.45s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-hero .p-hero__catch,
  .js .p-hero.is-text-in .p-hero__catch {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-hero .p-hero__lead,
  .js .p-hero.is-text-in .p-hero__lead {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-hero .p-hero__sub,
  .js .p-hero.is-text-in .p-hero__sub {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-hero .p-hero__btn,
  .js .p-hero.is-text-in .p-hero__btn {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   hero — Figma 最新PC: y0 〜 1500
   ============================================================ */

/* ============================================================
   career — Figma 最新PC: y1500 〜 2160
   ============================================================ */

.p-career {
  position: relative;
  /* Figma は 660px。求める人材の 2 項目に差し替えて本文が 238px 伸びたので、
     同じ余白関係を保つために高さも 238px 足している（背景側も同じだけ下げている） */
  height: 898px;
}

.p-career__upper {
  --x: 1062px;
  --y: 111px;
}

.p-career__en {
  --x: 1062px;
  --y: 166px;
}

.p-career__ja {
  --x: 1062px;
  --y: 244px;
}

.p-career__lead {
  --x: 1062px;
  --y: 347px;
  /* Figma は 418px（16px の文字で組んだ幅）。文字を 18px（1.125 倍）に上げたので、
     枠も 1.125 倍（470px）にして Figma と同じ位置で改行させる。
     ※ 2 項目の紹介文に差し替えたので、右カラムいっぱい（1062〜1600）まで広げている */
  --w: 538px;
}

/* 求める人材の 2 項目（見出し＋1 文字ぶん字下げの本文） */

.p-career__point-title {
  font-weight: 700;
}

.p-career__point-text {
  padding-left: 1em;
}

.p-career__point-text + .p-career__point-title {
  margin-top: 34px;
}

.p-career__btn {
  --x: 1062px;
  --y: 817px;
}

/* キャリアの成長ステップ（Figma 491:1225-1227 + ラベル） */

.p-career__image {
  display: none;
}

.p-career__steps {
  display: block;
}

.p-career__steps-img {
  display: none;
}

.p-career__step {
  position: absolute;
  left: calc(50% - 960px + var(--sx));
  top: var(--sy);
  width: var(--sw);
  height: var(--sh);
}

.p-career__step img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.p-career__step--1 {
  --sx: 347px;
  --sy: 339px;
  --sw: 189px;
  --sh: 222px;
}

.p-career__step--2 {
  --sx: 540px;
  --sy: 313px;
  --sw: 200px;
  --sh: 248px;
}

.p-career__step--3 {
  --sx: 750px;
  --sy: 295px;
  --sw: 200px;
  --sh: 266px;
}

.p-career__steps-labels {
  position: absolute;
  left: calc(50% - 960px + 347px);
  top: 561px;
  display: flex;
}

.p-career__steps-labels li{
  font-family: Outfit, "Zen Kaku Gothic New", sans-serif;
  color: #1660c9;
  font-size: 26px;
  font-weight: 600;
  line-height: 40px;
  text-align: center;
}

.p-career__steps-labels li:nth-child(1) {
  width: 189px;
}

.p-career__steps-labels li:nth-child(2) {
  width: 200px;
  margin-left: 4px;
}

.p-career__steps-labels li:nth-child(3) {
  width: 200px;
  margin-left: 10px;
}

/* ------------------------------------------------------------
   Step 01 → 02 → 03 を順番にフェードイン
   画面に入った時点（発火の基準は 1枚目の画像）で 0 / 0.18 / 0.36 秒ずらす。
   JS 無効時はそのまま表示されるよう .js を付けている。
   ------------------------------------------------------------ */

.js .p-career__steps .p-career__step,
.js .p-career__steps .p-career__steps-labels li {
  opacity: 0;
  transform: translateY(24px);
}

.js .p-career__steps.is-revealed .p-career__step,
.js .p-career__steps.is-revealed .p-career__steps-labels li {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease var(--step-delay, 0s), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--step-delay, 0s);
}

.js .p-career__steps .p-career__step--1,
.js .p-career__steps .p-career__steps-labels li:nth-child(1) {
  --step-delay: 0s;
}

.js .p-career__steps .p-career__step--2,
.js .p-career__steps .p-career__steps-labels li:nth-child(2) {
  --step-delay: 0.18s;
}

.js .p-career__steps .p-career__step--3,
.js .p-career__steps .p-career__steps-labels li:nth-child(3) {
  --step-delay: 0.36s;
}

@media (prefers-reduced-motion: reduce) {
  .js .p-career__steps .p-career__step,
  .js .p-career__steps .p-career__steps-labels li {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------
   PC: テキストを 1 項目ずつフェードイン（ヒーローと同じ演出）
   ・発火は Career セクションが画面に入ったとき
   ・ステップ画像は別途 [data-scroll-reveal] で 1→2→3 と出る
   ------------------------------------------------------------ */

@media (min-width: 1024px) {
  .js .p-career .p-career__upper {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-career .p-career__en {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-career .p-career__ja {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-career .p-career__lead {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-career .p-career__btn {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-career.is-text-in .p-career__upper {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }

  .js .p-career.is-text-in .p-career__en {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .p-career.is-text-in .p-career__ja {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.3s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }

  .js .p-career.is-text-in .p-career__lead {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.45s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
  }

  .js .p-career.is-text-in .p-career__btn {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.6s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-career .p-career__upper,
  .js .p-career.is-text-in .p-career__upper {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-career .p-career__en,
  .js .p-career.is-text-in .p-career__en {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-career .p-career__ja,
  .js .p-career.is-text-in .p-career__ja {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-career .p-career__lead,
  .js .p-career.is-text-in .p-career__lead {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-career .p-career__btn,
  .js .p-career.is-text-in .p-career__btn {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   hero — Figma 最新PC: y0 〜 1500
   ============================================================ */

/* ============================================================
   vision — Figma 最新PC: y2160 〜 3450
   ============================================================ */

.p-vision {
  position: relative;
  /* 平均年収のブロック（136px）とその上の余白（40px）、
     ボタンの移動ぶん（732 → 950）で中身が 218px 伸びたので、
     同じだけ広げて下のセクション（Growth の写真）と重ならないようにする */
  height: 1508px;
}

.p-vision__upper {
  --x: 320px;
  --y: 61px;
}

.p-vision__en {
  --x: 320px;
  --y: 116px;
}

.p-vision__ja {
  --x: 320px;
  --y: 194px;
}

.p-vision__lead {
  --x: 320px;
  --y: 294px;
  /* Figma は 418px（16px の文字で組んだ幅）。文字を 18px（1.125 倍）に上げたので、
     枠も 1.125 倍（470px）にして Figma と同じ位置で改行させる。 */
  --w: 470px;
}

/* トータルサポート図（Figma 186:1159 / 874,2270 329x317 + タグ） */

.p-vision__figure {
  --x: 834px;
  --y: 121px;
  --w: 500px;
  --h: 331px;
}

/* --- 数値ブロック（Figma 2715〜2890） --- */

.p-vision__numbers {
  --x: 574px;
  --y: 555px;
  --w: 764px;
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.p-vision__number{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 202px;
}

.p-vision__number:nth-child(2) {
  width: 248px;
  margin-left: 56px;
}

.p-vision__number:nth-child(3) {
  width: 202px;
  margin-left: 56px;
}

.p-vision__number-label{
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(22 96 201 / var(--tw-text-opacity, 1));
  height: 32px;
  font-size: 18px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.32px;
}

.p-vision__number-value{
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-family: Outfit, "Zen Kaku Gothic New", sans-serif;
  --tw-text-opacity: 1;
  color: rgb(22 96 201 / var(--tw-text-opacity, 1));
  margin-top: 11px;
  height: 80px;
  font-weight: 600;
}

.p-vision__number-value em {
  font-size: 80px;
  font-style: normal;
  line-height: 80px;
  letter-spacing: 1px;
}

.p-vision__number-value span {
  font-size: 30px;
  font-weight: 800;
  line-height: 80px;
}

.p-vision__number-value {
  /* 単位のうしろの補足（20％ など）。数字と単位より一段小さく置く */
}

.p-vision__number-value .p-vision__number-sub {
  /* 全角かっこは左右に余白を持っているので、その分を詰める */
  margin-left: -0.35em;
  font-size: 24px;
}

.p-vision__number-value {
  /* 先頭の ＋（Figma は 40px/800 の別要素） */
}

.p-vision__number-value i {
  font-size: 40px;
  font-style: normal;
  font-weight: 800;
  line-height: 80px;
}

.p-vision__number-note{
  display: block;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(22 96 201 / var(--tw-text-opacity, 1));
  margin-top: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.28px;
}

/* ------------------------------------------------------------
   平均年収（Figma 993:428 : x574 / y2865 / 764x129）
   左に「総合職 平均年収」＋金額、右にモデル年収例のリスト。
   数値ブロック（.p-vision__numbers）と同じ枠に中央ぞろえで置く。
   ------------------------------------------------------------ */

.p-vision__salary {
  --x: 574px;
  /* Figma は y2865（数値ブロックの 40px 下）。ただし実装は Figma の枠に無い
     注記（（2026年4月1日時点）など）を出していて数値ブロックが 155px あるので、
     その下端 710px から同じ 40px を空ける */
  --y: 750px;
  --w: 764px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 35px;
}

.p-vision__salary-main{
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 枠（764px）より中身の合計が広いので、縮まないようにしておく */
  flex: none;
  width: 278px;
}

/* Figma は 437px（16px の文字で組んだ幅）。本文を 18px（1.125 倍）に
   上げているので枠も 1.125 倍にして、1 行 1 項目のまま収める */

.p-vision__salary-model {
  flex: none;
  width: 495px;
  color: #000;
  font-size: 18px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: 0.32px;
}

.p-vision__salary-model-title {
  font-weight: 700;
}

.p-vision__salary-list {
  padding-left: 24px;
  list-style: disc;
}

.p-vision__btn {
  --x: 844px;
  /* 平均年収ブロックの下端（886px）から、Figma と同じ 64px を空ける */
  --y: 950px;
}

/* ------------------------------------------------------------
   PC: テキストを 1 項目ずつフェードイン（ヒーローと同じ演出）
   ・発火は Vision セクションが画面に入ったとき
   ・右側の相関図と数字は従来どおり最初から表示
   ------------------------------------------------------------ */

@media (min-width: 1024px) {
  .js .p-vision .p-vision__upper {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-vision .p-vision__en {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-vision .p-vision__ja {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-vision .p-vision__lead {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-vision .p-vision__btn {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-vision.is-text-in .p-vision__upper {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }

  .js .p-vision.is-text-in .p-vision__en {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .p-vision.is-text-in .p-vision__ja {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.3s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }

  .js .p-vision.is-text-in .p-vision__lead {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.45s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
  }

  .js .p-vision.is-text-in .p-vision__btn {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.6s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-vision .p-vision__upper,
  .js .p-vision.is-text-in .p-vision__upper {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-vision .p-vision__en,
  .js .p-vision.is-text-in .p-vision__en {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-vision .p-vision__ja,
  .js .p-vision.is-text-in .p-vision__ja {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-vision .p-vision__lead,
  .js .p-vision.is-text-in .p-vision__lead {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-vision .p-vision__btn,
  .js .p-vision.is-text-in .p-vision__btn {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   hero — Figma 最新PC: y0 〜 1500
   ============================================================ */

/* ============================================================
   growth — Figma 最新PC: y3450 〜 4050
   ============================================================ */

.p-growth {
  position: relative;
  /* Figma は 600px。本文の差し替えで 1 行増えたぶん 34px 足している
     （背景の青いブロブも同じだけ下げている） */
  height: 634px;
}

/* 旧デザインのグレー枠は使わない */

.p-growth__figure {
  display: none;
}

.p-growth__en {
  --x: 1043px;
  --y: 115px;
}

.p-growth__upper {
  --x: 1043px;
  --y: 173px;
}

.p-growth__ja {
  --x: 1043px;
  --y: 229px;
}

.p-growth__lead {
  --x: 1043px;
  --y: 372px;
  /* 文言の差し替えで 1 行が長くなったので、右カラムを広げている（Figma は 418px） */
  --w: 660px;
}

.p-growth__btn {
  --x: 1043px;
  --y: 577px;
}

/* 写真3点（Figma 145:501 / 145:534 / 145:537 のクリップ枠） */

.p-growth__photos {
  display: block;
  position: absolute;
  inset: 0;
  /* セクション全面に敷いているので、そのままだとボタンのクリックを奪う。
     写真は装飾（aria-hidden）なので、当たり判定から外す。 */
  pointer-events: none;
}

.p-growth__photo {
  position: absolute;
  left: calc(50% - 960px + var(--px));
  top: var(--py);
  width: var(--pw);
  height: var(--ph);
  overflow: hidden;
  border-radius: 20px;
  /* <picture> は既定で inline なので、img の 100% 指定の基準にならない */
}

.p-growth__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.p-growth__photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-growth__photo--3 {
  --px: 1177px;
  --py: -458px;
  --pw: 300px;
  --ph: 176px;
}

.p-growth__photo--1 {
  --px: 806px;
  --py: -339px;
  --pw: 500px;
  --ph: 293px;
}

.p-growth__photo--2 {
  --px: 165px;
  --py: -103px;
  --pw: 771px;
  --ph: 452px;
}

/* ------------------------------------------------------------
   PC: 写真3点を上から順にフェードイン
   ・並びは --3（一番上）→ --1 → --2（一番下）
   ・発火の基準は一番下の --2。写真は3枚ともセクション上端より上に
     はみ出しているので、入れ物基準だと出終わってから発火してしまう
   ・SP／タブレットは対象外（ミックスインが min-width: 1024px 限定）
   ------------------------------------------------------------ */

@media (min-width: 1024px) {
  .js .p-growth__photos .p-growth__photo--3 {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-growth__photos .p-growth__photo--1 {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-growth__photos .p-growth__photo--2 {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-growth__photos.is-text-in .p-growth__photo--3 {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }

  .js .p-growth__photos.is-text-in .p-growth__photo--1 {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .p-growth__photos.is-text-in .p-growth__photo--2 {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.3s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-growth__photos .p-growth__photo--3,
  .js .p-growth__photos.is-text-in .p-growth__photo--3 {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-growth__photos .p-growth__photo--1,
  .js .p-growth__photos.is-text-in .p-growth__photo--1 {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-growth__photos .p-growth__photo--2,
  .js .p-growth__photos.is-text-in .p-growth__photo--2 {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   team（旧 people）— Figma 最新PC: y4050 〜 4850
   写真マーキー（周期 1895px）は従来どおり
   ============================================================ */

.p-people {
  position: relative;
  height: 800px;
  isolation: isolate;
}

.p-people__upper,
.p-people__en,
.p-people__ja,
.p-people__lead {
  z-index: 1;
}

.p-people__upper {
  --x: 320px;
  --y: 46px;
}

.p-people__en {
  --x: 320px;
  --y: 101px;
}

.p-people__ja {
  --x: 320px;
  --y: 169px;
}

.p-people__lead {
  --x: 320px;
  --y: 281px;
  /* 文言の差し替えで 1 行が長くなったので広げている（Figma は 800px） */
  --w: 1120px;
}

/* --- 写真のマーキー（Figma 4295〜4811） --- */

.p-people__marquee {
  position: absolute;
  z-index: 0;
  left: calc(50% - 960px + 29px - 1895px);
  top: 245px;
  width: 7580px;
  height: 516px;
  pointer-events: none;
}

.p-people__track {
  display: flex;
  width: 100%;
  height: 100%;
}

.p-people__set {
  position: relative;
  flex: none;
  width: 1895px;
  height: 100%;
}

.p-people.is-revealed .p-people__track {
  will-change: transform;
  animation: people-marquee 60s linear 1.5s infinite;
}

@keyframes people-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-1895px);
  }
}

.p-people__photo {
  position: absolute;
}

.js .p-people__photo {
  opacity: 0;
  transition: opacity 0.6s ease calc(var(--fade-order, 0) * 0.18s);
}

.js .p-people.is-revealed .p-people__photo {
  opacity: 1;
}

/* セット内の座標（Figma x - 29） */

.p-people__photo--01 {
  --fade-order: 3;
  left: 1119px;
  /* 最上段（top: 0）だとリード文と縦位置が重なるので 300px 下げている */
  top: 300px;
  width: 400px;
  height: 258px;
  --iw: 516px;
  --ih: 258px;
  --ix: -58px;
  --iy: 0px;
}

.p-people__photo--02 {
  --fade-order: 1;
  left: 343px;
  top: 258px;
  width: 400px;
  height: 258px;
  --iw: 599px;
  --ih: 394px;
  --ix: -177px;
  --iy: -66px;
}

.p-people__photo--03 {
  --fade-order: 0;
  left: 0;
  top: 185px;
  width: 310px;
  height: 200px;
  --iw: 377px;
  --ih: 248px;
  --ix: -41px;
  --iy: -16px;
}

.p-people__photo--04 {
  --fade-order: 2;
  left: 776px;
  top: 185px;
  width: 310px;
  height: 200px;
  --iw: 358px;
  --ih: 235px;
  --ix: -31px;
  --iy: -16px;
}

.p-people__photo--05 {
  --fade-order: 4;
  left: 1552px;
  top: 335px;
  width: 310px;
  height: 200px;
  --iw: 320px;
  --ih: 210px;
  --ix: -11px;
  --iy: 0px;
}

/* ============================================================
   interview — Figma ページ座標 y: 4760 〜 5820
   3枚重ねカードのスライダー。
   最前面が後ろへ回り込み、後ろに控えていたカードが前面に出てくる。
   ------------------------------------------------------------
   Figma の3枚は「同じカードの拡大率違い」だったので、
   最前面カード（1500x600 / x=210 / y=250）を基準に transform で表現している。
     前面 : scale(1)         top 250
     中間 : scale(0.973333)  top 220  → translateY(-30px)
     背面 : scale(0.933333)  top 196  → translateY(-54px)
   transform-origin を top center にすることで、
   Figma の3枚の座標（左右中央 960 固定・上端がせり上がる）と完全に一致する。
   ============================================================ */

.p-interview {
  position: relative;
  height: 1100px;
}

.p-interview__en {
  --x: 210px;
  --y: 60px;
  --w: 1500px;
  text-align: center;
}

/* --- スタック（最前面カードの座標＝基準ボックス） --- */

.p-interview__stack {
  --x: 210px;
  --y: 227px;
  --w: 1500px;
  --h: 600px;
}

/* 切り替えの流れ（JS がクラス／data-pos を付け替えるだけ）
   1. 最前面のカードに .is-leaving が付き、スタックの右外まで抜けてから奥へ回り込む
   2. 0.42 秒後に残りのカードが1つずつ繰り上がり、2番目が最前面に出る
   3. 退場したカードは背面スロットまで戻りきる（0.9 秒） */

.p-interview__slide {
  position: absolute;
  inset: 0;
  transform-origin: top center;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease, z-index 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  /* JS 未読み込み時の初期表示（1枚目が前面） */
  background-color: #63a6ff;
  z-index: 1;
}

.p-interview__slide[data-pos="2"] {
  transform: translateY(-54px) scale(0.9333333);
  background-color: #63a6ff;
  z-index: 1;
}

.p-interview__slide[data-pos="1"] {
  transform: translateY(-30px) scale(0.9733333);
  background-color: #91c0ff;
  z-index: 2;
}

.p-interview__slide[data-pos="0"] {
  transform: none;
  background-color: #e2efff;
  z-index: 3;
}

.p-interview__slide {
  /* 中身は前面(0)と2番目(1)に「あらかじめ」配置しておく。
     2番目は前面カードの陰に完全に隠れている（見えているのは上辺 30px の帯だけ）ので
     静止状態の見た目は Figma のまま変わらないが、
     前面カードが右へ抜けた瞬間には、すでに写真・テキストが入った状態で現れる。 */
}

.p-interview__slide > * {
  opacity: 0;
}

.p-interview__slide[data-pos="0"] > *, .p-interview__slide[data-pos="1"] > * {
  opacity: 1;
}

.p-interview__slide:not([data-pos="0"]) {
  pointer-events: none;
}

.p-interview__slide {
  /* 次に前面へ出るカード。クリック直後から背景を前面の色に寄せておく */
}

.p-interview__slide.is-entering {
  background-color: #e2efff;
}

.p-interview__slide {
  /* 戻る向き（03 → 02 など）。同じキーフレームを逆再生するだけで
     「背面スロットから右へ出て、前面に入る」動きになる。 */
}

.p-interview__slide.is-returning {
  pointer-events: none;
  animation: interview-leave 0.9s cubic-bezier(0.45, 0, 0.25, 1) reverse forwards;
  /* 背面スロット（data-pos 2）から出てくるので、中身を出しておく */
}

.p-interview__slide.is-returning > * {
  opacity: 1;
}

.p-interview__slide {
  /* 退場中は transition ではなくキーフレームで動かす */
}

.p-interview__slide.is-leaving {
  pointer-events: none;
  animation: interview-leave 0.9s cubic-bezier(0.45, 0, 0.25, 1) forwards;
  /* 中身はフェードさせず、退場中ずっと表示したままにする。
     背面スロットへ戻りきると他のカードに完全に覆われるため、
     わざわざ消さなくても自然に見えなくなる。
     （data-pos が 2 に変わっても、この指定が優先される） */
}

.p-interview__slide.is-leaving > * {
  opacity: 1;
}

/* 右へ抜ける → スタックの外に出てから奥へ回り込む → 背面スロットへ戻る
   ------------------------------------------------------------
   カードは 1500px 幅で、キャンバス 1920px に対して余白が左右 210px しかない。
   そのため「スタックに重なった位置」で z-index を落とすと、
   前面カードに一気に覆われて消えたように見えてしまう。
   スタックの右端（x=1710）よりカードの左辺が右に出きってから
   z-index を落とすことで、隠れる瞬間が見えないようにしている。
   戻りは、スタックの右端に潜り込みながら背面スロットへ収まる。 */

@keyframes interview-leave {
  0% {
    transform: translateX(0) translateY(0) scale(1);
    background-color: #e2efff;
    z-index: 4;
  }

  46% {
    transform: translateX(1500px) translateY(-16px) scale(0.95);
    background-color: #a8ceff;
    z-index: 4;
    /* ここから背面スロットへ戻る */
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  47% {
    z-index: 0;
  }

  100% {
    transform: translateX(0) translateY(-54px) scale(0.9333333);
    background-color: #63a6ff;
    z-index: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-interview__slide,
  .p-interview__slide > * {
    transition: none;
  }

  .p-interview__slide.is-leaving,
  .p-interview__slide.is-returning {
    animation: none;
  }
}

/* --- カード内コンテンツ（スライド基準の座標） --- */

.p-interview__photo {
  position: absolute;
  left: 93px;
  top: 106px;
  width: 620px;
  height: 400px;
  overflow: hidden;
  border-radius: 20px;
}

.p-interview__photo img {
  position: absolute;
  left: -63px;
  top: -32px;
  width: 716px;
  height: 470px;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-interview__meta{
  display: flex;
  align-items: baseline;
  position: absolute;
  left: 814px;
  top: 100px;
  gap: 8px;
}

.p-interview__meta span{
  --tw-text-opacity: 1;
  color: rgb(22 96 201 / var(--tw-text-opacity, 1));
  font-size: 18px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: 0.48px;
}

.p-interview__meta em{
  font-family: Outfit, "Zen Kaku Gothic New", sans-serif;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: 0.9px;
}

.p-interview__title {
  position: absolute;
  left: 814px;
  top: 162px;
  width: 514px;
}

.p-interview__tags{
  display: flex;
  align-items: center;
  position: absolute;
  left: 814px;
  top: 332px;
  gap: 18px;
}

.p-interview__tag{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: 0.48px;
  white-space: nowrap;
}

.p-interview__tag--type{
  --tw-bg-opacity: 1;
  background-color: rgb(210 210 210 / var(--tw-bg-opacity, 1));
  width: 104px;
  color: #181818;
}

.p-interview__tag--role{
  --tw-bg-opacity: 1;
  background-color: rgb(100 101 103 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  width: 239px;
}

.p-interview__name {
  position: absolute;
  left: 814px;
  top: 403px;
  width: 288px;
}

.p-interview__link{
  display: inline-flex;
  align-items: center;
  --tw-text-opacity: 1;
  color: rgb(22 96 201 / var(--tw-text-opacity, 1));
  position: absolute;
  left: 810px;
  top: 481px;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.42px;
  /* 下線は矢印まで通す。
     span の text-decoration だと文字の下だけになるので、
     リンク全体に敷いた 1px の線で引いている。 */
}

.p-interview__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* 文字の下端から 5px 空ける（実測で調整） */
  bottom: 2px;
  height: 1px;
  background-color: currentColor;
  /* 左を軸に伸縮させる。ホバーで左→右に伸び、
     外すと同じ左へ引っ込む。 */
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-interview__link {
  /* ホバーできる環境だけ、ホバー時に線を出す。
     タッチ端末（hover: none）はホバーが起きないので出したままにする。 */
}

@media (hover: hover) {
  .p-interview__link::after {
    transform: scaleX(0);
  }

  .p-interview__link:hover::after, .p-interview__link:focus-visible::after {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-interview__link::after {
    transition: none;
  }
}

.p-interview__link {
  /* 白丸なしの矢印。色は文字色（#1660c9）を継承する */
}

.p-interview__link svg {
  width: 15.77px;
  height: 14.68px;
}

/* 次のインタビューへ（スライドの右横 / Figma 136:70 の位置）
   スタック内に置いているので、PC / SP とも座標はカード基準。 */

.p-interview__next{
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  position: absolute;
  left: 1482px;
  top: 282px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border: 1px solid #1660c9;
  background-color: #fff;
  color: #1660c9;
}

.p-interview__next:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(226 239 255 / var(--tw-bg-opacity, 1));
}

.p-interview__next svg {
  width: 9.56px;
  height: 15.98px;
}

.p-interview__btn {
  /* キャンバス全幅の箱にしてボタンを中央寄せ（文言の長さが変わってもずれない） */
  --x: 0px;
  --y: 896px;
  --w: 1920px;
  text-align: center;
}

/* --- ページャ（Figma 88:5 / 13:52 / 13:53） --- */

.p-interview__pager {
  --x: 904px;
  --y: 952px;
  display: flex;
  align-items: center;
  font-family: Outfit, "Zen Kaku Gothic New", sans-serif;
  gap: 31px;
  font-size: 16px;
  font-weight: 600;
  line-height: 46px;
  letter-spacing: 0.42px;
}

.p-interview__pager button{
  text-align: center;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.p-interview__pager button:hover{
  --tw-text-opacity: 1;
  color: rgb(18 78 163 / var(--tw-text-opacity, 1));
}

.p-interview__pager button.is-current{
  --tw-text-opacity: 1;
  color: rgb(22 96 201 / var(--tw-text-opacity, 1));
}

/* ============================================================
   blog — Figma 最新PC: y5950 〜 6480（背景 #f2f5f8 は 5905〜6467）
   ============================================================ */

.p-blog {
  position: relative;
  height: 530px;
}

/* セクション背景（Figma 244:258 / 1,5905 1920x562） */

.p-blog::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -45px;
  height: 562px;
  background-color: #f2f5f8;
}

.p-blog__en {
  --x: 320px;
  --y: 114px;
  --w: 352px;
}

.p-blog__ja {
  --x: 320px;
  --y: 192px;
}

.p-blog__lead {
  --x: 320px;
  --y: 252px;
  --w: 352px;
  line-height: 32px;
}

/* --- 記事リスト（Figma 700,6062 / 900x70 / 10px 間隔） --- */

.p-blog__list {
  --x: 700px;
  --y: 112px;
  --w: 900px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-blog__item {
  position: relative;
  height: 70px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
}

.p-blog__link{
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;
}

.p-blog__date {
  position: absolute;
  left: 33px;
  top: 26px;
  width: 76px;
}

/* WordPress 化で文字列が管理画面からの自由入力になったので、
   Figma の固定幅（72px / 左 214px 起点）から溢れても壊れないようにしてある。
   ・カテゴリ … 5 文字までは 72px のまま。長い名前はタイトルの手前（105px）で頭打ち
   ・タイトル … カードの右端（900 - 214 - 33 = 653px）で頭打ちにして "…" を付ける
   どちらも既存のダミー文言では幅が変わらない（= Figma と一致したまま）。 */

.p-blog__cat {
  position: absolute;
  left: 109px;
  top: 26px;
  width: auto;
  min-width: 72px;
  max-width: 105px;
  height: 18px;
  padding-inline: 4px;
  overflow: hidden;
  /* HTML 側で flex ではなく block にしてあるのは、フレックスコンテナには
     text-overflow: ellipsis が効かないため。中央寄せは line-height で取る。 */
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.p-blog__title {
  position: absolute;
  left: 214px;
  top: 15px;
  max-width: 653px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-blog__btn {
  --x: 1397px;
  --y: 383px;
}

/* ============================================================
   flow — Figma 最新PC: y6480 〜 7200
   ============================================================ */

.p-flow {
  position: relative;
  /* キャリア支援準備金のバナー（1009:83）が増えたぶん 720 から広げている。
     Figma の Flow → 募集要項 は 856px だが、こちらは募集要項の箱を 600px に
     圧縮してある（Figma は 842px）ので、箱の上端で合わせると青いアーチが
     バナーに重なる。そこで「バナーの下端 → アーチの最下点」で合わせている。
     ・Figma: 募集要項フレーム 7622 ＋ 241（ブロブ上端から 900px がアーチ）＝ 7863。
       バナーの下端 7809（7452 ＋ 357）との間隔は 54px
     ・実装: アーチ＝募集要項の上端 ＋ 40px（ブロブを --y: 募集要項 − 860 に置くため）
       バナーの下端は Flow の先頭から 1043px なので
       高さ = 1043 ＋ 54 − 40 = 1057
     バナーの画像が 112 → 144px に大きくなった分だけ Figma の間隔が
     86 → 54px に縮んだので、この高さは据え置きで一致する
     （＝背景ブロブ・.p-bg の高さは全ページ変更不要）。 */
  height: 1057px;
  color: #fff;
}

.p-flow__en {
  --x: 711px;
  --y: 173px;
  --w: 500px;
  text-align: center;
  font-family: Outfit, "Zen Kaku Gothic New", sans-serif;
  color: #1660c9;
  font-size: 65px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: 1.95px;
}

.p-flow__ja {
  --x: 711px;
  --y: 126px;
  --w: 500px;
  text-align: center;
  color: #1660c9;
  font-size: 26px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: 0.78px;
}

.p-flow__lead {
  --x: 555px;
  --y: 259px;
  --w: 811px;
  text-align: center;
  color: #000;
  font-size: 18px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: 0.32px;
}

/* --- ステップ（Figma 6900 / 271x205 / x 320・663・996・1328） --- */

.p-flow__steps {
  --x: 320px;
  --y: 420px;
  --w: 1279px;
  /* 高さは中身なり。Figma は 205px だが、本文のフォントを上げているぶん
     中身が 180px あり、固定にするとカードの下 20px の余白が潰れる */
  --h: auto;
  display: flex;
  gap: 62px;
}

.p-flow__step{
  display: flex;
  flex-direction: column;
  width: 271px;
  /* 固定の height にすると本文が padding を突き抜ける（下が 5px しか残らない）。
     Figma の 205px は下限として残す */
  min-height: 205px;
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
  color: #000;
}

.p-flow__step:first-child {
  background-color: rgba(255, 255, 255, 0.8);
}

.p-flow__step-inner{
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 231px;
}

.p-flow__step-head{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.p-flow__step-no{
  display: flex;
  align-items: center;
  --tw-text-opacity: 1;
  color: rgb(22 96 201 / var(--tw-text-opacity, 1));
}

.p-flow__step-no span {
  width: 40px;
  font-size: 18px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: 0.48px;
}

.p-flow__step-no em{
  text-align: center;
  font-family: Outfit, "Zen Kaku Gothic New", sans-serif;
  width: 40px;
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 46px;
  letter-spacing: 0.9px;
}

.p-flow__step-title {
  display: flex;
  align-items: center;
  height: 40px;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: 0.54px;
}

.p-flow__step-text {
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.28px;
}

/* 最新デザインではステップ間の矢印は無い */

/* ステップ間の矢印（Figma 145:76 / 77 / 78）
   ページ座標 x619・962・1295 / y6995・10x15。
   .p-flow__steps（x320 y6900）を基準にした絶対配置にしている。
   4つ目のあとには矢印を置かない。 */

.p-flow__arrow {
  display: block;
  position: absolute;
  /* カードの高さが中身で変わるので、px 固定ではなく中央に置く
     （Figma も 205px の箱のちょうど中央） */
  top: 50%;
  width: 10px;
  height: 15px;
  transform: translateY(-50%);
}

.p-flow__arrow--1 {
  left: 299px;
}

.p-flow__arrow--2 {
  left: 642px;
}

.p-flow__arrow--3 {
  left: 975px;
}

/* ------------------------------------------------------------
   キャリア支援準備金のバナー（Figma PC 1009:83 : x643 / y7452 / 637x325）
   画像 → 31px → タグ → 12px → 見出し → 31px → 本文 の縦積み。
   .p-flow の color: #fff を継がないよう、文字色は HTML 側で明示している。
   ------------------------------------------------------------ */

.p-flow__bonus {
  --x: 0px;
  --y: 686px;
  --w: 1920px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-flow__bonus-tag{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 197px;
  height: 31px;
  background-color: #1660c9;
}

.p-flow__bonus-title {
  margin-top: 12px;
}

/* 画像（411x144）。Figma の DROP_SHADOW（offset 4,4 / blur 0 / #1660c9）は
   書き出しに焼き込まず CSS の box-shadow で付ける（書き出し時に 822x288 へ切り直してある）。
   ホバーの吹き出しの基準になるので、枠は .p-flow__bonus-figure 側が持つ */

.p-flow__bonus-figure {
  position: relative;
  display: block;
  width: 411px;
  margin-top: 31px;
}

/* ホバーできない端末でも開けるよう、画像は button で包んである。
   span + tabindex では iOS / Android のタップでフォーカスが入らず、
   吹き出しに一切到達できなくなる（実機相当のタッチ操作で確認済み）。 */

.p-flow__bonus-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.p-flow__bonus-img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 4px 4px 0 #1660c9;
}

/* --- ホバーで出る吹き出し（角丸 10px・青地に白文字・画像の上／三角は下辺）---
   青はタグ「公式HP限定」や画像の影と同じ #1660c9。
   visibility は transition に混ぜない（transform が動かなくなる）。
   当たり判定の無効化は pointer-events で行う。 */

.p-flow__bonus-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 2;
  width: 560px;
  padding: 24px 28px;
  border-radius: 10px;
  background-color: #1660c9;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.32px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.p-flow__bonus-tip-title {
  display: block;
  font-weight: 700;
}

/* 吹き出しの三角。影は本体側だけに付けたいので ::after には掛けない。
   top: 100% ちょうどだと 1024〜1919px の zoom 帯で小数位置になり、
   本体との間に 1px の隙間が見える。2px 食い込ませて潰す
   （そのぶん height も 12 → 14px にして、先端は本体の 12px 下のまま）。 */

.p-flow__bonus-tip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% - 2px);
  width: 22px;
  height: 14px;
  background-color: #1660c9;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateX(-50%);
}

/* 表示のトリガは3つ
     ・ホバーできる環境 … :hover
     ・キーボード       … :focus-visible（吹き出しは button の直後の兄弟）
     ・タップ端末       … JS が付け外しする .is-tip-open（もう一度タップで閉じる）
   :hover を @media (hover: hover) で囲うのは、iOS がタップ後に hover を
   残したままにするため。囲わないと JS で閉じても hover で開いたままになる。 */

.p-flow__bonus-btn:focus-visible + .p-flow__bonus-tip,
.p-flow__bonus-figure.is-tip-open .p-flow__bonus-tip {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

@media (hover: hover) {
  .p-flow__bonus-figure:hover .p-flow__bonus-tip {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
}

/* Esc で閉じたあと（WCAG 1.4.13 Dismissible）。
   キーボードの :focus-visible はボタンに残したままなので、
   それを打ち消すために上の3つより後ろに置く。
   JS がフォーカスを外したとき／再操作したときに外す。 */

.p-flow__bonus-figure.is-tip-dismissed .p-flow__bonus-tip {
  opacity: 0;
  pointer-events: none;
}

/* Figma は 637px（16px の文字で組んだ幅）。本文を 18px（1.125 倍）に上げたので
   枠も 1.125 倍にして Figma と同じ位置で改行させる */

.p-flow__bonus-text {
  width: 717px;
  margin-top: 31px;
}

/* ============================================================
   cta（募集要項）— Figma 最新PC: y7200 〜 7800
   ============================================================ */

.p-cta {
  position: relative;
  /* Figma は 842px だが、ここは 640px に圧縮してある。
     600px だと 応募するボタンの下端（584）からフッターまで 16px しか無く、
     同じ青どうしで詰まって見えたので 40px 足した（下の余白 56px ＝
     Figma の 55.5px と同じ）。
     ※ この高さを変えたら全ページの .p-bg の高さも同じだけ動かすこと。
       ブロブの --y（＝募集要項の上端 − 860）は変わらない。 */
  height: 640px;
}

.p-cta__bg {
  display: none;
}

.p-cta__label {
  --x: 744px;
  --y: 103px;
  --w: 432px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 40px;
}

.p-cta__title {
  --x: 744px;
  /* Figma は 136px（=7336）だが、それだと「Job description」との
     見た目の間隔が 12px しかない。文字の下端から 30px 空ける位置にする。 */
  --y: 154px;
  --w: 432px;
  text-align: center;
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: 3.6px;
}

.p-cta__lead {
  --x: 596px;
  --y: 219px;
  --w: 728px;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  font-size: 26px;
  font-weight: 500;
  line-height: 46px;
  letter-spacing: 0.78px;
}

.p-cta__types {
  --x: 611px;
  --y: 360px;
  display: flex;
  gap: 14px;
}

.p-cta__type{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 342px;
  height: 70px;
  border-radius: 6px;
  font-size: 22px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 4.5px;
  text-indent: 4.5px;
  /* ホバーで色を変える（一気に切り替えず、色を送る） */
  transition: background-color 0.5s ease, color 0.5s ease;
  /* 新卒採用・中途採用とも同じ色使い（見た目で区別がつかず混乱しないよう統一）：
     白地・紺文字 → ホバーで紺地・白文字。
     1px の紺の枠（box-sizing: border-box なので外寸は変わらない）。
     SP の色は _sp.scss 側でも同じ値にしている。 */
}

.p-cta__type--new, .p-cta__type--mid {
  border: 1px solid #040e4e;
  background-color: #fff;
  color: #040e4e;
}

.p-cta__type {
  /* タッチ端末は :hover が残り続けることがあるので変えない */
}

@media (hover: hover) {
  .p-cta__type--new:hover, .p-cta__type--mid:hover {
    background-color: #040e4e;
    color: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-cta__type {
    transition: none;
  }
}

/* --- 黄色の大 CTA（Figma 244:273 / 790,7705 340x79 #ffd300） --- */

.p-cta__entry {
  --x: 790px;
  --y: 505px;
  --w: 340px;
  --h: 79px;
}

.c-btn-cta{
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* ::before（紺の塗り）を黄色の背景の上・文字の下に収めるための
     スタッキングコンテキストと、角丸でのはみ出し防止 */
  isolation: isolate;
  overflow: hidden;
  border-radius: 4px;
  background-color: #ffd300;
  color: #181818;
  font-size: 26px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 0.78px;
  transition: color 0.5s ease;
  /* ホバーで紺（#000e4e）が左から右へ塗りつぶし、外すと右へ抜けて黄色に戻る。
     scaleX の基点を「通常時は右・ホバー中は左」に切り替えるのがポイント。
     ・ホバー開始：幅0 → 1 を左基点で伸ばす ＝ 左から右へ塗る
     ・ホバー解除：幅1 → 0 を右基点で縮める ＝ 右へ向かって消える
     （基点は瞬時に切り替わるが、幅が 0 や 1 のときは見た目が変わらない）
     紺の上では #181818 が読めないので、ホバー中は文字と矢印を白にする。 */
}

.c-btn-cta::before {
  content: "";
  position: absolute;
  /* 1px 外側まで塗って overflow: hidden で切り落とす。
     inset: 0 だと、端数の拡大率（Windows の 125%・150% 表示や
     1024〜1919px の zoom）で塗りの端と下地の黄色の端が 1px ずれ、
     ホバー中も上下端に黄色い線が残る（Chrome / Firefox で確認）。 */
  inset: -1px;
  z-index: -1;
  background-color: #000e4e;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s ease;
  pointer-events: none;
}

@media (hover: hover) {
  .c-btn-cta:hover {
    color: #fff;
  }

  .c-btn-cta:hover::before {
    transform: scaleX(1);
    transform-origin: left center;
  }

  .c-btn-cta:hover .c-btn-cta__icon {
    color: #fff;
    transform: translateX(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-btn-cta {
    transition: none;
  }

  .c-btn-cta::before,
  .c-btn-cta .c-btn-cta__icon {
    transition: none;
  }
}

.c-btn-cta__icon {
  position: absolute;
  top: 50%;
  right: 28px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  color: #181818;
  transition: transform 0.3s ease, color 0.5s ease;
}

/* ============================================================
   intro — SP のみのオープニング演出
   Figma: hero-section-sp (427:65) 360x829
   ------------------------------------------------------------
   流れ（JS が .is-step1〜4 を順に付ける）
     step1 : 街並みの画像がフェードイン
     step2 : 散らばった写真6枚が順番に表示
     step3 : 背景のグラデーションカーブが左→右へワイプ
     step4 : 街並みと写真がフェードアウト → 本編テキストへ
   すべて 360px 基準の vw で、画面幅に追従する。
   ============================================================ */

/* PC では出さない */

.p-intro,
.p-fixed-cta {
  display: none;
}

@media (max-width: 767px) {
  .p-intro {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    overflow: hidden;
    /* 背景は敷かない。グラデーションカーブは本編の .p-bg__curve01 を
       そのまま使い、演出後もそのページ背景として残るため。 */
    transition: opacity 0.5s ease;
  }

  .p-intro[hidden] {
    display: none;
  }

  .p-intro.is-done {
    opacity: 0;
    pointer-events: none;
  }

  .p-intro__stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  /* --- 背景のグラデーションカーブ ---
     専用の図形は持たず、本編の .p-bg__curve01（_background.scss）を
     JS が is-step3 のタイミングで .is-revealed して左→右にワイプさせる。
     演出の待ち時間を短くするため、SP では出だしの遅延を 0 にする。 */

  .p-bg__curve01 {
    --curve-start: 0s;
  }

  /* --- 街並みの画像（Figma 424:2696 / 0,249 360x240） --- */

  .p-intro__city {
    position: absolute;
    left: 0;
    top: 69.1667vw;
    width: 100%;
    height: 66.6667vw;
    opacity: 0;
    transition: opacity 0.9s ease;
  }

  .p-intro__city img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .p-intro.is-step1 .p-intro__city {
    opacity: 1;
  }

  /* --- 散らばった写真（Figma 427:45 配下 / 順番に登場） --- */

  .p-intro__photo {
    position: absolute;
    left: calc(var(--ix) / 360 * 100vw);
    top: calc(var(--iy) / 360 * 100vw);
    width: calc(var(--iw) / 360 * 100vw);
    height: calc(var(--ih) / 360 * 100vw);
    overflow: hidden;
    border-radius: 5.5556vw;
    opacity: 0;
    transform: scale(0.88);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .p-intro__photo img {
    position: absolute;
    left: calc(var(--ox) / 360 * 100vw);
    top: calc(var(--oy) / 360 * 100vw);
    width: calc(var(--ow) / 360 * 100vw);
    height: calc(var(--oh) / 360 * 100vw);
    -o-object-fit: cover;
       object-fit: cover;
  }

  .p-intro__photo--4 {
    --ix: 61;
    --iy: 115;
    --iw: 77;
    --ih: 77;
    --ox: -77;
    --oy: -1;
    --ow: 162;
    --oh: 107;
    --order: 0;
  }

  .p-intro__photo--1 {
    --ix: 174;
    --iy: 135;
    --iw: 161;
    --ih: 114;
    --ox: -14;
    --oy: -6;
    --ow: 190;
    --oh: 133;
    --order: 1;
  }

  .p-intro__photo--2 {
    --ix: 25;
    --iy: 225;
    --iw: 135;
    --ih: 95;
    --ox: -13;
    --oy: -3;
    --ow: 152;
    --oh: 107;
    --order: 2;
  }

  .p-intro__photo--6 {
    --ix: 46;
    --iy: 449;
    --iw: 125;
    --ih: 157;
    --ox: -68;
    --oy: -4;
    --ow: 244;
    --oh: 160;
    --order: 3;
  }

  .p-intro__photo--5 {
    --ix: 200;
    --iy: 456;
    --iw: 77;
    --ih: 77;
    --ox: -50;
    --oy: -13;
    --ow: 135;
    --oh: 104;
    --order: 4;
  }

  .p-intro__photo--3 {
    --ix: 222;
    --iy: 557;
    --iw: 103;
    --ih: 73;
    --ox: 0;
    --oy: -1;
    --ow: 103;
    --oh: 73;
    --order: 5;
  }

  .p-intro.is-step2 .p-intro__photo {
    opacity: 1;
    transform: scale(1);
    transition-delay: calc(var(--order, 0) * 0.16s);
  }

  /* step4 : 街並みと写真だけ消す（カーブは残す） */

  .p-intro.is-step4 .p-intro__city,
  .p-intro.is-step4 .p-intro__photo {
    opacity: 0;
    transform: scale(1);
    transition: opacity 0.7s ease calc(var(--order, 0) * 0.06s), transform 0.7s ease;
  }

  /* --- 画面下に追従する応募ボタン ---
     薄い青の帯に黄色い「応募する」を 1 つ置く。
     帯は半透明なので、下に隠れる本文が透けすぎないよう blur を掛けている。 */

  .p-fixed-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    padding: 15px 20px calc(15px + env(safe-area-inset-bottom, 0px));
    background-color: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .p-fixed-cta[hidden] {
    display: none;
  }

  .p-fixed-cta.is-shown {
    transform: translateY(0);
  }

  /* 帯の中の「応募する」の見た目は .c-btn-apply（_sp.scss）がそのまま持つ。
     フッターの応募ボタンと同じ 50px・黄色。 */

  /* 追従ボタンがフッター下端（コピーライト）に被らないよう逃がす。
     .p-fixed-cta は .l-page より前にあるので後続セレクタで指定できる */

  .p-fixed-cta.is-shown ~ .l-page .l-footer {
    padding-bottom: 96px;
  }

  /* --------------------------------------------------------
     本編テキストの「ぽんぽん」表示
     ・イントロ中は伏せておき、カーブが出たあとに順次ポップイン
     ・リード文は段落ごとに出すので、より細かくテンポが出る
       （段落は 5 つ）
     ・少し行き過ぎて戻る easing（overshoot）で弾む感じを出す
     -------------------------------------------------------- */

  .js .p-hero__catch,
  .js .p-hero__lead > p,
  .js .p-hero__sub,
  .js .p-hero__btn {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
    transform-origin: left center;
  }

  .js .p-hero.is-intro-done .p-hero__catch,
  .js .p-hero.is-intro-done .p-hero__lead > p,
  .js .p-hero.is-intro-done .p-hero__sub,
  .js .p-hero.is-intro-done .p-hero__btn {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.42s ease var(--text-delay, 0s), transform 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) var(--text-delay, 0s);
  }

  .js .p-hero.is-intro-done .p-hero__catch {
    --text-delay: 0s;
  }

  .js .p-hero.is-intro-done .p-hero__lead > p:nth-child(1) {
    --text-delay: 0.2s;
  }

  .js .p-hero.is-intro-done .p-hero__lead > p:nth-child(2) {
    --text-delay: 0.3s;
  }

  .js .p-hero.is-intro-done .p-hero__lead > p:nth-child(3) {
    --text-delay: 0.4s;
  }

  .js .p-hero.is-intro-done .p-hero__lead > p:nth-child(4) {
    --text-delay: 0.5s;
  }

  .js .p-hero.is-intro-done .p-hero__lead > p:nth-child(5) {
    --text-delay: 0.6s;
  }

  .js .p-hero.is-intro-done .p-hero__sub {
    --text-delay: 0.6s;
  }

  .js .p-hero.is-intro-done .p-hero__btn {
    --text-delay: 0.7s;
  }

  /* イントロ中はスクロールさせない */

  .is-intro-locked,
  .is-intro-locked body {
    overflow: hidden;
    height: 100%;
  }

  /* FV より下のセクションは、演出が終わったあとスクロールに合わせて
     下からふわっと出す（JS: initSectionReveal が .is-in を付ける）。
     ・.p-intro は背景を透過しているので、伏せておかないと演出中に透ける
     ・opacity / transform だけなので高さは動かない
       （＝セクション間の余白はウィンドウの高さに関係なくデザイン通り）
     ・募集要項（.p-cta / #entry）とフッターは対象外。ページの締めなので
       最初から出しておく（JS は .is-in を付けるが、伏せていないので無害） */

  .js main > section:not(.p-hero):not(.p-cta) {
    opacity: 0;
    transform: translateY(40px);
  }

  .js main > section:not(.p-cta).is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .p-intro {
    display: none;
  }

  .js .p-hero__catch,
  .js .p-hero__lead > p,
  .js .p-hero__sub,
  .js .p-hero__btn,
  .js main > section,
  .js .l-footer {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   hero — Figma 最新PC: y0 〜 1500
   ============================================================ */

/* ============================================================
   numbers — 数字で見る吉井財務（/numbers/）
   Figma: numbers/desktop (267:4) 1922 x 7894
   ------------------------------------------------------------
   トップページと同じく 1920px キャンバスの絶対配置（.u-canvas）で組む。
   SP は _sp.scss と同じ考え方で、このファイルの末尾にまとめて上書きする。
   ============================================================ */

/* ------------------------------------------------------------
   背景カーブ（Figma 274:860 / 304:22）
   形はトップページのカーブ02と同じ。位置とサイズだけこのページ用。
   ------------------------------------------------------------ */

.p-bg--numbers {
  height: 8271px;
}

.p-bg__curve--n1,
.p-bg__curve--n2 {
  left: calc(50% + var(--canvas-w) * -0.7380208);
  width: calc(var(--canvas-w) * 1.5273313);
  height: 2737.937px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 回転後のバウンディングボックスの位置（REST の absoluteBoundingBox から）
   frame(303,133) を原点にした座標 → x -457 / y -692・4164 */

.p-bg__curve--n1 {
  top: -692px;
}

.p-bg__curve--n2 {
  top: 4164px;
}

.p-bg__curve-rotate {
  position: relative;
  flex: none;
  width: calc(var(--canvas-w) * 1.3662688);
  height: 2405.414px;
  transform: rotate(-8deg);
}

/* 募集要項の背景（青いブロブ＋写真）。
   Figma 02_Numbers の Group 104（299:510）と同じページ座標。
   募集要項 y7016 - 860 = 6156（トップページと同じ 860px の関係） */

.p-bg--numbers .p-bg__blob {
  --y: 6493px;
}

.p-bg__trigger--n1 {
  --trigger-y: 600px;
}

.p-bg__trigger--n2 {
  --trigger-y: 4700px;
}

/* ------------------------------------------------------------
   FV（Figma 278:1392 / 278:1393）
   ------------------------------------------------------------ */

.p-nfv {
  position: relative;
  height: 1048px;
}

/* ------------------------------------------------------------
   登場アニメーション（トップページのヒーローと同じ演出）
   PC: テキストを 1 項目ずつフェードイン → 続けて右のイラストをフェードイン
   ・発火は main.js の initTextReveal（HTML の data-text-reveal）
   ・イラストは最後の項目（0.6s〜1.4s）に 0.5 秒重ねて出す
     （トップの HERO_RIGHT_DELAY = 900ms と同じ考え方）
   ・SP／タブレットはセクション単位のフェードイン（_intro.scss）が担うので対象外
   ------------------------------------------------------------ */

@media (min-width: 1024px) {
  .js .p-nfv .p-nfv__upper {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-nfv .p-nfv__en {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-nfv .p-nfv__catch {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-nfv .p-nfv__sub {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-nfv .p-nfv__lead {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-nfv.is-text-in .p-nfv__upper {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }

  .js .p-nfv.is-text-in .p-nfv__en {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .p-nfv.is-text-in .p-nfv__catch {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.3s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }

  .js .p-nfv.is-text-in .p-nfv__sub {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.45s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
  }

  .js .p-nfv.is-text-in .p-nfv__lead {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.6s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-nfv .p-nfv__upper,
  .js .p-nfv.is-text-in .p-nfv__upper {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-nfv .p-nfv__en,
  .js .p-nfv.is-text-in .p-nfv__en {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-nfv .p-nfv__catch,
  .js .p-nfv.is-text-in .p-nfv__catch {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-nfv .p-nfv__sub,
  .js .p-nfv.is-text-in .p-nfv__sub {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-nfv .p-nfv__lead,
  .js .p-nfv.is-text-in .p-nfv__lead {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 1024px) {
  .js .p-nfv .p-nfv__illust {
    opacity: 0;
  }

  .js .p-nfv.is-text-in .p-nfv__illust {
    opacity: 1;
    transition: opacity 0.9s ease 0.9s;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-nfv .p-nfv__illust,
  .js .p-nfv.is-text-in .p-nfv__illust {
    opacity: 1;
    transition: none;
  }
}

/* ------------------------------------------------------------
   数字のブロック：フェードイン → 現れてからカウントアップ
   ・対象は HTML の [data-count-reveal]（数値を含むカード・パネル・3つの数値）
   ・main.js の initCountUp がブロックが画面に入ったら .is-count-in を付け、
     フェードが終わるころに中の [data-countup] の数え上げを始める
   ・同時に画面に入ったブロックは 0.15 秒ずつずらす（--count-delay を JS が入れる）
   ・幅を問わず（SP でも「現れてから数える」流れにする）
   ・.js 配下だけで伏せるので、JS が動かなければ最初から表示される
   ------------------------------------------------------------ */

.js [data-count-reveal] {
  opacity: 0;
  transform: translateY(24px);
}

.js [data-count-reveal].is-count-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease var(--count-delay, 0s), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--count-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-count-reveal],
  .js [data-count-reveal].is-count-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------
   グラフ画像：左から右へ、ぼかしたマスクで少しずつ見せる
   （chart-01.webp / p02-left.webp / p02-right-chart.webp）
   ・マスクは「左が不透明・右が透明」のグラデーションを画像の 2.2 倍幅で敷き、
     mask-position を 100% → 0% に動かして、境目（幅の 2 割ぶんのぼかし）を右へ送る
     （2.2 倍 = 見える幅 1 + ぼかし 0.2 を、両端とも画面外に置ける大きさ）
   ・発火は親ブロックの .is-count-in（フェードイン）。ブロックが現れ終わってから
     数字のカウントアップ（1.2 秒）と同時に伸ばし始める（グラフは少しゆっくり 1.5 秒）
   ・.js 配下だけで隠すので、JS が動かなければ最初から全部見える
   ------------------------------------------------------------ */

.js [data-count-reveal] .p-n01__chart,
.js [data-count-reveal] .p-n02__chart {
  -webkit-mask-image: linear-gradient(90deg, #000 45.45%, transparent 54.55%);
  mask-image: linear-gradient(90deg, #000 45.45%, transparent 54.55%);
  -webkit-mask-size: 220% 100%;
  mask-size: 220% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}

.js [data-count-reveal].is-count-in .p-n01__chart,
.js [data-count-reveal].is-count-in .p-n02__chart {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  transition: -webkit-mask-position 1.5s cubic-bezier(0.33, 1, 0.68, 1) calc(var(--count-delay, 0s) + 0.8s), mask-position 1.5s cubic-bezier(0.33, 1, 0.68, 1) calc(var(--count-delay, 0s) + 0.8s);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-count-reveal] .p-n01__chart,
  .js [data-count-reveal] .p-n02__chart {
    -webkit-mask-image: none;
    mask-image: none;
    transition: none;
  }
}

.p-nfv__upper {
  --x: 313px;
  --y: 236px;
  --w: 514px;
}

.p-nfv__en {
  --x: 313px;
  --y: 291px;
  --w: 514px;
}

.p-nfv__catch {
  --x: 313px;
  --y: 374px;
  --w: 717px;
  color: #181818;
  font-size: 62px;
  font-weight: 500;
  line-height: 88px;
  letter-spacing: 4.96px;
}

.p-nfv__sub {
  --x: 313px;
  --y: 606px;
  --w: 717px;
  color: #000;
  font-size: 26px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: 0.78px;
}

.p-nfv__lead {
  --x: 313px;
  --y: 726px;
  --w: 717px;
  /* 文字の大きさはトップページのヒーロー本文（「税理士は、『帳簿をつけるだけ』…」）に
     そろえている（Figma 274:985 は 16px / 行送り 34px / 字間 0.32px）。
     SP の 16px / 28px は下の @media 側で指定、字間 0.4px はここから継承。 */
  color: #000;
  font-size: 20px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 0.4px;
  /* Figma 274:985 は 5 行が続いた 1 つのテキスト（paragraphSpacing なし）。
     段落間にアキは入れない。 */
}

.p-nfv__illust {
  --x: 1030px;
  --y: 335px;
  --w: 554px;
  --h: 486px;
}

.p-nfv__illust img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ------------------------------------------------------------
   3つの数値（Figma 322:254）
   ------------------------------------------------------------ */

.p-nstats {
  position: relative;
  height: 415px;
}

.p-nstats__list {
  --x: 506px;
  --y: 0px;
  --w: 947px;
  display: flex;
  align-items: flex-start;
}

.p-nstats__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}

.p-nstats__label {
  color: #1660c9;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 1.44px;
}

.p-nstats__label em{
  font-family: Outfit, "Zen Kaku Gothic New", sans-serif;
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 1.56px;
}

.p-nstats__value{
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-family: Outfit, "Zen Kaku Gothic New", sans-serif;
  --tw-text-opacity: 1;
  color: rgb(22 96 201 / var(--tw-text-opacity, 1));
  margin-top: 24px;
  height: 95px;
}

.p-nstats__value em {
  font-size: 120px;
  font-style: normal;
  font-weight: 500;
  line-height: 95px;
  letter-spacing: 2.4px;
}

.p-nstats__value span{
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  margin-left: 6px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.6px;
}

.p-nstats__note {
  margin-top: 14px;
  color: #1660c9;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.64px;
}

.p-nstats__item:first-child .p-nstats__note {
  font-size: 18px;
  line-height: 22px;
}

/* ------------------------------------------------------------
   セクション共通の見出し（Figma 278:1394 / 278:1633 …）
   大きな連番はグラデーションを文字で切り抜く。
   セクションごとに --no-grad を差し替える。
   ※ Figma で塗りの blendMode が MULTIPLY なのは 01（274:1013）だけ。
     02〜04（278:1634 / 322:264 / 322:270）は NORMAL なので、
     mix-blend-mode は 01 にだけ掛ける。
   ------------------------------------------------------------ */

.p-nsec {
  position: relative;
}

.c-nsec-no{
  text-align: center;
  font-family: Outfit, "Zen Kaku Gothic New", sans-serif;
  --no-grad: linear-gradient(216.68deg, #f5f5f5 10.81%, #1660c9 131.38%);
  background-image: var(--no-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: 100px;
  font-weight: 500;
  /* background-clip: text は要素のボックスの中しか描かないので、
     行送りを詰めると数字の上下が切れる。文字が収まる高さを確保する。 */
  line-height: 120px;
  letter-spacing: 4px;
}

.c-nsec-title{
  text-align: center;
  color: #181818;
  font-size: 36px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: 1.44px;
}

.p-nsec__no {
  --x: 898px;
  --y: -33px;
  --w: 124px;
}

.p-nsec__title {
  --x: 583px;
  --y: 81px;
  --w: 754px;
}

/* ------------------------------------------------------------
   01 組織力が高まることで広がるフィールド
   セクション先頭 = ページ 1463px（次の 02 は 2479px）
   ------------------------------------------------------------ */

.p-n01 {
  height: 1016px;
  /* Figma 274:1013 の塗りだけ blendMode: MULTIPLY */
}

.p-n01 .p-nsec__no {
  mix-blend-mode: multiply;
}

/* --- スタッフ数のパネル（Figma 276:1017 / 1280x460 r30） --- */

.p-n01__panel {
  --x: 320px;
  --y: 200px;
  --w: 1280px;
  --h: 460px;
  border-radius: 30px;
  /* Figma 276:1017 の塗り（GRADIENT_LINEAR / blendMode MULTIPLY）を
     CSS に変換したもの。ハンドルが枠の外まで伸びているので、
     停止位置がマイナス〜100%超になる。
     同じ位置に停止を 2 つ置くと境目が線になってしまうので注意。 */
  background-image: linear-gradient(90deg, #83c1ff -42.81%, #daeafb 25.5%, #f2f5f8 102.19%);
  mix-blend-mode: multiply;
}

.p-n01__label {
  position: absolute;
  left: 29px;
  top: 25px;
  color: #181818;
  font-size: 20px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0.8px;
}

/* ＋25名（Figma 317:92） */

.p-n01__big{
  display: flex;
  align-items: baseline;
  --tw-text-opacity: 1;
  color: rgb(22 96 201 / var(--tw-text-opacity, 1));
  position: absolute;
  left: 105px;
  top: 202px;
  line-height: 1;
  /* 「+」は半角（U+002B）。全角「＋」は Outfit に無く、代替フォントの
     大きな全角プラスで描かれてしまう（Figma 278:1106 は半角・Outfit 80px）。
     ベースラインのままだと Figma より約 4px 低いので持ち上げる（80px で -4px）。
     em 指定なので SP で文字が小さくなっても比率が保たれる。 */
}

.p-n01__big i{
  font-family: Outfit, "Zen Kaku Gothic New", sans-serif;
  position: relative;
  top: -0.05em;
  font-size: 80px;
  font-style: normal;
  font-weight: 500;
}

.p-n01__big em{
  font-family: Outfit, "Zen Kaku Gothic New", sans-serif;
  margin-left: 2px;
  font-size: 100px;
  font-style: normal;
  font-weight: 600;
}

.p-n01__big span {
  margin-left: 4px;
  font-size: 24px;
  font-weight: 700;
}

.p-n01__now{
  display: flex;
  align-items: baseline;
  --tw-text-opacity: 1;
  color: rgb(22 96 201 / var(--tw-text-opacity, 1));
  position: absolute;
  left: 149px;
  top: 303px;
  font-size: 20px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0.8px;
}

.p-n01__now em{
  font-family: Outfit, "Zen Kaku Gothic New", sans-serif;
  margin: 0 4px;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
}

/* 棒グラフ＋人物（Figma 318:102 / 887x337） */

.p-n01__chart {
  position: absolute;
  left: 331px;
  top: 68px;
  width: 887px;
  height: 337px;
}

.p-n01__chart img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* --- 3枚のカード（Figma 278:1562 / 410x200 r20 を 435px 間隔） --- */

.p-ncards {
  --x: 320px;
  --y: 686px;
  --w: 1280px;
  display: flex;
  gap: 25px;
}

.p-ncards__item {
  position: relative;
  flex: none;
  width: 410px;
  height: 200px;
  border-radius: 20px;
  /* Figma 276:1082 / 270:669 / 278:1432（いずれも 410x200） */
  background-image: linear-gradient(115.46deg, #b0d8ff 3.12%, #daeafb 48.77%, #f2f5f8 100%);
}

.p-ncards__label {
  position: absolute;
  left: 29px;
  top: 25px;
  color: #181818;
  font-size: 20px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0.8px;
}

.p-ncards__icon {
  position: absolute;
  -o-object-fit: contain;
     object-fit: contain;
}

.p-ncards__note {
  position: absolute;
  color: #1660c9;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0.64px;
}

.p-ncards__value{
  display: flex;
  align-items: baseline;
  --tw-text-opacity: 1;
  color: rgb(22 96 201 / var(--tw-text-opacity, 1));
  position: absolute;
  line-height: 1;
}

.p-ncards__value em{
  font-family: Outfit, "Zen Kaku Gothic New", sans-serif;
  font-size: 80px;
  font-style: normal;
  font-weight: 500;
}

.p-ncards__value span {
  margin-left: 4px;
  font-size: 24px;
  font-weight: 700;
}

.p-ncards__value .p-ncards__pre {
  margin: 0 4px 0 0;
}

/* カードごとの中身の位置（Figma の座標をカード左上からの相対に直したもの） */

.p-ncards__item--founded .p-ncards__icon {
  left: 75px;
  top: 68px;
  width: 93px;
  height: 83px;
}

.p-ncards__item--founded .p-ncards__note {
  left: 228px;
  top: 59px;
}

.p-ncards__item--founded .p-ncards__value {
  left: 214px;
  top: 86px;
}

.p-ncards__item--group .p-ncards__icon {
  left: 43px;
  top: 80px;
  width: 73px;
  height: 71px;
}

.p-ncards__item--group .p-ncards__value {
  /* Figma は 265px。リストの文字が大きくなって「6」との間が 5px になるので 8px 右へ */
  left: 273px;
  top: 85px;
  /* Figma 270:711 の「6」は幅102px（page 1020〜1122）の中央ぞろえ。
     左ぞろえのままだと 6社リストの2列目に重なる。
     「社」は page 1100 = 「6」の枠の右端から 22px 内側。 */
}

.p-ncards__item--group .p-ncards__value em {
  width: 102px;
  text-align: center;
}

.p-ncards__item--group .p-ncards__value span {
  margin-left: -22px;
}

/* グループ6社のリスト（Figma 319:28 / 353:2）。
   カード左上を原点に 1列目 x137 / 2列目 x214、上端 y70。各列 3 行・行送り 30px。 */

.p-ncards__group {
  position: absolute;
  /* Figma は x137・1列目 77px（16px の文字）。18px にすると「司法書士」（約 75px）と
     2列目の間が 2px になり 1 語に見えるので、1列目を 84px に広げ、そのぶん左へ 7px 寄せる
     （アイコンとの間は 14px 残る）。 */
  left: 130px;
  top: 70px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, 30px);
  grid-template-columns: 84px auto;
}

.p-ncards__group li {
  white-space: nowrap;
}

.p-ncards__item--age .p-ncards__icon {
  left: 80px;
  top: 75px;
  width: 82px;
  height: 67px;
}

.p-ncards__item--age .p-ncards__value {
  left: 195px;
  top: 78px;
}

/* ------------------------------------------------------------
   02〜04 で使う共通のパネル／カード
   （Figma: 角丸パネル r30、カード r20。中身は Figma 座標で絶対配置）
   ------------------------------------------------------------ */

.p-npanel,
.p-ncard {
  position: absolute;
}

.p-npanel {
  border-radius: 30px;
}

.p-ncard {
  border-radius: 20px;
}

.p-npanel__label,
.p-ncard__label {
  position: absolute;
  color: #181818;
  font-size: 20px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

/* 大きな数字の行。ベースラインぞろえで「約 / 数字 / 単位」を並べる */

/* 02 の「+」と数字の間は Figma で字面 15px（01 は 8px で、こちらは余白不要） */

.p-npanel__big i {
  margin-right: 0.1125em;
}

.p-npanel__big,
.p-ncard__value{
  display: flex;
  align-items: baseline;
  --tw-text-opacity: 1;
  color: rgb(22 96 201 / var(--tw-text-opacity, 1));
  position: absolute;
  line-height: 1;
  white-space: nowrap;
  /* 「+」は半角（理由は .p-n01__big を参照）。i は 02 の大きい数字にしか無い */
}

.p-npanel__big i,
.p-ncard__value i{
  font-family: Outfit, "Zen Kaku Gothic New", sans-serif;
  position: relative;
  top: -0.05em;
  font-size: 80px;
  font-style: normal;
  font-weight: 500;
}

.p-npanel__big em,
.p-ncard__value em{
  font-family: Outfit, "Zen Kaku Gothic New", sans-serif;
  font-size: 100px;
  font-style: normal;
  font-weight: 500;
}

.p-npanel__big span,
.p-ncard__value span {
  margin-left: 6px;
  font-size: 26px;
  font-weight: 700;
}

.p-npanel__big .p-ncard__pre,
.p-ncard__value .p-ncard__pre {
  margin: 0 6px 0 0;
}

.p-ncard__note {
  position: absolute;
  color: #1660c9;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0.64px;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   02 お客様との信頼関係の構築が実績につながる
   セクション先頭 = ページ 2479px（次の 03 は 3441px）
   ------------------------------------------------------------ */

.p-n02 {
  height: 962px;
}

.p-n02 .p-nsec__no {
  --y: -30px;
  --no-grad: linear-gradient(216.68deg, #f4eed0 0%, #f8f0ca 47%, #f2f5f8 100%);
}

.p-n02 .p-nsec__title {
  --y: 90px;
}

.p-n02__panel {
  --y: 215px;
  --w: 628px;
  --h: 400px;
  /* Figma 278:1644 / 278:1685 */
  background-image: linear-gradient(90deg, #f4eed0 -42.81%, #f8f0ca 25.5%, #f2f5f8 102.19%);
}

.p-n02__panel--left {
  --x: 320px;
}

.p-n02__panel--right {
  --x: 972px;
}

.p-n02__panel .p-npanel__label {
  left: 32px;
  top: 25px;
}

.p-n02__panel .p-npanel__big {
  top: 97px;
}

.p-n02__panel--left .p-npanel__big {
  left: 30px;
}

.p-n02__panel--right .p-npanel__big {
  left: 32px;
}

/* 左パネルの内訳（Figma 278:1680 Group 870 / page 712,2735 174x78）。
   パネル左上（320,2694）を原点にすると x392 / y41。
   数字は右端（x541）ぞろえで、その 7px 右に「社」が来る。 */

.p-n02__mini {
  position: absolute;
  left: 392px;
  top: 41px;
  width: 174px;
}

.p-n02__mini-row {
  position: relative;
  height: 43px;
}

.p-n02__mini-label {
  position: absolute;
  left: 0;
  top: 7px;
}

.p-n02__mini-num {
  position: absolute;
  right: 25px;
  top: 0;
  margin: 0;
}

.p-n02__mini-unit {
  position: absolute;
  left: 156px;
  top: 7px;
  margin: 0;
}

/* グラフ画像はパネル全面と同寸で重ねる。
   Figma が multiply 合成なので、画像の白背景は同じ指定で消す。 */

.p-n02__chart {
  mix-blend-mode: multiply;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* 右パネルは棒（写真）とラベルを重ねる */

/* --- 下段の2枚（Figma 322:285 / 281:1723 / 628x200 r20） --- */

.p-n02__new,
.p-n02__industry {
  --y: 642px;
  --w: 628px;
  --h: 200px;
  /* Figma 278:1598 / 281:1724 */
  background-image: linear-gradient(90deg, #f4eed0 -42.81%, #f8f0ca 25.5%, #f2f5f8 102.19%);
}

.p-n02__new {
  --x: 320px;
}

.p-n02__new .p-ncard__label {
  left: 32px;
  top: 25px;
}

.p-n02__new-icon {
  position: absolute;
  left: 148px;
  top: 92px;
  width: 87px;
  height: 54px;
  -o-object-fit: contain;
     object-fit: contain;
}

.p-n02__new-value {
  left: 273px;
  top: 82px;
}

.p-n02__new-value em {
  font-size: 80px;
}

.p-n02__industry {
  --x: 972px;
}

.p-n02__industry .p-ncard__label {
  left: 40px;
  top: 25px;
}

.p-n02__legend {
  position: absolute;
  left: 40px;
  top: 80px;
  display: grid;
  grid-auto-flow: column;
  /* Figma は行 25px（16px の文字）。18px にしたので行も同じ比率で 28px に */
  grid-template-rows: repeat(3, 28px);
  /* 2列目の左端は Figma で page x1191。カード左（x972）から 219px、
     1列目（x1012 = カード左から40px）との差が 179px。
     列幅で決め打ちしないと 1列目の文字数で位置が動いてしまう。 */
  grid-template-columns: 179px auto;
  color: #1660c9;
}

.p-n02__legend li{
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}

.p-n02__legend {
  /* Figma は 93px（1105-1012）。18px の「医療・福祉」が約 93px あり
     数字とくっつくので、数字の前に 9px ほど空きが出るよう広げる */
}

.p-n02__legend span {
  width: 102px;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0.64px;
}

.p-n02__legend em{
  font-family: Outfit, "Zen Kaku Gothic New", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 1.44px;
}

.p-n02__legend i {
  margin-left: 2px;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
}

.p-n02__pie {
  mix-blend-mode: multiply;
  position: absolute;
  left: 378px;
  top: 54px;
  width: 210px;
  height: 113px;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ------------------------------------------------------------
   03 プロフェッショナルとして信頼され成果をあげることで評価される
   セクション先頭 = ページ 3441px（次の 04 は 4193px）
   ------------------------------------------------------------ */

.p-n03 {
  height: 752px;
}

.p-n03 .p-nsec__no {
  --y: -30px;
  --no-grad: linear-gradient(216.68deg, #eeefed 0%, #e3f7d8 100%);
}

.p-n03 .p-nsec__title {
  --x: 320px;
  --y: 90px;
  --w: 1282px;
}

.p-n03__range {
  --x: 320px;
  --y: 215px;
  --w: 843px;
  --h: 400px;
  /* Figma 283:1903 */
  background-image: linear-gradient(297.35deg, #eeefed 2.56%, #e3f7d8 95.91%);
}

.p-n03__range .p-npanel__label {
  left: 32px;
  top: 28px;
}

.p-n03__icon {
  position: absolute;
  left: 57px;
  top: 161px;
  width: 76px;
  height: 101px;
  -o-object-fit: contain;
     object-fit: contain;
}

.p-n03__row{
  display: flex;
  align-items: baseline;
  --tw-text-opacity: 1;
  color: rgb(22 96 201 / var(--tw-text-opacity, 1));
  position: absolute;
  line-height: 1;
  white-space: nowrap;
}

.p-n03__row em{
  font-family: Outfit, "Zen Kaku Gothic New", sans-serif;
  font-size: 100px;
  font-style: normal;
  font-weight: 500;
}

.p-n03__row span {
  margin-left: 6px;
  font-size: 26px;
  font-weight: 700;
}

.p-n03__row .p-n03__pre {
  margin: 0 6px 0 0;
  font-size: 26px;
  font-weight: 700;
}

.p-n03__row--from {
  left: 186px;
  top: 90px;
}

.p-n03__row--to {
  left: 165px;
  top: 234px;
}

/* 「〜」は Figma 283:1974 でテキスト枠 46x69 を -90° 回転させている
   （rotation: -1.5707963…）。中心を合わせて置いてから回転させる。
   横位置は「540」と「1,000」の字面の中点に合わせている
   （540 の中心 307 と 1,000 の中心 292.5 の中点 = 299.8 → left = 299.8 - 46/2）。
   縦位置は指定値。 */

.p-n03__tilde {
  position: absolute;
  left: 276.8px;
  top: 170px;
  width: 46px;
  height: 69px;
  transform: rotate(-90deg);
  color: #1660c9;
  font-size: 30px;
  font-weight: 700;
  line-height: 69px;
}

/* 平均年収。左の年収レンジとは細い縦線で区切る */

.p-n03__avg {
  position: absolute;
  left: 569px;
  top: 129px;
  width: 230px;
  text-align: center;
  /* 区切り線（Figma 315:45 / カード左上から x523 y84 高さ242）。
     .p-n03__avg は left:569 / top:129 なので、そこからの相対に直す。 */
}

.p-n03__avg::before {
  content: "";
  position: absolute;
  left: -46px;
  top: -45px;
  width: 1px;
  height: 242px;
  background-color: #1f60c9;
}

.p-n03__avg-label {
  color: #1660c9;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0.64px;
}

.p-n03__avg-value{
  display: flex;
  align-items: baseline;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(22 96 201 / var(--tw-text-opacity, 1));
  margin-top: 24px;
  line-height: 1;
}

.p-n03__avg-value em{
  font-family: Outfit, "Zen Kaku Gothic New", sans-serif;
  font-size: 100px;
  font-style: normal;
  font-weight: 500;
}

.p-n03__avg-value span {
  margin-left: 6px;
  font-size: 26px;
  font-weight: 700;
}

.p-n03__cert {
  --x: 1190px;
  --y: 215px;
  --w: 410px;
  --h: 400px;
  /* Figma 283:1984 */
  background-image: linear-gradient(316.8deg, #eeefed 1.56%, #e3f7d8 97.5%);
}

.p-n03__cert .p-ncard__label {
  left: 30px;
  top: 25px;
}

.p-n03__cert-icon {
  position: absolute;
  left: 75px;
  top: 169px;
  width: 91px;
  height: 85px;
  -o-object-fit: contain;
     object-fit: contain;
}

.p-n03__cert-value {
  left: 207px;
  top: 165px;
  /* Figma の文字ボックス高。line-height: 1 のままだと下の注記に重なる */
  line-height: 76px;
}

.p-n03__cert-note {
  left: 210px;
  top: 250px;
}

/* ------------------------------------------------------------
   04 ワークライフバランスを考えた、働きやすい環境づくり
   セクション先頭 = ページ 4193px
   ------------------------------------------------------------ */

.p-n04 {
  height: 827px;
}

.p-n04 .p-nsec__no {
  --x: 836px;
  --y: -30px;
  --w: 248px;
  --no-grad: linear-gradient(216.68deg, #e2e7ec 0%, #f6f6f6 100%);
}

.p-n04 .p-nsec__title {
  --x: 320px;
  --y: 90px;
  --w: 1282px;
}

.p-n04 {
  /* Figma 283:2169 ほか。6 枚はサイズがまちまちで、Figma の角度も
     正方形は 135.2deg・横長は 115.0deg と枠に合わせて変わる。
     CSS の `to bottom right` は同じ計算（角の対角線）をするので、
     角度は書かずに枠へ追従させる。停止位置の差は 1% 未満。 */
}

.p-n04 .p-ncard {
  background-image: linear-gradient(to bottom right, #e2e7ec 4%, #f6f6f6 94%);
}

.p-n04 .p-ncard__label {
  left: 28px;
  top: 25px;
}

.p-n04 .p-ncard__value em {
  font-size: 80px;
}

.p-n04__gender {
  --x: 320px;
  --y: 215px;
  --w: 410px;
  --h: 410px;
}

.p-n04__ratio{
  display: flex;
  position: absolute;
  left: 38px;
  top: 76px;
  gap: 34px;
}

.p-n04__ratio-item {
  width: 140px;
  text-align: center;
}

.p-n04__ratio-label {
  color: #1660c9;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0.64px;
}

.p-n04__ratio-value{
  display: flex;
  align-items: baseline;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(22 96 201 / var(--tw-text-opacity, 1));
  margin-top: 9px;
  line-height: 1;
}

.p-n04__ratio-value em{
  font-family: Outfit, "Zen Kaku Gothic New", sans-serif;
  font-size: 100px;
  font-style: normal;
  font-weight: 500;
}

.p-n04__ratio-value span {
  margin-left: 4px;
  font-size: 26px;
  font-weight: 700;
}

.p-n04__pie {
  mix-blend-mode: multiply;
  position: absolute;
  left: 75px;
  top: 227px;
  width: 265px;
  height: 144px;
  -o-object-fit: contain;
     object-fit: contain;
}

.p-n04__icon {
  position: absolute;
  -o-object-fit: contain;
     object-fit: contain;
}

.p-n04__holiday {
  --x: 755px;
  --y: 215px;
  --w: 410px;
  --h: 190px;
}

.p-n04__holiday .p-n04__icon {
  left: 75px;
  top: 76px;
  width: 68px;
  height: 64px;
}

.p-n04__holiday .p-ncard__value {
  left: 184px;
  top: 71px;
}

.p-n04__overtime {
  --x: 1190px;
  --y: 215px;
  --w: 410px;
  --h: 190px;
}

.p-n04__overtime .p-n04__icon {
  left: 68px;
  top: 74px;
  width: 66px;
  height: 62px;
}

.p-n04__overtime .p-ncard__value {
  left: 169px;
  top: 71px;
}

.p-n04__paid {
  --x: 755px;
  --y: 433px;
  --w: 192px;
  --h: 192px;
}

.p-n04__paid .p-ncard__value {
  left: 24px;
  top: 62px;
}

.p-n04__childcare {
  --x: 973px;
  --y: 433px;
  --w: 192px;
  --h: 192px;
  /* Figma の文字ボックスは 102px（他カードは 101px）で、その分だけ
     上に置かれている。line-height: 1 で組むと見出しに詰まって見えるので、
     同寸の「有給取得率」カードと同じ 62px にそろえる。 */
}

.p-n04__childcare .p-ncard__value {
  left: 13px;
  top: 62px;
}

.p-n04__childcare .p-ncard__note {
  left: 35px;
  top: 145px;
}

.p-n04__tenure {
  --x: 1190px;
  --y: 433px;
  --w: 410px;
  --h: 192px;
}

.p-n04__tenure .p-ncard__value {
  left: 64px;
  top: 74px;
}

.p-n04__tenure {
  /* Figma 300:6（page 1430,4704 / 71x60.6）。カード左上からの相対位置 */
}

.p-n04__tenure .p-n04__icon {
  left: 240px;
  top: 78px;
  width: 71px;
  height: 61px;
}

/* ============================================================
   07 Interview「吉井財務をつくる人たち」
   Figma 353:20（Group 1009）/ ページ座標 y5020〜6220
   セクション先頭 = ページ 5020px（= ここまでのセクション高さの合計）
   高さ 1276px にすると次の Flow の見出しが Figma の y6422 に載る。
   ------------------------------------------------------------
   カード（Figma 307:163 / 307:214 / 307:239）は 390x698。
   写真 390x270 ＋ 白ボディ 390x428、四隅 20px の角丸。
   x = 320 / 766 / 1212（間隔 56px・全体 1282px でキャンバス中央）
   カードの中身は Figma の実測値を margin に置き換えた通常フロー。
   SP デザインが無いので、そのまま 1 カラムに積み直せるようにしている。
   ============================================================ */

.p-npeople {
  position: relative;
  height: 1276px;
}

/* 背景パネル（Figma 299:2 / 1800x1200・角丸20・#e0e7f9 50%） */

.p-npeople__panel {
  --x: 61px;
  --y: 0;
  --w: 1800px;
  --h: 1200px;
}

/* 「Interview」（Figma 322:244）
   塗りはグラデーション＋ノードに MULTIPLY（下の宣言を参照）。
   Figma のボックス（y5087 / 高さ109.09）の中心 = セクション先頭 +121.5px。
   行送り 120px の中心をそこへ合わせる（121.5 - 60 = 61.5）。 */

.p-npeople__en {
  --x: 321px;
  --y: 61.5px;
  --w: 1280px;
  /* Figma 322:244：塗りは #83c1ff → #daeafb → #f2f5f8 のグラデーション。
     塗り自体の blendMode は NORMAL だが、ノードに blendMode: MULTIPLY が
     掛かっているので、背景（パネル・カーブ）と乗算させる。 */
  background-image: linear-gradient(94.76deg, #83c1ff 2.7%, #daeafb 48.54%, #f2f5f8 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  mix-blend-mode: multiply;
  font-size: 100px;
  line-height: 120px;
  letter-spacing: 4px;
}

/* 「吉井財務をつくる人たち」（Figma 322:245 / y5205・高さ86 → 中心 +228）
   行送り 60px の中心をそこへ合わせる（228 - 30 = 198）。 */

.p-npeople__title {
  --x: 321px;
  --y: 198px;
  --w: 1280px;
}

.p-npeople__list {
  --x: 320px;
  --y: 314px;
  --w: 1282px;
  --h: 698px;
  display: flex;
  gap: 56px;
}

.p-npeople__card {
  width: 390px;
  /* 写真の上2角を角丸で抜くため */
  overflow: hidden;
}

.p-npeople__photo {
  display: block;
  width: 100%;
  height: 270px;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 本文カラムは 304px（Figma: カード左端から x41〜345）。
   見出し・回答の折り返し位置はこの幅で決まるので、値を変えないこと。 */

.p-npeople__body {
  padding: 27px 45px 0 41px;
}

.p-npeople__headline {
  margin-top: 13px;
}

.p-npeople__qa {
  /* Q. の行だけ本文より 8px 外側（Figma: 本文 x41 に対して Q. は x33） */
  width: 312px;
  margin-top: 16px;
  margin-left: -8px;
}

.p-npeople__qa + .p-npeople__qa {
  margin-top: 20px;
}

/* Figma の「Q.」は行送り 46px だが 1 行しかないので、
   本文（26px）の行箱にベースラインをそろえるだけにする。
   行の高さは margin で管理しているので見た目は変わらない。 */

.p-npeople__q{
  display: flex;
  align-items: baseline;
}

.p-npeople__q-mark {
  /* Figma は Q. のボックスが 40px 固定で、質問文との間が広く見えていた。
     ボックスは中身なりにして、質問文（16px）の 0.5 文字ぶん（8px）だけ空ける */
  flex: none;
  margin-right: 8px;
}

.p-npeople__a {
  width: 304px;
  /* 文字を 18px にしたので、Figma の 2 行が 3 行になり「たとき。」だけの行ができる。
     ・word-break: auto-phrase … 日本語を文節の切れ目で改行する（html の lang="ja" が前提）
     ・text-wrap: pretty      … 最終行が極端に短くならないようにする
     balance だけだと「仕／事」「活かしつ／つ」のように単語の途中で切れるので使わない。
     どちらも未対応のブラウザ（Safari など）は通常の折り返しになる。 */
  text-wrap: pretty;
  word-break: auto-phrase;
  /* Q. の行（26px の行箱）の直下 6px。これで回答の上端が
     Figma の y473 / 546、2つ目の Q. 行が y513 にそろう。 */
  margin-top: 6px;
  margin-left: 9px;
}

/* 「続きを読む」＋下線＋小矢印（Figma 307:143 / 307:142 / 307:144）
   下線はテキスト（行送り30px）の直下に来るので ::after を敷くだけで足りる。 */

.p-npeople__more {
  position: relative;
  display: block;
  width: 100px;
  margin-top: 26px;
  margin-left: 104px;
}

.p-npeople__more::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: currentColor;
  /* 既定は引かれた状態。タッチ端末では :hover が来ないので、
     ホバーできる環境だけ「消えている → ホバーで伸びる」に切り替える。 */
  transform-origin: left center;
}

/* ホバーで左から右へ伸び、外すと左へ引っ込む */

@media (hover: hover) {
  .p-npeople__more::after {
    transform: scaleX(0);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .p-npeople__more:hover::after {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-npeople__more::after,
  .p-npeople__more:hover::after {
    transform: none;
    transition: none;
  }
}

.p-npeople__more-icon {
  position: absolute;
  top: 12px;
  right: 0;
  width: 10px;
  height: 9.5px;
}

/* Figma 353:4（223x46 / 中心 x961.5）。幅はボタンの中身なりなので
   キャンバス幅いっぱいの箱を置いて中央寄せする。 */

.p-npeople__btn {
  --x: 0px;
  --y: 1085px;
  --w: 1920px;
  text-align: center;
}

/* ============================================================
   SP / タブレット（〜1023px）
   Figma に SP デザインが無いため、トップページの組み方に合わせて
   1カラムに積み直している（余白・文字サイズもトップページ準拠）。
   ============================================================ */

@media (max-width: 1023px) {
  .p-bg--numbers {
    height: 100%;
  }

  /* SP の形・傾きは about ページの SP デザイン（Figma about-sp 745:1138）に合わせる。
     同じ形（トップページのカーブ01 のパス）を 843x770 に縮め、反時計回りに 25.4° 回転。
     左上 (-419, 214.59) を回転の原点にし、360px 幅のデザインを画面幅に比例させる。
     色（黄色のグラデーション＋ノイズ）はこのページのまま。 */

  .p-bg__curve--n1,
  .p-bg__curve--n2 {
    --bw: max(360px, 100vw);
    /* Figma の x は -419。そのままだと図形の右上の切り口（先端）が画面の右端から
       18px ほど内側に入って見えるので、24px 右へずらして先端を画面外に出している */
    left: calc(var(--bw) * -395 / 360);
    width: calc(var(--bw) * 843.0236 / 360);
    height: calc(var(--bw) * 770.4473 / 360);
    transform: rotate(-25.3991deg);
    transform-origin: 0 0;
  }

  .p-bg__curve--n1 {
    top: calc(var(--bw) * 214.59 / 360);
  }

  /* 2本目は 03 セクションに掛ける。03 の位置（--n03-top）は JS が入れる
     （initNumbersCurvePosition）。1本目がページ上端に対して置かれているのと同じ関係で置く。 */

  .p-bg__curve--n2 {
    top: calc(var(--n03-top, 2640px) + var(--bw) * 214.59 / 360);
  }

  /* 出現の目印も 03 の先頭に置く（03 が画面の下端に入ったら再生） */

  .p-bg__trigger--n2 {
    --trigger-y: var(--n03-top, 4700px);
  }

  /* SP では回転を戻す（トップページのカーブ02と同じ扱い） */

  .p-bg__curve-rotate {
    width: 100%;
    height: 100%;
    transform: none;
  }

  /* --------------------------------------------------------
     FV
     -------------------------------------------------------- */

  .p-nfv {
    height: auto;
    padding: 141px 20px 40px;
  }

  .p-nfv__en {
    margin-top: 16px;
  }

  .p-nfv__catch {
    margin-top: 24px;
    font-size: 32px;
    line-height: 48px;
    letter-spacing: 2.56px;
  }

  .p-nfv__sub {
    margin-top: 24px;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 0.54px;
  }

  .p-nfv__lead {
    margin-top: 20px;
    font-size: 18px;
    line-height: 28px;
  }

  .p-nfv__illust {
    display: block;
    width: 100%;
    margin-top: 30px;
  }

  .p-nfv__illust img {
    width: 100%;
    height: auto;
  }

  /* --------------------------------------------------------
     セクション共通の見出し
     -------------------------------------------------------- */

  .c-nsec-no {
    font-size: 128px;
    line-height: 156px;
  }

  .c-nsec-title {
    margin-top: 12px;
    font-size: 22px;
    line-height: 34px;
    letter-spacing: 0.88px;
  }

  /* --------------------------------------------------------
     01（縦積み）
     -------------------------------------------------------- */

  .p-nsec {
    height: auto;
    padding: 40px 20px;
  }

  .p-n01__panel {
    position: relative;
    height: auto;
    margin-top: 30px;
    padding: 20px 20px 24px;
    border-radius: 20px;
  }

  /* SP は 1 カラムなので中央ぞろえにする */

  .p-n01__panel,
  .p-ncards__item {
    text-align: center;
  }

  .p-n01__label,
  .p-n01__big,
  .p-n01__now,
  .p-n01__chart {
    position: static;
    left: auto;
    top: auto;
    justify-content: center;
  }

  .p-n01__big {
    margin-top: 12px;
  }

  .p-n01__big i {
    font-size: 44px;
  }

  .p-n01__big em {
    font-size: 56px;
  }

  .p-n01__big span {
    font-size: 18px;
  }

  .p-n01__now {
    margin-top: 6px;
    font-size: 18px;
  }

  .p-n01__now em {
    font-size: 22px;
  }

  .p-n01__chart {
    width: 100%;
    height: auto;
    margin-top: 16px;
  }

  .p-n01__chart img {
    width: 100%;
    height: auto;
  }

  /* カードは縦積み。中身も絶対配置をやめて素直に並べる */

  .p-ncards {
    display: block;
    margin-top: 20px;
  }

  .p-ncards__item {
    width: 100%;
    height: auto;
    margin-top: 12px;
    padding: 20px;
  }

  .p-ncards__item:first-child {
    margin-top: 0;
  }

  .p-ncards__label,
  .p-ncards__icon,
  .p-ncards__note,
  .p-ncards__value {
    position: static;
    left: auto;
    top: auto;
    justify-content: center;
  }

  .p-ncards__item .p-ncards__icon {
    width: 64px;
    height: auto;
    margin: 10px auto 0;
  }

  .p-ncards__note {
    margin-top: 10px;
  }

  .p-ncards__value {
    margin-top: 4px;
  }

  .p-ncards__value em {
    font-size: 56px;
  }

  .p-ncards__value span {
    font-size: 18px;
  }

  /* --------------------------------------------------------
     02〜04 のパネル・カード（縦積み・中央ぞろえ）
     PC は Figma 座標の絶対配置なので、中身をすべてフローに戻す。
     -------------------------------------------------------- */

  .p-npanel,
  .p-ncard {
    display: block;
    position: static;
    width: 100%;
    height: auto;
    margin-top: 12px;
    padding: 20px 16px 24px;
    border-radius: 20px;
    text-align: center;
  }

  /* PC は 1 行前提で nowrap にしているが、狭い端末では
     「年間新規のお客様（直近の目安）」などがカードから溢れる */

  .p-npanel__label,
  .p-ncard__label {
    white-space: normal;
  }

  .p-npanel__label,
  .p-ncard__label,
  .p-npanel__big,
  .p-ncard__value,
  .p-ncard__note,
  .p-n03__row,
  .p-n03__tilde,
  .p-n03__avg,
  .p-n04__ratio {
    position: static;
    left: auto;
    top: auto;
    justify-content: center;
  }

  .p-npanel__big,
  .p-ncard__value,
  .p-n03__row {
    margin-top: 10px;
    line-height: 1;
  }

  .p-npanel__big i,
  .p-ncard__value i,
  .p-n03__row i {
    font-size: 40px;
  }

  .p-npanel__big em,
  .p-ncard__value em,
  .p-n03__row em {
    font-size: 56px;
  }

  .p-npanel__big span,
  .p-npanel__big .p-ncard__pre,
  .p-npanel__big .p-n03__pre,
  .p-ncard__value span,
  .p-ncard__value .p-ncard__pre,
  .p-ncard__value .p-n03__pre,
  .p-n03__row span,
  .p-n03__row .p-ncard__pre,
  .p-n03__row .p-n03__pre {
    font-size: 18px;
  }

  .p-ncard__note {
    margin-top: 6px;
    font-size: 13px;
  }

  /* グラフ・アイコン類はフローに戻して幅なり */

  .p-n02__chart,
  .p-n02__pie,
  .p-n02__new-icon,
  .p-n03__icon,
  .p-n03__cert-icon,
  .p-n04__icon,
  .p-n04__pie {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 12px auto 0;
  }

  /* SP のアイコンは PC の実寸より 15% 大きくする。
     ・02 / 03 の 3 つは画像を 2 倍で書き出しているので、幅なりだと実寸の倍（174px など）で
       出てしまう。04 の残業時間アイコンと横幅をそろえる（66px × 1.15 = 76px）。高さは比率なり
     ・04 の 3 つは PC のカード内の指定（.p-n04__holiday .p-n04__icon など）が効いているので、
       同じ詳細度で上書きする */

  .p-n02__new-icon,
  .p-n03__icon,
  .p-n03__cert-icon {
    width: 76px;
    height: auto;
  }

  .p-n04__holiday .p-n04__icon {
    width: 78px;
    height: 74px;
  }

  .p-n04__overtime .p-n04__icon {
    width: 76px;
    height: 71px;
  }

  .p-n04__tenure .p-n04__icon {
    width: 82px;
    height: 70px;
    margin-top: 17px;
  }

  /* グラフ画像はパネル（628x400）と同寸で書き出してあり、上の約 4 割は
     PC で「＋191社」を重ねるための余白になっている。
     SP は数字が画像の上に流れるので、その余白ぶんを切り落として詰める。
     Figma のグラフ本体はパネル上端から 159〜366px の帯（実画像でも同じ）。 */

  .p-n02__chart {
    width: 100%;
    aspect-ratio: 628/250;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: 50% 100%;
       object-position: 50% 100%;
  }

  /* スマホ（〜767px）はグラフ本体だけを中身の幅いっぱいに見せる。
     画像は左右にも PC 用の余白があり（本体は x127〜556 / y159〜366）、
     object-fit では上下か左右の片方しか切れない。そこで、少しゆとりを持たせた
     x122〜560（幅438）/ y155〜370 が中身の幅に収まるよう、幅と余白を
     親幅（= 100%。% の margin は上下も親の「幅」基準）に対する比率で書き、
     はみ出した左右はパネルで切る。上の 12px は数字との間隔。
     タブレット帯（768〜1023px）は zoom 1.2 が掛かり、2x 画像でも拡大しすぎて
     ぼけるので対象外（従来どおり）。 */
}

@media (max-width: 1023px) and (max-width: 767px) {
  .p-n02__panel {
    overflow: hidden;
  }

  .p-n02__chart {
    width: 143.3789954338%;
    max-width: none;
    height: auto;
    margin: calc(12px - 35.3881278539%) 0 -6.8493150685% -27.8538812785%;
    aspect-ratio: auto;
    -o-object-fit: fill;
       object-fit: fill;
  }
}

@media (max-width: 1023px) {
  /* 円グラフは 2x で書き出しているので、拡大しすぎるとぼける。
     等倍相当（210px / 265px）に近い値で頭打ちにする。 */

  .p-n02__pie {
    width: 100%;
    max-width: 260px;
  }

  .p-n04__pie {
    width: 100%;
    max-width: 320px;
  }

  .p-n02__legend {
    position: static;
    display: inline-grid;
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: 1fr;
    -moz-column-gap: 0;
         column-gap: 0;
    margin-top: 12px;
    text-align: left;
  }

  .p-n02__legend span {
    width: 110px;
  }

  /* 03 年収レンジ */

  /* 「〜」は幅 46px の固定ボックスを回転させているので、
     text-align では中央に来ない。ボックスごと中央に寄せる。
     「540」と「1,000」の間隔は、回転前のボックス高さ（PC は 69px）が
     そのまま行間になる。ここを 24px にして間隔を 89px → 44px に半減させ、
     上下 10px ずつの margin で「〜」がその中央に来るようにしている
     （チルダ中心 322+10+12 = 344 ＝ 間隔の中心 322+22）。
     回転後の字面は 27.8px あり箱から 2px ほどはみ出すが、切れはしない。 */

  .p-n03__tilde {
    height: 24px;
    margin: 10px auto 0;
    line-height: 24px;
  }

  .p-n03__avg {
    width: auto;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #1f60c9;
  }

  .p-n03__avg::before {
    display: none;
  }

  .p-n03__avg-value {
    margin-top: 8px;
  }

  .p-n03__avg-value em {
    font-size: 56px;
  }

  .p-n03__avg-value span {
    font-size: 18px;
  }

  /* 04 男女比 */

  .p-n04__ratio {
    display: flex;
    gap: 20px;
    margin-top: 12px;
  }

  .p-n04__ratio-item {
    flex: 1;
    width: auto;
  }

  .p-n04__ratio-value {
    margin-top: 4px;
  }

  .p-n04__ratio-value em {
    font-size: 56px;
  }

  .p-n04__ratio-value span {
    font-size: 18px;
  }

  /* --------------------------------------------------------
     3つの数値（縦積み）
     -------------------------------------------------------- */

  .p-nstats {
    height: auto;
    padding: 20px 20px 40px;
  }

  .p-nstats__list {
    display: block;
  }

  .p-nstats__item {
    display: block;
    margin-top: 32px;
  }

  .p-nstats__item:first-child {
    margin-top: 0;
  }

  .p-nstats__value {
    margin-top: 8px;
    height: auto;
  }

  .p-nstats__value em {
    font-size: 64px;
    line-height: 72px;
  }

  .p-nstats__value span {
    font-size: 24px;
  }

  .p-nstats__note {
    margin-top: 4px;
    font-size: 16px;
  }

  .p-nstats__item:first-child .p-nstats__note {
    font-size: 16px;
    line-height: 30px;
  }

  /* PC 用に「6」を幅 102px の中央ぞろえにし「社」を -22px 寄せているのを戻す。
     戻さないと SP では「6」と「社」が離れ、「6社」全体が右へずれる */

  .p-ncards__item--group .p-ncards__value em {
    width: auto;
    text-align: inherit;
  }

  .p-ncards__item--group .p-ncards__value span {
    margin-left: 4px;
  }

  /* グループ6社のリストと 02 左パネルの内訳表も、PC は絶対配置なので戻す */

  .p-ncards__group {
    position: static;
    left: auto;
    top: auto;
    width: -moz-fit-content;
    width: fit-content;
    margin: 10px auto 0;
    text-align: left;
  }

  .p-n02__mini {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    margin-top: 12px;
  }

  .p-n02__mini-row{
    display: flex;
    align-items: baseline;
    justify-content: center;
    position: static;
    height: auto;
    gap: 8px;
  }

  .p-n02__mini-row + .p-n02__mini-row {
    margin-top: 4px;
  }

  .p-n02__mini-label,
  .p-n02__mini-num,
  .p-n02__mini-unit {
    position: static;
    left: auto;
    right: auto;
    top: auto;
  }

  /* 04：有給取得率と育児休暇だけ横並び（ほかは全幅のまま）。
     HTML でもこの 2 枚は隣り合っているので、グリッドの同じ行に入り、
     高さは行の高さに揃う（align-items: stretch）。中身は上詰めで、
     PC と同じく見出しと数字の高さが左右で揃う。 */

  .p-n04 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    -moz-column-gap: 12px;
         column-gap: 12px;
  }

  .p-n04 > * {
    grid-column: 1/-1;
  }

  .p-n04 > .p-n04__paid,
  .p-n04 > .p-n04__childcare {
    grid-column: auto;
    /* 数字はカード幅に合わせて縮める（cqi = カードの中身の幅の 1%）。
       80px のままだと 360px 端末で「100%」がはみ出す（中身 122px に対し約 157px）。
       幅に余裕のある端末では 80px のまま。vw は zoom の影響を受けないので使わない。
       cqi 非対応ブラウザは 1 行目の 56px（どの幅でも収まる値）になる。 */
    container-type: inline-size;
  }

  .p-n04 > .p-n04__paid .p-ncard__value em,
  .p-n04 > .p-n04__childcare .p-ncard__value em {
    font-size: 56px;
    font-size: min(80px, 46cqi);
  }

  /* --------------------------------------------------------
     07 Interview「吉井財務をつくる人たち」
     Figma に SP デザインが無いので、他セクションと同じ余白
     （左右 20px / 上下 40px）で 1 カラムに積み直す。
     文字サイズはカード内は PC のまま、見出しだけ他セクションに合わせる。
     -------------------------------------------------------- */

  /* 背景パネルは画面端から 20px、中身はさらにパネルの内側 20px。
     01 の .p-n01__panel（画面端 20px ＋ パネル内 20px）と同じ入れ子。 */

  .p-npeople {
    height: auto;
    padding: 40px 40px;
  }

  /* .u-canvas は _sp.scss で static に戻されるが、背景パネルだけは
     セクション全体の下敷きとして残したいので絶対配置のままにする。
     _sp.scss の .u-canvas より後に効くよう詳細度を 1 つ上げている。 */

  .p-npeople .p-npeople__panel {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 0;
    bottom: 0;
    width: auto;
    height: auto;
  }

  /* 絶対配置のパネルは、通常フローのきょうだいより前面に描画される。
     そのままだとカードの白背景がパネルの半透明の青で潰れるので、
     中身も position を持たせて DOM 順（パネルより後）で上に出す。
     z-index は使わない（.l-page の isolation と干渉させないため）。 */

  .p-npeople .p-npeople__en,
  .p-npeople .p-npeople__title,
  .p-npeople .p-npeople__list,
  .p-npeople .p-npeople__btn {
    position: relative;
  }

  .p-npeople__en {
    font-size: 64px;
    line-height: 78px;
  }

  .p-npeople__title {
    margin-top: 12px;
  }

  .p-npeople__list {
    display: block;
    margin-top: 30px;
  }

  .p-npeople__card {
    width: 100%;
    margin-top: 24px;
  }

  .p-npeople__card:first-child {
    margin-top: 0;
  }

  .p-npeople__photo {
    height: auto;
    aspect-ratio: 390/270;
  }

  .p-npeople__body {
    padding: 20px 20px 24px;
  }

  .p-npeople__qa,
  .p-npeople__a {
    width: auto;
  }

  /* PC 用の「文節で改行・最終行を短くしない」指定が SP では早めの改行になり、
     幅が余ったまま折り返して見えるので、SP は通常の折り返しに戻す */

  .p-npeople__a {
    text-wrap: wrap;
    word-break: normal;
  }

  .p-npeople__more {
    margin-left: auto;
    margin-right: auto;
  }

  .p-npeople__btn {
    margin-top: 30px;
  }
}

/* タブレット（768〜1023px）は .l-page に zoom 1.2 が掛かるので 100vw だと 1.2 倍に膨らむ。
   JS が入れる zoom 後の設計幅（--tablet-w）を基準にする */

@media (min-width: 768px) and (max-width: 1023px) {
  .p-bg__curve--n1,
  .p-bg__curve--n2 {
    --bw: var(--tablet-w, 640px);
  }
}

/* ============================================================
   hero — Figma 最新PC: y0 〜 1500
   ============================================================ */

/* ============================================================
   ai — AIの活用（Figma ai_pc 545:1753）
   ・座標は 1920px キャンバス基準。見た目（文字サイズ・色・角丸など）は
     HTML 側の Tailwind ユーティリティが持っている。
   ・ここに書くのは「Figma 実寸の配置」と「SP のフロー配置」だけ。
   ============================================================ */

/* ------------------------------------------------------------
   背景カーブ（トップページのカーブ01 と同一。位置だけ違う）
   Figma 545:1211 : x=-258 / y=-246 / 2240x2047
   ------------------------------------------------------------ */

.p-bg--ai {
  height: 4573px;
}

/* 募集要項の背景（青いブロブ＋写真）。
   トップページでは 募集要項の 860px 上に置かれているので、同じ関係にする。
   募集要項 y3175 - 860 = 2315 */

.p-bg--ai .p-bg__blob {
  --y: 2652px;
}

.p-bg__curve--a1 {
  left: calc(50% + var(--canvas-w) * -0.634375);
  top: -246px;
  width: calc(var(--canvas-w) * 1.1666667);
  height: 2047px;
  --curve-start: 0.25s;
}

/* ------------------------------------------------------------
   FV（Figma 545:2427 / 599:177）
   ------------------------------------------------------------ */

.p-afv {
  position: relative;
  /* Figma の FV は 0 → 1404（Stance の見出しまで）。
     デザインでは「AIでつくる、お客様との時間」が消えて空きになっているが、
     このセクションは残すので、Stance を Figma の y1404 に置いたまま
     FV の下に取れるだけ（1404 - p-alead の 468）余白を取る */
  height: 936px;
}

.p-afv__upper {
  --x: 289px;
  --y: 288px;
}

.p-afv__en {
  --x: 289px;
  --y: 352px;
}

.p-afv__catch {
  --x: 289px;
  --y: 435px;
  --w: 807px;
}

.p-afv__lead {
  --x: 289px;
  --y: 735px;
  --w: 807px;
}

.p-afv__image {
  --x: 1145px;
  --y: 308px;
  --w: 554px;
  --h: 486px;
}

.p-afv__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ------------------------------------------------------------
   AIでつくる、お客様との時間（Figma 545:2452）
   ------------------------------------------------------------ */

.p-alead {
  position: relative;
  height: 468px;
}

.p-alead__upper,
.p-alead__title,
.p-alead__body {
  --x: 0px;
  --w: 1920px;
}

.p-alead__upper {
  --y: 0px;
}

.p-alead__title {
  --y: 62px;
  /* Figma のテキスト枠は 98px（1 行）。行送りを枠に合わせて位置を合わせる */
  line-height: 98px;
}

/* Figma のテキスト枠は x372 / 幅 1178（中心 961）。3 行目
   「そのことによって〜つかいます。」は Figma でちょうど枠幅いっぱいで、
   ブラウザのフォント幅だと数 px 溢れて 4 行になる。
   中央ぞろえなので、中心 961 を保ったまま枠だけ左右に広げて 3 行に保つ。 */

.p-alead__body {
  --x: 341px;
  --w: 1240px;
  --y: 168px;
}

/* ------------------------------------------------------------
   Stance（Figma 562:138）
   見出し・リード文は 1920px 幅で中央揃え
   ------------------------------------------------------------ */

.p-astance {
  position: relative;
  height: 609px;
}

.p-astance__upper,
.p-astance__en,
.p-astance__lead {
  --x: 0px;
  --w: 1920px;
}

.p-astance__upper {
  --y: 0px;
}

.p-astance__en {
  --y: 47px;
}

.p-astance__lead {
  --y: 133px;
}

/* カード 2 枚（Figma 562:80 / 562:131 : 425x216・間 38px）。
   Figma の枠（562:137）は x505 / 幅 910 で、中に 10px の余白があるので
   カードの実寸は 515 〜 1405。ここでは左右対称になるよう 890px を 2 等分している */

.p-astance__cards {
  --x: 515px;
  --y: 257px;
  --w: 890px;
  display: flex;
  gap: 38px;
}

.p-astance__card {
  flex: 1;
  padding: 20px 19px 25px 20px;
}

.p-astance__list {
  margin-top: 8px;
  /* 10px はビュレットのぶら下がり分。PC はさらに 1 文字（1em = 16px）
     右へ寄せる。SP は下の @media で 10px に戻す。 */
  padding-left: calc(10px + 1em);
  list-style: disc;
}

/* ------------------------------------------------------------
   For you（Figma 545:1566 / 562:139）
   ------------------------------------------------------------ */

.p-afor {
  position: relative;
  height: 442px;
}

.p-afor__upper {
  --x: 346px;
  --y: 0px;
}

.p-afor__en {
  --x: 346px;
  --y: 55px;
}

.p-afor__ja {
  --x: 346px;
  --y: 133px;
}

.p-afor__lead {
  --x: 346px;
  --y: 196px;
  /* Figma は 418px（16px の文字で組んだ幅）。文字を 18px（1.125 倍）に上げたので、
     枠も 1.125 倍（470px）にして Figma と同じ位置で改行させる。 */
  --w: 470px;
}

/* Figma 562:139「Rectangle 52」: x922 / y2013 / 654x443。
   ただし Figma は枠の中で画像を左寄せしており、こちらは object-fit: contain で
   中央に置かれるぶん 28px 右にずれる。絵の見える位置を合わせるため x を 28px 戻す
   （実測：Figma は枠の左から 83px、中央配置だと 111px）*/

.p-afor__image {
  --x: 893px;
  --y: 1px;
  --w: 654px;
  --h: 443px;
}

.p-afor__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ------------------------------------------------------------
   PC: 本文を 1 項目ずつフェードイン（他セクションと同じ仕組み）
   ------------------------------------------------------------ */

@media (min-width: 1024px) {
  .js .p-afv .p-afv__upper {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-afv .p-afv__en {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-afv .p-afv__catch {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-afv .p-afv__lead {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-afv .p-afv__image {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-afv.is-text-in .p-afv__upper {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }

  .js .p-afv.is-text-in .p-afv__en {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .p-afv.is-text-in .p-afv__catch {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.3s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }

  .js .p-afv.is-text-in .p-afv__lead {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.45s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
  }

  .js .p-afv.is-text-in .p-afv__image {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.6s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-afv .p-afv__upper,
  .js .p-afv.is-text-in .p-afv__upper {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-afv .p-afv__en,
  .js .p-afv.is-text-in .p-afv__en {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-afv .p-afv__catch,
  .js .p-afv.is-text-in .p-afv__catch {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-afv .p-afv__lead,
  .js .p-afv.is-text-in .p-afv__lead {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-afv .p-afv__image,
  .js .p-afv.is-text-in .p-afv__image {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 1024px) {
  .js .p-alead .p-alead__upper {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-alead .p-alead__title {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-alead .p-alead__body {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-alead.is-text-in .p-alead__upper {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }

  .js .p-alead.is-text-in .p-alead__title {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .p-alead.is-text-in .p-alead__body {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.3s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-alead .p-alead__upper,
  .js .p-alead.is-text-in .p-alead__upper {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-alead .p-alead__title,
  .js .p-alead.is-text-in .p-alead__title {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-alead .p-alead__body,
  .js .p-alead.is-text-in .p-alead__body {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 1024px) {
  .js .p-astance .p-astance__upper {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-astance .p-astance__en {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-astance .p-astance__lead {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-astance .p-astance__cards {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-astance.is-text-in .p-astance__upper {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }

  .js .p-astance.is-text-in .p-astance__en {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .p-astance.is-text-in .p-astance__lead {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.3s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }

  .js .p-astance.is-text-in .p-astance__cards {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.45s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-astance .p-astance__upper,
  .js .p-astance.is-text-in .p-astance__upper {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-astance .p-astance__en,
  .js .p-astance.is-text-in .p-astance__en {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-astance .p-astance__lead,
  .js .p-astance.is-text-in .p-astance__lead {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-astance .p-astance__cards,
  .js .p-astance.is-text-in .p-astance__cards {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 1024px) {
  .js .p-afor .p-afor__upper {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-afor .p-afor__en {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-afor .p-afor__ja {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-afor .p-afor__lead {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-afor .p-afor__image {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-afor.is-text-in .p-afor__upper {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }

  .js .p-afor.is-text-in .p-afor__en {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .p-afor.is-text-in .p-afor__ja {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.3s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }

  .js .p-afor.is-text-in .p-afor__lead {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.45s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
  }

  .js .p-afor.is-text-in .p-afor__image {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.6s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-afor .p-afor__upper,
  .js .p-afor.is-text-in .p-afor__upper {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-afor .p-afor__en,
  .js .p-afor.is-text-in .p-afor__en {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-afor .p-afor__ja,
  .js .p-afor.is-text-in .p-afor__ja {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-afor .p-afor__lead,
  .js .p-afor.is-text-in .p-afor__lead {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-afor .p-afor__image,
  .js .p-afor.is-text-in .p-afor__image {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   SP / タブレット（〜1023px）
   PC の絶対配置を解除してフローに戻す。
   文字サイズ・色は HTML 側のユーティリティ（fluid:）が持っている。
   ============================================================ */

@media (max-width: 1023px) {
  /* --- 背景カーブ --- */

  .p-bg--ai {
    height: auto;
  }

  .p-bg__curve--a1 {
    /* SP の形・傾きは about ページの SP デザイン（Figma about-sp 745:1138）に合わせる。
       同じ形を 843x770 に縮め、反時計回りに 25.4° 回転。左上 (-419, 214.59) を
       回転の原点にし、360px 幅のデザインを画面幅に比例させる（色はこのページのまま）。 */
    --bw: max(360px, 100vw);
    /* Figma の x は -419。そのままだと図形の右上の切り口（先端）が画面の右端から
       18px ほど内側に入って見えるので、24px 右へずらして先端を画面外に出している */
    left: calc(var(--bw) * -395 / 360);
    top: calc(var(--bw) * 214.59 / 360);
    width: calc(var(--bw) * 843.0236 / 360);
    height: calc(var(--bw) * 770.4473 / 360);
    transform: rotate(-25.3991deg);
    transform-origin: 0 0;
  }

  /* ============================================================
     以下の余白は SP デザイン（Figma 06-ai-sp / 562:672）の実測値。
     セクションは上下 40px、左右 20px を基本とする。
     ============================================================ */

  /* --- FV（562:1181 y101〜889） --- */

  .p-afv {
    height: auto;
    padding: calc(var(--sp-header-h) + 60px) 20px 40px;
  }

  .p-afv__en {
    margin-top: 14px;
  }

  .p-afv__catch {
    margin-top: 30px;
  }

  .p-afv__lead {
    margin-top: 20px;
  }

  .p-afv__image {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 30px;
  }

  /* --- AIでつくる、お客様との時間（564:1218 y853〜1513） --- */

  .p-alead {
    height: auto;
    padding: 59px 20px;
  }

  .p-alead__title {
    margin-top: 24px;
    line-height: 48px;
  }

  .p-alead__body {
    width: auto;
    margin-top: 24px;
  }

  /* --- Stance（564:1228 y1513〜2345） --- */

  .p-astance {
    height: auto;
    padding: 40px 20px;
  }

  .p-astance__en {
    margin-top: 18px;
  }

  .p-astance__lead {
    margin-top: 32px;
  }

  .p-astance__cards {
    display: block;
    width: 100%;
    margin-top: 40px;
  }

  /* SP も Figma（564:1258）どおりカードの中に 20px の余白を取る。
     カードに色が付いているので、PC と同じ内側余白が要る */

  .p-astance__card {
    width: 100%;
    padding: 20px 19px 25px 20px;
  }

  .p-astance__card + .p-astance__card {
    margin-top: 40px;
  }

  /* 字下げは PC と同じ（本文の頭も点の位置も PC にそろえる）。
     list-style: disc のままだと点の大きさと位置がブラウザ任せなので、
     padding は PC と同値にしたうえで点だけ自前で描き、
     PC の disc と同じ位置（本文の 19px 左）にぶら下げている。 */

  .p-astance__list {
    padding-left: calc(10px + 1em);
    list-style: none;
  }

  .p-astance__list li {
    position: relative;
  }

  .p-astance__list li::before {
    content: "";
    position: absolute;
    left: -19px;
    top: 10.5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: currentColor;
  }

  /* --- For you（564:1270 y2344〜3057） --- */

  .p-afor {
    height: auto;
    padding: 40px 20px;
  }

  .p-afor__en {
    margin-top: 13px;
  }

  .p-afor__ja {
    margin-top: 30px;
  }

  .p-afor__lead {
    width: auto;
    margin-top: 20px;
  }

  .p-afor__image {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 30px;
  }
}

/* タブレット（768〜1023px）は .l-page に zoom 1.2 が掛かるので 100vw だと 1.2 倍に膨らむ。
   JS が入れる zoom 後の設計幅（--tablet-w）を基準にする */

@media (min-width: 768px) and (max-width: 1023px) {
  .p-bg__curve--a1 {
    --bw: var(--tablet-w, 640px);
  }
}

/* ============================================================
   hero — Figma 最新PC: y0 〜 1500
   ============================================================ */

/* ============================================================
   about — 吉井財務を知る（Figma about_pc 693:98 / 1922 x 7876）
   ・座標は 1920px キャンバス基準（Figma の x/y をそのまま使う）。
     見た目（文字サイズ・色・角丸など）は HTML 側の Tailwind ユーティリティが持つ。
   ・ここに書くのは「Figma 実寸の配置」と「SP のフロー配置」だけ。
   ・文字サイズはサイト全体のルール（Figma 14px → 16px / 16px → 18px）に合わせている。
     文字が大きくなって溢れる本文枠は、Figma の幅を 1.125 倍にして同じ位置で改行させる。
   ============================================================ */

/* ------------------------------------------------------------
   背景カーブ（トップページのカーブ01 と同一形状・同一配色）
   Figma 693:101 : x=-258 / y=-246 / 2240x2047
   Figma 695:1380: x=-258 / y=3062 / 2240x2047
   ------------------------------------------------------------ */

.p-bg--about {
  /* ＝ ブロブの --y ＋ 1778（ブロブ画像 1738 ＋ 募集要項を 40px 伸ばしたぶん）。
     ページ全高と一致する */
  height: 7530px;
}

/* 募集要項の背景（青いブロブ＋写真。全ページ共通の inc/bg-blob.html）。
   トップページと同じく「募集要項の上端の 860px 上」に置く。
   募集要項の上端 7001 - 860 = 6141
   （フッターの青帯はブロブ上端の 1501px 下になり、写真の下端 1527px を隠す。Figma と同じ関係） */

.p-bg--about .p-bg__blob {
  --y: 5752px;
}

.p-bg__curve--ab1,
.p-bg__curve--ab2 {
  left: calc(50% + var(--canvas-w) * -0.634375);
  width: calc(var(--canvas-w) * 1.1666667);
  height: 2047px;
}

.p-bg__curve--ab1 {
  top: -246px;
  --curve-start: 0.25s;
}

/* Figma の y は 3062（拠点セクションに掛かる位置）だが、
   「吉井財務グループ」と「会社概要」の間に移したいという指示で下へずらしている。
   画面中央（x=960）での帯の中心は、この top から約 1080px 下に来る（実測。
   画面幅で 1078〜1086 の幅がある）。境界（グループの下端＝会社概要の上端 5238）
   に合わせて 5238 - 1078 = 4160 */

.p-bg__curve--ab2 {
  top: 3654px;
}

/* 目印が画面の最下部に入ったら再生（numbers ページと同じ仕組み） */

.p-bg__trigger--ab1 {
  --trigger-y: 600px;
}

.p-bg__trigger--ab2 {
  /* カーブの上端（4160）より少し下。ずらす前と同じ相対位置（+538） */
  --trigger-y: 4698px;
}

/* ------------------------------------------------------------
   FV（Figma 693:202 / 693:297）
   ------------------------------------------------------------ */

.p-abfv {
  position: relative;
  height: 1046px;
}

.p-abfv__upper {
  --x: 289px;
  --y: 287px;
}

.p-abfv__en {
  --x: 289px;
  --y: 351px;
}

.p-abfv__catch {
  --x: 289px;
  --y: 434px;
  --w: 807px;
}

.p-abfv__lead {
  --x: 289px;
  --y: 646px;
  --w: 807px;
}

.p-abfv__image {
  --x: 1096px;
  --y: 307px;
  --w: 603px;
  --h: 542px;
}

.p-abfv__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ------------------------------------------------------------
   代表メッセージ（Figma 693:211）
   見出しは 1920px 幅で中央揃え。写真（仮枠）と本文を横並び
   ------------------------------------------------------------ */

.p-abmsg {
  position: relative;
  height: 1050px;
}

.p-abmsg__ja,
.p-abmsg__en {
  --x: 0px;
  --w: 1920px;
}

.p-abmsg__ja {
  --y: 0px;
}

.p-abmsg__en {
  --y: 47px;
}

/* Figma 694:304（x346.8 / y133 / 1226x644）。左に 写真＋肩書き・名前、右に本文 */

.p-abmsg__photo {
  --x: 346.8px;
  --y: 133px;
  --w: 394.4px;
  --h: 493px;
}

.p-abmsg__photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 写真の下 48px（Figma 879:230）。肩書き（行送り 40px）→ 20px → 名前の画像 221x42 */

.p-abmsg__sign {
  --x: 346.8px;
  --y: 674px;
  --w: 394.4px;
}

.p-abmsg__name {
  display: block;
  width: 221px;
  height: 42px;
  margin-top: 20px;
}

.p-abmsg__body {
  --x: 829.2px;
  --y: 133px;
  /* Figma 744px（16px で組んだ幅）× 1.125 */
  --w: 837px;
  /* Figma は段落の間に空行 1 行（行送り 34px） */
}

.p-abmsg__body p + p {
  margin-top: 34px;
}

/* ------------------------------------------------------------
   沿革（Figma 694:305）
   ------------------------------------------------------------ */

.p-abhist {
  position: relative;
  height: 1141px;
}

/* 左の写真エリアは削除。見出し〜年表のかたまり（幅 565px：x1017〜1582）を
   1920px キャンバスの中央に置く → x = (1920 - 565) / 2 ≒ 678（Figma の x1017 から 339px 左） */

.p-abhist__upper {
  --x: 678px;
  --y: 0px;
}

.p-abhist__en {
  --x: 678px;
  --y: 55px;
  --w: 558px;
}

/* Figma 695:1329：左 8px の余白 → 2px の青い線 → 各項目は線から 24px 右 */

.p-abhist__list {
  --x: 678px;
  --y: 156px;
  position: relative;
  margin-left: 8px;
  padding-left: 2px;
}

/* 縦のライン。JS 無効時は最初から全部表示されるので、既定は伸びきった状態 */

.p-abhist__list::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: #1660c9;
  transform-origin: top center;
}

/* ------------------------------------------------------------
   年表の登場（上から 1 項目ずつ／ラインも同じ速さで下へ伸びる）
   ・発火は main.js の initScrollReveal（HTML の data-scroll-reveal）
   ・項目は $hist-step ずつ遅れて出る。ラインは全部出きるまでの時間で伸ばす
   ------------------------------------------------------------ */

/* ★ 沿革の <li> の数と必ず合わせること。
   少ないと、あふれた項目だけ遅延が付かず最初から出てしまう。 */

.js .p-abhist__list::before {
  transform: scaleY(0);
}

.js .p-abhist__list.is-revealed::before {
  transform: scaleY(1);
  transition: transform 3.91s linear;
}

.js .p-abhist__item {
  opacity: 0;
  transform: translateY(12px);
}

.js .p-abhist__list.is-revealed .p-abhist__item {
  opacity: 1;
  transform: none;
}

.js .p-abhist__list.is-revealed .p-abhist__item:nth-child(1) {
  transition: opacity 0.55s ease 0s, transform 0.55s ease 0s;
}

.js .p-abhist__list.is-revealed .p-abhist__item:nth-child(2) {
  transition: opacity 0.55s ease 0.42s, transform 0.55s ease 0.42s;
}

.js .p-abhist__list.is-revealed .p-abhist__item:nth-child(3) {
  transition: opacity 0.55s ease 0.84s, transform 0.55s ease 0.84s;
}

.js .p-abhist__list.is-revealed .p-abhist__item:nth-child(4) {
  transition: opacity 0.55s ease 1.26s, transform 0.55s ease 1.26s;
}

.js .p-abhist__list.is-revealed .p-abhist__item:nth-child(5) {
  transition: opacity 0.55s ease 1.68s, transform 0.55s ease 1.68s;
}

.js .p-abhist__list.is-revealed .p-abhist__item:nth-child(6) {
  transition: opacity 0.55s ease 2.1s, transform 0.55s ease 2.1s;
}

.js .p-abhist__list.is-revealed .p-abhist__item:nth-child(7) {
  transition: opacity 0.55s ease 2.52s, transform 0.55s ease 2.52s;
}

.js .p-abhist__list.is-revealed .p-abhist__item:nth-child(8) {
  transition: opacity 0.55s ease 2.94s, transform 0.55s ease 2.94s;
}

.js .p-abhist__list.is-revealed .p-abhist__item:nth-child(9) {
  transition: opacity 0.55s ease 3.36s, transform 0.55s ease 3.36s;
}

@media (prefers-reduced-motion: reduce) {
  .js .p-abhist__list::before,
  .js .p-abhist__list.is-revealed::before,
  .js .p-abhist__item,
  .js .p-abhist__list.is-revealed .p-abhist__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.p-abhist__item {
  position: relative;
  padding-left: 24px;
}

.p-abhist__item + .p-abhist__item {
  margin-top: 32px;
}

.p-abhist__item {
  /* 線の上の丸（Figma 694:455 : 12x12 / 項目の上端から 6px） */
}

.p-abhist__item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #1660c9;
}

/* 年・和暦の行。Figma の枠は高さ 19px（行送り 34px の文字を 19px で詰めている） */

.p-abhist__date {
  margin-bottom: 4px;
  line-height: 19px;
}

.p-abhist__year {
  /* Figma の年の枠は 14px の文字で幅 36px（中身より広い固定幅）＋間 4px。
     文字を 16px にしたので枠も 16/14 倍 */
  display: inline-block;
  width: 41px;
  margin-right: 4px;
}

/* ------------------------------------------------------------
   拠点（Figma 695:1381）
   ------------------------------------------------------------ */

.p-aboffice {
  position: relative;
  height: 808px;
}

.p-aboffice__ja,
.p-aboffice__en,
.p-aboffice__lead {
  --x: 0px;
  --w: 1920px;
}

.p-aboffice__ja {
  --y: 0px;
}

.p-aboffice__en {
  --y: 47px;
}

.p-aboffice__lead {
  --y: 133px;
}

/* Figma 695:1387 : 388px × 3 列・間 20px */

.p-aboffice__list {
  --x: 358px;
  --y: 213px;
  --w: 1204px;
  display: grid;
  grid-template-columns: repeat(3, 388px);
  gap: 20px;
}

.p-aboffice__card {
  min-height: 204px;
  padding: 20px 19px 25px 20px;
}

.p-aboffice__name,
.p-aboffice__address {
  margin-top: 8px;
}

/* ------------------------------------------------------------
   吉井財務グループ（Figma 697:1462）
   ------------------------------------------------------------ */

.p-abgroup {
  position: relative;
  height: 687px;
}

.p-abgroup__ja,
.p-abgroup__en,
.p-abgroup__lead {
  --x: 0px;
  --w: 1920px;
}

.p-abgroup__ja {
  --y: 0px;
}

.p-abgroup__en {
  --y: 47px;
}

.p-abgroup__lead {
  --y: 133px;
}

.p-abgroup .c-abtable {
  --y: 195px;
}

/* --- グループ・会社概要で共通の表（Figma 694:570 / 697:1473） --- */

.c-abtable {
  --x: 358px;
  --w: 1204px;
  padding-top: 16px;
}

.c-abtable__row {
  display: flex;
  gap: 16px;
  padding: 16px 64px;
  /* Figma の線は枠の内側（INSIDE）なので、border で高さが 1px 増えないよう影で描く */
}

.c-abtable__row:not(:last-child) {
  box-shadow: inset 0 -1px 0 #e2e8f0;
}

.c-abtable__head {
  flex: none;
  width: 340px;
}

.c-abtable__data {
  flex: 1;
  min-width: 0;
}

/* ------------------------------------------------------------
   会社概要（Figma 697:1498）＋ 顧問（745:178）
   ------------------------------------------------------------ */

.p-abprofile {
  position: relative;
  /* 会社概要の表は「設立」「代表」を 2 行にしたぶん 52px 伸びているので、
     Figma の 892px に同じだけ足している */
  /* 表の下端（133 + 590 = 723）から 100px 空けて終わる。
     顧問 Advisor のブロックを外したので、その分（旧 944px）は詰めている */
  height: 823px;
}

.p-abprofile__ja,
.p-abprofile__en {
  --x: 0px;
  --w: 1920px;
}

.p-abprofile__ja {
  --y: 0px;
}

.p-abprofile__en {
  --y: 47px;
}

.p-abprofile__table {
  --y: 133px;
}

/* ------------------------------------------------------------
   Flow・募集要項（トップページと共通のマークアップ・スタイル）
   以前は about だけ Flow を 871px（共通は 720px）にしていた。
   これは「Flow と募集要項の間が広い」という旧デザインに合わせたもの。
   キャリア支援準備金のバナーが Flow に入ったことで、その余白 151px が
   バナーの下に残って間延びして見えるため、共通の高さに揃えた。
   ステップの位置（--y: 410px）も共通の 420px に戻している。
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   PC: 本文を 1 項目ずつフェードイン（トップ・下層ページと同じ仕組み）
   ------------------------------------------------------------ */

@media (min-width: 1024px) {
  .js .p-abfv .p-abfv__upper {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-abfv .p-abfv__en {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-abfv .p-abfv__catch {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-abfv .p-abfv__lead {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-abfv .p-abfv__image {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-abfv.is-text-in .p-abfv__upper {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }

  .js .p-abfv.is-text-in .p-abfv__en {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .p-abfv.is-text-in .p-abfv__catch {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.3s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }

  .js .p-abfv.is-text-in .p-abfv__lead {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.45s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
  }

  .js .p-abfv.is-text-in .p-abfv__image {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.6s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-abfv .p-abfv__upper,
  .js .p-abfv.is-text-in .p-abfv__upper {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-abfv .p-abfv__en,
  .js .p-abfv.is-text-in .p-abfv__en {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-abfv .p-abfv__catch,
  .js .p-abfv.is-text-in .p-abfv__catch {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-abfv .p-abfv__lead,
  .js .p-abfv.is-text-in .p-abfv__lead {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-abfv .p-abfv__image,
  .js .p-abfv.is-text-in .p-abfv__image {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 1024px) {
  .js .p-abmsg .p-abmsg__ja {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-abmsg .p-abmsg__en {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-abmsg .p-abmsg__photo {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-abmsg .p-abmsg__sign {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-abmsg .p-abmsg__body {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-abmsg.is-text-in .p-abmsg__ja {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }

  .js .p-abmsg.is-text-in .p-abmsg__en {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .p-abmsg.is-text-in .p-abmsg__photo {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.3s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }

  .js .p-abmsg.is-text-in .p-abmsg__sign {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.45s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
  }

  .js .p-abmsg.is-text-in .p-abmsg__body {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.6s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-abmsg .p-abmsg__ja,
  .js .p-abmsg.is-text-in .p-abmsg__ja {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-abmsg .p-abmsg__en,
  .js .p-abmsg.is-text-in .p-abmsg__en {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-abmsg .p-abmsg__photo,
  .js .p-abmsg.is-text-in .p-abmsg__photo {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-abmsg .p-abmsg__sign,
  .js .p-abmsg.is-text-in .p-abmsg__sign {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-abmsg .p-abmsg__body,
  .js .p-abmsg.is-text-in .p-abmsg__body {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 年表（.p-abhist__list）は上のスクロール発火で別に出すので、ここには入れない */

@media (min-width: 1024px) {
  .js .p-abhist .p-abhist__upper {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-abhist .p-abhist__en {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-abhist.is-text-in .p-abhist__upper {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }

  .js .p-abhist.is-text-in .p-abhist__en {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-abhist .p-abhist__upper,
  .js .p-abhist.is-text-in .p-abhist__upper {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-abhist .p-abhist__en,
  .js .p-abhist.is-text-in .p-abhist__en {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 1024px) {
  .js .p-aboffice .p-aboffice__ja {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-aboffice .p-aboffice__en {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-aboffice .p-aboffice__lead {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-aboffice .p-aboffice__list {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-aboffice.is-text-in .p-aboffice__ja {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }

  .js .p-aboffice.is-text-in .p-aboffice__en {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .p-aboffice.is-text-in .p-aboffice__lead {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.3s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }

  .js .p-aboffice.is-text-in .p-aboffice__list {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.45s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-aboffice .p-aboffice__ja,
  .js .p-aboffice.is-text-in .p-aboffice__ja {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-aboffice .p-aboffice__en,
  .js .p-aboffice.is-text-in .p-aboffice__en {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-aboffice .p-aboffice__lead,
  .js .p-aboffice.is-text-in .p-aboffice__lead {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-aboffice .p-aboffice__list,
  .js .p-aboffice.is-text-in .p-aboffice__list {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 1024px) {
  .js .p-abgroup .p-abgroup__ja {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-abgroup .p-abgroup__en {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-abgroup .p-abgroup__lead {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-abgroup .c-abtable {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-abgroup.is-text-in .p-abgroup__ja {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }

  .js .p-abgroup.is-text-in .p-abgroup__en {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .p-abgroup.is-text-in .p-abgroup__lead {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.3s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }

  .js .p-abgroup.is-text-in .c-abtable {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.45s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-abgroup .p-abgroup__ja,
  .js .p-abgroup.is-text-in .p-abgroup__ja {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-abgroup .p-abgroup__en,
  .js .p-abgroup.is-text-in .p-abgroup__en {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-abgroup .p-abgroup__lead,
  .js .p-abgroup.is-text-in .p-abgroup__lead {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-abgroup .c-abtable,
  .js .p-abgroup.is-text-in .c-abtable {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 1024px) {
  .js .p-abprofile .p-abprofile__ja {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-abprofile .p-abprofile__en {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-abprofile .p-abprofile__table {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-abprofile.is-text-in .p-abprofile__ja {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }

  .js .p-abprofile.is-text-in .p-abprofile__en {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .p-abprofile.is-text-in .p-abprofile__table {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.3s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-abprofile .p-abprofile__ja,
  .js .p-abprofile.is-text-in .p-abprofile__ja {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-abprofile .p-abprofile__en,
  .js .p-abprofile.is-text-in .p-abprofile__en {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-abprofile .p-abprofile__table,
  .js .p-abprofile.is-text-in .p-abprofile__table {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   SP / タブレット（〜1023px）
   Figma の SP フレーム（07_about-sp / 745:1137）には、背景カーブ・Flow・
   募集要項・フッターしか置かれておらず、about 固有のセクションは未作成。
   そのため ai / numbers ページの SP と同じ組み方（上下 40px・左右 20px、
   2 カラムは縦積み）で並べている。
   ============================================================ */

@media (max-width: 1023px) {
  /* --- 背景カーブ（SP フレームの hero-bg-vector-lower 745:1138 : x-419 / y-147 / 1092x1058） --- */

  .p-bg--about {
    height: auto;
  }

  .p-bg__curve--ab1 {
    /* SP デザイン（Figma about-sp 745:1138）は PC と同じ形を 843x770 に縮めて
       反時計回りに 25.4° 回転させている（PC のように外接枠 1092x1058 へ引き伸ばすと
       傾きと形が変わる）。Figma の relativeTransform どおり、左上 (-419, 214.59) を
       回転の原点にして置く。
       値は 360px 幅のデザインを画面幅に比例させる（--bw = 画面幅）。
       左右どちらかの端を基準に固定すると、広い端末で図形の端（切り口）が画面内に入ってしまう */
    --bw: max(360px, 100vw);
    /* Figma の x は -419。そのままだと図形の右上の切り口（先端）が画面の右端から
       18px ほど内側に入って見えるので、24px 右へずらして先端を画面外に出している */
    left: calc(var(--bw) * -395 / 360);
    top: calc(var(--bw) * 214.59 / 360);
    width: calc(var(--bw) * 843.0236 / 360);
    height: calc(var(--bw) * 770.4473 / 360);
    transform: rotate(-25.3991deg);
    transform-origin: 0 0;
  }

  /* 2 本目（Figma about-sp 867:765）。1 本目と同じ形・傾きで、
     「吉井財務グループ」と「会社概要」の境界に掛ける（PC と同じ位置合わせ）。
     SP はページ高さが幅で変わるので、境界の位置（--ab-sec-top ＝ 会社概要の上端）は
     JS（initNumbersCurvePosition）が入れる。 */

  .p-bg__curve--ab2 {
    --bw: max(360px, 100vw);
    /* Figma の x は -419。そのままだと図形の右上の切り口（先端）が画面の右端から
       18px ほど内側に入って見えるので、24px 右へずらして先端を画面外に出している */
    left: calc(var(--bw) * -395 / 360);
    /* 画面中央での帯の中心は top から 207.2（--bw 360 換算）下に来るので、
       その分だけ上へ戻して中心を --ab-sec-top に合わせる */
    top: calc(var(--ab-sec-top, 6894px) - var(--bw) * 207.2 / 360);
    width: calc(var(--bw) * 843.0236 / 360);
    height: calc(var(--bw) * 770.4473 / 360);
    transform: rotate(-25.3991deg);
    transform-origin: 0 0;
  }

  .p-bg__trigger--ab2 {
    --trigger-y: var(--ab-sec-top, 6894px);
  }

  /* --- FV --- */

  .p-abfv {
    height: auto;
    padding: calc(var(--sp-header-h) + 60px) 20px 40px;
  }

  .p-abfv__en {
    margin-top: 14px;
  }

  .p-abfv__catch {
    margin-top: 30px;
  }

  .p-abfv__lead {
    margin-top: 20px;
  }

  .p-abfv__image {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 30px;
  }

  /* --- 各セクション共通 --- */

  .p-abmsg,
  .p-abhist,
  .p-aboffice,
  .p-abgroup,
  .p-abprofile {
    height: auto;
    padding: 40px 20px;
  }

  .p-abmsg__en,
  .p-aboffice__en,
  .p-abgroup__en,
  .p-abprofile__en {
    margin-top: 18px;
  }

  .p-aboffice__lead,
  .p-abgroup__lead {
    margin-top: 32px;
  }

  /* --- 代表メッセージ（SP は Figma 904:369 どおり 本文 → 写真 → 肩書き → 名前 の順） --- */

  .p-abmsg__photo {
    width: 100%;
    height: auto;
    /* Figma の SP は 320x400。PC の 394.4x493 と同じ比率なのでそのまま使える */
    aspect-ratio: 394.4/493;
    margin-top: 32px;
  }

  /* 写真の下 16px（Figma 904:373）。肩書きは 2 行（行送り 40px）にする */

  .p-abmsg__sign {
    width: auto;
    margin-top: 16px;
  }

  .p-abmsg__body {
    width: auto;
    margin-top: 30px;
  }

  .p-abmsg__body p + p {
    margin-top: 28px;
  }

  /* --- Professional Services --- */

  /* --- 沿革（SP は 見出し → 年表 の順に積む） --- */

  .p-abhist {
    display: flex;
    flex-direction: column;
  }

  .p-abhist__upper {
    order: 1;
  }

  .p-abhist__en {
    order: 2;
    width: auto;
    margin-top: 13px;
  }

  /* _sp.scss の .u-canvas リセット（position: static）が後に読まれるので、
     詳細度を上げて relative に戻す。static のままだと縦のラインが
     セクション基準になり、画面の左端に離れて出てしまう。 */

  .p-abhist .p-abhist__list {
    position: relative;
    order: 3;
    margin-top: 30px;
    margin-left: 0;
  }

  /* SP は横幅が狭いので、ラインと本文の間を PC の 24px から 16px に詰める。
     丸（12px）の中心は項目の左端 -5px + 6px = +1px の位置なので、
     ライン（2px）の左を 2px にすると丸の中心とそろう。 */

  .p-abhist__list::before {
    left: 2px;
  }

  .p-abhist__item {
    padding-left: 16px;
  }

  .p-abhist__item::before {
    left: -5px;
  }

  /* --- 拠点（1 列） --- */

  .p-aboffice__list {
    display: block;
    width: auto;
    margin-top: 30px;
  }

  .p-aboffice__card {
    min-height: 0;
  }

  .p-aboffice__card + .p-aboffice__card {
    margin-top: 16px;
  }

  /* --- 表（見出し → 内容を縦積み） --- */

  .c-abtable {
    width: auto;
    margin-top: 30px;
    padding-top: 8px;
  }

  .c-abtable__row {
    display: block;
    padding: 14px 20px;
  }

  .c-abtable__head {
    width: auto;
  }

  .c-abtable__data {
    margin-top: 4px;
  }

  /* --- 顧問 --- */
}

/* タブレット（768〜1023px）は .l-page に zoom 1.2 が掛かるので 100vw だと 1.2 倍に膨らむ。
   JS が入れる zoom 後の設計幅（--tablet-w）を基準にする */

@media (min-width: 768px) and (max-width: 1023px) {
  .p-bg__curve--ab1,
  .p-bg__curve--ab2 {
    --bw: var(--tablet-w, 640px);
  }
}

/* ============================================================
   hero — Figma 最新PC: y0 〜 1500
   ============================================================ */

/* ============================================================
   career — 業務とキャリアを知る（Figma career_pc 368:154 / career_sp 437:555）

   ・座標は 1920px キャンバス基準。見た目（文字サイズ・色）は HTML 側の
     Tailwind ユーティリティが持っている。ここは「Figma 実寸の配置」と
     「SP のフロー配置」だけ。
   ・Figma のフレームは 03_Training のコピーがベースになっていて、
     「04 外部研修」「キャリア形成をサポート」は研修ページの残り。
     このページには入れないので、その分（Figma の y3270〜5674）は詰めてある。
   ・ファイル名が _career.scss ではなく _career-page.scss なのは、
     sections/_career.scss（トップページの Career セクション）と
     Sass の名前空間が衝突して即エラーになるため。
   ============================================================ */

/* ------------------------------------------------------------
   背景（Figma 368:156「Vector 4」/ 368:157「Vector 5」）
   形はトップページのカーブ02 と同じ。2623.067 x 2397.556 を -7.9737deg 回転。
   Figma の relativeTransform どおり、回転前の左上を基準に置く。
   ------------------------------------------------------------ */

.p-bg--career {
  /* ＝ ブロブの --y ＋ 1738（.p-bg__blob-img の高さ）。about / numbers と同じ出し方。
     ページ全高ともぴったり一致する（.p-cta 600 ＋ フッター 278 ＝ 1738 − 860） */
  height: 5864px;
}

/* 募集要項の背景（青いブロブ）。全ページ共通で「募集要項の 860px 上」 */

.p-bg--career .p-bg__blob {
  --y: 4086px;
}

.p-bg__curve--c1,
.p-bg__curve--c2 {
  width: calc(var(--canvas-w) * 1.3661807);
  height: 2397.556px;
  transform: rotate(-7.9737deg);
  transform-origin: 0 0;
}

.p-bg__curve--c1 {
  left: calc(50% + var(--canvas-w) * -0.7380208);
  top: -228.13px;
  --curve-start: 0.25s;
}

/* 新デザイン（368:154）は研修ページ由来の残骸が整理されていて、Flow の上端まで
   Figma の y がそのままページの y になる。カーブ01（-228.13）と同じく
   368:157「Vector 5」の y をそのまま使える（旧フレームは 4252.87 で、
   ページを詰めたぶん手で置き直していた） */

.p-bg__curve--c2 {
  left: calc(50% + var(--canvas-w) * -0.7223958);
  top: 2483.87px;
}

.p-bg__trigger--c1 {
  --trigger-y: 600px;
}

/* ------------------------------------------------------------
   FV（Figma 487:1192 / 463:109）
   ------------------------------------------------------------ */

.p-cfv {
  position: relative;
  height: 976px;
}

.p-cfv__en {
  --x: 313px;
  --y: 236px;
}

.p-cfv__upper {
  --x: 313px;
  --y: 310px;
}

.p-cfv__catch {
  --x: 313px;
  --y: 374px;
  /* Figma は 717px だが、コピーが「行動のスピードが上がるほど」に変わって
     1 行目が 754px（58px × 13 文字）必要になったので広げている。
     イラストの実際の描画は x1086 から始まるので、ここまでは重ならない。 */
  --w: 760px;
}

.p-cfv__sub {
  --x: 313px;
  --y: 586px;
}

.p-cfv__lead {
  --x: 313px;
  --y: 686px;
  --w: 717px;
}

.p-cfv__image {
  --x: 973px;
  --y: 374px;
  --w: 655px;
  --h: 543px;
}

.p-cfv__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ------------------------------------------------------------
   キャリアパスと年収（Figma 437:212 / 437:635）
   ------------------------------------------------------------ */

.p-cpath {
  position: relative;
  /* 新デザイン（368:154）は研修ページ由来の残骸が整理されていて座標が連続している。
     「Advisor to Partner」が Figma y2768 なので、図の下端 2474 から 294px 空けて終わる */
  height: 1619px;
}

.p-cpath__upper,
.p-cpath__title,
.p-cpath__body {
  --x: 0px;
  --w: 1920px;
}

.p-cpath__upper {
  --y: 0px;
}

.p-cpath__title {
  --y: 62px;
  /* Figma のテキスト枠は 98px（1 行）。行送り 22px をそのまま入れると
     46px の文字が切れるので、枠の高さを line-height にする（.p-alead__title と同じ） */
  line-height: 98px;
}

.p-cpath__body {
  --y: 168px;
}

/* --- 図（Figma 437:635 : x282 / y1322 / 1382x1152）---
   中の要素は図の左上を基準にした自前の絶対配置（--fx / --fy）。
   .u-canvas を使わないのは、SP で座標系ごと捨てられるようにするため。 */

.p-cpath__fig {
  --x: 282px;
  --y: 348px;
  --w: 1382px;
  --h: 1051px;
}

.p-cpath__axis {
  position: absolute;
  left: 64px;
  top: 93px;
  width: 1200px;
  height: 786px;
}

.p-cpath__tag {
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--fw);
  height: 50px;
  /* Figma 368:629 / 368:630。角度だけ違う同じ帯 */
  background-image: linear-gradient(19.32deg, #91c0ff 2.03%, #efefef 52.86%, #e7f1ff 91.09%);
}

.p-cpath__tag--path {
  --fx: 0px;
  --fy: 0px;
  --fw: 160px;
}

.p-cpath__tag--salary {
  --fx: 1275px;
  --fy: 838px;
  --fw: 107px;
  background-image: linear-gradient(27.67deg, #91c0ff 2.03%, #efefef 52.86%, #e7f1ff 91.09%);
}

/* 1 ステップ分（イラスト・吹き出し・ピル・金額）。
   DOM の並びは SP の縦積み順なので、PC では z-index でイラストを前に出す */

.p-cpath__step {
  position: absolute;
  left: var(--fx);
  top: 0;
  width: 340px;
  height: 100%;
}

.p-cpath__step--01 {
  --fx: 121px;
  --step-color: #467dcc;
  --step-head: #1660c9;
}

.p-cpath__step--02 {
  --fx: 511px;
  --step-color: #f3a326;
  --step-head: #f3a326;
}

.p-cpath__step--03 {
  --fx: 901px;
  --step-color: #0590a9;
  --step-head: #0590a9;
}

.p-cpath__illust {
  position: absolute;
  left: var(--ilx);
  top: var(--ily);
  z-index: 1;
  width: var(--ilw);
  height: var(--ilh);
  border-radius: 0;
}

.p-cpath__step--01 .p-cpath__illust {
  --ilx: 0px;
  --ily: 457px;
  --ilw: 337px;
  --ilh: 395.76px;
  --iw: 99.95%;
  --ih: 105.82%;
  --iy: 1.17%;
}

.p-cpath__step--02 .p-cpath__illust {
  --ilx: -13px;
  --ily: 410px;
  --ilw: 357px;
  --ilh: 442px;
}

.p-cpath__step--03 .p-cpath__illust {
  --ilx: -9px;
  --ily: 362px;
  --ilw: 368px;
  --ilh: 490px;
  --ih: 112.62%;
  --iy: -9.22%;
}

/* 吹き出し。箱と尻尾を 1 パスで描いた SVG を背面に敷く（継ぎ目が出ない）。
   グラデーションは inc/svg-defs.html に objectBoundingBox で定義してあるので、
   箱の寸法が PC / SP で変わっても比率のまま追従する。 */

.p-cpath__balloon {
  position: absolute;
  left: 0;
  top: var(--bly);
  width: 100%;
  /* Figma の高さを下限にしつつ、本文が入り切らなければ伸ばす。
     ブラウザの折返しは Figma と完全には一致しないので、固定にすると溢れる */
  height: auto;
  min-height: var(--blh);
}

.p-cpath__step--01 .p-cpath__balloon {
  --bly: 252px;
  --blh: 311px;
}

.p-cpath__step--02 .p-cpath__balloon {
  --bly: 152px;
  --blh: 283px;
}

.p-cpath__step--03 .p-cpath__balloon {
  --bly: 0px;
  --blh: 336px;
}

.p-cpath__balloon-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.p-cpath__balloon-body {
  position: relative;
  padding: 39px 25px 32px 23px;
}

/* Step 03 は本文が長く、素のままだと Figma より 1 行増える（8 行）。
   Figma は「、」「。」に負のカーニングを掛けて 7 行に収めているので、
   こちらは palt（約物を詰める）と控えめな字間で同じ行数にする。 */

.p-cpath__step--03 .p-cpath__step-text {
  font-feature-settings: "palt" 1;
  letter-spacing: -0.015em;
  margin-right: -8px;
}

.p-cpath__step-head {
  display: flex;
  align-items: center;
  /* Figma の行は 30px（Step ラベル lh40 / 職位 lh46 だが枠は 30）。
     行送りのまま置くと吹き出しが 16px 伸びる */
  height: 30px;
  color: var(--step-head);
}

.p-cpath__step-no {
  flex: none;
  width: 102px;
}

.p-cpath__step-text {
  margin-top: 14px;
}

.p-cpath__pill {
  position: absolute;
  left: var(--plx);
  top: 935px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--plw);
  height: 40px;
  background-color: var(--step-color);
  white-space: nowrap;
}

.p-cpath__step--01 .p-cpath__pill {
  --plx: 60px;
  --plw: 230px;
}

.p-cpath__step--02 .p-cpath__pill {
  --plx: 48px;
  --plw: 230px;
}

.p-cpath__step--03 .p-cpath__pill {
  --plx: 38px;
  --plw: 300px;
}

/* 金額。数字は line-height 40px に対して 60〜80px なので上下にはみ出す。
   親に overflow / background-clip を付けないこと（切れる） */

.p-cpath__amount {
  position: absolute;
  left: var(--amx);
  top: 1004px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--step-color);
  white-space: nowrap;
}

.p-cpath__step--01 .p-cpath__amount {
  --amx: 73px;
}

.p-cpath__step--02 .p-cpath__amount {
  --amx: 53px;
}

.p-cpath__step--03 .p-cpath__amount {
  --amx: 39px;
}

.p-cpath__amount-num {
  line-height: 40px;
}

.p-cpath__step--01 .p-cpath__amount-num {
  font-size: 60px;
  letter-spacing: 1.8px;
}

.p-cpath__step--02 .p-cpath__amount-num {
  font-size: 70px;
  letter-spacing: 2.1px;
}

.p-cpath__step--03 .p-cpath__amount-num {
  font-size: 80px;
  letter-spacing: 2.4px;
}

/* ------------------------------------------------------------
   仕事の幅（Figma 368:667 / 368:668 / 368:669 ＋ カード 1057:787）
   ------------------------------------------------------------ */

.p-cfield {
  position: relative;
  height: 857px;
}

.p-cfield__upper,
.p-cfield__title,
.p-cfield__body {
  --x: 0px;
  --w: 1920px;
}

.p-cfield__upper {
  --y: 0px;
}

.p-cfield__title {
  --y: 81px;
}

.p-cfield__body {
  --y: 271px;
}

/* --- 業務カード 3 枚（Figma 1057:787 : x355 / y3232 / 1212x204）---
   意匠（角丸 10px・y-blue-grade）は HTML 側の Tailwind が持つ。
   ai / about の同じカードと揃えてある。 */

.p-cfield__cards {
  --x: 0px;
  --y: 464px;
  --w: 1920px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 24px;
}

.p-cfield__card {
  flex: none;
  width: 388px;
  /* 固定の height にすると、ブラウザの折返しが Figma と一致しないときに溢れる */
  min-height: 204px;
  padding: 20px 19px 25px 20px;
}

.p-cfield__card-text {
  margin-top: 8px;
}

/* ------------------------------------------------------------
   AI への導線（Figma career_pc 1057:789 : x409 / y3625 / 1104x346）
   ------------------------------------------------------------ */

.p-cai {
  position: relative;
  height: 437px;
}

.p-cai__banner {
  --x: 408px;
  --y: 0px;
  --w: 1104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 内側の余白は Figma の auto-layout 値（padding 48 / gap 20）ではなく、
     書き出した画像の実測に合わせている。上から
     20 ＋ 手書き135 ＋ 22 ＋ 本文64 ＋ 16 ＋ ボタン56 ＋ 33 ＝ 346 */
  min-height: 346px;
  padding: 20px 48px 33px;
  background-color: #1660c9;
  /* ホバーの色変化はボタンと同じテンポで送る */
  transition: background-color 0.5s ease;
}

/* 手書きのキャッチ＋下線。回転は SVG に焼き込んであるので CSS の transform は使わない
   （回転後のバウンディングボックスが広がって padding からはみ出すため）。
   枠は Figma のフレームと同じ 732x135 にして、SVG が下にはみ出すぶんは
   次の要素に重ねる（デザインどおり下線の尾が本文の左脇に来る）。 */

.p-cai__hand {
  width: 732px;
  height: 135px;
  /* img に display を直接書くと .u-sp の display:none（詳細度 0,1,0）に
     勝ってしまい、SP 用の画像が PC でも出る。表示側だけ明示する */
}

.p-cai__hand img {
  width: 100%;
  height: auto;
}

.p-cai__hand .u-pc {
  display: block;
}

.p-cai__text {
  margin-top: 22px;
}

.p-cai__btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 282px;
  height: 56px;
  margin-top: 16px;
  /* position は付けない。付けるとこの要素が ::after（＝当たり判定）の
     基準になってしまい、バナー全面に広げられなくなる */
  /* 枠線はデザインには無いが、ホバーで地が紺になるので形の手がかりとして置く。
     色は募集要項の「新卒採用 / 中途採用」と同じ #040e4e */
  border: 1px solid #040e4e;
  background-color: #fff;
  /* ホバーの色変化は募集要項の「新卒採用 / 中途採用」と同じ（0.5s ease で送る） */
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* ボタンだけでなく青いブロック全体をクリックできるようにする。
   リンクの入れ子は作れないので、ボタンの ::after をバナーいっぱいに
   広げている（stretched link）。基準は .p-cai__banner（PC は .u-canvas の
   absolute、SP は下の @media で relative を付けている）。
   ホバーもこの面で拾うので、ブロックのどこに乗せてもボタンの色が変わる。 */

.p-cai__btn::after {
  content: "";
  /* 絶対配置の基準は「基準要素の padding box」なので、
     inset: 0 でバナーの余白まで含めた青いブロック全面になる */
  position: absolute;
  inset: 0;
}

/* タッチ端末は :hover が残り続けることがあるので変えない（_cta.scss と同じ） */

@media (hover: hover) {
  /* ブロックのどこに乗せても、地が少し白っぽい青になる。
     :hover は子孫にポインタがあるときも当たるので、
     ::after（当たり判定）の上でもそのまま効く */

  .p-cai__banner:hover {
    background-color: #3978d1;
  }

  /* Tailwind の text-y-blue（詳細度 0,1,0）に勝たせる */

  .p-cai__btn:hover {
    background-color: #040e4e;
    color: #fff;
  }
}

/* ------------------------------------------------------------
   PC: 本文を 1 項目ずつフェードイン（他ページと同じ仕組み）
   ------------------------------------------------------------ */

@media (min-width: 1024px) {
  .js .p-cfv .p-cfv__en {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-cfv .p-cfv__upper {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-cfv .p-cfv__catch {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-cfv .p-cfv__sub {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-cfv .p-cfv__lead {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-cfv .p-cfv__image {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-cfv.is-text-in .p-cfv__en {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }

  .js .p-cfv.is-text-in .p-cfv__upper {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .p-cfv.is-text-in .p-cfv__catch {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.3s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }

  .js .p-cfv.is-text-in .p-cfv__sub {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.45s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
  }

  .js .p-cfv.is-text-in .p-cfv__lead {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.6s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
  }

  .js .p-cfv.is-text-in .p-cfv__image {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.75s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.75s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-cfv .p-cfv__en,
  .js .p-cfv.is-text-in .p-cfv__en {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-cfv .p-cfv__upper,
  .js .p-cfv.is-text-in .p-cfv__upper {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-cfv .p-cfv__catch,
  .js .p-cfv.is-text-in .p-cfv__catch {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-cfv .p-cfv__sub,
  .js .p-cfv.is-text-in .p-cfv__sub {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-cfv .p-cfv__lead,
  .js .p-cfv.is-text-in .p-cfv__lead {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-cfv .p-cfv__image,
  .js .p-cfv.is-text-in .p-cfv__image {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 1024px) {
  .js .p-cpath .p-cpath__upper {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-cpath .p-cpath__title {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-cpath .p-cpath__body {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-cpath.is-text-in .p-cpath__upper {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }

  .js .p-cpath.is-text-in .p-cpath__title {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .p-cpath.is-text-in .p-cpath__body {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.3s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-cpath .p-cpath__upper,
  .js .p-cpath.is-text-in .p-cpath__upper {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-cpath .p-cpath__title,
  .js .p-cpath.is-text-in .p-cpath__title {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-cpath .p-cpath__body,
  .js .p-cpath.is-text-in .p-cpath__body {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 図は「枠線 → イラスト＋金額 → 吹き出し」を 1 ステップずつ、左から右へ順に出す。
     枠線 → 450万円のイラスト → Step 01 の吹き出し → 750万円のイラスト → Step 02 …
   ・7 コマなので reveal.stagger（1 項目 = 1 コマ）では組めない。
     ここだけ --cpath-delay を手で振って同じ見た目のトランジションを当てている。
   ・軸線とラベル（枠線）は opacity だけで出す。細い線を translateY で動かすと
     サブピクセルにまたがって点滅して見えるため。
   ・PC 限定なのは他セクションと同じ理由（SP はセクション単位の演出が担当） */

@media (min-width: 1024px) {
  .js .p-cpath__fig .p-cpath__axis,
  .js .p-cpath__fig .p-cpath__tag {
    opacity: 0;
  }

  .js .p-cpath__fig .p-cpath__illust,
  .js .p-cpath__fig .p-cpath__pill,
  .js .p-cpath__fig .p-cpath__amount,
  .js .p-cpath__fig .p-cpath__balloon {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-cpath__fig.is-text-in .p-cpath__axis,
  .js .p-cpath__fig.is-text-in .p-cpath__tag {
    opacity: 1;
    transition: opacity 0.7s ease;
  }

  .js .p-cpath__fig.is-text-in .p-cpath__illust,
  .js .p-cpath__fig.is-text-in .p-cpath__pill,
  .js .p-cpath__fig.is-text-in .p-cpath__amount,
  .js .p-cpath__fig.is-text-in .p-cpath__balloon {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease var(--cpath-delay, 0s), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--cpath-delay, 0s);
  }

  .js .p-cpath__fig {
    /* 枠線が出てから 0.4s 後に Step 01 を始める。
       ステップ内は イラスト → 吹き出し を 0.5s、
       ステップ間（前の吹き出し → 次のイラスト）は 0.7s 空ける */
  }

  .js .p-cpath__fig .p-cpath__step--01 .p-cpath__illust,
  .js .p-cpath__fig .p-cpath__step--01 .p-cpath__pill,
  .js .p-cpath__fig .p-cpath__step--01 .p-cpath__amount {
    --cpath-delay: 0.4s;
  }

  .js .p-cpath__fig .p-cpath__step--01 .p-cpath__balloon {
    --cpath-delay: 0.9s;
  }

  .js .p-cpath__fig .p-cpath__step--02 .p-cpath__illust,
  .js .p-cpath__fig .p-cpath__step--02 .p-cpath__pill,
  .js .p-cpath__fig .p-cpath__step--02 .p-cpath__amount {
    --cpath-delay: 1.6s;
  }

  .js .p-cpath__fig .p-cpath__step--02 .p-cpath__balloon {
    --cpath-delay: 2.1s;
  }

  .js .p-cpath__fig .p-cpath__step--03 .p-cpath__illust,
  .js .p-cpath__fig .p-cpath__step--03 .p-cpath__pill,
  .js .p-cpath__fig .p-cpath__step--03 .p-cpath__amount {
    --cpath-delay: 2.8s;
  }

  .js .p-cpath__fig .p-cpath__step--03 .p-cpath__balloon {
    --cpath-delay: 3.3s;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-cpath__fig .p-cpath__axis,
  .js .p-cpath__fig .p-cpath__tag,
  .js .p-cpath__fig .p-cpath__illust,
  .js .p-cpath__fig .p-cpath__pill,
  .js .p-cpath__fig .p-cpath__amount,
  .js .p-cpath__fig .p-cpath__balloon,
  .js .p-cpath__fig.is-text-in .p-cpath__axis,
  .js .p-cpath__fig.is-text-in .p-cpath__tag,
  .js .p-cpath__fig.is-text-in .p-cpath__illust,
  .js .p-cpath__fig.is-text-in .p-cpath__pill,
  .js .p-cpath__fig.is-text-in .p-cpath__amount,
  .js .p-cpath__fig.is-text-in .p-cpath__balloon {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 1024px) {
  .js .p-cfield .p-cfield__upper {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-cfield .p-cfield__title {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-cfield .p-cfield__body {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-cfield .p-cfield__cards {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-cfield.is-text-in .p-cfield__upper {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }

  .js .p-cfield.is-text-in .p-cfield__title {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .p-cfield.is-text-in .p-cfield__body {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.3s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }

  .js .p-cfield.is-text-in .p-cfield__cards {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.45s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-cfield .p-cfield__upper,
  .js .p-cfield.is-text-in .p-cfield__upper {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-cfield .p-cfield__title,
  .js .p-cfield.is-text-in .p-cfield__title {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-cfield .p-cfield__body,
  .js .p-cfield.is-text-in .p-cfield__body {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-cfield .p-cfield__cards,
  .js .p-cfield.is-text-in .p-cfield__cards {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 1024px) {
  .js .p-cai .p-cai__banner {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-cai.is-text-in .p-cai__banner {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-cai .p-cai__banner,
  .js .p-cai.is-text-in .p-cai__banner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* reveal.stagger は transition を「まとめて」書くので、上で .p-cai__banner に
   付けた background-color のトランジションが登場演出のあと消えてしまう
   （.js .p-cai.is-text-in .p-cai__banner のほうが詳細度が高い）。
   同じセレクタ・同じ詳細度で後ろに置き、3 つまとめて宣言し直す。 */

@media (min-width: 1024px) {
  .js .p-cai.is-text-in .p-cai__banner {
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.5s ease;
  }
}

/* ============================================================
   SP / タブレット（〜1023px）
   PC の絶対配置を解除してフローに戻す。
   「キャリアパスと年収」だけ SP デザイン（Figma 437:555）がある。
   FV と「仕事の領域」は ai / about と同じ流儀（上下 40px・左右 20px）。
   ============================================================ */

@media (max-width: 1023px) {
  /* --- 背景カーブ --- */

  .p-bg--career {
    height: auto;
  }

  /* 形・傾きは他ページの SP に合わせる（PC の浅い角度を 360px 幅に持ち込むと
     帯が本文を横切ってしまう）。色だけこのページのものを使う。 */

  .p-bg__curve--c1,
  .p-bg__curve--c2 {
    --bw: max(360px, 100vw);
    left: calc(var(--bw) * -395 / 360);
    width: calc(var(--bw) * 843.0236 / 360);
    height: calc(var(--bw) * 770.4473 / 360);
    transform: rotate(-25.3991deg);
    transform-origin: 0 0;
  }

  .p-bg__curve--c1 {
    top: calc(var(--bw) * 214.59 / 360);
  }

  /* 2 本目は AI バナーの上に掛ける。SP はページ高さが幅で変わるので、
     セクションの位置（--c-sec-top ＝ .p-cai の offsetTop）は
     JS（initNumbersCurvePosition）が入れる。
     位置は Figma の座標ではなく「書き出した画像で帯が実際に出ている範囲」で
     合わせている。外接矩形は 1092x1058 と大きいが、実際に色が付くのは
     その中の細い斜めの帯なので、ノードの y からは追えないため。
       デザイン（360px 幅）… 帯は y4034〜4891、バナー（1159:987）は y4693
       → バナー上端の 659px 上から始まり、198px 下で終わる
     .p-cai はバナーの 40px 上から始まるので、セクション基準では
     CSS の top が 346.82px 上。 */

  .p-bg__curve--c2 {
    top: calc(var(--c-sec-top, 4300px) - var(--bw) * 346.82 / 360);
  }

  /* --- セクション共通 --- */

  .p-cfv {
    height: auto;
    padding: calc(var(--sp-header-h) + 60px) 20px 40px;
  }

  .p-cpath,
  .p-cfield {
    height: auto;
    padding: 40px 20px;
  }

  /* Figma SP のバナーは x20（1159:987）なので、他のセクションと同じ左右 20px */

  .p-cai {
    height: auto;
    padding: 40px 20px;
  }

  /* --- FV --- */

  .p-cfv__upper {
    margin-top: 8px;
  }

  .p-cfv__catch {
    width: auto;
    margin-top: 24px;
  }

  .p-cfv__sub {
    margin-top: 24px;
  }

  .p-cfv__lead {
    width: auto;
    margin-top: 20px;
  }

  .p-cfv__image {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 30px;
    /* 2x 書き出し（1310px）なので、等倍相当で頭打ちにする */
    max-width: 655px;
    margin-inline: auto;
  }

  .p-cfv__image img {
    height: auto;
  }

  /* --- キャリアパスと年収（Figma 437:555）--- */

  .p-cpath__title {
    margin-top: 6px;
    line-height: 56px;
  }

  .p-cpath__body {
    margin-top: 8px;
  }

  /* 吹き出しは Figma で 340px 幅（画面の左右 10px まで）なので、
     セクションの 20px の余白から 10px だけ外へ出す */

  .p-cpath__fig {
    position: static;
    width: auto;
    height: auto;
    margin: 24px -10px 0;
  }

  .p-cpath__axis,
  .p-cpath__tag {
    display: none;
  }

  /* --- SP はスクロールに合わせて 1 つずつ出す ---
     PC は図ぜんぶを 1 回の発火で順番に出すが（上の --cpath-delay）、
     SP は図が縦に 2000px 近く伸びるので、固定の遅延だと画面外で出終わってしまう。
     JS（initScrollReveal）が要素ごとに画面に入った時点で .is-revealed を付ける。
     ・軸線とラベルは SP では非表示なので対象外
     ・.js 配下に置く＝ JS が落ちたら最初から全部見える（head.html の安全弁） */

  .js .p-cpath__fig [data-scroll-reveal] {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-cpath__fig [data-scroll-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .p-cpath__step {
    position: static;
    width: auto;
    height: auto;
  }

  .p-cpath__step + .p-cpath__step {
    margin-top: 40px;
  }

  /* 枠は Figma SP の実寸。2x 書き出しなのでこれ以上広げるとぼける。
     中の img は PC と同じ --iw / --ih / --iy（％なので枠に追従する）で切り抜く */

  .p-cpath__illust {
    /* static にすると .u-photo の絶対配置された img が枠から外れて巨大化する。
       relative のまま（＝絶対配置の基準を保ったまま）フローに戻す */
    position: relative;
    left: auto;
    top: auto;
    width: var(--ilw);
    height: var(--ilh);
    margin: 0 auto;
  }

  .p-cpath__step--01 .p-cpath__illust {
    --ilw: 191px;
    --ilh: 225px;
  }

  .p-cpath__step--02 .p-cpath__illust {
    --ilw: 185px;
    --ilh: 229px;
  }

  .p-cpath__step--03 .p-cpath__illust {
    --ilw: 199px;
    --ilh: 264px;
  }

  /* SP は幅がまちまちなので、Figma の高さを下限にせず中身に合わせる。
     ただし幅は 340px（Figma SP の実寸）で頭打ちにする。
     背景の SVG は preserveAspectRatio="none" なので、広げると
     角丸と尻尾が横に引き伸ばされて歪む（タブレット帯で顕著）。 */

  .p-cpath__balloon {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    max-width: 340px;
    height: auto;
    min-height: 0;
    margin: -26px auto 0;
  }

  .p-cpath__balloon-body {
    padding: 39px 25px 34px 23px;
  }

  .p-cpath__step-no {
    width: 75px;
  }

  .p-cpath__pill {
    position: static;
    width: var(--plw);
    margin: 12px auto 0;
  }

  /* 数字は line-height 40px に対して 52〜80px なので、行ボックスの外へ
     上下 15〜20px はみ出す。ピルとの間隔は Figma の実測に合わせて
     ステップごとに変える（01: 10px / 02: 26px / 03: 23px） */

  .p-cpath__amount {
    position: static;
    justify-content: center;
    margin-top: 8px;
  }

  .p-cpath__step--02 .p-cpath__amount {
    margin-top: 33px;
  }

  .p-cpath__step--03 .p-cpath__amount {
    margin-top: 28px;
    margin-bottom: 32px;
  }

  /* Figma SP は 1 つ目だけ 181x39.4 / 文字 14px。2・3 つ目は PC と同じ */

  .p-cpath__step--01 .p-cpath__pill {
    --plw: 181px;
    height: 39.4px;
  }

  .p-cpath__step--01 .p-cpath__amount-num {
    font-size: 52px;
  }

  /* --- 仕事の幅（Figma SP 1159:949 / カード 1159:955・976・981）--- */

  .p-cfield__title {
    margin-top: 6px;
  }

  .p-cfield__body {
    margin-top: 24px;
  }

  /* Advisor ブロックの下端 3885 → カード 3931 ＝ 46px、カード間 24px */

  .p-cfield__cards {
    display: block;
    margin-top: 46px;
  }

  .p-cfield__card {
    width: auto;
    min-height: 206px;
    padding: 20px 19px 25px 20px;
  }

  .p-cfield__card + .p-cfield__card {
    margin-top: 24px;
  }

  /* --- AI バナー（Figma SP 1159:987 : 320x478）---
     上から 49 ＋ 手書き135 ＋ 20 ＋ 本文149 ＋ 26 ＋ ボタン56 ＋ 43 ＝ 478 */

  /* .u-canvas の static リセット（_sp.scss・同じ詳細度で後勝ち）を打ち消すため
     親クラスを足して 0,2,0 にしている。relative が無いと、ボタンの ::after
     （＝ブロック全面の当たり判定）が基準を失って別の祖先まで広がる */

  .p-cai .p-cai__banner {
    position: relative;
  }

  .p-cai__banner {
    width: auto;
    min-height: 478px;
    padding: 49px 19px 43px;
  }

  /* Figma SP では手書き（1159:988）だけ左右インセットが 11px で、
     本文とボタン（1159:1069）は 19px。バナーの padding は 19px に合わせて
     あるので、手書きだけ左右 8px ずつはみ出させて 298px に戻す */

  .p-cai__hand {
    width: calc(100% + 16px);
    max-width: 298px;
    height: auto;
    margin-inline: -8px;
  }

  .p-cai__hand .u-pc {
    display: none;
  }

  .p-cai__hand .u-sp {
    display: block;
  }

  .p-cai__text {
    margin-top: 20px;
  }

  .p-cai__btn {
    width: 100%;
    max-width: 282px;
    margin-top: 26px;
  }
}

/* 動きを減らす設定のときは、SP のスクロール連動も最初から表示にする */

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .js .p-cpath__fig [data-scroll-reveal],
  .js .p-cpath__fig [data-scroll-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* タブレット（768〜1023px）は .l-page に zoom 1.2 が掛かるので 100vw だと 1.2 倍に膨らむ。
   JS が入れる zoom 後の設計幅（--tablet-w）を基準にする */

@media (min-width: 768px) and (max-width: 1023px) {
  .p-bg__curve--c1,
  .p-bg__curve--c2 {
    --bw: var(--tablet-w, 640px);
  }

  /* カードの min-height は 320px 幅のデザイン値。カラムが広いタブレットでは
     本文が 3 行で収まり、下に 70〜90px の空きが残るので内容なりにする */

  .p-cfield__card {
    min-height: 0;
  }
}

/* ============================================================
   hero — Figma 最新PC: y0 〜 1500
   ============================================================ */

/* ============================================================
   growth — 研修と成長（Figma growth-pc 334:289 / 1922x7729）

   ・ファイル名が _growth.scss ではなく _growth-page.scss なのは、
     sections/_growth.scss（トップページの Growth セクション）と
     Sass の名前空間が衝突して即エラーになるため（career と同じ事情）。

   ・SP デザインは未作成。1023px 以下は他の下層ページ（ai / about / career）と
     同じ流儀で、絶対配置を解除して縦積み・上下 40px / 左右 20px にしてある。
     デザインが出たら採寸し直すこと。
   ・座標は 1920px キャンバス基準。文字サイズ・色は HTML 側の Tailwind が持つ。

   セクションの高さ（Figma の y をそのまま使える）
     .p-gfv       0    – 1015
     .p-gtrain    1015 – 4992
     .p-gsupport  4992 – 5663
     .p-flow      5663 – 6720 （共通・1057 固定）
     .p-cta       6720 – 7320 （共通・600 固定）
     フッター      7320 – 7598
   ============================================================ */

/* ------------------------------------------------------------
   背景（Figma 334:297「Vector 4」/ 361:140「Vector 5」）
   形・回転・塗りは career と同一。縦位置だけ違う。
   ------------------------------------------------------------ */

.p-bg--growth {
  /* ＝ ブロブの --y ＋ 1738（.p-bg__blob-img の高さ）。他ページと同じ出し方 */
  height: 7638px;
}

.p-bg--growth .p-bg__blob {
  --y: 5860px;
}

.p-bg__curve--g1,
.p-bg__curve--g2 {
  width: calc(var(--canvas-w) * 1.3661807);
  height: 2397.556px;
  transform: rotate(-7.9737deg);
  transform-origin: 0 0;
}

.p-bg__curve--g1 {
  left: calc(50% + var(--canvas-w) * -0.7380208);
  top: -328.13px;
  --curve-start: 0.25s;
}

.p-bg__curve--g2 {
  left: calc(50% + var(--canvas-w) * -0.7223958);
  top: 4252.87px;
}

.p-bg__trigger--g1 {
  --trigger-y: 600px;
}

/* ------------------------------------------------------------
   FV（Figma 334:322 ほか / イラスト 368:147）
   ------------------------------------------------------------ */

.p-gfv {
  position: relative;
  height: 1015px;
}

.p-gfv__en {
  --x: 313px;
  --y: 236px;
}

.p-gfv__upper {
  --x: 313px;
  --y: 310px;
}

.p-gfv__catch {
  --x: 313px;
  --y: 374px;
  --w: 717px;
}

.p-gfv__sub {
  --x: 320px;
  --y: 677px;
}

.p-gfv__lead {
  --x: 320px;
  --y: 777px;
  --w: 514px;
}

.p-gfv__image {
  --x: 935px;
  --y: 339px;
  --w: 554px;
  --h: 485px;
}

.p-gfv__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ------------------------------------------------------------
   研修制度（Figma 334:1015 ＋ ブロック 01〜04）
   見出し 3 点の相対位置（0 / 62 / 168）は他の下層ページと共通。
   ------------------------------------------------------------ */

.p-gtrain {
  position: relative;
  height: 3977px;
}

.p-gtrain__upper,
.p-gtrain__ja,
.p-gtrain__lead {
  --x: 0px;
  --w: 1920px;
}

.p-gtrain__upper {
  --y: 0px;
}

.p-gtrain__ja {
  --y: 62px;
  /* 46px の文字が収まる高さ。Figma のテキストボックス（98px）に合わせる */
  line-height: 98px;
}

.p-gtrain__lead {
  --y: 168px;
}

/* --- 研修ブロック 01〜04 ---
   4 つとも同じ組み方で 865px おきに並ぶ（Figma: 1438 / 2303 / 3168 / 4033）。
   ブロックの中は「番号 → タイトル → カード → 本文／写真 → 装飾」。 */

.p-gtrain__blocks {
  --x: 0px;
  --y: 423px;
  --w: 1920px;
}

.p-gtrain__block {
  position: absolute;
  left: 0;
  width: 100%;
  height: 865px;
}

.p-gtrain__block--01 {
  top: 0px;
}

.p-gtrain__block--02 {
  top: 865px;
}

.p-gtrain__block--03 {
  top: 1730px;
}

.p-gtrain__block--04 {
  top: 2595px;
}

/* 100px の数字はグラデーションの塗り抜き。
   background-clip: text は要素のボックス内しか描かないので、
   line-height で文字が収まる高さ（120px）を確保してから
   top を負にして Figma の中心位置（箱 124x60 の中央）に合わせる。 */

.p-gtrain__no {
  position: absolute;
  left: 0;
  top: -30px;
  width: 100%;
  font-size: 100px;
  line-height: 120px;
  letter-spacing: 4px;
  text-align: center;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.p-gtrain__no--blue {
  background-image: linear-gradient(115.6439deg, #b0d8ff 3.1197%, #daeafb 48.765%, #f2f5f8 100%);
}

.p-gtrain__no--green {
  background-image: linear-gradient(-47.5686deg, #eeefed 2.208%, #e3f7d8 96.467%);
}

.p-gtrain__title {
  position: absolute;
  left: 0;
  top: 90px;
  width: 100%;
  line-height: 60px;
}

/* カードの下地。Figma は mix-blend-mode: multiply なので、
   背景のカーブが透けて見える（白地では見た目が変わらない） */

.p-gtrain__card {
  position: absolute;
  left: calc(50% - 640px);
  top: 225px;
  width: 1280px;
  height: 520px;
  border-radius: 30px;
  mix-blend-mode: multiply;
}

.p-gtrain__card--blue {
  background-image: linear-gradient(119.7603deg, #b0d8ff 3.1197%, #daeafb 48.765%, #f2f5f8 100%);
}

.p-gtrain__card--green {
  background-image: linear-gradient(-42.5659deg, #eeefed 2.208%, #e3f7d8 96.467%);
}

/* PC では位置を持たない箱。中の絶対配置は .p-gtrain__block を基準にする。
   SP ではここがカードそのものになる（下の @media を参照） */

.p-gtrain__inner {
  position: static;
}

.p-gtrain__body {
  position: absolute;
  top: 332px;
  width: 480px;
  height: 317px;
}

.p-gtrain__en {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.p-gtrain__head {
  position: absolute;
  left: 0;
  top: 49px;
  width: 467px;
}

.p-gtrain__text {
  position: absolute;
  left: 0;
  top: 166px;
  width: 100%;
}

/* .u-photo は使わない。あちらは img を position: absolute で置くので、
   SP で枠を static に戻したときに img が親から外れて暴れる（CLAUDE.md の既知の罠）。 */

.p-gtrain__photo {
  position: absolute;
  top: 332px;
  width: 480px;
  height: 320px;
  overflow: hidden;
  border-radius: 20px;
}

.p-gtrain__photo img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 01・03 は 写真が左・本文が右、02・04 はその逆 */

.p-gtrain__block--01 .p-gtrain__photo,
.p-gtrain__block--03 .p-gtrain__photo {
  left: calc(50% - 521px);
}

.p-gtrain__block--01 .p-gtrain__body,
.p-gtrain__block--03 .p-gtrain__body {
  left: calc(50% + 43px);
}

.p-gtrain__block--02 .p-gtrain__body,
.p-gtrain__block--04 .p-gtrain__body {
  left: calc(50% - 521px);
}

.p-gtrain__block--02 .p-gtrain__photo,
.p-gtrain__block--04 .p-gtrain__photo {
  left: calc(50% + 43px);
}

/* 装飾イラスト（4 箇所とも同じ画像）。ブロックごとに位置が違う */

.p-gtrain__deco {
  position: absolute;
  width: 292.27px;
  height: 256px;
}

.p-gtrain__deco img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ブロック先頭（＝番号）からの相対位置 */

.p-gtrain__block--01 .p-gtrain__deco {
  left: calc(50% + 385px);
  top: 676px;
}

.p-gtrain__block--02 .p-gtrain__deco {
  left: calc(50% - 667px);
  top: 676px;
}

.p-gtrain__block--03 .p-gtrain__deco {
  left: calc(50% + 445px);
  top: 609px;
}

.p-gtrain__block--04 .p-gtrain__deco {
  left: calc(50% - 735px);
  top: 629px;
}

/* ------------------------------------------------------------
   キャリア形成をサポート（Figma 361:44 / 361:128・139・134）
   ------------------------------------------------------------ */

.p-gsupport {
  position: relative;
  height: 671px;
}

.p-gsupport__upper,
.p-gsupport__ja,
.p-gsupport__lead {
  --x: 0px;
  --w: 1920px;
}

.p-gsupport__upper {
  --y: 0px;
}

.p-gsupport__ja {
  --y: 62px;
  line-height: 98px;
}

.p-gsupport__lead {
  --y: 168px;
}

.p-gsupport__points {
  --x: 321px;
  --y: 336px;
  --w: 1281px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

/* 下地の #BDD0EA（Figma スタイル grade-001）にグラデーションを重ねたもの。
   トップページのカーブ01 と同じ配色。 */

.p-gsupport__point {
  flex: none;
  width: 410px;
  /* 固定の height にすると、ブラウザの折返しが Figma と一致しないときに溢れる */
  min-height: 280px;
  padding: 29px;
  border-radius: 20px;
  background-color: #bdd0ea;
  background-image: linear-gradient(37.4605deg, #91c0ff 2.0321%, #efefef 52.857%, #e7f1ff 91.085%);
}

.p-gsupport__point-title {
  margin-top: 2px;
}

.p-gsupport__point-text {
  margin-top: 8px;
}

/* ------------------------------------------------------------
   PC: 本文を 1 項目ずつフェードイン（他ページと同じ仕組み）
   ------------------------------------------------------------ */

@media (min-width: 1024px) {
  .js .p-gfv .p-gfv__en {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-gfv .p-gfv__upper {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-gfv .p-gfv__catch {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-gfv .p-gfv__sub {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-gfv .p-gfv__lead {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-gfv .p-gfv__image {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-gfv.is-text-in .p-gfv__en {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }

  .js .p-gfv.is-text-in .p-gfv__upper {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .p-gfv.is-text-in .p-gfv__catch {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.3s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }

  .js .p-gfv.is-text-in .p-gfv__sub {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.45s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
  }

  .js .p-gfv.is-text-in .p-gfv__lead {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.6s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
  }

  .js .p-gfv.is-text-in .p-gfv__image {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.75s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.75s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-gfv .p-gfv__en,
  .js .p-gfv.is-text-in .p-gfv__en {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-gfv .p-gfv__upper,
  .js .p-gfv.is-text-in .p-gfv__upper {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-gfv .p-gfv__catch,
  .js .p-gfv.is-text-in .p-gfv__catch {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-gfv .p-gfv__sub,
  .js .p-gfv.is-text-in .p-gfv__sub {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-gfv .p-gfv__lead,
  .js .p-gfv.is-text-in .p-gfv__lead {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-gfv .p-gfv__image,
  .js .p-gfv.is-text-in .p-gfv__image {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 1024px) {
  .js .p-gtrain .p-gtrain__upper {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-gtrain .p-gtrain__ja {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-gtrain .p-gtrain__lead {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-gtrain.is-text-in .p-gtrain__upper {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }

  .js .p-gtrain.is-text-in .p-gtrain__ja {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .p-gtrain.is-text-in .p-gtrain__lead {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.3s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-gtrain .p-gtrain__upper,
  .js .p-gtrain.is-text-in .p-gtrain__upper {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-gtrain .p-gtrain__ja,
  .js .p-gtrain.is-text-in .p-gtrain__ja {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-gtrain .p-gtrain__lead,
  .js .p-gtrain.is-text-in .p-gtrain__lead {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 研修ブロックはブロック単位で発火させる（4 つ分まとめて遅延を振ると
   下のブロックが画面外で出終わってしまうため）。
   カード枠（.p-gtrain__card）は対象に入れない。mix-blend-mode: multiply は
   opacity が 1 未満の間だけ合成グループが切れるので、演出の最後で色がパッと変わる。 */

@media (min-width: 1024px) {
  .js .p-gtrain__block .p-gtrain__no {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-gtrain__block .p-gtrain__title {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-gtrain__block .p-gtrain__body {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-gtrain__block .p-gtrain__photo {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-gtrain__block .p-gtrain__deco {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-gtrain__block.is-text-in .p-gtrain__no {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }

  .js .p-gtrain__block.is-text-in .p-gtrain__title {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.12s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
  }

  .js .p-gtrain__block.is-text-in .p-gtrain__body {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.24s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.24s;
  }

  .js .p-gtrain__block.is-text-in .p-gtrain__photo {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.36s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.36s;
  }

  .js .p-gtrain__block.is-text-in .p-gtrain__deco {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.48s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.48s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-gtrain__block .p-gtrain__no,
  .js .p-gtrain__block.is-text-in .p-gtrain__no {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-gtrain__block .p-gtrain__title,
  .js .p-gtrain__block.is-text-in .p-gtrain__title {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-gtrain__block .p-gtrain__body,
  .js .p-gtrain__block.is-text-in .p-gtrain__body {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-gtrain__block .p-gtrain__photo,
  .js .p-gtrain__block.is-text-in .p-gtrain__photo {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-gtrain__block .p-gtrain__deco,
  .js .p-gtrain__block.is-text-in .p-gtrain__deco {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 1024px) {
  .js .p-gsupport .p-gsupport__upper {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-gsupport .p-gsupport__ja {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-gsupport .p-gsupport__lead {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-gsupport .p-gsupport__points {
    opacity: 0;
    transform: translateY(24px);
  }

  .js .p-gsupport.is-text-in .p-gsupport__upper {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  }

  .js .p-gsupport.is-text-in .p-gsupport__ja {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .p-gsupport.is-text-in .p-gsupport__lead {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.3s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }

  .js .p-gsupport.is-text-in .p-gsupport__points {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease 0.45s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
  }
}

/* 動きを減らす設定のときは最初から表示する。
   .is-text-in 側（詳細度が 1 つ高い）にも同じ指定を出しておかないと
   トランジションだけが残ってしまうので、両方に当てている。 */

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .p-gsupport .p-gsupport__upper,
  .js .p-gsupport.is-text-in .p-gsupport__upper {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-gsupport .p-gsupport__ja,
  .js .p-gsupport.is-text-in .p-gsupport__ja {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-gsupport .p-gsupport__lead,
  .js .p-gsupport.is-text-in .p-gsupport__lead {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .p-gsupport .p-gsupport__points,
  .js .p-gsupport.is-text-in .p-gsupport__points {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   SP / タブレット（〜1023px）
   SP デザインが無いので、他の下層ページと同じ「縦積み・上下40px・左右20px」。
   ============================================================ */

@media (max-width: 1023px) {
  /* --- 背景カーブ ---
     形・傾きは他ページの SP に合わせる（PC の浅い角度を 360px 幅に持ち込むと
     帯が本文を横切ってしまう）。色はこのページのまま。 */

  .p-bg--growth {
    height: auto;
  }

  .p-bg__curve--g1,
  .p-bg__curve--g2 {
    --bw: max(360px, 100vw);
    left: calc(var(--bw) * -395 / 360);
    width: calc(var(--bw) * 843.0236 / 360);
    height: calc(var(--bw) * 770.4473 / 360);
    transform: rotate(-25.3991deg);
    transform-origin: 0 0;
  }

  .p-bg__curve--g1 {
    top: calc(var(--bw) * 214.59 / 360);
  }

  /* 2 本目は「キャリア形成をサポート」に掛ける。SP はページ高さが幅で変わるので
     セクションの位置（--g-sec-top）は JS（initNumbersCurvePosition）が入れる */

  .p-bg__curve--g2 {
    top: calc(var(--g-sec-top, 4300px) - var(--bw) * 346.82 / 360);
  }

  /* --- セクション共通 --- */

  .p-gfv {
    height: auto;
    padding: calc(var(--sp-header-h) + 60px) 20px 40px;
  }

  .p-gtrain,
  .p-gsupport {
    height: auto;
    padding: 40px 20px;
  }

  /* --- FV --- */

  .p-gfv__upper {
    margin-top: 8px;
  }

  .p-gfv__catch {
    margin-top: 24px;
  }

  .p-gfv__sub {
    margin-top: 24px;
  }

  .p-gfv__lead {
    margin-top: 16px;
  }

  .p-gfv__image {
    width: 100%;
    max-width: 554px;
    height: auto;
    margin: 24px auto 0;
  }

  .p-gfv__image img {
    height: auto;
  }

  /* --- 見出し 3 点（研修制度／キャリア形成をサポート）--- */

  .p-gtrain__ja,
  .p-gsupport__ja {
    margin-top: 6px;
    line-height: 1.4;
  }

  .p-gtrain__lead,
  .p-gsupport__lead {
    margin-top: 24px;
  }

  /* --- 研修ブロック --- */

  .p-gtrain__blocks {
    margin-top: 48px;
  }

  .p-gtrain__block {
    position: static;
    width: auto;
    height: auto;
  }

  .p-gtrain__block + .p-gtrain__block {
    margin-top: 56px;
  }

  .p-gtrain__no {
    position: static;
    width: auto;
    font-size: 64px;
    line-height: 76px;
  }

  .p-gtrain__title {
    position: static;
    width: auto;
    margin-top: 4px;
    font-size: 22px;
    line-height: 34px;
  }

  /* 本文＋写真を 1 枚のカードにまとめ、その下地として __card を敷く。
     PC の絶対配置のままだと高さ 0 の箱が本文の上に残ってしまう */

  .p-gtrain__inner {
    position: relative;
    margin-top: 20px;
    padding: 28px 20px;
  }

  .p-gtrain__card {
    inset: 0;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    border-radius: 20px;
  }

  /* 左右の入れ替え（.p-gtrain__block--01 .p-gtrain__photo など 0,2,0）を
     打ち消すので、こちらも詳細度を 0,2,0 に合わせる（後勝ち） */

  .p-gtrain__inner .p-gtrain__body {
    position: static;
    left: auto;
    width: auto;
    height: auto;
  }

  /* static にはしない（左右の left 指定だけ無効化したい）。
     枠の高さは 480:320 で決め、画像は絶対配置で枠を埋める。
     height: 100% のままだと、親の高さが aspect-ratio 由来で「不定」になり
     パーセント指定が解決されず、画像が元の比率のまま縮んでしまう。 */

  .p-gtrain__inner .p-gtrain__photo {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    margin-top: 20px;
    aspect-ratio: 480/320;
  }

  .p-gtrain__inner .p-gtrain__photo img {
    position: absolute;
    inset: 0;
  }

  .p-gtrain__en,
  .p-gtrain__head,
  .p-gtrain__text {
    position: static;
    width: auto;
  }

  .p-gtrain__head {
    margin-top: 4px;
    font-size: 20px;
    line-height: 34px;
  }

  .p-gtrain__text {
    margin-top: 12px;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: 0.32px;
  }

  /* 装飾イラストは SP では出さない（PC の絶対配置が前提の飾り） */

  .p-gtrain__deco {
    display: none;
  }

  /* --- Point カード --- */

  .p-gsupport__points {
    display: block;
    margin-top: 40px;
  }

  .p-gsupport__point {
    width: auto;
    min-height: 0;
  }

  .p-gsupport__point + .p-gsupport__point {
    margin-top: 20px;
  }
}

/* タブレット（768〜1023px）は .l-page に zoom 1.2 が掛かるので 100vw だと 1.2 倍に膨らむ。
   JS が入れる zoom 後の設計幅（--tablet-w）を基準にする */

@media (min-width: 768px) and (max-width: 1023px) {
  .p-bg__curve--g1,
  .p-bg__curve--g2 {
    --bw: var(--tablet-w, 640px);
  }
}

/* ============================================================
   blog-page — 採用ブログの一覧 / 記事（WordPress 専用・仮デザイン）

   ・Figma にデザインが無いページ。一覧ページは後日作る前提で、
     「共通ヘッダー／フッターに挟まれて読める」最低限だけを整えてある。
     デザインが出たら採寸してこのファイルを作り直すこと。
   ・使うのは home.php / single.php / index.php / 404.php だけ。
     固定ページ（front-page.php / page-*.php）には出てこない。

   ★ 座標・文字サイズは **1920px キャンバス基準** で書くこと。
     ヘッダーとフッターが .u-canvas（left: calc(50% - 960px + --x)）を使っており、
     JS の initPageScale() が lg 以上で .l-page に zoom を掛けて縮小する。
     ここだけビューポート基準で書くと、1280px でヘッダーのロゴとナビが
     画面の左外（-293px）へ出てしまう。
     本文カラムは他セクションと同じ 1280px 幅（Figma x320〜1600）。
   ============================================================ */

/* 投稿・一覧・検索・404 の背景（template-parts/bg-blog.php）。
   トップページ用の背景はカーブとブロブの位置に合わせて 8945px 固定なので、
   そのまま使うとページが縦に伸びてしまう。図形を置かず高さも 0 にする。

   クラスを 2 つ重ねて詳細度 (0,2,0) にしているのは、_sp.scss の
   `.p-bg { height: 100% }`（max-width: 1023px）がこのファイルより後に
   読み込まれるため。`.p-bg--blog` 単独 (0,1,0) では SP で負ける。 */

.p-bg.p-bg--blog {
  height: 0;
}

/* the_posts_pagination() が出す読み上げ専用の見出し（「投稿ナビゲーション」）。
   このプロジェクトの読み上げ専用クラスは .u-sr-only だけで
   .screen-reader-text の定義が無いため、素の見出しとして見えてしまう。 */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.p-bpage {
  /* トップページの Blog セクションと同じ下地 */
  background-color: #f2f5f8;
  /* 上はヘッダー（100px）＋余白 */
  padding: 220px 0 160px;
}

.p-bpage__inner {
  width: 1280px;
  margin-inline: auto;
}

/* c-sec-ja は whitespace-nowrap を持っている。
   検索キーワードや 404 の文言は長くなるので折り返せるようにする。 */

.p-bpage__ja {
  /* text-sec-en は 65px の文字を 40px の行ボックスに入れているため、
     グリフが行ボックスから 12px ほどはみ出す。トップページの Blog 見出しと
     同じ間隔（EN の行ボックス下端から 38px）にする。 */
  margin-top: 38px;
  white-space: normal;
}

.p-bpage__lead {
  margin-top: 16px;
}

/* ------------------------------------------------------------
   一覧（トップページの記事カードと同じ寸法。幅だけ 900 → 1280）
   ------------------------------------------------------------ */

.p-bpage__list {
  display: flex;
  flex-direction: column;
  margin-top: 56px;
  gap: 10px;
}

.p-bpage__item {
  position: relative;
  height: 70px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
}

.p-bpage__link {
  display: flex;
  position: relative;
  align-items: center;
  height: 100%;
  transition: background-color 0.3s ease;
}

@media (hover: hover) {
  .p-bpage__link:hover {
    background-color: #e0e7f9;
  }
}

.p-bpage__date {
  position: absolute;
  left: 33px;
  top: 26px;
  width: 76px;
  color: #040e4e;
  font-size: 12px;
  font-weight: 300;
  line-height: 20px;
  letter-spacing: 0.36px;
}

/* 文言は管理画面からの自由入力なので、固定幅から溢れても壊れないようにする */

.p-bpage__cat {
  /* display: flex にすると text-overflow: ellipsis が効かない（フレックスコンテナ
     には適用されない）ので block + line-height で中央に置く */
  display: block;
  position: absolute;
  left: 109px;
  top: 26px;
  width: auto;
  text-align: center;
  min-width: 72px;
  max-width: 105px;
  height: 18px;
  padding-inline: 4px;
  border-radius: 2px;
  overflow: hidden;
  background-color: #8b95a8;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: 0.36px;
}

.p-bpage__title {
  position: absolute;
  left: 214px;
  top: 15px;
  /* カードの右端まで（1280 - 214 - 33） */
  max-width: 1033px;
  overflow: hidden;
  color: #040e4e;
  font-size: 18px;
  font-weight: 500;
  line-height: 40px;
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: 0.54px;
}

.p-bpage__empty {
  margin-top: 56px;
  color: #040e4e;
  font-size: 18px;
  line-height: 34px;
}

/* the_posts_pagination() が吐く markup にそのまま当てる */

.p-bpage__pager {
  margin-top: 64px;
}

.p-bpage__pager .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.p-bpage__pager .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding-inline: 16px;
  border: 1px solid #d5dce8;
  border-radius: 4px;
  background-color: #fff;
  color: #040e4e;
  font-size: 16px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.p-bpage__pager .page-numbers.current {
  border-color: #1660c9;
  background-color: #1660c9;
  color: #fff;
}

@media (hover: hover) {
  .p-bpage__pager a.page-numbers:hover {
    background-color: #e0e7f9;
  }
}

/* ------------------------------------------------------------
   記事
   ------------------------------------------------------------ */

.p-bpost {
  padding: 56px 64px 64px;
  border-radius: 10px;
  background-color: #fff;
}

.p-bpost__meta {
  display: flex;
  position: relative;
  align-items: center;
  height: 18px;
  gap: 16px;
  /* 一覧と同じパーツを使い回すので、絶対配置だけ解除する */
}

.p-bpost__meta .p-bpage__date,
.p-bpost__meta .p-bpage__cat {
  position: static;
}

.p-bpost__title {
  margin-top: 20px;
  color: #040e4e;
  font-size: 32px;
  font-weight: 700;
  line-height: 52px;
  letter-spacing: 0.96px;
}

.p-bpost__thumb {
  margin-top: 40px;
}

.p-bpost__thumb img {
  width: 100%;
  height: auto;
}

.p-bpost__body {
  max-width: 960px;
  margin-top: 40px;
  color: #040e4e;
  font-size: 18px;
  line-height: 34px;
  /* 管理画面のエディタから入ってくる要素。
     Tailwind の preflight が余白と装飾を消すので、ここで戻している。 */
}

.p-bpost__body > * + * {
  margin-top: 1.5em;
}

.p-bpost__body h2 {
  font-size: 26px;
  font-weight: 700;
  line-height: 40px;
}

.p-bpost__body h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 34px;
}

.p-bpost__body a {
  color: #1660c9;
  text-decoration: underline;
}

.p-bpost__body ul,
.p-bpost__body ol {
  padding-left: 1.5em;
  list-style: revert;
}

.p-bpost__body img {
  max-width: 100%;
  height: auto;
}

.p-bpost__body blockquote {
  padding-left: 20px;
  border-left: 3px solid #d5dce8;
}

.p-bpage__back {
  margin-top: 64px;
  text-align: center;
}

/* ------------------------------------------------------------
   SP / タブレット（1023px 以下）

   lg 未満は .l-page のキャンバスが流動になる（タブレットは zoom 1.2）。
   PC の 1280px 固定カラムと絶対配置をここで全部ほどく。
   ------------------------------------------------------------ */

@media (max-width: 1023px) {
  .p-bpage {
    /* SP のヘッダーは fixed で 70px（--sp-header-h）、その下に
       「Recruit site」のタグラインが乗る。さらに EN 見出し（65px）は
       行ボックス（40px）から上へ 12px ほどはみ出すので、その分も見ておく。 */
    padding: 150px 20px 80px;
  }

  .p-bpage__inner {
    width: 100%;
    max-width: 640px;
  }

  .p-bpage__list {
    margin-top: 32px;
  }

  .p-bpage__item {
    height: auto;
  }

  .p-bpage__link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    padding: 10px;
    row-gap: 3px;
  }

  .p-bpage__date {
    position: static;
  }

  .p-bpage__cat {
    position: static;
    width: 72px;
    min-width: 0;
    margin-left: 10px;
  }

  /* 100% にして必ず次の行へ送る（日付・カテゴリと同じ行に並ばせない） */

  .p-bpage__title {
    position: static;
    width: 100%;
    max-width: 100%;
    line-height: 28px;
    white-space: normal;
  }

  .p-bpage__pager {
    margin-top: 40px;
  }

  .p-bpage__pager .page-numbers {
    min-width: 40px;
    height: 40px;
    padding-inline: 12px;
    font-size: 14px;
  }

  .p-bpost {
    padding: 24px 20px 32px;
  }

  .p-bpost__meta {
    gap: 0;
  }

  .p-bpost__title {
    font-size: 22px;
    line-height: 34px;
  }

  .p-bpost__body {
    max-width: 100%;
    margin-top: 24px;
    line-height: 28px;
  }

  .p-bpost__body h2 {
    font-size: 20px;
    line-height: 32px;
  }

  .p-bpost__body h3 {
    font-size: 18px;
    line-height: 28px;
  }
}

/* ============================================================
   sp — スマートフォン／タブレットの流動レイアウト（〜1279px）
   Figma: 01_home sp / top-page-sp (424:2538) 360 x 8055
   ------------------------------------------------------------
   PC は 1920px キャンバスの絶対配置で組んでいるため、
   ここでは .u-canvas を static に戻してフロー配置に切り替える。
   余白は Figma の y 座標の差分をそのまま margin/padding にしている。

   ※ 適用範囲は 1023px 以下。768〜1023px は、この土台の上に
     _tablet.scss がカラム幅の制限と 1.2 倍の zoom を重ねる。
     （PC キャンバスをこの帯で縮小すると本文が 6〜10px になり読めない）
   ============================================================ */

/* メニュー開閉に合わせて色を変える時間。ドロワーのスライド（0.45s）に合わせる */

/* SP 専用要素は PC では出さない */

/* SP 専用の要素（PC では出さない）
   ※ l-tagline / p-growth__photos / p-cta__label / l-footer__sp-nav は
     最新PCデザインにも入ったので PC でも表示する */

.u-sp,
.l-header__burger,
.l-header__logo-white,
.l-drawer,
.p-cta__bg {
  display: none;
}

/* 420px 以下だけで出す改行など（u-sp は 1023px 以下すべてで出る）。
   例：<br class="u-sp420" /> */

.u-sp420 {
  display: none;
}

@media (max-width: 420px) {
  .u-sp420 {
    display: inline;
  }
}

@media (max-width: 1023px) {
  /* --------------------------------------------------------
     土台
     -------------------------------------------------------- */

  body {
    min-width: 0;
  }

  .l-page {
    width: 100%;
  }

  /* 1920px キャンバスの絶対配置を解除してフローに戻す */

  .u-canvas {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
  }

  .u-pc {
    display: none;
  }

  .u-sp {
    display: inline;
  }

  /* PC 専用の装飾（ヒーローのコラージュなど）は出さない */

  .p-hero__illust,
  .p-hero [data-hero-item],
  .p-career__image,
  .p-growth__figure {
    display: none;
  }

  .c-sec-ja{
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 0;
    font-weight: 700;
    white-space: normal;
  }

  .c-sec-lead{
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0;
    font-weight: 500;
  }

  /* 青いピルボタン（Figma 203x46 / 中央寄せ） */

  /* SP も幅はテキストなり。中央ぞろえは fit-content + auto マージンで行う */

  .c-btn {
    display: flex;
    justify-content: center;
    width: -moz-fit-content;
    width: fit-content;
    height: 46px;
    margin-inline: auto;
    padding-left: 23px;
    padding-right: 54px;
  }

  .c-btn__icon {
    top: 13px;
    right: 14px;
  }

  /* 黄色の応募ボタン（Figma 320x50 #ffd300）
     Figma の 320px は 360px 幅での左右余白 20px を引いた値なので、
     画面幅に追従するよう 100% にしている */

  .c-btn-apply {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 50px;
    border-radius: 4px;
    background-color: #ffd300;
    color: #181818;
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    transition: background-color 0.3s ease;
  }

  .c-btn-apply svg {
    width: 15.77px;
    height: 14.68px;
    color: #181818;
    transition: transform 0.3s ease;
  }

  .c-btn-apply {
    /* ホバーで背景を白に。矢印は少しだけ右へ（枠内に収まる範囲） */
  }
}

@media (max-width: 1023px) and (hover: hover) {
  .c-btn-apply:hover {
    background-color: #fff;
  }

  .c-btn-apply:hover svg {
    transform: translateX(4px);
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .c-btn-apply {
    transition: none;
  }

  .c-btn-apply svg {
    transition: none;
  }
}

@media (max-width: 1023px) {
  /* --------------------------------------------------------
     背景レイヤー（SP は 2 本のカーブのみ / Figma 436:1403, 436:1407）
     -------------------------------------------------------- */

  .p-bg {
    height: 100%;
  }

  /* SP の形・傾きは下層ページ（about の SP デザイン Figma about-sp 745:1138）とそろえる。
     同じ形（カーブ01 のパス）を 843x770 に縮め、反時計回りに 25.4° 回転。
     左上 (-419, 214.59) を回転の原点にし、360px 幅のデザインを画面幅に比例させる
     （--bw = 画面幅。タブレットは _tablet.scss が zoom 後の設計幅に差し替える）。
     色はトップページのまま。 */

  .p-bg__curve01,
  .p-bg__curve02 {
    --bw: max(360px, 100vw);
    /* Figma の x は -419。そのままだと図形の右上の切り口（先端）が画面の右端から
       18px ほど内側に入って見えるので、24px 右へずらして先端を画面外に出している */
    left: calc(var(--bw) * -395 / 360);
    width: calc(var(--bw) * 843.0236 / 360);
    height: calc(var(--bw) * 770.4473 / 360);
    transform: rotate(-25.3991deg);
    transform-origin: 0 0;
  }

  .p-bg__curve01 {
    top: calc(var(--bw) * 214.59 / 360);
  }

  /* 2本目の縦位置は JS（initCurvePosition）が「図形の外接枠の上端」を top に入れる
     （People の上端 - 742px）。回転の原点は外接枠の上端より 361.59px（×比率）下にあるので、
     その差を margin-top で足す */

  .p-bg__curve02 {
    top: 3299px;
    margin-top: calc(var(--bw) * 361.59 / 360);
  }

  .p-bg__curve02-rotate {
    width: 100%;
    height: 100%;
    transform: none;
  }

  /* SP では下部ブロブを使わず、募集要項セクション自体に背景を持たせる
     （Figma SP では Flow は白地・青文字、募集要項だけが濃紺） */

  .p-bg__blob {
    display: none;
  }

  /* --------------------------------------------------------
     01 header（Figma 424:2697 / h101）
     -------------------------------------------------------- */

  /* スクロール追従。メニューは背面から降りてくるので、ヘッダーは常に前面 */

  /* 追従ヘッダーの高さ。タグラインの位置、ドロワーと FV の上余白もこれに追従する */

  :root {
    --sp-header-h: 70px;
  }

  .l-header {
    position: fixed;
    /* ドロワー(55)より前面。ロゴと閉じるボタンは常に見える */
    z-index: 60;
    height: var(--sp-header-h);
    background-color: #fff;
    transition: background-color 0.4s ease;
  }

  /* メニューが開いている間はヘッダーもメニューと同じ青にする。
     transparent にすると背面のメニューが一気に見えて色が飛ぶので、
     同じ色を敷いてゆっくり白 → 青（閉じるときは青 → 白）に変える。 */

  .is-menu-open .l-header {
    background-color: #1660c9;
  }

  .l-header__logo {
    position: absolute;
    left: 20px;
    top: 50%;
    width: 194px;
    height: 37px;
    transform: translateY(-50%);
  }

  /* ロゴは display の切替だと背景のフェードに追いつかず、
     白背景の上に白ロゴが乗る瞬間ができてしまう。2枚を重ねてクロスフェードする。 */

  .l-header__logo a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
  }

  .l-header__logo img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    transition: opacity 0.4s ease;
  }

  .l-header__logo-white {
    display: block;
    opacity: 0;
  }

  .is-menu-open .l-header__logo-color {
    opacity: 0;
  }

  .is-menu-open .l-header__logo-white {
    opacity: 1;
  }

  .l-header__nav,
  .l-header__entry {
    display: none;
  }

  /* ヘッダーは不透明な白の追従バー（高さ 101px）なので、
     その真下に置いて隠れないようにする。ページと一緒にスクロールして消える。 */

  .l-tagline {
    display: block;
    position: absolute;
    left: 18px;
    top: var(--sp-header-h);
    color: #1f60c9;
    font-size: 18px;
    font-weight: 500;
    line-height: 40px;
  }

  .l-header__burger {
    display: flex;
    position: absolute;
    right: 20px;
    top: 50%;
    flex-direction: column;
    transform: translateY(-50%);
    justify-content: space-between;
    width: 40px;
    height: 17px;
  }

  .l-header__burger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #1660c9;
    transition: transform 0.3s ease, opacity 0.2s ease, background-color 0.4s ease;
  }

  .is-menu-open .l-header__burger span {
    background-color: #fff;
  }

  /* 開いているときは × に */

  .l-header__burger[aria-expanded=true] span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
  }

  .l-header__burger[aria-expanded=true] span:nth-child(2) {
    opacity: 0;
  }

  .l-header__burger[aria-expanded=true] span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
  }

  /* ハンバーガーメニュー（Figma 486:1152 / #1660c9）
     画面の一番上（y=0）から隙間なく配置し、上→下にスライドインする。
     ヘッダー（z-index 60）より背面に置くので、ロゴと閉じるボタンは常に見える。
     padding-top はヘッダー分(--sp-header-h) + Figma のメニュー内側余白(40px)。 */

  .l-drawer {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 55;
    width: 100%;
    /* 画面の高さいっぱいを覆う。dvh はアドレスバーの伸縮に追従する。
       項目が増えて入り切らない場合はドロワーの中だけスクロールする。 */
    height: 100vh;
    height: 100dvh;
    padding: calc(var(--sp-header-h) + 40px) 20px 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: #1660c9;
    /* 閉じているときは画面の上へ完全に逃がす。
       visibility を transition に混ぜると transform が動かなくなるため、
       操作の無効化は JS が付ける inert 属性で行っている。 */
    /* ぴったり -100% だと端に 1px の残像が出ることがあるので少し余分に逃がす */
    transform: translateY(calc(-100% - 4px));
    backface-visibility: hidden;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .l-drawer[inert] {
    pointer-events: none;
  }

  .l-drawer.is-open {
    transform: translateY(0);
  }

  .l-drawer__nav {
    display: flex;
    flex-direction: column;
  }

  .l-drawer__nav a {
    height: 50px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
  }

  .l-drawer .c-btn-apply {
    margin-top: 20px;
  }

  /* --------------------------------------------------------
     02 hero / message（Figma y0〜1036）
     -------------------------------------------------------- */

  .p-hero {
    height: auto;
    /* 上は「ヘッダー分 + 40px（Figma）+ 20px」 */
    padding: calc(var(--sp-header-h) + 60px) 20px 40px;
  }

  .p-hero__catch {
    width: 100%;
    margin-inline: auto;
    margin-bottom: 10px;
  }

  .p-hero__catch img {
    display: block;
    width: 100%;
    height: auto;
  }

  .p-hero__lead {
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
  }

  .p-hero__lead p {
    min-height: 0;
  }

  .p-hero__sub {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: 0;
  }

  .p-hero__btn {
    margin-top: 30px;
  }

  /* --------------------------------------------------------
     03 career（Figma y1036〜1766）
     -------------------------------------------------------- */

  .p-career {
    height: auto;
    padding: 40px 20px;
  }

  .p-career__en {
    margin-top: 16px;
  }

  .p-career__ja {
    margin-top: 32px;
  }

  .p-career__lead {
    margin-top: 20px;
  }

  .p-career__btn {
    margin-top: 30px;
  }

  /* キャリアの成長ステップ
     SP 用の 1 枚絵（career-steps-sp.png）だと Step 01〜03 のテキストと
     イラストの位置が合わないので、PC と同じ 3 枚組を PC の比率のまま並べる。
     Figma PC: x347/540/750・幅189/200/200・下端そろえ（基準幅 603 = 950-347）。
     画像の実寸は PC の枠のちょうど 2 倍なので height: auto でそのまま合う。 */

  .p-career__steps {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    width: 100%;
    margin-top: 30px;
  }

  .p-career__steps-img {
    display: none;
  }

  .p-career__step {
    position: static;
    left: auto;
    top: auto;
    height: auto;
  }

  .p-career__step img {
    height: auto;
  }

  .p-career__step--1 {
    width: 31.343%;
  }

  .p-career__step--2 {
    width: 33.167%;
    margin-left: 0.663%;
  }

  .p-career__step--3 {
    width: 33.167%;
    margin-left: 1.658%;
  }

  /* ラベルは画像と同じ幅・同じ間隔で真下に置く（中央そろえ） */

  .p-career__steps-labels {
    position: static;
    display: flex;
    width: 100%;
    padding: 0;
  }

  .p-career__steps-labels li {
    color: #1660c9;
    font-size: 16px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: 0.42px;
    text-align: center;
  }

  .p-career__steps-labels li:nth-child(1) {
    width: 31.343%;
    margin-left: 0;
  }

  .p-career__steps-labels li:nth-child(2) {
    width: 33.167%;
    margin-left: 0.663%;
  }

  .p-career__steps-labels li:nth-child(3) {
    width: 33.167%;
    margin-left: 1.658%;
  }

  /* --------------------------------------------------------
     04 vision（Figma y1766〜2961）
     -------------------------------------------------------- */

  .p-vision {
    height: auto;
    padding: 40px 20px;
  }

  .p-vision__en {
    margin-top: 16px;
  }

  .p-vision__ja {
    margin-top: 32px;
  }

  .p-vision__lead {
    margin-top: 20px;
  }

  .p-vision__figure {
    margin-top: 20px;
  }

  /* トータルサポート図（Figma 436:997 / 320x241）
     PC は図が枠の左寄りだが、SP は枠の中央。座標系ごと SP デザインに合わせる。 */

  .c-diagram {
    aspect-ratio: 320/241;
  }

  .c-diagram__img {
    left: 50%;
    top: -0.4%;
    width: 73%;
    transform: translateX(-50%);
  }

  .c-diagram__tag {
    /* SP は 6 つとも同じ薄青（PC は行政書士だけ白） */
    background-color: #e0e7f9;
    font-size: 16px;
    line-height: 20px;
    /* 16px の「コンサルティング」が 375px 端末で枠いっぱい（余白 1.5px）に
       なるので、中心（49.85%）を保ったまま広げる */
  }

  .c-diagram__tag--1 {
    left: 27.85%;
    top: 0;
    width: 44%;
    height: 10.6%;
  }

  .c-diagram__tag {
    /* 2〜6 は Figma では 20.6%（66px）幅。16px の 4 文字（約 64px）だと
       360px 端末で左右の余白が 1px しかないので 22.5% に広げる。
       内側（図の矢印の先）へ広げると矢印に重なるので、外側へ広げる：
       左の 2・4 は左端を 0 に、右の 3・5 は右端を 100% に寄せ、
       内側の端は Figma の位置（21.5% / 77.2%）からほとんど動かさない。 */
  }

  .c-diagram__tag--2 {
    left: 0;
    top: 23.3%;
    width: 22.5%;
    height: 10.6%;
  }

  .c-diagram__tag {
    /* 2 行（社会保険／社労士）なので、行送り 20px × 2 が収まる高さにする */
  }

  .c-diagram__tag--3 {
    left: 77.5%;
    top: 18.3%;
    width: 22.5%;
    height: 19%;
  }

  .c-diagram__tag--4 {
    left: 0;
    top: 63.9%;
    width: 22.5%;
    height: 10.6%;
  }

  .c-diagram__tag--5 {
    left: 77.5%;
    top: 63.9%;
    width: 22.5%;
    height: 10.6%;
  }

  .c-diagram__tag--6 {
    left: 38.75%;
    top: 89.2%;
    width: 22.5%;
    height: 10.6%;
  }

  /* 数値は縦積み（Figma 2481〜2863） */

  .p-vision__numbers {
    display: block;
    margin-top: 20px;
  }

  /* PC は 3 つを横並びにするため nth-child で margin-left を入れているので、
     同じ詳細度（.p-vision を足す）で打ち消してセンター揃えに戻す */

  .p-vision .p-vision__numbers .p-vision__number {
    width: 100% !important;
    margin-top: 20px;
    margin-left: 0;
    text-align: center;
  }

  .p-vision .p-vision__numbers .p-vision__number:first-child {
    margin-top: 0;
  }

  .p-vision__number-label,
  .p-vision__number-value {
    color: #1660c9;
  }

  .p-vision__number-value {
    height: auto;
    /* ラベルとの間隔。数字の行ボックスは文字の上下に余りがあるので、
       文字どうしの見た目が 10px になるよう詰める（PC は 11px） */
    margin-top: -7px;
    /* 行送りを文字より小さくすると数字が行ボックスからはみ出し、
       下の注記（（2026年4月1日時点）など）と重なる。文字が収まる値にする。 */
  }

  .p-vision__number-value em {
    font-size: 64px;
    line-height: 68px;
  }

  .p-vision__number-value span {
    font-size: 30px;
    font-weight: 700;
    line-height: 68px;
  }

  .p-vision__number-note {
    display: block;
    /* 同上。文字どうしの見た目が 5px になるよう詰める */
    margin-top: -24px;
    color: #1660c9;
    font-size: 12px;
    font-weight: 700;
    line-height: 25px;
    text-align: center;
  }

  /* --- 平均年収（SP デザインには無いので、他の数値と同じ流儀で縦積み） --- */

  .p-vision__salary {
    display: block;
    width: auto;
    /* 数値どうしは 20px。平均年収は区切りとして 10px 多めに空ける */
    margin-top: 34px;
    text-align: center;
  }

  .p-vision__salary-main {
    width: auto;
  }

  .p-vision__salary-model {
    width: auto;
    margin-top: 16px;
    font-size: 16px;
    line-height: 30px;
    text-align: left;
  }

  .p-vision__salary-list {
    padding-left: 22px;
  }

  .p-vision__btn {
    margin-top: 12px;
  }

  /* --------------------------------------------------------
     05 growth（Figma y2961〜3754）
     -------------------------------------------------------- */

  .p-growth {
    height: auto;
    padding: 40px 20px 37px;
  }

  .p-growth__upper {
    margin-top: 20px;
  }

  .p-growth__ja {
    margin-top: 20px;
  }

  .p-growth__lead {
    margin-top: 20px;
  }

  .p-growth__btn {
    margin-top: 30px;
  }

  /* 写真3点（Figma 436:1361/1364/1367）
     Figma の 360px 幅を基準に、--gw（＝写真ブロックの基準幅）に対する
     比率で指定している。位置関係を保ったまま同じ比率で拡大される。
     ・SP    … --gw: 100vw（画面幅いっぱいにはみ出す）
     ・タブレット … _tablet.scss がコラム幅に差し替える */

  .p-growth__photos {
    --gw: 100vw;
    display: block;
    position: relative;
    height: calc(var(--gw) * 79.7222 / 100);
    margin: calc(var(--gw) * 8.8889 / 100) -20px 0;
  }

  .p-growth__photo {
    position: absolute;
    overflow: hidden;
    border-radius: calc(var(--gw) * 5.5556 / 100);
  }

  .p-growth__photo img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .p-growth__photo--3 {
    left: calc(var(--gw) * 19.4444 / 100);
    top: calc(var(--gw) * 1.1111 / 100);
    width: calc(var(--gw) * 59.1667 / 100);
    height: calc(var(--gw) * 34.7222 / 100);
  }

  .p-growth__photo--1 {
    left: calc(var(--gw) * 49.4444 / 100);
    top: calc(var(--gw) * 41.1111 / 100);
    width: calc(var(--gw) * 42.7778 / 100);
    height: calc(var(--gw) * 25 / 100);
  }

  .p-growth__photo--2 {
    left: calc(var(--gw) * 7.7778 / 100);
    top: calc(var(--gw) * 58.3333 / 100);
    width: calc(var(--gw) * 35 / 100);
    height: calc(var(--gw) * 20.5556 / 100);
  }

  /* --------------------------------------------------------
     06 team / people（Figma y3754〜4326）
     -------------------------------------------------------- */

  .p-people {
    height: auto;
    padding: 40px 0 36px;
  }

  .p-people__en,
  .p-people__ja,
  .p-people__lead,
  .p-people__upper {
    padding-inline: 20px;
  }

  /* 並びは Meet Our → Team（英語として "Meet Our Team" と読める順）。
     Vision（Our → Vision）と同じ形。 */

  .p-people__en {
    margin-top: 16px;
  }

  /* Career / Vision と同じ 32px（20px だと Team の下だけ詰まって見える） */

  .p-people__ja {
    margin-top: 32px;
  }

  .p-people__lead {
    margin-top: 20px;
  }

  /* 写真マーキー（Figma 4144〜4290 / 周期 916px） */

  .p-people__marquee {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 146px;
    margin-top: 20px;
    overflow: hidden;
  }

  .p-people__track {
    width: -moz-max-content;
    width: max-content;
  }

  .p-people__set {
    width: 916px;
  }

  .p-people.is-revealed .p-people__track {
    animation-name: people-marquee-sp;
    animation-duration: 30s;
  }

  /* 高さは 1 枚ずつずらす。同じサイズの写真が同じ高さで並ぶと
     ただの 2 段組みに見えてしまうので、上下に波打たせる。
     枠は 146px。どの写真も 0〜146px に収まる値にしてある。
     流れる順は 03 → 02 → 04 → 01 → 05。 */

  .p-people__photo--02 {
    left: 0;
    top: 8px;
    width: 150px;
    height: 97px;
  }

  .p-people__photo--04 {
    left: 166px;
    top: 21px;
    width: 193px;
    height: 125px;
  }

  .p-people__photo--03 {
    left: 375px;
    top: 40px;
    width: 150px;
    height: 97px;
  }

  .p-people__photo--05 {
    left: 541px;
    top: 0;
    width: 193px;
    height: 125px;
  }

  .p-people__photo--01 {
    left: 750px;
    top: 49px;
    width: 150px;
    height: 97px;
  }

  /* --------------------------------------------------------
     07 interview（Figma y4326〜5098）
     -------------------------------------------------------- */

  .p-interview {
    height: auto;
    padding: 40px 0;
  }

  .p-interview__en {
    text-align: center;
  }

  .p-interview__stack {
    position: relative;
    width: 320px;
    /* 写真とテキストの間を空けたぶん（21px）高くしている */
    height: 490px;
    margin: 70px auto 0;
  }

  .p-interview__slide[data-pos="1"] {
    transform: translateY(-15px) scale(0.9125);
  }

  .p-interview__slide[data-pos="2"] {
    transform: translateY(-28px) scale(0.81875);
  }

  .p-interview__slide {
    /* 退場アニメーションも SP のスロット位置で終わらせる。
       PC 用のキーフレーム（-54px / 0.9333）のままだと、
       アニメーション終了時に背面スロットへ瞬間移動してしまう。 */
  }

  .p-interview__slide.is-leaving, .p-interview__slide.is-returning {
    animation-name: interview-leave-sp;
  }

  .p-interview__photo {
    left: 43px;
    top: 16px;
    width: 224px;
    height: 147px;
  }

  .p-interview__photo img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  /* Figma SP: caption 14px/600、number 18px/600（PC は 16px / 30px） */

  .p-interview__meta {
    left: 20px;
    /* 写真の下端 163px から 10px 空ける */
    top: 173px;
    gap: 14px;
  }

  .p-interview__meta span {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .p-interview__meta em {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .p-interview__title {
    left: 20px;
    top: 218px;
    width: 280px;
  }

  /* Figma はタグの間 10px。文字を 14→16px に上げたぶん、左端（タイトルと揃えた 20px）を
     保ったままカードの右端に 16px 残すため、間隔・字間・役職タグの幅を少しずつ詰めている */

  .p-interview__tags {
    left: 20px;
    top: 322px;
    gap: 6px;
  }

  .p-interview__tag {
    height: 36px;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0;
  }

  .p-interview__tag--type {
    width: 76px;
    color: #181818;
  }

  .p-interview__tag {
    /* Figma は 188px（14px の文字）。16px の「社会保険労務士法人　代表」は約 193px */
  }

  .p-interview__tag--role {
    width: 202px;
  }

  .p-interview__name {
    left: 20px;
    top: 378px;
    width: 240px;
  }

  .p-interview__link {
    left: 20px;
    top: 433px;
  }

  .p-interview__btn {
    margin-top: 30px;
  }

  .p-interview__pager {
    justify-content: center;
    gap: 28px;
    margin-top: 26px;
    font-size: 18px;
  }

  /* 送りボタン（Figma SP 443:xxx / カード右端 27x27） */

  .p-interview__next {
    left: 306px;
    top: 219px;
    width: 27px;
    height: 27px;
  }

  .p-interview__next svg {
    width: 7.2px;
    height: 12px;
  }

  /* --------------------------------------------------------
     08 blog（Figma y5098〜5782 / bg #f2f5f8）
     -------------------------------------------------------- */

  .p-blog {
    height: auto;
    padding: 40px 20px;
    background-color: #f2f5f8;
    /* PC のグレー帯（position: absolute）は、静的配置の見出しより
       前面に描画されて Blog の見出し・リード文を隠してしまう。
       SP はセクション自身に背景色を持たせているので帯は不要。 */
  }

  .p-blog::before {
    display: none;
  }

  .p-blog__ja {
    margin-top: 32px;
  }

  .p-blog__lead {
    margin-top: 20px;
    line-height: 32px;
  }

  .p-blog__list {
    margin-top: 20px;
    gap: 10px;
  }

  /* 高さは中身なり。固定高にすると、タイトルが 1 行で収まる
     タブレット幅で下に大きな余白ができてしまう。
     絶対配置をやめて、日付＋カテゴリ／タイトルの 2 段に折り返す。 */

  .p-blog__item {
    height: auto;
    background-color: #fff;
  }

  .p-blog__item::before {
    display: none;
  }

  .p-blog__link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    padding: 10px;
    row-gap: 3px;
  }

  .p-blog__date {
    position: static;
    width: 76px;
  }

  .p-blog__cat {
    position: static;
    width: 72px;
  }

  /* 100% にして必ず次の行へ送る（日付・カテゴリと同じ行に並ばせない） */

  .p-blog__title {
    position: static;
    width: 100%;
  }

  .p-blog__btn {
    margin-top: 30px;
  }

  /* --------------------------------------------------------
     09 flow（Figma 482:427 / 360x978）
     見出しは中央、ステップは x30 起点の左揃え。
     ステップのカードは Figma 上で塗り・線・効果すべて無しの
     透明フレームなので、背景は描かない。
     -------------------------------------------------------- */

  .p-flow {
    height: auto;
    /* 下は 17px（Figma SP : バナーの下端 7210 → 募集要項 7227） */
    padding: 52px 0 17px;
    color: #000;
  }

  .p-flow__en {
    margin-top: 32px;
    padding-inline: 20px;
    color: #1660c9;
    font-size: 65px;
    font-weight: 600;
    line-height: 40px;
    text-align: center;
  }

  .p-flow__ja {
    padding-inline: 20px;
    color: #1660c9;
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
    text-align: center;
  }

  /* Figma は 280px（16px の文字）。18px（1.125 倍）にしたので幅も 1.125 倍にし、
     Figma と同じ位置で改行させる（280px のままだと「す。」だけの行ができる） */

  .p-flow__lead {
    width: 315px;
    max-width: 100%;
    margin: 21px auto 0;
    color: #000;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    text-align: center;
  }

  /* --- キャリア支援準備金のバナー（Figma SP 1009:108 : x21 / y6777 / 319x433）--- */

  .p-flow__bonus {
    width: auto;
    margin-top: 57px;
  }

  .p-flow__bonus-title {
    width: auto;
    max-width: 100%;
    padding-inline: 20px;
  }

  /* .p-flow__lead と同じ幅にそろえる。
     幅いっぱいに伸ばすと 420〜1023px でカタカナ語の途中で折れる */

  .p-flow__bonus-text {
    width: 315px;
    max-width: calc(100% - 40px);
    margin-inline: auto;
  }

  /* 画像も文字と同じ 20px のガターに収める（320px 端末で左右が詰まるのを防ぐ）。
     PC の 411px のままだと 360px 端末で横に溢れる */

  .p-flow__bonus-figure {
    width: 320px;
    max-width: calc(100% - 40px);
  }

  /* 吹き出しは画像と同じ幅に収める。画面幅を直接参照しない（タブレット帯は zoom が
     掛かるので vw が使えない）ため、基準になる画像の幅をそのまま使う */

  .p-flow__bonus-tip {
    width: 100%;
    padding: 18px 20px;
    font-size: 14px;
    line-height: 26px;
  }

  /* ステップ（y363 起点 / 149px 間隔） */

  .p-flow__steps {
    display: block;
    margin-top: 25px;
    padding-inline: 30px;
  }

  .p-flow__step,
  .p-flow__step:first-child {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: #000;
  }

  .p-flow__step-inner {
    display: block;
    width: 100%;
  }

  /* Step / 01 / 見出し を1行に（x30 / x71 / x115） */

  .p-flow__step-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    height: 40px;
  }

  .p-flow__step-no {
    display: flex;
    align-items: center;
  }

  .p-flow__step-no span {
    width: 41px;
    color: #1660c9;
    font-size: 16px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: 0;
  }

  .p-flow__step-no em {
    width: 44px;
    color: #1660c9;
    font-size: 24px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: 0;
    text-align: left;
  }

  .p-flow__step-title {
    display: block;
    height: auto;
    color: #181818;
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: 0;
  }

  .p-flow__step-text {
    margin-top: 8px;
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0;
  }

  /* ステップ間の矢印（本文の 16px 下 / 次のステップまで 19px） */

  .p-flow__arrow {
    position: static;
    display: block;
    width: 15px;
    height: 10px;
    margin: 16px auto 19px;
    transform: rotate(90deg);
  }

  /* --------------------------------------------------------
     10 cta / job description（Figma y6760〜7241）
     -------------------------------------------------------- */

  .p-cta {
    /* 背景画像の基準幅。360px 基準の比率をこの長さに掛けて配置する。
       ・SP    … 100vw（画面幅）
       ・タブレット … _tablet.scss が zoom 後の設計幅に差し替える
       （vw のままだと zoom が効かず 1.2 倍に膨らんでしまう）
       ※ 画面幅より小さくすると、上端の白いアーチが画面の端まで届かず、
         セクションの中で左に寄って見えるので縮めないこと。 */
    --cw: 100vw;
    position: relative;
    height: auto;
    padding: 120px 20px 56px;
    overflow: hidden;
    background-color: #fff;
  }

  /* 写真＋グラデーションの背景（Figma 459:504 / x-305 y-121 969x790）
     上端の白いアーチが左右対称に見えるよう、常にセクションの中央に置く。
     （Figma の x 座標をそのまま使うと、幅を変えたときに中心がずれる） */

  .p-cta__bg {
    display: block;
    position: absolute;
    left: 50%;
    top: calc(var(--cw) * -33.6111 / 100);
    z-index: 0;
    width: calc(var(--cw) * 269.1667 / 100);
    height: auto;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .p-cta > *:not(.p-cta__bg) {
    position: relative;
    z-index: 1;
  }

  .p-cta__label {
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 40px;
    text-align: center;
  }

  .p-cta__title {
    margin-top: -7px;
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: 0;
  }

  .p-cta__lead {
    margin-top: 30px;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 40px;
  }

  /* 追従ボタンにあったデザインをここへ移した（2 列・画面幅いっぱい） */

  .p-cta__types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 30px;
  }

  .p-cta__type {
    width: auto;
    height: 44px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    /* Figma のトラッキング 4px。末尾にも入るぶんを text-indent で戻して中央に見せる */
    letter-spacing: 4px;
    text-indent: 4px;
    /* 色と枠は PC（_cta.scss）と同じ。両ボタンとも白地・紺文字 */
  }

  .p-cta__type--new, .p-cta__type--mid {
    background-color: #fff;
    color: #040e4e;
  }

  .p-cta__entry {
    display: none;
  }

  /* --------------------------------------------------------
     11 footer（Figma y7241〜8055）
     -------------------------------------------------------- */

  /* PC は ::before の帯で背景を出しているが、SP はフッターが 800px 以上
     あるので帯では足りない（白地に白文字で内容が見えなくなる）。
     フッター自体を青にして帯は使わない。 */

  .l-footer {
    height: auto;
    padding: 40px 20px 22px;
    background-color: #1660c9;
  }

  .l-footer::before {
    display: none;
  }

  .l-footer__logo {
    width: 298px;
    height: 56px;
  }

  /* トップへのリンク（PC の TOP の代わり）。<a> なので block に戻す */

  .l-footer__tagline {
    display: block;
    margin-top: 0;
    font-size: 18px;
    line-height: 40px;
  }

  /* PC のフッターナビ 1列目にある TOP は出さない */

  .l-footer__top {
    display: none;
  }

  /* メニューを開いている間は追従CTAを下へ逃がす。
     .p-fixed-cta は body 直下、ドロワーは .l-page（isolation: isolate）の中なので、
     z-index の大小では前後を入れ替えられない。CTA 自体を画面外へ出す。 */

  .is-menu-open .p-fixed-cta {
    transform: translateY(100%);
    pointer-events: none;
  }

  /* メニューを開いている間は背面をスクロールさせない。
     body を position: fixed にするとスクロール位置が 0 に飛び、
     閉じるときに戻す動きが見えてしまうので、overflow だけで止める。
     この方法ならページはその場に留まったままになる。 */

  .is-menu-open,
  .is-menu-open body {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .l-footer__nav {
    display: none;
  }

  .l-footer__sp-nav {
    display: flex;
    flex-direction: column;
    margin-top: 6px;
  }

  .l-footer__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-top: 7px;
  }

  .l-footer__copyright {
    margin-top: 9px;
    font-size: 12px;
    line-height: 30px;
    text-align: left;
  }
}

/* SP のマーキー（周期 916px / Figma 4144〜4290） */

@keyframes people-marquee-sp {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-916px);
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .l-drawer {
    transition: none;
  }
}

/* SP の退場アニメーション（Figma SP のスロット位置に合わせた終点）
   カード幅 320px / スタック右端 340px なので、
   translateX(340px) でスタックの外に出てから z-index を落とす。 */

@keyframes interview-leave-sp {
  0% {
    transform: translateX(0) translateY(0) scale(1);
    background-color: #e2efff;
    z-index: 4;
  }

  46% {
    transform: translateX(340px) translateY(-8px) scale(0.95);
    background-color: #a8ceff;
    z-index: 4;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  47% {
    z-index: 0;
  }

  100% {
    transform: translateX(0) translateY(-28px) scale(0.81875);
    background-color: #63a6ff;
    z-index: 0;
  }
}

/* ============================================================
   tablet — 768〜1023px（lg 未満）
   ------------------------------------------------------------
   PC の 1920px キャンバスをこの帯で縮小すると、本文 16px が
   6〜8px にまで潰れて読めなくなる（780px で 6.5px）。
   そのため lg 未満は SP の流動レイアウトを土台にして、
   ・JS（initPageScale）が .l-page に zoom: 1.2 を掛けて
     文字・画像を一回り大きくする（幅は w / 1.2 をインラインで指定）
   ・本文カラムは zoom 前 640px（＝表示上 768px）までに抑えて
     1行が長くなりすぎないようにする
   という構成にしている。レイアウトの組み方自体は SP と同じ。

   ※ この中の px は zoom 前の値。実際の表示は 1.2 倍になる。
   ※ zoom は vw に効かないので、画面幅を基準にした指定には
     JS が入れる --tablet-w（= zoom 後の設計幅）を使うこと。
   ============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {
  /* 本文カラム：最大 640px を中央に。余りは左右の余白に回す。
     custom property は使う側で解決されるので 100% は各要素の幅になる。 */

  :root {
    --tablet-gutter: max(20px, calc((100% - 640px) / 2));
  }

  /* --- 左右に余白を持つセクション ---
     .p-hero などクラス指定の padding に負けないよう詳細度を上げる */

  .l-page main > section.p-hero,
  .l-page main > section.p-career,
  .l-page main > section.p-vision,
  .l-page main > section.p-growth,
  .l-page main > section.p-blog,
  .l-page main > section.p-cta,
  .l-page main > section.p-afv,
  .l-page main > section.p-alead,
  .l-page main > section.p-astance,
  .l-page main > section.p-afor,
  .l-page main > section.p-abfv,
  .l-page main > section.p-abmsg,
  .l-page main > section.p-abhist,
  .l-page main > section.p-aboffice,
  .l-page main > section.p-abgroup,
  .l-page main > section.p-abprofile,
  .l-page main > section.p-cfv,
  .l-page main > section.p-cpath,
  .l-page main > section.p-cfield,
  .l-page main > section.p-cai,
  .l-page main > section.p-gfv,
  .l-page main > section.p-gtrain,
  .l-page main > section.p-gsupport,
  .l-footer {
    padding-left: var(--tablet-gutter);
    padding-right: var(--tablet-gutter);
  }

  /* --- 中身が画面端まで伸びるセクション ---
     people はマーキー、interview はスタックが端まで／中央に来るので、
     セクション自体には余白を付けず、テキストだけカラムに合わせる。
     （セクションに padding を付けるとマーキーが中央だけで動いてしまう） */

  .p-people__en,
  .p-people__ja,
  .p-people__lead,
  .p-people__upper,
  .p-flow__en,
  .p-flow__ja,
  .p-flow__bonus-title {
    padding-inline: var(--tablet-gutter);
  }

  .p-flow__steps {
    padding-inline: calc(var(--tablet-gutter) + 10px);
  }

  /* キャッチコピーの SVG は 767px 以下ではカラム幅いっぱい。
     768px 以上は余白が広いので 80% に抑えて中央に置く */

  .p-hero__catch {
    width: 80%;
  }

  /* SP は 280px 固定だが、タブレットではカラム幅に合わせて広げる */

  .p-flow__lead,
  .p-flow__bonus-text {
    width: auto;
    max-width: 460px;
  }

  /* 見出しはカラム幅に 1 行で収まるので、SP 用の改行は解除する */

  .p-flow__bonus-title br {
    display: none;
  }

  /* --- ヘッダー・ドロワーもカラムの端に合わせる --- */

  .l-header__logo,
  .l-tagline {
    left: var(--tablet-gutter);
  }

  .l-header__burger {
    right: var(--tablet-gutter);
  }

  .l-drawer {
    padding-left: var(--tablet-gutter);
    padding-right: var(--tablet-gutter);
  }

  /* --- 画面幅基準で置いているものの基準を差し替える ---
     vw は zoom の影響を受けないので、そのままだと 1.2 倍に膨らむ。
     いずれも「長さ」で渡すこと。% にすると縦方向（top / height）が
     高さ基準で解決されてブロックが潰れる。 */

  /* Growth の写真3点：カラム 640 + 左右のはみ出し 20 = 680px 上限 */

  .p-growth__photos {
    --gw: min(var(--tablet-w, 640px), 680px);
  }

  /* 募集要項の背景（青いボウル型）：設計幅をそのまま基準にする。
     縮めると上端の白いアーチが画面の端まで届かなくなるので倍率は掛けない。 */

  .p-cta {
    --cw: var(--tablet-w, 640px);
  }

  /* 背景カーブも画面幅ではなく設計幅を基準にする。
     （numbers / about のカーブは各ページの SCSS で同じ指定をしている） */

  .p-bg__curve01,
  .p-bg__curve02,
  .p-bg__curve--a1 {
    --bw: var(--tablet-w, 640px);
  }
}

.block{
  display: block;
}

.inline-block{
  display: inline-block;
}

.flex{
  display: flex;
}

.inline-flex{
  display: inline-flex;
}

.hidden{
  display: none;
}

.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.resize{
  resize: both;
}

.items-center{
  align-items: center;
}

.justify-center{
  justify-content: center;
}

.gap-1\.5{
  gap: 0.375rem;
}

.overflow-hidden{
  overflow: hidden;
}

.whitespace-nowrap{
  white-space: nowrap;
}

.rounded-10{
  border-radius: 10px;
}

.rounded-16{
  border-radius: 16px;
}

.rounded-2{
  border-radius: 2px;
}

.rounded-6{
  border-radius: 6px;
}

.rounded-\[8px\]{
  border-radius: 8px;
}

.rounded-card{
  border-radius: 20px;
}

.rounded-pill{
  border-radius: 999px;
}

.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/80{
  background-color: rgb(255 255 255 / 0.8);
}

.bg-y-gray-300{
  --tw-bg-opacity: 1;
  background-color: rgb(217 217 217 / var(--tw-bg-opacity, 1));
}

.bg-y-gray-600{
  --tw-bg-opacity: 1;
  background-color: rgb(100 101 103 / var(--tw-bg-opacity, 1));
}

.bg-y-tag\/50{
  background-color: rgb(224 231 249 / 0.5);
}

.bg-y-blue-grade{
  background-image: linear-gradient(113.836deg, #b0d8ff 3.1197%, #daeafb 48.765%, #f2f5f8 100%);
}

.text-center{
  text-align: center;
}

.font-en{
  font-family: Outfit, "Zen Kaku Gothic New", sans-serif;
}

.text-12{
  font-size: 12px;
}

.text-14{
  font-size: 14px;
}

.text-16{
  font-size: 16px;
}

.text-18{
  font-size: 18px;
}

.text-20{
  font-size: 20px;
}

.text-24{
  font-size: 24px;
}

.text-26{
  font-size: 26px;
}

.text-30{
  font-size: 30px;
}

.text-36{
  font-size: 36px;
}

.text-\[30px\]{
  font-size: 30px;
}

.text-\[46px\]{
  font-size: 46px;
}

.text-\[58px\]{
  font-size: 58px;
}

.text-\[62px\]{
  font-size: 62px;
}

.text-sec-en{
  font-size: 65px;
  line-height: 40px;
  letter-spacing: 1.95px;
}

.text-sec-ja{
  font-size: 26px;
  line-height: 40px;
  letter-spacing: 0.78px;
}

.text-sec-lead{
  font-size: 18px;
  line-height: 34px;
  letter-spacing: 0.32px;
}

.font-bold{
  font-weight: 700;
}

.font-light{
  font-weight: 300;
}

.font-medium{
  font-weight: 500;
}

.font-normal{
  font-weight: 400;
}

.font-semibold{
  font-weight: 600;
}

.leading-20{
  line-height: 20px;
}

.leading-22{
  line-height: 22px;
}

.leading-24{
  line-height: 24px;
}

.leading-26{
  line-height: 26px;
}

.leading-28{
  line-height: 28px;
}

.leading-30{
  line-height: 30px;
}

.leading-32{
  line-height: 32px;
}

.leading-34{
  line-height: 34px;
}

.leading-36{
  line-height: 36px;
}

.leading-38{
  line-height: 38px;
}

.leading-40{
  line-height: 40px;
}

.leading-46{
  line-height: 46px;
}

.leading-50{
  line-height: 50px;
}

.leading-60{
  line-height: 60px;
}

.leading-64{
  line-height: 64px;
}

.leading-\[24px\]{
  line-height: 24px;
}

.leading-\[38px\]{
  line-height: 38px;
}

.leading-\[80px\]{
  line-height: 80px;
}

.leading-\[88px\]{
  line-height: 88px;
}

.tracking-0{
  letter-spacing: 0;
}

.tracking-0\.18{
  letter-spacing: 0.18px;
}

.tracking-0\.28{
  letter-spacing: 0.28px;
}

.tracking-0\.32{
  letter-spacing: 0.32px;
}

.tracking-0\.36{
  letter-spacing: 0.36px;
}

.tracking-0\.42{
  letter-spacing: 0.42px;
}

.tracking-0\.48{
  letter-spacing: 0.48px;
}

.tracking-0\.54{
  letter-spacing: 0.54px;
}

.tracking-0\.6{
  letter-spacing: 0.6px;
}

.tracking-0\.72{
  letter-spacing: 0.72px;
}

.tracking-0\.78{
  letter-spacing: 0.78px;
}

.tracking-0\.9{
  letter-spacing: 0.9px;
}

.tracking-0\.96{
  letter-spacing: 0.96px;
}

.tracking-1\.44{
  letter-spacing: 1.44px;
}

.tracking-1\.6{
  letter-spacing: 1.6px;
}

.tracking-1\.92{
  letter-spacing: 1.92px;
}

.tracking-\[0\.64px\]{
  letter-spacing: 0.64px;
}

.tracking-\[0\.72px\]{
  letter-spacing: 0.72px;
}

.tracking-\[0\.8px\]{
  letter-spacing: 0.8px;
}

.tracking-\[1\.8px\]{
  letter-spacing: 1.8px;
}

.tracking-\[4\.96px\]{
  letter-spacing: 4.96px;
}

.tracking-\[9\.2px\]{
  letter-spacing: 9.2px;
}

.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-y-blue{
  --tw-text-opacity: 1;
  color: rgb(22 96 201 / var(--tw-text-opacity, 1));
}

.text-y-ink{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.text-y-text{
  --tw-text-opacity: 1;
  color: rgb(24 24 24 / var(--tw-text-opacity, 1));
}

.underline{
  text-decoration-line: underline;
}

.underline-offset-4{
  text-underline-offset: 4px;
}

.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hover\:text-y-blue:hover{
  --tw-text-opacity: 1;
  color: rgb(22 96 201 / var(--tw-text-opacity, 1));
}

.hover\:opacity-70:hover{
  opacity: 0.7;
}

@media (max-width: 1023px){
  .fluid\:whitespace-normal{
    white-space: normal;
  }

  .fluid\:text-left{
    text-align: left;
  }

  .fluid\:font-en{
    font-family: Outfit, "Zen Kaku Gothic New", sans-serif;
  }

  .fluid\:text-14{
    font-size: 14px;
  }

  .fluid\:text-16{
    font-size: 16px;
  }

  .fluid\:text-18{
    font-size: 18px;
  }

  .fluid\:text-20{
    font-size: 20px;
  }

  .fluid\:text-22{
    font-size: 22px;
  }

  .fluid\:text-24{
    font-size: 24px;
  }

  .fluid\:text-64{
    font-size: 64px;
  }

  .fluid\:text-\[22px\]{
    font-size: 22px;
  }

  .fluid\:text-\[32px\]{
    font-size: 32px;
  }

  .fluid\:text-\[36px\]{
    font-size: 36px;
  }

  .fluid\:text-sec-ja{
    font-size: 26px;
    line-height: 40px;
    letter-spacing: 0.78px;
  }

  .fluid\:text-sec-ja-sp{
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 0;
  }

  .fluid\:text-sec-lead-sp{
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0;
  }

  .fluid\:font-medium{
    font-weight: 500;
  }

  .fluid\:leading-25{
    line-height: 25px;
  }

  .fluid\:leading-26{
    line-height: 26px;
  }

  .fluid\:leading-28{
    line-height: 28px;
  }

  .fluid\:leading-34{
    line-height: 34px;
  }

  .fluid\:leading-40{
    line-height: 40px;
  }

  .fluid\:leading-64{
    line-height: 64px;
  }

  .fluid\:leading-\[48px\]{
    line-height: 48px;
  }

  .fluid\:leading-\[52px\]{
    line-height: 52px;
  }

  .fluid\:leading-\[56px\]{
    line-height: 56px;
  }

  .fluid\:tracking-0{
    letter-spacing: 0;
  }

  .fluid\:tracking-0\.28{
    letter-spacing: 0.28px;
  }

  .fluid\:tracking-0\.54{
    letter-spacing: 0.54px;
  }

  .fluid\:tracking-0\.56{
    letter-spacing: 0.56px;
  }

  .fluid\:tracking-0\.6{
    letter-spacing: 0.6px;
  }

  .fluid\:tracking-0\.66{
    letter-spacing: 0.66px;
  }

  .fluid\:tracking-1\.2{
    letter-spacing: 1.2px;
  }

  .fluid\:tracking-1\.44{
    letter-spacing: 1.44px;
  }

  .fluid\:tracking-\[-0\.05em\]{
    letter-spacing: -0.05em;
  }

  .fluid\:tracking-\[0\.88px\]{
    letter-spacing: 0.88px;
  }

  .fluid\:tracking-\[1\.92px\]{
    letter-spacing: 1.92px;
  }

  .fluid\:tracking-\[2px\]{
    letter-spacing: 2px;
  }

  .fluid\:tracking-\[3\.6px\]{
    letter-spacing: 3.6px;
  }

  .fluid\:tracking-\[6\.4px\]{
    letter-spacing: 6.4px;
  }

  .fluid\:text-y-ink{
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  }
}