/* =====================================================
  lp-4: 非公開選考枠をご紹介
  移植元: https://careerpark.jp/employ/event/5902/lps/16255
  移植元は Tailwind CDN 製。ユーティリティを静的CSSに書き起こしている。
  ブレークポイント: md=768px / xl=1200px（移植元のカスタム設定）
===================================================== */

:root {
  --primary: #21b7b7;
  --bg-light-gray: #eff3f4;
  --bg-light-blue: #e5f3f3;
  --text-main: #333333;
  --text-dark: #1a3f3f;
  --step-label: #1dbdc0;
}

/* =====================================================
  Reset（Tailwind preflight のうち移植元が依存する分だけ）
===================================================== */
*,
::before,
::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
p,
figure {
  margin: 0;
}

body {
  background: #fff;
  color: var(--text-main);
  font-family: "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

picture {
  display: block;
}

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

/* =====================================================
  Header（ロゴバー）
===================================================== */
/* =====================================================
  メインビジュアル
  背景写真（文字なし）の上に、斜め装飾（SVG）とコピー（CSS）を重ねる。
  デザイン座標系は PC/タブレット 1440x380 / SP 750x510。
  --u が「デザイン1px」の長さ。全ての寸法をこれに掛けて組む。
===================================================== */
.p-mv {
  position: relative;
  width: 100%;
  aspect-ratio: 750 / 510;
  overflow: hidden;
  background: #ebf8ff;
  container-type: inline-size;
}

.p-mv__canvas {
  --u: calc(100cqw / 750);
  --cw: 750;
  --ch: 510;

  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--cw) * var(--u));
  height: calc(var(--ch) * var(--u));
  translate: -50% -50%;
}

.p-mv__photo {
  position: absolute;
  inset: 0;
  background: url("./assets/img/hero-sp.jpg") no-repeat;
  background-image: image-set(
    url("./assets/img/hero-sp.avif") type("image/avif"),
    url("./assets/img/hero-sp.jpg") type("image/jpeg")
  );
  background-size: 100% auto;
}

.p-mv__deco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.p-mv__deco--pc {
  display: none;
}

/* -----------------------------------------------------
  コピー
----------------------------------------------------- */
.p-mv__badge,
.p-mv__lead,
.p-mv__title {
  position: absolute;
  margin: 0;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* 27卒向け（帯は -22.4deg、文字は -9.4deg と傾きが違う） */
.p-mv__badge {
  top: calc(60 * var(--u));
  left: calc(66 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(156 * var(--u));
  height: calc(59 * var(--u));
  will-change: transform;
}

.p-mv__badge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #28d1d4;
  transform: skewX(-22.4deg);
  transform-origin: left top;
}

.p-mv__badge > span {
  position: relative;
  font-size: calc(30 * var(--u));
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  transform: translateX(calc(-11 * var(--u))) skewX(-9.4deg);
}

/* 8月中に内定がほしい方へ */
.p-mv__lead {
  top: calc(144 * var(--u));
  left: calc(50 * var(--u));
  font-size: calc(41 * var(--u));
  color: #1f3d3f;
}

.p-mv__lead > span {
  display: block;
  letter-spacing: -0.061em;
  transform: skewX(-9.4deg);
  transform-origin: left top;
  will-change: transform;
}

/* 下線（両端がフェードする黄色の線）
   .p-mv__lead は left だけの絶対配置なので幅は文字幅（shrink-to-fit）。
   月が2桁になると文字が約22u伸びるため、下線は固定幅ではなく文字幅に追従させる。
   42.8u = 左のはみ出し 26u + 右の余白 16.8u（デザイン実測の 488u を分解した値） */
.p-mv__lead::after {
  content: "";
  position: absolute;
  top: calc(47 * var(--u));
  left: calc(-26 * var(--u));
  width: calc(100% + 42.8 * var(--u));
  height: calc(6 * var(--u));
  transform-origin: left center;
  background: linear-gradient(
    to right,
    rgb(255 236 104 / 0%) 0%,
    rgb(255 236 104 / 80%) 9.6%,
    rgb(255 236 104 / 100%) 17.2%,
    rgb(255 236 104 / 100%) 80.3%,
    rgb(255 236 104 / 32%) 93.4%,
    rgb(255 236 104 / 0%) 100%
  );
}

/* 非公開選考枠をご紹介 */
.p-mv__title {
  top: calc(228 * var(--u));
  left: calc(53 * var(--u));
  line-height: calc(121 * var(--u));
  color: #1a2a2b;
  /* SPは見出しが人物に重なるので、元デザインには白いグローが敷かれている。
     背景画像から剥がしたぶんをテキスト側で持たせる。
     text-shadow は使えない: background-clip:text の塗りは「背景」として
     影より先に描かれるため、影が文字の上に乗って白飛びする。
     drop-shadow なら描画結果のアルファから影を作るので背面に回る。
     1つ目の小さい影で輪郭を太らせてから広い影でぼかすと、
     裾を伸ばさずに縁の濃さだけを上げられる。 */
  filter: drop-shadow(0 0 calc(4 * var(--u)) #fff) drop-shadow(0 0 calc(4 * var(--u)) #fff)
    drop-shadow(0 0 calc(8 * var(--u)) #fff) drop-shadow(0 0 calc(8 * var(--u)) #fff)
    drop-shadow(0 0 calc(8 * var(--u)) #fff);
  transform: skewX(-9.4deg);
  transform-origin: left top;
  will-change: transform;
}

.p-mv__title-main {
  display: inline-block;
  /* background-clip: text の塗り範囲はこの箱に切られる。line-height:1 では
     グリフの下端がはみ出して欠けるので padding で箱を広げ、そのぶん伸びた
     行ボックスがベースラインを押し下げるのを負のマージンで打ち消す */
  margin: -0.25em 0;
  padding: 0.25em 0;
  font-size: calc(96 * var(--u));
  line-height: 1;
  letter-spacing: -0.009em;
  /* 濃紺のベースに、ティールのソフトなハイライトを3つ重ねて
     background-clip: text で文字型に切り抜く。
     縦の%は箱が 1em → 1.5em に広がったぶんを換算済み（旧値×0.667＋16.67） */
  background-image:
    radial-gradient(16% 58.7% at 3% 26%, #37adae 0%, rgb(55 173 174 / 0%) 100%),
    radial-gradient(21% 61.3% at 47% 86%, #37adae 0%, rgb(55 173 174 / 0%) 100%),
    radial-gradient(18% 58.7% at 86% 86%, #37adae 0%, rgb(55 173 174 / 0%) 100%),
    linear-gradient(#1a2a2b, #1a2a2b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-mv__title-sub {
  /* 元デザインは「を」の前にひと呼吸ぶんの空きがある */
  margin-left: calc(6 * var(--u));
  font-size: calc(51 * var(--u));
  letter-spacing: -0.014em;
}

/* SPでは「ご紹介」が2行目に落ち、本文と同じ大きさ・同じ塗りになる */
.p-mv__title-tail {
  display: block;
  /* 親のskewは上から下へ向かって効くので、2行目は行送りぶん右へ戻す */
  /* 行送りの詰め ＋ 塗り範囲を広げた padding のぶんを打ち消す */
  margin-top: calc(-13 * var(--u) - 0.25em);
  padding: 0.25em 0;
  transform: translateX(calc(9 * var(--u)));
  font-size: calc(94 * var(--u));
  line-height: 1;
  letter-spacing: -0.018em;
  background-image:
    radial-gradient(38% 76.7% at 44% 84.7%, #3dbcbd 0%, rgb(61 188 189 / 0%) 100%),
    radial-gradient(38% 76.7% at 76% 84.7%, #3dbcbd 0%, rgb(61 188 189 / 0%) 100%),
    linear-gradient(#1a2a2b, #1a2a2b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* -----------------------------------------------------
  入場アニメーション「光のスイープ」

  背景の白い斜めバンドが左から流れ込み、通過した順に
  バッジ → リード → 下線 → 見出し が点いていく。

  ・写真は動かさない。LCP候補なので遅延させたくない
  ・見出しは filter で白いグローを5枚重ねている。子要素の
    opacity を動かすとフィルタが毎フレーム再計算されるため、
    見出しは1つのまとまりとしてフェードさせる
  ・SVGは transform-box: view-box を指定して % を viewBox
    基準にする。PC(1440)/SP(750) で同じ比率の移動量になる
----------------------------------------------------- */
@keyframes p-mv-sweep {
  from {
    opacity: 0.15;
    transform: translateX(-35%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 写真は遅延なしで薄く入れる。opacityが0のフレームは1枚だけなので
   LCPの記録タイミングをほぼ動かさない（遅延を付けるとそのぶん遅れる） */
@keyframes p-mv-photo-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ティールの装飾は白バンドと同じ方向へ、少し遅れて・浅く動かす。
   主役の掃きに対する追従なので振れ幅は半分にしてある */
@keyframes p-mv-sweep-accent {
  from {
    opacity: 0;
    transform: translateX(-18%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes p-mv-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes p-mv-draw {
  from {
    scale: 0 1;
  }
  to {
    scale: 1 1;
  }
}

.p-mv__deco-band {
  transform-box: view-box;
  animation: p-mv-sweep 0.9s cubic-bezier(0.16, 0.84, 0.28, 1) both;
}

.p-mv__deco-accent {
  transform-box: view-box;
  animation: p-mv-sweep-accent 0.9s cubic-bezier(0.16, 0.84, 0.28, 1) 0.18s both;
}

.p-mv__photo {
  animation: p-mv-photo-in 0.45s ease-out both;
}

.p-mv__badge {
  animation: p-mv-in 0.34s linear 0.22s both;
}

.p-mv__lead {
  animation: p-mv-in 0.34s linear 0.34s both;
}

.p-mv__lead::after {
  animation: p-mv-draw 0.5s cubic-bezier(0.22, 0.72, 0.24, 1) 0.42s both;
}

.p-mv__title {
  animation: p-mv-in 0.4s linear 0.46s both;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .p-mv__title-main,
  .p-mv__title-tail {
    background-image: none;
    color: #1a2a2b;
  }
}

/* =====================================================
  フォーム
===================================================== */
.p-form {
  width: 100%;
  padding: 40px 0 60px;
  background: #fff;
}

.p-form__inner {
  display: flex;
  justify-content: center;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}

.form-box {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow:
    0 5px 10px rgba(26, 59, 77, 0.05),
    rgba(26, 59, 77, 0.1) 0px 24px 32px -16px;
}

.form-box_header {
  padding: 14px;
  border-radius: 8px 8px 0 0;
  background: var(--primary);
  color: #fff;
  text-align: center;
}

.form-box_header > h2 {
  font-size: 18px;
  line-height: 1.5;
}

.form-box_header__subtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 700;
  margin-top: -1px;
}

.form-box_header__deco {
  display: block;
  height: 14px;
  aspect-ratio: 10 / 16.5;
  color: #fff;
}

.form-box_header__deco--flip {
  scale: -1 1;
}

.form-box_wc {
  border-radius: 0 0 10px 10px;
  background: #fff;
}

/* =====================================================
  セクション見出し
===================================================== */
.section-title {
  color: var(--text-main);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.section-title--deco {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* 見出し両脇の2本線。#deco-midashi を currentColor で塗り、右側は反転して使う */
.section-title__deco {
  display: block;
  height: 22px;
  aspect-ratio: 30 / 45;
  color: #26d1d3;
}

.section-title__deco--flip {
  scale: -1 1;
}

.section-title__deco--yellow {
  color: #fff190;
}

.section-title--white {
  color: #fff;
}

/* =====================================================
  CTAボタン
  元は焼き込み画像（sec01-btn / sec03-btn）。ボタン面・下線・シェブロンを
  CSS/SVGに起こしてある。数値はすべて元アセットの実測値（デザインpx）で、
  --u が「デザイン1px」。既定値がSP、768px以降でPCの値に差し替える。
===================================================== */
.cta {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  container-type: inline-size;
  transition: filter 0.3s;
}

.cta:hover {
  filter: brightness(1.05);
}

/* SPで左右20pxのマージンを確保する */
.cta--inset {
  width: calc(100% - 40px);
}

/* --frame-w/h は元アセットの外形（影の余白を含む）。--u はそのデザイン1px。
   画像の max-width:100% と同じく、コンテナが狭いときだけ等倍から縮む。 */
.cta__frame {
  --frame-w: 684;
  --frame-h: 136;
  --u: min(1px, 100cqw / var(--frame-w));

  position: relative;
  display: block;
  width: calc(var(--frame-w) * var(--u));
  height: calc(var(--frame-h) * var(--u));
}

/* 影の余白ぶん（左右7 / 上3 / 下11）内側がボタン面 */
.cta__body {
  position: absolute;
  inset: calc(3 * var(--u)) calc(7 * var(--u)) calc(11 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: calc(9 * var(--u));
  background: linear-gradient(#ff8503, #ff7403);
  box-shadow: 0 calc(5 * var(--u)) calc(6 * var(--u)) rgba(172, 196, 198, 0.88);
}

.cta__shine {
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 10;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-25deg);
  transition: left 0.7s ease-in-out;
  pointer-events: none;
}

.cta:hover .cta__shine {
  left: 150%;
}

/* 元デザインは仮名を詰めて組んである（palt）。切ると和文が1em送りになり
   「をご紹介します！」が14px以上はみ出す。 */
.cta__label {
  color: #fff;
  font-feature-settings: "palt" 1;
  font-size: calc(var(--fs) * var(--u));
  font-weight: 700;
  letter-spacing: calc(var(--ls, 0) * var(--u));
  line-height: 1;
  white-space: nowrap;
  /* 行ボックス中央と元デザインのベースラインのズレを詰める */
  translate: 0 calc(var(--label-dy, 0) * var(--u));
}

/* 「非公開選考枠」だけ大きく、下に薄オレンジの下線 */
.cta__label-strong {
  font-size: calc(var(--fs-strong) * var(--u));
  letter-spacing: calc(var(--ls-strong, 0) * var(--u));
  text-decoration: underline var(--underline-color) solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: calc(var(--underline-w) * var(--u));
  text-underline-offset: calc(var(--underline-offset) * var(--u));
}

.cta__chevron {
  --chev-w: 17;
  --chev-h: 27;

  flex-shrink: 0;
  width: calc(var(--chev-w) * var(--u));
  height: calc(var(--chev-h) * var(--u));
  margin-left: calc(var(--chevron-gap, 0) * var(--u));
  /* 元デザインはシェブロンが行ボックス中央ではなく本文インクの中央に載っている */
  translate: 0 calc(var(--chevron-dy, 0) * var(--u));
}

.cta--sec01 .cta__label {
  --fs: 32.3;
  --ls: 2.03;
  --label-dy: -2;
}

.cta--sec01 .cta__label-strong {
  --fs-strong: 42.4;
  --ls-strong: 3.64;
  --underline-color: #fca841;
  --underline-w: 7;
  --underline-offset: 3;
}

.cta--sec01 .cta__chevron {
  --chevron-gap: 24.8;
  --chevron-dy: 5;
}

.cta--inset .cta__label {
  --fs: 34.9;
  --ls: 3.2;
  --label-dy: -2;
}

.cta--inset .cta__chevron {
  --chevron-gap: 29.4;
  --chevron-dy: 0;
}

/* =====================================================
  お悩み
===================================================== */
.p-worries {
  position: relative;
  padding: 40px 16px;
  background: var(--bg-light-gray);
  text-align: center;
}

.p-worries__inner {
  max-width: 1080px;
  margin: 0 auto;
}

.p-worries__img {
  max-width: 800px;
  margin: 25px auto 0;
  container-type: inline-size;
}

/* =====================================================
  お悩み4分割（c-worryMap）
  元は焼き込み画像（sec01-img）。パネル・矢印・円をCSSに起こしてある。
  数値はすべて元アセットの実測値（デザインpx）で、--u が「デザイン1px」。
  既定値がSP（670x449）、768px以降でPC（776x294）の値に差し替える。

  PCとSPで矢印の向きが90度違う（PCは横向き／SPは縦向き）。針状の三角形は4隅とも
  同じ形の鏡像なので、--wedge-clip を差し替えて scale() で反転する。
===================================================== */
.c-worryMap {
  --cw: 670;
  --ch: 449;
  --u: min(1px, 100cqw / var(--cw));
  --panel-w: 326;
  --panel-h: 135;
  --panel-bg: #477171;
  /* 楔は針状の三角形。--wedge-ix/iy は外接矩形とパネルの内側の角のオフセット
     （正=パネルの内側、負=はみ出す）。--wedge-clip の中間の頂点が基部の幅 */
  --wedge-w: 55;
  --wedge-h: 38;
  --wedge-ix: 103.5;
  --wedge-iy: -38;
  --wedge-clip: polygon(0 0, 60% 0, 100% 100%);
  --circle-x: 235;
  --circle-y: 122.5;
  --doodle-x: 385;
  --doodle-y: 151;
  --doodle-w: 46;
  --doodle-h: 58;
  --fs: 27;
  --lh: 48.5;

  position: relative;
  width: calc(var(--cw) * var(--u));
  height: calc(var(--ch) * var(--u));
  margin: 0 auto;
}

.c-worryMap__circle {
  position: absolute;
  top: calc(var(--circle-y) * var(--u));
  left: calc(var(--circle-x) * var(--u));
  overflow: hidden;
  width: calc(200 * var(--u));
  height: calc(200 * var(--u));
  border-radius: 50%;
  background: #c5d4d5;
}

/* 正方形の人物写真。地色が焼き込んであるので円いっぱいに敷く。
   <picture> が高さ auto だと img の height:100% が auto に落ちるので、
   ラッパー側にも円の寸法を通しておく */
.c-worryMap__circle picture {
  width: 100%;
  height: 100%;
}

.c-worryMap__person {
  display: block;
  width: 100%;
  height: 100%;
}

.c-worryMap__doodle {
  position: absolute;
  top: calc(var(--doodle-y) * var(--u));
  left: calc(var(--doodle-x) * var(--u));
  width: calc(var(--doodle-w) * var(--u));
  height: calc(var(--doodle-h) * var(--u));
}

.c-worryMap__panel {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--panel-w) * var(--u));
  height: calc(var(--panel-h) * var(--u));
  background: var(--panel-bg);
  color: #fff;
  /* 元デザインは漢字もかなも一律1em送り。palt を効かせるとかなだけ詰まって合わない */
  font-size: calc(var(--fs) * var(--u));
  font-weight: 700;
  line-height: calc(var(--lh) * var(--u));
  text-align: center;
}

.c-worryMap__panel::after {
  content: "";
  position: absolute;
  width: calc(var(--wedge-w) * var(--u));
  height: calc(var(--wedge-h) * var(--u));
  background: var(--panel-bg);
  clip-path: var(--wedge-clip);
}

.c-worryMap__panel--tl {
  top: 0;
  left: 0;
}

.c-worryMap__panel--tr {
  top: 0;
  right: 0;
}

.c-worryMap__panel--bl {
  bottom: 0;
  left: 0;
}

.c-worryMap__panel--br {
  right: 0;
  bottom: 0;
}

.c-worryMap__panel--tl::after {
  right: calc(var(--wedge-ix) * var(--u));
  bottom: calc(var(--wedge-iy) * var(--u));
}

.c-worryMap__panel--tr::after {
  bottom: calc(var(--wedge-iy) * var(--u));
  left: calc(var(--wedge-ix) * var(--u));
  transform: scaleX(-1);
}

.c-worryMap__panel--bl::after {
  top: calc(var(--wedge-iy) * var(--u));
  right: calc(var(--wedge-ix) * var(--u));
  transform: scaleY(-1);
}

.c-worryMap__panel--br::after {
  top: calc(var(--wedge-iy) * var(--u));
  left: calc(var(--wedge-ix) * var(--u));
  transform: scale(-1);
}

.p-worries__lead {
  display: flex;
  justify-content: center;
  margin: 36px 0 27px;
}

/* 「そんなあなたに！」254x61 のデザインを --u で組む。
   本文は skewX、圏点と2本の罫線は水平のまま。SP は 0.72 倍（元アセットの表示サイズ）。 */
.c-leadCopy {
  --u: 0.72px;
  --fs: 35.4;

  position: relative;
  width: calc(254 * var(--u));
  height: calc(61 * var(--u));
  color: var(--text-dark);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.c-leadCopy::before,
.c-leadCopy::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #26d1d3;
  content: "";
}

.c-leadCopy::before {
  top: calc(54 * var(--u));
}

.c-leadCopy::after {
  top: calc(59 * var(--u));
}

.c-leadCopy__text {
  --text-top: 11;
  --text-left: 3;

  position: absolute;
  top: calc(var(--text-top) * var(--u));
  left: calc(var(--text-left) * var(--u));
  font-feature-settings: "palt" 1;
  font-size: calc(var(--fs) * var(--u));
  transform: skewX(-9deg);
  transform-origin: left top;
}

.c-leadCopy__em {
  color: var(--step-label);
}

/* 「あなた」の上の圏点。1文字送り（33）を1タイルとして3つ並べる */
.c-leadCopy__dots {
  position: absolute;
  top: 0;
  left: calc(101 * var(--u));
  width: calc(99 * var(--u));
  height: 5px;
  background-image: radial-gradient(circle closest-side, #26d1d3 100%, transparent 100%);
  background-size: calc(33 * var(--u)) 100%;
}

/* =====================================================
  非公開選考枠なら！（メリット）
===================================================== */
.p-merit {
  position: relative;
  padding: 40px 16px;
  background: var(--primary);
}

.p-merit__arrow {
  position: absolute;
  top: -4px;
  left: 50%;
  z-index: 20;
  transform: translateX(-50%);
}

.p-merit__arrowSvg {
  display: block;
  width: 55px;
  height: 20px;
  color: #e9f1f1;
}

.p-merit__inner {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}

.p-merit__title {
  margin-bottom: 25px;
}

.merit-grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 10px;
  max-width: 1080px;
  margin: 0 auto;
  text-align: left;
}

.merit-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  height: 100%;
  padding: 30px;
  background: #fff;
}

.merit-card__pict {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
}

/* アイコンは PC/SP で別画像だったのを1枚（320x320・余白込み）に統一した。
   表示寸法はCSSで持つ。統一前の実寸に合わせると箱は42px（旧SP画像は
   余白が少なく39pxで足りていた）。増えた3pxは本文側のマージンで相殺し、
   本文カラムの幅＝折り返し位置を変えない */
.merit-card__pict img {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.merit-card__body {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  margin-left: 22px;
}

.merit-card h3 {
  margin-bottom: 14px;
  color: var(--text-dark);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
}

.merit-card p {
  flex-grow: 1;
  width: 100%;
  color: var(--text-dark);
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
}

/* =====================================================
  紹介企業実績
===================================================== */
.p-logos {
  padding: 40px 0 48px;
  background: #fff;
  overflow: hidden;
  text-align: center;
}

.p-logos__title {
  margin-bottom: 25px;
}

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.marquee--row1 {
  margin-bottom: 10px;
}

.marquee--row2 {
  margin-bottom: 25px;
}

.marquee__track {
  display: flex;
  width: max-content;
}

.marquee__track--left {
  animation: marquee-scroll 35s linear infinite;
}

/* 右流れは同じキーフレームの逆再生。-50%の定義を1か所に集約しておく。 */
.marquee__track--right {
  animation: marquee-scroll 35s linear infinite reverse;
}

/* 末尾にもgapぶんの余白を足して、トラック幅をちょうど「1セット×2」にする。
   トラック側にgapを持たせると幅が「セット×2 + gap」になり、-50%が
   セット1個ぶんに一致せず折り返しで飛ぶ。 */
.marquee__set {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 15px;
  padding-right: 15px;
}

.marquee__set img {
  width: auto;
  height: 40px;
  object-fit: contain;
}

@keyframes marquee-scroll {
  to {
    transform: translateX(-50%);
  }
}

/* =====================================================
  サービスご利用の流れ
===================================================== */
.p-flow {
  padding: 40px 16px;
  background: var(--bg-light-blue);
}

.p-flow__inner {
  max-width: 1080px;
  margin: 0 auto;
}

.p-flow__title {
  margin-bottom: 0;
}

.flow-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
  padding-top: 40px;
}

.flow-card {
  --card-bg: #fff;

  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: 30px;
  background: var(--card-bg);
  overflow-wrap: break-word;
}

.flow-card:nth-child(even) {
  --card-bg: #f2fafb;
}

.flow-card__pict {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: -60px;
}

/* アイコンはカードの上端にまたがる円の中に置く。元アセットは円を焼き込んで
   いたが、差し替えで透過のアイコンだけになったので円はCSSで描く。
   円の地色はカードと同色なので --card-bg をそのまま使う */
.flow-card__pict img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: var(--card-bg);
  object-fit: contain;
}

.flow-card__head {
  position: relative;
  width: 100%;
  text-align: left;
}

.flow-card__step {
  margin-bottom: 12px;
  color: var(--step-label);
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.flow-card h3 {
  margin-bottom: 20px;
  color: var(--text-dark);
  font-size: 16px;
  font-weight: 700;
}

.flow-card p {
  flex-grow: 1;
  color: var(--text-dark);
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
}

/* Arrow（SP版のみ：テキスト開始位置にあわせて配置） */
.flow-card__arrowSp {
  position: absolute;
  bottom: -25px;
  left: 30px;
  z-index: 10;
  display: flex;
  justify-content: flex-start;
}

/* SPは縦向き（#deco-chevrons-v）、PCは横向き（#deco-chevrons-h）に差し替える */
.flow-card__arrowSvg {
  display: block;
  width: 15px;
  aspect-ratio: 28 / 53;
  color: #26d1d3;
}

/* Arrow（PC版のみ） */
.flow-card__arrowPc {
  display: none;
}

/* =====================================================
  よくあるご質問
===================================================== */
.p-faq {
  padding: 40px 16px;
  background: #fff;
}

.p-faq__inner {
  max-width: 770px;
  margin: 0 auto;
}

.p-faq__title {
  margin-bottom: 30px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}

.faq-item__q,
.faq-item__a {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.faq-item__a {
  margin-top: 15px;
}

/* Q/A の丸バッジ。元は80x80の焼き込み画像。円をCSS、文字をPoppinsで置いてある。
   元画像のキャップハイは直径の 19/80 なので font-size は直径の約0.34倍。
   ウェイトは元画像とインク量が一致する500（700だと1.3〜1.4倍太い）。
   padding-top は上下中央の補正。Poppins は line-height:1 のときキャップハイが
   箱の中心より直径の1.25%ぶん上に来るので、その倍のパディングで押し下げる */
.faq-item__mark {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  padding-top: 0.074em;
  border-radius: 50%;
  background: var(--step-label);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 13.6px;
  font-weight: 500;
  line-height: 1;
}

.faq-item__mark--a {
  background: var(--text-dark);
}

.faq-item h3 {
  padding-top: 8px;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 700;
}

.faq-item p {
  padding-top: 8px;
  color: var(--text-main);
  font-size: 14px;
  line-height: 1.8;
}

.p-faq__cta {
  margin-top: 38px;
  text-align: center;
}

/* =====================================================
  Footer
===================================================== */
/* =====================================================
  Responsive（md: 768px〜）
===================================================== */
@media (min-width: 768px) {
  /* PC/タブレットは 1440x380 のデザイン座標に切り替える */
  .p-mv {
    aspect-ratio: 1440 / 380;
  }

  .p-mv__canvas {
    --u: calc(100cqw / 1200);
    --cw: 1440;
    --ch: 380;
  }

  .p-mv__photo {
    background-image: image-set(
      url("./assets/img/hero-pc.avif") type("image/avif"),
      url("./assets/img/hero-pc.jpg") type("image/jpeg")
    );
  }

  .p-mv__deco--pc {
    display: block;
  }

  .p-mv__deco--sp {
    display: none;
  }

  .p-mv__badge {
    top: calc(83 * var(--u));
    left: calc(201 * var(--u));
    width: calc(125 * var(--u));
    height: calc(47 * var(--u));
  }

  .p-mv__badge > span {
    font-size: calc(24 * var(--u));
    transform: translateX(calc(-9 * var(--u))) skewX(-9.4deg);
  }

  .p-mv__lead {
    top: calc(150 * var(--u));
    left: calc(189 * var(--u));
    font-size: calc(33 * var(--u));
  }

  .p-mv__lead::after {
    top: calc(39 * var(--u));
    left: calc(-7 * var(--u));
    /* 37.7u = 左のはみ出し 7u + 右の余白 30.7u（デザイン実測の 396u を分解した値） */
    width: calc(100% + 37.7 * var(--u));
    height: calc(5 * var(--u));
  }

  .p-mv__title {
    top: calc(210 * var(--u));
    left: calc(190 * var(--u));
    line-height: 1;
    /* PCの見出しは平坦な背景の上なので、元デザインにグローは無い */
    filter: none;
  }

  .p-mv__title-main {
    font-size: calc(83 * var(--u));
  }

  .p-mv__title-sub,
  .p-mv__title-tail {
    font-size: calc(44 * var(--u));
    letter-spacing: -0.014em;
  }

  .p-mv__title-sub {
    margin-left: calc(5 * var(--u));
  }

  /* PCでは「をご紹介」がひと続きの小さな単色テキストになる */
  .p-mv__title-tail {
    display: inline;
    margin-top: 0;
    padding: 0;
    transform: none;
    letter-spacing: normal;
    background-image: none;
    color: #1a2a2b;
  }

  .p-form {
    padding: 60px 0 80px;
  }

  .p-form__inner {
    padding: 0 60px;
  }

  .section-title {
    font-size: 30px;
  }

  .section-title__deco {
    height: 31px;
  }

  .cta--inset {
    width: 100%;
  }

  .cta--sec01 .cta__frame {
    --frame-w: 520;
    --frame-h: 104;
  }

  .cta--inset .cta__frame {
    --frame-w: 461;
    --frame-h: 93;
  }

  .cta--sec01 .cta__label {
    --fs: 24.8;
    --ls: 0;
    --label-dy: -2;
  }

  .cta--sec01 .cta__label-strong {
    --fs-strong: 36;
    --ls-strong: 0;
    --underline-w: 5.6;
    --underline-offset: 3.4;
  }

  .cta__chevron {
    --chev-w: 11.5;
    --chev-h: 18;
  }

  .cta--sec01 .cta__chevron {
    --chevron-gap: 25;
    --chevron-dy: 5;
  }

  .cta--inset .cta__label {
    --fs: 24.2;
    --ls: 0;
    --label-dy: -1;
  }

  .cta--inset .cta__chevron {
    --chevron-gap: 29.5;
    --chevron-dy: -0.5;
  }

  .p-worries {
    padding: 64px 60px;
  }

  .p-worries__img {
    margin-top: 40px;
  }

  .c-worryMap {
    --cw: 776;
    --ch: 294;
    --panel-w: 248;
    --panel-h: 127;
    --wedge-w: 61;
    --wedge-h: 49;
    --wedge-ix: -61;
    --wedge-iy: 12;
    --wedge-clip: polygon(0 0, 0 51%, 100% 100%);
    --circle-x: 288;
    --circle-y: 47.5;
    --doodle-x: 419;
    --doodle-y: 43;
    --doodle-w: 39;
    --doodle-h: 56;
    --fs: 17.4;
    --lh: 30;
  }

  .c-leadCopy {
    --u: 1px;
  }

  .c-leadCopy__dots {
    height: 6px;
  }

  .p-merit {
    padding: 56px 60px 64px;
  }

  .p-merit__arrowSvg {
    width: 71px;
    height: 31px;
  }

  .p-merit__inner {
    margin-top: 20px;
  }

  .p-merit__title {
    margin-bottom: 40px;
  }

  .merit-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 0;
    column-gap: 10px;
    padding-top: 40px;
  }

  .merit-card {
    flex-direction: column;
    padding: 30px 40px 40px;
  }

  .merit-card__pict {
    width: 100%;
    margin-top: -70px;
  }

  /* PCはカードの上端にまたがる白い円の中に置く。円は元画像に焼き込まれて
     いたのでCSSに移した。円(120)は picture 側で作り、img は素の箱(64)のまま
     中央に置く。img に border-radius を持たせるとアイコン自体が円でクリップ
     される（＝角が切れる）ため、クリップ対象にしない */
  .merit-card__pict picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #fff;
  }

  .merit-card__pict img {
    width: 64px;
    max-width: none;
    height: 64px;
  }

  .merit-card__body {
    width: 100%;
    margin-left: 0;
  }

  .merit-card h3 {
    margin-top: 40px;
    margin-bottom: 12px;
    font-size: 18px;
  }

  .merit-card p {
    font-size: 16px;
  }

  .u-sp {
    display: none;
  }

  .p-logos {
    padding: 90px 0 48px;
  }

  .p-logos__title {
    margin-bottom: 70px;
  }

  .marquee--row1,
  .marquee--row2 {
    margin-bottom: 60px;
  }

  .marquee__set {
    gap: 30px;
    padding-right: 30px;
  }

  .marquee__set img {
    height: 64px;
  }

  .p-flow {
    padding: 80px 60px;
  }

  .p-flow__title {
    margin-bottom: 60px;
  }

  .flow-grid {
    grid-template-columns: repeat(5, 1fr);
    row-gap: 0;
  }

  .flow-card {
    padding: 0 30px 40px;
  }

  .flow-card__pict {
    margin-top: -40px;
  }

  /* 元アセットは91x91だった。差し替えで273x273になり intrinsic 任せだと
     3倍で描画されるので、デザイン寸法を明示する */
  .flow-card__pict img {
    width: 91px;
    max-width: none;
    height: 91px;
  }

  .flow-card__head {
    margin-top: 20px;
    text-align: center;
  }

  .flow-card__step {
    margin-bottom: 1px;
    font-size: 16px;
  }

  .flow-card h3 {
    margin-bottom: 16px;
    font-size: 20px;
  }

  .flow-card p {
    font-size: 16px;
  }

  .flow-card__arrowSp {
    display: none;
  }

  .flow-card__arrowPc {
    position: absolute;
    top: 50%;
    left: -30px;
    z-index: 10;
    display: flex;
    justify-content: center;
    transform: translate(-50%, -50%);
  }

  .flow-card__arrowSvg {
    width: 31px;
    aspect-ratio: 31 / 17;
  }

  .p-faq {
    padding: 80px 60px;
  }

  .p-faq__title {
    margin-bottom: 60px;
  }

  .faq-list {
    row-gap: 50px;
  }

  .faq-item__a {
    margin-top: 30px;
  }

  .faq-item__mark {
    width: 50px;
    height: 50px;
    font-size: 17px;
  }

  .faq-item h3,
  .faq-item p {
    font-size: 16px;
  }

  .p-faq__cta {
    margin-top: 60px;
  }
}

/* =====================================================
  Responsive（xl: 1200px〜）
===================================================== */
@media (min-width: 1200px) {
  /* 1200px以上は 1440x380 を等倍で中央配置する */
  .p-mv {
    height: 380px;
    aspect-ratio: auto;
  }

  .p-mv__canvas {
    --u: 1px;
  }

  .p-form__inner {
    padding: 0;
  }

  .p-worries {
    padding-right: 0;
    padding-left: 0;
  }

  .p-merit {
    padding-right: 0;
    padding-left: 0;
  }

  .p-flow {
    padding-right: 0;
    padding-left: 0;
  }

  .p-faq {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .p-mv__photo,
  .p-mv__deco-band,
  .p-mv__deco-accent,
  .p-mv__badge,
  .p-mv__lead,
  .p-mv__lead::after,
  .p-mv__title {
    animation: none;
  }

  .marquee__track--left,
  .marquee__track--right {
    animation: none;
  }
}