/* LP: erabu（P1「見て・比べて・選ぶ」仮説）固有スタイル。

   画面イメージは、デモコンソール（talent-sourcing-demo）を実際に操作して
   録画・撮影したもの。素材の作り方は creatives/briefs/erabu.md を見ること。

   ★ 動画・画像に出てくる人物・会社名・条件・数値はすべて架空のサンプル。
     実在候補者の掲載同意は「社内 / 受入企業に限定公開」までで、公開LPは
     同意範囲外（ADR-0031）。
   ★ 色は tokens.css の変数のみ。生のカラーコードを足さない。 */

/* ============ ヒーロー：副CTA（デモを触る） ============ */

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
.btn--demo {
  min-height: 56px;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  background: var(--paper);
  border-color: var(--brand-on-light);
  border-width: 2px;
  color: var(--brand-on-light);
  font-size: var(--step-0);
}
.btn--demo:hover {
  background: var(--brand-faint);
}
.btn--demo::before {
  content: "▷";
  font-size: 0.85em;
}
@media (max-width: 860px) {
  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .hero__ctas .btn--demo {
    display: flex;
    max-width: 30rem;
    margin-inline: auto;
    width: 100%;
  }
}

/* ============ ヒーローの「並んでいる人」 ============
   たくさんいて、その中から選べる ―― を文で言わずに見せる。
   実画面から切り出した候補者カード50人ぶんを3本の帯にして、速さも向きも変えて流す。

   組み方は「文字は左、帯は右へ抜ける」。中央に白いかすみを置くと帯がほぼ消えるので、
   かすみは横方向にして、文字が乗る左側だけを白く抜き、右側はカードをそのまま見せる。
   カードの隙間は透過（帯は yuva420p）。地のグラデーションがそのまま透ける。 */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
}

.wall {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  opacity: 0.9;
  pointer-events: none;
  /* 右端で切れるのが見えないよう、そこだけ薄く落とす。
     マスクは色ではなく不透明度しか見ていないので、地の色トークンをそのまま使う */
  -webkit-mask-image: linear-gradient(to right, var(--ink) 88%, transparent);
  mask-image: linear-gradient(to right, var(--ink) 88%, transparent);
}
.wall__row {
  overflow: hidden;
}
.wall__track {
  display: flex;
  width: max-content;
  animation: wall-slide 78s linear infinite;
}
.wall__track img {
  display: block;
  width: 1540px; /* 2倍解像度の帯を等倍で置く＝カード140px・左右14pxの余白つき */
  height: auto;
}
/* 行ごとに速さと向きを変える。同じ動きが3本並ぶと機械に見える */
.wall__row--back .wall__track {
  animation-duration: 96s;
  animation-direction: reverse;
}
.wall__row--third .wall__track {
  animation-duration: 86s;
}
/* トラックには同じ帯が2枚入っている。-50% ＝ ちょうど1枚ぶんなので、
   帯の表示サイズを変えても継ぎ目が飛ばない（幅を px で書くと両方直す羽目になる） */
@keyframes wall-slide {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wall__track {
    animation: none;
  }
}

/* 文字が乗る左側を白く抜く。透明への補間だけで作り、生の色コードを使わない */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--paper) 0%,
    var(--paper) 34%,
    transparent 72%
  );
}

.hero__lead {
  position: relative;
  z-index: 2;
  max-width: 34em;
  margin-inline: 0;
  text-align: left;
}
.hero__lead h1 {
  text-align: left;
}
.hero__lead .hero__sub {
  max-width: 34em;
}
.hero__lead .cta-note {
  max-width: 30em;
}
.hero__lead .cta-note {
  text-align: left;
}
.hero__cost-link {
  margin: 0.45rem 0 0;
  font-size: var(--step--1);
  font-weight: 700;
}
.hero__cost-link a::after,
.faq__cost-link a::after {
  content: " →";
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}
.hero__ctas .btn--cta {
  max-width: 22rem;
}
.wall__note {
  max-width: 30em;
  margin: 1.4rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.7;
}

/* 狭い画面。左右に振り分ける余地がないので、帯そのものを薄くして文字を上に置く。
   かすみは上下だけにし、文字側には白い光背を敷いて読みやすさを担保する。
   読者は50〜70代。写真の上に文字が乗って読みにくい状態にはしない。 */
@media (max-width: 860px) {
  .hero__lead {
    max-width: none;
  }
  .hero__scrim {
    background: linear-gradient(
      to bottom,
      var(--paper) 5%,
      transparent 32%,
      transparent 68%,
      var(--paper) 97%
    );
  }
  .wall {
    opacity: 0.3;
    -webkit-mask-image: linear-gradient(to right, var(--ink) 92%, transparent);
    mask-image: linear-gradient(to right, var(--ink) 92%, transparent);
  }
  .hero__lead h1,
  .hero__lead .hero__sub,
  .hero__lead .cta-note {
    text-shadow: 0 0 10px var(--paper), 0 0 22px var(--paper), 0 0 34px var(--paper);
  }
  /* 小さく薄い注記は光背では足りないので、地を敷く */
  .wall__note {
    display: inline-block;
    padding: 0.45rem 0.85rem;
    border-radius: 10px;
    background: var(--paper);
  }
  .hero__ctas .btn--cta,
  .hero__ctas .btn--demo {
    max-width: none;
    width: 100%;
  }
}
/* 狭い画面でも3本とも出す（「たくさんいる」が帯の役目なので、本数を削ると意味が落ちる）。
   代わりにカードを小さくして、3本ぶんが最初の画面に収まる高さにする。
   940px ＝ 帯1本 147px。3本＋隙間で 450px。iPhone SE（667px）でも折り返しの上に収まる。 */
@media (max-width: 760px) {
  .wall {
    gap: 3px;
  }
  /* 幅ではなく高さで決める。3本でヒーローの高さを埋めきるので、上下に地色が余らない。
     カードは1枚152pxほどになり、顔が見える大きさになる */
  .wall__row {
    flex: 1 1 0;
    min-height: 0;
  }
  .wall__track {
    height: 100%;
  }
  .wall__track img {
    width: auto;
    max-width: none;
    height: 100%;
  }
}

/* ============ これまでとの違い ============
   中央に番号の背骨を1本立て、左＝これまで／右＝Miseru Link を突き合わせる。
   番号を共有していることが肝で、「同じ順番の、中身だけが入れ替わる」と読める。
   左右それぞれに面を敷いて背骨を2枚で挟む（左は沈み、右は明るい）。
   番号を大きく・線を太くしてあるのは、読者が50〜70代でほぼスマホだから。 */

.swap {
  --spine: 4.6rem;
  max-width: 50em;
  margin: 2.5rem auto 0;
}
.swap__head,
.swap__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--spine) minmax(0, 1fr);
  gap: 0 0.6rem;
  align-items: stretch;
}
.swap__head {
  margin-bottom: 0.5rem;
}
.swap__head p {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.swap__head p:first-child {
  padding-right: 1.1rem;
  text-align: right;
  color: var(--muted);
}
.swap__head p:last-child {
  grid-column: 3;
  padding-left: 1.1rem;
  color: var(--brand-on-light);
}

/* 左＝これまで。沈める */
.swap__a {
  margin: 0;
  padding: 1.5rem 1.1rem;
  background: var(--paper-2);
  text-align: right;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: 1.5;
}
/* 右＝Miseru Link。明るくする */
.swap__b {
  margin: 0;
  padding: 1.5rem 1.1rem;
  background: var(--brand-faint);
  color: var(--ink);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.5;
}
/* 角丸は上下とも。:first-of-type は「兄弟の中で最初の div」なので
   .swap__head に取られて一度も当たらない。見出しの次の行を名指しする。 */
.swap__head + .swap__row .swap__a { border-radius: var(--radius) var(--radius) 0 0; }
.swap__head + .swap__row .swap__b { border-radius: var(--radius) var(--radius) 0 0; }
.swap__row:last-of-type .swap__a { border-radius: 0 0 var(--radius) var(--radius); }
.swap__row:last-of-type .swap__b { border-radius: 0 0 var(--radius) var(--radius); }

/* 中央の背骨。番号は左右で共有する */
.swap__n {
  position: relative;
  display: grid;
  place-items: center;
}
.swap__n::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  margin-left: -2px;
  background: var(--brand-wash);
}
.swap__head + .swap__row .swap__n::before { top: 50%; }
.swap__row:last-of-type .swap__n::before { bottom: 50%; }
.swap__n span {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: 3px solid var(--brand-line);
  background: var(--paper);
  color: var(--brand-on-light);
  font-family: var(--font-brand);
  font-size: 1.3rem;
  font-weight: 600;
}

/* お金の行。ここが結論なので、丸は行動の色にして、右の面を一段濃くする */
.swap__row--money .swap__n span {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
}
.swap__row--money .swap__a,
.swap__row--money .swap__b {
  padding-top: 1.4rem;
  font-size: var(--step-0);
}
.swap__row--money .swap__b {
  background: var(--brand-wash);
}
.swap__row--money small {
  display: block;
  font-size: 0.78em;
  font-weight: 400;
  color: var(--muted);
}
.swap__row--money .swap__b small {
  color: var(--brand-on-light);
}

.swap-note {
  max-width: 50em;
  margin: 1.75rem auto 0;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.9;
}

@media (max-width: 640px) {
  /* 左右の文が入る幅を確保するため、背骨と内側の余白を詰める */
  .swap {
    --spine: 3rem;
  }
  .swap__head,
  .swap__row {
    gap: 0 0.4rem;
  }
  .swap__head p:first-child { padding-right: 0.6rem; }
  .swap__head p:last-child { padding-left: 0.6rem; }
  .swap__a,
  .swap__b {
    padding: 0.95rem 0.6rem;
    font-size: var(--step--1);
  }
  .swap__n span {
    width: 2.4rem;
    height: 2.4rem;
    border-width: 2px;
    font-size: 0.95rem;
  }
  .swap__n::before { width: 3px; margin-left: -1.5px; }
  .swap__row--money .swap__a,
  .swap__row--money .swap__b { font-size: 0.8rem; }
}

/* ============ 見出し ============
   共通の .sec-title は下にアンバーの短い線が入る。全セクションに付くと
   同じ律動が8回続いて、かえって読み飛ばされる。要所以外は線を外す。 */

.sec-title--plain::after {
  content: none;
}
.sec-title--plain {
  margin-bottom: 0.5rem;
}

/* ============ 「やることは3つだけ」 ============
   非ITの読者が最初の20秒で全体像をつかむための章。ここだけは、ほかのどの章より先に読まれてよい。
   面を「薄いブランド色 → 濃いブランド色 → 夜」と進め、最後の「面接・会う」だけ
   チャコール＋アンバーにして到達点に見せる。右下の大きな数字は地の模様（読ませない）。 */

.three {
  --mark-b: -0.34em; /* 面の下端から、数字をどれだけ上げるか */
  --mark-s: 7.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.7rem, 1.6vw, 1rem);
  margin-top: 2.5rem;
}
.three > li {
  position: relative;
  overflow: hidden;
  padding: 1.6rem 1.4rem 2.6rem;
  border-radius: var(--radius-xl);
  background: var(--brand-faint);
}
.three > li:nth-child(2) {
  background: var(--brand-wash);
}
.three > li:nth-child(3) {
  background: var(--ink);
  color: var(--dark-text);
}
.three__step {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 0 0 0.7rem;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  background: var(--brand-on-light);
  color: var(--paper);
  font-family: var(--font-brand);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.three > li:nth-child(3) .three__step {
  background: var(--accent);
  color: var(--ink);
}
.three h3 {
  position: relative;
  z-index: 1;
  font-size: var(--step-2);
  line-height: 1.3;
}
.three > li:nth-child(3) h3 {
  color: var(--paper);
}
.three p:not(.three__step) {
  position: relative;
  z-index: 1;
  margin: 0.6rem 0 0;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.9;
}
.three > li:nth-child(3) p:not(.three__step) {
  color: var(--dark-text);
}
/* 地の数字。面の右下に沈める。下は切れていてよい（透かしなので） */
.three__mark {
  position: absolute;
  right: 0.5rem;
  bottom: var(--mark-b);
  z-index: 0;
  color: color-mix(in srgb, var(--brand-on-light) 14%, transparent);
  font-family: var(--font-brand);
  font-size: var(--mark-s);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  pointer-events: none;
}
.three > li:nth-child(3) .three__mark {
  color: color-mix(in srgb, var(--accent) 22%, transparent);
}
.three__close {
  margin: 2rem auto 0;
  text-align: center;
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.7;
}
@media (max-width: 720px) {
  .three {
    grid-template-columns: minmax(0, 1fr);
    --mark-s: 6rem;
  }
}

/* 業種。「うちの仕事も入っている」がひと目で分かればよい */
.fields {
  max-width: 46em;
  margin: 2.5rem auto 0;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  text-align: center;
}
.fields__label {
  margin: 0 0 0.9rem;
  font-size: var(--step-0);
  font-weight: 700;
}
.fields__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.fields__list li {
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: var(--brand-faint);
  color: var(--brand-on-light);
  font-size: var(--step--1);
  font-weight: 700;
}

/* ============ お悩み ============
   夜の面はページの区切りとして残し、悩み自体は装飾のない1列の罫線リストにする。 */
.pains {
  max-width: 44rem;
  margin-top: 2.6rem;
  margin-right: auto;
  margin-left: auto;
  border-top: 1px solid var(--dark-line);
}
.pains li {
  position: relative;
  padding: 1.05rem 0.25rem 1.05rem 1.6rem;
  border-bottom: 1px solid var(--dark-line);
  color: var(--dark-text);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.6;
}
.pains li::before {
  content: "";
  position: absolute;
  top: 1.55rem;
  left: 0.25rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
}
.bridge {
  margin-top: 2.6rem;
  text-align: center;
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.7;
}
/* ============ 用語のいいかえ ============
   「特定技能」「N4」で止まる読者が必ずいる。画面の説明の直後に置いて、
   その場で引けるようにする。 */

.glossary {
  max-width: 46em;
  margin: clamp(3rem, 7vw, 4.5rem) auto 0;
  padding: 1.5rem 1.6rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.glossary__title {
  margin-bottom: 1rem;
  font-size: var(--step-1);
}
.glossary__title::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.95em;
  margin-right: 0.55em;
  vertical-align: -0.08em;
  border-radius: 2px;
  background: var(--accent);
}
.glossary dl > div {
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr);
  gap: 0.5rem 1rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--line);
}
.glossary dt {
  font-weight: 700;
  color: var(--brand-on-light);
}
.glossary dd {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.9;
}
@media (max-width: 560px) {
  .glossary dl > div {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

/* ============ 価値のかたまり ============
   画面の説明にしない。読者の口から出る不安（.value__q）を先に置き、
   その答え（.value__h）を見出しにして、画面は証拠として下に置く。
   だから見出しは「探す」「見る」ではなく「何人いるかが分かります」になる。 */

.value {
  margin-top: clamp(3.5rem, 8vw, 5.5rem);
}
/* 読者自身のことば。かぎかっこと色を落として、地の文と区別する */
.value__q {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.6;
}
.value__q::before {
  content: "「";
}
.value__q::after {
  content: "」";
}
.value__h {
  max-width: 20em;
  font-size: var(--step-3);
  line-height: 1.45;
}
.value__h::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 0.9em;
  margin-right: 0.55em;
  vertical-align: -0.06em;
  border-radius: 2px;
  background: var(--accent);
}
.value__p {
  max-width: 38em;
  margin: 1.1rem 0 0;
  color: var(--text-muted);
  line-height: 1.95;
}
.value__close {
  margin: clamp(3rem, 7vw, 4rem) auto 0;
  text-align: center;
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.7;
}

/* ============ 第5章のデモ画面 ============
   F-7で固めた「1つのウィンドウの中に、画面をHTMLで描く」構成。
   モバイルでは高さを抑え、ウィンドウの中だけを縦に動かせるようにする。 */

.proof-window {
  position: relative;
  overflow: hidden;
  margin-top: 1.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-md);
}
.proof-window__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.7rem;
  padding: 0.6rem 0.9rem;
  background: var(--ink);
}
.proof-window__bar > span {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--ink-soft);
}
.proof-window__bar > span:first-child {
  background: var(--accent);
}
.proof-window__bar b {
  margin-left: 0.45rem;
  color: var(--dark-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.proof-window__body {
  padding: clamp(1rem, 3vw, 1.6rem);
  background: var(--paper-2);
}
.proof-window__body--flush {
  padding: 0;
}
.proof-scroll-hint {
  display: none;
}
/* F-7で決めたデモ部品。scratchの寸法・並び・操作をLPでも変えない。 */
.proof-window__body {
  padding: 1.2rem;
}
.proof-window__body--profile {
  padding: 0;
  background: transparent;
}

/* 働きたい人の無限横スクロール */
.candidate-marquee__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) 3%, var(--ink) 97%, transparent);
  mask-image: linear-gradient(to right, transparent, var(--ink) 3%, var(--ink) 97%, transparent);
}
.candidate-marquee__viewport::-webkit-scrollbar {
  display: none;
}
.candidate-marquee__viewport.is-dragging {
  cursor: grabbing;
}
.candidate-marquee__track {
  display: flex;
  gap: 0.9rem;
  width: max-content;
  padding: 0.2rem;
}
.demo-candidate {
  position: relative;
  overflow: hidden;
  width: 15rem;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.demo-candidate > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center top;
}
.demo-candidate > div {
  padding: 0.5rem 0.56rem 0.63rem;
}
.demo-candidate strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.89rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo-candidate strong small {
  margin-left: 0.25rem;
  color: var(--muted);
  font-size: 0.88em;
  font-weight: 400;
}
.demo-candidate p {
  overflow: hidden;
  margin: 0.13rem 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo-candidate > div > span {
  display: inline-block;
  margin-top: 0.38rem;
  padding: 0.13rem 0.45rem;
  border-radius: 3px;
  background: var(--success-faint);
  color: var(--success);
  font-size: 0.72rem;
  font-weight: 700;
}
.demo-candidate > div > small {
  display: block;
  margin-top: 0.25rem;
  color: var(--ink-soft);
  font-size: 0.75rem;
}
.demo-candidate__star {
  position: absolute;
  top: 0.31rem;
  right: 0.31rem;
  display: grid;
  place-items: center;
  width: 3.13rem;
  height: 3.13rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  color: var(--ink-soft);
  font-size: 1.1rem;
  pointer-events: none;
}

/* 人物プロフィール */
.profile-evidence {
  padding: 1rem;
  border-radius: 12px;
  background: var(--paper-2);
}
.profile-evidence .demo-card {
  padding: 1rem 1.13rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.profile-evidence .demo-card + .demo-card {
  margin-top: 0.75rem;
}
.profile-evidence .demo-card > h4 {
  margin: 0 0 0.7rem;
  font-size: 1.05rem;
}
.profile-head {
  display: flex;
  align-items: flex-start;
  gap: 1.13rem;
  flex-wrap: wrap;
}
.profile-head__photo {
  overflow: hidden;
  width: 8.13rem;
  height: 8.13rem;
  flex: none;
  border-radius: 12px;
  background: var(--paper-2);
}
.profile-head__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.profile-head__who {
  min-width: 0;
  flex: 1 1 18.75rem;
}
.profile-head__who h4 {
  margin: 0;
  font-size: 1.72rem;
}
.profile-head__who > p {
  margin: 0.31rem 0 0;
  color: var(--muted);
  font-size: 0.98rem;
}
.demo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  margin-top: 0.63rem;
}
.demo-chips > span {
  display: inline-block;
  padding: 0.13rem 0.63rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 0.9rem;
}
.demo-chips > span i {
  margin-right: 0.38rem;
  color: var(--ink-soft);
  font-size: 0.91em;
  font-style: normal;
}
.demo-chips > .demo-badge {
  border-color: transparent;
  background: var(--success-faint);
  color: var(--success);
  font-weight: 700;
}
.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23.44rem;
  gap: 1rem;
}
.profile-copy > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.95;
}
.profile-video {
  position: relative;
  display: flex;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 10px;
  background: var(--profile-image) center top / cover;
  color: var(--paper);
}
.profile-video::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 42%, transparent);
}
.profile-video span,
.profile-video strong {
  position: relative;
}
.profile-video span {
  display: grid;
  place-items: center;
  width: 3.13rem;
  height: 3.13rem;
  padding-left: 0.18rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  color: var(--ink);
}
.profile-video strong {
  font-size: 0.9rem;
}
.profile-scenes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 15.31rem));
  gap: 0.56rem;
  justify-content: start;
}
.profile-scenes img {
  display: block;
  width: 100%;
  height: 9.25rem;
  border-radius: 10px;
  object-fit: cover;
}
.teacher-note > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.01rem;
  line-height: 2;
}
.teacher-note > small {
  display: block;
  margin-top: 0.7rem;
  padding-top: 0.56rem;
  border-top: 1px solid var(--paper-2);
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-align: right;
}

/* 日本語力：レーダー、8回の推移、現場項目 */
.language-evidence {
  min-width: 0;
}
.language-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  align-items: start;
  margin: 0.9rem 0;
}
.language-radar h4,
.language-trend h4,
.work-language > h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.44rem;
  font-size: 1.05rem;
}
.language-trend h4 small,
.work-language > h4 small {
  color: var(--muted);
  font-size: 0.85em;
  font-weight: 400;
}
.radar-chart,
.trend-chart {
  display: block;
  max-width: 100%;
  height: auto;
}
.radar-chart {
  margin-inline: auto;
}
.chart-grid polygon,
.chart-grid line {
  fill: none;
  stroke: var(--line);
}
.chart-target {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-dasharray: 5 3;
}
.chart-score {
  fill: color-mix(in srgb, var(--brand-on-light) 15%, transparent);
  stroke: var(--brand-on-light);
  stroke-width: 2;
  stroke-linejoin: round;
}
.chart-points circle {
  fill: var(--brand-on-light);
}
.chart-labels text {
  fill: var(--ink-soft);
  font-size: 11.5px;
}
.chart-labels tspan {
  fill: var(--ink);
  font-weight: 700;
}
.chart-legend {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}
.chart-legend i {
  width: 1.5rem;
  border-top: 2px dashed var(--accent);
}
.trend-chart {
  width: 100%;
  max-width: 23.88rem;
  margin: 0.13rem auto 0;
}
.trend-grid line {
  stroke: var(--paper-2);
}
.trend-grid text,
.trend-dates text {
  fill: var(--ink-soft);
  font-size: 8.5px;
}
.trend-grid text,
.trend-target-label {
  text-anchor: end;
}
.trend-target {
  stroke: var(--accent);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
}
.trend-target-label {
  fill: var(--accent-deep);
  font-size: 8.5px;
}
.trend-line {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trend-points circle {
  fill: var(--paper);
  stroke: var(--brand);
  stroke-width: 1.6;
}
.trend-points .trend-points__last {
  fill: var(--brand-on-light);
  stroke: none;
}
.trend-score {
  fill: var(--brand-on-light);
  font-size: 10px;
  font-weight: 700;
  text-anchor: end;
}
.trend-note {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.7;
}
.work-language {
  display: block;
}
.work-language__items {
  display: grid;
  gap: 0.44rem;
}
.work-language__items article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.19rem 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0.69rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.work-language__items article > div {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 0.56rem;
}
.work-language__items article > div > strong {
  font-size: 0.91rem;
}
.work-language__items article > div > span {
  padding: 0.13rem 0.56rem;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}
.work-language__items article > div > span.is-support {
  background: var(--accent-faint);
  color: var(--accent-on-light);
}
.work-language__items article > p {
  grid-column: 1;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}
.work-language__items article > small {
  grid-area: 1 / 2 / 3;
  align-self: center;
  color: var(--brand-on-light);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .language-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .candidate-marquee__track .demo-candidate {
    width: 12.5rem;
  }
  .profile-evidence {
    padding: 0.75rem;
  }
  .profile-evidence .demo-card {
    padding: 0.88rem 0.81rem;
  }
  .profile-head {
    gap: 0.81rem;
  }
  .profile-head__photo {
    width: 5.94rem;
    height: 5.94rem;
  }
  .profile-head__who h4 {
    font-size: 1.31rem;
  }
  .profile-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .profile-scenes {
    grid-column: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.44rem;
  }
  .profile-scenes img {
    height: 6.56rem;
  }
  .work-language__items article {
    grid-template-columns: minmax(0, 1fr);
  }
  .work-language__items article > small {
    grid-area: auto;
    margin-top: 0.2rem;
    white-space: normal;
  }
}

/* 職場と暮らしの求人票 */
.job-screen {
  background: var(--paper);
}
.job-hero {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 8 / 3;
  min-height: 17.5rem;
}
.job-hero::after {
  content: "";
  position: absolute;
  inset: 42% 0 0;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ink) 72%, transparent));
}
.job-hero > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
}
.job-hero figcaption {
  position: absolute;
  z-index: 1;
  right: clamp(1.1rem, 3vw, 2rem);
  bottom: 1.3rem;
  left: clamp(1.1rem, 3vw, 2rem);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  color: var(--paper);
}
.job-hero figcaption span {
  flex: none;
  padding: 0.2rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--paper) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 38%, transparent);
  font-size: 0.68rem;
  font-weight: 700;
}
.job-hero figcaption strong {
  font-size: clamp(1rem, 2vw, 1.3rem);
  line-height: 1.45;
  text-shadow: 0 1px 4px var(--ink);
}
.job-screen__content {
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 2.6rem);
}
.job-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.job-heading > div:first-child > p {
  margin: 0 0 0.3rem;
  color: var(--brand-on-light);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.job-heading h4 {
  margin: 0;
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  line-height: 1.45;
}
.job-heading > div:first-child > span {
  display: block;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.7;
}
.job-heading .ui-chips {
  justify-content: flex-end;
}
.job-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.4rem 0 0;
  padding: 0.9rem 0;
  border-block: 1px solid var(--line);
}
.job-facts > div {
  padding: 0 1rem;
}
.job-facts > div:first-child {
  padding-left: 0;
}
.job-facts > div + div {
  border-left: 1px solid var(--line);
}
.job-facts dt {
  color: var(--muted);
  font-size: 0.7rem;
}
.job-facts dd {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  font-weight: 700;
}
.job-assurance {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.2rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--brand-on-light);
  background: var(--brand-faint);
}
.job-assurance > span {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  border-radius: 50%;
  background: var(--brand-on-light);
  color: var(--paper);
  font-weight: 700;
}
.job-assurance p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.8;
}
.job-scenes {
  margin-top: 1.9rem;
}
.job-scenes > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 0.9rem;
}
.job-scenes > header h4 {
  margin: 0;
  font-size: var(--step-0);
}
.job-scenes > header p {
  max-width: 34em;
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.7;
  text-align: right;
}
.job-media-groups {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.1rem;
}
.job-media-group {
  grid-column: span 6;
  min-width: 0;
}
.job-media-group--work {
  grid-column: 1 / -1;
}
.job-media-group__head {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
}
.job-media-group__head > span {
  color: var(--brand-on-light);
  font-family: var(--font-brand);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.job-media-group__head h5 {
  margin: 0;
  font-size: 0.86rem;
}
.job-media-group__head p {
  margin: 0.18rem 0 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.6;
}
.job-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}
.job-media-group--work .job-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.job-gallery figure {
  min-width: 0;
  margin: 0;
}
.job-gallery figure > img,
.job-video-thumb {
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  background: var(--paper-2);
}
.job-gallery figure > img,
.job-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.job-gallery figure > img {
  height: auto;
}
.job-video-thumb {
  position: relative;
}
.job-video-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 28%, transparent);
}
.job-video-thumb i {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding-left: 0.15rem;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.75rem;
  font-style: normal;
  transform: translate(-50%, -50%);
}
.job-gallery figcaption {
  margin-top: 0.4rem;
  color: var(--ink-soft);
  font-size: 0.7rem;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .proof-scroll-hint {
    position: absolute;
    z-index: 10;
    top: calc(50% + 1.25rem);
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8.75rem;
    min-height: 3.75rem;
    margin: 0;
    padding: 0.7rem;
    border-radius: 0.45rem;
    background: color-mix(in srgb, var(--ink) 82%, transparent);
    box-shadow: var(--shadow-md);
    color: var(--paper);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.96);
  }
  .proof-scroll-hint.is-visible {
    opacity: 0.9;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
  }
  .proof-window__body {
    max-height: 34rem;
    max-height: min(68svh, 34rem);
    overflow-y: auto;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: var(--line-strong) transparent;
    scrollbar-width: thin;
  }
  .screen-heading,
  .job-heading,
  .job-scenes > header {
    align-items: flex-start;
    flex-direction: column;
  }
  .screen-filters,
  .job-heading .ui-chips {
    justify-content: flex-start;
  }
  .candidate-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(12.5rem, 78%);
    overflow-x: auto;
    padding-bottom: 0.4rem;
    overscroll-behavior-x: contain;
  }
  .profile-panel--person {
    align-items: flex-start;
  }
  .profile-photo {
    width: 5.8rem;
    height: 5.8rem;
  }
  .profile-panel--person h4 {
    font-size: var(--step-1);
  }
  .profile-story,
  .language-screen,
  .work-language {
    grid-template-columns: minmax(0, 1fr);
  }
  .profile-video {
    min-height: 12rem;
  }
  .profile-scenes,
  .language-panel--wide {
    grid-column: 1;
  }
  .job-hero {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .job-hero figcaption {
    bottom: 0.9rem;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }
  .job-facts {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }
  .job-facts > div {
    padding: 0.65rem 0;
  }
  .job-facts > div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .job-scenes > header p {
    text-align: left;
  }
  .job-media-group,
  .job-media-group--work {
    grid-column: 1 / -1;
  }
  .job-media-group--work .job-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============ 料金 ============
   ここは数字が主役。カードを2枚並べるより、0円を大きく置いて
   「そのあと何が起きるか」を下に小さく添えるほうが読み取りが速い。 */

.fee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  max-width: 44em;
  margin: 2.25rem auto 0;
  padding: 2rem 2rem 1.75rem;
  border: 2px solid var(--brand-on-light);
  border-radius: var(--radius-xl);
  background: var(--paper);
}
.fee__amount {
  margin: 0;
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1;
  color: var(--brand-on-light);
}
.fee__amount span {
  font-size: clamp(4.5rem, 14vw, 7rem);
  letter-spacing: -0.02em;
}
.fee__list {
  display: grid;
  gap: 0.45rem;
  font-size: var(--step-0);
  line-height: 1.7;
}
.fee__list li {
  display: flex;
  gap: 0.5em;
  align-items: baseline;
}
.fee__list li::before {
  content: "✓";
  flex: none;
  color: var(--brand-on-light);
  font-size: 0.9em;
}

.fee-after {
  max-width: 44em;
  margin: 1.25rem auto 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.fee-after__when {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 700;
}
.fee-after__what {
  margin: 0.15rem 0 0.75rem;
  font-size: var(--step-1);
  font-weight: 700;
}
.fee-after ul {
  display: grid;
  gap: 0.4rem;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.8;
}
.fee-after li::before {
  content: "・";
  color: var(--muted);
}
.fee-note {
  max-width: 44em;
  margin: 1.5rem auto 0;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.85;
}

/* ============ 採用の流れと費用 ============
   F6-4の道標型は保ち、採用の手順と費用を10工程で同時に追えるようにする。 */

#cost-breakdown {
  scroll-margin-top: 4.5rem;
}

.flow-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  margin: 2.5rem 0 1.5rem;
  padding: 0;
  color: var(--muted);
  font-size: 0.75rem;
  list-style: none;
}
.flow-legend li::before {
  content: "";
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: var(--brand);
}
.flow-legend li:last-child::before {
  background: var(--accent);
}

.guide-road {
  position: relative;
  max-width: 54rem;
  margin: 0 auto;
  padding: 0.5rem 0;
  list-style: none;
}
.guide-road::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 4px dashed var(--brand-line);
  transform: translateX(-50%);
}
.guide-stop {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  min-height: 10rem;
}
.guide-stop__number {
  z-index: 1;
  display: grid;
  grid-column: 2;
  grid-row: 1;
  place-items: center;
  justify-self: center;
  width: 3rem;
  height: 3rem;
  border: 4px solid var(--paper);
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-line);
  color: var(--paper);
  font-family: var(--font-brand);
  font-weight: 600;
}
.guide-stop--after .guide-stop__number {
  background: var(--accent);
  color: var(--ink);
}

.guide-card {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.guide-stop:nth-child(even) .guide-card {
  grid-column: 3;
}
.guide-stop--after .guide-card {
  border-color: var(--accent-light);
}
.guide-card h3 {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.55;
}
.guide-card p {
  margin: 0.45rem 0 0;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.8;
}
.guide-card__cost {
  display: inline-block;
  margin-top: 0.7rem;
  padding: 0.16em 0.65em;
  border-radius: 4px;
  background: var(--brand-wash);
  color: var(--brand-on-light);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.guide-card__cost--fee {
  background: var(--accent);
  color: var(--ink);
}
.guide-card__cost--other {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--muted);
}

.guide-road--costs .guide-card__cost {
  white-space: normal;
}
.guide-card__cost span {
  display: block;
  color: var(--text-muted);
  font-weight: 500;
}
.guide-card__waiver {
  display: block;
  width: fit-content;
  margin-top: 0.65rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--brand-line);
  color: var(--brand-on-light);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
}
.guide-card__detail {
  margin: 0.9rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
}
.guide-card__detail > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.65rem;
  padding-block: 0.2rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem;
  line-height: 1.65;
}
.guide-card__detail dt {
  color: var(--text-muted);
  font-weight: 700;
}
.guide-card__detail dd {
  margin: 0;
}
.guide-card .guide-card__source {
  margin-top: 0.65rem;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.65;
}

.timeline-extra {
  max-width: 54rem;
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 2px solid var(--ink);
}
.timeline-extra h3 {
  margin-bottom: 1rem;
}
.timeline-extra dl > div {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--line-strong);
}
.timeline-extra dt {
  color: var(--brand-on-light);
  font-weight: 700;
}
.timeline-extra dd {
  margin: 0;
  color: var(--text-muted);
}

@media (max-width: 620px) {
  .guide-road {
    padding-left: 0.25rem;
  }
  .guide-road::before {
    left: 1.5rem;
    transform: none;
  }
  .guide-stop {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0.75rem;
    min-height: 0;
    margin-bottom: 1rem;
  }
  .guide-stop:last-child {
    margin-bottom: 0;
  }
  .guide-stop__number {
    grid-column: 1;
  }
  .guide-card,
  .guide-stop:nth-child(even) .guide-card {
    grid-column: 2;
  }
  .guide-card__detail > div,
  .timeline-extra dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

/* ============ 注記（架空サンプルの断り） ============ */

.note-sample {
  max-width: 46em;
  margin: 1rem auto 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.7;
  text-align: center;
}

.faq__cost-link {
  margin: 0.75rem 0 0;
  font-weight: 700;
}

/* ============ 公開前に差し替える箇所 ============
   許可番号・手数料表の掲示先が未確定であることを、画面上でも見て分かるようにする。
   出荷前チェック（CLAUDE.md §6）でこのクラスが0件になっていることを確認する。 */

.pending-publish {
  padding: 0.05em 0.4em;
  border: 1px dashed var(--line-strong);
  border-radius: 4px;
  background: var(--paper-2);
  color: var(--muted);
}

/* ============ タップ領域（出荷前チェック §6） ============
   主CTAは 54px 以上ある。ここで直すのは、独立したリンクとして並んでいる
   ヘッダのブランドとフッターのリンク列。文章の途中にあるリンク（同意文・
   フッター注記・会社情報のメールアドレス）は、広げると行が崩れるうえ
   WCAG 2.5.8 の対象外なので、そのままにしている。 */

.site-header .brand {
  min-height: 44px;
}
.site-footer__links a {
  display: inline-block;
  min-height: 44px;
  padding-block: 0.55rem;
}

/* ============ 濃い面（夜のビル） ============
   白と薄グレーの2色だけで11章を通すと、最初から最後まで同じ調子に見える。
   濃い面を2箇所だけ入れて、ページに山と谷をつくる。
   ・3章「いま、こうなっていませんか」＝チャコール。悩みを夜の側に置く
   ・6章「0円」＋7章CTA帯＝インディゴ。ページ中央の濃い島
   色はブランド（ADR-0037: 夜のビル・窓明かり・扉）に合わせる。 */

.section--night {
  position: relative;
  /* 下は街並みの場所。本文が建物に重ならないよう空けておく */
  padding-bottom: clamp(7rem, 16vw, 11rem);
  isolation: isolate;
  background: var(--ink);
  color: var(--dark-text);
}
.section--night > .wrap {
  position: relative;
  z-index: 1;
}
.section--night .sec-title {
  color: var(--paper);
}

/* 背景は「夜明け前」。模様は1本も引かない。
   格子や回路のような幾何学模様を敷くと、読者（50〜70代・清掃や宿泊の経営者）にとっては
   自分の世界の絵ではなく、IT企業の広告の絵になる。ここは悩みの章なので、
   静かに暗いだけでよく、文字が主役でよい。
   下にわずかな暖色を入れて「まだ暗いが、これから明ける」形にし、
   次の4章（白）への明転につなげる。 */
.night-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* 地平の暖色。夜明け前の空 */
    radial-gradient(150% 88% at 50% 128%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 66%),
    /* 上端をわずかに落として、面のかたまりを作る */
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 70%, transparent), transparent 26%),
    linear-gradient(to bottom, var(--ink-2), var(--ink) 54%, var(--ink-3));
}

/* 模様は「夜のビルのシルエット」。格子や回路のような幾何学模様にしない
   （読者の世界ではなくIT企業の広告の絵になる）。
   映しているのは、この人たちが実際に人手を探している場所そのもの
   ―― オフィスビル・ホテル。ブランドの「夜のビル」（ADR-0037）とも一致する。
   下の暖色は夜明け前。建物はそれより暗く塗って影として立たせる。 */
.night-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--ink);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='220'%3E%3Cg fill='white'%3E%3Crect x='8' y='132' width='96' height='88'/%3E%3Crect x='112' y='88' width='60' height='132'/%3E%3Crect x='180' y='156' width='140' height='64'/%3E%3Crect x='252' y='110' width='84' height='110'/%3E%3Crect x='344' y='70' width='72' height='150'/%3E%3Crect x='424' y='162' width='168' height='58'/%3E%3Crect x='490' y='96' width='96' height='124'/%3E%3Crect x='594' y='124' width='120' height='96'/%3E%3Crect x='722' y='80' width='64' height='140'/%3E%3Crect x='794' y='148' width='152' height='72'/%3E%3Crect x='954' y='102' width='88' height='118'/%3E%3Crect x='1050' y='70' width='60' height='150'/%3E%3Crect x='1118' y='134' width='128' height='86'/%3E%3Crect x='1254' y='90' width='74' height='130'/%3E%3Crect x='1336' y='158' width='150' height='62'/%3E%3Crect x='1494' y='116' width='92' height='104'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='220'%3E%3Cg fill='white'%3E%3Crect x='8' y='132' width='96' height='88'/%3E%3Crect x='112' y='88' width='60' height='132'/%3E%3Crect x='180' y='156' width='140' height='64'/%3E%3Crect x='252' y='110' width='84' height='110'/%3E%3Crect x='344' y='70' width='72' height='150'/%3E%3Crect x='424' y='162' width='168' height='58'/%3E%3Crect x='490' y='96' width='96' height='124'/%3E%3Crect x='594' y='124' width='120' height='96'/%3E%3Crect x='722' y='80' width='64' height='140'/%3E%3Crect x='794' y='148' width='152' height='72'/%3E%3Crect x='954' y='102' width='88' height='118'/%3E%3Crect x='1050' y='70' width='60' height='150'/%3E%3Crect x='1118' y='134' width='128' height='86'/%3E%3Crect x='1254' y='90' width='74' height='130'/%3E%3Crect x='1336' y='158' width='150' height='62'/%3E%3Crect x='1494' y='116' width='92' height='104'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: 1600px 260px;
  mask-size: 1600px 260px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: bottom;
  mask-position: bottom;
}

/* 狭い画面では、街並みを小さく詰める。
   大きいままだとビル2棟しか入らず、街に見えないうえ本文に届いてしまう。 */
@media (max-width: 760px) {
  .night-bg::after {
    -webkit-mask-size: 760px 150px;
    mask-size: 760px 150px;
  }
}

.section--night .bridge {
  color: var(--paper);
}
/* 蛍光ペンは明るい地の上でしか効かない。暗い面では灯りの色そのものにする */
.section--night .marker {
  background: none;
  color: var(--accent-light);
  box-shadow: inset 0 -0.12em 0 var(--accent-deep);
}

/* ---- 料金の面。次のCTA帯（--brand-on-light）と2段で1つの島になる ---- */

.section--brand {
  background: var(--brand-deep);
  color: var(--dark-text);
}
.section--brand .sec-title {
  color: var(--paper);
}
.section--brand .fee {
  border-color: var(--brand-on-dark);
  background: none;
}
.section--brand .fee__amount {
  color: var(--accent);
}
.section--brand .fee__list {
  color: var(--paper);
}
.section--brand .fee__list li::before {
  color: var(--accent);
}
.section--brand .fee-after {
  border-color: var(--dark-line);
  background: var(--brand-on-light);
}
.section--brand .fee-after__when {
  color: var(--brand-on-dark);
}
.section--brand .fee-after__what {
  color: var(--paper);
}
.section--brand .fee-after ul {
  color: var(--dark-text);
}
.section--brand .fee-after li::before {
  color: var(--brand-on-dark);
}
.section--brand .fee-note {
  color: var(--brand-on-dark);
}
.fee-details-link {
  margin-top: 1rem;
  text-align: center;
}
.fee-details-link a {
  color: var(--paper);
  font-weight: 700;
}
/* 次のCTA帯とひと続きの島にするので、下の余白は詰める */
.section--brand {
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

/* ============ スクロールに合わせた動き ============
   入ってきたときに一度だけ、10pxぶん持ち上げる。それ以上はやらない。
   読者は50〜70代・ほぼスマホ。動きが読む邪魔になっては本末転倒。

   CSSのスクロール連動（animation-timeline: view()）で書くと JS は0行にできるが、
   進み方が**要素の高さ**で決まるため、フォームのように縦に長い塊が薄いまま残る
   （#contact へ直接飛んだときに、フォームが opacity 0.2 で止まった）。
   なので「入った」の判定だけ IntersectionObserver に任せ、動き自体はCSSで書く。

   薄くする（.rise）のはJSが付ける。JSが動かなければ何も薄くならない＝内容は必ず見える。
   最初から画面に入っているものには付けない（ファーストビューを遅らせない）。 */

.rise {
  opacity: 0;
  transform: translateY(10px);
}
.rise.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .rise {
    opacity: 1;
    transform: none;
  }
}