@charset "UTF-8";
html {
  font-size: 100%;
}

a[href^=tel] {
  text-decoration: none;
}

a {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  /* 強調をなくす */
}

a:hover {
  text-decoration: none;
}

img,
svg {
  vertical-align: middle;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:where(:any-link, button, [type=button], [type=reset], [type=submit], label[for], select, summary, [role=tab], [role=button]) {
  cursor: pointer;
}

:where(button, [type=button], [type=reset], [type=submit]) {
  touch-action: manipulation;
}

:focus:not(:focus-visible) {
  outline: none;
}

input[type=text] {
  font-size: 1rem;
  /* = 16px */
}

textarea {
  field-sizing: content;
}

body {
  /* カンプはカード・装飾がビューポート外へはみ出す設計のため横方向をクリップする */
  overflow-x: clip;
  font-family: var(--base-font-family);
  font-weight: var(--fw-regular);
  line-height: 1.8;
  color: var(--color-text);
  background-color: var(--color-bg-section);
}

/* PC（md 以上）: 中央カラム(.l-scroll)を独立スクロールさせるため、ページ全体のスクロールを止める（額縁レイアウト） */
@media screen and (width >= 768px) {
  html,
  body {
    block-size: 100%;
    overflow: hidden;
  }
}
/* かつて `@import "kiso.css";` を置いていたが、Sass はこれを素の CSS @import として
   そのまま出力するため、bare specifier が解決されず本番で 404 になっていた
   （dev では SPA フォールバックで index.html が返っていた）。
   つまり一度も適用されていない。以下の記述がリセットを担っているため import は削除した。 */
html {
  box-sizing: border-box;
  /* Prevent adjustments of font size after orientation changes in iOS */
  word-break: normal;
  tab-size: 4;
  text-size-adjust: 100%;
}

*,
::before,
::after {
  /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
  box-sizing: inherit;
  box-sizing: border-box;
  background-repeat: no-repeat;
}

::before,
::after {
  text-decoration: inherit;
  /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit;
}

* {
  padding: 0;
  /* Reset `padding` and `margin` of all elements */
  margin: 0;
}

/* # =================================================================
     # General elements
     # ================================================================= */
hr {
  /* Show the overflow in Edge and IE */
  height: 0;
  overflow: visible;
  /* Add the correct box sizing in Firefox */
  color: inherit;
  /* Correct border color in Firefox. */
}

details,
main {
  display: block;
  /* Render the `main` element consistently in IE. */
}

summary {
  display: list-item;
  /* Add the correct display in all browsers */
}

small {
  font-size: 80%;
  /* Set font-size to 80% in `small` elements */
}

[hidden] {
  display: none;
  /* Add the correct display in IE */
}

abbr[title] {
  /* Remove the bottom border in Chrome 57 */
  /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
  text-decoration: underline;
  text-decoration: underline dotted;
  border-bottom: none;
}

a {
  background-color: transparent;
  /* Remove the gray background on active links in IE 10 */
}

a:active,
a:hover {
  outline-width: 0;
  /* Remove the outline when hovering in all browsers */
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  /* Specify the font family of code elements */
}

pre {
  font-size: 1em;
  /* Correct the odd `em` font sizing in all browsers */
}

b,
strong {
  font-weight: bolder;
  /* Add the correct font weight in Chrome, Edge, and Safari */
}

/* https://gist.github.com/unruthless/413930 */
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  /* Correct border color in all Chrome, Edge, and Safari. */
  text-indent: 0;
  border-color: inherit;
  /* Remove text indentation in Chrome, Edge, and Safari */
}

iframe {
  border-style: none;
}

/* # =================================================================
     # Forms
     # ================================================================= */
input {
  border-radius: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
  /* Correct the cursor style of increment and decrement buttons in Chrome */
}

[type=search] {
  appearance: textfield;
  appearance: none;
  /* Correct the odd appearance in Chrome and Safari */
  outline-offset: -2px;
  /* Correct the outline style in Safari */
}

[type=search]::-webkit-search-decoration {
  appearance: none;
  /* Remove the inner padding in Chrome and Safari on macOS */
}

textarea {
  overflow: auto;
  resize: vertical;
}

button,
input,
optgroup,
select,
textarea {
  font: inherit;
  /* Specify font inheritance of form elements */
}

optgroup {
  font-weight: bold;
  /* Restore the font weight unset by the previous rule */
}

button {
  overflow: visible;
  /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
}

button,
select {
  text-transform: none;
  /* Firefox 40+, Internet Explorer 11- */
}

/* Apply cursor pointer to button elements */
button,
[type=button],
[type=reset],
[type=submit],
[role=button] {
  cursor: pointer;
}

/* Remove inner padding and border in Firefox 4+ */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

/* Replace focus style removed in the border reset above */
button:-moz-focusring,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  outline: 1px dotted ButtonText;
}

button,
html [type=button],
[type=reset],
[type=submit] {
  appearance: button;
  /* Correct the inability to style clickable types in iOS */
}

button,
input,
select,
textarea {
  appearance: none;
  background-color: transparent;
  border-style: none;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline-width: 0;
}

/* Style select like a standard input */
select {
  appearance: none;
}

select::-ms-expand {
  display: none;
  /* Internet Explorer 11+ */
}

select::-ms-value {
  color: currentcolor;
  /* Internet Explorer 11+ */
}

legend {
  /* Correct the color inheritance from `fieldset` elements in IE */
  display: table;
  /* Correct the text wrapping in Edge and IE */
  /* Correct the text wrapping in Edge and IE */
  max-width: 100%;
  /* Correct `color` not being inherited in IE 8/9/10/11 */
  color: inherit;
  /* Correct the text wrapping in Edge and IE */
  white-space: normal;
  border: 0;
  /* Correct the text wrapping in Edge 18- and IE */
}

::-webkit-file-upload-button {
  font: inherit;
  color: inherit;
  /* Correct the inability to style clickable types in iOS and Safari */
  appearance: button;
  /* Change font properties to `inherit` in Chrome and Safari */
}

/* Replace pointer cursor in disabled elements */
[disabled] {
  cursor: default;
}

/* # =================================================================
     # Specify media element style
     # ================================================================= */
img {
  border-style: none;
  /* Remove border when inside `a` element in IE 8/9/10 */
}

/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
  vertical-align: baseline;
}

/* # =================================================================
     # Accessibility
     # ================================================================= */
/* Specify the progress cursor of updating elements */
[aria-busy=true] {
  cursor: progress;
}

/* Specify the pointer cursor of trigger elements */
[aria-controls] {
  cursor: pointer;
}

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled=true] {
  cursor: default;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove default padding */
ul,
ol {
  padding: 0;
  list-style: "";
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s;
}

@property --root-font-size {
  syntax: "<length>";
  inherits: false;
  initial-value: 16px;
}
:root {
  /* ===== inner（コンテンツ幅 / 案件ごとに変動）=====
   * 値の根拠は doc/project-spec.md を参照。
   * _l-inner.scss は var() でこれらを参照する（ハードコード禁止）。 */
  --inner: min(1240px, 100%); /* PC コンテンツ最大幅 */
  --inner-sp: min(500px, 100%); /* SP/タブレット用キャップ */
  --padding-inner: calc(20 * var(--to-rem)); /* 左右パディング（--to-rem スケール） */
  /* ===== z-index（役割別管理）===== */
  --z-index-fv-copy: 10;
  --z-index-fv-tags: 20; /* FVハッシュタグ帯：CTAバーに重ねて上に載せる */
  --z-index-cta-sticky: 800;
  --z-index-header: 900;
  --z-index-drawer: 1000;
  --z-index-drawer-button: 1010;
  /* ===== color（L-MARK 中途採用LP）===== */
  --color-white: #fff;
  --color-black: #000;
  --color-text: #000; /* 本文（デザインは黒） */
  --color-accent: #c4f74d; /* ライムグリーン アクセント */
  --color-line: #06c755; /* LINE ブランドグリーン */
  --color-link: #2c9ded; /* 応募方法などのテキストリンク（水色） */
  --color-bg-base: #fff;
  --color-primary: #000; /* メインカラー */
  /* ===== font-weight ===== */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  /* ===== font-family ===== */
  /* 日本語: 游ゴシック / 英数字アクセント: Inter */
  --base-font-family: "YuGothic", "Yu Gothic", "游ゴシック体", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-en: "Inter", sans-serif;
  /* ===== --to-rem（リキッドレイアウト基準）===== */
  --to-rem: calc(500px / 380);
  /* ===== transition ===== */
  --duration: 0.3s;
  /* ===== layout ===== */
  --header-height: calc(80 * var(--to-rem));
}

@media screen and (width <= 767px) and (width >= 601px) {
  :root {
    --to-rem: 1px;
  }
}
@media screen and (width <= 600px) {
  :root {
    /* 100vw 基準のリキッド。ただし 500px で頭打ち（min）にして、500px 超は中央 500px カード化。
       これにより .l-inner の --inner-sp（min(500px,100%)）と .l-main 幅が一致し、左右のズレ余白が出ない。 */
    --to-rem: calc(min(100vw, 500px) / 380);
  }
}
/* ----- line-height, letter-spacing ----- */
/* ----- hover ----- */
/* ----- animation ----- */
/* ----- supports ----- */
.l-contact {
  margin-top: var(--header-height);
}

.l-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--z-index-header);
}

.l-inner {
  max-width: var(--inner-sp);
  padding-inline: var(--padding-inner);
  margin-inline: auto;
}

/* 中央カラムは不透明なカード。半透明背景のセクション（.p-voice: 黒35%）が
   背面の線画フレーム装飾を透かさないよう、ここで下地の白を敷く */
.l-main {
  display: block;
  width: calc(380 * var(--to-rem));
  margin-inline: auto;
  background-color: var(--color-white);
  box-shadow: 0 4px 12.2px rgba(0, 0, 0, 0.25);
}

/* ========================================
  l-scroll — PC 額縁レイアウトのスクロール枠
    PC（md 以上）では html/body のスクロールを止め（foundation/_base.scss）、
    この全幅ラッパー内だけを縦スクロールさせる。これにより中央 .l-main のみが
    スクロールし、外側の背景・サイド装飾（.p-side / 固定ヘッダー / 追従CTA）は
    画面に固定されたままになる。
    ・全幅スクローラーにすることで、ポインタが左右余白のどこにあってもホイール
      スクロールでき、スクロールバーも画面端に出る。
    ・overflow-x: clip で従来 body に効かせていた横方向のブリード遮断を引き継ぐ。
    SP では素通し（プレーンなブロック）で、body ごと通常スクロールする。
======================================== */
@media screen and (min-width: 768px) {
  .l-scroll {
    block-size: 100dvh;
    overflow: clip auto;
    overscroll-behavior: contain;
  }
}

/* モーダル表示中の背面スクロールを止める。PC は body ではなくここがスクロールコンテナなので、
   body.is-drawer-open（utilities/_u-scroll.scss）だけでは効かない */
.l-scroll.is-locked {
  overflow-y: hidden;
}

.l-top {
  padding-top: var(--header-height);
}

.Product {
  --_gutter: 16px;
  --_content-width: 1100px;
}

.Product__Layout {
  display: grid;
  grid-template-areas: ". layout .";
  grid-template-columns: minmax(var(--_gutter), 1fr) minmax(auto, var(--_content-width)) minmax(var(--_gutter), 1fr);
  padding-block: 40px;
}

.Product__Layout > * {
  grid-area: layout;
}

/* 2カラム構造 */
.Product__Layout {
  grid-template-areas: ". visual info .";
  grid-template-columns: minmax(var(--_gutter), 1fr) minmax(0, 1fr) minmax(320px, 420px) minmax(var(--_gutter), 1fr);
  gap: 40px;
}

/* ===================== */
/* 左：ビジュアル */
/* ===================== */
.Product__Visual {
  position: relative;
  display: grid;
  grid-area: visual;
  grid-template-rows: auto 20px auto;
  grid-template-columns: 1fr;
}

/* メイン */
.Product__MainImage {
  grid-row: 1;
  width: 100%;
}

/* サブ画像 */
.Product__SubImage {
  position: absolute;
  width: 80px;
}

.Product__SubImage--left {
  top: 20%;
  left: -40px;
}

.Product__SubImage--right {
  top: 10%;
  right: -40px;
}

/* バッジ */
.Product__Badge {
  position: absolute;
  padding: 12px;
  font-size: 12px;
  background: #f3d96b;
  border-radius: 50%;
}

.Product__Badge--left {
  bottom: 10%;
  left: -20px;
}

.Product__Badge--right {
  top: 0;
  right: 0;
}

/* ===================== */
/* 右：情報 */
/* ===================== */
.Product__Info {
  display: grid;
  grid-area: info;
  grid-template-rows: auto 20px auto 20px auto 20px auto 30px auto;
}

/* カラー */
.Product__Colors {
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
}

.Product__Colors img {
  width: 40px;
}

/* 価格 */
.Product__Price span {
  font-size: 20px;
  font-weight: bold;
}

/* ボタン */
.Product__Button {
  display: inline-block;
  inline-size: min(240px, 100%);
  padding: 12px 24px;
  color: #fff;
  text-align: center;
  background: #d94b82;
  border-radius: 6px;
}

/* ===================== */
/* レスポンシブ */
/* ===================== */
@container (max-width: 768px) {
  .Product__Layout {
    grid-template-areas: ". visual ." ". info .";
    grid-template-columns: minmax(var(--_gutter), 1fr) minmax(0, 1fr) minmax(var(--_gutter), 1fr);
  }
}
.ProductCard {
  --_gutter: 16px;
  --_content-width: 1120px;
  --_panel-gap: clamp(20px, 3vw, 40px);
  --_soft-bg: #ebe4e2;
  --_accent: #d74f88;
  --_text: #222;
  --_muted: #666;
  --_badge: #ead861;
  color: var(--_text);
  background: var(--_soft-bg);
  container: product-card/inline-size;
}

.ProductCard__Layout {
  --_template-columns: minmax(var(--_gutter), 1fr) minmax(0, 1.15fr) minmax(280px, 420px) minmax(var(--_gutter), 1fr);
  display: grid;
  grid-template: ". visual info ."/var(--_template-columns);
  gap: var(--_panel-gap);
  padding-block: clamp(20px, 4vw, 36px);
}

.ProductCard__Visual {
  display: grid;
  grid-area: visual;
  grid-template: ".         .        code      .         badge-right" auto ".         stack    stack     stack     zoom-right" auto ".         stack    stack     stack     zoom-right" auto "badge-left stack    stack     stack     ." auto ".         .        subcode   .         ." auto/minmax(48px, 72px) minmax(4px, 12px) minmax(180px, 1fr) minmax(4px, 12px) minmax(112px, 180px);
  gap: clamp(4px, 1.2vw, 12px) clamp(4px, 1vw, 12px);
  align-items: start;
}

.ProductCard__Code {
  grid-area: code;
  place-self: start center;
  padding: 2px 8px;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  background: #dfe4ea;
}

.ProductCard__MainStack {
  position: relative;
  grid-area: stack;
  justify-self: start;
  inline-size: min(100%, 400px);
}

.ProductCard__Main {
  position: relative;
  z-index: 0;
  margin: 0;
}

.ProductCard__Main img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.ProductCard__Zoom {
  display: grid;
  row-gap: 6px;
  margin: 0;
}

.ProductCard__Zoom img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.ProductCard__Zoom figcaption {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.45;
}

.ProductCard__Zoom--left {
  position: absolute;
  inset-block-start: clamp(6px, 2vw, 14px);
  inset-inline-start: clamp(-38px, -5vw - 10px, -10px);
  z-index: 2;
  inline-size: min(62%, 300 * var(--to-rem));
  max-inline-size: calc(320 * var(--to-rem));
  margin: 0;
}

.ProductCard__Zoom--right {
  grid-area: zoom-right;
  align-self: start;
}

.ProductCard__Badge {
  display: grid;
  place-items: center;
  inline-size: clamp(54px, 6vw, 68px);
  aspect-ratio: 1;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  background: var(--_badge);
  border-radius: 999px;
}

.ProductCard__Badge--left {
  grid-area: badge-left;
  place-self: end center;
}

.ProductCard__Badge--right {
  grid-area: badge-right;
  place-self: center center;
}

.ProductCard__SubCode {
  grid-area: subcode;
  justify-self: center;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
}

.ProductCard__Info {
  display: grid;
  grid-area: info;
  grid-template: "colors" auto "." 16px "size" auto "." 12px "price" auto "." 20px "button" auto/1fr;
  align-content: end;
}

.ProductCard__ColorList {
  display: grid;
  grid-area: colors;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.ProductCard__Color {
  display: grid;
  row-gap: 6px;
  justify-items: center;
}

.ProductCard__Color img {
  display: block;
  inline-size: 100%;
  max-inline-size: 68px;
  block-size: auto;
}

.ProductCard__Color span {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.ProductCard__Size {
  grid-area: size;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

.ProductCard__Price {
  display: grid;
  grid-area: price;
  row-gap: 8px;
}

.ProductCard__PriceRow {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.ProductCard__PriceRow strong {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1;
}

.ProductCard__PriceRow small {
  font-size: 0.75rem;
  color: var(--_muted);
}

.ProductCard__Button {
  display: grid;
  grid-area: button;
  place-items: center;
  inline-size: min(100%, 240px);
  min-block-size: 52px;
  padding-inline: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(180deg, #df6da0 0%, var(--_accent) 100%);
  border-radius: 6px;
}

@container product-card (max-width: 860px) {
  .ProductCard__Layout {
    --_template-columns: minmax(var(--_gutter), 1fr) minmax(0, 1fr) minmax(var(--_gutter), 1fr);
    grid-template: ". visual ." ". info   ."/var(--_template-columns);
  }
  .ProductCard__Info {
    align-content: start;
  }
}
@container product-card (max-width: 640px) {
  .ProductCard__Visual {
    grid-template: "code" auto "." 10px "badge-right" auto "." 10px "stack" auto "." 12px "zoom-right" auto "." 12px "badge-left" auto "." 8px "subcode" auto/1fr;
    justify-items: center;
  }
  .ProductCard__MainStack {
    inline-size: min(100%, 400px);
  }
  .ProductCard__Zoom--right {
    inline-size: min(100%, 500px);
  }
  .ProductCard__Info {
    grid-template: "colors" auto "." 14px "size" auto "." 12px "price" auto "." 18px "button" auto/1fr;
  }
  .ProductCard__Button {
    inline-size: 100%;
  }
}
/* ========================================
  c-cta — LINE 相談 CTA
    c-cta--fill : ライム地 / 黒文字（ドロワー・フッター）
    c-cta--bar  : 黒地フルバー / 白文字 / ライム矢印（FV 下部）
======================================== */
.c-cta {
  --_bg: var(--color-accent);
  --_text: var(--color-black);
  --_arrow: var(--color-black);
  --_icon-filter: none;
  --_icon-w: calc(28 * var(--to-rem));
  --_icon-h: calc(27 * var(--to-rem));
  display: inline-flex;
  gap: calc(22 * var(--to-rem));
  align-items: center;
  justify-content: center;
  min-height: calc(47 * var(--to-rem));
  font-size: calc(16 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--_text);
  text-decoration: none;
  letter-spacing: 0.02em;
  background-color: var(--_bg);
  border: 1px solid var(--color-black);
  transition: opacity var(--duration);
}
.c-cta:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.c-cta--bar {
  width: 100%;
}

/* 追従CTA: FVと同じ黒タグ帯を緑CTAへ半分重ね、画面下に固定。
 * 既定は全体を下へ退避し、.is-visibleでタグとCTAを一緒にスライドインする。
 * visibilityも切替えて非表示時はフォーカス・読み上げ対象から外す */
.c-sticky-cta {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--z-index-cta-sticky);
  display: grid;
  grid-template-rows: calc(11.5 * var(--to-rem)) auto;
  /* .l-main と同じ幅（calc(380 * var(--to-rem))）に収め、inset-inline:0 + margin-inline:auto でビューポート中央に配置。
     内側の.c-cta--barはこのコンテナ幅に追従する */
  width: calc(380 * var(--to-rem));
  margin-inline: auto;
  visibility: hidden;
  box-shadow: 0 calc(-2 * var(--to-rem)) calc(8 * var(--to-rem)) rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: transform var(--duration), opacity var(--duration), visibility var(--duration);
  transform: translateY(100%);
  /* PC は右サイドの丸型 LINE CTA が常時見えているため追従バーは出さない */
}
.c-sticky-cta.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
@media screen and (min-width: 1200px) {
  .c-sticky-cta {
    display: none;
  }
}

.c-sticky-cta__tags {
  z-index: var(--z-index-fv-tags);
  display: flex;
  grid-row: 1/3;
  grid-column: 1;
  gap: calc(3 * var(--to-rem));
  align-items: center;
  align-self: start;
  justify-content: flex-start;
  width: fit-content;
  max-width: 100%;
  min-height: calc(23 * var(--to-rem));
  padding-inline: calc(4 * var(--to-rem)) calc(5 * var(--to-rem));
  background-color: var(--color-black);
}

.c-sticky-cta__tag {
  font-size: calc(10 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.6;
  color: var(--color-white);
  white-space: nowrap;
}

.c-sticky-cta__button {
  grid-row: 2/3;
  grid-column: 1;
  min-height: calc(53 * var(--to-rem));
  padding-block-start: calc(9 * var(--to-rem));
}

.c-cta__icon {
  flex-shrink: 0;
  width: var(--_icon-w);
  height: var(--_icon-h);
  object-fit: contain;
  filter: var(--_icon-filter);
}

/* 矢印(›››) は Figma 書き出し SVG をマスクに使用し、色は --_arrow で可変 */
.c-cta__arrow {
  position: var(--_arrow-position, static);
  right: var(--_arrow-right, auto);
  bottom: var(--_arrow-bottom, auto);
  width: var(--_arrow-width, calc(33 * var(--to-rem)));
  height: var(--_arrow-height, calc(14 * var(--to-rem)));
  background-color: var(--_arrow);
  mask: var(--_arrow-mask, url("../images/cta_arrow_01.ChBGODHS.svg")) center/contain no-repeat;
}

@media (any-hover: hover) {
  .c-cta:hover {
    opacity: 0.8;
  }
}
/* ========================================
  c-entry — ヘッダー ENTRY ボタン（ライム地 + 黒オフセットアウトライン）
======================================== */
.c-entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(63 * var(--to-rem));
  min-height: calc(31 * var(--to-rem));
  font-family: Roboto, sans-serif;
  font-size: calc(14 * var(--to-rem));
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  color: var(--color-black);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background-color: var(--color-accent);
  border: 1px solid var(--color-black);
  box-shadow: calc(3 * var(--to-rem)) calc(3 * var(--to-rem)) 0 var(--color-black);
  transition: background-color var(--duration), color var(--duration);
}
.c-entry:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 3px;
}

@media (any-hover: hover) {
  .c-entry:hover {
    color: var(--color-black);
    background-color: var(--color-white);
  }
}
/* ========================================
  c-hamburger — 白い角丸スクエアの三本線ボタン
======================================== */
.c-hamburger {
  display: inline-flex;
  flex-direction: column;
  gap: calc(2 * var(--to-rem));
  justify-content: center;
  width: calc(38 * var(--to-rem));
  height: calc(29 * var(--to-rem));
  padding-inline: calc(9 * var(--to-rem));
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
}
.c-hamburger:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 3px;
}

.c-hamburger__bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-black);
}

/* ========================================
  p-about — L-MARKについて / 全国展開
======================================== */
.p-about {
  position: relative;
  padding-block: 0 calc(98 * var(--to-rem));
  /* ブリード要素（地図カード w446）のレイアウトはみ出しをセクションで遮断。
     clip-path は描画を切るだけでスクロール領域には残るため overflow の併用が必須 */
  overflow-x: clip;
  background-color: var(--color-white);
}

/* 注: writing-mode: vertical-rl の要素自身は論理 inset が縦軸で解決されるため物理プロパティで配置する */
.p-about__label {
  position: absolute;
  top: calc(1 * var(--to-rem));
  left: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(31 * var(--to-rem));
  height: calc(261 * var(--to-rem));
  font-family: var(--font-en);
  font-size: calc(36 * var(--to-rem));
  font-style: italic;
  font-weight: 100;
  line-height: 0.85;
  color: var(--color-white);
  white-space: nowrap;
  background-color: var(--color-black);
  writing-mode: vertical-rl;
}

.p-about__title {
  width: calc(239 * var(--to-rem));
  margin-block-start: 0;
  margin-inline-start: calc(23 * var(--to-rem));
  font-size: calc(24 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.29;
  color: var(--color-black);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.p-about__title-badge {
  display: inline-block;
  color: var(--color-accent);
  background-color: var(--color-black);
}

.p-about__map-card {
  position: relative;
  /* カンプノードは x=43 w=446（アートボード380外へ109pxブリードし、枠線が右へ走り抜けて
     切れて見えるデザイン）。ただしクリップの効かない帯（--to-rem:1px のタブレット帯・
     中央カラムPC）では素通しで突き出るため、ノード幅のまま超過分109pxを clip-path で
     自己クリップ → 全帯域で「線が右に切れて見える」カンプの見た目を再現しつつ
     可視右端はグリッド右端(20+23+337=380)に収まる（クライアント指摘 2026-07-04 ×3 で確定） */
  width: calc(446 * var(--to-rem));
  height: calc(399 * var(--to-rem));
  padding-block-start: calc(28 * var(--to-rem));
  padding-inline: calc(30 * var(--to-rem));
  margin-block-start: calc(65 * var(--to-rem));
  margin-inline-start: calc(23 * var(--to-rem));
  clip-path: inset(0 calc(109 * var(--to-rem)) 0 0);
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: calc(76 * var(--to-rem));
}

.p-about__area-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(11 * var(--to-rem));
  justify-content: flex-start;
  max-width: calc(320 * var(--to-rem));
  padding: 0;
  margin: 0;
  list-style: none;
}

.p-about__area-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(61 * var(--to-rem));
  height: calc(30 * var(--to-rem));
  font-size: calc(12 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.24;
  color: var(--color-white);
  background-color: var(--color-black);
}

.p-about__map {
  position: absolute;
  top: calc(110 * var(--to-rem));
  left: calc(37 * var(--to-rem));
  z-index: 0;
  width: calc(282 * var(--to-rem));
  height: calc(267 * var(--to-rem));
}

.p-about__map-image {
  display: block;
  width: 100%;
  height: 100%;
}

.p-about__map-caption {
  position: absolute;
  top: calc(65 * var(--to-rem));
  left: calc(-4 * var(--to-rem));
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: calc(163 * var(--to-rem));
  height: calc(104 * var(--to-rem));
  padding-block-start: calc(8 * var(--to-rem));
  margin: 0;
  text-align: center;
  background: url("../images/about_callout_01.mbqhYT6s.svg") 0 0/contain no-repeat;
}

.p-about__map-caption-sub {
  display: block;
  font-size: calc(16 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-black);
}

.p-about__map-caption-main {
  display: block;
  padding-block: calc(5 * var(--to-rem));
  margin-block-start: calc(5 * var(--to-rem));
  margin-inline: calc(8 * var(--to-rem));
  font-size: calc(20 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-white);
  background-color: var(--color-black);
}

/* 説明文 + 棒グラフを内包する角丸カード（左へ 129px はみ出す） */
.p-about__growth {
  position: relative;
  width: calc(457 * var(--to-rem));
  height: calc(432 * var(--to-rem));
  padding-block-start: calc(32 * var(--to-rem));
  padding-inline: calc(139 * var(--to-rem)) calc(33 * var(--to-rem));
  margin-block-start: calc(24 * var(--to-rem));
  margin-inline-start: calc(-149 * var(--to-rem));
  border: 1px solid var(--color-black);
  border-radius: calc(76 * var(--to-rem));
}

.p-about__text {
  font-size: calc(13 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.52;
  color: var(--color-black);
}

.p-about__text-highlight {
  padding-block: calc(1 * var(--to-rem));
  padding-inline: calc(2 * var(--to-rem));
  background-color: var(--color-accent);
  box-decoration-break: clone;
}

.p-about__text-sub {
  margin-block-start: calc(20 * var(--to-rem));
}

.p-about__text-strong {
  font-weight: var(--fw-bold);
}

/* グラフ要素は growth カード基準の絶対配置（カンプ実測座標） */
.p-about__graph-arrow {
  position: absolute;
  top: calc(275 * var(--to-rem));
  left: calc(154 * var(--to-rem));
  width: calc(102 * var(--to-rem));
  height: calc(47 * var(--to-rem));
  background: url("../images/about_arrow_01.C1SxV7l2.svg") center/contain no-repeat;
  /* 矢頭（カンプでは 44.89deg 回転した三角形ポリゴン） */
}
.p-about__graph-arrow::after {
  position: absolute;
  top: calc(-11 * var(--to-rem));
  left: calc(69 * var(--to-rem));
  width: calc(65 * var(--to-rem));
  height: calc(40 * var(--to-rem));
  content: "";
  background: url("../images/about_polygon_01.PdW5JGJZ.svg") center/contain no-repeat;
  transform: rotate(44.89deg);
}

.p-about__graph-lead {
  position: absolute;
  top: calc(245 * var(--to-rem));
  left: calc(358 * var(--to-rem));
  margin: 0;
  font-size: calc(24 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.43;
  color: #eb1212;
  white-space: nowrap;
  transform: translateX(-50%);
}

.p-about__graph-total {
  position: absolute;
  bottom: 0;
  left: calc(139 * var(--to-rem));
  height: calc(80 * var(--to-rem));
  margin: 0;
  font-size: calc(14 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.09;
  color: var(--color-black);
  writing-mode: vertical-rl;
}

.p-about__graph-bar {
  position: absolute;
  bottom: 0;
  display: block;
  width: calc(57 * var(--to-rem));
  background-color: #d9d9d9;
  border: 1px solid var(--color-black);
  border-block-end: none;
}

.p-about__graph-bar--01 {
  left: calc(163 * var(--to-rem));
  height: calc(17 * var(--to-rem));
}

.p-about__graph-bar--02 {
  left: calc(232 * var(--to-rem));
  height: calc(69 * var(--to-rem));
}

.p-about__graph-bar--03 {
  left: calc(301 * var(--to-rem));
  height: calc(147 * var(--to-rem));
  background-color: var(--color-accent);
}

.p-about__graph-bar-label {
  position: absolute;
  margin: 0;
  font-size: calc(12 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.16;
  color: var(--color-black);
  text-align: center;
  transform: translateX(-50%);
}

.p-about__graph-bar-label--01 {
  top: calc(381 * var(--to-rem));
  left: calc(192 * var(--to-rem));
}

.p-about__graph-bar-label--02 {
  top: calc(370 * var(--to-rem));
  left: calc(261 * var(--to-rem));
}

.p-about__graph-bar-label--03 {
  top: calc(290 * var(--to-rem));
  left: calc(330 * var(--to-rem));
}

.p-about__graph-bar-label-num {
  font-size: calc(20.2 * var(--to-rem)); /* PC=calc(20.2 × --to-rem)=26.58px。「30」の数字 */
}

.p-about__graph-bar-label-num--02 {
  font-size: calc(14 * var(--to-rem));
}

.p-about__graph-badge {
  position: absolute;
  top: calc(336 * var(--to-rem));
  left: calc(353 * var(--to-rem));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(142 * var(--to-rem));
  height: calc(142 * var(--to-rem));
  background-color: var(--color-black);
  border-radius: 50%;
}

.p-about__graph-badge-lead {
  margin: 0;
  font-size: calc(16 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.24;
  color: var(--color-white);
  text-align: center;
}

.p-about__graph-badge-num {
  margin: 0;
  font-size: calc(48 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.1;
  color: var(--color-accent);
}

.p-about__graph-badge-unit {
  font-size: calc(24 * var(--to-rem));
}

/* ========================================
  p-career — キャリアパス（全国展開/将来設計）
======================================== */
.p-career {
  position: relative;
  z-index: 0;
  padding-block: 0 calc(81 * var(--to-rem));
  /* ブリード要素（写真 w403）のレイアウトはみ出しをセクションで遮断 */
  overflow-x: clip;
  background-color: var(--color-white);
}

.p-career__label {
  position: absolute;
  top: calc(3 * var(--to-rem));
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(31 * var(--to-rem));
  height: calc(267 * var(--to-rem));
  overflow: hidden;
  background-color: var(--color-black);
}

.p-career__label-text {
  display: block;
  font-family: var(--font-en);
  font-size: calc(36 * var(--to-rem));
  font-style: italic;
  font-weight: 100;
  line-height: 0.85;
  color: var(--color-white);
  white-space: nowrap;
  transform: rotate(90deg);
}

.p-career__title {
  width: calc(242 * var(--to-rem));
  margin-inline-start: calc(25 * var(--to-rem));
  font-size: calc(24 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.29;
  color: var(--color-black);
  letter-spacing: 0.07em;
}

.p-career__lead {
  width: calc(229 * var(--to-rem));
  margin-block-start: calc(13 * var(--to-rem));
  margin-inline-start: calc(21 * var(--to-rem));
  font-size: calc(14 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-black);
}

.p-career__photo {
  position: relative;
  z-index: 0;
  /* カンプノードは x=0 w=403 のブリード（右23pxがアートボード外）。クリップの効かない帯でも
     カンプと同じ切り取りになるよう、ノード幅のまま超過分を clip-path で自己クリップ */
  width: calc(403 * var(--to-rem));
  margin-block-start: calc(9 * var(--to-rem));
  clip-path: inset(0 calc(23 * var(--to-rem)) 0 0);
}

.p-career__photo-img {
  display: block;
  width: 100%;
  height: calc(268 * var(--to-rem));
  object-fit: cover;
}

.p-career__photo-text {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: calc(23 * var(--to-rem));
  z-index: 1;
  box-sizing: border-box;
  width: calc(221 * var(--to-rem));
  padding-block: calc(7 * var(--to-rem));
  padding-inline: calc(13 * var(--to-rem)) calc(7 * var(--to-rem));
  font-size: calc(12 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-black);
  background-color: rgba(255, 255, 255, 0.85);
}

/* ---------- 実例カード（クロスマーク風フレーム） ---------- */
.p-career__case {
  position: relative;
  z-index: 0;
  height: calc(500 * var(--to-rem));
  padding-block-start: calc(41 * var(--to-rem));
  padding-inline: calc(26 * var(--to-rem));
  margin-block-start: calc(29 * var(--to-rem));
  background: linear-gradient(var(--color-black), var(--color-black)) calc(12.75 * var(--to-rem)) 0/1px 100% no-repeat, linear-gradient(var(--color-black), var(--color-black)) calc(322.75 * var(--to-rem)) 0/1px 100% no-repeat;
  /* 上下の横罫線（左右に飛び出すクロスマーク風） */
}
.p-career__case::before {
  position: absolute;
  top: calc(29 * var(--to-rem));
  left: calc(-19 * var(--to-rem));
  width: calc(378.5 * var(--to-rem));
  height: 1px;
  content: "";
  background-color: var(--color-black);
}
.p-career__case::after {
  position: absolute;
  top: calc(469 * var(--to-rem));
  left: calc(-19 * var(--to-rem));
  width: calc(379.5 * var(--to-rem));
  height: 1px;
  content: "";
  background-color: var(--color-black);
}

.p-career__case-title {
  width: calc(285 * var(--to-rem));
  margin: 0;
  font-size: calc(14 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.24;
  color: var(--color-black);
}

.p-career__case-title-mark {
  background-image: linear-gradient(transparent 12%, var(--color-accent) 12% 92%, transparent 92%);
  box-decoration-break: clone;
}

.p-career__case-photo {
  width: calc(311 * var(--to-rem));
  height: calc(167 * var(--to-rem));
  margin-block-start: calc(18 * var(--to-rem));
  margin-inline-start: calc(-14 * var(--to-rem));
  overflow: hidden;
  background-color: #d9d9d9;
  border: 1px solid var(--color-black);
}

.p-career__case-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-career__case-steps {
  padding: 0;
  margin: 0;
  margin-block-start: calc(24 * var(--to-rem));
  list-style: none;
}

.p-career__case-step {
  position: relative;
  font-size: calc(13 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.24;
  color: var(--color-black);
  text-align: center;
}

.p-career__case-step + .p-career__case-step {
  margin-block-start: calc(19 * var(--to-rem));
}

/* ステップ間の下向き矢印。
 * 旧実装は「.p-career__case-steps::after でカード基準 top:287px に固定した1枚SVG」だったが、
 * Safari は上の見出し/写真の描画差で本文位置がズレる一方この矢印は固定位置に残るため、矢印が文字に被った。
 * → 各ステップ／現在ボックスの「自分の直上ギャップ」に絶対配置し、流し込みに追従させる（＝ブラウザ差でズレない）。
 * 形はカンプSVG（#D9D9D9 の下向き三角 8.66×7.5）を CSS 三角で同形再現。 */
.p-career__case-step + .p-career__case-step::before,
.p-career__case-step:last-child::after {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  content: "";
  border-block-start: calc(7.5 * var(--to-rem)) solid #d9d9d9;
  border-inline: calc(4.33 * var(--to-rem)) solid transparent;
  transform: translateX(-50%);
}

.p-career__case-step + .p-career__case-step::before {
  top: calc(-13.25 * var(--to-rem)); /* ステップ間 margin 19px のギャップ中央（矢印高7.5の中心を-9.5へ） */
}

.p-career__case-step:last-child::after {
  top: calc(100% + calc(7.25 * var(--to-rem))); /* 現在ボックス前 margin 22px のギャップ中央（最終ステップの下） */
}

.p-career__case-current {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(257 * var(--to-rem));
  height: calc(35 * var(--to-rem));
  margin-block-start: calc(22 * var(--to-rem));
  margin-inline-start: calc(13 * var(--to-rem));
  font-size: calc(16 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.24;
  color: var(--color-accent);
  text-align: center;
  background-color: var(--color-black);
}

/* ---------- キャリアトラック（マネジメント路線 / プレイヤー路線） ---------- */
.p-career__track {
  margin-block-start: calc(45 * var(--to-rem));
}

.p-career__track-name {
  margin-inline-start: calc(9 * var(--to-rem));
  font-size: calc(13 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-black);
}

.p-career__timeline {
  position: relative;
  z-index: 0;
  height: calc(372 * var(--to-rem));
  padding: 0;
  margin: 0;
  margin-block-start: calc(13 * var(--to-rem));
  list-style: none;
  /* 軸（黄緑バー + ドット + 点線 + ✗はアセットに含まれる） */
}
.p-career__timeline::before {
  position: absolute;
  top: 0;
  left: calc(68 * var(--to-rem));
  z-index: -1;
  width: calc(27 * var(--to-rem));
  height: calc(372 * var(--to-rem));
  content: "";
  background: url("../images/career_axis_01.D53eNbLE.svg") center/contain no-repeat;
}

.p-career__timeline--player {
  height: calc(209 * var(--to-rem));
}
.p-career__timeline--player::before {
  height: calc(209 * var(--to-rem));
  background-image: url("../images/career_axis_02.ChniE_M3.svg");
}

.p-career__timeline-item {
  position: absolute;
  right: 0;
  left: 0;
  /* 軸のドットからラベルへの接続線 */
}
.p-career__timeline-item::before {
  position: absolute;
  height: calc(2 * var(--to-rem));
  content: "";
  background-color: var(--color-black);
  transform-origin: left center;
}

.p-career__timeline-item--m1 {
  top: calc(6 * var(--to-rem));
}
.p-career__timeline-item--m1::before {
  top: calc(13.5 * var(--to-rem));
  left: calc(82.5 * var(--to-rem));
  width: calc(60 * var(--to-rem));
}

.p-career__timeline-item--m2 {
  top: calc(90 * var(--to-rem));
}
.p-career__timeline-item--m2::before {
  top: calc(97 * var(--to-rem));
  left: calc(82 * var(--to-rem));
  width: calc(103 * var(--to-rem));
  transform: rotate(-54.07deg);
}

.p-career__timeline-item--m3 {
  top: calc(173 * var(--to-rem));
}
.p-career__timeline-item--m3::before {
  top: calc(70 * var(--to-rem));
  left: calc(82 * var(--to-rem));
  width: calc(83 * var(--to-rem));
  transform: rotate(-43.04deg);
}

.p-career__timeline-item--m4 {
  top: calc(257 * var(--to-rem));
}
.p-career__timeline-item--m4::before {
  top: calc(42 * var(--to-rem));
  left: calc(82.5 * var(--to-rem));
  width: calc(64 * var(--to-rem));
  transform: rotate(-19.98deg);
}

.p-career__timeline-item--m5 {
  top: calc(341 * var(--to-rem));
}
.p-career__timeline-item--m5::before {
  top: calc(13.5 * var(--to-rem));
  left: calc(82.5 * var(--to-rem));
  width: calc(60 * var(--to-rem));
}

.p-career__timeline-item--p2 {
  top: calc(90 * var(--to-rem));
}
.p-career__timeline-item--p2::before {
  top: calc(40.5 * var(--to-rem));
  left: calc(82 * var(--to-rem));
  width: calc(66 * var(--to-rem));
  transform: rotate(-24.05deg);
}

.p-career__timeline-item--p3 {
  top: calc(173 * var(--to-rem));
}
.p-career__timeline-item--p3::before {
  top: calc(13.5 * var(--to-rem));
  left: calc(82.5 * var(--to-rem));
  width: calc(60 * var(--to-rem));
}

.p-career__timeline-year {
  position: absolute;
  left: calc(22 * var(--to-rem));
  font-size: calc(15 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-black);
  white-space: nowrap;
}

.p-career__timeline-year--m1 {
  top: calc(4 * var(--to-rem));
}

.p-career__timeline-year--m2 {
  top: calc(89 * var(--to-rem));
}

.p-career__timeline-year--m3 {
  top: calc(62 * var(--to-rem));
}

.p-career__timeline-year--m4 {
  top: calc(34 * var(--to-rem));
}

.p-career__timeline-year--m5 {
  top: calc(6 * var(--to-rem));
}

.p-career__timeline-year--p2 {
  top: calc(32 * var(--to-rem));
}

.p-career__timeline-year--p3 {
  top: calc(6 * var(--to-rem));
  left: calc(2 * var(--to-rem));
}

.p-career__timeline-label {
  display: inline-grid;
  place-items: center;
  width: calc(174 * var(--to-rem));
  min-height: calc(26 * var(--to-rem));
  padding-block: calc(4 * var(--to-rem));
  margin-inline-start: calc(139 * var(--to-rem));
  font-size: calc(13 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-accent);
  text-align: center;
  background-color: var(--color-black);
}

.p-career__timeline-label--tall {
  min-height: calc(43 * var(--to-rem));
}

.p-career__timeline-label--wide {
  width: calc(186 * var(--to-rem));
}

/* SV ステップのラベル内テキスト。親が inline-grid + place-items:center のため
 * white-space/text-align がアンカー要素に効かない。インラインブロックで囲むことで
 * 「SV（スーパーバイザー）」を1行維持（nowrap）しつつ 2行を左揃え（start）に。
 * ブロック自体は place-items:center で中央=左27pxインセットに保たれる
 * （カンプ node 1:539 箱174 / 1:540 テキストx+27・2行左揃え 実測） */
.p-career__timeline-label-inner {
  display: inline-block;
  text-align: start;
  white-space: nowrap;
}

.p-career__timeline-label-small {
  font-size: calc(10 * var(--to-rem));
}

.p-career__note {
  width: calc(332 * var(--to-rem));
  padding-block: calc(12 * var(--to-rem));
  padding-inline: calc(24 * var(--to-rem));
  margin-block-start: calc(32 * var(--to-rem));
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  box-shadow: calc(9 * var(--to-rem)) calc(10 * var(--to-rem)) 0 var(--color-black);
}

.p-career__note-text {
  font-size: calc(13 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-black);
}

/* ---------- フリーランス契約（プロ契約）について ---------- */
.p-career__freelance {
  position: relative;
  width: calc(332 * var(--to-rem));
  height: calc(250 * var(--to-rem));
  padding-block-start: calc(32 * var(--to-rem));
  padding-inline: calc(21 * var(--to-rem)) calc(24 * var(--to-rem));
  margin-block-start: calc(27 * var(--to-rem));
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  box-shadow: calc(9 * var(--to-rem)) calc(7 * var(--to-rem)) 0 var(--color-black);
}

.p-career__freelance-title {
  margin: 0;
  font-size: calc(16 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-black);
  text-align: center;
}

.p-career__freelance-text {
  width: calc(292 * var(--to-rem));
  margin-block-start: calc(10 * var(--to-rem));
  margin-inline-start: calc(3 * var(--to-rem));
  font-size: calc(13 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-black);
}

/* 本文が下端でハイライトに被っていたため callout(highlight+strong)を下げて上に余白を確保（内部間隔27pxは維持） */
.p-career__freelance-highlight {
  position: absolute;
  top: calc(184 * var(--to-rem));
  left: calc(21 * var(--to-rem));
  margin: 0;
  font-size: calc(16 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-black);
}

.p-career__freelance-highlight-text {
  padding-inline: calc(2 * var(--to-rem));
  background-image: linear-gradient(transparent 26%, var(--color-accent) 26%);
  box-decoration-break: clone;
}

.p-career__freelance-strong {
  position: absolute;
  top: calc(211 * var(--to-rem));
  left: calc(61 * var(--to-rem));
  margin: 0;
  font-size: calc(16 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-black);
}

/* ========================================
  p-compare — 他社との比較
======================================== */
.p-compare {
  position: relative;
  z-index: 0;
  padding-block: calc(10 * var(--to-rem)) calc(49 * var(--to-rem));
  background-color: var(--color-white);
}

/* 注: writing-mode: vertical-rl の要素自身は論理 inset が縦軸で解決されるため物理プロパティで配置する */
.p-compare__label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(31 * var(--to-rem));
  height: calc(267 * var(--to-rem));
  font-family: var(--font-en);
  font-size: calc(36 * var(--to-rem));
  font-style: italic;
  font-weight: 100;
  line-height: 0.85;
  color: var(--color-white);
  text-transform: uppercase;
  white-space: nowrap;
  background-color: var(--color-black);
  writing-mode: vertical-rl;
}

.p-compare__inner {
  padding-inline-start: calc(39 * var(--to-rem));
}

.p-compare__title {
  font-size: calc(24 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.29;
  text-align: center;
  transform: translateX(calc(4.5 * var(--to-rem)));
}

.p-compare__title-mark {
  background-image: linear-gradient(transparent 45%, var(--color-accent) 45% 90%, transparent 90%);
  box-decoration-break: clone;
}

.p-compare__table {
  width: calc(331 * var(--to-rem));
  margin-block-start: calc(27 * var(--to-rem));
  letter-spacing: 0.07em;
  table-layout: fixed;
  border-collapse: collapse;
}

.p-compare__col--label {
  width: calc(46 * var(--to-rem));
}

.p-compare__col--lmark {
  width: calc(162 * var(--to-rem));
}

.p-compare__col--other {
  width: calc(123 * var(--to-rem));
}

.p-compare__row-label {
  height: calc(54 * var(--to-rem));
  padding-block: 0;
  padding-inline-start: calc(10 * var(--to-rem));
  font-size: calc(12 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.29;
  color: var(--color-black);
  text-align: left;
  vertical-align: middle;
}

.p-compare__row-label--divider {
  border-block-start: 1px solid var(--color-black);
}

.p-compare__head {
  height: calc(44 * var(--to-rem));
  padding: 0;
  font-weight: var(--fw-bold);
  line-height: 1.29;
  text-align: center;
  vertical-align: middle;
}

.p-compare__head--lmark {
  font-family: var(--font-en);
  font-size: calc(16 * var(--to-rem));
  font-weight: 800;
  color: var(--color-white);
  text-transform: uppercase;
  background-color: var(--color-black);
}

.p-compare__head--other {
  font-size: calc(10 * var(--to-rem));
  color: var(--color-black);
  background-color: var(--color-white);
  border-block-start: 1px solid var(--color-black);
  border-inline: 1px solid var(--color-black);
}

.p-compare__cell {
  height: calc(54 * var(--to-rem));
  padding: 0;
  /* セル自身に基準フォントサイズを持たせる。未指定だと継承 16px のストラットが
   * line-height:1.29 で 20.64px の行ボックスを作り、実テキスト(10/13px)より
   * 二行目の上余白が広くなる（カンプは実テキスト基準の詰まった行送り） */
  font-size: calc(10 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.29;
  text-align: center;
  vertical-align: middle;
}

.p-compare__cell--lmark {
  color: var(--color-white);
  background-color: var(--color-black);
  border-block-start: 1px solid var(--color-white);
}

.p-compare__cell--other {
  color: var(--color-black);
  background-color: var(--color-white);
  border-block-start: 1px solid var(--color-black);
  border-inline: 1px solid var(--color-black);
}

.p-compare__cell--end {
  border-block-end: 1px solid var(--color-black);
}

.p-compare__cell-text {
  font-size: calc(10 * var(--to-rem));
}

.p-compare__cell-text--lg {
  font-size: calc(13 * var(--to-rem));
}

/* ========================================
  p-faq — よくある質問（FAQ アコーディオン）
    <details>/<summary> によるノーJSアコーディオン。
    Q/A ラベルと開閉(+/−)インジケータは CSS 疑似要素で生成する。
======================================== */
.p-faq {
  position: relative;
  padding-block: calc(26 * var(--to-rem)) calc(54 * var(--to-rem));
  background-color: var(--color-white);
}

/* 注: writing-mode: vertical-rl の要素自身は論理 inset が縦軸で解決されるため物理プロパティで配置する */
.p-faq__label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(31 * var(--to-rem));
  height: calc(93 * var(--to-rem));
  font-family: var(--font-en);
  font-size: calc(36 * var(--to-rem));
  font-style: italic;
  font-weight: 100;
  line-height: 0.85;
  color: var(--color-white);
  white-space: nowrap;
  background-color: var(--color-black);
  writing-mode: vertical-rl;
}

.p-faq__title {
  position: relative;
  z-index: 0;
  font-size: calc(24 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.29;
  color: var(--color-black);
  text-align: center;
}
.p-faq__title::before {
  position: absolute;
  inset-block-start: calc(14 * var(--to-rem));
  inset-inline-start: 50%;
  z-index: -1;
  width: calc(153 * var(--to-rem));
  height: calc(14 * var(--to-rem));
  content: "";
  background-color: var(--color-accent);
  transform: translateX(-50%);
}

.p-faq__list {
  display: flex;
  flex-direction: column;
  gap: calc(19 * var(--to-rem));
  margin-block-start: calc(41 * var(--to-rem));
  margin-inline: calc(-10 * var(--to-rem));
}

.p-faq__item {
  --_toggle-content: "＋"; /* ＋ */
  position: relative;
  z-index: 0;
  border: 1px solid var(--color-black);
}

.p-faq__item[open] {
  --_toggle-content: "−"; /* − */
}

/* 開閉アニメーションは _faq.js（WAAPIで <details> の height を補間）で全ブラウザ共通に処理する。
 * ネイティブ ::details-content / interpolate-size は Chromium 専用（Safari 未対応）のため使わない。 */
.p-faq__question {
  display: flex;
  gap: calc(11 * var(--to-rem));
  align-items: center;
  height: calc(69 * var(--to-rem));
  padding-inline: calc(12 * var(--to-rem)) calc(15 * var(--to-rem));
  color: var(--color-white);
  list-style: none;
  cursor: pointer;
  background-color: var(--color-black);
}
.p-faq__question::before {
  flex-shrink: 0;
  font-family: var(--font-en);
  font-size: calc(20 * var(--to-rem));
  font-style: italic;
  font-weight: 800;
  line-height: 0.85;
  color: var(--color-accent);
  content: "Q";
}
.p-faq__question::-webkit-details-marker {
  display: none;
}
.p-faq__question:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.p-faq__question-text {
  width: calc(294 * var(--to-rem));
  font-size: calc(15 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.35;
}

.p-faq__toggle {
  flex-shrink: 0;
  width: calc(15 * var(--to-rem));
  margin-inline-start: auto;
  text-align: center;
}
.p-faq__toggle::before {
  font-family: var(--base-font-family);
  font-size: calc(15 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.35;
  color: var(--color-accent);
  content: var(--_toggle-content);
}

.p-faq__answer {
  display: flex;
  gap: calc(11 * var(--to-rem));
  align-items: flex-start;
  min-height: calc(99 * var(--to-rem));
  padding-block: calc(18 * var(--to-rem));
  padding-inline: calc(12 * var(--to-rem)) calc(15 * var(--to-rem));
  margin: 0;
  font-size: calc(16 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: var(--color-black);
  background-color: var(--color-white);
}
.p-faq__answer::before {
  flex-shrink: 0;
  margin-block-start: calc(22 * var(--to-rem));
  font-family: var(--font-en);
  font-size: calc(20 * var(--to-rem));
  font-style: italic;
  font-weight: 800;
  line-height: 0.85;
  color: var(--color-black);
  content: "A";
}

/* ========================================
  p-fv — ファーストビュー（グリッチ背景に重ねるヒーロー）
======================================== */
.p-fv {
  position: relative;
  height: calc(698 * var(--to-rem));
  overflow: hidden;
  background-color: var(--color-black);
}
@media screen and (min-width: 768px) {
  .p-fv {
    height: calc(698 * var(--to-rem));
  }
}

.p-fv__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.p-fv__bg-image {
  position: absolute;
  top: 0;
  left: calc(-376 * var(--to-rem));
  width: calc(1282 * var(--to-rem));
  max-width: none;
  /* 画像高さは FV(rem(698)) を満たすよう rem(721) を維持。
     0714カンプの画像枠(681)はCTAバーに隠れる底部での差のみで可視framingは不変。
     681にすると CTA非表示の xl(≥1440) で FV底に黒帯が露出するため満たす値にする。 */
  height: calc(721 * var(--to-rem));
  object-fit: cover;
}

/* 左端の縦組み L-MARK（白 + 半透明黒のずらしコピーでグリッチ表現）
 * 注: writing-mode: vertical-rl の要素自身は論理 inset が縦軸で解決されるため物理プロパティで配置する */
.p-fv__logo {
  position: absolute;
  top: calc(-5 * var(--to-rem));
  left: calc(11 * var(--to-rem));
  z-index: var(--z-index-fv-copy);
  font-family: var(--font-en);
  font-size: calc(80 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: calc(36 * var(--to-rem));
  color: var(--color-white);
  text-transform: uppercase;
  /* 影(::before)は top:rem(5) で縦方向の余白を失い "L-MARK" が2列に折り返す。
   * white-space は継承プロパティなので親に nowrap を置き ::before も1列に固定する */
  white-space: nowrap;
  writing-mode: vertical-rl;
}
.p-fv__logo::before {
  position: absolute;
  top: calc(5 * var(--to-rem));
  left: calc(5 * var(--to-rem));
  z-index: -1;
  color: rgba(12, 12, 12, 0.48);
  content: "L-MARK";
}

/* 右端の縦組みサブコピー（黒半透明帯 + 白文字） */
.p-fv__catch {
  position: absolute;
  inset-block-start: calc(59 * var(--to-rem));
  inset-inline-end: calc(14 * var(--to-rem));
  z-index: var(--z-index-fv-copy);
  display: flex;
  flex-direction: row-reverse;
  gap: 0;
  align-items: flex-start;
}

.p-fv__catch-line {
  padding-block: calc(6 * var(--to-rem)) 0;
  padding-inline: calc(5 * var(--to-rem));
  font-size: calc(20 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: calc(24 * var(--to-rem));
  color: var(--color-white);
  letter-spacing: 0.2em;
  background-color: rgba(0, 0, 0, 0.68);
  writing-mode: vertical-rl;
}

/* 2列目（最短でスタイリストデビュー。）はカンプ通り 72px 下げて段違いに
 * 注: vertical-rl の要素自身は論理 margin が横軸に解決されるため物理プロパティを使う */
.p-fv__catch-line + .p-fv__catch-line {
  margin-top: calc(72 * var(--to-rem)); /* stylelint-disable-line */
}

/* 下部キャッチコピー（白ボックス + 黒文字） */
.p-fv__copy {
  position: absolute;
  inset-block-start: calc(443 * var(--to-rem));
  inset-inline-start: 0;
  z-index: var(--z-index-fv-copy);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.p-fv__copy-line {
  padding-block: calc(9 * var(--to-rem));
  padding-inline: 0 calc(2 * var(--to-rem));
  font-size: calc(40 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: calc(36 * var(--to-rem));
  color: var(--color-black);
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
}

/* 下部 LINE 相談バー */
.p-fv__cta {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--z-index-fv-copy);
  /* バー高さ 53px。上端に黒タグ(下半分≈rem(11.5))が重なるため、
     本文(アイコン・テキスト・矢印)を padding-block-start で下げ、黒タグとの近接を解消する */
  min-height: calc(53 * var(--to-rem));
  padding-block-start: calc(9 * var(--to-rem));
  /* PC は右サイドの丸型 LINE CTA に導線を集約するため FV 上のバーは出さない */
}
@media screen and (min-width: 1200px) {
  .p-fv__cta {
    display: none;
  }
}

/* 下部ハッシュタグ帯（LINE 相談バーに半分かぶせる・黒地/白文字）。
 * CTAバー高さ rem(53)。タグ(高さ rem(23))の下半分がバー上端に重なるよう
 * inset-block-end を rem(53) − rem(11.5)=rem(41.5) に下げ、z-index でバーの上に載せる。 */
.p-fv__tags {
  position: absolute;
  inset-block-end: calc(41.5 * var(--to-rem));
  inset-inline-start: 0;
  z-index: var(--z-index-fv-tags);
  display: flex;
  /* 4つのハッシュタグを詰めてカンプの黒タグ幅(≈337)に収める */
  gap: calc(3 * var(--to-rem));
  align-items: center;
  /* 黒タグはコンテンツ幅にフィット（左寄せ）。固定幅にせず fit-content にすることで
     画面幅・フォント差に関わらずテキストが黒タグからはみ出さない。max-width で画面超えも防止 */
  justify-content: flex-start;
  width: fit-content;
  max-width: 100%;
  min-height: calc(23 * var(--to-rem));
  /* テキストと黒タグ端の余白（左4px / 右5px） */
  padding-inline: calc(4 * var(--to-rem)) calc(5 * var(--to-rem));
  background-color: var(--color-black);
  /* PC は CTA バーごと非表示（導線は右サイドに集約）→ タグ帯も出さない */
}
@media screen and (min-width: 1200px) {
  .p-fv__tags {
    display: none;
  }
}

.p-fv__tag {
  font-size: calc(10 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.6;
  color: var(--color-white);
  white-space: nowrap;
}

/* ========================================
  p-header — 固定ヘッダー（ENTRY + ハンバーガー）
  ※ 位置指定（fixed / z-index）は layouts/_l-header.scss
======================================== */
/* PC(xl≧1200px) は p-side のアンカーメニュー＋丸型 LINE CTA が導線を担うため、
   FV に重なる ENTRY / ハンバーガーは非表示にする */
@media screen and (min-width: 1200px) {
  .p-header {
    display: none;
  }
}

.p-header__actions {
  display: flex;
  gap: calc(17 * var(--to-rem));
  align-items: center;
  justify-content: flex-end;
  width: calc(380 * var(--to-rem));
  padding-block: calc(13 * var(--to-rem));
  padding-inline: calc(13 * var(--to-rem));
  margin-inline: auto;
}

/* ========================================
  p-drawer — ハンバーガーメニュー（右からのパネル）
======================================== */
.p-drawer {
  --_visibility: hidden;
  --_pointer: none;
  --_panel-x: 105%;
  --_overlay-opacity: 0;
  position: fixed;
  inset: 0;
  z-index: var(--z-index-drawer);
  pointer-events: var(--_pointer);
  visibility: var(--_visibility);
  transition: visibility var(--duration);
}
.p-drawer.is-open {
  --_visibility: visible;
  --_pointer: auto;
  --_panel-x: 0%;
  --_overlay-opacity: 1;
}

.p-drawer__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.15);
  opacity: var(--_overlay-opacity);
  transition: opacity var(--duration);
}

.p-drawer__panel {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  width: min(calc(313 * var(--to-rem)), 86%);
  height: calc(500 * var(--to-rem));
  max-height: 100dvh;
  padding-block: calc(33 * var(--to-rem)) calc(31 * var(--to-rem));
  padding-inline: calc(54 * var(--to-rem)) calc(36 * var(--to-rem));
  overflow-y: auto;
  background-color: var(--color-white);
  transition: transform var(--duration) ease;
  transform: translateX(var(--_panel-x));
}

.p-drawer__close {
  position: absolute;
  inset-block-start: calc(20 * var(--to-rem));
  inset-inline-end: calc(20 * var(--to-rem));
  width: calc(24 * var(--to-rem));
  height: calc(24 * var(--to-rem));
  background-color: transparent;
  border: none;
}
.p-drawer__close::before, .p-drawer__close::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  content: "";
  background-color: var(--color-black);
}
.p-drawer__close::before {
  transform: rotate(45deg);
}
.p-drawer__close::after {
  transform: rotate(-45deg);
}
.p-drawer__close:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 3px;
}

.p-drawer__logo {
  font-family: var(--font-en);
  font-size: calc(40 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.02em;
}

.p-drawer__nav {
  margin-block-start: calc(28 * var(--to-rem));
}

.p-drawer__list {
  display: flex;
  flex-direction: column;
  gap: calc(9 * var(--to-rem));
  padding: 0;
  margin: 0;
  list-style: none;
}

.p-drawer__link {
  display: flex;
  gap: calc(10 * var(--to-rem));
  align-items: center;
  font-size: calc(16 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--color-black);
  text-decoration: none;
}
.p-drawer__link::before {
  flex-shrink: 0;
  width: calc(12 * var(--to-rem));
  height: calc(12 * var(--to-rem));
  content: "";
  background-color: var(--color-accent);
}
.p-drawer__link:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 3px;
}

.p-drawer__cta {
  --_arrow-position: absolute;
  --_arrow-right: calc(5 * var(--to-rem));
  --_arrow-bottom: calc(-4 * var(--to-rem));
  --_arrow-width: calc(26 * var(--to-rem)); /* ドロワー専用：細い矢印SVG(26×13)を右下へ */
  --_arrow-height: calc(13 * var(--to-rem));
  --_arrow-mask: url("../images/cta_arrow_drawer_01.BCrrQH08.svg");
  position: relative;
  gap: calc(9 * var(--to-rem));
  width: calc(236 * var(--to-rem));
  min-height: calc(47 * var(--to-rem));
  margin-block-start: calc(30 * var(--to-rem));
  margin-inline-start: calc(-15 * var(--to-rem));
}

@media (any-hover: hover) {
  .p-drawer__link:hover {
    opacity: 0.6;
  }
}
/* ========================================
  p-interview — スタッフインタビュー
    p-interview__card          : #01 / #03 パターン（番号=左, タグ=右, 見出し=左）
    p-interview__card--reverse : #02 パターン（番号=右, タグ=左, 見出し=右）左右反転
======================================== */
.p-interview {
  position: relative;
  padding-block: calc(13 * var(--to-rem)) calc(59 * var(--to-rem));
  background-color: var(--color-white);
}

.p-interview__heading {
  margin: 0;
  line-height: 1.29;
  text-align: center;
}

.p-interview__heading-text {
  display: inline-block;
  font-size: calc(24 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.29;
  color: var(--color-black);
  background-image: linear-gradient(transparent 45%, var(--color-accent) 45% 90%, transparent 90%);
}

.p-interview__list {
  display: flex;
  flex-direction: column;
  gap: calc(43 * var(--to-rem));
  padding: 0;
  margin: 0;
  margin-block-start: calc(32 * var(--to-rem));
  list-style: none;
}

.p-interview__card {
  position: relative;
  z-index: 0;
  padding-block: 0 calc(32 * var(--to-rem));
  /* デフォルト（#01）: 番号=左, タグ=右, 見出し=左 */
  --_number-start: auto;
  --_number-end: calc(235 * var(--to-rem));
  --_tag-start: auto;
  --_tag-end: calc(10 * var(--to-rem));
  --_tag-align: flex-end;
  --_headline-start: calc(8 * var(--to-rem));
  --_headline-end: auto;
  --_headline-align: flex-start;
  --_headline-top: calc(168 * var(--to-rem));
}

.p-interview__card--reverse {
  /* 反転（#02）: 番号=右, タグ=左, 見出し=右 */
  --_number-start: auto;
  --_number-end: calc(10 * var(--to-rem));
  --_tag-start: calc(11 * var(--to-rem));
  --_tag-end: auto;
  --_tag-align: flex-start;
  --_headline-start: auto;
  --_headline-end: calc(10 * var(--to-rem));
  --_headline-align: flex-end;
  --_headline-top: calc(167 * var(--to-rem));
}

/* #03 は番号右端と吹き出し位置がわずかに異なる（カンプ実測） */
.p-interview__card:nth-child(3) {
  --_number-end: calc(222 * var(--to-rem));
  --_headline-top: calc(175 * var(--to-rem));
}

/* 動画サムネ（クリックでモーダル拡大再生）。旧 .p-interview__photo の枠をそのまま踏襲 */
.p-interview__player {
  position: relative;
  display: block;
  width: calc(289 * var(--to-rem));
  height: calc(172 * var(--to-rem));
  padding: 0;
  margin-block-start: calc(20 * var(--to-rem));
  margin-inline-start: calc(17 * var(--to-rem));
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  transition: opacity var(--duration);
}
.p-interview__player:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 3px;
}

@media (any-hover: hover) {
  .p-interview__player:hover {
    opacity: 0.85;
  }
}
/* ポスター画像は表示枠と同アスペクト(289:172)で書き出し済みなので cover の切り抜きは発生しない */
.p-interview__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* 再生ボタン（白丸 + 黒い三角） */
.p-interview__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: block;
  width: calc(48 * var(--to-rem));
  height: calc(48 * var(--to-rem));
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.p-interview__play::before {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 55%;
  width: 0;
  height: 0;
  content: "";
  border-block: calc(8 * var(--to-rem)) solid transparent;
  border-inline-start: calc(13 * var(--to-rem)) solid var(--color-black);
  transform: translate(-50%, -50%);
}

/* ===== 動画モーダル =====
   dialog はトップレイヤーに出るため、.l-scroll の overflow や z-index の影響を受けない。
   拡大アニメはサムネの矩形からの FLIP（JS: _interview-modal.js が WAAPI で再生） */
.p-interview__modal {
  max-width: min(calc(880 * var(--to-rem)), 92vw);
  max-height: 92dvh;
  padding: 0;
  /* reset の margin:0 が dialog の UA スタイル margin:auto を潰し、画面中央に来なくなるため戻す */
  margin: auto;
  overflow: visible;
  background-color: transparent;
  border: none;
}
.p-interview__modal::backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

.p-interview__modal-frame {
  width: min(calc(880 * var(--to-rem)), 92vw);
  background-color: var(--color-black);
  border: 1px solid var(--color-black);
}

.p-interview__modal-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: contain;
}

.p-interview__modal-close {
  position: absolute;
  inset-block-start: calc(-40 * var(--to-rem));
  inset-inline-end: 0;
  width: calc(32 * var(--to-rem));
  height: calc(32 * var(--to-rem));
  background-color: transparent;
  border: none;
}
.p-interview__modal-close::before, .p-interview__modal-close::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  content: "";
  background-color: var(--color-white);
}
.p-interview__modal-close::before {
  transform: rotate(45deg);
}
.p-interview__modal-close::after {
  transform: rotate(-45deg);
}
.p-interview__modal-close:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

.p-interview__number {
  position: absolute;
  inset-block-start: 0;
  inset-inline: var(--_number-start) var(--_number-end);
  z-index: 2;
  font-family: var(--font-en);
  font-size: calc(64 * var(--to-rem));
  font-style: italic;
  font-weight: 100;
  line-height: 0.85;
  color: var(--color-black);
  white-space: nowrap;
}

.p-interview__tags {
  position: absolute;
  inset-block-start: calc(14 * var(--to-rem));
  inset-inline: var(--_tag-start) var(--_tag-end);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--to-rem));
  align-items: var(--_tag-align);
}

.p-interview__tag {
  width: max-content;
  padding-block: calc(1 * var(--to-rem));
  padding-inline: calc(6 * var(--to-rem));
  margin: 0;
  font-size: calc(11 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.11;
  color: var(--color-white);
  background-color: var(--color-black);
}

.p-interview__headline {
  position: absolute;
  inset-block-start: var(--_headline-top);
  inset-inline: var(--_headline-start) var(--_headline-end);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: var(--_headline-align);
  margin: 0;
  /* カンプは各行box(白)を Boolean Union で結合した単一シェイプ＝外周だけ黒線・行間の内部線なし。
     各行に個別 border を引くと境界に黒線が出るため、白box群のシルエットに
     4方向 drop-shadow で 1px の外周線を付ける（幅が非単調でも内部線が出ない）。 */
  filter: drop-shadow(1px 0 0 var(--color-black)) drop-shadow(-1px 0 0 var(--color-black)) drop-shadow(0 1px 0 var(--color-black)) drop-shadow(0 -1px 0 var(--color-black));
}

/* border は引かない（親 .p-interview__headline の drop-shadow が外周線を担う）。
   白背景の box が Union シルエットを形成し、その外周にだけ黒線が乗る。 */
.p-interview__headline-line {
  width: max-content;
  padding-block: 0;
  padding-inline: calc(6 * var(--to-rem));
  font-size: calc(14 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: calc(18 * var(--to-rem));
  color: var(--color-black);
  background-color: var(--color-white);
}

/* 隣接 box を 1px 重ねてシルエットを途切れなく連結する */
.p-interview__headline-line:not(:first-child) {
  margin-block-start: calc(-1 * var(--to-rem));
}

/* ========================================
  p-message — 代表メッセージ
======================================== */
.p-message {
  position: relative;
  overflow: hidden;
  background-color: var(--color-white);
}

/* 注: writing-mode: vertical-rl の要素自身は論理 inset が縦軸で解決されるため物理プロパティで配置する */
.p-message__label {
  position: absolute;
  top: calc(5 * var(--to-rem));
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(31 * var(--to-rem));
  height: calc(188 * var(--to-rem));
  font-family: var(--font-en);
  font-size: calc(36 * var(--to-rem));
  font-style: italic;
  font-weight: 100;
  line-height: 0.85;
  color: var(--color-white);
  text-transform: uppercase;
  white-space: nowrap;
  background-color: var(--color-black);
  writing-mode: vertical-rl;
}

.p-message__title {
  width: calc(312 * var(--to-rem));
  padding-inline-start: calc(44 * var(--to-rem));
  font-size: calc(24 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.29;
  letter-spacing: 0.07em;
}

.p-message__title-mark {
  background-image: linear-gradient(transparent 42%, var(--color-accent) 42%);
  box-decoration-break: clone;
}

.p-message__visual {
  position: relative;
  z-index: 0;
  margin-block-start: calc(27 * var(--to-rem));
}

.p-message__photo {
  display: block;
  width: 100%;
  height: calc(453 * var(--to-rem));
  object-fit: cover;
  object-position: 12% top;
}

.p-message__text {
  position: absolute;
  inset-block-start: calc(69 * var(--to-rem));
  inset-inline-start: calc(13 * var(--to-rem));
  z-index: 1;
  width: calc(243 * var(--to-rem));
  margin: 0;
  font-size: calc(14 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.29;
}

.p-message__name {
  position: absolute;
  inset-block-start: calc(260 * var(--to-rem));
  inset-inline-start: calc(13 * var(--to-rem));
  z-index: 1;
  display: flex;
  align-items: baseline;
}

.p-message__name-label {
  font-size: calc(14 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.29;
  letter-spacing: 0.07em;
}

.p-message__name-value {
  margin-inline-start: calc(3 * var(--to-rem));
  font-size: calc(20 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.29;
  letter-spacing: 0.07em;
}

/* tobenext. ウォーターマーク: デザインのフォント（Web非フリー）を Figma から PNG 書き出し。
 * 元テキスト実装から <img> へ置換（フォント依存を排除）。30% 不透明度は書き出し済み */
.p-message__watermark {
  position: absolute;
  inset-block-start: calc(352 * var(--to-rem));
  inset-inline-start: calc(15 * var(--to-rem));
  z-index: 1;
  width: auto;
  height: calc(99 * var(--to-rem));
}

/* パネル全体をLINEリンク化（<a>）。inline要素なので display:block で箱を維持し、
   絶対配置の子（label / cta）の基準にする */
.p-message__cta-panel {
  position: relative;
  display: block;
  height: calc(136 * var(--to-rem));
  background-color: var(--color-accent);
  border: 1px solid var(--color-black);
}
.p-message__cta-panel:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 3px;
}

.p-message__cta-label {
  position: absolute;
  top: calc(22 * var(--to-rem));
  left: calc(108 * var(--to-rem));
  margin: 0;
  font-size: calc(15 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.02;
}

/* 透明な面 + 左上オフセットの黒レイヤー（カンプの奥背景）。
 * 面が透明なため黒レイヤーが透けてボタンが黒く見え、右下にアクセント地の縁が残る */
.p-message__cta {
  --_bg: transparent;
  --_text: var(--color-white);
  --_arrow: var(--color-white);
  /* line_logo は黒バブル＋白文字。黒ボタン上ではバブルが埋もれるため invert で白バブル＋黒文字にする（カンプ node1:635 準拠。brightness(0) は付けない＝文字が消える） */
  --_icon-filter: invert(1);
  --_icon-w: calc(37 * var(--to-rem));
  --_icon-h: calc(36 * var(--to-rem));
  position: absolute;
  top: calc(58 * var(--to-rem));
  left: calc(23 * var(--to-rem));
  z-index: 0;
  width: calc(333 * var(--to-rem));
  height: calc(58 * var(--to-rem));
  /* 黒レイヤー(::before)が translate(-5,-6) で左上にずれる分、内容も同量ずらして黒帯の中央に揃える（padding は offset の2倍） */
  padding-block: 0 calc(12 * var(--to-rem));
  padding-inline: 0 calc(10 * var(--to-rem));
  font-size: calc(28 * var(--to-rem));
  line-height: 1.02;
}
.p-message__cta::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background-color: var(--color-black);
  border: 1px solid var(--color-black);
  transform: translate(calc(-5 * var(--to-rem)), calc(-6 * var(--to-rem)));
}

/* ========================================
  p-recruit — 募集要項
======================================== */
.p-recruit {
  position: relative;
  padding-block: calc(4 * var(--to-rem)) calc(89 * var(--to-rem));
  background-color: var(--color-white);
}

/* 注: writing-mode: vertical-rl の要素自身は論理 inset が縦軸で解決されるため物理プロパティで配置する */
.p-recruit__label {
  position: absolute;
  top: calc(1 * var(--to-rem));
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(31 * var(--to-rem));
  height: calc(180 * var(--to-rem));
  font-family: var(--font-en);
  font-size: calc(36 * var(--to-rem));
  font-style: italic;
  font-weight: 100;
  line-height: 0.85;
  color: var(--color-white);
  text-transform: uppercase;
  white-space: nowrap;
  background-color: var(--color-black);
  writing-mode: vertical-rl;
}

.p-recruit__heading {
  position: relative;
  z-index: 0;
  margin-block-start: 0;
  font-size: calc(24 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.29;
  text-align: center;
}
.p-recruit__heading::before {
  position: absolute;
  inset-block-start: calc(14 * var(--to-rem));
  inset-inline-start: 50%;
  z-index: -1;
  width: calc(111 * var(--to-rem));
  height: calc(14 * var(--to-rem));
  content: "";
  background-color: var(--color-accent);
  transform: translateX(-50%);
}

.p-recruit__table {
  width: calc(327 * var(--to-rem));
  margin-block-start: calc(30 * var(--to-rem));
  margin-inline-start: calc(22 * var(--to-rem));
  border-collapse: collapse;
}

.p-recruit__row {
  border-bottom: 1px solid var(--color-black);
}
.p-recruit__row:last-child {
  border-bottom: none;
}

.p-recruit__label-cell {
  width: calc(109 * var(--to-rem));
  padding-block: calc(8 * var(--to-rem));
  text-align: left;
  vertical-align: middle;
}

.p-recruit__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(89 * var(--to-rem));
  height: calc(32 * var(--to-rem));
  font-size: calc(14 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 0.85;
  color: var(--color-white);
  text-align: center;
  background-color: var(--color-black);
  border-radius: calc(48 * var(--to-rem));
}

.p-recruit__value {
  padding-block: calc(8 * var(--to-rem));
  font-size: calc(14 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.02;
  color: var(--color-black);
  text-align: left;
  vertical-align: middle;
}

.p-recruit__value--wrap {
  max-width: calc(190 * var(--to-rem));
}

/* ※注記: 本文の下に独立行で表示（給与・勤務時間・休日） */
.p-recruit__note {
  display: block;
  margin-block-start: calc(4 * var(--to-rem));
  font-size: calc(12 * var(--to-rem));
}

/* 福利厚生: 中黒の箇条書き */
.p-recruit__benefits {
  padding-inline-start: 0;
  margin-block: 0;
  list-style: none;
}

.p-recruit__benefit {
  line-height: 1; /* カンプ node 1:412: 3行42.17px=14px/行。1.6だと行間が広すぎた */
}
.p-recruit__benefit::before {
  content: "・";
}

/* 応募方法: 水色下線のテキストリンク */
.p-recruit__link {
  color: var(--color-link);
  text-decoration-line: underline;
  text-underline-offset: calc(2 * var(--to-rem));
}
.p-recruit__link:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: calc(2 * var(--to-rem));
}
@media (any-hover: hover) {
  .p-recruit__link:hover {
    opacity: 0.7;
  }
}

/* ========================================
  p-side — PC 専用サイド装飾
    500px 中央カラムの外側余白に配置する装飾群。
    カンプ（1280px アートボード）の実測座標を px 指定し、
    ビューポート中央を基準に配置する（コンテンツ列とは独立のため
    --to-rem スケールは適用しない）。
======================================== */
/* stylelint-disable declaration-property-value-allowed-list, unit-allowed-list */
.p-side {
  /* frames(w1745) 等の装飾はビューポート両外へブリードするため、自身を包含ブロックにして
     レイアウトはみ出しを遮断する（body直下・top0・全幅なので座標基準は従来と同一） */
  position: relative;
  display: none;
  overflow-x: clip;
  /* サイド装飾は 1280px アートボード基準の固定offset配置。1200px未満だと中央からの
     ±offsetが画面幅を超えて見切れるため、収まる xl(1200px) 以上でのみ表示する。
     768〜1199px ではナビ=ハンバーガー→ドロワー / LINE CTA=追従CTA＋ドロワーで導線を担保。 */
}
@media screen and (min-width: 1200px) {
  .p-side {
    display: block;
  }
}

/* FV まわりの線画フレーム装飾（カンプ準拠）。
   カンプでは frames(Group 117) はコンテンツ列(Frame 117)の下のレイヤー。
   .p-side は position:relative のため既定では非配置の .l-scroll より前面に塗られる。
   z-index:-1 で body の通常フローより背面へ落とし、中央カラムに線が重ならないようにする
   （.l-main の不透明な背景がカラム内での透過を止める） */
.p-side__frames {
  position: absolute;
  /* 2026-07-13 デザイナー修正版の枠線背景(Group 117・新カンプ 20260713)。
     カンプ座標系: PC版アートボード 1280px・中央 x=640 → viewport 50%（.p-side__fixed と同一）。
     新 Group117 の bbox は PC版基準で x[-195,1638] / y[-56,1164]（1833×1220）。
       left  : 群左端 carp_x=-195 → 50% + (-195-640) = 50% - 835px（旧値と一致）
       top   : SVG y=0 は PC版 y=-56（＝ページ先頭 y=0 基準）→ -56px（旧: -102px）
       width : 1833px（旧 1745px）/ height: 1220px（旧 1195px）
     旧版は中央の丸型CTAに枠線が接する問題があり、デザイナーが枠を再配置して解消した版。 */
  top: -56px;
  left: calc(50% - 835px);
  z-index: -1;
  width: 1833px;
  height: 1220px;
  pointer-events: none;
  background: url("../images/pc_frames_01.DzKIXb6f.svg") center/contain no-repeat;
}

/* 左余白の L-MARK ロゴ。画面左端と FV 画像左端(50% - 250px)の中央に置くため、
   その中点 calc(25% - 125px) を基準に translateX(-50%) でセンタリングする（文字幅に依存しない） */
.p-side__logo {
  position: absolute;
  top: 392px;
  left: calc(25% - 125px);
  margin: 0;
  font-family: var(--font-en);
  font-size: 64px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-black);
  letter-spacing: 0.04em;
  transform: translateX(-50%);
}

/* 右余白のアンカーメニュー＋丸型CTAの群。x基準はカンプ実測(x919 / 中央640→+279)を維持しつつ、
   上下は実測値ではなくビューポート中央に配置する（クライアント指示 2026-07-13「実測値は無視して中央揃え」）。
   nav と CTA を1つの固定ブロックにまとめ、上下の余白を均等にする。 */
.p-side__fixed {
  position: fixed;
  top: 50%;
  left: calc(50% + 279px);
  z-index: var(--z-index-header);
  display: flex;
  flex-direction: column;
  gap: 24px; /* rev2 実測の nav 下端→CTA 上端の間隔を踏襲 */
  transform: translateY(-50%);
}

/* 右余白の縦アンカーメニュー（群の上段）。 */
.p-side__nav {
  flex-shrink: 0;
}

.p-side__list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.p-side__link {
  display: flex;
  gap: 12px;
  align-items: center;
  height: 39px;
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 1.96;
  color: var(--color-black);
  text-decoration: none;
  letter-spacing: 0.07em;
  white-space: nowrap;
}
.p-side__link::before {
  flex-shrink: 0;
  width: 14.4px;
  height: 14.4px;
  content: "";
  background-color: var(--color-accent);
}
.p-side__link:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 3px;
}

/* 右余白の丸型 LINE CTA（群の下段）。サイズはカンプ実測 180×179 を維持。 */
.p-side__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 179px;
  text-decoration: none;
  background-color: var(--color-accent);
  border-radius: 50%;
}
.p-side__cta:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 3px;
}

.p-side__cta-icon {
  width: 62px;
  height: 59px;
  aspect-ratio: 62/59;
  object-fit: contain;
}

.p-side__cta-text {
  margin-block-start: 6px;
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--color-black);
  text-align: center;
}

/* 矢印(>>>) は指定 SVG をマスクに使用し、色は黒固定（LINE ボタン内） */
.p-side__cta-arrow {
  position: relative;
  inset-block-start: 4px; /* カンプ合わせで矢印のみ 4px 下げ */
  width: 25.762px;
  height: 12.195px;
  margin-block-start: 2px;
  background-color: var(--color-black);
  mask: url("../images/cta_arrow_side_01.CLONqqTp.svg") center/contain no-repeat;
}

@media (any-hover: hover) {
  .p-side__link:hover {
    opacity: 0.6;
  }
  .p-side__cta:hover {
    opacity: 0.85;
  }
}
/* stylelint-enable declaration-property-value-allowed-list, unit-allowed-list */
/* ========================================
  p-strength — L-MARKの5つの強み
    p-strength__heading-line : ポイント見出し（黒地バー、1行=1バー）
    p-strength__mark         : 本文中のライムマーカー（太）
    p-strength__mark--thin   : 本文中のライム下線（細）
======================================== */
.p-strength {
  position: relative;
  padding-block: calc(60 * var(--to-rem)) calc(55 * var(--to-rem));
  /* 見出し注記テキスト（右端382）のレイアウトはみ出しをセクションで遮断 */
  overflow-x: clip;
  background-color: var(--color-white);
}

/* 注: writing-mode: vertical-rl の要素自身は論理 inset が縦軸で解決されるため物理プロパティで配置する */
.p-strength__label {
  position: absolute;
  top: calc(60 * var(--to-rem));
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(32 * var(--to-rem));
  height: calc(280 * var(--to-rem));
  font-family: var(--font-en);
  font-size: calc(36 * var(--to-rem));
  font-style: italic;
  font-weight: 100;
  line-height: 0.85;
  color: var(--color-white);
  text-transform: uppercase;
  white-space: nowrap;
  background-color: var(--color-black);
  writing-mode: vertical-rl;
}

.p-strength__title {
  margin: 0;
  margin-block-end: calc(43 * var(--to-rem));
  font-size: calc(24 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.29;
  text-align: center;
  transform: translateX(calc(19 * var(--to-rem)));
}

.p-strength__title-mark {
  background-image: linear-gradient(transparent 47%, var(--color-accent) 47% 91%, transparent 91%);
  box-decoration-break: clone;
}

.p-strength__point {
  position: relative;
  margin-block-start: 0;
}

.p-strength__point-head {
  display: flex;
  gap: calc(4 * var(--to-rem));
  align-items: center;
}

.p-strength__point-figure {
  position: relative;
  flex-shrink: 0;
  width: calc(60 * var(--to-rem));
  margin-inline-start: calc(16 * var(--to-rem));
  text-align: center;
}

.p-strength__point-label {
  margin: 0;
  font-family: "Alegreya Sans SC", var(--font-en);
  font-size: calc(18 * var(--to-rem));
  font-style: italic;
  font-weight: var(--fw-bold);
  line-height: 1.16;
  color: var(--color-black);
}

.p-strength__point-number {
  margin: 0;
  margin-block-start: calc(-20 * var(--to-rem));
  font-family: "Alegreya Sans SC", var(--font-en);
  font-size: calc(55 * var(--to-rem));
  font-style: italic;
  font-weight: var(--fw-regular);
  line-height: 1.16;
  color: var(--color-black);
}

/* 番号の 0 に重ねる斜線（スラッシュゼロ表現）。
   数字はプロポーショナル字形で 01〜05 の "0" の位置が最大 6px ずれるため、
   figure ではなく "0" のグリフ自身を包含ブロックにして斜線を重ねる。 */
.p-strength__point-zero {
  position: relative;
}
.p-strength__point-zero::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: calc(17 * var(--to-rem));
  height: calc(21 * var(--to-rem));
  content: "";
  background: url("../images/strength_point_01.2spDZ1hK.svg") center/contain no-repeat;
  transform: translate(-50%, -50%);
}

.p-strength__heading {
  flex-shrink: 0;
  margin: 0;
}

.p-strength__heading-line {
  display: flex;
  align-items: center;
  width: calc(270 * var(--to-rem));
  height: calc(25 * var(--to-rem));
  padding-inline: calc(5 * var(--to-rem));
  font-size: calc(20 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--color-white);
  white-space: nowrap;
  background-color: var(--color-black);
}

.p-strength__heading-line--center {
  justify-content: center;
  height: calc(26 * var(--to-rem));
}

.p-strength__heading-line--gap {
  margin-block-start: calc(4 * var(--to-rem));
}

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

/* 「（正社員・業務委託）」は全角括弧・中点のアキで黒帯からはみ出すため palt でツメ組みにする。
   align-self: flex-end で下ぞろえ（カンプでも注記の下端＝黒帯の下端）。
   親の align-items: center のままだと注記だけ 3.55px 浮きベースラインもズレる。
   「雇用形態」との間にアキを取りつつ帯に収めるため文字サイズを rem(13) に落とす。 */
.p-strength__heading-note {
  align-self: flex-end;
  margin-inline-start: 0.3em;
  font-size: calc(13 * var(--to-rem));
  font-weight: var(--fw-bold);
  font-feature-settings: "palt";
  color: var(--color-white);
  white-space: nowrap;
}

.p-strength__pricing {
  display: flex;
  gap: calc(6 * var(--to-rem));
  align-items: center;
  margin-inline-start: calc(25 * var(--to-rem));
}

.p-strength__pricing-item {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(148 * var(--to-rem));
  min-height: calc(29 * var(--to-rem));
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
}
.p-strength__pricing-item::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  border: 1px solid var(--color-accent);
  transform: translate(calc(2 * var(--to-rem)), calc(3 * var(--to-rem)));
}

.p-strength__pricing-text {
  font-size: calc(12 * var(--to-rem));
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

.p-strength__pricing-plus {
  display: inline-flex;
  justify-content: center;
  width: calc(13 * var(--to-rem));
  font-size: calc(20 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--color-black);
}

.p-strength__pricing-note {
  margin-block-start: calc(9 * var(--to-rem));
  margin-inline-start: calc(21 * var(--to-rem));
  font-size: calc(8 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.43;
  color: #767676;
  text-align: left;
}

.p-strength__timeline {
  position: relative;
  z-index: 0;
  display: flex;
  gap: calc(10 * var(--to-rem));
  align-items: flex-start;
  padding: 0;
  margin: 0;
  margin-block-start: calc(9 * var(--to-rem));
  margin-inline-start: calc(20 * var(--to-rem));
  list-style: none;
}
.p-strength__timeline::before {
  position: absolute;
  inset-block-start: calc(13 * var(--to-rem));
  inset-inline-start: calc(25 * var(--to-rem));
  z-index: -1;
  width: calc(283 * var(--to-rem));
  height: 0;
  content: "";
  border-block-start: 2px solid var(--color-black);
}

.p-strength__timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(103 * var(--to-rem));
}

.p-strength__timeline-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(28 * var(--to-rem));
  padding-inline: calc(4 * var(--to-rem));
  font-size: calc(13 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 0.96;
  color: var(--color-black);
  text-align: center;
  background-color: var(--color-accent);
  border: 1px solid var(--color-black);
  border-radius: calc(31 * var(--to-rem));
}

.p-strength__timeline-text {
  margin-block-start: calc(11 * var(--to-rem));
  font-size: calc(12 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.23;
  color: var(--color-black);
  text-align: center;
}

.p-strength__text {
  width: calc(325 * var(--to-rem));
  margin: 0;
  margin-block-start: calc(11 * var(--to-rem));
  margin-inline-start: calc(25 * var(--to-rem));
  font-size: calc(12 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.43;
  color: var(--color-black);
}

.p-strength__text--tight {
  margin-block-start: calc(12 * var(--to-rem));
}

/* POINT05: 先方が「Instagram→INSTAGRAM」大文字化で固定幅 width:rem(325) に収まらず2行に
   →「1行に収めて」の指摘。font-size を rem(11) に下げて1行化（Safariのラテン字幅増でも余白21px確保） */
.p-strength__text--oneline {
  font-size: calc(11 * var(--to-rem));
}

/* POINT04「セミマンツーマン制度のメリット」— 中央見出し（両サイド罫線）＋3列
   （ライムの角ポチ＋2行ラベル＋アイコン60px）。本文の直下に置く。 */
.p-strength__merit {
  width: calc(327 * var(--to-rem));
  margin-block-start: calc(20 * var(--to-rem));
  /* カンプ通り右端を本文・区切り線の右端（コンテンツ列右端）に揃える（右寄せ）。
     区切り線(.p-strength__divider)と同じ幅・左インデントで右端を一致させる */
  margin-inline: calc(23 * var(--to-rem)) 0;
}

.p-strength__merit-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.p-strength__merit-heading::before, .p-strength__merit-heading::after {
  flex: 1;
  height: 1px;
  content: "";
  background-color: var(--color-black);
}
.p-strength__merit-heading span {
  padding-inline: calc(10 * var(--to-rem));
  font-size: calc(11 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.43;
  color: var(--color-black);
  white-space: nowrap;
}

.p-strength__merit-list {
  display: flex;
  padding: 0;
  margin: calc(13 * var(--to-rem)) 0 0;
  list-style: none;
}

/* 3等分（各列の中でラベル・アイコンを中央寄せ） */
.p-strength__merit-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}

/* 0716カンプで左肩のライム角ポチは廃止。ラベルは各列内で中央寄せのみ */
.p-strength__merit-label {
  display: inline-block;
  margin: 0;
  font-size: calc(11 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.1;
  color: var(--color-black);
  text-align: center;
}

.p-strength__merit-icon {
  width: calc(60 * var(--to-rem));
  height: calc(60 * var(--to-rem));
  margin-block-start: calc(6 * var(--to-rem));
}

/* 雇用形態テーブル直後の本文はカンプ通り詰める */
.p-strength__timeline + .p-strength__text {
  margin-block-start: calc(21 * var(--to-rem));
}

.p-strength__mark {
  background-image: linear-gradient(transparent 29%, var(--color-accent) 29% 76%, transparent 76%);
  box-decoration-break: clone;
}

.p-strength__mark--thin {
  background-image: none;
  border-block-end: calc(2 * var(--to-rem)) solid var(--color-accent);
}

.p-strength__divider {
  width: calc(327 * var(--to-rem));
  height: 0;
  margin-block: calc(21 * var(--to-rem)) calc(24 * var(--to-rem));
  margin-inline: calc(23 * var(--to-rem)) 0;
  border: none;
  border-block-start: 1px solid var(--color-accent);
}

/* ========================================
  p-training — 研修（研修スキップ制度）
======================================== */
.p-training {
  position: relative;
  padding-block: 0 calc(48 * var(--to-rem));
  background-color: var(--color-white);
}

/* 注: writing-mode: vertical-rl の要素自身は論理 inset が縦軸で解決されるため物理プロパティで配置する */
.p-training__label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(31 * var(--to-rem));
  height: calc(275 * var(--to-rem));
  font-family: var(--font-en);
  font-size: calc(36 * var(--to-rem));
  font-style: italic;
  font-weight: 100;
  line-height: 0.85;
  color: var(--color-white);
  white-space: nowrap;
  background-color: var(--color-black);
  writing-mode: vertical-rl;
}

.p-training__title {
  margin-inline-start: calc(22 * var(--to-rem));
  font-size: calc(24 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.29;
  letter-spacing: 0.07em;
}

.p-training__title-mark {
  background-image: linear-gradient(transparent 55%, var(--color-accent) 55% 87%, transparent 87%);
  box-decoration-break: clone;
}

.p-training__lead {
  width: calc(218 * var(--to-rem));
  margin-block-start: calc(10 * var(--to-rem));
  margin-inline-start: calc(18 * var(--to-rem));
  font-size: calc(14 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

.p-training__photo {
  width: calc(299 * var(--to-rem));
  height: calc(219 * var(--to-rem));
  margin-block-start: calc(16 * var(--to-rem));
  margin-inline-start: calc(-20 * var(--to-rem));
}

.p-training__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-training__divider {
  display: flex;
  gap: calc(4 * var(--to-rem));
  align-items: center;
  margin-block-start: calc(3 * var(--to-rem));
  margin-inline-start: calc(-20 * var(--to-rem));
}

.p-training__divider-icon {
  flex-shrink: 0;
  width: calc(75 * var(--to-rem));
  height: calc(15 * var(--to-rem));
  /* カンプ(Figma node1:498)から書き出した斜線SVGをそのまま使用 */
  background: url("../images/training_divider_01.D0P8lu-5.svg") center/contain no-repeat;
}

.p-training__divider-line {
  align-self: flex-start; /* カンプではアイコン上端に揃う（既定の align-items:center だと上下中央になるため上揃えに） */
  width: calc(213 * var(--to-rem));
  height: calc(2 * var(--to-rem));
  background-color: var(--color-black);
}

.p-training__text {
  width: calc(291 * var(--to-rem));
  margin-block-start: 0;
  margin-inline-start: calc(59 * var(--to-rem));
  font-size: calc(13 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.29;
}

.p-training__sub-title {
  margin-block-start: calc(40 * var(--to-rem));
  font-size: calc(15 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.29;
  text-align: center;
}

/* スキルレベル別ファネル（背後に黄緑バー、下端に下向き矢印） */
.p-training__levels {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: calc(9 * var(--to-rem));
  padding: 0;
  margin: 0;
  margin-block-start: calc(31 * var(--to-rem));
  list-style: none;
}
.p-training__levels::before {
  position: absolute;
  top: 0;
  left: calc(74 * var(--to-rem));
  z-index: -1;
  width: calc(76 * var(--to-rem));
  height: calc(270 * var(--to-rem));
  content: "";
  background-color: var(--color-accent);
}
.p-training__levels::after {
  position: absolute;
  top: calc(250 * var(--to-rem));
  left: calc(26 * var(--to-rem));
  z-index: -1;
  width: calc(172 * var(--to-rem));
  height: calc(59 * var(--to-rem));
  content: "";
  background: url("../images/training_arrow_01.D2K1r9L9.svg") center/contain no-repeat;
  transform: rotate(180deg);
}

.p-training__level {
  display: flex;
  gap: calc(11 * var(--to-rem));
  align-items: center;
  margin-inline-start: calc(23 * var(--to-rem));
}

.p-training__level-badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: calc(177 * var(--to-rem));
  height: calc(41 * var(--to-rem));
  font-size: calc(14 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.29;
  color: var(--color-white);
  border-radius: calc(42 * var(--to-rem));
}

.p-training__level-badge--lv1 {
  background-color: #767676;
}

.p-training__level-badge--lv2 {
  background-color: #5e5e5e;
}

.p-training__level-badge--lv3 {
  background-color: #414141;
}

.p-training__level-badge--lv4 {
  background-color: #303030;
}

.p-training__level-badge--lv5 {
  background-color: var(--color-black);
}

.p-training__level-value {
  font-size: calc(16 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.29;
  color: var(--color-black);
}

.p-training__level-value-num {
  font-size: calc(24 * var(--to-rem));
}

/* DEBUT 文字はファネル矢印上に絶対配置（セクション基準・カンプ実測座標） */
.p-training__debut {
  position: absolute;
  top: calc(823 * var(--to-rem));
  left: calc(96 * var(--to-rem));
  margin: 0;
}

.p-training__debut-text {
  font-size: calc(20 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.29;
  color: var(--color-black);
  text-transform: uppercase;
}

/* ========================================
  STEP タイムライン（スクロール連動コンベア）
    トラック（.p-training__steps-track）を高くしてダイヤルを sticky でピン留めし、
    JS（_training-steps.js）がスクロール量から現在の STEP（1〜7）を決める。
    各 li は data-offset（＝ 自ステップ番号 − 現在の STEP）を受け取り、
    円弧（楕円: 中心 (-57, 155.5) / 半径 128.5 × 155 ※カンプ px）上のどこに座るかが決まる。
    アクティブは常にスロット2（カンプの STEP2 の位置）。

      data-offset | 位置                        | 表示
      ------------|-----------------------------|--------------
        -1        | スロット1（アクティブの上）  | ○
         0        | スロット2（アクティブ）      | ◎ カード表示
        +1        | スロット3                    | ○
        +2        | スロット4                    | ○
        その他    | 弧の延長上                   | × フェードアウト

    例）アクティブが STEP3 になると STEP1 は offset -2 ＝ 弧の上へ抜けて消え、
    同時に STEP5 が offset +2 ＝ スロット4（直前まで STEP4 がいた位置）へ入ってくる。

    登録カスタムプロパティ（--training-angle 等）を transition するため、
    ドットは弦（直線）ではなく弧に沿って移動する。transform を直接 transition すると直線になる。
    JS 無効時は data-offset が付かず、.p-training__step--0N の既定値
    ＝カンプ状態（STEP2 アクティブ）で静止する。
======================================== */
@property --training-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
@property --training-on {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --training-show {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
/* ピン区間のレール。ダイヤル高 ＋ 6ノッチ分（STEP1→7）のスクロール量 */
.p-training__steps-track {
  --_step-scroll: 40dvh;
  height: calc(calc(311 * var(--to-rem)) + 6 * var(--_step-scroll));
  margin-block-start: calc(126 * var(--to-rem));
}

.p-training__steps {
  --_duration: 0.55s;
  /* ピン留め。スクロールコンテナは PC(md以上)が .l-scroll、SP が body だが
     どちらもスクロールポート高 = 100dvh なので同じ式で縦中央に留まる */
  position: sticky;
  top: calc((100dvh - calc(311 * var(--to-rem))) / 2);
  height: calc(311 * var(--to-rem));
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (prefers-reduced-motion: reduce) {
  .p-training__steps {
    --_duration: 0s;
  }
}
.p-training__steps::before {
  position: absolute;
  top: 0;
  left: calc(-186 * var(--to-rem));
  width: calc(258 * var(--to-rem));
  height: calc(311 * var(--to-rem));
  clip-path: inset(0 0 0 calc(186 * var(--to-rem) - var(--padding-inner)));
  content: "";
  background: url("../images/training_curve_01.COtBTR7x.svg") center/contain no-repeat;
}

/* li は OL 全面に重ね、ヘッド（ドット+ラベル）とカードを内部で絶対配置する。
   角度・活性フラグが変わるのは li なので transition もここに置く */
.p-training__step {
  position: absolute;
  inset: 0;
  z-index: 0;
  transition-timing-function: ease;
  transition-duration: var(--_duration);
  /* transition-property のカスタムプロパティ名指定は値ではないため誤検知（stylelint 16.13 で修正済みのバグ） */
  /* stylelint-disable custom-property-no-missing-var-function */
  transition-property: --training-angle, --training-on, --training-show;
  /* stylelint-enable custom-property-no-missing-var-function */
}

/* JS 無効時のフォールバック＝カンプ状態（STEP2 がアクティブ）。
   JS が付ける [data-offset] は詳細度が上なので上書きされる */
.p-training__step--01 {
  --training-angle: -58.35deg;
  --training-show: 1;
}

.p-training__step--02 {
  --training-angle: -31.43deg;
  --training-on: 1;
  --training-show: 1;
}

.p-training__step--03 {
  --training-angle: 33.21deg;
  --training-show: 1;
}

.p-training__step--04 {
  /* overlap回避調整: 戻す場合は 35deg */
  --training-angle: 59.47deg;
  --training-show: 1;
}

.p-training__step--05,
.p-training__step--06,
.p-training__step--07 {
  --training-angle: 80deg;
}

/* 弧上の4スロット（カンプ実測のドット中心を楕円にフィットさせた角度） */
.p-training__step[data-offset="-1"] {
  --training-angle: -58.35deg;
  --training-on: 0;
  --training-show: 1;
}

.p-training__step[data-offset="0"] {
  --training-angle: -31.43deg;
  --training-on: 1;
  --training-show: 1;
}

.p-training__step[data-offset="1"] {
  --training-angle: 33.21deg;
  --training-on: 0;
  --training-show: 1;
}

.p-training__step[data-offset="2"] {
  --training-angle: 59.47deg;
  --training-on: 0;
  --training-show: 1;
}

/* 通過済み: 弧の上の延長へ抜けながらフェードアウト */
.p-training__step[data-offset="-2"],
.p-training__step[data-offset="-3"],
.p-training__step[data-offset="-4"],
.p-training__step[data-offset="-5"],
.p-training__step[data-offset="-6"] {
  --training-angle: -80deg;
  --training-on: 0;
  --training-show: 0;
}

/* 未到達: 弧の下の延長からフェードインしながら入ってくる */
.p-training__step[data-offset="3"],
.p-training__step[data-offset="4"],
.p-training__step[data-offset="5"],
.p-training__step[data-offset="6"] {
  --training-angle: 80deg;
  --training-on: 0;
  --training-show: 0;
}

/* ドット中心を楕円上の --training-angle の位置に置く（cos/sin は CSS 三角関数）。
   -7.5 はドット半径、-2.5 × --training-on は活性時（20px）の半径増分補正。
   ウィンドウ外のステップは --training-show: 0 でフェードアウトする。
   translateY(-50%) でヘッドの縦中央 = ドット中心を楕円上に合わせる */
.p-training__step-head {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: flex;
  gap: calc(4 * var(--to-rem));
  align-items: center;
  opacity: var(--training-show);
  transform: translate(calc((cos(var(--training-angle)) * 128.5 - 57 - 7.5 - 2.5 * var(--training-on)) * var(--to-rem)), calc((sin(var(--training-angle)) * 155 + 155.5) * var(--to-rem))) translateY(-50%);
}

/* 活性時は 15px → 20px（--training-on の補間で拡大） */
.p-training__step-dot {
  display: block;
  flex-shrink: 0;
  width: calc((15 + 5 * var(--training-on)) * var(--to-rem));
  height: calc((15 + 5 * var(--training-on)) * var(--to-rem));
  background-color: var(--color-black);
  border-radius: 50%;
}

/* 活性時は 14px → 24px（--training-on の補間で拡大） */
.p-training__step-label {
  font-family: var(--font-en);
  font-size: calc((14 + 10 * var(--training-on)) * var(--to-rem));
  font-style: italic;
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-black);
}

/* カードは全ステップ同位置（カンプの STEP2 カード位置）に重ね、活性フラグでクロスフェード。
   flex + min-height はテキスト3行のステップ（STEP4 等）で下方向に伸ばすため */
.p-training__step-card {
  position: absolute;
  top: calc(106 * var(--to-rem));
  left: calc(82 * var(--to-rem));
  z-index: 0;
  display: flex;
  width: calc(262 * var(--to-rem));
  min-height: calc(95 * var(--to-rem));
  background-color: var(--color-black);
  border: 1px solid var(--color-black);
  opacity: var(--training-on);
}

.p-training__step-period {
  position: absolute;
  top: calc(-35 * var(--to-rem));
  left: calc(160 * var(--to-rem));
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(102 * var(--to-rem));
  height: calc(26 * var(--to-rem));
  font-size: calc(14 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-black);
  white-space: nowrap;
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: calc(17.5 * var(--to-rem));
}

.p-training__step-columns {
  display: flex;
  flex: 1 1 auto;
}

/* カラム比はカンプ(111/150)から変更。共有された研修内容は技術側にも
   「・サロンワークの心得」等の10文字項目が入り、111px では1行に収まらないため
   カード幅(262px)は保ったまま 130/131 に振り直す */
.p-training__step-column {
  display: flex;
  flex-direction: column;
  width: calc(130 * var(--to-rem));
}

.p-training__step-column--theory {
  width: calc(131 * var(--to-rem));
  border-inline-start: 1px solid var(--color-white);
}

.p-training__step-column-label {
  display: block;
  padding-block: calc(13 * var(--to-rem)) calc(9 * var(--to-rem));
  font-size: calc(14 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-white);
  text-align: center;
  border-block-end: 1px solid var(--color-white);
}

/* 最長項目「・サロンワークの心得」「・カウンセリング理論」（各10文字）が
   左右に余白を残したまま1行に収まる字送りに落とす（カンプは 15px / 左インデント 18px）。
   カラム内寸 130px − padding 14px = 116px ／ 10文字 × 12px × (1 − 0.05) = 114px */
.p-training__step-column-text {
  padding-block: calc(7 * var(--to-rem));
  padding-inline: calc(7 * var(--to-rem));
  margin: 0;
  font-size: calc(12 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--color-white);
  text-align: left;
  letter-spacing: -0.05em;
}

/* ========================================
  p-voice — 実際の声 / デビュー事例
======================================== */
.p-voice {
  position: relative;
  z-index: 0;
  padding-block: calc(64 * var(--to-rem)) calc(66 * var(--to-rem));
  background-color: rgba(0, 0, 0, 0.35);
}

/* 注: writing-mode: vertical-rl の要素自身は論理 inset が縦軸で解決されるため物理プロパティで配置する */
.p-voice__label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(31 * var(--to-rem));
  height: calc(212 * var(--to-rem));
  font-family: var(--font-en);
  font-size: calc(36 * var(--to-rem));
  font-style: italic;
  font-weight: 100;
  line-height: 0.85;
  color: var(--color-white);
  text-transform: uppercase;
  white-space: nowrap;
  background-color: var(--color-black);
  writing-mode: vertical-rl;
}

.p-voice__list {
  display: flex;
  flex-direction: column;
  gap: calc(100 * var(--to-rem));
  padding: 0;
  margin: 0;
  list-style: none;
}

.p-voice__card {
  position: relative;
  z-index: 0;
  width: calc(314 * var(--to-rem));
  padding-block-start: calc(23 * var(--to-rem));
  padding-inline: calc(21 * var(--to-rem));
  margin-inline-start: calc(12 * var(--to-rem));
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
}

/* カード高さはカンプ固定値（result を下端に固定するため） */
.p-voice__card:nth-child(1) {
  height: calc(743 * var(--to-rem));
}

.p-voice__card:nth-child(2) {
  height: calc(732 * var(--to-rem));
}

.p-voice__card:nth-child(3) {
  height: calc(627 * var(--to-rem));
}

.p-voice__number {
  position: absolute;
  top: calc(-28 * var(--to-rem));
  z-index: 1;
  margin: 0;
  font-family: var(--font-en);
  font-size: calc(96 * var(--to-rem));
  font-weight: 900;
  font-feature-settings: "zero" 1;
  font-variant-numeric: slashed-zero;
  line-height: 0.94;
  color: var(--color-black);
}

.p-voice__number--01 {
  left: calc(234 * var(--to-rem));
}

/* 番号01〜03はカンプの特殊な角丸スラッシュゼロ書体でフォント再現不可のため、カンプ書き出しの透過PNGを使用。
 * 高さ揃え（rem(68)）で幅は各字形のアスペクト（01=108/02=168/03=169）に追従 */
.p-voice__number-img {
  display: block;
  width: auto;
  height: calc(68 * var(--to-rem));
}

.p-voice__number--02 {
  left: calc(-33 * var(--to-rem));
}

.p-voice__number--03 {
  left: calc(175 * var(--to-rem));
}

.p-voice__photo {
  position: relative;
  z-index: 0;
  width: calc(270 * var(--to-rem));
  height: calc(304 * var(--to-rem));
}

.p-voice__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-voice__debut {
  position: absolute;
  top: calc(-5 * var(--to-rem));
  left: calc(-4 * var(--to-rem));
  z-index: 1;
  width: fit-content;
  /* カンプは幅98px固定だが、SafariのYuGothicはラテン字形が幅広で「DEBUT AFTER」が
   * 98pxからはみ出し白背景の外（画像上）に出ていた。中身に合わせて伸ばしつつ最低98pxは維持
   * ＝Chrome(98px・カンプ通り)は不変、Safariでは箱が広がりテキストが常に白背景＋余白内に収まる。 */
  min-width: calc(98 * var(--to-rem));
  height: calc(38 * var(--to-rem));
  padding-block: calc(9 * var(--to-rem));
  padding-inline: calc(5 * var(--to-rem));
  margin: 0;
  font-size: calc(12 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 0.99;
  color: var(--color-black);
  text-transform: uppercase;
  white-space: nowrap; /* Safariでの意図しない折返しを防ぐ（改行は<br/>のみ）。フォントはカンプ通りベース(YuGothic) */
  background-color: var(--color-white);
}

.p-voice__debut--right {
  /* 右端をカンプ位置(写真右+20px=290px相当)に固定。fit-contentで箱は左へ伸びるので、
   * 幅が変わってもカード右枠を越えず「右の線に近すぎ」を防ぐ（left基準だと右へはみ出していた）。 */
  right: calc(-20 * var(--to-rem));
  left: auto;
}

.p-voice__tags {
  position: absolute;
  bottom: 0;
  left: calc(3 * var(--to-rem));
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--to-rem));
  align-items: flex-start;
}

.p-voice__tag {
  padding-block: calc(1 * var(--to-rem));
  padding-inline: calc(4 * var(--to-rem));
  margin: 0;
  font-size: calc(12 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 0.85;
  color: var(--color-white);
  background-color: var(--color-black);
}

.p-voice__text {
  width: calc(268 * var(--to-rem));
  margin-block-start: calc(16 * var(--to-rem));
  margin-inline-start: calc(2 * var(--to-rem));
  font-size: calc(12 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.25;
  color: var(--color-black);
}

.p-voice__mark {
  padding-block: calc(1 * var(--to-rem));
  padding-inline: calc(2 * var(--to-rem));
  background-color: var(--color-accent);
  box-decoration-break: clone;
}

.p-voice__result {
  position: absolute;
  inset: auto calc(-1 * var(--to-rem)) calc(-1 * var(--to-rem));
  display: flex;
  align-items: center;
  height: calc(88 * var(--to-rem));
  padding-inline-start: calc(34 * var(--to-rem));
  background-color: var(--color-accent);
  border: 1px solid var(--color-black);
}

.p-voice__result-label {
  position: absolute;
  top: calc(6 * var(--to-rem));
  left: 0;
  height: calc(72 * var(--to-rem));
  margin: 0;
  font-family: var(--font-en);
  font-size: calc(14 * var(--to-rem));
  font-style: italic;
  font-weight: 900;
  line-height: 1.25;
  color: var(--color-black);
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.p-voice__result-text {
  margin: 0;
  font-size: calc(14 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.18;
  color: var(--color-black);
}

/* ========================================
  p-worry — お悩み・課題
======================================== */
.p-worry {
  position: relative;
  padding-block: calc(31 * var(--to-rem)) calc(50 * var(--to-rem));
  /* ブリード要素（カード w381＋奥枠）のレイアウトはみ出しをセクションで遮断 */
  overflow-x: clip;
  background-color: var(--color-white);
}

/* 注: writing-mode: vertical-rl の要素自身は論理 inset が縦軸で解決されるため物理プロパティで配置する */
.p-worry__label {
  position: absolute;
  top: calc(29 * var(--to-rem));
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(31 * var(--to-rem));
  height: calc(55 * var(--to-rem));
  font-family: var(--font-en);
  font-size: calc(36 * var(--to-rem));
  font-style: italic;
  font-weight: 100;
  line-height: 0.85;
  color: var(--color-white);
  white-space: nowrap;
  background-color: var(--color-black);
  writing-mode: vertical-rl;
}

.p-worry__title {
  margin-inline-start: calc(16 * var(--to-rem));
  font-size: calc(24 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.07;
  letter-spacing: 0.07em;
}

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

.p-worry__card {
  position: relative;
  z-index: 0;
  /* カンプノードは 本体 x=10 w=381（右端391）・::before 奥枠は+14で右端405 のブリードで、
     枠線が右へ走り抜けて切れて見えるのが正。クリップの効かない帯でも同じ見た目になるよう、
     ノード値のまま超過分をclip-pathで自己クリップ（右11=391-380。上は奥枠が-9px出るため負で逃がす） */
  width: calc(381 * var(--to-rem));
  padding-block: calc(23 * var(--to-rem)) calc(24 * var(--to-rem));
  padding-inline: calc(22 * var(--to-rem)) calc(41 * var(--to-rem));
  margin-block-start: calc(22 * var(--to-rem));
  margin-inline-start: calc(-10 * var(--to-rem));
  clip-path: inset(calc(-9 * var(--to-rem)) calc(11 * var(--to-rem)) 0 0);
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  /* 前面フェイス（白地）: 奥枠(::before)より上・本文より下に敷く。
   * カードは clip-path でスタッキングコンテキストを張るため ::before(z-index:-1) が
   * 本体の白背景より上に描画され、奥枠の左辺・下辺がカード面を横切ってしまう。
   * 同じ z-index:-1 でツリー順が後の ::after を白フェイスとして重ね、重なる線を隠す */
}
.p-worry__card::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  border: 1px solid var(--color-black);
  transform: translate(calc(14 * var(--to-rem)), calc(-9 * var(--to-rem)));
}
.p-worry__card::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background-color: var(--color-white);
}

.p-worry__list {
  display: flex;
  flex-direction: column;
  gap: calc(9 * var(--to-rem));
  padding: 0;
  margin: 0;
  list-style: none;
}

.p-worry__item {
  position: relative;
  padding-inline-start: calc(23 * var(--to-rem));
  font-size: calc(15 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.22;
  letter-spacing: -0.03em;
}
.p-worry__item::before {
  position: absolute;
  inset-block-start: calc(4 * var(--to-rem));
  inset-inline-start: 0;
  width: calc(15 * var(--to-rem));
  height: calc(14 * var(--to-rem));
  content: "";
  background: url("../images/icon_check.Bvs14hAL.svg") center/contain no-repeat;
}

.p-worry__item-text {
  background-image: linear-gradient(transparent 33%, rgba(0, 0, 0, 0.07) 33% 88%, transparent 88%);
  box-decoration-break: clone;
}

.p-worry__note {
  margin-block-start: calc(22 * var(--to-rem));
  margin-inline: calc(-8 * var(--to-rem));
  font-size: calc(14 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.22;
  text-align: center;
  letter-spacing: -0.03em;
}

.p-worry__note-text {
  padding-block: calc(1 * var(--to-rem));
  padding-inline: calc(2 * var(--to-rem));
  background-color: var(--color-accent);
  box-decoration-break: clone;
}

:root {
  --anime-duration: 0.7s;
  --anime-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
  --anime-distance: calc(32 * var(--to-rem));
  --anime-delay: 0s;
}

@media (prefers-reduced-motion: no-preference) {
  .is-anime-ready [data-anime] {
    transition: opacity var(--anime-duration) var(--anime-easing) var(--anime-delay), transform var(--anime-duration) var(--anime-easing) var(--anime-delay), clip-path var(--anime-duration) var(--anime-easing) var(--anime-delay);
  }
  .is-anime-ready [data-anime=fadein-up] {
    pointer-events: none;
    opacity: 0;
    transform: translateY(var(--anime-distance));
  }
  .is-anime-ready [data-anime=fadein-left] {
    pointer-events: none;
    opacity: 0;
    transform: translateX(calc(-1 * var(--anime-distance)));
  }
  .is-anime-ready [data-anime=fadein] {
    pointer-events: none;
    opacity: 0;
  }
  .is-anime-ready [data-anime=mask] {
    clip-path: inset(0 100% 0 0);
  }
  .is-anime-ready [data-anime=fadein-up].is-inview,
  .is-anime-ready [data-anime=fadein-left].is-inview {
    pointer-events: auto;
    opacity: 1;
    transform: translate(0, 0);
  }
  .is-anime-ready [data-anime=fadein].is-inview {
    pointer-events: auto;
    opacity: 1;
  }
  .is-anime-ready [data-anime=mask].is-inview {
    clip-path: inset(0 0 0 0);
  }
}
:root {
  --clip-triangle-top: polygon(50% 0, 100% 100%, 0 100%);
  --clip-triangle-bottom: polygon(0 0, 100% 0, 50% 100%);
  --clip-triangle-right: polygon(0 0, 100% 50%, 0 100%);
  --clip-triangle-left: polygon(0 50%, 100% 0, 100% 100%);
  --clip-triangle-lower-left: polygon(0 0, 100% 100%, 0 100%);
  --clip-triangle-upper-left: polygon(0 0, 100% 0, 0 100%);
  --clip-triangle-lower-right: polygon(100% 0, 100% 100%, 0 100%);
  --clip-triangle-upper-right: polygon(0 0, 100% 0, 100% 100%);
}

@media (width <= 767px) {
  [data-only-device=md] {
    display: none;
  }
}

@media (width >= 768px) {
  [data-only-device=sm] {
    display: none;
  }
}

html {
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(60 * var(--to-rem));
}

body.is-drawer-open {
  overflow: hidden;
}

/* 動画モーダル表示中（SP は body がスクロールコンテナ。PC は layouts/_l-scroll.scss の .is-locked） */
body.is-modal-open {
  overflow: hidden;
}

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

.u-text__marker {
  background: linear-gradient(transparent 75%, var(--color-orange) 75%);
}

.u-text__inline-block {
  display: inline-block;
}

.u-text__indent {
  padding-inline-start: 1em;
  text-indent: -1em;
}