/*
  B 案：シネマティック（黒）。
  - ロゴと同じ純粋な黒。文字は白と灰。グラデーションは光の筋・強調の一語・押すものだけ
  - 和文は Zen Kaku Gothic New、欧字は Saira の細い斜体（ロゴの Athlete に合わせる）、札は Michroma
  - 角は小さく。写真は大きく、文字は少なく
*/
:root {
  /* lp-studio:tokens:start */
  --bg: #000000;
  --surface: #0e0e13;
  --ink: #f5f5f7;
  --ink-dim: #a3a4b1;
  --accent: #e05a92;
  --accent-ink: #0b0b0f;
  --line: #24242c;
  --font: "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif;
  --font-display: Saira, "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  /* lp-studio:tokens:end */
  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --hh: 80px;
  --header-h: 80px;
  --menu-bg: #000;
  --opening-bg: #000;
  --btn-bg: #000;
  --btn-bg-h: #111;
  --btn-ink: #fff;
  color-scheme: dark;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  letter-spacing: 0.03em;
  overflow-x: clip;
}

.container {
  width: min(100% - var(--gutter) * 2, var(--maxw));
  margin-inline: auto;
}

.br-pc {
  display: none;
}

@media (min-width: 900px) {
  .br-pc {
    display: inline;
  }
}

.eyebrow-l {
  margin: 0 0 22px;
  font-size: 0.6875rem;
  color: var(--ink-dim);
}

.sec-title {
  margin: 0 0 clamp(40px, 6vw, 80px);
  font-size: clamp(2rem, 1.1rem + 3.6vw, 4.25rem);
  font-weight: 900;
  line-height: 1.22;
}

em {
  font-style: normal;
}

section {
  position: relative;
  isolation: isolate;
}

/* ---------------------------------------------------------- ヘッダー */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--hh);
}

.site-header.is-scrolled {
  background: rgb(0 0 0 / 0.72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

.mca-menu-open .site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
  padding-inline: var(--gutter);
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
}

.logo .brand-logo {
  width: auto;
  height: 36px;
}

.gnav {
  display: none;
}

.gnav ul {
  display: flex;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gnav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  overflow: hidden;
  font-family: var(--en);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-decoration: none;
}

/* 重ねると字が上へ転がって替わる（下に影の字を置いて送る） */
.gnav li {
  height: 44px;
  overflow: hidden;
}

.gnav a {
  color: #fff;
  text-shadow: 0 44px 0 var(--accent);
  transition: transform 0.45s var(--e-out);
}

/* 重ねたときは字を動かさず、下線を引いて色を替える。
   字を上へ転がして影の字と入れ替える作りは、跳ねる（リンクがカーソルから外れる）・消える（影の字が枠の外に出る）を起こした */
.gnav a {
  position: relative;
  transform: none !important;
  text-shadow: none !important;
}

.gnav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 1px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--e-out);
}

.gnav a:hover,
.gnav a:focus-visible {
  color: #fff;
}

.gnav a:hover::after,
.gnav a:focus-visible::after,
.gnav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.header-cta {
  display: none;
}

@media (min-width: 1100px) {
  .gnav,
  .header-cta {
    display: inline-flex;
  }

  .burger {
    display: none;
  }
}

/* ---------------------------------------------------------- FV */

.hero {
  position: relative;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background: #000;
}

.hero-media {
  position: absolute;
  inset: 0;
  --mx: 58%;
  --my: 40%;
}

.shot {
  position: absolute;
  inset: 0;
  margin: 0;
  visibility: hidden;
  clip-path: inset(50% 0 50% 0);
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 30%;
  scale: 1.08;
}

.shot.is-on {
  z-index: 2;
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 1.3s var(--e-io),
    visibility 0s;
}

.shot.is-on img {
  scale: 1;
  transition: scale 7s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.shot.is-off {
  z-index: 1;
  visibility: visible;
  clip-path: inset(0 0 0 0);
}

.mca-js .hero:not(.is-ready) .shot.is-on {
  clip-path: inset(50% 0 50% 0);
}

/* 暗い所を沈め、カーソルの所だけ明るく（光を当てる） */
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(circle 32vmax at var(--mx) var(--my), transparent 0, rgb(0 0 0 / 0.35) 100%),
    linear-gradient(to top, rgb(0 0 0 / 0.85), transparent 45%),
    linear-gradient(to right, rgb(0 0 0 / 0.65), transparent 55%);
  pointer-events: none;
  transition: background 0.2s;
}

/* 光の筋：ロゴの速度線が画面を横切り続ける */
.streaks {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: screen;
}

.streaks i {
  position: absolute;
  left: -40%;
  height: 3px;
  width: 38%;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #26a1e4 40%, #9671b7 70%, #c63d75);
  filter: drop-shadow(0 0 8px rgb(198 61 117 / 0.6));
  animation: streak 4.6s var(--e-io) infinite;
  opacity: 0;
}

.streaks i:nth-child(1) { top: 22%; animation-delay: 0.2s; }
.streaks i:nth-child(2) { top: 41%; width: 52%; animation-delay: 1.4s; animation-duration: 5.2s; }
.streaks i:nth-child(3) { top: 58%; animation-delay: 2.1s; }
.streaks i:nth-child(4) { top: 71%; width: 26%; animation-delay: 3.3s; animation-duration: 3.8s; }
.streaks i:nth-child(5) { top: 84%; width: 44%; animation-delay: 0.9s; animation-duration: 6s; }

@keyframes streak {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateX(380%);
    opacity: 0;
  }
}

.hero.is-paused .streaks i {
  animation-play-state: paused;
}

/* 切り替えの瞬間の光 */
.hero.is-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(90deg, transparent 30%, rgb(38 161 228 / 0.35), rgb(198 61 117 / 0.35), transparent 70%);
  animation: flash 1.2s var(--e-io) forwards;
  pointer-events: none;
}

@keyframes flash {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

/* 巨大な Athlete（ロゴの斜体） */
.hero-big {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.16em;
  z-index: 4;
  margin: 0;
  overflow: hidden;
  font-family: var(--en);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(6rem, 24vw, 26rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgb(255 255 255 / 0.35);
  pointer-events: none;
  white-space: nowrap;
}

.mca-js .hero-big span {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 1.6s var(--e-out) 0.5s;
}

.mca-js .hero.is-ready .hero-big span {
  transform: none;
}

.hero-copy {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  z-index: 6;
  width: min(92vw, 760px);
  transform: translateY(-50%);
}

.hero-kicker {
  margin: 0 0 26px;
  font-size: 0.6875rem;
  color: rgb(255 255 255 / 0.75);
}

.hero-title {
  margin: 0;
  font-size: clamp(2.75rem, 1.2rem + 5.6vw, 7rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0.01em;
}

.hero-lead {
  margin: 30px 0 0;
  color: rgb(255 255 255 / 0.8);
  line-height: 2;
  font-size: clamp(0.875rem, 0.82rem + 0.25vw, 1rem);
}

.hero-foot {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 28px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 18px;
}

.hero-who {
  display: grid;
  margin: 0 auto 0 0;
  line-height: 1.35;
}

.hero-who .tech {
  font-size: 0.625rem;
  color: rgb(255 255 255 / 0.65);
}

.hero-who small {
  font-size: 0.6875rem;
  color: rgb(255 255 255 / 0.55);
}

.hero-dots {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero-dots button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero-dots i {
  display: block;
  width: 28px;
  height: 2px;
  background: rgb(255 255 255 / 0.3);
  overflow: hidden;
  position: relative;
}

.hero-dots i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
}

.hero-dots .is-on i::after {
  transform: scaleX(1);
  transition: transform 3.5s linear; /* b.js の DUR と同じ */
}

.hero.is-paused .hero-dots .is-on i::after {
  transition: none;
  transform: scaleX(1);
}

.hero-pause {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 50%;
  background: rgb(0 0 0 / 0.3);
  color: #fff;
  cursor: pointer;
}

.hero-pause svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.hero-pause .i-play,
.hero-pause[aria-pressed="true"] .i-pause {
  display: none;
}

.hero-pause[aria-pressed="true"] .i-play {
  display: inline;
}

@media (max-width: 899px) {
  .shot img {
    object-position: 50% 20%;
  }

  .hero-vignette {
    background:
      linear-gradient(to top, rgb(0 0 0 / 0.95) 10%, rgb(0 0 0 / 0.35) 55%, transparent 75%);
  }

  .hero-copy {
    top: auto;
    bottom: 90px;
    right: var(--gutter);
    width: auto;
    transform: none;
    text-align: center;
  }

  .hero-lead {
    margin-top: 18px;
    line-height: 1.85;
  }

  .hero-big {
    bottom: auto;
    top: 46%;
    font-size: 34vw;
  }
}

/* ---------------------------------------------------------- Vision */

.vision {
  padding: clamp(120px, 15vw, 220px) 0;
}

.vision-inner {
  display: grid;
  gap: 0;
}

.vision-title {
  margin: 0 0 48px;
  font-size: clamp(1.625rem, 0.6rem + 5.2vw, 5rem);
  font-weight: 900;
  line-height: 1.28;
}

.vision-body {
  display: grid;
  gap: 1.2em;
  max-width: 40em;
  color: var(--ink-dim);
  line-height: 2.1;
}

.vision-body p {
  margin: 0;
}

.vision-figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 80px 0 0;
  border-top: 1px solid var(--line);
}

.vision-figs > div {
  padding: 26px 16px 0 0;
}

.vision-figs > div + div {
  padding-left: 20px;
  border-left: 1px solid var(--line);
}

.vision-figs dt {
  font-size: 0.75rem;
  color: var(--ink-dim);
}

.vision-figs dd {
  margin: 8px 0 0;
  font-weight: 700;
  font-size: 0.875rem;
}

.vision-figs b {
  display: block;
  font-weight: 200;
  font-style: italic;
  font-size: clamp(2.75rem, 1.4rem + 5vw, 6.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.1em;
}

@media (min-width: 1000px) {
  .vision-inner {
    grid-template-columns: 1fr 1fr;
    column-gap: 80px;
  }

  .vision-inner > .eyebrow-l,
  .vision-title {
    grid-column: 1 / -1;
  }

  .vision-body {
    grid-column: 2;
  }

  .vision-figs {
    grid-column: 1 / -1;
  }
}

@media (max-width: 599px) {
  .vision-figs {
    grid-template-columns: 1fr;
  }

  .vision-figs > div + div {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
    margin-top: 20px;
  }
}

/* ---------------------------------------------------------- 横に進む列 */

.athletes {
  background: #07070a;
}

.hs-sticky {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 40px;
  min-height: 100svh;
  padding: calc(var(--hh) + 20px) 0 40px;
  overflow: hidden;
}

.hs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
}

.hs-head .eyebrow-l {
  flex-basis: 100%;
  margin-bottom: 0;
}

.hs-head h2 {
  margin: 0;
  font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem);
  font-weight: 900;
  line-height: 1.3;
}

.hs-hint {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--ink-dim);
}

.hs-track {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 3vw, 48px);
  padding-inline: var(--gutter);
  width: max-content;
  will-change: transform;
}

.ath-card {
  width: clamp(240px, 21vw, 330px);
  flex: 0 0 auto;
}

.ath-card.is-tall {
  margin-top: 48px;
}

.ath-card figure {
  margin: 0 0 18px;
  overflow: hidden;
  border-radius: 6px;
}

.ath-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(0.45) contrast(1.05);
  transition:
    filter 0.6s ease,
    transform 1.2s var(--e-out);
}

.ath-card:hover img {
  filter: none;
  transform: scale(1.05);
}

.ac-no {
  margin: 0;
  font-style: italic;
  font-weight: 200;
  font-size: 2.5rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgb(255 255 255 / 0.6);
}

.ath-card h3 {
  margin: 8px 0 2px;
  font-size: 1.375rem;
  font-weight: 900;
}

.ath-card h3 small {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-dim);
}

.ac-sport {
  margin: 0 0 12px;
  font-size: 0.75rem;
  color: var(--accent);
}

.ac-text {
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.875rem;
  line-height: 1.95;
}

.ath-end {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  align-self: center;
  width: clamp(200px, 20vw, 300px);
  aspect-ratio: 1;
  margin-left: 20px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.3);
  text-align: center;
  text-decoration: none;
  font-family: var(--en);
  font-style: italic;
  font-weight: 300;
  font-size: 1.75rem;
  line-height: 1.1;
  transition: background-color 0.4s, border-color 0.4s;
}

.ath-end i {
  font-style: normal;
}

.ath-end:hover {
  background: var(--grad-d);
  border-color: transparent;
}

.hs-bar {
  width: min(100% - var(--gutter) * 2, var(--maxw));
  height: 1px;
  margin: 0 auto;
  background: var(--line);
}

.hs-bar i {
  display: block;
  height: 100%;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
}

@media (max-width: 899px), (max-height: 699px), (prefers-reduced-motion: reduce) {
  .athletes {
    height: auto !important;
  }

  .hs-sticky {
    position: static;
    min-height: 0;
    padding: clamp(90px, 12vw, 140px) 0;
  }

  .hs-track {
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    padding-bottom: 8px;
  }

  .hs-track::-webkit-scrollbar {
    display: none;
  }

  .ath-card {
    width: min(76vw, 320px);
    scroll-snap-align: start;
  }

  .ath-card.is-tall {
    margin-top: 0;
  }

  .ath-end {
    width: 180px;
    font-size: 1.25rem;
  }

  .hs-bar {
    display: none;
  }

  .hs-hint {
    display: none;
  }
}

/* ---------------------------------------------------------- サービス */

.svc-sec {
  padding: clamp(120px, 14vw, 200px) 0;
}

.svc {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.svc li {
  border-bottom: 1px solid var(--line);
}

.svc a {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px 24px;
  align-items: center;
  padding: clamp(26px, 3.5vw, 44px) 0;
  text-decoration: none;
  isolation: isolate;
}

.svc a::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--gutter) * -1);
  z-index: -1;
  background: linear-gradient(90deg, rgb(38 161 228 / 0.12), rgb(198 61 117 / 0.12));
  opacity: 0;
  transition: opacity 0.4s;
}

.svc a:hover::before {
  opacity: 1;
}

.svc-no {
  font-style: italic;
  font-weight: 200;
  font-size: 1.5rem;
  color: var(--ink-dim);
}

.svc-name {
  display: grid;
}

.svc-name b {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  font-weight: 900;
  line-height: 1.25;
  transition: transform 0.5s var(--e-out);
}

.svc a:hover .svc-name b {
  transform: translateX(14px);
}

.svc-name .en {
  font-style: italic;
  font-weight: 300;
  font-size: 0.875rem;
  color: var(--accent);
}

.svc-text {
  grid-column: 2 / -1;
  color: var(--ink-dim);
  font-size: 0.9375rem;
  line-height: 1.9;
}

.svc-go {
  grid-row: 1;
  grid-column: 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.3);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 11h8m-3-3.5L15.5 11 12 14.5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat;
  transition: background-color 0.4s, border-color 0.4s, transform 0.5s var(--e-out);
}

.svc a:hover .svc-go {
  background-color: var(--pink);
  border-color: var(--pink);
  transform: rotate(-45deg);
}

@media (min-width: 1000px) {
  .svc a {
    grid-template-columns: 80px minmax(0, 1.1fr) minmax(0, 1fr) auto;
    gap: 40px;
  }

  .svc-text {
    grid-column: 3;
    grid-row: 1;
  }

  .svc-go {
    grid-column: 4;
  }
}

/* 右の枠：重ねた行の写真が下から開いて替わる（文字の上には重ねない） */
.svc-preview {
  display: none;
}

@media (min-width: 1000px) {
  .svc-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }

  .svc-wrap .svc a {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 6px 28px;
  }

  .svc-wrap .svc-text {
    grid-column: 2 / 3;
    grid-row: 2;
  }

  .svc-wrap .svc-go {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .svc li {
    transition: opacity 0.4s;
  }

  .svc-wrap:hover li:not(.is-on) {
    opacity: 0.45;
  }

  .svc-preview {
    position: sticky;
    top: calc(var(--hh) + 32px);
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 8px;
    background: #0b0b0f;
  }

  .pv {
    position: absolute;
    inset: 0;
    margin: 0;
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.9s var(--e-io);
  }

  .pv.is-on {
    z-index: 1;
    clip-path: inset(0 0 0 0);
  }

  .pv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: 1.12;
    transition: scale 1.4s var(--e-out);
  }

  .pv.is-on img {
    scale: 1;
  }

  .pv figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 60px 22px 20px;
    background: linear-gradient(to top, rgb(0 0 0 / 0.75), transparent);
    font-family: var(--en);
    font-style: italic;
    font-weight: 300;
    font-size: 1.5rem;
  }

  .pv figcaption .en {
    font-size: 0.875rem;
    color: var(--accent);
  }
}

/* ---------------------------------------------------------- 流れる帯 */

.keep {
  padding: clamp(24px, 3vw, 40px) 0;
  border-block: 1px solid var(--line);
  font-family: var(--en);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(3rem, 1.6rem + 6vw, 8rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.keep p {
  margin: 0;
  gap: 0.5em;
  padding-right: 0.5em;
}

.keep .o {
  color: transparent;
  -webkit-text-stroke: 1.5px rgb(255 255 255 / 0.6);
}

.keep i {
  width: 0.25em;
  height: 0.25em;
  border-radius: 50%;
  background: var(--grad);
}

/* ---------------------------------------------------------- 締め */

.cta {
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
  --mx: 50%;
  --my: 50%;
}

.cta-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  filter: grayscale(0.3);
}

.cta-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 40vmax at var(--mx) var(--my), transparent, #000 85%);
}

.cta-k {
  margin: 0 0 20px;
  font-size: 0.6875rem;
  color: var(--ink-dim);
}

.cta h2 {
  margin: 0 0 48px;
  font-size: clamp(2.25rem, 1rem + 5vw, 5.5rem);
  font-weight: 900;
  line-height: 1.2;
}

.cta-circle {
  display: inline-grid;
  place-items: center;
  width: clamp(160px, 16vw, 220px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--grad-ink-d);
  color: #fff;
  font-weight: 900;
  font-size: 1.125rem;
  line-height: 1.5;
  text-decoration: none;
  box-shadow: 0 0 0 0 rgb(198 61 117 / 0.5);
  animation: pulse 2.6s ease-out infinite;
  transition: transform 0.4s var(--e-out);
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 28px rgb(198 61 117 / 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(198 61 117 / 0);
  }
}

/* ---------------------------------------------------------- フッター */

.site-footer {
  padding: 64px 0 28px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}

.footer-inner {
  display: grid;
  gap: 32px;
}

.footer-inner .brand-logo {
  width: 220px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--en);
  letter-spacing: 0.06em;
  color: rgb(255 255 255 / 0.8);
  text-decoration: none;
}

.footer-nav a:hover {
  color: #fff;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--ink-dim);
}

.footer-bottom p {
  margin: 0;
}

@media (min-width: 900px) {
  .footer-inner {
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .footer-nav {
    justify-content: flex-end;
  }
}

@media (max-width: 767px) {
  .vision-inner,
  .sec-title,
  .eyebrow-l,
  .hs-head {
    text-align: center;
  }

  .hs-head {
    justify-content: center;
  }

  .vision-body {
    text-align: left;
  }

  .vision-figs {
    text-align: left;
  }
}

@media (max-width: 359px) {
  .svc-name b {
    font-size: 1.1875rem;
    letter-spacing: 0;
  }

  .svc a {
    gap: 8px 14px;
  }
}

/* ==========================================================
   作り込み（アスリートと企業の 2 つの相手・下の階層）
   ========================================================== */

/* FV：2 つの入口 */
.hero-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.hero-entry a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 18px 10px 20px;
  border: 1px solid rgb(255 255 255 / 0.32);
  border-radius: 999px;
  background: rgb(0 0 0 / 0.45);
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: border-color 0.3s, background 0.3s;
}

.hero-entry a:hover,
.hero-entry a:focus-visible {
  border-color: #fff;
  background: rgb(0 0 0 / 0.7);
}

.hero-entry .tech {
  font-size: 0.5625rem;
  color: rgb(255 255 255 / 0.72);
}

.hero-entry i {
  width: 18px;
  height: 1px;
  background: currentColor;
  position: relative;
}

.hero-entry i::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

@media (max-width: 599px) {
  .hero-entry {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .hero-entry a {
    justify-content: space-between;
  }

  .hero-entry .tech {
    display: none;
  }
}

/* 2 つの入口の節 */
.doors {
  padding: clamp(90px, 11vw, 170px) 0;
}

.door-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 900px) {
  .door-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

.door {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: clamp(380px, 40vw, 560px);
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}

.door img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--e-out);
}

.door::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.1) 20%, rgb(0 0 0 / 0.86) 78%);
}

.door:hover img,
.door:focus-visible img {
  transform: scale(1.05);
}

.door-body {
  position: absolute;
  left: clamp(22px, 3vw, 40px);
  right: clamp(22px, 3vw, 40px);
  bottom: clamp(22px, 3vw, 40px);
  display: grid;
  gap: 10px;
}

.door-k {
  font-size: 0.625rem;
  color: rgb(255 255 255 / 0.75);
}

.door-t {
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  font-weight: 900;
  line-height: 1.3;
}

.door-x {
  max-width: 30em;
  color: rgb(255 255 255 / 0.85);
  font-size: 0.875rem;
  line-height: 1.9;
}

.door-go {
  justify-self: start;
  width: 48px;
  height: 48px;
  margin-top: 6px;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 11h8m-3-3.5L15.5 11 12 14.5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
  transition: background-color 0.3s, border-color 0.3s;
}

.door:hover .door-go,
.door:focus-visible .door-go {
  border-color: transparent;
  background-color: #c63d75;
}

.cta-lead {
  margin: -24px 0 40px;
  color: rgb(255 255 255 / 0.82);
  line-height: 1.9;
}

/* ---------------------------------------------------------- 下の階層の共通 */

.sub-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(78svh, 760px);
  padding: calc(var(--hh) + 48px) 0 clamp(56px, 7vw, 96px);
  overflow: hidden;
  isolation: isolate;
}

.sub-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.sub-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.sub-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.85) 0%, rgb(0 0 0 / 0.35) 70%),
    linear-gradient(0deg, #000 0%, transparent 45%);
}

.sub-hero.is-plain {
  min-height: auto;
  padding-bottom: clamp(40px, 5vw, 64px);
}

.sub-hero .streak {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--grad);
  opacity: 0.8;
}

.sub-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  color: rgb(255 255 255 / 0.72);
}

.sub-crumb li + li::before {
  content: "/";
  margin-right: 10px;
  color: rgb(255 255 255 / 0.4);
}

.sub-crumb a {
  /* 字は小さいまま、押せる範囲だけ 44px に広げる（見た目の位置は変えない） */
  display: inline-block;
  padding: 14px 4px;
  margin: -14px -4px;
  color: inherit;
  text-underline-offset: 3px;
}

.sub-k {
  margin: 0 0 18px;
  font-size: 0.6875rem;
  color: rgb(255 255 255 / 0.75);
}

.sub-title {
  margin: 0;
  font-size: clamp(1.875rem, 1.1rem + 4.6vw, 5.5rem);
  font-weight: 900;
  line-height: 1.15;
}

.sub-lead {
  max-width: 38em;
  margin: 28px 0 0;
  color: rgb(255 255 255 / 0.85);
  line-height: 2;
}

.sub-sec {
  padding: clamp(80px, 10vw, 150px) 0;
}

.sub-sec + .sub-sec {
  padding-top: 0;
}

.sub-sec.is-surface {
  background: var(--surface);
  padding-top: clamp(80px, 10vw, 150px);
}

.sub-sec.is-surface + .sub-sec {
  padding-top: clamp(80px, 10vw, 150px);
}

.sub-h {
  margin: 0 0 clamp(32px, 4vw, 56px);
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3rem);
  font-weight: 900;
  line-height: 1.3;
}

.sub-p {
  max-width: 40em;
  margin: 0 0 1.4em;
  color: rgb(255 255 255 / 0.82);
  line-height: 2.1;
}

.sub-two {
  display: grid;
  gap: 28px 64px;
}

@media (min-width: 900px) {
  .sub-two {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }
}

/* 番号つきの行（静かな一覧） */
.feat {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.feat > li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px 20px;
  padding: clamp(24px, 3vw, 36px) 0;
  border-bottom: 1px solid var(--line);
}

.feat-no {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 200;
  font-size: 1.75rem;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.feat h3 {
  margin: 0 0 8px;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 900;
  line-height: 1.45;
}

.feat h3 .en {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.75rem;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
}

.feat p {
  margin: 0;
  color: rgb(255 255 255 / 0.8);
  line-height: 2;
}

@media (min-width: 900px) {
  .feat > li {
    grid-template-columns: 90px minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: baseline;
  }

  .feat > li > div {
    display: contents;
  }

  .feat-no {
    font-size: 2.25rem;
  }
}

/* 4 工程 */
.steps-b {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: st;
}

@media (min-width: 900px) {
  .steps-b {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.steps-b li {
  position: relative;
  padding: 26px 22px 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgb(255 255 255 / 0.02);
  counter-increment: st;
}

.steps-b li::before {
  content: "0" counter(st);
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--ink-dim);
}

.steps-b b {
  display: block;
  font-size: 1.25rem;
  font-weight: 900;
}

.steps-b span {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.75rem;
  color: var(--ink-dim);
}

.note-b {
  margin: 20px 0 0;
  color: rgb(255 255 255 / 0.78);
  font-size: 0.875rem;
  line-height: 1.9;
}

/* 短期・長期の収益 */
.rev-b {
  display: grid;
  gap: 16px;
}

@media (min-width: 900px) {
  .rev-b {
    grid-template-columns: 1fr 1fr;
  }
}

.rev-b > div {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.rev-b h3 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  font-weight: 900;
}

.rev-b h3 .tech {
  display: block;
  margin-bottom: 8px;
  font-size: 0.625rem;
  font-weight: 400;
  color: var(--ink-dim);
}

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

.chips-b li {
  padding: 8px 14px;
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
}

/* 一言の引用 */
.quote-b {
  margin: 0;
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2.25rem);
  font-weight: 900;
  line-height: 1.6;
}

.quote-b .gt {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* よくある質問 */
.qa-b {
  border-top: 1px solid var(--line);
}

.qa-b details {
  border-bottom: 1px solid var(--line);
}

.qa-b summary {
  position: relative;
  display: block;
  padding: 24px 52px 24px 0;
  font-weight: 700;
  line-height: 1.7;
  cursor: pointer;
  list-style: none;
}

.qa-b summary::-webkit-details-marker {
  display: none;
}

.qa-b summary::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s;
}

.qa-b details[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -3px;
}

.qa-b details p {
  margin: 0 0 26px;
  color: rgb(255 255 255 / 0.82);
  line-height: 2;
}

/* 会社概要の表 */
.co-b {
  margin: 0;
  border-top: 1px solid var(--line);
}

.co-b div {
  display: grid;
  gap: 6px 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 768px) {
  .co-b div {
    grid-template-columns: 180px minmax(0, 1fr);
  }
}

.co-b dt {
  color: var(--ink-dim);
  font-size: 0.875rem;
}

.co-b dd {
  margin: 0;
  line-height: 1.9;
}

/* 下の階層の締め（トップの .cta を低くしたもの） */
.cta.is-sub {
  min-height: min(80svh, 760px);
}

/* ---------------------------------------------------------- お問い合わせのフォーム（黒地） */

.form-b {
  display: grid;
  gap: 26px;
  max-width: 760px;
}

.form-b label,
.form-b fieldset {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.form-b .label,
.form-b legend {
  padding: 0;
  font-weight: 700;
  font-size: 0.9375rem;
}

.form-b .req,
.form-b .opt {
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  vertical-align: 2px;
}

.form-b .req {
  background: #c63d75;
  color: #fff;
}

.form-b .opt {
  border: 1px solid rgb(255 255 255 / 0.3);
  color: rgb(255 255 255 / 0.75);
}

.form-b input[type="text"],
.form-b input[type="email"],
.form-b input[type="url"],
.form-b textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid #3a3a46;
  border-radius: 6px;
  background: #0e0e13;
  color: #fff;
  font: inherit;
  font-size: 1rem;
}

.form-b textarea {
  min-height: 180px;
  line-height: 1.8;
}

.form-b input:focus-visible,
.form-b textarea:focus-visible {
  outline: 2px solid #26a1e4;
  outline-offset: 2px;
  border-color: transparent;
}

.form-b .choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.form-b .choices label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid #3a3a46;
  border-radius: 999px;
  cursor: pointer;
}

.form-b .choices label:has(input:checked) {
  border-color: #fff;
  background: rgb(255 255 255 / 0.08);
}

.form-b input[type="radio"],
.form-b input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #c63d75;
}

.form-b .agree {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}

.form-b .purpose {
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: rgb(255 255 255 / 0.8);
  font-size: 0.875rem;
  line-height: 1.9;
}

.form-b button[type="submit"] {
  justify-self: start;
}

.form-b .form-status {
  margin: 0;
  color: rgb(255 255 255 / 0.85);
}

/* 下の階層の写真 */
.sub-fig {
  margin: clamp(24px, 3vw, 40px) 0 0;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 4 / 3;
}

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

.sub-band {
  position: relative;
  height: clamp(260px, 36vw, 540px);
  overflow: hidden;
}

.sub-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.sub-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
}

.sub-band.to-surface::after {
  background: linear-gradient(180deg, #000 0%, transparent 22%, transparent 78%, var(--surface) 100%);
}

.sub-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 clamp(32px, 4vw, 56px);
}

.sub-strip figure {
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 3 / 4;
}

.sub-strip figure:nth-child(even) {
  margin-top: 28px;
}

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

@media (max-width: 599px) {
  .sub-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sub-strip figure:nth-child(n + 4) {
    display: none;
  }

  .sub-strip figure:nth-child(even) {
    margin-top: 16px;
  }
}

/* ページ内の行き先（別のページから #… で来たとき）を、固定のヘッダーに隠さない */
[id] {
  scroll-margin-top: calc(var(--hh) + 16px);
}

/* 下の階層：FV の直後の節は上の余白を詰める（FV の下に何も無い帯ができていた） */
.sub-hero + .sub-sec,
.sub-hero + .sub-sec.is-surface {
  padding-top: clamp(56px, 7vw, 100px);
}

/* 外のサイト（M&C Creation）へ移るリンクの印 */
.gnav a .ext {
  margin-left: 4px;
  font-size: 0.75em;
  opacity: 0.7;
}

.footer-bottom .tentative a {
  display: inline-block;
  padding-block: 14px;
  margin-block: -14px;
  color: inherit;
  text-underline-offset: 3px;
}

/* 横に進む列：見出し・写真・番号・説明が 1 画面の高さに必ず収まるよう、カードの幅を画面の高さからも決める
   （高さの足りない画面で、01 の説明が画面の下に切れたまま横へ流れていった） */
@media (min-width: 900px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .hs-sticky {
    gap: clamp(20px, 3.2svh, 40px);
    padding: calc(var(--hh) + 8px) 0 32px;
  }

  .hs-head h2 {
    font-size: clamp(1.5rem, min(1rem + 2.6vw, 5svh), 3.25rem);
  }

  .ath-card {
    /* 写真は 4:5。写真以外（番号・名前・説明）に約 230px、見出しとヘッダーに約 250px を残す */
    width: clamp(180px, min(21vw, (100svh - 500px) * 0.8), 330px);
  }

  .ath-card.is-tall {
    margin-top: clamp(16px, 3svh, 48px);
  }

  .ath-card figure {
    margin-bottom: 12px;
  }

  .ac-no {
    font-size: 2rem;
  }

  .ac-text {
    line-height: 1.8;
  }
}

/* FV の足元：6 競技の点が狭い画面で溢れ、止めるボタンが画面の外へ押し出されていた。
   競技名と止めるボタンを 1 段目、点を 2 段目に分ける。点の的は 44px 角のまま
   （点と止めるボタンを同じ段に置くと、320px で点を 32px まで細くするしかなかった） */
@media (max-width: 599px) {
  .hero-foot {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .hero-who {
    flex: 1 1 0;
  }

  .hero-dots {
    order: 1;
    flex-basis: 100%;
    gap: 0;
    margin-left: -10px;
  }

  .hero-dots i {
    width: 24px;
  }
}

/* 写真ごとの見せる位置（人物の位置が写真ごとに違う）。広い画面は --pos、狭い画面は --pos-sp */
.shot img {
  object-position: var(--pos, 50% 50%);
}

@media (max-width: 899px) {
  .shot img {
    object-position: var(--pos-sp, 50% 20%);
  }
}

/* 狭い画面：足元が 2 段になったぶん、文字の塊を上げる（競技名が入口のボタンに重なっていた） */
@media (max-width: 599px) {
  .hero-copy {
    bottom: 132px;
  }
}

/* ページ間の切り替えの演出（site.css の @view-transition）は B 案では使わない。
   移った先で受け入れの設定が間に合わず、演出が打ち切られて JS のエラーになっていた（Chromium） */
@view-transition {
  navigation: none;
}

/* 写真の帯のすぐ下の節は、上の余白を取る（言葉が写真に貼り付いていた） */
.sub-band + .sub-sec {
  padding-top: clamp(56px, 7vw, 100px);
}

/* ---------------------------------------------------------- 文の塊｜大きな写真（ジグザグ）
   左に見出しと小さな写真、右に短い文、では左右の量が釣り合わず、写真の横が大きく空いた */
.split {
  display: grid;
  gap: clamp(32px, 4vw, 48px);
}

.split-media {
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 4 / 3;
}

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

.split-text .sub-p:last-child,
.split-text .note-b:last-child,
.split-text .chips-b:last-child {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 96px);
    align-items: center;
  }

  .split.is-rev > :first-child {
    order: 2;
  }
}

/* ---------------------------------------------------------- 一言を写真の帯に重ねて中央に
   左に寄せると右が丸ごと空いた。1 つの山場として画面の中央で読ませる */
.quote-band {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(86svh, 820px);
  padding: clamp(80px, 10vw, 140px) 0;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.quote-band-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.quote-band-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.quote-band-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgb(0 0 0 / 0.55), transparent 80%),
    linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.25) 30%, rgb(0 0 0 / 0.25) 70%, #000 100%);
}

.quote-band.to-surface .quote-band-bg::after {
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgb(0 0 0 / 0.55), transparent 80%),
    linear-gradient(180deg, var(--surface) 0%, rgb(0 0 0 / 0.25) 30%, rgb(0 0 0 / 0.25) 70%, #000 100%);
}

.quote-band .eyebrow-l {
  color: rgb(255 255 255 / 0.75);
}

.quote-b.is-center {
  margin-inline: auto;
  font-size: clamp(1.625rem, 1rem + 2.8vw, 3.5rem);
  line-height: 1.55;
  text-shadow: 0 2px 30px rgb(0 0 0 / 0.6);
}

/* 本文の中の「次へ」リンク */
.text-go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  font-weight: 700;
  text-underline-offset: 5px;
}

.text-go::after {
  content: "→";
  margin-left: 8px;
}

/* Vision：見出しと本文を右、写真を左に（本文が右半分だけにあり、左が丸ごと空いていた） */
.vision-photo {
  display: none;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
}

.vision-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.vision-text .vision-title {
  font-size: clamp(1.625rem, 0.6rem + 3.6vw, 3.75rem);
}

@media (min-width: 1000px) {
  .vision-inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: clamp(48px, 6vw, 96px);
    align-items: center;
  }

  .vision-photo {
    display: block;
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 4 / 5;
  }

  .vision-text {
    grid-column: 2;
    grid-row: 1;
  }

  .vision-text .vision-body {
    grid-column: auto;
  }
}

.vision {
  padding-bottom: clamp(80px, 9vw, 140px);
}

.vision-figs {
  margin-top: clamp(56px, 6vw, 80px);
}

/* 狭い画面：「新しいチャレンジをしたい、」が 1 行に入る大きさに（「したい、」だけ次の行に落ちていた） */
@media (max-width: 480px) {
  .quote-b.is-center {
    font-size: 6vw;
  }
}

/* ヘッダーは下へ送っても隠さず、いつも見せる（隠れると、どこを見ているか・どこへ行けるかが分からなくなる） */
.site-header.is-hidden {
  transform: none !important;
}

/* 締めのお問い合わせ：直径 220px の丸は大きすぎた。横長の落ち着いたボタンにする（脈打つ動きもやめる） */
.cta-circle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: auto;
  aspect-ratio: auto;
  min-height: 60px;
  padding: 16px 30px 16px 36px;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.06em;
  animation: none;
  box-shadow: 0 16px 40px -18px rgb(198 61 117 / 0.7);
}

.cta-circle i {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 11h8m-3-3.5L15.5 11 12 14.5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
  transition: transform 0.4s var(--e-out);
}

.cta-circle:hover i {
  transform: translateX(4px);
}

.cta {
  min-height: min(80svh, 760px);
}

/* ---------------------------------------------------------- 5 つの支援：どの幅でも横に送る列（‹ › 付き） */
.athletes {
  height: auto !important;
}

.athletes .hs-sticky {
  position: static !important;
  min-height: 0 !important;
  padding: clamp(90px, 10vw, 150px) 0 !important;
  gap: clamp(28px, 3vw, 44px) !important;
}

.athletes .hs-track {
  width: auto !important;
  transform: none !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 8px;
}

.athletes .hs-track::-webkit-scrollbar {
  display: none;
}

.athletes .hs-track:focus-visible {
  outline: 2px solid #26a1e4;
  outline-offset: 4px;
}

.athletes .ath-card {
  width: clamp(240px, 24vw, 340px) !important;
  scroll-snap-align: start;
}

.athletes .ath-card.is-tall {
  margin-top: clamp(0px, 3vw, 40px) !important;
}

.athletes .ath-end {
  scroll-snap-align: end;
}

.hs-nav {
  display: flex;
  gap: 10px;
}

.hs-btn {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, opacity 0.3s;
}

.hs-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hs-btn:hover:not(:disabled),
.hs-btn:focus-visible {
  border-color: transparent;
  background: #c63d75;
}

.hs-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.athletes.is-fit .hs-nav,
.athletes.is-fit .hs-bar {
  display: none;
}

.athletes .hs-bar {
  display: block !important;
  position: relative;
  height: 2px;
  background: rgb(255 255 255 / 0.14);
}

.athletes .hs-bar i {
  position: absolute;
  inset: 0;
  background: var(--grad);
  transform-origin: left;
  transition: transform 0.2s linear;
}

@media (max-width: 599px) {
  .athletes .hs-head {
    justify-content: center;
  }

  .athletes .ath-card {
    width: min(76vw, 300px) !important;
  }

  .hs-nav {
    flex-basis: 100%;
    justify-content: center;
    margin-top: 8px;
  }
}

/* 行の地は行の幅の中だけ（右の写真の枠まで食い込んでいた） */
@media (min-width: 1000px) {
  .svc a::before {
    inset: 0 -16px;
    border-radius: 6px;
  }
}

/* WebKit（Safari）は、塗りが透明なグラデーションの字（background-clip: text）に親の text-shadow が掛かると、
   影で字を塗りつぶして見えなくする（一言の帯の 3 行目が Safari でだけ消えていた）。影は字の外にだけ落とす */
.quote-b .gt {
  text-shadow: none;
  filter: drop-shadow(0 2px 18px rgb(0 0 0 / 0.6));
}

/* グラデーションの字の中の「途中で折らない」区切りは inline のまま（inline-block にすると WebKit で字が消える）。
   折らないのは white-space で守る */
.gt .nb {
  display: inline;
  white-space: nowrap;
}

/* Vision の見出し：1000〜1300px の右の列は狭く「ソーシャルメディア／に」と 1 字だけ次の行へ落ちた。列の幅に合わせて字を小さく */
@media (min-width: 1000px) {
  .vision-text .vision-title {
    font-size: clamp(1.75rem, 0.4rem + 2.6vw, 3.75rem);
  }
}

/* 締めの見出しは狭い画面で「番だ。」が次の行に落ちた。幅に合わせて字を小さく */
@media (max-width: 389px) {
  .cta h2 {
    font-size: 8.6vw;
  }
}

/* 5 つの支援のカード：縦長 4:5 の写真が大きすぎ、説明文が画面の下に押し出されていた。
   写真は 4:3 に、カードの幅も少し絞って、写真・番号・名前・説明が 1 画面に収まるようにする */
.athletes .ath-card img {
  aspect-ratio: 4 / 3;
}

.athletes .ath-card {
  width: clamp(230px, 22vw, 300px) !important;
}

.athletes .ath-card.is-tall {
  margin-top: clamp(0px, 2vw, 28px) !important;
}

.athletes .ath-card figure {
  margin-bottom: 14px;
}

.athletes .ac-no {
  font-size: 2rem;
}

/* FV の切り替え：消える写真の拡大（scale）が切り替えの瞬間に 1.08 へ戻り、一瞬大きくなって見えていた。
   消える写真は拡大を戻さずそのまま幕で閉じる。出る写真の寄りも切り替えの間隔（3.5 秒）の中で終える */
.shot.is-on img {
  transition: scale 3.4s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.shot.is-off img {
  scale: 1;
  transition: none;
}

/* 「サービスの全体を見る」の帯 */
.go-band {
  display: grid;
  gap: 28px;
  align-items: end;
}

.go-band .sub-h {
  margin-bottom: 24px;
}

@media (min-width: 900px) {
  .go-band {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
  }
}

.go-band .btn.is-line {
  --btn-bg: var(--surface);
  justify-self: start;
}

/* 送るボタンはカードの下、進み具合の線の右に（見出しの下に置くと、見出しと列の間を割って、何を送るのかが離れて見えた。
   カードのすぐ下は指が届きやすく、送ったあとの位置も同じ場所で見られる） */
.hs-foot {
  display: flex;
  align-items: center;
  gap: 20px;
}

.hs-foot .hs-bar {
  flex: 1 1 auto;
}

.athletes.is-fit .hs-foot {
  display: none;
}

@media (max-width: 599px) {
  .hs-nav {
    flex-basis: auto;
    margin-top: 0;
  }

  .hs-btn {
    width: 48px;
    height: 48px;
  }
}

/* スマホ：見出しの中央寄せを、トップと下の階層でそろえる（下の階層は英字の小見出しだけ中央で、見出しが左に残っていた）。
   中央にするのは 小見出し・見出し・FV の文。3 行を超える本文・一覧・表・カード・よくある質問の中身は左のまま */
@media (max-width: 767px) {
  .sub-h {
    text-align: center;
  }

  .sub-hero .container {
    text-align: center;
  }

  .sub-crumb {
    justify-content: center;
  }

  .sub-lead {
    margin-inline: auto;
  }

  .go-band .btn.is-line {
    justify-self: center;
  }
}

/* スマホの寄せの決まり（見出しを中央にしたことで、下に置いた短いものが左に取り残されていた）：
   中央 ＝ 英字の小見出し・見出し・FV の文・チップ・「〜を見る」のリンク・注記・ボタン
   左   ＝ 本文（.sub-p）・一覧（番号の行・よくある質問）・カードの中・収益の箱の中 */
@media (max-width: 767px) {
  .split-text .chips-b,
  .sub-two .chips-b,
  .go-band .chips-b {
    justify-content: center;
  }

  .note-b {
    text-align: center;
  }

  .sub-lead {
    text-wrap: balance;
  }
}

/* タブレットの幅（600〜767px）：中央の見出しの下で、左寄せの本文が画面の端まで広がって片寄って見えた。
   本文の箱を中央に置き、行の長さを絞る（字は左のまま） */
@media (max-width: 767px) {
  .split-text .sub-p,
  .vision-body {
    max-width: 34em;
    margin-inline: auto;
  }
}

/* 768〜899px：FV はスマホの組み方（写真の上に中央の文）なのに、その下の見出しは PC と同じ左寄せで、
   画面の中で寄せが割れていた。1 列に並ぶこの幅も、スマホと同じ寄せにそろえる（2 列になる 900px からは左） */
@media (min-width: 768px) and (max-width: 899px) {
  .sec-title,
  .eyebrow-l,
  .hs-head,
  .sub-h,
  .sub-hero .container,
  .note-b {
    text-align: center;
  }

  .hs-head,
  .sub-crumb,
  .split-text .chips-b,
  .sub-two .chips-b,
  .go-band .chips-b {
    justify-content: center;
  }

  .sub-lead,
  .split-text .sub-p,
  .vision-body {
    margin-inline: auto;
  }

  .split-text .sub-p,
  .vision-body {
    max-width: 34em;
  }

  .vision-inner > .vision-text {
    text-align: center;
  }

  .vision-body,
  .vision-figs {
    text-align: left;
  }

  .go-band .btn.is-line {
    justify-self: center;
  }
}

/* iPhone の Safari でスクロールがかくつく原因を外す：
   - ヘッダーのすりガラス（backdrop-filter）は、下を流れ続ける帯をフレームごとにぼかし直すので重い → 濃い地の色だけに
   - FV の光の筋の重ね（mix-blend-mode: screen）は、写真の切り替えと重なって毎フレーム合成し直す → 普通の重ねに */
.site-header.is-scrolled {
  background: rgb(0 0 0 / 0.9);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.streaks {
  mix-blend-mode: normal;
  opacity: 0.85;
}

/* 流れる帯は画面の外では止める（mca.js が .is-offscreen を付ける） */
[data-marquee].is-offscreen > .mq-inner {
  animation-play-state: paused;
}

/* 帯の「止める」ボタン：半透明で字の上に重なり、字の一部（‖）に見えた。はっきりボタンに見える地と枠に */
.keep .mq-pause {
  background: #000;
  border: 1px solid rgb(255 255 255 / 0.35);
  opacity: 1;
  box-shadow: 0 0 0 10px #000;
}

/* ---------------------------------------------------------- 提携アスリート（players/）
   一覧は players/players.csv から players.js が組み立てる。カードは押せる箱ではない（中に SNS のリンクが並ぶ）。
   写真は縦 4:5 で切り抜く。写真が無い・読めない選手はマークを置く。
   0 人のときは一覧の節を隠して「準備中」の節を出す（隠した節の次でも上の余白を持つよう .sub-sec.pl-sec で書く） */
.sub-sec.pl-sec {
  padding-top: clamp(56px, 7vw, 96px);
}

.pl-note {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .pl-card {
    animation: pl-in 0.8s var(--e-out) both;
    animation-delay: calc(var(--i, 0) * 60ms);
  }
}

.pl-grid.is-jump .pl-card {
  animation: none;
}

@keyframes pl-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

.pl-grid {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 列に足りない行（3 人を 4 列に並べるなど）で右が空かないよう、中央に寄せる */
@media (min-width: 600px) {
  .pl-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .pl-grid > li {
    flex: 0 0 calc((100% - 20px) / 2);
    min-width: 0;
  }
}

@media (min-width: 1000px) {
  .pl-grid {
    gap: 24px;
  }

  .pl-grid > li {
    flex-basis: calc((100% - 48px) / 3);
  }
}

@media (min-width: 1360px) {
  .pl-grid > li {
    flex-basis: calc((100% - 72px) / 4);
  }
}

.pl-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.pl-card[hidden] {
  display: none;
}

.pl-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #060609;
}

.pl-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 5:4 より縦に長い写真が来たら、頭ではなく足もとを切る */
  object-position: 50% 30%;
}

/* 写真の下端を地の色へ溶かす（名前の段と写真の境目を硬くしない） */
.pl-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 30%;
  background: linear-gradient(0deg, var(--surface), transparent);
  pointer-events: none;
}

.pl-photo.is-none {
  display: grid;
  place-items: center;
}

.pl-photo .pl-mark {
  width: 64px;
  height: auto;
  opacity: 0.35;
}

.pl-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 4px 20px clamp(22px, 2.4vw, 28px);
}

.pl-sport {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
}

.pl-sport::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--grad);
}

.pl-name {
  margin: 0;
  font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);
  font-weight: 900;
  line-height: 1.45;
}

.pl-en {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}

.pl-team {
  margin: 14px 0 0;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--ink-dim);
}

.pl-word {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  line-height: 1.9;
  color: rgb(255 255 255 / 0.82);
}

/* 下端へ押し下げない（margin-top: auto）。ボタンの段が違うカードが並ぶと、上の文との間に隙間が空く */
.pl-sns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 20px 0 0;
  list-style: none;
}

.pl-sns a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 999px;
  color: #fff;
  font-family: var(--en);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: border-color 0.3s;
}

@media (hover: hover) {
  .pl-sns a:hover {
    border-color: #c63d75;
  }
}

/* SNS の公式のアイコン（白の単色。字と同じ色）。アイコンのぶん広がって PC の 4 列で 1 行に 1 つずつ積まれたので、内側を詰める */
.pl-sns a {
  gap: 5px;
  padding: 0 9px;
}

.pl-ico {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* 準備中（選手 0 人） */
.pl-empty .sub-p {
  margin-bottom: 8px;
}

/* スマホ・タブレット（899px まで）の寄せ：見出し・チップは中央、カードの中は左（決まりどおり） */
@media (max-width: 899px) {
  .pl-empty {
    width: min(100%, 34em);
    margin-inline: auto;
  }
}

/* トップの提携アスリート（「トップに出さない」が付いていない人を上から最大 8 人）。写真・競技・名前だけで、押すと一覧のその人へ。
   上下の余白は前の節（しくみ）の下と次の節（2 つの入口）の上が持つので、ここは持たない */
.pl-top-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pl-top-list > li {
  flex: 0 0 calc((100% - 16px) / 2);
  min-width: 0;
}

@media (min-width: 600px) {
  .pl-top-list > li {
    flex-basis: calc((100% - 32px) / 3);
  }
}

@media (min-width: 1000px) {
  .pl-top-list {
    gap: 32px 24px;
  }

  .pl-top-list > li {
    flex-basis: calc((100% - 72px) / 4);
  }
}

.pl-top-card {
  display: grid;
  gap: 6px;
  color: #fff;
  text-decoration: none;
}

.pl-top-card .pl-photo {
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.pl-top-card .pl-photo::after {
  display: none;
}

.pl-top-card .pl-photo img {
  transition: transform 1.2s var(--e-out);
}

@media (hover: hover) {
  .pl-top-card:hover .pl-photo img {
    transform: scale(1.04);
  }
}

.pl-top-card .pl-sport {
  margin: 0;
}
/* 競技名が 2 行になるとき（320px の「3x3バスケットボール」）：語の切れ目（3x3 / バスケットボール）で折り、
   線は 1 行目の高さにそろえる。トップの狭いカードでは字の間を詰めて「バスケットボール」を 1 行に収める */
.pl-sport {
  align-items: flex-start;
  line-height: 1.6;
}
.pl-sport::before {
  flex: none;
  margin-top: calc(0.8em - 1px);
}
@media (max-width: 599px) {
  .pl-top-card .pl-sport {
    letter-spacing: 0.04em;
  }
}

.pl-top-card .pl-name {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  line-height: 1.5;
}

/* 重ねたら名前の下にブランドの線を左から伸ばす（ナビと同じ線と動き）。
   ふつうの下線は、姓・名ごとの inline-block（.nb）の中に伝わらず、あいだの空白にだけ白く引かれていた */
.pl-top-card .pl-name {
  position: relative;
  justify-self: start;
}

.pl-top-card .pl-name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--e-out);
}

.pl-top-card:hover .pl-name::after,
.pl-top-card:focus-visible .pl-name::after {
  transform: scaleX(1);
}

.pl-top-go {
  margin: clamp(28px, 4vw, 48px) 0 0;
}

/* カードの並びと「見る」は、どの幅でも中央（カードの中の字は左）。列に足りない行で右が空かないように、広い画面は見出しも中央へ */
.pl-top-list {
  justify-content: center;
}

.pl-top-go {
  text-align: center;
}

@media (min-width: 900px) {
  .pl-top .eyebrow-l,
  .pl-top .sec-title {
    text-align: center;
  }
}

/* 和文の本文は語の切れ目でだけ折る（ja-wrap.js が <wbr> を置いて .ja-wrap を付ける。Safari で語の途中で折れていた）。
   収まらないほど長い語だけは、最後の手段で折る。
   行は詰められるだけ詰める（pretty は Safari で行の長さをそろえようとして、入る語まで次の行へ送り、右に空きを残していた） */
.ja-wrap {
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: wrap;
}

/* 中央に置く短い文は右の空きにならないので、行の長さをそろえたまま */
.cta-lead.ja-wrap {
  text-wrap: balance;
}

@media (max-width: 767px) {
  .sub-lead.ja-wrap,
  .note-b.ja-wrap {
    text-wrap: balance;
  }
}

/* 「How it works →」の丸：文字と矢印が丸の上半分と下端に離れて置かれていた（grid の 2 行が高さを等分していた）。
   ひとかたまりにして丸の中央へ。矢印は文字の下に置く組み方のまま */
.ath-end {
  place-content: center;
  gap: 12px;
}

/* 流れる帯の「止める」：マウスの幅では 32px だった（指の端末だけ 44px）。どの幅でも 44px に */
.keep .mq-pause {
  width: 44px;
  height: 44px;
  margin-top: -22px;
}

/* 320px の幅では SNS のボタンが 1 行に 1 つずつ 3 段に積まれた。字と内側をひと回り詰めて 2 段に */
@media (max-width: 359px) {
  .pl-sns {
    gap: 6px;
  }

  .pl-sns a {
    gap: 5px;
    padding: 0 10px;
    font-size: 0.75rem;
    letter-spacing: 0.01em;
  }
}

/* FV の入口ボタンの札（For Athletes / For Companies）：9px で小さすぎた。ほかの英字の札と同じ 11px に */
.hero-entry .tech {
  font-size: 0.6875rem;
}

/* サンプルの札と断り書き（「サンプル」に○の行。本物の選手と取り違えないように） */
.pl-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 4px 10px;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 999px;
  background: rgb(0 0 0 / 0.72);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.pl-sample-note {
  margin: 0 0 20px;
  color: var(--ink-dim);
  font-size: 0.8125rem;
  line-height: 1.8;
}

@media (max-width: 899px) {
  .pl-sample-note {
    text-align: center;
  }
}

/* メニュー：For Companies と「企業・スポンサーの方へ」が 2 行に折れないよう、狭い画面は英字を幅に合わせる */
@media (max-width: 480px) {
  .menu-list .en {
    font-size: 6.4vw;
    white-space: nowrap;
  }

  .menu-list .ja {
    white-space: nowrap;
  }
}

/* 狭い画面：題字の上の英字が 2 行に折れて顔にかからないように */
@media (max-width: 400px) {
  .hero-kicker {
    font-size: 2.7vw;
    white-space: nowrap;
  }
}

/* 360px 前後：節の見出しが 1 文節ずつに割れないように、幅に合わせて小さくする */
@media (max-width: 389px) {
  .sec-title {
    font-size: 8.2vw;
  }
}

/* 事業の流れの行は下から現れる。ずれの分も足して、ヘッダーの下で止める */
.feat > li[id] {
  scroll-margin-top: calc(var(--hh) + 52px);
}

/* 2 段組みの幅：見出しの 1 行が 2 つに割れて 4 行にならないように */
@media (min-width: 900px) and (max-width: 1199px) {
  .sub-h {
    font-size: 3.4vw;
  }
}

/* 320px 前後：下の階層の見出しが 1 文節ずつに割れないように */
@media (max-width: 359px) {
  .sub-title {
    font-size: 8.6vw;
  }

  .sub-h {
    font-size: 8vw;
  }
}