/* ==========================================================================
   common.css — 全ページ共通（リセット・変数・ヘッダー）
   ========================================================================== */

:root {
  /* color */
  --color-text-primary: #1a1a1a;
  --color-text-inverse: #ffffff;
  --color-brand-primary: #aa3e96;
  --color-brand-gradation: linear-gradient(90deg, #96087c 0%, #c65ab2 100%);
  --color-surface-white: #ffffff;
  --color-surface-primary: #faf7f5;
  --color-brand-primary-white: #f6eff5;
  --color-surface-yellow: #e8c500;
  --color-surface-yellow-light: #ffdc16;
  --color-line-primary: #cac1bb;
  --color-surface-green: #1cad4a;
  --color-surface-green-light: #00c53f;
  --color-text-green: #00852b;
  --color-text-secondary: #494949;
  --color-text-dark: #252825;
  --color-brand-dark: #750260;
  --color-surface-tertiary: #eeeeee;

  /* font */
  --font-en: "Outfit", sans-serif;
  --font-ja: "Noto Sans JP", sans-serif;

  /* layout：中身の最大幅は1500px。画面が1440pxより広いときは、左右の余白が増えて中身が中央に寄る（背景は画面いっぱい） */
  --content-max: 1500px;
  --gutter: max(120px, calc((100vw - var(--content-max)) / 2));
  --content-w: calc(100vw - 2 * var(--gutter)); /* 中身の幅 */

  /* radius / shadow */
  --radius-m: 16px;
  --shadow-header: 0 0 15px rgba(0, 0, 0, 0.1);
  --shadow-card-soft: 0 0 7.5px rgba(0, 0, 0, 0.03);
}

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

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

body {
  margin: 0;
  font-family: var(--font-ja);
  color: var(--color-text-primary);
  background: var(--color-surface-primary);
}

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

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

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

/* ENTRYボタンのグラデ色をtransitionで滑らかに切り替えるための登録 */
@property --entry-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #96087c;
}

@property --entry-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #c65ab2;
}

/* ==========================================================================
   Header
   ========================================================================== */

.l-header {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 100;
  width: min(1398px, calc(100% - 40px));
  transform: translateX(-50%);
  transition: transform 0.4s ease;
}

/* 下スクロールで非表示（js/common.js が付与） */
.l-header.is-hidden {
  transform: translate(-50%, calc(-100% - 32px));
}

/* PCのTOP：FVのアニメーションが終わるまで待機（SPは最初から表示） */
@media (min-width: 1024px) {
  .js .l-header.is-intro {
    transform: translate(-50%, calc(-100% - 32px));
  }
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 8px 40px;
  background: var(--color-surface-white);
  border-radius: 10000px;
  box-shadow: var(--shadow-header);
}

.l-header__logo {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 168px;
  height: 52px;
  padding-top: 5px;
}

.l-header__logo img {
  width: 144.293px;
  height: 39.735px;
}

/* ---- nav ---- */

.l-header__nav {
  align-self: stretch;
}

.l-header__list {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
}

.l-header__item {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
}

.l-header__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 16px 8px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--color-text-primary);
  transition: color 0.25s ease;
}

.l-header__link-arrow {
  width: 10.951px;
  height: 14px;
}

.l-header__item:hover > .l-header__link,
.l-header__item:focus-within > .l-header__link {
  color: var(--color-brand-primary);
}

/* ---- ENTRY ---- */

.l-header__entry {
  height: 100%;
  gap: 8px;
  padding: 8px 40px;
  font-size: 14px;
}

.l-header__entry .c-entry__flame {
  width: 11.5px;
  height: 14.901px;
}

/* ---- dropdown ---- */

.l-header__sub {
  position: absolute;
  top: 100%;
  left: 0;
  /* ヘッダー下端までの余白(8px) + デザイン上の間隔(8px)。ホバーが途切れないよう padding で橋渡し */
  padding-top: 16px;
  width: 224px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.l-header__item:hover > .l-header__sub,
.l-header__item:focus-within > .l-header__sub {
  opacity: 1;
  visibility: visible;
}

.l-header__sub-list {
  overflow: hidden;
  border-radius: var(--radius-m);
  /* 背景色は各項目（.l-header__sub-link）が持つ。ここに白を敷くと、ホバーした項目の角の縁に白い線が出る */
  box-shadow: var(--shadow-header);
  /* 開閉：少し下へスライドしながらフェード */
  transform: translateY(-10px);
  transition: transform 0.25s ease;
}

.l-header__item:hover > .l-header__sub .l-header__sub-list,
.l-header__item:focus-within > .l-header__sub .l-header__sub-list {
  transform: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 項目が上から順に、わずかな時間差でふわっと現れる */
.l-header__sub-list > li {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.l-header__item:hover > .l-header__sub .l-header__sub-list > li,
.l-header__item:focus-within > .l-header__sub .l-header__sub-list > li {
  opacity: 1;
  transform: none;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.l-header__item:hover .l-header__sub-list > li:nth-child(2),
.l-header__item:focus-within .l-header__sub-list > li:nth-child(2) { transition-delay: 0.04s; }
.l-header__item:hover .l-header__sub-list > li:nth-child(3),
.l-header__item:focus-within .l-header__sub-list > li:nth-child(3) { transition-delay: 0.08s; }
.l-header__item:hover .l-header__sub-list > li:nth-child(4),
.l-header__item:focus-within .l-header__sub-list > li:nth-child(4) { transition-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
  .l-header__sub-list,
  .l-header__sub-list > li,
  .l-header__item:hover > .l-header__sub .l-header__sub-list,
  .l-header__item:hover > .l-header__sub .l-header__sub-list > li,
  .l-header__item:focus-within > .l-header__sub .l-header__sub-list,
  .l-header__item:focus-within > .l-header__sub .l-header__sub-list > li {
    transform: none;
    transition: none !important;
  }
}

.l-header__sub-link {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 24px 32px 24px 24px;
  background: var(--color-surface-white);
  border-bottom: 0.2px solid var(--color-line-primary);
  color: var(--color-text-primary);
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* 開く動き（スライド＋時間差）の最中は、動いている項目の上でホバーが入り切りしてチカチカしないよう、
   項目のホバー判定を止めておく。動きが落ち着いてから（0.35秒後）有効にする */
.l-header__sub-link {
  pointer-events: none;
}

.l-header__item:hover > .l-header__sub .l-header__sub-link,
.l-header__item:focus-within > .l-header__sub .l-header__sub-link {
  pointer-events: auto;
  transition: background-color 0.25s ease, color 0.25s ease, pointer-events 0s 0.35s;
}

/* 通常＝紫矢印 / ホバー＝白矢印（重ねて切り替え） */
.l-header__sub-arrow-wrap {
  position: relative;
  flex-shrink: 0;
  width: 9.951px;
  height: 24px;
}

.l-header__sub-arrow-wrap img {
  position: absolute;
  inset: 0;
  transition: opacity 0.25s ease;
}

.l-header__sub-arrow--white {
  opacity: 0;
}

.l-header__sub-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  white-space: nowrap;
}

.l-header__sub-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.7;
}

.l-header__sub-caption {
  font-weight: 400;
  font-size: 11px;
  line-height: 1.55;
}

.l-header__sub-list li:last-child .l-header__sub-link {
  border-bottom: none;
}

.l-header__sub-link:hover,
.l-header__sub-link:focus-visible {
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
}

.l-header__sub-link:hover .l-header__sub-arrow--purple,
.l-header__sub-link:focus-visible .l-header__sub-arrow--purple {
  opacity: 0;
}

.l-header__sub-link:hover .l-header__sub-arrow--white,
.l-header__sub-link:focus-visible .l-header__sub-arrow--white {
  opacity: 1;
}

/* ==========================================================================
   SP（〜1023px）：ハンバーガーメニュー
   ========================================================================== */

/* ハンバーガー／閉じるボタン（PCでは非表示） */
.l-header__toggle {
  position: relative;
  display: none;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-text-primary);
  cursor: pointer;
}

.l-toggle-line {
  position: absolute;
  left: 15px;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-line-primary);
}

.l-toggle-line:nth-child(1) { top: 14px; }
.l-toggle-line:nth-child(2) { top: 20px; }
.l-toggle-line:nth-child(3) { top: 26px; }

/* 閉じるボタンは中央の1本線だけ */
.l-header__toggle--close .l-toggle-line:nth-child(1),
.l-header__toggle--close .l-toggle-line:nth-child(3) {
  opacity: 0;
}

.l-menu {
  display: none;
}

@media (max-width: 1023px) {
  .l-header {
    top: 8px;
    width: calc(100% - 16px);
  }

  .l-header__inner {
    padding: 8px 10px;
  }

  .l-header__nav {
    display: none;
  }

  .l-header__toggle {
    display: block;
  }

  /* ---- overlay ---- */
  .l-menu {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding: 8px 8px 15px;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .l-menu.is-open {
    opacity: 1;
    visibility: visible;
  }

  .l-menu__panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    padding: 32px 20px;
    overflow-y: auto;
    border-radius: 20px;
    background: var(--color-surface-white);
    box-shadow: var(--shadow-header);
    transform: translateY(-12px);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .l-menu.is-open .l-menu__panel {
    transform: none;
  }

  .l-menu__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-shrink: 0;
  }

  .l-menu__logo img {
    width: 168px;
    height: 46.263px;
  }

  .l-menu__body {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
  }

  .l-menu__groups {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .l-menu__group {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .l-menu__title {
    margin: 0;
    font-family: var(--font-en);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-brand-primary);
  }

  .l-menu__link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-primary);
  }

  .l-menu__link img {
    flex-shrink: 0;
    width: 14px;
    height: 11.852px;
  }

  .l-menu__entry {
    flex-shrink: 0;
    gap: 5px;
    height: 78px;
    padding: 8px 20px;
    font-size: 34px;
  }

  .l-menu__entry .c-entry__flame {
    width: 22px;
    height: 28.9px;
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .l-menu,
  .l-menu__panel {
    transition: none;
  }
}

/* ==========================================================================
   CTA + Footer
   ========================================================================== */

.l-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 200px;
  padding: 263px 20px 40px;
  background: url("../images/common/cta-bg.jpg") center / cover no-repeat;
  color: var(--color-text-inverse);
}

/* 背景写真の上に黒80%（multiply） */
.l-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.l-cta > * {
  position: relative;
}

.l-cta__wave {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 63px;
}

.l-cta__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.l-cta__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.l-cta__title img {
  width: 640px;
  max-width: 100%;
  height: auto;
}

.l-cta__lead {
  margin: 0;
  font-family: "Zen Kaku Gothic New", var(--font-ja);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-inverse);
}

.l-cta__btn {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 2px 2px 2px 24px;
  border-radius: 4px;
  background: var(--color-surface-white);
  color: var(--color-text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ホバー：背景と文字の色を入れ替える（白⇄紫） */
.l-cta__btn:hover,
.l-cta__btn:focus-visible {
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
}

.l-cta__btn-icon {
  position: relative;
  width: 56px;
  height: 56px;
}

.l-cta__btn-icon img {
  position: absolute;
  inset: 0;
  transition: opacity 0.3s ease;
}

.l-cta__btn-icon-hover {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* PC：矢印の四角を少しだけ左に置いておき、ホバーで色反転しながら右へ動く */
@media (min-width: 1024px) {
  .l-cta__btn-icon {
    transform: translateX(-3px);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .l-cta__btn:hover .l-cta__btn-icon,
  .l-cta__btn:focus-visible .l-cta__btn-icon {
    transform: none;
  }
}

.l-cta__btn:hover .l-cta__btn-icon-hover,
.l-cta__btn:focus-visible .l-cta__btn-icon-hover {
  opacity: 1;
}

.l-cta__btn-label {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* ---- footer card ---- */

.l-footer {
  display: flex;
  flex-direction: column;
  gap: 44px;
  width: 100%;
  max-width: 1398px;
  padding: 40px 72px;
  border-radius: var(--radius-m);
  background: var(--color-surface-primary);
  color: var(--color-text-secondary);
}

.l-footer__main {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
}

.l-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 303px;
  flex-shrink: 0;
}

.l-footer__logo {
  width: 303.161px;
  height: 83.483px;
}

/* ---- ENTRYボタン共通（ホバーで炎がメッシュ状に波打つ。色は変えない） ---- */

.c-entry {
  --entry-from: #96087c;
  --entry-to: #c65ab2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100000px;
  background: linear-gradient(90deg, var(--entry-from), var(--entry-to));
  transition: --entry-from 0.3s ease, --entry-to 0.3s ease;
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--color-text-inverse);
}

/* ホバー：グラデの色相・彩度は保ったまま、明度(L)を8%だけ下げる */
.c-entry:hover,
.c-entry:focus-visible {
  --entry-from: #6f065c;
  --entry-to: #b83fa1;
}

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

/* 炎の波打ちは js/common.js が <path> を毎フレーム変形して実現 */
.c-entry__flame {
  flex-shrink: 0;
  overflow: visible;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ホバーで炎を1.2倍に */
.c-entry:hover .c-entry__flame,
.c-entry:focus-visible .c-entry__flame {
  transform: scale(1.2);
}

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

.l-footer__entry {
  gap: 8px;
  height: 85px;
  padding: 8px 40px;
  font-size: 34px;
}

.l-footer__entry .c-entry__flame {
  width: 19.839px;
  height: 25.877px;
}

.l-footer__nav {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding-top: 20px;
}

.l-footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.l-footer__title {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.l-footer__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.l-footer__link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.l-footer__link-arrow {
  position: relative;
  flex-shrink: 0;
  width: 8.475px;
  height: 7.175px;
}

.l-footer__link-arrow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.l-footer__link-arrow-hover {
  opacity: 0;
}

/* ホバー：文字と矢印を brand/primary に（薄くはしない） */
.l-footer__link:hover,
.l-footer__link:focus-visible {
  color: var(--color-brand-primary);
}

.l-footer__link:hover .l-footer__link-arrow-hover,
.l-footer__link:focus-visible .l-footer__link-arrow-hover {
  opacity: 1;
}

.l-footer__sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 0.5px solid var(--color-line-primary);
}

.l-footer__copy {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.l-footer__sub-list {
  display: flex;
  align-items: center;
  gap: 32px;
}

.l-footer__sub-list a {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.l-footer__sub-list a:hover,
.l-footer__sub-list a:focus-visible {
  opacity: 0.5;
}

/* ==========================================================================
   CTA + Footer（SP：〜1023px）
   ========================================================================== */

@media (max-width: 1023px) {
  .l-cta {
    gap: 180px;
    padding: calc(100vw * 63 / 1440 + 180px) 20px 20px;
  }

  .l-cta__wave {
    height: auto;
    aspect-ratio: 1440 / 63;
  }

  .l-cta__title img {
    width: 328px;
  }

  .l-footer {
    max-width: none;
    padding: 40px 24px;
  }

  .l-footer__main {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 24px;
  }

  .l-footer__brand {
    display: contents;
  }

  .l-footer__brand > a:first-child {
    order: 0;
    align-self: center;
  }

  .l-footer__logo {
    width: 288px;
    height: 79.308px;
  }

  .l-footer__nav {
    order: 1;
    flex-direction: column;
    gap: 40px;
    padding-top: 20px;
  }

  .l-footer__entry {
    order: 2;
    gap: 5px;
    height: 78px;
    padding: 8px 20px;
  }

  .l-footer__entry .c-entry__flame {
    width: 22px;
    height: 29px;
  }

  .l-footer__sub {
    flex-direction: column;
    align-items: center;
    gap: 11px;
  }

  .l-footer__sub-list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 24px;
  }
}

/* ==========================================================================
   Page Title（下層ページ共通のタイトルセクション）
   ========================================================================== */

.l-pagetitle {
  position: relative;
}

.l-pagetitle__head {
  position: relative;
  padding: 170px var(--gutter) 0;
  background: var(--color-brand-gradation);
  color: var(--color-text-inverse);
}

/* 右上のドット装飾 */
.l-pagetitle__dots {
  position: absolute;
  top: 120px;
  right: 0;
  width: 291.95px;
  height: 73.763px;
}

.l-pagetitle__title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.l-pagetitle__en {
  display: flex;
  align-items: flex-start;
  margin: 0;
}

.l-pagetitle__en-text {
  margin-right: -14px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 120px;
  line-height: 0.8;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.l-pagetitle__flame {
  flex-shrink: 0;
  width: 25.3px;
  height: 32.783px;
}

.l-pagetitle__ja {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 8px;
  margin: 0;
  font-weight: 700;
  font-size: 22px;
  line-height: normal;
}

.l-pagetitle__ja img {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}

/* 下端の波（グラデ塗りなので、上のグラデとつながる） */
.l-pagetitle__wave {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 154;
  margin-top: -1px;
  margin-bottom: -1px; /* 端数の高さで生じる細い隙間を、上下とも1pxの重なりで消す */
}

@media (max-width: 1023px) {
  .l-pagetitle__head {
    padding: 130px 20px 20px;
  }

  .l-pagetitle__dots {
    top: 86px;
    width: 119px;
    height: 30px;
  }

  /* 長い英字（CROSS TALK / INTERVIEW）が小さい画面ではみ出さないよう、幅に合わせて縮める。
     --en-ratio ＝ 英字の幅 ÷ フォントサイズ（長いタイトルだけHTMLで指定） */
  .l-pagetitle__en-text {
    margin-right: -6px;
    font-size: min(60px, calc((100vw - 47px) / var(--en-ratio, 5.2)));
    letter-spacing: 0.02em;
  }

  .l-pagetitle__flame {
    width: 13.033px;
    height: 16.887px;
  }

  .l-pagetitle__ja {
    gap: 8px;
    padding-left: 3px;
    font-size: 12px;
  }

  .l-pagetitle__ja img {
    width: 7px;
    height: 7px;
  }
}

/* ==========================================================================
   Section（下層ページの本文セクション共通）
   ========================================================================== */

.l-section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 72px;
  padding: 200px var(--gutter);
  background: var(--color-surface-primary);
}

/* 右上のドット装飾 */
.l-section__dots {
  position: absolute;
  top: 176px;
  right: 39px;
  width: 291.95px;
  height: 73.763px;
  pointer-events: none;
}

/* ---- セクションタイトル（黒文字版） ---- */

.c-sectiontitle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.c-sectiontitle__en {
  display: flex;
  align-items: flex-start;
  margin: 0;
}

.c-sectiontitle__en-text {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 80px;
  line-height: 0.8;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--color-text-primary);
}

/* 英字が2語のとき：PCは1行、SPは2行（最後の語の右上に炎） */
.c-sectiontitle__line--last {
  display: inline-flex;
  align-items: flex-start;
  vertical-align: top;
}

.c-sectiontitle__flame {
  flex-shrink: 0;
  width: 19.933px;
  height: 25.829px;
  margin-left: -14px;
}

.c-sectiontitle__ja {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 8px;
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  color: var(--color-text-primary);
}

.c-sectiontitle__ja img {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
}

/* ---- 募集要項テーブル ---- */

/* 表の右側にイラストを置く（PC）。イラストは、表と同じ高さにそろえ、間は十分に空ける。SPは、表のあとに中央に置く */
.c-speclayout {
  display: flex;
  align-items: stretch;
  gap: 96px;
}

.c-speclayout .c-spec {
  flex: 1;
  min-width: 0;
}

.c-speclayout__illust {
  flex-shrink: 0;
  align-self: stretch;
  width: 320px;
  height: auto;
  border-radius: var(--radius-m);
  object-fit: cover;
}

.c-spec {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.c-spec__row {
  display: flex;
  align-items: stretch;
  gap: 16px;
}

.c-spec__label {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 143px;
  padding: 8px;
  border-radius: 4px;
  background: var(--color-text-primary);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  color: var(--color-text-inverse);
}

.c-spec__value {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-primary);
}

/* ==========================================================================
   Fade Up（スクロールで下からふわっと現れる）
   .js-fadeup を付けた要素が画面に入ると .is-inview が付く（js/common.js）。
   data-delay="0.2"（秒）で時間差も付けられる。
   ========================================================================== */

.js .js-fadeup {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--fade-delay, 0s);
}

.js .js-fadeup.is-inview {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .js-fadeup {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Section（SP：〜1023px）
   ========================================================================== */

@media (max-width: 1023px) {
  .l-section {
    gap: 40px;
    padding: 100px 20px;
  }

  .l-section__dots {
    top: 53.29px;
    right: 2px;
    width: 119px;
    height: 30px;
  }

  .c-sectiontitle__en-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: var(--en-size, 60px);
  }

  .c-sectiontitle__line--last {
    align-self: flex-start;
  }

  .c-sectiontitle__flame {
    width: 13.033px;
    height: 16.887px;
    margin-left: -6px;
  }

  .c-sectiontitle__ja {
    gap: 8px;
    padding-left: 3px;
    font-size: 12px;
  }

  .c-speclayout {
    flex-direction: column;
    gap: 32px;
  }

  /* タイトルの直下に、幅100%の4:3で表示 */
  .c-speclayout__illust {
    order: -1;
    align-self: stretch;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-position: 50% 28%;
  }

  /* 表：ラベルが本文の上に帯として載る */
  .c-spec {
    gap: 32px;
  }

  .c-spec__row {
    flex-direction: column;
    gap: 8px;
  }

  .c-spec__label {
    justify-content: flex-start;
    width: 100%;
    padding: 4px 12px;
    border-left: 4px solid var(--color-brand-primary);
    border-radius: 0;
    background: var(--color-brand-primary-white);
    text-align: left;
    color: var(--color-text-primary);
  }

  .c-spec__value {
    padding: 0;
  }
}

/* ==========================================================================
   Wave（セクション間の波。黄色グラデ塗りで、下に続く黄色セクションとつながる）
   ========================================================================== */

.l-wave {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 208.5;
  margin-top: -1px;
  margin-bottom: -1px; /* 端数の高さで生じる細い隙間を、上下とも1pxの重なりで消す */
}

/* ==========================================================================
   Flow（選考フロー）
   ========================================================================== */

.l-section--flow {
  gap: 72px;
  padding: 40px var(--gutter) 140px;
  overflow: hidden;
  background: linear-gradient(to left, var(--color-surface-yellow), var(--color-surface-yellow-light));
}

.l-section__dots--flow-top {
  top: 54.5px;
  right: -26px;
}

.l-section__dots--flow-bottom {
  top: auto;
  right: auto;
  bottom: 0;
  left: 2px;
}

.c-flow {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-flow__list {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-flow__item {
  display: flex;
  flex: 1;
  min-width: 0;
}

.c-flow__arrow {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.c-flow__arrow img {
  width: 9.333px;
  height: 10.316px;
}

.c-flow__card {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  min-width: 0;
  padding: 24px 24px 32px;
  border-radius: var(--radius-m);
  background: var(--color-surface-primary);
}

/* STEP 01 のラベル（カードの上に少しはみ出す） */
.c-flow__step {
  position: absolute;
  top: -24.5px;
  left: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.c-flow__step-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px;
  border-radius: 4px 4px 4px 0;
  background: var(--color-text-primary);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.55;
  white-space: nowrap;
  color: var(--color-text-inverse);
}

.c-flow__step img {
  display: block;
  width: 7px;
  height: 5.588px;
}

.c-flow__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 83px;
  height: 83px;
  border-radius: 50%;
  background: var(--color-surface-yellow);
}

.c-flow__icon-img--mypage,
.c-flow__icon-img--document,
.c-flow__icon-img--interview1,
.c-flow__icon-img--interview-final {
  width: 43px;
  height: 43px;
}

.c-flow__icon-img--entry {
  width: 34.938px;
  height: 34.938px;
}

.c-flow__icon-img--offer {
  width: 47.031px;
  height: 37.625px;
}

.c-flow__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.c-flow__date {
  margin: 0;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.c-flow__line img {
  display: block;
  width: 12px;
  height: 2px;
}

.c-flow__title {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-primary);
}

.c-flow__note {
  margin: 0;
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  padding-left: 1em; /* 「※」の幅だけ、2行目を字下げする（ぶら下げインデント） */
  text-indent: -1em;
  color: var(--color-text-secondary);
}

.c-flow__caption {
  margin: 0;
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: right;
  color: var(--color-text-secondary);
}

@media (max-width: 1023px) {
  .l-section--flow {
    gap: 40px;
    padding: 100px 20px;
  }

  .l-section__dots--flow-bottom {
    top: 783.5px;
    bottom: auto;
  }

  .c-flow__list {
    flex-direction: column;
    align-items: stretch;
  }

  .c-flow__arrow {
    justify-content: center;
    height: 9.333px;
  }

  .c-flow__arrow img {
    transform: rotate(90deg);
  }

  .c-flow__card {
    flex-direction: row;
    gap: 16px;
    padding: 24px 16px 16px;
  }

  .c-flow__step {
    top: -7px;
    left: 16.44px;
  }

  .c-flow__step-label {
    font-size: 10px;
    line-height: 1.5;
  }

  .c-flow__icon {
    width: 63px;
    height: 63px;
  }

  .c-flow__icon-img--mypage,
  .c-flow__icon-img--document,
  .c-flow__icon-img--interview1,
  .c-flow__icon-img--interview-final {
    width: 32.639px;
    height: 32.639px;
  }

  .c-flow__icon-img--entry {
    width: 26.519px;
    height: 26.519px;
  }

  .c-flow__icon-img--offer {
    width: 35.698px;
    height: 28.559px;
  }

  .c-flow__body {
    flex: 1;
    gap: 4px;
    min-width: 0;
    width: auto;
  }

  .c-flow__line {
    display: none;
  }

  .c-flow__title {
    font-size: 14px;
  }
}

/* ==========================================================================
   Page Title アニメーション（ページ表示時）
   英字が左から右へクリップパスで現れ、炎がぽっと灯り、日本語が続いて現れる
   ========================================================================== */

@keyframes pagetitle-reveal {
  from {
    clip-path: inset(-20% 100% -20% 0);
    transform: translateX(-24px);
  }
  to {
    clip-path: inset(-20% -2% -20% 0);
    transform: none;
  }
}

@keyframes pagetitle-ja-reveal {
  from {
    clip-path: inset(-20% 100% -20% 0);
    transform: translateX(-12px);
  }
  to {
    clip-path: inset(-20% -2% -20% 0);
    transform: none;
  }
}

@keyframes pagetitle-flame {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.3);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.15);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pagetitle-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.l-pagetitle__en-text {
  animation: pagetitle-reveal 0.8s cubic-bezier(0.77, 0, 0.18, 1) 0.1s both;
}

.l-pagetitle__flame {
  transform-origin: 50% 100%;
  animation: pagetitle-flame 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both;
}

.l-pagetitle__ja {
  animation: pagetitle-ja-reveal 0.6s cubic-bezier(0.77, 0, 0.18, 1) 0.4s both;
}

.l-pagetitle__dots {
  animation: pagetitle-fade 1s ease 0.3s both;
}

@media (prefers-reduced-motion: reduce) {
  .l-pagetitle__en-text,
  .l-pagetitle__flame,
  .l-pagetitle__ja,
  .l-pagetitle__dots {
    animation: none;
  }
}

/* ==========================================================================
   Section Title アニメーション（スクロールで画面に入ったとき）
   ページタイトルと同じ：英字がクリップパスで左から右へ → 炎がぽっと灯る → 日本語が続く
   .c-sectiontitle に .js-reveal を付けると、画面に入った時点で .is-inview が付く（js/common.js）
   ========================================================================== */

.js .c-sectiontitle.js-reveal .c-sectiontitle__en-text,
.js .c-sectiontitle.js-reveal .c-sectiontitle__ja {
  clip-path: inset(-20% 100% -20% 0);
}

.js .c-sectiontitle.js-reveal .c-sectiontitle__flame {
  opacity: 0;
}

.js .c-sectiontitle.js-reveal.is-inview .c-sectiontitle__en-text {
  animation: pagetitle-reveal 0.8s cubic-bezier(0.77, 0, 0.18, 1) 0.05s both;
}

.js .c-sectiontitle.js-reveal.is-inview .c-sectiontitle__ja {
  animation: pagetitle-ja-reveal 0.6s cubic-bezier(0.77, 0, 0.18, 1) 0.35s both;
}

.js .c-sectiontitle.js-reveal.is-inview .c-sectiontitle__flame {
  transform-origin: 50% 100%;
  animation: pagetitle-flame 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both;
}

@media (prefers-reduced-motion: reduce) {
  .js .c-sectiontitle.js-reveal .c-sectiontitle__en-text,
  .js .c-sectiontitle.js-reveal .c-sectiontitle__ja {
    clip-path: none;
  }

  .js .c-sectiontitle.js-reveal .c-sectiontitle__flame {
    opacity: 1;
  }

  .js .c-sectiontitle.js-reveal.is-inview .c-sectiontitle__en-text,
  .js .c-sectiontitle.js-reveal.is-inview .c-sectiontitle__ja,
  .js .c-sectiontitle.js-reveal.is-inview .c-sectiontitle__flame {
    animation: none;
  }
}

/* ==========================================================================
   Pop（ぽよんと現れる）。選考フローのカード・矢印用
   .js-pop が画面に入ると .is-inview が付き、小さい状態から少し行き過ぎて定着する。
   --i（番号）× 0.12秒で時間差（PCのみ。SPは縦並びなのでそれぞれ画面に入った時点）
   ========================================================================== */

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.85);
  }
  60% {
    opacity: 1;
    transform: translateY(-1px) scale(1.02);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.js .js-pop {
  opacity: 0;
  transform-origin: 50% 60%;
}

.js .js-pop.is-inview {
  animation: pop-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (min-width: 1024px) {
  .js .js-pop.is-inview {
    animation-delay: calc(var(--i, 0) * 0.12s);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .js-pop {
    opacity: 1;
  }

  .js .js-pop.is-inview {
    animation: none;
  }
}

/* ==========================================================================
   Company：ABOUT US
   ========================================================================== */

.l-section--about {
  padding-bottom: 100px;
}

.c-about {
  display: flex;
  align-items: flex-start;
  gap: 100px;
}

/* 本文は残りの幅いっぱい（イラスト361px ＋ 余白100px を除いた幅） */
.c-about__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
  color: var(--color-text-primary);
}

.c-about__lead {
  margin: 0;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.c-about__text {
  font-size: 16px;
  line-height: 1.7;
}

.c-about__text p {
  margin: 0 0 1.7em;
}

.c-about__text p:last-child {
  margin-bottom: 0;
}

.c-about__image {
  flex-shrink: 0;
  width: 361px;
  height: 601px;
  border-radius: var(--radius-m);
  object-fit: cover;
}

@media (max-width: 1023px) {
  .l-section__dots--about {
    top: 34.29px;
    right: 0;
  }

  .c-about {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 32px;
  }

  .c-about__body {
    flex: none;
    width: 100%;
  }

  .c-about__lead {
    font-size: 31px;
    letter-spacing: 0.01em;
  }

  .c-about__image {
    width: 100%;
    height: 341px;
  }
}

/* ==========================================================================
   Company：MVV
   ========================================================================== */

.l-section--mvv {
  padding-top: 100px;
  padding-bottom: 100px;
}

.c-mvv {
  display: flex;
  flex-direction: column;
  gap: 160px;
}

.c-mvv__block {
  display: flex;
  flex-direction: column;
}

.c-mvv__block--mission {
  gap: 56px;
}

.c-mvv__block--vision {
  gap: 40px;
}

.c-mvv__block--value {
  gap: 32px;
}

/* ---- タブ見出し（MISSION / VISION / VALUE） ---- */

.c-mvv__tab {
  display: flex;
  align-items: stretch;
  gap: 24px;
  min-height: 36px;
  border-bottom: 1px solid var(--color-brand-primary);
}

.c-mvv__tab-label {
  display: flex;
  align-items: center;
  padding: 4px 38px;
  border-radius: 4px 4px 0 0;
  background: var(--color-brand-primary);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-inverse);
}

.c-mvv__tab-desc {
  display: flex;
  align-items: center;
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* ---- MISSION：黒い帯の大見出し ---- */

.c-mvv__mission {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin: 0;
}

.c-mvv__chunk {
  display: inline;
}

.c-mvv__box {
  position: relative;
  display: block;
  padding: 0 8px;
  font-weight: 700;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
  color: var(--color-text-inverse);
}

/* 黒い帯は疑似要素に分けて、文字とは別々にアニメーションさせる */
.c-mvv__box::before,
.c-mvv__chunk::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-text-primary);
}

.c-mvv__chunk::before {
  content: none;
}

.c-mvv__text {
  position: relative;
}

/* 2本目の文字：PCは1本の連続した文字としてまとめてクリップ（SPは各行ごと） */
.c-mvv__texts {
  position: relative;
  display: block;
}

/* ---- VISION ---- */

.c-mvv__vision-head {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.c-mvv__vision {
  margin: 0;
  font-weight: 700;
  font-size: 31px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
}

.c-narrative {
  display: flex;
  flex-direction: column;
}

.c-narrative__toggle {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-line-primary);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.c-narrative__toggle::-webkit-details-marker {
  display: none;
}

/* ホバー中・開いている間：文字・矢印・下線をすべて brand/primary に */
.c-narrative[open]:not(.is-closing) > .c-narrative__toggle,
.c-narrative__toggle:hover,
.c-narrative__toggle:focus-visible {
  border-bottom-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
}

/* 矢印（currentColorなので文字と同じ色になる）：閉じているときは下向き、開いているときは上向き */
.c-narrative__arrow {
  width: 5.526px;
  height: 5px;
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.c-narrative[open]:not(.is-closing) .c-narrative__arrow {
  transform: none;
}

.c-narrative__text {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-primary);
}

.c-narrative__text p {
  margin: 0 0 1.7em;
}

.c-narrative__text p:last-child {
  margin-bottom: 0;
}

/* ---- VALUE：カード ---- */

.c-value {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-value__card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  border-radius: var(--radius-m);
  background: var(--color-surface-white);
}

.c-value__head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.c-value__heading {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 58px;
}

.c-value__title {
  margin: 0;
  font-weight: 700;
  font-size: 23px;
  line-height: 1.35;
  color: var(--color-text-primary);
}

.c-value__en {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.c-value__flame {
  flex-shrink: 0;
  width: 12.267px;
  height: 15.895px;
}

.c-value__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-primary);
}

.c-value__br {
  display: none;
}

@media (max-width: 1023px) {
  .l-section__dots--mvv {
    top: 61.29px;
    right: 0;
  }

  .l-section--mvv {
    gap: 72px;
  }

  .c-mvv {
    gap: 100px;
  }

  .c-mvv__block--mission {
    gap: 32px;
  }

  .c-mvv__block--value {
    gap: 32px;
  }

  .c-mvv__tab {
    gap: 8px;
    min-height: 0;
  }

  .c-mvv__tab-label {
    padding: 4px 16px;
    font-size: 12px;
    line-height: 1.55;
  }

  .c-mvv__tab-desc {
    flex: 1;
    padding: 4px 0;
    font-size: 12px;
    line-height: 1.6;
  }

  .c-mvv__mission {
    gap: 8px;
  }

  .c-mvv__box {
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }

  /* 2つ目の帯は、SPでは「ひとを救い、」「世界を変えてゆく。」の2本に分かれる */
  .c-mvv__box--split {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 0;
  }

  .c-mvv__box--split::before {
    content: none;
  }

  .c-mvv__chunk {
    position: relative;
    padding: 0 8px;
  }

  .c-mvv__chunk::before {
    content: "";
  }

  .c-mvv__vision-head {
    gap: 32px;
  }

  .c-mvv__vision {
    font-size: 20px;
    letter-spacing: 0.01em;
  }

  .c-narrative__text {
    font-size: 12px;
    line-height: 1.6;
  }

  .c-narrative__text p {
    margin-bottom: 1.6em;
  }

  .c-value {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .c-value__card {
    gap: 14px;
    padding: 24px;
  }

  .c-value__head {
    gap: 16px;
  }

  .c-value__heading {
    gap: 2px;
    min-height: 0;
  }

  .c-value__title {
    font-size: 18px;
    line-height: 1.4;
  }

  .c-value__body {
    font-size: 12px;
    line-height: 1.6;
  }

  .c-value__br {
    display: inline;
  }
}

/* ==========================================================================
   MISSION アニメーション
   ① 黒い帯が左→右へ伸びる（transform: scaleX＝GPU描画でチラつかない）
   ② すぐ後に白文字が左→右へクリップで現れる
   ========================================================================== */

@keyframes mvv-bg-reveal {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes mvv-text-reveal {
  from { clip-path: inset(-10% 100% -10% 0); }
  to   { clip-path: inset(-10% -2% -10% 0); }
}

.c-mvv__box::before,
.c-mvv__chunk::before {
  transform-origin: 0 50%;
}

/* 表示前：帯も文字も隠しておく */
.js .c-mvv__mission.js-reveal .c-mvv__box::before,
.js .c-mvv__mission.js-reveal .c-mvv__chunk::before {
  transform: scaleX(0);
}

.js .c-mvv__mission.js-reveal .c-mvv__box:first-child .c-mvv__text,
.js .c-mvv__mission.js-reveal .c-mvv__texts {
  clip-path: inset(-10% 100% -10% 0);
}

/* 1本目 */
.js .c-mvv__mission.is-inview .c-mvv__box:first-child::before {
  animation: mvv-bg-reveal 0.45s cubic-bezier(0.77, 0, 0.18, 1) 0.05s both;
}

.js .c-mvv__mission.is-inview .c-mvv__box:first-child .c-mvv__text {
  animation: mvv-text-reveal 0.35s cubic-bezier(0.77, 0, 0.18, 1) 0.3s both;
}

/* 2本目（PCは1本の長い帯。文字も1本の連続したクリップで、帯の少し後ろを追いかける） */
.js .c-mvv__mission.is-inview .c-mvv__box--split::before {
  animation: mvv-bg-reveal 0.65s cubic-bezier(0.65, 0, 0.35, 1) 0.15s both;
}

.js .c-mvv__mission.is-inview .c-mvv__texts {
  animation: mvv-text-reveal 0.65s cubic-bezier(0.65, 0, 0.35, 1) 0.4s both;
}

/* SP：帯は2本に分かれるので、それぞれ順番に */
@media (max-width: 1023px) {
  .c-mvv__texts {
    display: contents;
  }

  .js .c-mvv__mission.js-reveal .c-mvv__texts {
    clip-path: none;
  }

  .js .c-mvv__mission.is-inview .c-mvv__texts {
    animation: none;
  }

  .js .c-mvv__mission.js-reveal .c-mvv__chunk .c-mvv__text {
    clip-path: inset(-10% 100% -10% 0);
  }

  .js .c-mvv__mission.is-inview .c-mvv__chunk:nth-child(1)::before {
    animation: mvv-bg-reveal 0.4s cubic-bezier(0.77, 0, 0.18, 1) 0.15s both;
  }

  .js .c-mvv__mission.is-inview .c-mvv__chunk:nth-child(2)::before {
    animation: mvv-bg-reveal 0.45s cubic-bezier(0.77, 0, 0.18, 1) 0.25s both;
  }

  .js .c-mvv__mission.is-inview .c-mvv__chunk:nth-child(1) .c-mvv__text {
    animation: mvv-text-reveal 0.35s cubic-bezier(0.77, 0, 0.18, 1) 0.4s both;
  }

  .js .c-mvv__mission.is-inview .c-mvv__chunk:nth-child(2) .c-mvv__text {
    animation: mvv-text-reveal 0.4s cubic-bezier(0.77, 0, 0.18, 1) 0.5s both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .c-mvv__mission.js-reveal .c-mvv__box::before,
  .js .c-mvv__mission.js-reveal .c-mvv__chunk::before {
    transform: none;
  }

  .js .c-mvv__mission.js-reveal .c-mvv__text,
  .js .c-mvv__mission.js-reveal .c-mvv__texts {
    clip-path: none;
  }

  .js .c-mvv__mission.is-inview .c-mvv__box::before,
  .js .c-mvv__mission.is-inview .c-mvv__chunk::before,
  .js .c-mvv__mission.is-inview .c-mvv__text,
  .js .c-mvv__mission.is-inview .c-mvv__texts {
    animation: none;
  }
}

/* VALUEカード：4枚が同時に、それぞれぽよんと現れる（親の .c-value が画面に入った時点で一斉に） */
.js .c-value.js-reveal .c-value__card {
  opacity: 0;
  transform-origin: 50% 60%;
}

.js .c-value.js-reveal.is-inview .c-value__card {
  animation: pop-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .js .c-value.js-reveal .c-value__card {
    opacity: 1;
  }

  .js .c-value.js-reveal.is-inview .c-value__card {
    animation: none;
  }
}

/* ==========================================================================
   Company：DATA（紫背景・白いカード）
   ========================================================================== */

.l-section--data {
  padding-top: 200px;
  padding-bottom: 140px;
  background: var(--color-brand-primary);
}

.l-section__dots--data {
  top: 119.9px;
  right: 53px;
}

/* 白文字版のセクションタイトル */
.c-sectiontitle--light .c-sectiontitle__en-text,
.c-sectiontitle--light .c-sectiontitle__ja {
  color: var(--color-text-inverse);
}

.c-data {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-data__rows {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.c-data__row {
  display: flex;
  align-items: stretch;
  gap: 32px;
}

.c-data__card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
  padding: 40px 32px;
  border-radius: var(--radius-m);
  background: var(--color-surface-white);
}

/* ---- タグ（黒いラベル） ---- */

.c-data__tag {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.c-data__tag-label {
  display: block;
  padding: 4px 16px;
  border-radius: 4px 4px 4px 0;
  background: var(--color-text-primary);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.7;
  white-space: nowrap;
  color: var(--color-text-inverse);
}

.c-data__tag-tail {
  display: block;
  width: 7px;
  height: 5.588px;
}

/* ---- 構成 ---- */

.c-data__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.c-data__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.c-data__body--time {
  gap: 32px;
}

.c-data__body--time .c-data__tag {
  margin-bottom: -16px;
}

.c-data__figure {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--color-brand-primary);
}

.c-data__caption {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.7;
  white-space: nowrap;
}

.c-data__caption--hidden {
  opacity: 0;
}

/* ---- 大きな数字 ---- */

.c-data__num {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
}

.c-data__num-value {
  font-family: var(--font-en);
  line-height: 0.8;
}

.c-data__num-value--xxl { font-size: 205.144px; }
.c-data__num-value--xl  { font-size: 154.444px; }
.c-data__num-value--l   { font-size: 97.784px; }
.c-data__num-value--m   { font-size: 76.617px; }

.c-data__num-unit {
  font-size: 44.789px;
  line-height: 1;
}

.c-data__num-unit--s {
  font-family: var(--font-en);
  font-size: 28.357px;
}

.c-data__num-note {
  font-weight: 400;
  font-size: 8.433px;
  line-height: 1.6;
}

/* ---- アイコン ---- */

.c-data__icon {
  flex-shrink: 0;
}

.c-data__icon--books  { width: 165px; height: 165px; }
.c-data__icon--people { width: 179.902px; height: 179.902px; }
.c-data__icon--walk   { width: 137.314px; height: 163.206px; }
.c-data__icon--clock  { width: 141.375px; height: 141.375px; }

/* ---- 小さな数字（コミックス 130点 ／ …） ---- */

.c-data__stats {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 24px;
}

.c-data__stats--center {
  justify-content: center;
  gap: 24px;
}

.c-data__stat {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}

.c-data__stat-label {
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-primary);
}

.c-data__stat-num {
  display: flex;
  align-items: baseline;
  font-weight: 700;
  color: var(--color-text-secondary);
}

.c-data__stat-value {
  font-family: var(--font-en);
  font-size: 30px;
  line-height: 0.8;
}

.c-data__stat-unit {
  font-size: 11px;
  line-height: 1;
}

/* 区切りの斜線 */
.c-data__slash {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 23.902px;
}

.c-data__slash::before {
  content: "";
  width: 28.219px;
  height: 1px;
  background: var(--color-line-primary);
  transform: rotate(122.11deg);
}

/* ---- 男女比 ---- */

.c-data__card--gender {
  flex: 1;
}

.c-data__body--gender {
  gap: 24px;
}

.c-data__gender {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
}

.c-data__people {
  position: relative;
  width: 185.589px;
  height: 244.198px;
}

.c-data__people-male {
  position: absolute;
  top: 0;
  left: 0;
  width: 81.399px;
  height: 242.801px;
}

.c-data__people-female {
  position: absolute;
  top: 9.77px;
  left: 81.4px;
  width: 104.19px;
  height: 234.428px;
}

/* ---- 年代（横棒グラフ） ---- */

.c-data__card--age {
  flex: 1 1 0;
  gap: 16px;
  max-width: 376px; /* 年代カードの最大幅。画面が広くても、これ以上広がらない */
}

/* PC幅が約1420px未満のときは、カードが1段に2枚並ぶには狭く、数字とアイコンがカードからはみ出す。縦に並べて、1枚の幅を確保する */
@media (min-width: 1024px) and (max-width: 1419px) {
  .c-data__row {
    flex-direction: column;
  }

  .c-data__card--age {
    max-width: none;
  }
}

.c-age {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-age__row {
  display: flex;
  align-items: center;
  gap: 17px;
}

.c-age__label {
  flex-shrink: 0;
  width: 68px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.7;
  text-align: right;
  white-space: nowrap;
  color: var(--color-text-secondary);
}

.c-age__area {
  display: flex;
  flex: 1;
  min-width: 0;
}

/* 20代＝バーエリアの幅いっぱい。他は人数の比（19名を100%）で相対的に伸びる */
.c-age__bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  width: var(--r);
  min-width: 35px;
  padding: 16px 8px;
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  background: #dbcdd8;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.55;
  white-space: nowrap;
  color: var(--color-text-inverse);
}

.c-age__bar--main {
  background: var(--color-brand-primary);
}

.c-age__pct {
  flex-shrink: 0;
  width: 32px;
  margin-left: -13px;
  font-family: var(--font-en);
  font-size: 12px;
  line-height: 1.55;
  white-space: nowrap;
  color: var(--color-text-secondary);
}

/* ---- 注釈 ---- */

.c-data__note {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  text-align: right;
  color: var(--color-text-inverse);
}

/* ---- SP（〜1023px）---- */

@media (max-width: 1023px) {
  .l-section--data {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .l-section__dots--data {
    top: 53px;
    right: 0;
  }

  .c-data__row {
    flex-direction: column;
    gap: 16px;
  }

  .c-data__rows {
    gap: 16px;
  }

  .c-data__card {
    padding: 24px 20px;
  }

  .c-data__card--gender {
    flex: 1;
  }

  .c-data__card--age {
    flex: 1;
    max-width: none;
  }

  .c-data__num-value--xxl { font-size: 100px; }
  .c-data__num-value--xl  { font-size: 80px; }
  .c-data__num-value--l   { font-size: 52px; }
  .c-data__num-value--m   { font-size: 44px; }

  .c-data__num-unit {
    font-size: 24px;
  }

  .c-data__num-unit--s {
    font-size: 16px;
  }

  .c-data__icon--books,
  .c-data__icon--people,
  .c-data__icon--walk,
  .c-data__icon--clock {
    width: 72px;
    height: auto;
  }

  .c-data__stats {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 0;
  }

  /* 男女比：「男性の数字」「人型」「女性の数字」が1行に収まるよう、数字を画面幅に合わせて小さくする */
  .c-data__gender {
    gap: 8px;
  }

  .c-data__gender .c-data__figure {
    min-width: 0;
  }

  .c-data__gender .c-data__num {
    gap: 4px;
  }

  .c-data__gender .c-data__num-value--l {
    font-size: min(36px, 8.8vw);
  }

  .c-data__gender .c-data__num-unit--s {
    font-size: min(12px, 3.2vw);
  }

  .c-data__people {
    width: 93px;
    height: 122px;
  }

  .c-data__people-male {
    width: 40.7px;
    height: 121.4px;
  }

  .c-data__people-female {
    top: 4.9px;
    left: 40.7px;
    width: 52.1px;
    height: 117.2px;
  }
}

/* 数字ランダム表示：1桁ずつの枠（幅は js/common.js が本来の文字の幅で固定する） */
.c-count__ch {
  display: inline-block;
  text-align: center;
}

/* 止まった桁は、元の字間どおり左揃えにする */
.c-count__ch.is-set {
  text-align: left;
}

/* 大きい数字の下の小さい内訳：数字が出終わってから、下からふわっと現れる
   （has-count は js/common.js がカウントアップを使うときだけ付ける。使わない環境では最初から表示） */
.has-count .c-data__card .c-data__stats {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.has-count .c-data__card.is-counted .c-data__stats {
  opacity: 1;
  transform: none;
}

/* 男女比の人型：濃い紫の部分が、数字のカウントアップと一緒に下から伸びてくる（easeOutCubic＝数字と同じ動き） */
.c-data__people-male,
.c-data__people-female {
  overflow: visible;
}

.has-count .c-data__people-fill {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
}

.has-count .c-data__card.is-counting .c-data__people-fill {
  transform: scaleY(1);
  transition: transform 1.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* 年代のバー：数字のカウントアップと一緒に、左から右へ伸びる（数字と同じ動き） */
.has-count .c-age__bar {
  min-width: 0;
  padding-right: 0;
  padding-left: 0;
  overflow: hidden;
  width: 0;
}

.has-count .c-data__card.is-counting .c-age__bar {
  min-width: 35px;
  padding-right: 8px;
  padding-left: 8px;
  width: var(--r);
  transition:
    width 1.3s cubic-bezier(0.215, 0.61, 0.355, 1),
    min-width 1.3s cubic-bezier(0.215, 0.61, 0.355, 1),
    padding 1.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* バーの中の「19名」：バーが伸びきってから、ふわっと現れる */
.has-count .c-age__count {
  opacity: 0;
}

.has-count .c-data__card.is-counting .c-age__count {
  opacity: 1;
  transition: opacity 0.4s ease 1.2s;
}

/* ==========================================================================
   Company：PICK UP（グレー背景・スライダー）
   ========================================================================== */

.l-wave--tall {
  aspect-ratio: 1440 / 322;
}

.l-section--pickup {
  gap: 72px;
  padding-top: 100px;
  padding-bottom: 100px;
  overflow: hidden;
  background: var(--color-surface-tertiary);
}

/* ---- スライダー本体（画面いっぱいに広げ、真ん中のカードが主役・左右は途中まで見える） ---- */

.c-slider {
  --slide-w: 640px;
  --slide-gap: 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin-right: calc(-1 * var(--gutter));
  margin-left: calc(-1 * var(--gutter));
}

.c-slider__viewport {
  width: 100%;
  /* 浮き上がったカードと影が、枠で切れないよう、上下に余白を足す（レイアウトは負のマージンで打ち消す） */
  padding: 12px 0 20px;
  margin: -12px 0 -20px;
  overflow: hidden;
  touch-action: pan-y;
}

.c-slider__track {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* すべてのスライドを同じマスに重ね、位置は transform で動かす（高さは一番高いカードにそろう） */
.c-slider__slide {
  display: flex;
  grid-area: 1 / 1;
  justify-self: center;
  width: var(--slide-w);
  max-width: 100%;
  transform: translateX(var(--x, 0px));
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.c-slider__slide.is-jump {
  transition: none;
}

/* ---- カード ---- */

.c-pick {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 32px;
  padding: 30px;
  border-radius: var(--radius-m);
  background: var(--color-surface-white);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.c-pick__img {
  flex-shrink: 0;
  width: 211px;
  height: 316.5px;
  border-radius: var(--radius-m);
  object-fit: cover;
}

.c-pick__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.c-pick__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.c-pick__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.c-pick__label-text {
  display: block;
  padding: 4px 16px;
  border-radius: 4px 4px 4px 0;
  background: var(--color-text-primary);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.55;
  white-space: nowrap;
  color: var(--color-text-inverse);
}

.c-pick__label-tail {
  display: block;
  width: 7px;
  height: 5.588px;
}

.c-pick__title {
  margin: 0;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.c-pick__author {
  margin: 0;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.c-pick__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-pick__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--color-brand-primary);
  border-radius: var(--radius-m);
  background: var(--color-surface-primary);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--color-brand-primary);
}

.c-pick__tag img {
  width: 9px;
  height: 9px;
}

/* リンクであることを示す「詳しく見る ↗」（カードの右下）と、ホバー／フォーカス時の変化 */
.c-pick__link {
  position: absolute;
  right: 30px;
  bottom: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}

.c-pick__link-icon {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

.c-pick__title {
  transition: color 0.3s ease;
}

.c-pick:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

@media (hover: hover) {
  .c-pick:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-header);
  }

  .c-pick:hover .c-pick__title {
    color: var(--color-brand-primary);
  }

  .c-pick:hover .c-pick__link-icon {
    transform: translate(2px, -2px);
  }
}

/* ---- 矢印とインジケーター ---- */

.c-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.c-slider__arrow {
  display: block;
  width: 47.767px;
  height: 47.767px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

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

.c-slider__arrow--prev img {
  transform: scaleX(-1);
}

.c-slider__dots {
  display: flex;
  align-items: center;
  gap: 16px;
}

.c-slider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 1px;
  background: #bfbfbf;
  cursor: pointer;
}

.c-slider__dot.is-active {
  background: var(--color-brand-primary);
}

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

/* ---- SP ---- */

@media (max-width: 1023px) {
  .l-section--pickup {
    gap: 40px;
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .c-slider {
    --slide-w: 300px;
    --slide-gap: 16px;
    gap: 16px;
    margin-right: -20px;
    margin-left: -20px;
  }

  .c-pick {
    flex-direction: column;
    gap: 16px;
    padding: 24px;
  }

  .c-pick__img {
    width: 205px;
    height: 307px;
  }

  .c-pick__body {
    gap: 16px;
    align-self: stretch;
  }

  /* SP：カードが縦並びなので、本文の末尾（右下）に置く */
  .c-pick__link {
    position: static;
    align-self: flex-end;
  }

  .c-pick__label-text {
    font-size: 10px;
    line-height: 1.5;
  }

  .c-pick__title {
    font-size: 16px;
  }

  .c-pick__author {
    font-size: 11px;
    line-height: 1.55;
  }
}

/* DATAの注釈：JavaScriptが使える環境では、カードがそろうまで隠しておく */
.js .c-data__note {
  opacity: 0;
  transition: opacity 1.6s ease;
}

.js .c-data__note.is-shown {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js .c-data__note {
    opacity: 1;
    transition: none;
  }
}

/* ==========================================================================
   Page Title：黄色版（JOBページ）
   ========================================================================== */

.l-pagetitle--yellow .l-pagetitle__head {
  background: linear-gradient(to left, var(--color-surface-yellow), var(--color-surface-yellow-light));
  color: var(--color-text-primary);
}

/* ==========================================================================
   Job：WORKFLOW（左に年表の線、右に吹き出し型のカード）
   ========================================================================== */

.l-section--workflow {
  gap: 40px;
  padding-top: 100px;
  padding-bottom: 200px;
}

/* WORKFLOWのタイトルの下に置くイラスト（横長・幅100%） */
.c-wfillust {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-m);
}

@media (max-width: 1023px) {
  .c-wfillust {
    margin-top: -16px;
  }
}

.c-workflow {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-wfitem {
  display: flex;
  align-items: stretch;
  gap: 40px;
}

/* ---- 左の年表（上の線・黄色い丸・下の線） ---- */

.c-wfitem__rail {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  width: 18px;
}

.c-wfitem__line {
  flex: 1;
  width: 1px;
  background: var(--color-line-primary);
}

.c-wfitem--first .c-wfitem__line--top,
.c-wfitem--last .c-wfitem__line--bottom {
  visibility: hidden;
}

.c-wfitem__dot {
  display: block;
  width: 18px;
  height: 18px;
}

/* ---- 吹き出し（左のとがり＋白いカード） ---- */

.c-wfitem__bubble {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  padding: 20px 0;
  filter: drop-shadow(var(--shadow-card-soft));
  transform-origin: 0 50%;
}

.c-wfitem__tail {
  position: relative;
  flex-shrink: 0;
  width: 28.5px;
  height: 32.909px;
}

.c-wfitem__tail img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32.909px;
  height: 28.5px;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.c-wfitem__card {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-content: start;
  column-gap: 48px;
  row-gap: 32px;
  min-width: 0;
  padding: 40px 40px 40px 70px;
  border-radius: var(--radius-m);
  background: var(--color-surface-white);
}

.c-wfitem__head {
  display: flex;
  flex-direction: column;
  grid-column: 1;
  grid-row: 1;
  align-items: flex-start;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-line-primary);
}

.c-wfitem__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.c-wfitem__label-text {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px;
  border-radius: 4px 4px 4px 0;
  background: var(--color-text-primary);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.55;
  white-space: nowrap;
  color: var(--color-text-inverse);
}

.c-wfitem__label-tail {
  display: block;
  width: 7px;
  height: 5.588px;
}

.c-wfitem__title {
  margin: 0;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.c-wfitem__sub {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-primary);
}

.c-wfitem__image {
  display: block;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: var(--radius-m);
  object-fit: cover;
}

.c-wfitem__rows {
  display: flex;
  flex-direction: column;
  grid-column: 1;
  grid-row: 2;
  gap: 24px;
}

.c-wfitem__row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin: 0;
}

.c-wfitem__row dt {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 90px;
  padding: 4px 16px;
  border-radius: 4px;
  background: #a6a6a6;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-inverse);
}

.c-wfitem__row dd {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-primary);
}

.c-wfitem__extra {
  margin: 8px 0 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-primary);
}

/* ---- 吹き出しがぽよんと現れる（とがり側＝左を起点に広がる） ---- */

@keyframes bubble-pop {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
  60% {
    opacity: 1;
    transform: scale(1.025);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.js .c-wfitem__bubble.js-pop {
  opacity: 0;
}

.js .c-wfitem__bubble.js-pop.is-inview {
  animation: bubble-pop 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .js .c-wfitem__bubble.js-pop {
    opacity: 1;
  }

  .js .c-wfitem__bubble.js-pop.is-inview {
    animation: none;
  }
}

/* ---- SP（〜1023px）：年表と吹き出しのとがりをなくし、カードを縦に積む ---- */

@media (max-width: 1023px) {
  .l-section--workflow {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .c-wfitem {
    display: block;
  }

  .c-wfitem__rail,
  .c-wfitem__tail {
    display: none;
  }

  .c-wfitem__bubble {
    padding: 16px 0;
    transform-origin: 50% 50%;
  }

  .c-wfitem__card {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    padding: 32px 24px;
  }

  .c-wfitem__head {
    grid-row: auto;
    gap: 4px;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .c-wfitem__label-text {
    font-size: 10px;
    line-height: 1.5;
  }

  .c-wfitem__title {
    font-size: 23px;
    line-height: 1.35;
    letter-spacing: 0;
  }

  .c-wfitem__sub {
    margin: 0;
    font-size: 11px;
    line-height: 1.55;
  }

  .c-wfitem__image {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
    height: auto;
    margin: 16px 0 40px;
    border-radius: 4px;
    aspect-ratio: 160 / 90;
  }

  .c-wfitem__rows {
    grid-row: auto;
  }

  .c-wfitem__row {
    flex-direction: column;
    gap: 8px;
  }

  .c-wfitem__row dt {
    width: 100%;
    font-size: 11px;
    line-height: 1.55;
  }

  .c-wfitem__extra {
    margin-top: 16px;
  }
}

/* ==========================================================================
   MESSAGE（社長メッセージ）
   ========================================================================== */

/* ---- 共通：黒いラベル（左下に小さなしっぽ） ---- */
.c-tag {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.c-tag__text {
  padding: 4px 16px;
  border-radius: 4px 4px 4px 0;
  background: var(--color-text-primary);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.55;
  white-space: nowrap;
  color: var(--color-text-inverse);
}

.c-tag__tail {
  display: block;
  width: 7px;
  height: 5.588px;
}

/* ---- ページタイトル内のプロフィール ---- */
.l-pagetitle--profile .l-pagetitle__head {
  padding-bottom: 40px;
}

.c-profile {
  position: relative;
  display: flex;
  gap: 57px;
  margin-top: 57px;
}

.c-profile__photo {
  flex-shrink: 0;
  width: 291px;
  height: 314px;
  border-radius: 16px;
  object-fit: cover;
  object-position: 50% 15%; /* 顔から手元のあたりまで見せる */
}

.c-profile__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  min-width: 0;
  padding: 16px 0;
}

.c-profile__name {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-profile__ja {
  margin: 0;
  font-weight: 700;
  font-size: 60px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.c-profile__en {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.55;
  color: #a6a6a6;
}

.c-profile__ja + .c-profile__en {
  margin-top: -8px;
}

.c-profile__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

/* ---- 本文 ---- */
.l-message {
  background: var(--color-surface-primary);
  overflow: hidden;
}

.c-msg {
  position: relative;
  color: var(--color-text-dark);
  font-size: 14px;
  line-height: 1.7;
}

.c-msg p {
  margin: 0;
}

.c-msg .l-section__dots--msg-2 { top: -4px; right: auto; left: -71px; }
.c-msg .l-section__dots--msg-3 { top: 48px; right: auto; left: -62px; }

.c-msg__col {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.c-msg__heading {
  margin: 0;
  padding-left: 16px;
  border-left: 5px solid var(--color-brand-primary);
  font-weight: 700;
  font-size: 31px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-brand-primary);
}

/* イントロ（左：見出し／右：本文） */
.c-msg--intro {
  display: flex;
  gap: 32px;
  padding: 70px var(--gutter);
}

.c-msg__quote {
  position: relative;
  flex: 1;
  min-width: 0;
}

.c-msg__quote-mark {
  position: absolute;
  top: -21px;
  left: -9px;
  width: 74px;
  height: 61px;
}

.c-msg__lead {
  position: relative;
  font-weight: 700;
  font-size: clamp(28px, 2.78vw, 40px);
  line-height: 1.35;
  color: var(--color-brand-primary);
}

.c-msg__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  min-width: 0;
}

/* 写真つき（見出し＋本文／写真は画面端まで） */
.c-msg--photo-right,
.c-msg--photo-left {
  display: flex;
  gap: 70px;
}

.c-msg--photo-right {
  padding: 100px 0 0 var(--gutter);
}

.c-msg--photo-left {
  padding: 70px var(--gutter) 70px 0;
}

.c-msg--photo-right .c-msg__col,
.c-msg--photo-left .c-msg__col {
  flex: 1;
}

.c-msg__photo {
  display: block;
  flex: 0 0 50%;
  width: 50%;
  height: auto;
  aspect-ratio: 721 / 537;
  object-fit: cover;
}

.c-msg--photo-right .c-msg__photo {
  border-radius: 16px 0 0 16px;
}

.c-msg--photo-left .c-msg__photo {
  border-radius: 0 16px 16px 0;
}

/* テキストのみ */
.c-msg--text {
  padding: 70px var(--gutter);
}

/* 締めの白いボックス */
.c-msg--closing {
  padding: 100px var(--gutter);
}

.c-msgbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 56px 48px;
  border-radius: 16px;
  background: var(--color-surface-white);
}

.c-msgbox__title {
  margin: 0;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-brand-primary);
}

.c-msgbox__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 16px;
}

/* ---- SP ---- */
@media (max-width: 1023px) {
  .c-tag__text {
    font-size: 10px;
    line-height: 1.5;
  }

  .c-profile {
    flex-direction: column-reverse;
    gap: 16px;
    margin-top: 40px;
  }

  .c-profile__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 164.96 / 178;
    border-radius: 9.07px;
  }

  .c-profile__body {
    gap: 16px;
    padding: 0;
  }

  .c-profile__name {
    gap: 4px;
  }

  .c-profile__ja {
    font-size: 34px;
    letter-spacing: -0.02em;
  }

  .c-profile__ja + .c-profile__en {
    margin-top: -2px;
  }

  .c-msg .l-section__dots {
    display: none;
  }

  .c-msg__heading {
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0;
  }

  .c-msg--intro {
    flex-direction: column;
    gap: 40px;
    padding: 70px 20px;
  }

  .c-msg__lead {
    font-size: 24px;
  }

  .c-msg--photo-right,
  .c-msg--photo-left {
    flex-direction: column;
    gap: 32px;
    padding: 70px 20px;
  }

  .c-msg--photo-left .c-msg__photo {
    order: 2;
  }

  .c-msg--photo-left .c-msg__col {
    flex: none;
    order: 1;
  }

  .c-msg--photo-right .c-msg__col {
    flex: none;
  }

  .c-msg__photo,
  .c-msg--photo-right .c-msg__photo,
  .c-msg--photo-left .c-msg__photo {
    flex: none;
    width: 100%;
    border-radius: 16px;
  }

  .c-msg--text {
    padding: 70px 20px;
  }

  .c-msg--closing {
    padding: 70px 20px;
  }

  .c-msgbox {
    padding: 32px;
  }

  .c-msgbox__title {
    font-size: 20px;
    letter-spacing: 0.01em;
  }
}

/* ---- プロフィールの登場アニメーション（タイトルの後に続けて表示） ---- */
@keyframes profile-pop {
  from { opacity: 0; transform: scale(0.8); }
  60%  { opacity: 1; transform: scale(1.04); }
  to   { opacity: 1; transform: none; }
}

@keyframes profile-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.c-profile__photo {
  transform-origin: 50% 60%;
  animation: profile-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

.c-profile .c-tag {
  animation: profile-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both;
}

.c-profile__ja {
  animation: pagetitle-ja-reveal 0.6s cubic-bezier(0.77, 0, 0.18, 1) 0.85s both;
}

.c-profile__en {
  animation: pagetitle-fade 0.5s ease 1s both;
}

.c-profile__text {
  animation: pagetitle-ja-reveal 0.7s cubic-bezier(0.77, 0, 0.18, 1) 0.95s both;
}

/* SP：プロフィールの要素は、すべて同じタイミングで動き出す */
@media (max-width: 1023px) {
  .c-profile__photo,
  .c-profile .c-tag,
  .c-profile__ja,
  .c-profile__en,
  .c-profile__text {
    animation-delay: 0.5s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-profile__photo,
  .c-profile .c-tag,
  .c-profile__ja,
  .c-profile__en,
  .c-profile__text {
    animation: none;
  }
}

/* ==========================================================================
   Page Title：緑版（CROSS TALK）
   ========================================================================== */

.l-pagetitle--green .l-pagetitle__head {
  background: linear-gradient(to left, var(--color-surface-green), var(--color-surface-green-light));
}

.c-tag__text > span + span {
  margin-left: 8px;
}

.u-sp {
  display: none;
}

@media (max-width: 1023px) {
  .u-sp {
    display: inline;
  }
}

/* ==========================================================================
   座談会ページ（crosstalk-*.html）
   ========================================================================== */

/* ---- タイトル・メンバー ---- */
.c-xthero {
  position: relative;
  padding: 100px var(--gutter) 0;
  background: var(--color-surface-primary);
}

.c-xthero .c-sectiontitle__en-text {
  display: block;
}

.c-xthero__catch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 24px 0 0;
}

.c-xthero__line {
  position: relative;
  display: block;
  padding: 0 8px;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text-inverse);
}

.c-xthero__line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-text-primary);
  transform-origin: 0 50%;
}

.c-xthero__linetext {
  position: relative;
}

/* 会社紹介のMISSIONと同じ動き：黒い帯が左→右へ伸び、すぐ後に白文字が左→右へ現れる（1行ずつ時間差） */
.js .c-xthero__catch.js-reveal .c-xthero__line::before {
  transform: scaleX(0);
}

.js .c-xthero__catch.js-reveal .c-xthero__linetext {
  clip-path: inset(-10% 100% -10% 0);
}

.js .c-xthero__catch.is-inview .c-xthero__line::before {
  animation: mvv-bg-reveal 0.45s cubic-bezier(0.77, 0, 0.18, 1) calc(0.05s + var(--n, 0) * 0.15s) both;
}

.js .c-xthero__catch.is-inview .c-xthero__linetext {
  animation: mvv-text-reveal 0.35s cubic-bezier(0.77, 0, 0.18, 1) calc(0.3s + var(--n, 0) * 0.15s) both;
}

.c-xthero__line:nth-child(2) { --n: 1; }
.c-xthero__line:nth-child(3) { --n: 2; }

@media (prefers-reduced-motion: reduce) {
  .js .c-xthero__catch.js-reveal .c-xthero__line::before {
    transform: none;
  }

  .js .c-xthero__catch.js-reveal .c-xthero__linetext {
    clip-path: none;
  }

  .js .c-xthero__catch.is-inview .c-xthero__line::before,
  .js .c-xthero__catch.is-inview .c-xthero__linetext {
    animation: none;
  }
}

.c-xthero__main {
  position: relative;
  margin-top: 24px;
}

.c-xthero__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-m);
  object-fit: cover;
}

/* 写真の下に重なる、メンバーのプロフィール */
.c-members {
  position: relative;
  display: flex;
  gap: 40px;
  margin: -92px 48px -59px;
  padding: 40px;
  border-radius: var(--radius-m);
  background: var(--color-surface-white);
}

.c-member {
  display: flex;
  flex: 1;
  gap: 24px;
  min-width: 0;
}

.c-member + .c-member {
  padding-left: 40px;
  border-left: 1px solid var(--color-line-primary);
}

.c-member__img {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

.c-member__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.c-member__role {
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.c-member__name {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.75;
  color: var(--color-text-green);
}

.c-member__role + .c-member__name {
  margin-top: -8px;
}

.c-member__text {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--color-text-primary);
}

/* ---- 目次＋本文 ---- */
.c-xtbody {
  display: flex;
  gap: 115px;
  padding: 120px var(--gutter) 100px;
  background: var(--color-surface-primary);
}

.c-xtbody__side {
  flex: 0 0 300px;
}

.c-index {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px 24px;
  border-radius: 20px;
  background: var(--color-surface-white);
  font-size: 12px;
}

.c-index__title {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-text-green);
}

.c-index__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-index__item {
  display: flex;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--color-line-primary);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.c-index__item:hover {
  opacity: 0.6;
}

.c-index__num {
  flex-shrink: 0;
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-text-green);
}

.c-index__text {
  flex: 1;
  min-width: 0;
  line-height: 1.6;
}

.c-xtbody__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 140px;
  min-width: 0;
}

.c-talksec {
  display: flex;
  flex-direction: column;
  gap: 40px;
  scroll-margin-top: 100px;
}

.c-talkhead {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-talkhead__title {
  margin: 0;
  font-weight: 700;
  font-size: 31px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-green);
}

.c-talkhead__title--light {
  color: var(--color-text-inverse);
}

.c-talksec__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1166 / 656;
  border-radius: var(--radius-m);
  object-fit: cover;
}

/* ---- 吹き出し ---- */
.c-talk {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.c-talk__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.c-talk__row--b {
  flex-direction: row-reverse; /* アイコンを右端に置く */
}

.c-talk__avatar {
  flex-shrink: 0;
  width: 89px;
  height: 89px;
  border-radius: 50%; /* 人物イラストは正方形。円で切り抜く */
}

.c-talk__bubble {
  position: relative;
  flex: 1; /* アイコンの横の残りの幅いっぱいに広げる */
  min-width: 0;
  padding: 16px 24px;
  border-radius: var(--radius-m);
  background: var(--color-surface-white);
  color: var(--color-text-dark);
}

.c-talk__row--a .c-talk__bubble {
  margin-left: 15.67px;
  align-self: flex-end;
}

.c-talk__row--b .c-talk__bubble {
  margin-right: 15.67px;
  align-self: flex-end;
}

/* しっぽ（アバター側） */
.c-talk__bubble::before {
  content: "";
  position: absolute;
  top: 17.8px;
  width: 17.32px;
  height: 15.67px;
  background: url("../images/crosstalk/tail.svg") center / 100% 100% no-repeat;
}

.c-talk__row--a .c-talk__bubble::before {
  left: -15.5px;
  transform: rotate(-90deg);
}

.c-talk__row--b .c-talk__bubble::before {
  right: -15.5px;
  transform: rotate(90deg);
}

.c-talk__name {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-green);
}

.c-talk__text {
  margin: 0;
  font-size: 14px;
  line-height: 2;
}

.c-talk__text strong {
  font-weight: 700;
  line-height: 1.7;
}

/* ---- 最後の緑のパネル ---- */
.c-talkpanel {
  padding: 0 var(--gutter);
  background: var(--color-surface-primary);
}

.c-talkpanel__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 86px 170px;
  border-radius: var(--radius-m);
  background: linear-gradient(to left, var(--color-surface-green), var(--color-surface-green-light));
}

/* ---- 若手座談会へのリンク ---- */
.c-xtlink {
  display: flex;
  justify-content: center;
  padding: 80px 20px;
  background: var(--color-surface-primary);
}

.c-xtlink__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 27px;
}

.c-xtlink__balloon {
  position: relative;
  margin: 0 0 7.113px;
  padding: 8px 24px;
  border-radius: var(--radius-m);
  background: var(--color-text-primary);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.75;
  text-align: center;
  color: var(--color-text-inverse);
}

.c-xtlink__balloon::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  width: 10px;
  height: 7.113px;
  background: var(--color-text-primary);
  /* 吹き出しと同じ要素で描いて、隙間が出ないようにする（1px重ねる） */
  clip-path: path("M4.152 6.643C4.544 7.27 5.456 7.27 5.848 6.643L10 0H0L4.152 6.643Z");
  transform: translateX(-50%);
}

.c-xtlink__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 8px 8px 8px 24px;
  border-radius: 9.5px;
  background: var(--color-surface-green);
  color: var(--color-text-inverse);
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.c-xtlink__label {
  display: flex;
  flex-direction: column;
  gap: 9.5px;
  font-weight: 700;
  line-height: 1;
}

.c-xtlink__en {
  font-family: var(--font-en);
  font-size: 40px;
  letter-spacing: 0.04em;
}

.c-xtlink__ja {
  font-size: 16.76px;
  letter-spacing: 0.04em;
}

.c-xtlink__arrow {
  display: block;
  flex-shrink: 0;
  width: 104.555px;
  height: 104.555px;
  border-radius: 7px;
  background: var(--color-surface-white);
  color: var(--color-surface-green);
  transition: background-color 0.3s ease, color 0.3s ease;
}

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

/* ホバー：フッターのENTRYボタンと同じ。背景と文字の色を入れ替え、矢印の四角が少し右へ動く */
.c-xtlink__btn:hover,
.c-xtlink__btn:focus-visible {
  background: var(--color-surface-white);
  color: var(--color-surface-green);
}

.c-xtlink__btn:hover .c-xtlink__arrow,
.c-xtlink__btn:focus-visible .c-xtlink__arrow {
  background: var(--color-surface-green);
  color: var(--color-surface-white);
}

/* PC：矢印の四角を少しだけ左に置いておき、ホバーで色反転しながら右へ動く */
@media (min-width: 1024px) {
  .c-xtlink__arrow {
    transform: translateX(-5px);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .c-xtlink__btn:hover .c-xtlink__arrow,
  .c-xtlink__btn:focus-visible .c-xtlink__arrow {
    transform: none;
  }
}

/* ---- SP ---- */
@media (max-width: 1023px) {
  .c-xthero {
    padding: 60px 20px 0;
  }

  .c-xthero .c-sectiontitle__en-text {
    display: flex;
    font-size: var(--en-size, 60px);
  }

  .c-xthero__catch {
    gap: 8px;
    margin-top: 40px;
  }

  .c-xthero__line {
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }

  .c-xthero__main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 40px;
  }

  .c-members {
    flex-direction: column;
    gap: 40px;
    margin: 0;
    padding: 24px;
  }

  .c-member {
    gap: 24px;
  }

  .c-member + .c-member {
    padding-left: 0;
    border-left: 0;
  }

  .c-member__img {
    width: 56px;
    height: 56px;
  }

  .c-member__name {
    font-size: 14px;
    line-height: 1.7;
  }

  .c-xtbody {
    flex-direction: column;
    gap: 0;
    padding: 70px 20px 0;
  }

  .c-xtbody__side {
    flex: none;
  }

  .c-index {
    position: static;
  }

  .c-xtbody__main {
    gap: 140px;
    padding: 100px 0 100px;
  }

  .c-talkhead__title {
    font-size: 20px;
  }

  .c-talk {
    gap: 16px;
  }

  .c-talk__row,
  .c-talk__row--b {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: var(--radius-m);
    background: var(--color-surface-white);
  }

  .c-talk__avatar {
    grid-column: 1;
    grid-row: 1;
    width: 56px;
    height: 56px;
  }

  .c-talk__bubble,
  .c-talk__row--a .c-talk__bubble,
  .c-talk__row--b .c-talk__bubble {
    display: contents;
    margin: 0;
    padding: 0;
  }

  .c-talk__bubble::before {
    display: none;
  }

  .c-talk__name {
    grid-column: 2;
    grid-row: 1;
  }

  .c-talk__text {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .c-talkpanel {
    padding: 70px 20px;
  }

  .c-talkpanel__inner {
    padding: 32px 20px;
  }

  .c-talkpanel .c-talkhead__title {
    font-size: 20px;
    letter-spacing: 0.01em;
  }

  .c-xtlink {
    padding: 0 20px 100px;
  }

  .c-xtlink__inner {
    width: 100%;
  }

  .c-xtlink__balloon {
    font-size: 12px;
    line-height: 1.6;
  }

  .c-xtlink__btn {
    width: 100%;
    gap: 37.4px;
    padding: 5.25px 5.25px 5.25px 26.25px;
    border-radius: 6.2px;
  }

  .c-xtlink__label {
    gap: 6.2px;
  }

  .c-xtlink__en {
    font-size: 20px;
    letter-spacing: 0.04em;
  }

  .c-xtlink__ja {
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  .c-xtlink__arrow {
    width: 68.6px;
    height: 68.6px;
    margin-left: auto;
    border-radius: 4.6px;
  }
}
/* 若手座談会リンクの吹き出し：しっぽ（下）を起点にぽよんと現れる */
.js .c-xtlink__balloon.js-pop {
  transform-origin: 50% 100%;
}

/* ---- メンバーが4人（2列×2段）のとき ---- */
.c-members--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: -104px;
  margin-bottom: -32px;
}

.c-members--grid .c-member:nth-child(odd) {
  padding-left: 0;
  border-left: 0;
}

.c-members--grid .c-member:nth-child(even) {
  padding-left: 40px;
  border-left: 1px solid var(--color-line-primary);
}

@media (max-width: 1023px) {
  .c-members--grid {
    display: flex;
    margin: 0;
  }

  .c-members--grid .c-member:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .c-xthero__line {
    max-width: 100%;
  }
}

/* 黒いラベル（アイブロウ）の下の三角：
   画像だと四角と別々に描画されて左端が1px未満ずれて見えるため、四角と同じ要素の ::after で描く。
   元の <img> はレイアウト用の場所取りとして残し、見えないようにしている。 */
.c-flow__step img,
.c-data__tag-tail,
.c-pick__label-tail,
.c-wfitem__label-tail,
.c-tag__tail {
  visibility: hidden;
}

.c-flow__step-label,
.c-data__tag-label,
.c-pick__label-text,
.c-wfitem__label-text,
.c-tag__text {
  position: relative;
}

.c-flow__step-label::after,
.c-data__tag-label::after,
.c-pick__label-text::after,
.c-wfitem__label-text::after,
.c-tag__text::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  width: 7px;
  height: 5.588px;
  background: var(--color-text-primary);
  clip-path: path("M7 0H0V4.58579C0 5.47669 1.07714 5.92286 1.70711 5.29289L7 0Z");
}

/* ---- キャッチ：長い行は、PCは1本の帯、SPは2本の帯に分かれる（MISSIONと同じ作り） ---- */
.c-xthero__texts {
  position: relative;
  display: block;
}

.js .c-xthero__catch.js-reveal .c-xthero__line--split .c-xthero__texts {
  clip-path: inset(-10% 100% -10% 0);
}

.js .c-xthero__catch.is-inview .c-xthero__line--split .c-xthero__texts {
  animation: mvv-text-reveal 0.55s cubic-bezier(0.65, 0, 0.35, 1) calc(0.3s + var(--n, 0) * 0.15s) both;
}

.js .c-xthero__catch .c-xthero__line--split .c-xthero__linetext {
  clip-path: none;
  animation: none;
}

.js .c-xthero__catch.is-inview .c-xthero__line--split::before {
  animation-duration: 0.6s;
}

@media (max-width: 1023px) {
  .c-xthero__line--split {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 0;
  }

  .c-xthero__line--split::before {
    content: none;
  }

  .c-xthero__texts {
    display: contents;
  }

  .c-xthero__chunk {
    position: relative;
    display: block;
    padding: 0 8px;
  }

  .c-xthero__chunk::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-text-primary);
    transform-origin: 0 50%;
  }

  .c-xthero__chunk:nth-child(1) { --n: 1; }
  .c-xthero__chunk:nth-child(2) { --n: 2; }
  .c-xthero__line:nth-child(3) { --n: 3; }

  .js .c-xthero__catch.js-reveal .c-xthero__line--split .c-xthero__texts {
    clip-path: none;
  }

  .js .c-xthero__catch.is-inview .c-xthero__line--split .c-xthero__texts {
    animation: none;
  }

  .js .c-xthero__catch.js-reveal .c-xthero__chunk::before {
    transform: scaleX(0);
  }

  .js .c-xthero__catch.js-reveal .c-xthero__chunk .c-xthero__linetext {
    clip-path: inset(-10% 100% -10% 0);
  }

  .js .c-xthero__catch.is-inview .c-xthero__chunk::before {
    animation: mvv-bg-reveal 0.45s cubic-bezier(0.77, 0, 0.18, 1) calc(0.05s + var(--n, 0) * 0.15s) both;
  }

  .js .c-xthero__catch.is-inview .c-xthero__chunk .c-xthero__linetext {
    clip-path: none;
    animation: mvv-text-reveal 0.35s cubic-bezier(0.77, 0, 0.18, 1) calc(0.3s + var(--n, 0) * 0.15s) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .c-xthero__catch.js-reveal .c-xthero__line--split .c-xthero__texts,
  .js .c-xthero__catch.js-reveal .c-xthero__chunk::before,
  .js .c-xthero__catch.js-reveal .c-xthero__chunk .c-xthero__linetext {
    clip-path: none;
    transform: none;
  }

  .js .c-xthero__catch.is-inview .c-xthero__line--split .c-xthero__texts,
  .js .c-xthero__catch.is-inview .c-xthero__chunk::before,
  .js .c-xthero__catch.is-inview .c-xthero__chunk .c-xthero__linetext {
    animation: none;
  }
}

/* ==========================================================================
   インタビューページ（interview-*.html）
   ========================================================================== */

/* ---- ヒーロー ---- */
.c-ivhero {
  position: relative;
  padding-top: 170px;
  color: var(--color-text-inverse);
}

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

.c-ivhero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 0 var(--gutter);
}

.c-ivhero__catch {
  margin: 0;
}

.c-ivhero__catch .c-xthero__line {
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.c-ivhero__wave {
  position: relative;
  display: block;
  width: 100%;
  /* 端数の高さで下端が写真と混ざって細い線に見えないよう、1px高くして次のセクションに重ねる */
  height: calc(100vw * 98 / 1440 + 1px);
  margin-top: 119px;
  margin-bottom: -1px;
}

/* インタビュイー：PCは右下、SPはキャッチの下 */
.c-ivprofile {
  position: absolute;
  top: 76px;
  right: var(--gutter);
  z-index: 1;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 22px;
  width: 376px;
  padding: 32px;
  border-radius: var(--radius-m);
  background: var(--color-surface-white);
  filter: drop-shadow(var(--shadow-card-soft));
  color: var(--color-text-primary);
}

.c-ivprofile__img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

.c-ivprofile__head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.c-ivprofile__name {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.c-ivprofile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-ivtag {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--color-brand-primary);
  border-radius: var(--radius-m);
  background: var(--color-surface-primary);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--color-brand-primary);
}

.c-ivtag img {
  width: 9px;
  height: 9px;
}

.c-ivprofile__text {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
}

/* ---- 目次＋本文 ---- */
.c-index--brand .c-index__title,
.c-index--brand .c-index__num {
  color: var(--color-brand-primary);
}

.c-ivbody {
  display: flex;
  align-items: flex-start;
  gap: 100px;
  padding: 0 var(--gutter) 200px;
  background: var(--color-surface-primary);
}

.c-ivbody__side {
  align-self: stretch;
  flex: 0 0 300px;
  padding: 120px 0 100px;
}

.c-ivbody__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 140px;
  min-width: 0;
  padding-top: 120px;
}

.c-qa {
  display: flex;
  flex-direction: column;
  gap: 32px;
  scroll-margin-top: 100px;
  color: var(--color-text-dark);
}

.c-qa__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-brand-primary);
}

.c-qa__title {
  margin: 0;
  font-weight: 700;
  font-size: 23px;
  line-height: 1.35;
  color: var(--color-brand-primary);
}

.c-qa__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.c-qa__text p {
  margin: 0;
  font-size: 14px;
  line-height: 2;
}

.c-qa__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 533;
  border-radius: var(--radius-m);
  object-fit: cover;
}

/* ---- SCHEDULE ---- */
.c-sched {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
  padding: 40px var(--gutter) 100px;
  background: var(--color-surface-primary);
}

.c-sectiontitle--center {
  align-items: center;
}

.c-sched__cards {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

.c-sched__card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  padding: 40px 50px;
  border-radius: var(--radius-m);
  background: var(--color-surface-white);
}

.c-sched__card--busy {
  background: var(--color-brand-gradation);
  color: var(--color-text-inverse);
}

.c-sched__title {
  margin: 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-brand-primary);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.35;
  color: var(--color-brand-primary);
}

.c-sched__card--busy .c-sched__title {
  border-bottom-color: var(--color-surface-white);
  color: var(--color-text-inverse);
}

.c-sched__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-sched__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 64px;
}

/* 縦の線（丸の後ろを通る）。最初は下半分だけ、最後は上半分だけ */
.c-sched__row::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-brand-dark);
}

.c-sched__row.is-start::before { top: 50%; }
.c-sched__row.is-end::before { bottom: 50%; }
.c-sched__row.is-vacant::before { content: none; }

.c-sched__dot {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 49px;
  height: 49px;
  border-radius: 50%;
  background: var(--color-brand-dark);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-inverse);
}

.c-sched__item {
  position: relative;
  flex: 1;
  min-width: 0;
  margin-left: 9px;
  filter: drop-shadow(var(--shadow-card-soft));
}

.c-sched__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -7px; /* 四角に1px重ねて隙間を出さない */
  width: 7.941px;
  height: 10px;
  background: var(--color-surface-tertiary);
  clip-path: path("M0.514 5.874C-0.171 5.493 -0.171 4.507 0.514 4.126L7.941 0V10L0.514 5.874Z");
  transform: translateY(-50%);
}

.c-sched__label {
  display: block;
  padding: 12px 24px;
  border-radius: 8px;
  background: var(--color-surface-tertiary);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.7;
  white-space: nowrap;
  color: var(--color-text-primary);
}

/* ---- SP ---- */
@media (max-width: 1023px) {
  .c-ivhero {
    padding-top: 130px;
  }

  .c-ivhero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    mix-blend-mode: multiply;
  }

  .c-ivhero__inner {
    z-index: 1;
    gap: 9px;
    padding: 0 20px;
  }

  .c-ivhero__catch .c-xthero__line {
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }

  .c-ivhero__wave {
    z-index: 1;
    margin-top: 49px;
  }

  .c-ivprofile {
    position: relative;
    top: auto;
    right: auto;
    grid-template-columns: 56px 1fr;
    gap: 8px 18px;
    width: 100%;
    margin-top: 16px;
    padding: 24px;
  }

  .c-ivprofile__img {
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
  }

  .c-ivprofile__name {
    font-size: 23px;
    line-height: 1.35;
    letter-spacing: 0;
  }

  .c-ivprofile__text {
    grid-column: 2;
  }

  .c-ivbody {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 20px 100px;
  }

  .c-ivbody__side {
    flex: none;
    padding: 50px 0 0;
  }

  .c-ivbody .c-index {
    position: static;
  }

  .c-ivbody__main {
    flex: none;
    gap: 100px;
    padding-top: 100px;
  }

  .c-qa__head {
    padding-bottom: 16px;
  }

  .c-qa .c-tag__text > span:first-child {
    font-size: 10px;
    line-height: 1.5;
  }

  .c-qa__image {
    order: 1;
  }

  .c-qa__text {
    order: 2;
  }

  .c-sched {
    gap: 40px;
    padding: 40px 20px 100px;
  }

  .c-sched__cards {
    flex-direction: column;
    gap: 24px;
  }

  .c-sched__card {
    padding: 32px 24px;
  }

  .c-sched__title {
    font-size: 18px;
    line-height: 1.4;
  }

  .c-sched__row {
    gap: 8px;
    height: 59px;
  }

  .c-sched__row::before {
    left: 21.5px;
  }

  .c-sched__row.is-gap {
    height: 20px;
  }

  .c-sched__row.is-vacant {
    display: none;
  }

  .c-sched__dot {
    width: 44px;
    height: 43px;
    border-radius: 999px;
    font-size: 12px;
  }

  .c-sched__item {
    margin-left: 9px;
  }

  .c-sched__label {
    padding: 12px 24px 11px;
    font-size: 12px;
    line-height: 1.6;
  }
}

/* インタビューのキャッチが2行のとき：帯の間隔は9px */
.c-ivhero__catch {
  gap: 9px;
}

/* ==========================================================================
   TOPページ（index.html）
   ========================================================================== */

/* ---- 共通：大きいセクションタイトル（ABOUT / JOB / CROSS TALK / INTERVIEW） ---- */
.c-sectiontitle--xl .c-sectiontitle__en-text {
  font-size: 120px;
  letter-spacing: 0.02em;
}

.c-sectiontitle--xl .c-sectiontitle__flame {
  width: 25.3px;
  height: 33px;
  margin-left: -14px;
}

.c-sectiontitle--xl .c-sectiontitle__ja {
  gap: 12px;
  font-size: 22px;
}

.c-sectiontitle--xl .c-sectiontitle__ja img {
  width: 13px;
  height: 13px;
}

/* ---- 共通：MORE ボタン ---- */
.c-morebtn {
  --btn-bg: var(--color-surface-white);
  --btn-fg: var(--color-text-primary);
  --box-bg: var(--accent, var(--color-brand-primary));
  --box-fg: var(--color-text-inverse);
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 2px 2px 2px 24px;
  border-radius: 4px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.c-morebtn--filled {
  --btn-bg: var(--accent, var(--color-brand-primary));
  --btn-fg: var(--color-text-inverse);
  --box-bg: var(--color-surface-white);
  --box-fg: var(--accent, var(--color-brand-primary));
}

.c-morebtn--job { --accent: var(--color-surface-yellow); }
.c-morebtn--ct { --accent: var(--color-surface-green); }

.c-morebtn__label {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.04em;
}

.c-morebtn__arrow {
  display: block;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 3px;
  background: var(--box-bg);
  color: var(--box-fg);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* ホバー：色を入れ替える（フッターのボタンと同じ） */
.c-morebtn:hover,
.c-morebtn:focus-visible {
  background: var(--box-bg);
  color: var(--box-fg);
}

.c-morebtn:hover .c-morebtn__arrow,
.c-morebtn:focus-visible .c-morebtn__arrow {
  background: var(--btn-bg);
  color: var(--btn-fg);
}

/* 色付きのボタンのホバー：ボタンの地は白ではなく surface/primary */
.c-morebtn--filled:hover,
.c-morebtn--filled:focus-visible {
  background: var(--color-surface-primary);
}

/* 白いボタンのホバー：矢印は黒ではなく、そのボタンの色（ABOUTは紫、JOBは黄、CROSS TALKは緑） */
.c-morebtn:not(.c-morebtn--filled):hover .c-morebtn__arrow,
.c-morebtn:not(.c-morebtn--filled):focus-visible .c-morebtn__arrow {
  color: var(--accent, var(--color-brand-primary));
}

@media (min-width: 1024px) {
  .c-morebtn__arrow {
    transform: translateX(-3px);
  }

  .c-morebtn:hover .c-morebtn__arrow,
  .c-morebtn:focus-visible .c-morebtn__arrow {
    transform: none;
  }
}

/* ---- FV ----
   位置と大きさは、すべて割合で指定（基準は、PC＝1440×976px、SP＝390×768px）。画面幅に比例して拡大縮小する。
   下の288px（SPは78px）は、次のイントロの波が重なる。走る人とキャッチコピーは、波より手前（z-index: 2） */
.c-topfv {
  --fv-delay: 0.2s; /* FVのアニメーション全体の開始を遅らせる時間（層・キャッチコピーすべてに足される） */
  position: relative;
  overflow: hidden;
  background: var(--color-surface-primary);
}

.c-topfv__stage {
  position: relative;
  aspect-ratio: 1440 / 976;
}

/* PC：画像（3層の枠）の中心を、ブラウザ1画面の縦中央（＋3svh）に合わせる（枠の高さ＝幅×976/1440、中心は46.4%）。端が見えないよう、上8%・下7%まで */
@media (min-width: 1024px) {
  .c-topfv__stage {
    top: clamp(-5.42vw, calc(53svh - 31.45vw), 4.74vw);
  }
}

/* 3つの層の枠。位置と大きさは、この枠で決める。奥行きの動き（マウス・スクロール）も、この枠に付ける（js/common.js） */
.c-topfv__layer {
  position: absolute;
  top: -7.07%;
  left: -14.44%;
  width: 128.89%;
  height: 106.97%;
  pointer-events: none;
  will-change: transform;
}

.c-topfv__layer--person {
  z-index: 2;
}

.c-topfv__layer img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* 3つの層（背景→イラスト→走る人）を、順番にぽよんと出す。小さい状態から、わずかに行き過ぎて定着する。PCもSPも、0.3秒ずつずらす */
@keyframes fv-pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
  }
  60% {
    opacity: 1;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.js .c-topfv .js-pop.is-inview {
  animation: fv-pop 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 0.3s) both; /* 出だしが速く、すっと止まる */
}

/* 出たあとも、止まらずに、ゆっくり漂い続ける（出終わってから始まる）。transform ではなく、個別の translate / rotate / scale で動かすので、上の「ぽよん」と重なっても競合しない。
   始まりと終わりは、必ず「止まっている状態」にして、ぽよんの直後に、ずれて飛ばないようにする */
@keyframes fv-float-bg {
  0%, 100% { scale: 1; }
  50% { scale: calc(1 + 0.03 * var(--float-k, 1)); }
}

@keyframes fv-float-art {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  25% { translate: 0 calc(-5px * var(--float-k, 1)); rotate: calc(0.3deg * var(--float-k, 1)); }
  50% { translate: 0 calc(-10px * var(--float-k, 1)); rotate: 0deg; }
  75% { translate: 0 calc(-5px * var(--float-k, 1)); rotate: calc(-0.3deg * var(--float-k, 1)); }
}

@keyframes fv-float-person {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  25% { translate: calc(3px * var(--float-k, 1)) calc(-7px * var(--float-k, 1)); rotate: calc(0.7deg * var(--float-k, 1)); }
  50% { translate: calc(6px * var(--float-k, 1)) calc(-14px * var(--float-k, 1)); rotate: 0deg; }
  75% { translate: calc(3px * var(--float-k, 1)) calc(-7px * var(--float-k, 1)); rotate: calc(-0.7deg * var(--float-k, 1)); }
}

/* 走る人は、少し左から走り込んでくる */
@keyframes fv-pop-run {
  from {
    opacity: 0;
    transform: translate(-36px, 12px) scale(0.9) rotate(-3deg);
  }
  60% {
    opacity: 1;
    transform: translateX(3px) scale(1.04) rotate(0.5deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.js .c-topfv__bg.js-pop {
  transform-origin: 50% 50%; /* 同心円の中心 */
}

.js .c-topfv__bg.js-pop.is-inview {
  animation: fv-pop 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--fv-delay) + 0s) both, fv-float-bg 18s ease-in-out calc(var(--fv-delay) + 0.6s) infinite;
}

.js .c-topfv__art.js-pop.is-inview {
  animation: fv-pop 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--fv-delay) + 0.3s) both, fv-float-art 14s ease-in-out calc(var(--fv-delay) + 0.9s) infinite;
}

.js .c-topfv__person.js-pop.is-inview {
  animation: fv-pop-run 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--fv-delay) + 0.6s) both, fv-float-person 10s ease-in-out calc(var(--fv-delay) + 1.2s) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .js .c-topfv .js-pop.is-inview {
    animation: none;
  }
}

.js .c-topfv__person.js-pop {
  transform-origin: 69% 60%; /* 走る人の位置を中心に膨らむ */
}

/* キャッチコピー（PC）：走る人が出終わる直前（1.0秒）から、白い帯を左→右へ（行ごとに0.1秒ずらす）。
   帯が出終わってから、文字を1行ずつ0.12秒ずらして、ぽよんと出す */
@keyframes fv-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.js .c-topfv__catch.js-reveal .c-topfv__band,
.js .c-topfv__catch.js-reveal .c-topfv__catch-label {
  clip-path: inset(0 100% 0 0);
}

/* 文字は、同じ画像を2枚重ね、1行目と2行目に切り分けて、行ごとに出す */
.c-topfv__catch-art--1 {
  clip-path: polygon(0 0, 100% 0, 100% 41.2%, 20% 41.2%, 20% 48%, 0 48%);
}

.c-topfv__catch-art--2 {
  clip-path: polygon(0 100%, 100% 100%, 100% 41.2%, 20% 41.2%, 20% 48%, 0 48%);
}

.js .c-topfv__catch.js-reveal .c-topfv__catch-art {
  opacity: 0;
}

.js .c-topfv__catch.js-reveal .c-topfv__catch-art--1 { transform-origin: 20% 20%; }
.js .c-topfv__catch.js-reveal .c-topfv__catch-art--2 { transform-origin: 20% 70%; }

.js .c-topfv__catch.js-reveal.is-inview .c-topfv__band,
.js .c-topfv__catch.js-reveal.is-inview .c-topfv__catch-label {
  animation: fv-wipe 0.5s cubic-bezier(0.77, 0, 0.18, 1) both;
}

.js .c-topfv__catch.js-reveal.is-inview .c-topfv__band--1 { animation-delay: calc(var(--fv-delay) + 1s); }
.js .c-topfv__catch.js-reveal.is-inview .c-topfv__band--2 { animation-delay: calc(var(--fv-delay) + 1.1s); }
.js .c-topfv__catch.js-reveal.is-inview .c-topfv__catch-label { animation-delay: calc(var(--fv-delay) + 1.2s); }

.js .c-topfv__catch.js-reveal.is-inview .c-topfv__catch-art {
  animation: fv-pop 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--fv-delay) + 1.6s) both; /* 帯（背景色）が出終わってから */
}

.js .c-topfv__catch.js-reveal.is-inview .c-topfv__catch-art--2 { animation-delay: calc(var(--fv-delay) + 1.72s); }

/* SP：先にキャッチコピー（帯が0秒から走り、その0.15秒後に文字を2行同時に出す）。イラストは、少し間をあけて（0.6秒）から、0.15秒ずつ順番に出す */
@media (max-width: 1023px) {
  .js .c-topfv__bg.js-pop.is-inview {
    animation: fv-pop 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--fv-delay) + 0.6s) both, fv-float-bg 18s ease-in-out calc(var(--fv-delay) + 1.2s) infinite;
  }

  .js .c-topfv__art.js-pop.is-inview {
    animation: fv-pop 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--fv-delay) + 0.75s) both, fv-float-art 14s ease-in-out calc(var(--fv-delay) + 1.35s) infinite;
  }

  .js .c-topfv__person.js-pop.is-inview {
    animation: fv-pop-run 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--fv-delay) + 0.9s) both, fv-float-person 10s ease-in-out calc(var(--fv-delay) + 1.5s) infinite;
  }

  .js .c-topfv__catch.js-reveal.is-inview .c-topfv__band--1 { animation-delay: calc(var(--fv-delay) + 0s); }
  .js .c-topfv__catch.js-reveal.is-inview .c-topfv__band--2 { animation-delay: calc(var(--fv-delay) + 0.1s); }
  .js .c-topfv__catch.js-reveal.is-inview .c-topfv__catch-label { animation-delay: calc(var(--fv-delay) + 0.2s); }
  .js .c-topfv__catch.js-reveal.is-inview .c-topfv__catch-art--1 { animation-delay: calc(var(--fv-delay) + 0.15s); }
  .js .c-topfv__catch.js-reveal.is-inview .c-topfv__catch-art--2 { animation-delay: calc(var(--fv-delay) + 0.15s); }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .js .c-topfv .js-pop.is-inview {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .c-topfv__catch.js-reveal .c-topfv__band,
  .js .c-topfv__catch.js-reveal .c-topfv__catch-label,
  .js .c-topfv__catch.js-reveal .c-topfv__catch-art {
    clip-path: none;
    opacity: 1;
    animation: none;
  }
}

.c-topfv__catch {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  pointer-events: none;
}

/* 帯（白）・文字・ラベルの位置と大きさは、FVの枠（1440×976px）に対する割合 */
.c-topfv__catch img {
  position: absolute;
  display: block;
  height: auto;
}

.c-topfv__band--1 { top: 32.84%; left: -0.9%; width: 35.68%; }
.c-topfv__band--2 { top: 42.91%; left: 6.13%; width: 35.12%; }
.c-topfv__catch-art { top: 32.27%; left: 2.41%; width: 33.75%; }
.c-topfv__catch-label { top: 57.17%; left: 11.11%; width: 29.93%; }

/* ---- 波 ---- */
.c-topwave {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: -1px;
  margin-bottom: -1px; /* 端数の高さで生じる細い隙間を、上下とも1pxの重なりで消す */
  line-height: 0;
}

.c-topwave img:not(.c-topintro__dots) {
  display: block;
  width: 100%;
  height: auto;
}

.c-topwave--job {
  margin-top: -1px;
  background: var(--color-surface-primary);
}

.c-topwave--jobgreen {
  background: linear-gradient(to left, var(--color-surface-yellow), var(--color-surface-yellow-light));
}

.c-topwave--end {
  background: var(--color-surface-primary);
}

/* ---- INTRO（FVのすぐ下の紫の帯） ---- */
.c-topwave--introtop {
  margin-top: -23%; /* FVの下端に重ねる（波の高さ＝幅の20%）。波の上側は透明で、FVが見える */
}

@media (max-width: 1023px) {
  .c-topwave--introtop {
    margin-top: -30%;
  }
}

.c-topwave--introbottom {
  margin-top: -1px;
  background: var(--color-surface-primary);
}

.c-topintro {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 100px var(--gutter);
  background: var(--color-brand-gradation);
}

.c-topintro__dots-pic {
  position: absolute;
}

.c-topintro__dots {
  display: block;
  width: 291.95px;
  height: 73.763px;
}

/* 1つ目：右上（画面の右端に合わせる）。2つ目：下の波にかかる左端 */
.c-topintro__dots-pic:first-child { top: 26px; right: 0; }
.c-topintro__dots-pic--2 { top: 16px; left: 0; } /* 下の波の上（波のコンテナの中） */

.c-topintro__body {
  display: flex;
  flex-direction: column;
  gap: 57px;
}

.c-topintro__text,
.c-topintro__catch p {
  font-family: "Zen Kaku Gothic Antique", var(--font-ja);
}

.c-topintro__text {
  margin: 0;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.9;
  letter-spacing: 0.09em;
  color: var(--color-text-inverse);
}


/* 本文は1行ずつ：色なし → 少し明るい色が左から塗られ → すぐ白が左から塗られる */
.c-topintro__line {
  position: relative;
  display: block;
  width: fit-content;
}

.c-topintro__line--sp {
  display: none;
}

.c-topintro__gap {
  display: block;
  height: 1.9em;
}

.js .c-topintro__line {
  color: transparent;
}

.js .c-topintro__line::before,
.js .c-topintro__line::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  white-space: inherit;
  clip-path: inset(0 100% 0 0);
}

.js .c-topintro__line::before {
  color: rgba(255, 255, 255, 0.32);
}

.js .c-topintro__line::after {
  color: var(--color-text-inverse);
}

.js .c-topintro__text.is-inview .c-topintro__line::before {
  animation: intro-line-wipe 0.5s cubic-bezier(0.77, 0, 0.18, 1) calc(var(--n, 0) * 0.07s) both;
}

.js .c-topintro__text.is-inview .c-topintro__line::after {
  animation: intro-line-wipe 0.5s cubic-bezier(0.77, 0, 0.18, 1) calc(var(--n, 0) * 0.07s + 0.15s) both;
}

@keyframes intro-line-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .js .c-topintro__line {
    color: var(--color-text-inverse);
  }

  .js .c-topintro__line::before,
  .js .c-topintro__line::after {
    content: none;
  }
}

.c-topintro__catch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.c-topintro__catch p {
  position: relative;
  margin: 0;
  padding: 0 8px;
  font-weight: 700;
  font-size: 35px;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--color-brand-primary);
}

/* ラベルの地（クリーム色の帯） */
.c-topintro__catchline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-surface-primary);
  transform-origin: 0 50%;
}

.c-topintro__catchtext {
  position: relative;
}

/* 若手座談会のキャッチ（若手の目線で…）と同じ動き：帯が左→右へ伸び、すぐ後に文字が左→右へ現れる（1行ずつ時間差） */
.js .c-topintro__catch.js-reveal .c-topintro__catchline::before {
  transform: scaleX(0);
}

.js .c-topintro__catch.js-reveal .c-topintro__catchtext {
  clip-path: inset(-10% 100% -10% 0);
}

.js .c-topintro__catch.is-inview .c-topintro__catchline::before {
  animation: mvv-bg-reveal 0.45s cubic-bezier(0.77, 0, 0.18, 1) calc(0.05s + var(--n, 0) * 0.15s) both;
}

.js .c-topintro__catch.is-inview .c-topintro__catchtext {
  animation: mvv-text-reveal 0.35s cubic-bezier(0.77, 0, 0.18, 1) calc(0.3s + var(--n, 0) * 0.15s) both;
}

@media (prefers-reduced-motion: reduce) {
  .js .c-topintro__catch.js-reveal .c-topintro__catchline::before {
    transform: none;
  }

  .js .c-topintro__catch.js-reveal .c-topintro__catchtext {
    clip-path: none;
  }

  .js .c-topintro__catch.is-inview .c-topintro__catchline::before,
  .js .c-topintro__catch.is-inview .c-topintro__catchtext {
    animation: none;
  }
}

.c-topintro__image {
  display: block;
  flex-shrink: 0;
  width: 563px;
}

.c-topintro__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* PC：本文とイラストの合計は1144px（中身の幅が1200pxのときの大きさが基準）。1144pxより狭いときは縮み、1200pxより広いときは、幅に合わせて大きくなる */
@media (min-width: 1024px) {
  .c-topintro {
    --intro-w: var(--content-w);
    gap: max(min(40px, calc(var(--intro-w) * 0.035)), calc(var(--intro-w) * 0.0333));
  }

  .c-topintro__body {
    gap: max(min(57px, calc(var(--intro-w) * 0.0498)), calc(var(--intro-w) * 0.0475));
  }

  .c-topintro__text {
    font-size: max(min(19px, calc(var(--intro-w) * 0.01661)), calc(var(--intro-w) * 0.01583));
  }

  .c-topintro__catch p {
    font-size: max(min(35px, calc(var(--intro-w) * 0.0306)), calc(var(--intro-w) * 0.02917));
  }

  .c-topintro__image {
    width: max(min(563px, calc(var(--intro-w) * 0.492)), calc(var(--intro-w) * 0.4692));
  }
}

/* ---- ABOUT ---- */
.c-topabout {
  --about-w: var(--content-w); /* 中身の幅（PC）。最大1500px */
  display: flex;
  justify-content: center;
  gap: clamp(48px, calc(var(--about-w) * 0.067), 100px); /* テキストと画像の間。狭いときは縮み、広くなっても100pxまで */
  --about-shift: clamp(16px, calc(var(--about-w) * 0.033), 48px); /* 画像を、右へずらす量 */
  padding: 100px var(--gutter) 200px;
  background: var(--color-surface-primary);
}

.c-topabout__list {
  display: flex;
  flex-direction: column;
  gap: 170px;
  width: max(min(592px, calc(var(--about-w) * 0.493)), calc(var(--about-w) * 0.4933)); /* 中身が1200pxのとき592px。狭いときは縮み、広いときは幅に合わせて大きくなる */
  padding: 170px 0 250px;
}

.c-topabout__items {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.c-aboutitem {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 40px;
}

.c-aboutitem__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.c-aboutitem__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-aboutitem__title {
  margin: 0;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.c-aboutitem__image {
  display: none;
}

.c-aboutitem__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.c-aboutitem__line {
  display: block;
  width: 100%;
  height: 2px;
}

.c-topabout__stack-wrap {
  position: sticky;
  top: 0;
  align-self: flex-start;
  flex: 0 0 auto;
  width: max(min(527px, calc(var(--about-w) * 0.44)), calc(var(--about-w) * 0.4392)); /* 中身が1200pxのとき527px。狭いときは、画像全体が幅に合わせて縮み、広いときは大きくなる */
  padding-top: 170px;
  transform: translateX(var(--about-shift));
}

/* PC：狭い画面では、タイトルがテキスト列からはみ出して画像にかからないよう、幅に合わせて小さくする（中身が1200pxのとき120px、1500pxのとき150px） */
@media (min-width: 1024px) {
  .c-topabout .c-sectiontitle--xl .c-sectiontitle__en-text {
    font-size: clamp(84px, calc(var(--about-w) * 0.1), 150px);
  }
}

/* 画像の重なり（カード・ドット）は、すべて割合で指定。基準は527×648px */
.c-topabout__stack {
  position: relative;
  width: 100%;
  aspect-ratio: 527 / 648;
}

.c-topabout__dots {
  position: absolute;
  top: 88.58%;
  left: 44.52%;
  width: 55.4%;
  height: 11.38%;
}

.c-topabout__card {
  position: absolute;
  width: 68.68%;
  height: 83.78%;
  border-radius: 14.332px;
  overflow: hidden;
  background: #ddd;
}

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

/* 重なりの位置：1＝手前、2＝真ん中、3＝奥 */
.c-topabout__card[data-slot="1"] {
  z-index: 3;
  top: 9.89%;
  left: 3.7%;
  box-shadow: var(--shadow-header);
  transform: rotate(-4.24deg);
}

.c-topabout__card[data-slot="2"] {
  z-index: 2;
  top: 5.26%;
  left: 7.88%;
  box-shadow: 0 0 3.583px rgba(0, 0, 0, 0.1);
  transform: rotate(-3.66deg);
}

.c-topabout__card[data-slot="3"] {
  z-index: 1;
  top: 1.64%;
  left: 16.55%;
  box-shadow: 0 0 3.583px rgba(0, 0, 0, 0.1);
  transform: rotate(3.34deg);
}

.c-topabout__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.7s ease;
}

/* 上に別の写真が重なったら暗くする */
.c-topabout__card.is-covered::after {
  opacity: 1;
}

/* 区切りスクロール中：写真は1枚ずつ下から重なっていく */
.js .c-topabout__card {
  transition: opacity 0.5s ease, translate 1s cubic-bezier(0.22, 1, 0.36, 1), rotate 1s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.7s ease;
}

/* 右からスライドして入ってきて、手前に重なる */
.js .c-topabout__card:not(.is-shown) {
  opacity: 0;
  translate: 220px 0;
  rotate: 8deg;
}

.js .c-topabout__card.is-shown {
  opacity: 1;
  translate: 0 0;
  rotate: 0deg;
}

/* ---- JOB ---- */
.c-topjob {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 130px;
  padding: 100px var(--gutter) 140px;
  overflow: hidden;
  background: linear-gradient(to left, var(--color-surface-yellow), var(--color-surface-yellow-light));
}

.c-topjob__dots {
  position: absolute;
  width: 291.95px;
  height: 73.763px;
}

.c-topjob__dots--1 { bottom: 0; left: 0; }
.c-topjob__dots--2 { top: 49.5px; right: 0; }
.c-topjob__dots--3 { top: 783.5px; left: 2px; }

.c-topjob__body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  min-width: 0;
}

.c-topjob__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* PCのみ：画面が広いときも、読みやすい行の長さ（約45文字）を上限にする */
@media (min-width: 1024px) {
  .c-topjob__text {
    max-width: 560px;
  }
}

.c-topjob__pills {
  position: relative;
  flex-shrink: 0;
  width: 398px;
  height: 460px;
}

.c-topjob__pill {
  position: absolute;
  width: 192px;
  height: 374px;
}

.c-topjob__pill--1 { top: 0; left: 0; }
.c-topjob__pill--2 { top: 86px; left: 206px; }

.c-topjob__pill-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
}

.c-topjob__pill--2 .c-topjob__pill-img {
  object-position: 38.7% 50%;
}

/* PC：テキストと画像の間を詰める。テキストは読みやすい幅（560px）で止め、画像は、空いた幅に合わせて大きくする（398〜480px） */
@media (min-width: 1024px) {
  .c-topjob {
    --job-body-w: max(560px, calc(var(--content-w) * 0.4667)); /* テキスト側の幅。中身が1200pxのとき560px、1500pxのとき700px */
    justify-content: space-between; /* 左端は他のセクションに揃える */
    gap: 100px;
  }

  .c-topjob__body {
    flex: 0 1 var(--job-body-w);
  }

  .c-topjob__text {
    max-width: var(--job-body-w);
    font-size: max(12px, calc(var(--content-w) * 0.01));
  }

  .c-topjob__pills {
    width: clamp(398px, calc(var(--content-w) - var(--job-body-w) - 100px), 640px);
    height: auto;
    aspect-ratio: 398 / 460;
  }

  /* 画像2枚の位置と大きさは、割合で指定（基準は398×460px） */
  .c-topjob__pill {
    width: 48.24%;
    height: 81.3%;
  }

  .c-topjob__pill--1 { top: 0; left: 0; }
  .c-topjob__pill--2 { top: 18.7%; left: 51.76%; }
}

.c-topjob__pill-tag {
  position: absolute;
  top: 23px;
  left: 52px;
  transform: scale(1.174);
  transform-origin: 0 0;
}

.c-topjob__pill-tag .c-tag__text {
  padding: 4px 18px;
}

.c-topjob__sp-pills {
  display: none;
}

/* ---- CROSS TALK ---- */
.c-topct {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 72px;
  padding: 200px var(--gutter);
  overflow: hidden;
  background: linear-gradient(to left, var(--color-surface-green), var(--color-surface-green-light));
}

.c-topct > * {
  position: relative;
}

.c-topct__dots {
  position: absolute !important;
  width: 291.95px;
  height: 73.763px;
}

.c-topct__dots--1 { top: 137.67px; right: 0; }
/* カードの下端（下の余白200px）から約40px下 */
.c-topct__dots--2 { bottom: 86px; left: 119px; }

.c-topct__cards {
  display: flex;
  align-items: stretch;
  gap: 24px;
}

.c-ctcard {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
  padding: 24px 24px 40px;
  border-radius: var(--radius-m);
  background: var(--color-surface-primary);
  filter: drop-shadow(0 0 7.5px rgba(0, 0, 0, 0.1));
}

.c-ctcard__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-m);
  object-fit: cover;
}

.c-ctcard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.c-ctcard__head {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.c-ctcard__title {
  margin: 4px 0 16px;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.c-ctcard__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* ---- INTERVIEW ---- */
.c-topiv {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 72px;
  padding: 200px var(--gutter);
  overflow: hidden;
  background: var(--color-surface-primary);
}

.c-topiv__dots {
  position: absolute;
  top: 216.25px;
  left: 1097px;
  width: 291.95px;
  height: 73.763px;
}

.c-topiv > * {
  position: relative;
}

.c-topiv > .c-topiv__dots {
  position: absolute;
}

.c-ivslide {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* 左右とも画面の端まで見せる（過ぎたカードは、小さくなりながら左の画面外へ流れる） */
.c-ivslide__viewport {
  margin-right: calc(-1 * var(--gutter));
  margin-left: calc(-1 * var(--gutter));
  padding-right: var(--gutter);
  padding-left: var(--gutter);
  overflow: hidden;
}

/* 大きいカードの高さ（519px）で固定。カードを送っても、セクションの高さが変わらない */
@media (min-width: 1024px) {
  .c-ivslide__viewport {
    height: 519px;
  }

  /* カードを下端にそろえる基準も固定する（大小が入れ替わる途中で、下辺が上下にずれない） */
  .c-ivslide__track {
    height: 100%;
  }
}

.c-ivslide__track {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 選ばれていないカードは、同じ作りのまま 0.4616 倍に縮める（デザインの小カードの大きさ） */
.c-ivslide__card {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 32px;
  width: 765px;
  padding: 30px;
  border-radius: var(--radius-m);
  background: var(--color-surface-white);
  zoom: 0.4616;
  transition: zoom 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.c-ivslide__card.is-active {
  zoom: 1;
}

.c-ivslide__img {
  flex-shrink: 0;
  width: 306px;
  height: 459px;
  border-radius: var(--radius-m);
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

.c-ivslide__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-end;
  gap: 48px;
  min-width: 0;
}

.c-ivslide__head {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.c-ivslide__title {
  margin: 4px 0 0;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.c-ivslide__name {
  margin: 4px 0 0;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.c-ivslide__tags {
  display: flex;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.c-ivslide__nav {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0 24px;
}

.c-ivslide__arrows {
  display: flex;
  gap: 16px;
}

.c-ivslide__btn {
  display: block;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: opacity 0.3s ease;
}

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

.c-ivslide__btn:hover {
  opacity: 0.6;
}

.c-ivslide__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.c-ivslide__bar {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: var(--color-line-primary);
}

.c-ivslide__bar-fill {
  display: block;
  width: 25%;
  height: 100%;
  border-radius: 4px;
  background: var(--color-brand-primary);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.c-ivslide__dots {
  display: none;
}

/* PC：MORE ボタンは、大きくなったカードにだけ出す（小さいカードでは、高さはそのままで見えなくする） */
@media (min-width: 1024px) {
  .c-ivslide__card .c-morebtn {
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.4s ease;
  }

  .c-ivslide__card:not(.is-active) .c-morebtn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* 末尾に並べた複製の切り替えは、動きなしで行う */
.c-ivslide.is-snapping .c-ivslide__track,
.c-ivslide.is-snapping .c-ivslide__card {
  transition: none;
}

/* ---- SP ---- */
@media (max-width: 1023px) {
  .c-sectiontitle--xl .c-sectiontitle__en-text {
    font-size: var(--en-size, 60px);
  }

  .c-topct .c-sectiontitle--xl,
  .c-topiv .c-sectiontitle--xl {
    --en-size: 50px;
  }

  .c-sectiontitle--xl .c-sectiontitle__flame {
    width: 13.033px;
    height: 16.887px;
    margin-left: -6px;
  }

  .c-sectiontitle--xl .c-sectiontitle__ja {
    gap: 8px;
    font-size: 12px;
  }

  .c-sectiontitle--xl .c-sectiontitle__ja img {
    width: 7px;
    height: 7px;
  }

  .c-topfv {
    --float-k: 0.85; /* 漂う揺れの大きさ（PCを1とした割合）。SPは小さくする */
  }

  .c-topfv__stage {
    width: min(100%, 480px);
    margin: 0 auto;
    aspect-ratio: 390 / 768;
  }

  .c-topfv__layer--bg,
  .c-topfv__layer--art {
    top: 29.57%;
    left: -56.67%;
    width: 213.08%;
    height: 60.86%;
  }

  .c-topfv__layer--person {
    top: 22.67%;
    left: -91.03%;
    width: 281.54%;
    height: 80.47%;
  }

  /* SP：FVの枠（390×768px）に対する割合 */
  .c-topfv__band--1 { top: 14.55%; left: -3.85%; width: 81.87%; }
  .c-topfv__band--2 { top: 22.5%; left: 12.3%; width: 80.56%; }
  .c-topfv__catch-art { top: 14.1%; left: 3.75%; width: 77.43%; }
  .c-topfv__catch-label { top: 33.77%; left: 23.71%; width: 68.66%; }

  .c-topintro {
    flex-direction: column;
    align-items: stretch;
    gap: 57px;
    padding: 100px 20px;
  }

  .c-topintro__dots-pic:first-child { top: 38px; right: 0; }
  .c-topintro__dots-pic--2 { top: -22px; }

  .c-topintro__dots {
    width: 118.739px;
    height: 30px;
  }

  .c-topintro__body {
    gap: 24px;
  }

  .c-topintro__text {
    font-size: 14px;
    letter-spacing: 0.09em;
  }

  .c-topintro__line--pc {
    display: none;
  }

  .c-topintro__line--sp {
    display: block;
  }

  .js .c-topintro__text.is-inview .c-topintro__line::before {
    animation-delay: calc(var(--n-sp, var(--n, 0)) * 0.07s);
  }

  .js .c-topintro__text.is-inview .c-topintro__line::after {
    animation-delay: calc(var(--n-sp, var(--n, 0)) * 0.07s + 0.15s);
  }

  .c-topintro__catch {
    gap: 4px;
  }

  .c-topintro__catch p {
    padding: 2px 8px;
    font-size: 20px;
  }

  .c-topintro__image {
    width: 100%;
  }

  .c-topabout {
    padding: 100px 20px;
  }

  .c-topabout__list {
    gap: 70px;
    width: 100%;
    padding: 0;
  }

  .c-topabout__items {
    gap: 40px;
  }

  .c-aboutitem {
    gap: 24px;
  }

  .c-aboutitem__head {
    gap: 4px;
  }

  .c-aboutitem__title {
    font-size: 23px;
    line-height: 1.35;
    letter-spacing: 0;
  }

  .c-aboutitem__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 160 / 90;
    border-radius: var(--radius-m);
    object-fit: cover;
    object-position: var(--pos, 50% 50%);
  }

  .c-topabout__stack-wrap {
    display: none;
  }

  .c-topjob {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 100px 20px;
  }

  .c-topjob__dots--1 { top: 656.7px; left: 2px; width: 119px; height: 30px; }
  .c-topjob__dots--2 { top: 38.7px; left: auto; right: 0; width: 119px; height: 30px; }
  .c-topjob__dots--3 { top: 861.7px; left: 2px; width: 119px; height: 30px; }

  .c-topjob__body {
    display: contents;
  }

  .c-topjob__body > .c-sectiontitle {
    order: 1;
  }

  .c-topjob__pills {
    order: 2;
    width: 100%;
    height: auto;
    margin-top: 16px;
  }

  .c-topjob__text {
    order: 3;
  }

  .c-topjob__btn {
    order: 4;
    align-self: flex-end;
  }

  .c-topjob__pill {
    display: none;
  }

  .c-topjob__sp-pills {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 350 / 253.6;
  }

  /* 画面幅が350pxより狭くても、右の余白が消えないよう、位置と大きさは割合で指定 */
  .c-topjob__sp-pill {
    position: absolute;
    width: 56.714%;
    height: auto;
    aspect-ratio: 198.5 / 233.5;
  }

  .c-topjob__sp-pill--1 { top: 3.944%; left: 0; }
  .c-topjob__sp-pill--2 { top: 3.944%; left: 43.286%; rotate: 180deg; }

  /* 2枚目は写真を、斜めに切り抜いた型（job-sp-2-mask.png の形）でくり抜いて表示。
     要素ごと180°回転するので、写真のファイル（job-sp-2.jpg）は先に180°回しておく（見た目は正位置） */
  .c-topjob__sp-pill--2 {
    object-fit: cover;
    object-position: 36% 50%;
    -webkit-mask: url("../images/top/job-sp-2-mask.png") center / 100% 100% no-repeat;
    mask: url("../images/top/job-sp-2-mask.png") center / 100% 100% no-repeat;
  }

  /* 2枚目は180°回転しているので、ぽよんの基準点が中心からずれて位置が崩れないよう中心にそろえる */
  .js .c-topjob__sp-pill.js-pop { transform-origin: 50% 50%; }

  /* ラベルは、対応する画像が出るのに合わせて表示（画像より先に単独で見えないように） */
  .js .c-topjob__sp-tag {
    opacity: 0;
    transition: opacity 0.3s ease 0.25s;
  }
  .js .c-topjob__sp-pills:has(.c-topjob__sp-pill--1.is-inview) .c-topjob__sp-tag--1,
  .js .c-topjob__sp-pills:has(.c-topjob__sp-pill--2.is-inview) .c-topjob__sp-tag--2 {
    opacity: 1;
  }

  /* デザインのラベルはPCと同じ1.174倍（幅約123px・高さ約27px） */
  .c-topjob__sp-tag {
    position: absolute;
    z-index: 1;
    transform: scale(1.174);
    transform-origin: 0 0;
  }

  .c-topjob__sp-tag--1 { top: 0; left: 3%; }
  .c-topjob__sp-tag--2 { top: 89.2%; right: 2.857%; transform-origin: 100% 0; }

  /* 2つ目は右上が角張っていて、三角は上側（右上）に出す */
  .c-topjob__sp-tag--2 .c-tag__text {
    border-radius: 4px 0 4px 4px;
  }

  .c-topjob__sp-tag--2 .c-tag__text::after {
    top: auto;
    bottom: calc(100% - 1px);
    left: auto;
    right: 0;
    transform: rotate(180deg);
  }

  .c-topjob__sp-tag--2 .c-tag__tail {
    display: none;
  }

  .c-topjob__pill-tag {
    display: none;
  }

  .c-topct {
    gap: 40px;
    padding: 100px 20px;
  }

  .c-topct__dots--1 { top: 30.23px; left: auto; right: -5px; width: 119px; height: 30px; }
  .c-topct__dots--2 { top: 1234.23px; left: 0; width: 119px; height: 30px; }

  .c-topct__cards {
    flex-direction: column;
    gap: 24px;
  }

  .c-ctcard {
    flex: none;
    justify-content: flex-start;
  }

  .c-ctcard__body {
    gap: 24px;
  }

  .c-ctcard__title {
    font-size: 23px;
    line-height: 1.35;
    letter-spacing: 0;
  }

  .c-topiv {
    gap: 40px;
    padding: 100px 20px;
  }

  .c-topiv__dots {
    top: 20.64px;
    left: auto;
    right: -5px;
    width: 119px;
    height: 30px;
  }

  .c-ivslide {
    gap: 40px;
  }

  .c-ivslide__viewport {
    margin-right: -20px;
    margin-left: 0;
    padding-right: 20px;
    padding-left: 0;
  }

  .c-ivslide__track {
    gap: 4px;
  }

  .c-ivslide__card.is-clone {
    display: none;
  }

  .c-ivslide__card,
  .c-ivslide__card.is-active {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    width: 350px;
    padding: 20px 20px 28px;
    zoom: 1;
  }

  .c-ivslide__img {
    width: 100%;
    height: auto;
    aspect-ratio: 160 / 90;
  }

  .c-ivslide__body {
    gap: 24px;
  }

  .c-ivslide__title {
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0;
  }

  .c-ivslide__name {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.55;
  }

  .c-ivslide__tags {
    margin-top: 8px;
  }

  .c-ivslide__card .c-tag__text {
    font-size: 10px;
  }

  .c-ivslide__nav {
    justify-content: center;
    gap: 16px;
    padding: 0;
  }

  .c-ivslide__bar {
    display: none;
  }

  .c-ivslide__arrows {
    display: contents;
  }

  .c-ivslide__btn--prev {
    order: 1;
  }

  .c-ivslide__dots {
    order: 2;
    display: flex;
    gap: 16px;
  }

  .c-ivslide__btn--next {
    order: 3;
  }

  .c-ivslide__dots span {
    width: 8px;
    height: 8px;
    border-radius: 1px;
    background: #bfbfbf;
  }

  .c-ivslide__dots span.is-active {
    background: var(--color-brand-primary);
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-ivslide__track,
  .c-ivslide__card,
  .c-ivslide__bar-fill {
    transition: none;
  }
}

/* ==========================================================================
   ABOUT：区切りのあるスクロール
   画面を固定したまま、スクロール量で 01 → 02 → 03 と1項目ずつ進む（JS必須・視差を減らす設定では無効）。
   左はデザインどおり3項目＋点線を縦に並べたまま、窓（マスク）から1項目ずつ見せる。
   ========================================================================== */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  /* 固定表示のPCでは、スクロール量で切り替えるので、フェードアップは使わない（SPのみ） */
  .js .c-topabout .js-fadeup {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .c-topabout[data-aboutscroll] {
    height: calc(100svh * 2.6);
    padding: 0;
  }

  .js .c-topabout__pin {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(48px, calc(var(--about-w) * 0.067), 96px);
    width: 100%;
    height: 100svh;
    padding: 0 var(--gutter);
    overflow: hidden;
  }

  /* 左はデザインどおり3項目＋点線を縦に並べたまま、窓（マスク）から1項目ずつ見せる。
     窓は今の項目の頭ぴったりから始まり、下には次の項目への点線がのぞく。
     項目は画面の中央あたり、ABOUT のタイトルはその上（画面の上寄り）に置く */
  .js .c-topabout__list {
    position: relative;
    align-self: stretch;
    justify-content: center;
    min-width: 0;
    padding: 0;
  }

  .js .c-topabout__list > .c-sectiontitle {
    position: absolute;
    top: 170px;
    left: 0;
  }

  .js .c-topabout__viewport {
    height: 330px;
    margin-top: 320px; /* 中央寄せなので、100px足すと項目は50px下がり、タイトルとの余白が約80pxになる */
    overflow: hidden;
  }

  .js .c-topabout__items {
    position: relative;
    padding-bottom: 700px;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .js .c-topabout__stack-wrap {
    position: static;
    align-self: center;
    padding-top: 100px; /* 画面の中央から50px下げる（上に100px足すと、中央寄せで50px下がる） */
  }
}

/* ABOUT：今いる項目の目印（右端の細い縦長ボックス3つ。区切りスクロールのときだけ出る） */
.c-topabout__steps {
  display: none;
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .js .c-topabout__steps {
    position: absolute;
    top: 50%;
    right: 56px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    transform: translateY(-50%);
  }

  .js .c-topabout__steps li {
    width: 2px;
    height: 56px;
    border-radius: 1px;
    background: var(--color-line-primary);
    transition: background-color 0.4s ease;
  }

  .js .c-topabout__steps li.is-active {
    background: var(--color-brand-primary);
  }
}


/* JOB：右の2つの画像は、少しタイミングをずらして（0.1秒差）ぽよんと出す */
.js .c-topjob__pill.js-pop.is-inview,
.js .c-topjob__sp-pill.js-pop.is-inview {
  animation-delay: calc(var(--i, 0) * 0.1s);
}

/* ==========================================================================
   スマホ：波の上下の細い線を消す
   端数の高さの波は、上下の端の1行が半透明になって、後ろの色が線のように見える。
   波を縦に少しだけ（約2px）広げて、その行を前後のセクションの上に重ねる。
   ========================================================================== */
@media (max-width: 1023px) {
  .c-topwave img:not(.c-topintro__dots),
  .l-wave,
  .l-pagetitle__wave {
    transform: scaleY(1.04);
  }
}

/* ==========================================================================
   ドットのあしらいは、文字や写真の後ろに置く
   あしらいを z-index: -1 にし、その親に isolation を付けて、セクションの背景より下には潜らないようにする。
   ========================================================================== */
.l-pagetitle__dots,
.l-section__dots,
.c-topabout__dots,
.c-topjob__dots,
.c-topct__dots,
.c-topiv__dots,
.c-topintro__dots-pic {
  z-index: -1;
}

:has(> .l-pagetitle__dots, > .l-section__dots, > .c-topabout__dots, > .c-topjob__dots, > .c-topct__dots, > .c-topiv__dots, > .c-topintro__dots-pic) {
  isolation: isolate;
}

/* 下の波にかかるあしらいは、波の画像の上に出す（その位置に文字はない） */
.c-topintro__dots-pic--2 {
  z-index: 1;
}