/* ========================================
   aosora — Continuous Stage / Fluid VW
   Visual SoT: Figma wire / Content SoT: HTML原稿
   - Stage: min(100vw, 430px) … 375〜430 Linear
   - MQ: prefers-reduced-motion のみ
======================================== */

:root {
  --design-w: 390;
  --stage-max: 430px;
  --stage-w: min(100vw, var(--stage-max));
  /* 390 攻めすぎ防止: 全体をわずかに安全側へ（SE / 短尺でも欠落させない） */
  --u-raw: calc(var(--stage-w) / var(--design-w));
  --u: calc(var(--u-raw) * 0.97);
  /*
    PC 左右レール（MQ 不使用）
    - 余剰 = (100vw - stage) / 2
    - 1000px 未満はペナルティで確実に 0（旧式は 768 で ~53px 残り SP に文字がはみ出した）
  */
  --rail-available: max(0px, calc((100vw - var(--stage-w)) / 2));
  --rail-w: max(
    0px,
    calc(var(--rail-available) - max(0px, (1000px - 100vw) * 999))
  );

  --header-h: min(calc(58 * var(--u)), 8.5svh);
  --gut: calc(18 * var(--u));

  --pad-y: min(calc(10 * var(--u)), 1.3svh);
  --pad-b: min(calc(18 * var(--u)), 2.2svh);
  --v-gap: min(calc(12 * var(--u)), 1.5svh);
  --v-gap-sm: min(calc(6 * var(--u)), 1svh);
  --v-gap-lg: min(calc(18 * var(--u)), 2.2svh);

  --fs-cap: calc(11 * var(--u));
  --fs-body: calc(12.4 * var(--u));
  --fs-lead: calc(13.5 * var(--u));
  --fs-head: calc(26 * var(--u));
  --fs-display: calc(32 * var(--u));
  --lh-body: 1.65;
  --lh-head: 1.3;

  --color-ink: #202537;
  --color-primary: #303ec9;
  --color-accent: #10c6b1;
  --color-marker: #f1d237;
  --color-base: #ffffff;
  --color-base-2: #ecfaf6;
  --color-sky: #edf8ff;
  --color-text: #202537;
  --color-muted: #4a5a72;
  --color-invert: #ffffff;
  --color-line: #dce7f0;
  --color-plate-line: #c8e3ef;

  /* 元の薄い青より一段白寄り（Stage との境目を出しやすく） */
  --shell-sky: #f7fbfe;
  --shell-sky-2: #f2f7fb;
  --shell-mist: #f8fcfb;
  --shell-ink: #3d5a7a;
  --shell-muted: #6b849c;

  /* スワイプ1以降の地色（ブルー系 / エメラルドブルー系） */
  --wash-sky-a: #e7f3ff;
  --wash-sky-b: #dcecff;
  --wash-sky-c: #f2f8ff;
  --wash-emerald-a: #e6faf5;
  --wash-emerald-b: #d7f4ee;
  --wash-emerald-c: #eefbf8;
  --wash-sky:
    radial-gradient(ellipse 120% 70% at 12% 0%, rgba(120, 178, 255, 0.22), transparent 58%),
    radial-gradient(ellipse 90% 55% at 92% 100%, rgba(16, 198, 177, 0.12), transparent 55%),
    linear-gradient(165deg, var(--wash-sky-a) 0%, var(--wash-sky-c) 46%, var(--wash-sky-b) 100%);
  --wash-emerald:
    radial-gradient(ellipse 110% 65% at 88% 0%, rgba(16, 198, 177, 0.2), transparent 56%),
    radial-gradient(ellipse 95% 55% at 8% 100%, rgba(48, 62, 201, 0.1), transparent 54%),
    linear-gradient(195deg, var(--wash-emerald-a) 0%, var(--wash-emerald-c) 44%, var(--wash-emerald-b) 100%);
  --section-wash: var(--wash-sky);

  --radius: calc(18 * var(--u));
  --ease: cubic-bezier(0.65, 0, 0.2, 1);

  /* 全テキスト: Zen Maru Gothic（全丸ゴシック） */
  --font-ja: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --font-display: var(--font-ja);
  --font-latin: var(--font-ja);
  --font-latin-black: var(--font-ja);

  /* Section background system（aosora-background-system 23点） */
  --bg-middle: url("../img/bg/common/bg_common_middle_texture.webp");
  --bg-mid-opacity: 0.45;
  --bg-top-opacity: 0.45;
  --bg-bottom-opacity: 0.45;
  --section-bg-top: none;
  --section-bg-bottom: none;
  /* TOP/BOTTOM 原寸 2172×724。幅は Stage 100% を維持し、高さだけ cap */
  --bg-edge-h: min(calc(var(--stage-w) * 724 / 2172), calc(130 * var(--u)), 16svh);
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-x: clip;
  overscroll-behavior: none;
  background: var(--color-sky);
  color: var(--color-text);
  font-family: var(--font-ja);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
.c-section-title {
  font-family: var(--font-ja);
}

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

a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, ol, ul, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

/* ========== SHELL / STAGE ========== */

.l-shell {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  overflow-x: clip;
  background:
    radial-gradient(ellipse 90% 70% at 15% 20%, rgba(255, 255, 255, 0.9), transparent 55%),
    radial-gradient(ellipse 80% 60% at 88% 75%, rgba(16, 198, 177, 0.08), transparent 50%),
    linear-gradient(165deg, var(--shell-sky) 0%, var(--shell-sky-2) 42%, var(--shell-mist) 100%);
}

.l-header,
.l-menu,
.l-mobile-stage {
  position: fixed;
  left: 50%;
  width: var(--stage-w);
  max-width: var(--stage-w);
  transform: translateX(-50%);
}

.l-header {
  z-index: 60;
  top: 0;
  right: auto;
  bottom: auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-gap-sm);
  padding: 0 calc(18 * var(--u)) 0 var(--gut);
  background: #ffffff;
}

.l-header__brand {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
  min-width: 0;
  color: var(--color-primary);
}

.l-header__mark {
  width: calc(54 * var(--u));
  height: calc(34 * var(--u));
  flex: 0 0 auto;
}

.l-header__brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.l-header__brand-ja {
  font-size: calc(15 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.l-header__brand-en {
  font-family: var(--font-latin);
  font-size: calc(7.5 * var(--u));
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  white-space: nowrap;
}

.l-header__menu {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(3 * var(--u));
  width: calc(42 * var(--u));
  height: calc(42 * var(--u));
  color: var(--color-primary);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.l-header__menu-bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(3 * var(--u));
  width: calc(24 * var(--u));
}

.l-header__menu-bars span {
  display: block;
  height: calc(2 * var(--u));
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

.l-header__menu[aria-expanded="true"] .l-header__menu-bars span:nth-child(1) {
  transform: translateY(calc(5 * var(--u))) rotate(45deg);
}
.l-header__menu[aria-expanded="true"] .l-header__menu-bars span:nth-child(2) { opacity: 0; }
.l-header__menu[aria-expanded="true"] .l-header__menu-bars span:nth-child(3) {
  transform: translateY(calc(-5 * var(--u))) rotate(-45deg);
}

.l-header__menu-label {
  font-family: var(--font-latin);
  font-size: calc(9 * var(--u));
  font-weight: 700;
    letter-spacing: 0.04em;
}

.l-menu {
  z-index: 55;
  top: 0;
  right: auto;
  bottom: 0;
  height: 100svh;
  padding: calc(var(--header-h) + 24 * var(--u)) var(--gut) var(--pad-b);
  background:
    radial-gradient(ellipse 80% 50% at 90% 8%, rgba(241, 210, 55, 0.18), transparent 55%),
    linear-gradient(180deg, #f7fbff 0%, var(--color-sky) 45%, var(--color-base-2) 100%);
  overflow: auto;
  color: var(--color-ink);
}

.l-menu[hidden] { display: none; }

.l-menu__kicker {
  margin: 0 0 calc(18 * var(--u));
  font-family: var(--font-latin-black);
  font-size: calc(12 * var(--u));
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  background: linear-gradient(180deg, transparent 62%, var(--color-marker) 62%, var(--color-marker) 94%, transparent 94%);
  display: inline-block;
}

.l-menu__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.l-menu__list a {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: calc(14 * var(--u));
  padding: calc(11 * var(--u)) 0;
  border-bottom: 1px solid rgba(48, 62, 201, 0.12);
  font-family: var(--font-ja);
  font-size: calc(17 * var(--u));
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-ink);
  text-align: left;
}

.l-menu__list a:hover,
.l-menu__list a:focus-visible {
  color: var(--color-primary);
}

.l-menu__list i {
  flex: 0 0 auto;
  min-width: calc(28 * var(--u));
  font-family: var(--font-latin-black);
  font-style: normal;
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--color-primary);
  text-align: left;
}

.l-menu__list span {
  flex: 0 1 auto;
  text-align: left;
}

.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(46 * var(--u));
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  border-radius: calc(14 * var(--u));
  border: 1px solid transparent;
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: 0.04em;
}

.c-button--outline {
  background: var(--color-base);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.c-button--ghost {
  background: transparent;
  border-color: rgba(48, 62, 201, 0.35);
  color: var(--color-primary);
}

.c-button--entry {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-invert);
  box-shadow: calc(3 * var(--u)) 0 0 var(--color-accent);
}

/* ========== SCROLL SNAP ========== */

.l-mobile-stage {
  /* PC（rail 開放時）だけ Stage 左右に濃い青ボーダー。SP は rail-w=0 で消える */
  --stage-side-bar: min(calc(5 * var(--u)), var(--rail-w));
  z-index: 10;
  top: 0;
  right: auto;
  bottom: auto;
  height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  background: var(--color-base);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
  scroll-behavior: auto;
  box-shadow:
    calc(-1 * var(--stage-side-bar)) 0 0 0 var(--color-primary),
    var(--stage-side-bar) 0 0 0 var(--color-primary),
    0 0 0 1px rgba(48, 62, 201, 0.1),
    0 calc(20 * var(--u)) calc(48 * var(--u)) rgba(48, 62, 201, 0.14);
}

.l-mobile-stage::-webkit-scrollbar { display: none; }

/* ========== PC SIDE RAILS（青空交通・島・交通） ========== */

.l-side-brand,
.l-side-cta {
  position: fixed;
  z-index: 20;
  top: 0;
  bottom: 0;
  width: var(--rail-w);
  max-width: var(--rail-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(0);
  box-sizing: border-box;
  pointer-events: none;
  color: var(--shell-ink);
  background:
    radial-gradient(ellipse 100% 80% at 0% 30%, rgba(255, 255, 255, 0.7), transparent 58%),
    linear-gradient(180deg, var(--shell-sky) 0%, var(--shell-mist) 100%);
  /* 幅 0（SP〜Tablet）では非表示。PC で rail が開いたときだけ見える */
  opacity: clamp(0, calc(var(--rail-w) / 1px), 1);
}

.l-side-brand {
  left: 0;
  box-shadow: inset -1px 0 0 rgba(48, 62, 201, 0.06);
}

.l-side-cta {
  left: calc(50% + (var(--stage-w) / 2));
  box-shadow: inset 1px 0 0 rgba(48, 62, 201, 0.06);
  background:
    radial-gradient(ellipse 90% 70% at 100% 25%, rgba(255, 255, 255, 0.65), transparent 55%),
    linear-gradient(180deg, var(--shell-sky-2) 0%, var(--shell-mist) 100%);
}

.l-side-brand__bg,
.l-side-cta__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.l-side-brand__art,
.l-side-cta__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
}

/* 波だけ下辺固定。高さは cap して大画面でも巨大化しない */
.l-side-brand__wave-bed {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: clamp(140px, 18dvh, 220px);
  display: block;
  pointer-events: none;
}

/* 雲だけ上辺固定。レール幅いっぱいに伸ばし、高さは cap */
.l-side-cta__sky-bed {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: clamp(110px, 14dvh, 180px);
  display: block;
  pointer-events: none;
}

.l-side-brand__inner,
.l-side-cta__card {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: auto;
}

.l-side-brand__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-block: clamp(32px, 8dvh, 72px);
  padding-inline: min(28px, 10%);
  text-align: center;
}

.l-side-brand__mark {
  width: 54px;
  height: auto;
  margin-bottom: 4px;
}

.l-side-brand__kicker,
.l-side-cta__kicker {
  margin: 0;
  font-family: var(--font-latin-black);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--color-accent);
}

.l-side-brand__role {
  margin: 0;
  font-size: clamp(11px, 1vw, 12px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--shell-muted);
}

.l-side-brand__name {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--color-primary);
}

.l-side-cta__card {
  width: 100%;
  max-width: min(228px, 100%);
  min-width: 0;
  margin-inline: auto;
  padding: clamp(16px, 3dvh, 22px) clamp(10px, 8%, 18px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(48, 62, 201, 0.1);
  box-shadow: 0 12px 40px rgba(48, 62, 201, 0.08);
}

.l-side-cta__kicker {
  font-family: var(--font-ja);
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: center;
  color: var(--color-primary);
}

.l-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ja);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-primary);
}

.l-progress__track {
  flex: 1 1 auto;
  min-width: calc(48 * 1px);
  display: block;
  padding: 4px 0;
}

.l-progress__bar {
  position: relative;
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(48, 62, 201, 0.22);
  overflow: hidden;
}

.l-progress__bar i {
  display: block;
  height: 100%;
  width: 8%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
  transition: width 0.45s var(--ease);
}

.l-side-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.l-side-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  border: 1px solid transparent;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.l-side-cta__btn--sub {
  background: #ffffff;
  color: var(--color-primary);
  border-color: rgba(48, 62, 201, 0.22);
}

.l-side-cta__btn--sub:hover {
  background: rgba(232, 244, 255, 0.9);
  border-color: rgba(48, 62, 201, 0.35);
}

.l-side-cta__btn--main {
  background: var(--color-primary);
  color: var(--color-invert);
  border-color: var(--color-primary);
  box-shadow: inset 0 -3px 0 var(--color-accent);
}

.l-side-cta__btn--main:hover {
  background: #2a36b8;
}

.section--screen {
  position: relative;
  width: 100%;
  /* 短尺で本文欠落させない: 固定100svhクリップをやめ、必要時だけ伸長 */
  height: auto;
  min-height: 100svh;
  overflow: visible;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: var(--section-wash, var(--color-base));
}

.section--screen.is-hero {
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--color-primary);
}

.section--flow {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100svh;
  overflow: visible;
  scroll-snap-align: start;
  /* 先頭には必ず着地（normal だと COMPANY→募集要項で先頭を飛び越える）。
     セクション自体が viewport より高いので、着地後は内部を継続スクロール可能 */
  scroll-snap-stop: always;
  background: var(--section-wash, var(--color-base));
}

.c-page {
  position: relative;
  z-index: 1;
  height: auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* タイトル〜末尾までを1パックとして縦中央。余白は上下に均等（高さに対して連続） */
  justify-content: safe center;
  gap: var(--v-gap);
  /* 下端 BG 帯分を padding に含め、装飾の上でパックが中央に来る（縦長の下空きを抑制） */
  padding: calc(var(--header-h) + var(--pad-y)) var(--gut) max(var(--pad-b), var(--bg-edge-h));
  overflow: visible;
}

.c-page--compose {
  /* screen でも縦中央は維持。内部 gap だけ 0 にして子が詰まる */
  justify-content: safe center;
  gap: 0;
  overflow: visible;
}

.is-hero .c-page,
.p-hero .c-page {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.section--flow .c-page {
  height: auto;
  min-height: 100svh;
  justify-content: flex-start;
  overflow: visible;
  padding-bottom: max(var(--bg-edge-h), min(calc(40 * var(--u)), 5svh));
}

/* ENTRY だけタイトル〜末尾を1パックで縦中央（溢れたら上詰め）。募集要項は長尺のため上詰めのまま */
.p-entry .c-page {
  justify-content: safe center;
}

/* ========== SHARED UI ========== */

/* セクションタイトル画像（スワイプ2以降） */
.c-title-img {
  display: block;
  width: auto;
  max-width: min(100%, calc(280 * var(--u)));
  height: auto;
  max-height: min(calc(100 * var(--u)), 11svh);
  object-fit: contain;
  object-position: left center;
}

.c-title-img--point {
  width: auto;
  max-width: min(100%, calc(300 * var(--u)));
  height: auto;
  max-height: min(calc(72 * var(--u)), 9svh);
  margin-inline: 0;
  object-position: left center;
}

.c-title-img--compact {
  width: auto;
  max-width: min(100%, calc(290 * var(--u)));
  height: auto;
  max-height: min(calc(84 * var(--u)), 10svh);
}

/* Figma PAGE TITLE — HTML text（img SVG は WebFont が効かず字感が崩れる） */
.c-section-title {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(8 * var(--u));
  margin: 0;
  width: min(100%, calc(350 * var(--u)));
  font-family: var(--font-ja);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0;
}

.c-section-title__text {
  display: block;
  margin: 0;
  font-family: inherit;
  font-weight: 700;
  line-height: 1.18;
}

.c-section-title__accent {
  display: block;
  width: calc(170 * var(--u));
  height: calc(5 * var(--u));
  border-radius: calc(3 * var(--u));
  background: var(--color-marker);
  flex: 0 0 auto;
}

.c-section-title--29 .c-section-title__text {
  font-size: calc(29 * var(--u));
  line-height: calc(34.22 / 29);
}

.c-section-title--28 .c-section-title__text {
  font-size: calc(28 * var(--u));
  line-height: calc(33.04 / 28);
}

.c-section-title--30 .c-section-title__text {
  font-size: calc(30 * var(--u));
  line-height: calc(35.4 / 30);
}

.c-section-title--24 .c-section-title__text {
  font-size: calc(24 * var(--u));
  line-height: calc(34 / 24);
}

.c-section-title--23 .c-section-title__text {
  font-size: calc(23 * var(--u));
  line-height: calc(32 / 23);
}

.c-section-title--22 .c-section-title__text {
  font-size: calc(22 * var(--u));
  line-height: calc(28 / 22);
}

.c-section-title--center {
  align-items: center;
  text-align: center;
  width: 100%;
}

.c-section-title__em {
  color: var(--color-accent);
}

.c-section-title__line {
  display: block;
}

.c-section-title__sub {
  display: block;
  font-size: calc(16 * var(--u));
  line-height: calc(32 / 16);
  font-weight: 700;
}

.c-section-title__main {
  display: block;
  font-size: calc(24 * var(--u));
  line-height: calc(32 / 24);
  font-weight: 700;
}

.c-section-title--26 .c-section-title__text {
  font-size: calc(26 * var(--u));
  line-height: calc(32 / 26);
}

/* legacy img titles（未置換時のフォールバック） */
.c-section-title__img {
  display: block;
  width: min(100%, calc(350 * var(--u)));
  height: auto;
}

/* Soft accent field — border/card感なし。Closing・Quote等のみ */
.c-soft {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border: 0;
  border-radius: calc(8 * var(--u));
  background: rgba(16, 198, 177, 0.12);
  box-shadow: none;
  font-size: calc(11.45 * var(--u));
  font-weight: 700;
  line-height: 1.62;
  color: var(--color-primary);
}

.c-soft--sky {
  background: rgba(48, 62, 201, 0.08);
  color: var(--color-ink);
  font-weight: 700;
}

/* Illustration cutouts — Wireframe枠を付けない */
[class*="__fig"],
[class*="__illust"] img {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.c-foot-rule {
  position: absolute;
  z-index: 2;
  left: calc(35 * var(--u));
  bottom: calc(28 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
}

.c-foot-rule i {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  border-radius: 50%;
  background: var(--color-marker);
}

.c-foot-rule span {
  width: calc(78 * var(--u));
  height: calc(3 * var(--u));
  background: var(--color-marker);
}

/* ========== HERO ========== */

.p-hero { background: var(--color-primary); color: var(--color-invert); }

.p-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--color-primary);
}

.p-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-scroll-cue {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(18 * var(--u));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--u));
  min-width: calc(72 * var(--u));
  padding: calc(6 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u));
  border: 0;
  border-radius: calc(999 * var(--u));
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 calc(4 * var(--u)) 0 rgba(48, 62, 201, 0.12),
    0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(32, 37, 55, 0.12);
  color: var(--color-primary);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.c-scroll-cue__label {
  font-family: var(--font-latin-black);
  font-size: calc(11 * var(--u));
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--color-primary);
  background: linear-gradient(180deg, transparent 58%, var(--color-marker) 58%, var(--color-marker) 96%, transparent 96%);
}

.c-scroll-cue__arrow {
  position: relative;
  display: block;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  border-right: calc(2.5 * var(--u)) solid var(--color-accent);
  border-bottom: calc(2.5 * var(--u)) solid var(--color-accent);
  border-radius: 0 0 calc(2 * var(--u)) 0;
  transform: rotate(45deg);
  animation: cue-bounce 1.4s ease-in-out infinite;
}

@keyframes cue-bounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.55; }
  50% { transform: rotate(45deg) translate(calc(3 * var(--u)), calc(3 * var(--u))); opacity: 1; }
}

/* ========== 3-layer section background（上・真ん中・下）
   既定ルールは .cursor/rules/project.mdc「セクション背景3レイヤー」
   TOP/BOTTOM: width 100% + height auto（縦 stretch 禁止）
   MIDDLE: repeat-y で高さ変化を吸収（opaque paper texture） */

.c-bg {
  /* ヘッダー下〜section下端（Stage幅）。Content の gut と分離。
     inset:0 だと TOP 装飾が固定ヘッダーに食い込み、スナップ着地が不自然になる */
  position: absolute;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.c-bg__mid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--bg-middle);
  background-position: top center;
  background-repeat: repeat-y;
  background-size: 100% auto;
  opacity: var(--bg-mid-opacity);
}

.c-bg__bottom,
.c-bg__top {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  min-width: 100%;
  max-width: none;
  /* aspect-ratio+max-height は Safari 等で幅が縮み途中切れするため使わない。
     高さは Stage幅×素材比で算出し、短い端末だけ svh/u で cap。縦 stretch 禁止。 */
  height: var(--bg-edge-h);
  aspect-ratio: auto;
  max-height: none;
  background-repeat: no-repeat;
  background-size: 100% auto;
  pointer-events: none;
  box-sizing: border-box;
}

.c-bg__bottom {
  bottom: 0;
  z-index: 1;
  background-image: var(--section-bg-bottom);
  background-position: bottom center;
  opacity: var(--bg-bottom-opacity);
}

.c-bg__top {
  top: 0;
  z-index: 2;
  background-image: var(--section-bg-top);
  background-position: top center;
  opacity: var(--bg-top-opacity);
}

/* Section → asset mapping + wash（ブルー / エメラルド交互）+ opacity
   濃度は aosora-background-frames-v2/USAGE_GUIDE.md 準拠 */
.p-about {
  --section-wash: var(--wash-sky);
  --section-bg-top: url("../img/bg/swipe01/bg_swipe01_top_refined.webp");
  --section-bg-bottom: url("../img/bg/swipe01/bg_swipe01_bottom.webp");
  --bg-top-opacity: 1;
  --bg-mid-opacity: 0.7;
  --bg-bottom-opacity: 1;
}

.p-iriomote {
  --section-wash: var(--wash-emerald);
  --section-bg-top: url("../img/bg/swipe02/bg_swipe02_top_refined.webp");
  --section-bg-bottom: url("../img/bg/swipe02/bg_swipe02_bottom.webp");
  --bg-top-opacity: 1;
  --bg-mid-opacity: 0.7;
  --bg-bottom-opacity: 1;
}

.p-mobility {
  --section-wash: var(--wash-sky);
  --section-bg-top: url("../img/bg/swipe03/bg_swipe03_top.webp");
  --section-bg-bottom: url("../img/bg/swipe03/bg_swipe03_bottom.webp");
  --bg-top-opacity: 0.95;
  --bg-mid-opacity: 0.65;
  --bg-bottom-opacity: 0.95;
}

.p-work {
  --section-wash: var(--wash-emerald);
  --section-bg-top: url("../img/bg/swipe04/bg_swipe04_top.webp");
  --section-bg-bottom: url("../img/bg/swipe04/bg_swipe04_bottom_refined.webp");
  --bg-top-opacity: 0.9;
  --bg-mid-opacity: 0.65;
  --bg-bottom-opacity: 0.9;
}

.p-point12 {
  --section-wash: var(--wash-sky);
  --section-bg-top: url("../img/bg/swipe05/bg_swipe05_top_refined.webp");
  --section-bg-bottom: url("../img/bg/swipe05/bg_swipe05_bottom.webp");
  --bg-top-opacity: 0.85;
  --bg-mid-opacity: 0.6;
  --bg-bottom-opacity: 0.85;
}

.p-point34 {
  --section-wash: var(--wash-emerald);
  --section-bg-top: url("../img/bg/swipe06/bg_swipe06_top.webp");
  --section-bg-bottom: url("../img/bg/swipe06/bg_swipe06_bottom.webp");
  --bg-top-opacity: 0.85;
  --bg-mid-opacity: 0.65;
  --bg-bottom-opacity: 0.75;
}

.p-oneday {
  --section-wash: var(--wash-sky);
  --section-bg-top: url("../img/bg/swipe07/bg_swipe07_top_refined.webp");
  --section-bg-bottom: url("../img/bg/swipe07/bg_swipe07_bottom.webp");
  --bg-top-opacity: 0.95;
  --bg-mid-opacity: 0.65;
  --bg-bottom-opacity: 1;
}

.p-voice {
  --section-wash: var(--wash-emerald);
  --section-bg-top: url("../img/bg/swipe08/bg_swipe08_top_refined.webp");
  --section-bg-bottom: url("../img/bg/swipe08/bg_swipe08_bottom.webp");
  --bg-top-opacity: 0.95;
  --bg-mid-opacity: 0.65;
  --bg-bottom-opacity: 0.95;
}

.p-company {
  --section-wash: var(--wash-sky);
  --section-bg-top: url("../img/bg/swipe09/bg_swipe09_top.webp");
  --section-bg-bottom: url("../img/bg/swipe09/bg_swipe09_bottom.webp");
  --bg-top-opacity: 0.85;
  --bg-mid-opacity: 0.55;
  --bg-bottom-opacity: 0.85;
}

.p-req {
  --section-wash: var(--wash-sky);
  --section-bg-top: url("../img/bg/requirements/bg_requirements_top.webp");
  --section-bg-bottom: url("../img/bg/requirements/bg_requirements_bottom.webp");
  --bg-top-opacity: 0.85;
  --bg-mid-opacity: 0.55;
  --bg-bottom-opacity: 0.85;
}

.p-entry {
  --section-wash: var(--wash-emerald);
  --section-bg-top: url("../img/bg/entry/bg_entry_top.webp");
  --section-bg-bottom: url("../img/bg/entry/bg_entry_bottom.webp");
  --bg-top-opacity: 0.95;
  --bg-mid-opacity: 0.6;
  --bg-bottom-opacity: 0.9;
}

/* ========== ABOUT / スワイプ1 ========== */

.p-about {
  position: relative;
  /* screen 本文を overflow:hidden で切らない（短尺でも Visible clip 防止） */
  overflow: visible;
  background: var(--section-wash);
}

/* ========== ABOUT / EDITORIAL COPY (Figma 54:158 · 02_ABOUT_REFINED) ==========
   他セクションへ副作用を出さないよう .p-about* に閉じる */

.p-about__page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: stretch;
  gap: 0;
  height: auto;
  min-height: 100svh;
  overflow: visible;
  padding-top: calc(var(--header-h) + min(calc(12 * var(--u)), 1.3svh));
  padding-bottom: max(var(--bg-edge-h), min(calc(10 * var(--u)), 1.1svh));
  color: var(--color-ink);
}

.p-about__head {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin: 0 0 min(calc(16 * var(--u)), 1.6svh);
  overflow: visible;
}

.p-about__title {
  margin: 0;
  width: min(100%, calc(232 * var(--u)));
}

.p-about__title-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

/* --- Lead（Typography Anchor） --- */
.p-about__lead-block {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: calc(10 * var(--u)) minmax(0, 1fr);
  column-gap: calc(14 * var(--u));
  align-items: start;
  width: 100%;
  margin: 0 0 min(calc(22 * var(--u)), 2.2svh);
}

.p-about__lead-bar {
  display: block;
  width: calc(5 * var(--u));
  height: 100%;
  min-height: calc(80 * var(--u));
  border-radius: calc(3 * var(--u));
  background: var(--color-marker);
  align-self: stretch;
}

.p-about__lead-content {
  position: relative;
  min-width: 0;
  padding-right: calc(4 * var(--u));
}

.p-about__lead {
  margin: 0;
  font-family: var(--font-ja);
  font-size: calc(17.5 * var(--u));
  font-weight: 700;
  line-height: calc(29 / 17.5);
  letter-spacing: 0.01em;
  color: var(--color-primary);
}

.p-about__em {
  font-size: calc(21 * var(--u));
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0;
}

.p-about__em--year {
  position: relative;
  display: inline;
  color: var(--color-accent);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background-image: linear-gradient(var(--color-marker), var(--color-marker));
  background-repeat: no-repeat;
  background-size: 100% calc(4 * var(--u));
  background-position: 0 100%;
  padding-bottom: calc(1 * var(--u));
}

/* --- Scatter stickers（ファイル名どおりの位置） --- */
.p-about__scatter {
  margin: 0;
  pointer-events: none;
}

.p-about__scatter img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* タイトル（head）基準。page absolute だと safe center 時に縦ずれする */
/* タイトル画像との重なりを避け、PC（rail）ではさらに小さく右へ */
.p-about__scatter--flower {
  position: absolute;
  z-index: 0;
  top: calc(-18 * var(--u));
  right: calc(-2 * var(--u) - min(24px, var(--rail-w)));
  width: calc(148 * var(--u) - min(36px, var(--rail-w)));
  max-height: min(calc(100 * var(--u) - min(18px, var(--rail-w))), 12svh);
}

.p-about__scatter--flower img {
  max-height: inherit;
  width: auto;
  max-width: 100%;
  margin-left: auto;
}

.p-about__scatter--bus {
  position: absolute;
  right: calc(-88 * var(--u));
  top: 50%;
  z-index: 0;
  width: calc(210 * var(--u));
  max-height: min(calc(154 * var(--u)), 18svh);
  transform: translateY(-50%);
  pointer-events: none;
  overflow: visible;
}

.p-about__scatter--bus img {
  max-height: inherit;
  width: 100%;
  height: auto;
}

/* --- Body + Visual --- */
.p-about__body-area {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: min(calc(118 * var(--u)), 14svh);
  margin: 0 0 min(calc(20 * var(--u)), 2.2svh);
  overflow: visible;
}

.p-about__body {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: none;
  padding-right: calc(128 * var(--u));
  font-family: var(--font-ja);
  font-size: calc(12.5 * var(--u));
  font-weight: 500;
  line-height: calc(23 / 12.5);
  letter-spacing: 0.02em;
  color: var(--color-ink);
}

/* --- Closing --- */
.p-about__closing {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: min(calc(8 * var(--u)), 0.9svh);
  width: 100%;
  padding-top: min(calc(8 * var(--u)), 0.9svh);
}

/* Editorial Paper Plate（UI Card ではない） */
.p-about__plate {
  position: relative;
  z-index: 1;
  margin-left: calc(18 * var(--u));
  width: calc(100% - 18 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  background: transparent;
  border: 0;
  box-shadow: none;
}

.p-about__plate::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: calc(-8 * var(--u));
  right: calc(-2 * var(--u));
  top: calc(-5 * var(--u));
  bottom: calc(-6 * var(--u));
  background: rgba(255, 255, 255, 0.92);
  border-radius: 0;
  transform: rotate(-1.6deg);
  pointer-events: none;
}

.p-about__close {
  margin: 0;
  position: relative;
  z-index: 1;
  font-family: var(--font-ja);
  font-size: calc(15.5 * var(--u));
  font-weight: 700;
  line-height: calc(26 / 15.5);
  letter-spacing: 0.01em;
  color: var(--color-primary);
}

.p-about__em-green {
  color: var(--color-ink);
  background-image: linear-gradient(var(--color-marker), var(--color-marker));
  background-repeat: no-repeat;
  background-size: 100% calc(3 * var(--u));
  background-position: 0 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.p-about__bracket {
  position: absolute;
  z-index: 2;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  opacity: 0.5;
  pointer-events: none;
}

.p-about__bracket--br {
  right: calc(8 * var(--u));
  bottom: calc(6 * var(--u));
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}

.p-about__bracket--tl {
  left: calc(4 * var(--u));
  top: calc(4 * var(--u));
  border-left: 2px solid var(--color-primary);
  border-top: 2px solid var(--color-primary);
}

/* ========== IRIOMOTE (Figma 54:175) ========== */

.p-iriomote__page {
  position: relative;
  z-index: 1;
  justify-content: safe center;
  gap: min(calc(6 * var(--u)), 0.7svh);
  height: auto;
  min-height: 100svh;
  overflow: visible;
  padding-top: calc(var(--header-h) + min(calc(14 * var(--u)), 1.6svh));
  padding-bottom: max(var(--bg-edge-h), min(calc(12 * var(--u)), 1.4svh));
  color: var(--color-ink);
}

.p-iriomote__title { width: 100%; }
.p-iriomote__title-heading { margin: 0; }

.p-iriomote__title .c-title-img {
  width: auto;
  max-width: min(100%, calc(340 * var(--u)));
  height: auto;
  max-height: min(calc(136 * var(--u)), 15svh);
  margin-inline: 0;
  object-position: left center;
}

.p-iriomote__intro {
  margin: 0;
  font-size: calc(15.2 * var(--u));
  font-weight: 700;
  line-height: calc(25.5 / 15.2);
  color: var(--color-primary);
}

.p-iriomote__nature {
  position: relative;
  margin: 0;
  width: 100%;
  height: min(calc(188 * var(--u)), 21svh);
  border-radius: calc(48 * var(--u));
  overflow: hidden;
  background: #e6f4fb;
}

.p-iriomote__nature::before {
  content: "";
  position: absolute;
  right: 10%;
  top: 12%;
  width: min(calc(150 * var(--u)), 38%);
  height: min(calc(150 * var(--u)), 70%);
  border-radius: 50%;
  background: rgba(86, 176, 230, 0.22);
  z-index: 0;
  pointer-events: none;
}

.p-iriomote__nature img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: translateX(calc(-10 * var(--u)));
}

.p-iriomote__nature-row {
  position: relative;
  width: 100%;
  margin: 0;
  min-height: min(calc(132 * var(--u)), 16svh);
  overflow: visible;
}

.p-iriomote__slot-cat {
  position: absolute;
  left: calc(-60 * var(--u));
  top: 50%;
  z-index: 0;
  margin: 0;
  width: calc(148 * var(--u));
  max-height: min(calc(148 * var(--u)), 18svh);
  transform: translateY(-50%) rotate(-4deg);
  pointer-events: none;
}

.p-iriomote__slot-cat img {
  display: block;
  width: 100%;
  height: auto;
  max-height: inherit;
  object-fit: contain;
}

.p-iriomote__body {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-left: calc(92 * var(--u));
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.p-iriomote__body-plate {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: calc(6 * var(--u)) calc(16 * var(--u)) calc(6 * var(--u)) calc(18 * var(--u));
  background: transparent;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
}

.p-iriomote__body-plate::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: calc(-2 * var(--u)) calc(-2 * var(--u)) calc(-2 * var(--u)) calc(-4 * var(--u));
  background: rgba(255, 255, 255, 0.92);
  border-radius: 0;
  transform: rotate(-1.6deg);
  pointer-events: none;
}

.p-iriomote__body-text {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  font-size: calc(13 * var(--u));
  font-weight: 400;
  line-height: calc(23 / 13);
  color: var(--color-ink);
  text-align: left;
}

.p-iriomote__key {
  margin: min(calc(6 * var(--u)), 0.7svh) 0 0;
  width: 100%;
  font-size: calc(15.5 * var(--u));
  font-weight: 700;
  line-height: calc(26 / 15.5);
  color: var(--color-ink);
  text-align: left;
  white-space: nowrap;
}

.p-iriomote__key-line { display: inline; }

.p-iriomote__key-mark {
  display: inline;
  color: var(--color-ink);
  padding: 0;
  background: none;
  background-image: linear-gradient(var(--color-marker), var(--color-marker));
  background-repeat: no-repeat;
  background-size: 100% calc(4 * var(--u));
  background-position: 0 100%;
  padding-bottom: calc(1 * var(--u));
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.p-iriomote__closing {
  position: relative;
  width: 100%;
  min-height: calc(80 * var(--u));
  margin-top: min(calc(4 * var(--u)), 0.5svh);
}

.p-iriomote__closing-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(6 * var(--u));
  padding-left: 0;
  padding-right: calc(128 * var(--u));
  text-align: left;
}

.p-iriomote__closing-a {
  margin: 0;
  font-size: calc(13.5 * var(--u));
  font-weight: 700;
  line-height: calc(22 / 13.5);
  color: var(--color-ink);
  text-align: left;
  white-space: nowrap;
}

.p-iriomote__closing-b {
  margin: 0;
  font-size: calc(21 * var(--u));
  font-weight: 700;
  line-height: calc(26 / 21);
  color: var(--color-primary);
  text-align: left;
}

.p-iriomote__closing-mark {
  display: inline-block;
  font-size: calc(28 * var(--u));
  line-height: 1.3;
  font-weight: 700;
  padding: 0;
  border-radius: 0;
  white-space: nowrap;
  background: linear-gradient(180deg, transparent 55%, var(--color-marker) 55%, var(--color-marker) 92%, transparent 92%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.p-iriomote__slot-kayak {
  position: absolute;
  right: calc(-20 * var(--u));
  top: 50%;
  z-index: 0;
  margin: 0;
  width: calc(118 * var(--u));
  transform: translateY(-50%);
  pointer-events: none;
}

.p-iriomote__slot-kayak img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ========== MOBILITY (Figma 54:192) ========== */

.p-mobility__page {
  position: relative;
  z-index: 1;
  justify-content: safe center;
  gap: min(calc(10 * var(--u)), 1.2svh);
  height: auto;
  min-height: 100svh;
  overflow: visible;
  padding-top: calc(var(--header-h) + min(calc(12 * var(--u)), 1.4svh));
  padding-bottom: max(var(--bg-edge-h), min(calc(8 * var(--u)), 1svh));
  color: var(--color-ink);
}

.p-mobility__head { width: 100%; }
.p-mobility__title { margin: 0; }
.p-mobility__title .c-title-img {
  width: auto;
  max-width: min(100%, calc(315 * var(--u)));
  height: auto;
  max-height: min(calc(135 * var(--u)), 15.3svh);
  margin-inline: 0;
  object-position: left center;
}

.p-mobility__intro {
  position: relative;
  width: 100%;
  min-height: calc(100 * var(--u));
  overflow: visible;
}

.p-mobility__lead {
  position: relative;
  z-index: 1;
  margin: 0;
  min-width: 0;
  padding-right: calc(120 * var(--u));
  font-size: calc(17.5 * var(--u));
  font-weight: 700;
  line-height: calc(28 / 17.5);
  color: var(--color-primary);
}

.p-mobility__lead-line,
.p-mobility__lead-strong,
.p-mobility__lead-green {
  display: inline-block;
  white-space: nowrap;
}

.p-mobility__lead-strong {
  font-size: calc(18.5 * var(--u));
}
.p-mobility__lead-green {
  color: var(--color-accent);
}

.p-mobility__slot {
  margin: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-mobility__slot img {
  display: block;
  width: 92%;
  height: auto;
  object-fit: contain;
}

.p-mobility__slot--bus {
  position: absolute;
  right: calc(-58 * var(--u));
  top: 50%;
  z-index: 0;
  width: calc(188 * var(--u));
  transform: translateY(-50%);
  pointer-events: none;
  overflow: visible;
}

.p-mobility__slot--bus img {
  width: 100%;
}

.p-mobility__route-stage {
  position: relative;
  width: 100%;
  height: min(calc(268 * var(--u)), 32svh);
  margin: 0;
  padding: 0;
  overflow: visible;
}

.p-mobility__route-line {
  position: absolute;
  left: calc(-12 * var(--u));
  top: calc(-8 * var(--u));
  width: calc(100% + 24 * var(--u));
  height: calc(100% + 28 * var(--u));
  object-fit: fill;
  transform: scaleX(-1);
  pointer-events: none;
  z-index: 0;
  opacity: 0.92;
}

.p-mobility__slot--car {
  position: absolute;
  left: calc(-8 * var(--u));
  top: calc(14% - 32 * var(--u));
  width: calc(124 * var(--u));
  height: auto;
  min-height: calc(92 * var(--u));
  background: transparent;
  border-radius: 0;
  z-index: 1;
}

.p-mobility__slot--car img {
  width: 100%;
}

.p-mobility__slot--stop {
  position: absolute;
  right: calc(-4 * var(--u));
  bottom: calc(18% - 20 * var(--u));
  width: calc(80 * var(--u));
  height: auto;
  min-height: calc(90 * var(--u));
  background: transparent;
  border-radius: 0;
  z-index: 1;
}

.p-mobility__copy-a,
.p-mobility__copy-b {
  position: absolute;
  z-index: 2;
  margin: 0;
  font-size: calc(14 * var(--u));
  font-weight: 500;
  line-height: calc(25 / 14);
  color: var(--color-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.p-mobility__copy-a::before,
.p-mobility__copy-b::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-2 * var(--u)) calc(-3 * var(--u)) calc(-2 * var(--u)) calc(-3 * var(--u));
  background: rgba(255, 255, 255, 0.92);
  border-radius: 0;
  transform: rotate(-1.5deg) skewX(-8deg);
  pointer-events: none;
}

.p-mobility__copy-a {
  right: 0;
  left: auto;
  top: 5%;
  width: calc(268 * var(--u));
  max-width: 100%;
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  text-align: center;
}

.p-mobility__copy-a::before {
  transform: rotate(1.4deg) skewX(8deg);
}

.p-mobility__copy-b {
  left: 0;
  right: auto;
  top: 44%;
  width: calc(292 * var(--u));
  max-width: 100%;
  padding: calc(8 * var(--u)) calc(12 * var(--u));
}

.p-mobility__copy-b::before {
  transform: rotate(-1.6deg) skewX(-8deg);
}

.p-mobility__highlight {
  background: transparent;
  border-radius: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.p-mobility__closing-band {
  position: relative;
  width: 100%;
  margin-top: calc(-16 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  border-radius: 0;
  background: transparent;
  border: 0;
  box-sizing: border-box;
  box-shadow: none;
}

.p-mobility__closing-band::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: calc(-4 * var(--u)) calc(-2 * var(--u)) calc(-4 * var(--u)) calc(-4 * var(--u));
  background: rgba(255, 255, 255, 0.92);
  border-radius: 0;
  transform: rotate(-1.5deg) skewX(-6deg);
  pointer-events: none;
}

.p-mobility__bracket {
  position: absolute;
  z-index: 2;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  opacity: 0.5;
  pointer-events: none;
}

.p-mobility__bracket--tl {
  left: calc(6 * var(--u));
  top: calc(6 * var(--u));
  border-left: 2px solid var(--color-primary);
  border-top: 2px solid var(--color-primary);
}

.p-mobility__bracket--tr {
  right: calc(6 * var(--u));
  top: calc(6 * var(--u));
  border-right: 2px solid var(--color-primary);
  border-top: 2px solid var(--color-primary);
}

.p-mobility__bracket--bl {
  left: calc(6 * var(--u));
  bottom: calc(6 * var(--u));
  border-left: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}

.p-mobility__bracket--br {
  right: calc(6 * var(--u));
  bottom: calc(6 * var(--u));
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}

.p-mobility__close {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: calc(23 / 16);
  color: var(--color-primary);
}

.p-mobility__close-mark {
  color: var(--color-primary);
  font-size: calc(19 * var(--u));
  background: linear-gradient(180deg, transparent 68%, var(--color-marker) 68%, var(--color-marker) 94%, transparent 94%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.p-mobility__close-mark--lg { font-size: calc(21 * var(--u)); }

/* ========== WORK (Figma 54:211) ========== */

.p-work__page {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: min(calc(14 * var(--u)), 1.6svh);
  height: auto;
  min-height: 100svh;
  overflow: visible;
  padding-top: calc(var(--header-h) + min(calc(16 * var(--u)), 1.8svh));
  padding-bottom: max(var(--bg-edge-h), min(calc(12 * var(--u)), 1.4svh));
}

.p-work__head,
.p-work__lead,
.p-work__body-row,
.p-work__closing-band {
  position: relative;
  z-index: 1;
}

.p-work__head {
  position: relative;
  width: 100%;
  overflow: visible;
}
.p-work__title { margin: 0; }
.p-work__title .c-title-img {
  width: auto;
  max-width: min(100%, calc(380 * var(--u)));
  height: auto;
  max-height: min(calc(158 * var(--u)), 17svh);
  margin-inline: 0;
  object-position: left center;
}

.p-work__lead {
  margin: 0;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}

.p-work__lead-line {
  display: inline;
  font-size: calc(20 * var(--u));
  line-height: calc(30 / 20);
}

.p-work__lead-mark {
  display: inline;
  font-size: calc(20 * var(--u));
  line-height: calc(30 / 20);
  color: var(--color-primary);
  padding: 0;
  background: none;
  box-decoration-break: unset;
  -webkit-box-decoration-break: unset;
}

.p-work__body-row {
  position: relative;
  width: 100%;
  min-height: min(calc(180 * var(--u)), 22svh);
  overflow: visible;
}

.p-work__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  padding-left: calc(13 * var(--u));
  padding-right: calc(108 * var(--u));
}

.p-work__copy {
  margin: 0;
  font-size: calc(14 * var(--u));
  font-weight: 400;
  line-height: calc(25 / 14);
  color: var(--color-ink);
}

.p-work__rail {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(3 * var(--u));
  height: 100%;
  background: var(--color-accent);
}

.p-work__visual {
  position: absolute;
  right: calc(-30 * var(--u));
  top: 0;
  z-index: 0;
  margin: 0;
  width: calc(148 * var(--u));
  pointer-events: none;
}

.p-work__visual img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(calc(236 * var(--u)), 28svh);
  object-fit: contain;
}

.p-work__tools {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  pointer-events: none;
  overflow: visible;
}

.p-work__tool {
  position: absolute;
  margin: 0;
  width: calc(56 * var(--u));
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-work__tool--wrench {
  /* SP は現状維持。PC（rail 開放時）だけ右下へずらす */
  top: calc(28 * var(--u) + min(22px, var(--rail-w)));
  right: calc(56 * var(--u) - min(40px, var(--rail-w)));
  width: calc(96 * var(--u));
  transform: rotate(-18deg);
}

.p-work__tool img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.p-work__closing-band {
  position: relative;
  z-index: 1;
  margin: min(calc(16 * var(--u)), 1.8svh) 0 0;
  width: 100%;
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  background: transparent;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
}

.p-work__closing-band::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: calc(-4 * var(--u)) calc(-2 * var(--u)) calc(-4 * var(--u)) calc(-4 * var(--u));
  background: rgba(255, 255, 255, 0.92);
  border-radius: 0;
  transform: rotate(-1.5deg) skewX(-6deg);
  pointer-events: none;
}

.p-work__closing {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
  padding: 0;
  font-size: calc(16.5 * var(--u));
  font-weight: 700;
  line-height: calc(26 / 16.5);
  color: var(--color-primary);
}

.p-work__bracket {
  position: absolute;
  z-index: 2;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  opacity: 0.5;
  pointer-events: none;
}

.p-work__bracket--tl {
  left: calc(6 * var(--u));
  top: calc(6 * var(--u));
  border-left: 2px solid var(--color-primary);
  border-top: 2px solid var(--color-primary);
}

.p-work__bracket--tr {
  right: calc(6 * var(--u));
  top: calc(6 * var(--u));
  border-right: 2px solid var(--color-primary);
  border-top: 2px solid var(--color-primary);
}

.p-work__bracket--bl {
  left: calc(6 * var(--u));
  bottom: calc(6 * var(--u));
  border-left: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}

.p-work__bracket--br {
  right: calc(6 * var(--u));
  bottom: calc(6 * var(--u));
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}

.p-work__em-green {
  color: var(--color-ink);
  font-size: inherit;
  background: linear-gradient(180deg, transparent 62%, var(--color-marker) 62%, var(--color-marker) 94%, transparent 94%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ========== POINT 01/02 (Figma 54:228) ========== */

.p-point12__page {
  display: flex;
  flex-direction: column;
  gap: min(calc(20 * var(--u)), 2.2svh);
  height: auto;
  min-height: 100svh;
  overflow: visible;
}

.p-point12__zone {
  display: flex;
  flex-direction: column;
  gap: min(calc(8 * var(--u)), 1svh);
  min-height: 0;
}

.p-point12__zone--p01 {
  gap: min(calc(8 * var(--u)), 1svh);
}

.p-point12__zone--p02 {
  gap: min(calc(8 * var(--u)), 1svh);
}

.p-point12__head {
  width: 100%;
  text-align: left;
}

.p-point12__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(4 * var(--u));
  font-family: var(--font-ja);
  font-weight: 700;
  color: var(--color-primary);
}

.p-point12__title-label {
  display: block;
  width: auto;
  max-width: min(100%, calc(148 * var(--u)));
  height: auto;
  max-height: min(calc(48 * var(--u)), 5.5svh);
  object-fit: contain;
  object-position: left center;
}

.p-point12__title-main {
  font-size: calc(24 * var(--u));
  font-weight: 800;
  line-height: calc(34 / 24);
  color: var(--color-primary);
  background-image: linear-gradient(var(--color-marker), var(--color-marker));
  background-repeat: no-repeat;
  background-size: 100% calc(4 * var(--u));
  background-position: 0 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.p-point12__title-em {
  color: inherit;
  font-weight: inherit;
}

.p-point12__p01-row {
  position: relative;
  width: 100%;
  overflow: visible;
}

.p-point12__support {
  position: relative;
  z-index: 1;
  margin: 0;
  min-width: 0;
  padding-right: calc(72 * var(--u));
  font-size: calc(16.5 * var(--u));
  font-weight: 700;
  line-height: calc(26 / 16.5);
  color: var(--color-primary);
  white-space: nowrap;
}

.p-point12__slot {
  position: absolute;
  right: 0;
  top: calc(-86 * var(--u));
  z-index: 0;
  margin: 0;
  width: calc(122 * var(--u));
  pointer-events: none;
}

.p-point12__slot img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(calc(122 * var(--u)), 14svh);
  object-fit: contain;
}

.p-point12__body {
  margin: 0;
  font-size: calc(14 * var(--u));
  font-weight: 400;
  line-height: calc(25 / 14);
  color: var(--color-ink);
}

.p-point12__em-green {
  font-weight: 800;
  font-size: calc(15 * var(--u));
  color: var(--color-ink);
}

.p-point12__split {
  flex: 0 0 auto;
  height: calc(5 * var(--u));
  margin: min(calc(6 * var(--u)), 0.7svh) 0;
  background: var(--color-marker);
  border-radius: 0;
}

.p-point12__head--p02 {
  margin-bottom: min(calc(2 * var(--u)), 0.3svh);
}

.p-point12__p02-row {
  display: grid;
  grid-template-columns: calc(88 * var(--u)) minmax(0, 1fr);
  gap: calc(12 * var(--u));
  align-items: start;
}

.p-point12__p02-visuals {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  align-items: center;
  margin-top: calc(8 * var(--u));
}

.p-point12__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: calc(68 * var(--u));
  height: auto;
  min-height: calc(48 * var(--u));
  border-radius: 0;
  background: transparent;
}

.p-point12__chip img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.p-point12__p02-copy {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  min-width: 0;
}

.p-point12__stamp {
  margin: 0;
  display: inline-block;
  align-self: flex-start;
  padding: 0;
  font-size: calc(24 * var(--u));
  font-weight: 800;
  line-height: calc(32 / 24);
  color: var(--color-primary);
  background: linear-gradient(180deg, transparent 62%, var(--color-marker) 62%, var(--color-marker) 94%, transparent 94%);
  transform: rotate(-6deg);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ========== POINT 03/04（POINT 01/02 と同型：白背景 + 黄線） ========== */

.p-point34 { overflow: visible; }

.p-point34__page {
  display: flex;
  flex-direction: column;
  gap: min(calc(20 * var(--u)), 2.2svh);
  height: auto;
  min-height: 100svh;
  overflow: visible;
  background: transparent;
}

.p-point34__zone {
  display: flex;
  flex-direction: column;
  gap: min(calc(8 * var(--u)), 1svh);
  min-height: 0;
}

.p-point34__split {
  flex: 0 0 auto;
  height: calc(5 * var(--u));
  margin: min(calc(6 * var(--u)), 0.7svh) 0;
  background: var(--color-marker);
  border-radius: 0;
}

.p-point34__head {
  width: 100%;
  text-align: left;
}

.p-point34__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(2 * var(--u));
  font-family: var(--font-ja);
  font-weight: 700;
  color: var(--color-primary);
}

.p-point34__title-label {
  display: block;
  width: auto;
  max-width: min(100%, calc(148 * var(--u)));
  height: auto;
  max-height: min(calc(48 * var(--u)), 5.5svh);
  object-fit: contain;
  object-position: left center;
}

.p-point34__title-main {
  font-size: calc(25 * var(--u));
  line-height: calc(34 / 25);
  white-space: nowrap;
  color: var(--color-primary);
  background-image: linear-gradient(var(--color-marker), var(--color-marker));
  background-repeat: no-repeat;
  background-size: 100% calc(4 * var(--u));
  background-position: 0 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.p-point34__title-em {
  color: inherit;
}

.p-point34__head--p04 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: min(calc(4 * var(--u)), 0.5svh);
  margin-bottom: min(calc(4 * var(--u)), 0.5svh);
}

.p-point34__holiday-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(112 * var(--u));
  gap: calc(14 * var(--u));
  align-items: center;
}

.p-point34__holiday {
  margin: 0;
  font-size: calc(14 * var(--u));
  font-weight: 400;
  line-height: calc(25 / 14);
  color: var(--color-ink);
}

.p-point34__holiday-mark {
  display: inline-block;
  font-size: calc(19 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primary);
  padding: 0;
  background: none;
  border-radius: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.p-point34__em-green {
  font-weight: 700;
  font-size: calc(15 * var(--u));
  color: var(--color-ink);
}

.p-point34__slot { margin: 0; }
.p-point34__slot--sea {
  width: calc(132 * var(--u));
  height: auto;
  min-height: min(calc(160 * var(--u)), 18svh);
  border-radius: 0;
  background: transparent;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(calc(16 * var(--u)));
}
.p-point34__slot--sea img {
  width: 100%;
  height: auto;
  max-height: min(calc(176 * var(--u)), 21svh);
  display: block;
  object-fit: contain;
}

.p-point34__skill-label {
  display: block;
  margin: 0;
  width: auto;
  max-width: min(100%, calc(148 * var(--u)));
  height: auto;
  max-height: min(calc(48 * var(--u)), 5.5svh);
  object-fit: contain;
  object-position: left center;
}

.p-point34__skill-title {
  margin: 0;
  font-size: calc(27 * var(--u));
  font-weight: 700;
  line-height: calc(36 / 27);
  color: var(--color-primary);
  background-image: linear-gradient(var(--color-marker), var(--color-marker));
  background-repeat: no-repeat;
  background-size: 100% calc(4 * var(--u));
  background-position: 0 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.p-point34__skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(112 * var(--u));
  gap: calc(14 * var(--u));
  align-items: start;
}

.p-point34__skill-body {
  margin: 0;
  font-size: calc(14 * var(--u));
  font-weight: 400;
  line-height: calc(25 / 14);
  color: var(--color-ink);
}

.p-point34__em-cyan {
  font-weight: 700;
  font-size: calc(17 * var(--u));
  color: var(--color-ink);
}

.p-point34__em-strong {
  font-weight: 700;
  font-size: calc(15 * var(--u));
  color: var(--color-primary);
}

.p-point34__slot--tech {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  align-items: center;
}

.p-point34__slot--tech img {
  width: calc(96 * var(--u));
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

/* ========== ONE DAY (Figma 54:261) ========== */

.p-oneday__page {
  gap: min(calc(8 * var(--u)), 1svh);
  height: auto;
  min-height: 100svh;
  overflow: visible;
  padding-top: calc(var(--header-h) + min(calc(10 * var(--u)), 1.2svh));
  padding-bottom: max(var(--bg-edge-h), min(calc(10 * var(--u)), 1.2svh));
}
.p-oneday__head {
  width: 100%;
  margin-top: calc(-20 * var(--u));
}
.p-oneday__title { margin: 0; }

.p-oneday__title .c-title-img {
  width: auto;
  max-width: min(100%, calc(380 * var(--u)));
  height: auto;
  max-height: min(calc(124 * var(--u)), 14.5svh);
  margin-inline: 0;
  object-fit: contain;
  object-position: left center;
}

.p-oneday__timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 calc(32 * var(--u));
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

.p-oneday__timeline::before {
  content: "";
  position: absolute;
  left: calc(8 * var(--u));
  top: calc(10 * var(--u));
  bottom: calc(10 * var(--u));
  width: 2px;
  background: rgba(16, 198, 177, 0.45);
}

.p-oneday__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: min(calc(2 * var(--u)), 0.35svh);
  padding-bottom: min(calc(14 * var(--u)), 1.6svh);
}
.p-oneday__item:last-child { padding-bottom: 0; }

.p-oneday__item--illust {
  flex-direction: row;
  align-items: flex-start;
  gap: calc(10 * var(--u));
}

.p-oneday__item-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: min(calc(2 * var(--u)), 0.35svh);
}

.p-oneday__dot {
  position: absolute;
  left: calc(-28 * var(--u));
  top: calc(6 * var(--u));
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 calc(2 * var(--u)) rgba(16, 198, 177, 0.22);
}

.p-oneday__dot--accent { background: var(--color-accent); }

.p-oneday__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(4 * var(--u)) calc(10 * var(--u));
}

.p-oneday__label--note {
  align-items: baseline;
  gap: 0;
  flex-wrap: nowrap;
}

.p-oneday__label--note .p-oneday__note {
  white-space: nowrap;
}

.p-oneday__time--inline {
  display: inline;
  font-size: calc(18 * var(--u));
  line-height: 1.2;
  margin: 0 calc(1 * var(--u));
  vertical-align: baseline;
}

.p-oneday__time {
  margin: 0;
  font-family: var(--font-latin-black);
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primary);
}

.p-oneday__action {
  margin: 0;
  font-size: calc(14 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-primary);
}

.p-oneday__action--lg {
  font-size: calc(16 * var(--u));
  line-height: 1.3;
  color: var(--color-primary);
}

.p-oneday__action--afternoon {
  font-size: calc(15 * var(--u));
  line-height: 1.3;
  color: var(--color-primary);
}

.p-oneday__action--leave {
  font-size: calc(16 * var(--u));
  line-height: 1.3;
  color: var(--color-primary);
}

.p-oneday__action-inline {
  font-weight: 700;
  font-size: inherit;
  color: var(--color-primary);
}

.p-oneday__note {
  margin: 0;
  font-size: calc(12 * var(--u));
  line-height: 1.4;
  color: var(--color-ink);
}

.p-oneday__detail {
  margin: 0;
  font-size: calc(12.4 * var(--u));
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-ink);
}

.p-oneday__item--illust .p-oneday__slot {
  margin: 0;
  width: min(calc(76 * var(--u)), 9svh);
  flex: 0 0 auto;
  align-self: center;
}

.p-oneday__item--lunch .p-oneday__slot {
  width: min(calc(114 * var(--u)), 13.5svh);
}

.p-oneday__item--cleaning {
  flex-direction: column;
  min-height: 0;
  padding-right: calc(88 * var(--u));
  padding-bottom: min(calc(8 * var(--u)), 0.9svh);
  justify-content: flex-start;
  overflow: visible;
}

.p-oneday__item--cleaning .p-oneday__item-main {
  width: 100%;
  gap: 0;
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
}

.p-oneday__item--cleaning .p-oneday__detail {
  line-height: 1.35;
}

.p-oneday__item--cleaning .p-oneday__slot {
  position: absolute;
  right: calc(-4 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  width: min(calc(96 * var(--u)), 12svh);
  flex: none;
  align-self: auto;
  pointer-events: none;
  z-index: 1;
}

.p-oneday__slot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ========== VOICE (Figma 54:283) ========== */

.p-voice__page {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: min(calc(10 * var(--u)), 1.2svh);
  height: auto;
  min-height: 100svh;
  overflow: visible;
  padding-top: calc(var(--header-h) + min(calc(12 * var(--u)), 1.4svh));
  padding-bottom: max(var(--bg-edge-h), min(calc(10 * var(--u)), 1.2svh));
}

.p-voice__scatter {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  pointer-events: none;
  overflow: visible;
}

.p-voice__float {
  position: absolute;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-voice__float img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.p-voice__float--home {
  left: calc(-6 * var(--u));
  bottom: calc(72 * var(--u));
  width: calc(74 * var(--u));
  transform: rotate(-8deg);
}

.p-voice__head,
.p-voice__quote,
.p-voice__poster,
.p-voice__plate {
  position: relative;
  z-index: 1;
}

.p-voice__head { width: 100%; }
.p-voice__title { margin: 0; }

.p-voice__title .c-title-img {
  width: auto;
  max-width: min(100%, calc(400 * var(--u)));
  height: auto;
  max-height: min(calc(156 * var(--u)), 18svh);
}

.p-voice__quote {
  position: relative;
  margin: 0;
  padding: calc(4 * var(--u)) 0 calc(4 * var(--u)) calc(14 * var(--u));
  border: 0;
  background: transparent;
  border-radius: 0;
}

.p-voice__quote-rail {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: calc(4 * var(--u));
  border-radius: calc(3 * var(--u));
  background: var(--color-marker);
}

.p-voice__quote-a,
.p-voice__quote-b {
  margin: 0;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: calc(26 / 16);
}

.p-voice__quote-a { color: var(--color-primary); }
.p-voice__quote-b { color: var(--color-ink); }

.p-voice__poster {
  width: 100%;
}

.p-voice__copy {
  display: flex;
  flex-direction: column;
  gap: min(calc(10 * var(--u)), 1.2svh);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.p-voice__key {
  margin: 0;
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: calc(30 / 20);
  color: var(--color-primary);
}

.p-voice__key-mark {
  display: inline;
  white-space: nowrap;
  padding: 0;
  padding-bottom: calc(1 * var(--u));
  background-image: linear-gradient(var(--color-marker), var(--color-marker));
  background-repeat: no-repeat;
  background-size: 100% calc(4 * var(--u));
  background-position: 0 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.p-voice__body {
  margin: 0;
  font-size: calc(13.5 * var(--u));
  font-weight: 400;
  line-height: calc(24 / 13.5);
  color: var(--color-ink);
}

.p-voice__closing-row {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  margin-top: calc(20 * var(--u));
  /* 整備士イラスト（z上）と本文の衝突回避。吹き出し三角は残す */
  padding-right: calc(108 * var(--u));
  box-sizing: border-box;
}

.p-voice__person {
  position: absolute;
  z-index: 2;
  right: calc(-20 * var(--u));
  bottom: calc(-6 * var(--u));
  margin: 0;
  width: calc(140 * var(--u));
  height: auto;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  pointer-events: none;
}

.p-voice__person > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(calc(248 * var(--u)), 30svh);
  object-fit: contain;
  object-position: center bottom;
}

.p-voice__person::before { content: none; }

.p-voice__plate {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: calc(20 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u));
  background: #e6f8f2;
  border: 1px solid rgba(16, 198, 177, 0.48);
  border-radius: calc(16 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u));
  box-sizing: border-box;
}

.p-voice__plate-tag {
  position: absolute;
  z-index: 3;
  left: calc(10 * var(--u));
  top: calc(-14 * var(--u));
  display: inline-block;
  padding: calc(5 * var(--u)) calc(14 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--color-invert);
  background: var(--color-primary);
  border-radius: calc(999 * var(--u));
  white-space: nowrap;
  pointer-events: none;
}

/* 右上の吹き出し三角（人物側へ） */
.p-voice__plate::before {
  content: "";
  position: absolute;
  top: calc(12 * var(--u));
  right: calc(-11 * var(--u));
  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(8 * var(--u)) 0 calc(8 * var(--u)) calc(12 * var(--u));
  border-color: transparent transparent transparent #e6f8f2;
  filter: drop-shadow(1px 0 0 rgba(16, 198, 177, 0.48));
}

.p-voice__plate-body {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  min-width: 0;
}

.p-voice__body--plate {
  width: 100%;
}

.p-voice__closing {
  margin: 0;
  max-width: 100%;
  font-size: calc(15 * var(--u));
  font-weight: 700;
  line-height: calc(24 / 15);
  color: var(--color-primary);
  overflow-wrap: break-word;
}

.p-voice__closing-a { color: var(--color-primary); }

.p-voice__closing .p-voice__em-green {
  display: inline;
  color: var(--color-primary);
  white-space: normal;
}

/* ========== COMPANY (Figma 54:299) ========== */

.p-company__page {
  display: flex;
  flex-direction: column;
  gap: min(calc(8 * var(--u)), 1svh);
  height: auto;
  min-height: 100svh;
  overflow: visible;
  padding-top: calc(var(--header-h) + min(calc(10 * var(--u)), 1.2svh));
  padding-bottom: max(var(--bg-edge-h), min(calc(10 * var(--u)), 1.2svh));
}

.p-company__head { width: 100%; }
.p-company__title { margin: 0; }
.p-company__title .c-title-img {
  width: auto;
  max-width: min(100%, calc(280 * var(--u)));
  height: auto;
  max-height: min(calc(100 * var(--u)), 12svh);
  margin-inline: 0;
}

.p-company__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: min(calc(10 * var(--u)), 1.2svh);
}

.p-company__row {
  display: grid;
  grid-template-columns: calc(76 * var(--u)) 1fr;
  gap: calc(16 * var(--u));
  padding: 0 0 min(calc(10 * var(--u)), 1.2svh);
  border-bottom: 1px solid rgba(220, 231, 240, 0.7);
}

.p-company__row dt {
  margin: 0;
  font-size: calc(12 * var(--u));
  font-weight: 700;
  line-height: calc(24 / 12);
  color: var(--color-primary);
}

.p-company__row dd {
  margin: 0;
  font-size: calc(14 * var(--u));
  font-weight: 400;
  line-height: calc(25 / 14);
  color: var(--color-ink);
}

.p-company__visuals {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: calc(16 * var(--u));
  margin: calc(8 * var(--u)) 0 0;
  width: 100%;
}

.p-company__slot {
  margin: 0;
  opacity: 1;
}

.p-company__slot--house {
  width: min(calc(90 * var(--u)), 28%);
}

.p-company__slot--bus {
  width: min(calc(100 * var(--u)), 32%);
}

.p-company__slot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.p-company__cta {
  padding-top: calc(16 * var(--u));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(14 * var(--u));
}

/* ========== REQUIREMENTS / LONG FORM ========== */

.p-req__head {
  width: 100%;
}

.p-req__title {
  margin: calc(8 * var(--u)) 0 0;
}

.p-req__title .c-title-img {
  width: auto;
  max-width: min(100%, calc(200 * var(--u)));
  height: auto;
  max-height: min(calc(70 * var(--u)), 8.5svh);
  margin-inline: 0;
  object-fit: contain;
  object-position: left center;
}

.p-req__decor {
  display: flex;
  gap: calc(12 * var(--u));
  pointer-events: none;
}

.p-req__decor--top {
  justify-content: flex-end;
  margin-bottom: min(calc(8 * var(--u)), 1svh);
}

.p-req__decor--top img {
  width: min(calc(100 * var(--u)), 18vw);
  height: auto;
  opacity: 0.55;
}

.p-req__decor--bottom {
  justify-content: space-between;
  margin-top: min(calc(24 * var(--u)), 3svh);
  padding: 0 calc(8 * var(--u));
}

.p-req__decor--bottom img {
  width: min(calc(90 * var(--u)), 24%);
  height: auto;
  opacity: 1;
}

.p-req__decor--bottom img:first-child {
  width: min(calc(64 * var(--u)), 18%);
}

.p-req__table {
  position: relative;
  margin-top: calc(16 * var(--u));
  padding-left: calc(18 * var(--u));
}

.p-req__rail {
  position: absolute;
  left: 0;
  top: calc(8 * var(--u));
  bottom: calc(8 * var(--u));
  width: calc(5 * var(--u));
  border-radius: 999px;
  background: var(--color-accent);
}

.p-req__list { display: flex; flex-direction: column; }

.p-req__row {
  display: grid;
  grid-template-columns: calc(64 * var(--u)) minmax(0, 1fr);
  column-gap: calc(12 * var(--u));
  padding: calc(8 * var(--u)) 0;
  border-bottom: 1px solid var(--color-line);
}

.p-req__row dt {
  align-self: start;
  justify-self: start;
  text-align: left;
  color: var(--color-primary);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  background: transparent;
  border: 0;
  padding: 0;
  white-space: nowrap;
}

.p-req__row dd {
  font-size: calc(14 * var(--u));
  color: var(--color-ink);
}

.p-req__line { display: block; }

.p-req__benefits {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
}

.p-req__benefits li {
  padding-left: calc(12 * var(--u));
  position: relative;
}

.p-req__benefits li::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* ========== ENTRY / APPLICATION FLOW ========== */

.p-entry__head {
  position: relative;
  width: 100%;
  min-height: min(calc(112 * var(--u)), 13svh);
}

.p-entry__title {
  position: relative;
  z-index: 1;
  margin: 0;
  min-width: 0;
  padding-right: calc(72 * var(--u));
}

.p-entry__title .c-title-img {
  width: auto;
  max-width: min(100%, calc(300 * var(--u)));
  height: auto;
  max-height: min(calc(110 * var(--u)), 13svh);
}

.p-entry__person {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
  margin: 0;
  width: calc(64 * var(--u));
  pointer-events: none;
}

.p-entry__person img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(calc(112 * var(--u)), 13svh);
  object-fit: contain;
  object-position: right top;
}

.p-entry__flow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(12 * var(--u));
  margin-top: calc(20 * var(--u));
}

.p-entry__decor {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  opacity: 0.4;
}

.p-entry__decor img:first-child {
  width: min(calc(72 * var(--u)), 14vw);
  height: auto;
}

.p-entry__decor img:last-child {
  width: min(calc(64 * var(--u)), 12vw);
  height: auto;
}

.p-entry__form {
  position: relative;
  z-index: 1;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--v-gap);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.p-entry__field {
  display: flex;
  flex-direction: column;
  gap: var(--v-gap-sm);
  width: 100%;
}

.p-entry__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--v-gap-sm);
}

.p-entry__label-text {
  font-size: calc(13 * var(--u));
  font-weight: 700;
}

.p-entry__flag {
  font-size: calc(10 * var(--u));
  font-weight: 700;
  min-width: calc(54 * var(--u));
  text-align: center;
  padding: calc(4 * var(--u)) 0;
  border-radius: calc(8 * var(--u));
}

.p-entry__flag--req {
  color: var(--color-invert);
  background: #e23b3b;
}

.p-entry__flag--opt {
  color: var(--color-muted);
  background: rgba(32, 37, 55, 0.08);
}

.p-entry__note {
  font-size: calc(11 * var(--u));
  color: var(--color-muted);
}

.p-entry__input,
.p-entry__textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: calc(50 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border: 1px solid var(--color-line);
  border-radius: calc(12 * var(--u));
  background: var(--color-base);
  font: inherit;
}

.p-entry__textarea { min-height: calc(112 * var(--u)); resize: vertical; }

.p-entry__actions {
  display: flex;
  justify-content: center;
  margin-top: calc(12 * var(--u));
}

.p-entry__submit {
  width: calc(220 * var(--u));
  max-width: 100%;
  min-height: calc(52 * var(--u));
}

/* ========== MOTION ========== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}