@charset "utf-8";

/* ==========================================================================
   NIKA 3x3 official site
   ブランドカラー：ロゴのイエロー #F8CD25 ／ ブラック
   構成は参考サイト（名古屋オルクス）のプロクラブ表現を踏襲し、配色はNIKAブランド
   ========================================================================== */
/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --c-base: #050506;
  --c-base-2: #0e0e10;
  --c-base-3: #17171a;
  --c-line: #2a2a2f;
  --c-line-soft: #e4e4e7;
  --c-accent: #f8cd25;
  --c-accent-hi: #ffe379;
  --c-accent-d: #c79e00;
  --c-white: #ffffff;
  --c-text: #101013;
  --c-text-mute: #6b6b73;
  --c-text-invert: #f2f2f3;
  --c-text-invert-mute: #91919a;
  --c-bg: #ffffff;
  --c-bg-soft: #f2f2f4;
  --ff-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ff-en: "Anton", var(--ff-ja);
  --wrap: 1200px;
  --wrap-wide: 1480px;
  --gutter: 5vw;
  --header-h: 86px;
  --rail: 68px;
  /* 左右の固定レール幅（PCのみ） */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* 斜めストライプ（スポーツらしい装飾。画像は使わない） */
  --stripe: repeating-linear-gradient(-45deg, rgba(248, 205, 37, .9) 0 2px, transparent 2px 7px);
}

/* PCは左右の固定レールに本文が潜り込まないよう、余白をレール幅より広く確保する */
@media (min-width: 1201px) {
  :root {
    --gutter: max(4vw, 100px);
  }
}

@media (max-width: 1200px) {
  :root {
    --rail: 0px;
  }
}

@media (max-width: 767px) {
  :root {
    --header-h: 62px;
    --gutter: 6vw;
  }
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--ff-ja);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.9;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  overflow-wrap: anywhere;
}

body.is-locked {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

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

img,
video,
svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color .25s var(--ease), opacity .25s var(--ease);
}

a:hover {
  color: var(--c-accent-d);
}

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

table {
  border-collapse: collapse;
  width: 100%;
}

address {
  font-style: normal;
}

:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}

::selection {
  color: var(--c-base);
  background: var(--c-accent);
}

/* --------------------------------------------------------------------------
   3. Layout utilities
   -------------------------------------------------------------------------- */
.l-wrap {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}

.l-wrap--wide {
  width: min(100% - var(--gutter) * 2, var(--wrap-wide));
}

.l-wrap--narrow {
  width: min(100% - var(--gutter) * 2, 880px);
}

.l-section {
  position: relative;
  padding-block: clamp(6.4rem, 8vw, 12rem);
}

.l-section--dark {
  background: var(--c-base);
  color: var(--c-text-invert);
}

.l-section--soft {
  background: var(--c-bg-soft);
}

.u-center {
  text-align: center;
}

.u-mt-s {
  margin-top: 1.6rem;
}

.u-mt-m {
  margin-top: 3.2rem;
}

.u-mt-l {
  margin-top: 5.6rem;
}

.u-hidden {
  display: none !important;
}

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

.u-stripe {
  height: 6px;
  background: var(--stripe);
}

/* --------------------------------------------------------------------------
   4. Typography parts
   -------------------------------------------------------------------------- */
.c-heading {
  position: relative;
  margin-bottom: clamp(3.2rem, 4.5vw, 5.6rem);
}

.c-heading__en {
  position: relative;
  display: block;
  font-family: var(--ff-en);
  font-size: clamp(4.4rem, 7.5vw, 8.4rem);
  line-height: .95;
  letter-spacing: .02em;
  color: var(--c-base);
}

/* 見出しの上に細いゴールドの罫（クラブらしい“版面”の印象を出す） */
.c-heading__en::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1.6rem;
  width: 6.4rem;
  height: 3px;
  background: var(--c-accent);
}

.c-heading__ja {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.4rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--c-text-mute);
}

.c-heading__ja::before {
  content: "";
  width: 3.2rem;
  height: 2px;
  background: var(--c-accent);
}

.l-section--dark .c-heading__en {
  color: var(--c-white);
}

.l-section--dark .c-heading__ja {
  color: var(--c-accent);
}

.c-heading--center {
  text-align: center;
}

.c-heading--center .c-heading__ja {
  justify-content: center;
}

.c-heading--center .c-heading__en::before {
  left: 50%;
  transform: translateX(-50%);
}

.c-heading {
  padding-top: 1.6rem;
}

.c-lead {
  font-size: clamp(1.5rem, 1.7vw, 1.7rem);
  line-height: 2.1;
}

.c-label {
  display: inline-block;
  font-family: var(--ff-en);
  font-size: 1.2rem;
  letter-spacing: .24em;
  color: var(--c-accent-d);
}

.l-section--dark .c-label {
  color: var(--c-accent);
}

.c-title-page {
  font-family: var(--ff-en);
  font-size: clamp(4.8rem, 8.5vw, 9.6rem);
  line-height: .95;
  letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   5. Buttons / tags
   -------------------------------------------------------------------------- */
.c-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  min-width: 26rem;
  padding: 1.7rem 2.4rem;
  overflow: hidden;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-base);
  background: var(--c-accent);
  border: 2px solid var(--c-accent);
  border-radius: 2px;
}

/* ホバーで塗りが右から左へワイプする（疑似要素を使わないのでマークアップ不要） */
.c-btn {
  background-image: linear-gradient(var(--c-base), var(--c-base));
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 0% 100%;
  transition: background-size .45s var(--ease-out), color .3s var(--ease), border-color .3s var(--ease);
}

.c-btn::after {
  content: "";
  flex: 0 0 auto;
  width: 2.4rem;
  height: 1px;
  background: currentColor;
  transition: transform .4s var(--ease-out);
}

.c-btn:hover {
  color: var(--c-accent);
  border-color: var(--c-base);
  background-size: 100% 100%;
  background-position: left center;
}

.c-btn:hover::after {
  transform: translateX(6px);
}

.c-btn--ghost {
  color: var(--c-white);
  background-color: transparent;
  background-image: linear-gradient(var(--c-accent), var(--c-accent));
  border-color: rgba(255, 255, 255, .35);
}

.c-btn--ghost:hover {
  color: var(--c-base);
  border-color: var(--c-accent);
}

.c-btn--dark {
  color: var(--c-white);
  background-color: var(--c-base);
  background-image: linear-gradient(var(--c-accent), var(--c-accent));
  border-color: var(--c-base);
}

.c-btn--dark:hover {
  color: var(--c-base);
  border-color: var(--c-accent);
}

.c-btn--sm {
  min-width: 0;
  gap: 1.2rem;
  padding: 1.1rem 1.8rem;
  font-size: 1.2rem;
}

.c-btn--sm::after {
  width: 1.6rem;
}

.c-tag {
  display: inline-block;
  padding: .4rem 1.2rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.7;
  color: var(--c-base);
  background: var(--c-accent);
  border-radius: 1px;
}

.c-tag--ghost {
  color: var(--c-accent);
  background: transparent;
  border: 1px solid currentColor;
}

.c-date {
  font-family: var(--ff-en);
  font-size: 1.4rem;
  letter-spacing: .1em;
  color: var(--c-text-mute);
}

.l-section--dark .c-date {
  color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.l-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  color: var(--c-white);
  background: rgba(5, 5, 6, .86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.l-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-accent), rgba(248, 205, 37, 0) 45%);
}

.l-header__inner {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  height: 100%;
  width: min(100% - 4rem, var(--wrap-wide));
  margin-inline: auto;
}

.l-header__logo {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 1.6rem;
}

.l-header__logo a {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.l-header__logo img {
  width: auto;
  height: calc(var(--header-h) - 34px);
}

.l-header__wordmark {
  display: grid;
  line-height: 1;
}

.l-header__wordmark b {
  font-family: var(--ff-en);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: .06em;
}

.l-header__wordmark small {
  margin-top: .5rem;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--c-accent);
}

@media (max-width: 340px) {
  .l-header__wordmark {
    display: none;
  }
}

.l-header__nav {
  margin-left: auto;
}

.l-header__nav>ul {
  display: flex;
  align-items: center;
  gap: clamp(1.6rem, 2vw, 3rem);
}

.l-header__nav a {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .4rem;
  padding-block: .8rem;
  font-family: var(--ff-en);
  font-size: 1.4rem;
  letter-spacing: .08em;
  white-space: nowrap;
}

.l-header__nav a small {
  font-family: var(--ff-ja);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-text-invert-mute);
  transition: color .25s var(--ease);
}

.l-header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}

.l-header__nav a:hover,
.l-header__nav .current-menu-item>a {
  color: var(--c-accent);
}

.l-header__nav a:hover small {
  color: var(--c-accent);
}

.l-header__nav a:hover::after,
.l-header__nav .current-menu-item>a::after {
  transform: scaleX(1);
  transform-origin: left;
}

.l-header__toggle {
  display: none;
}

@media (max-width: 1100px) {
  .l-header__nav {
    display: none;
  }

  .l-header__toggle {
    position: relative;
    display: block;
    width: 4.6rem;
    height: 4.6rem;
    margin-left: auto;
    background: var(--c-accent);
  }

  .l-header__toggle span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2.2rem;
    height: 2px;
    background: var(--c-base);
    transition: transform .3s var(--ease), opacity .25s var(--ease);
  }

  .l-header__toggle span:nth-child(1) {
    transform: translate(-50%, calc(-50% - 6px));
  }

  .l-header__toggle span:nth-child(2) {
    transform: translate(-50%, -50%);
  }

  .l-header__toggle span:nth-child(3) {
    transform: translate(-50%, calc(-50% + 6px));
  }

  .l-header__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .l-header__toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .l-header__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

/* --------------------------------------------------------------------------
   6-2. 左右の固定レール（PCのみ・参考サイトの縦帯表現）
   -------------------------------------------------------------------------- */
.l-rail {
  position: fixed;
  top: var(--header-h);
  bottom: 0;
  z-index: 90;
  width: var(--rail);
  display: grid;
  align-content: space-between;
  justify-items: center;
  pointer-events: none;
}

.l-rail>* {
  pointer-events: auto;
}

.l-rail--left {
  left: 0;
  padding-block: 3.2rem;
}

.l-rail--right {
  right: 0;
  align-content: space-between;
}

@media (max-width: 1200px) {
  .l-rail {
    display: none;
  }
}

.l-rail__sns {
  display: grid;
  gap: .8rem;
  justify-items: center;
}

.l-rail__sns a {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  background: var(--c-base);
  /* 黒背景のセクション上でも輪郭が分かるように細いリングを添える */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
}

.l-rail__sns svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: var(--c-white);
  transition: fill .25s var(--ease);
}

.l-rail__sns a:hover {
  background: var(--c-accent);
  box-shadow: 0 0 0 1px var(--c-accent);
}

.l-rail__sns a:hover svg {
  fill: var(--c-base);
}

.l-rail__text {
  display: grid;
  justify-items: center;
  gap: 1.6rem;
  font-family: var(--ff-en);
  font-size: 1.1rem;
  letter-spacing: .3em;
  color: #9a9aa2;
  writing-mode: vertical-rl;
}

.l-rail__text::before {
  content: "";
  width: 1px;
  height: 8rem;
  background: linear-gradient(#c8c8ce, transparent);
}

.l-rail__contact {
  display: grid;
  place-items: center;
  width: 100%;
  /* 縦書きでは padding-block が左右に効くため、物理プロパティで上下だけに余白を付ける */
  padding: 3.6rem 0;
  color: var(--c-base);
  background: var(--c-accent);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .3em;
  writing-mode: vertical-rl;
  transition: background .3s var(--ease), color .3s var(--ease);
}

.l-rail__contact span {
  display: block;
}

.l-rail__contact:hover {
  color: var(--c-accent);
  background: var(--c-base);
}

.l-rail__pagetop {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 2.8rem 0;
  font-family: var(--ff-en);
  font-size: 1.1rem;
  letter-spacing: .24em;
  color: var(--c-white);
  background: var(--c-base);
  writing-mode: vertical-rl;
}

.l-rail__pagetop:hover {
  color: var(--c-accent);
}

/* Drawer */
.l-drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  padding: 4rem var(--gutter) 8rem;
  overflow-y: auto;
  color: var(--c-white);
  background: var(--c-base);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}

.l-drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.l-drawer__nav li+li {
  border-top: 1px solid var(--c-line);
}

.l-drawer__nav a {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1.7rem 0;
  font-family: var(--ff-en);
  font-size: 2.2rem;
  letter-spacing: .06em;
}

.l-drawer__nav a small {
  font-family: var(--ff-ja);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--c-text-invert-mute);
}

.l-drawer__nav a::after {
  content: "";
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1px;
  margin-left: auto;
  align-self: center;
  background: var(--c-accent);
}

.l-drawer__sns {
  display: flex;
  gap: 2rem;
}

.l-drawer__sns svg {
  width: 2.2rem;
  height: 2.2rem;
  fill: var(--c-white);
}

@media (min-width: 1101px) {
  .l-drawer {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   7. Main visual
   -------------------------------------------------------------------------- */
.p-mv {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(96vh, 900px);
  padding-top: var(--header-h);
  overflow: hidden;
  color: var(--c-white);
  background: var(--c-base);
}

.p-mv__media {
  position: absolute;
  inset: 0;
}

.p-mv__media img,
.p-mv__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: mv-zoom 18s var(--ease-out) forwards;
}

@keyframes mv-zoom {
  from {
    transform: scale(1.12);
  }

  to {
    transform: scale(1);
  }
}

.p-mv__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(5, 5, 6, .88) 0%, rgba(5, 5, 6, .42) 48%, rgba(5, 5, 6, .7) 100%),
    linear-gradient(0deg, rgba(5, 5, 6, .95) 0%, rgba(5, 5, 6, 0) 42%);
}

.p-mv::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.p-mv__body {
  position: relative;
  z-index: 2;
  width: min(100% - var(--gutter) * 2, var(--wrap-wide));
  margin-inline: auto;
}

.p-mv__eyebrow {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  margin-bottom: 2rem;
  font-family: var(--ff-en);
  font-size: 1.2rem;
  letter-spacing: .3em;
  color: var(--c-accent);
}

.p-mv__eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 5.6rem;
  height: 6px;
  margin-top: .55em;
  background: var(--stripe);
}

.p-mv__catch {
  font-family: var(--ff-en);
  font-size: clamp(4.2rem, 9.5vw, 11rem);
  line-height: .96;
  letter-spacing: .01em;
  text-shadow: 0 6px 34px rgba(0, 0, 0, .55);
}

.p-mv__catch em {
  font-style: normal;
  color: var(--c-accent);
}

.p-mv__sub {
  display: block;
  max-width: 62rem;
  margin-top: 2.4rem;
  padding-left: 1.6rem;
  border-left: 3px solid var(--c-accent);
  font-family: var(--ff-ja);
  font-size: clamp(1.3rem, 1.6vw, 1.6rem);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .06em;
}

.p-mv__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.4rem;
  margin-top: 3.2rem;
  font-family: var(--ff-en);
  font-size: 1.2rem;
  letter-spacing: .2em;
  color: rgba(255, 255, 255, .62);
}

.p-mv__meta span {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.p-mv__meta span::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--c-accent);
}

.p-mv__scroll {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: .8rem;
  font-family: var(--ff-en);
  font-size: 1rem;
  letter-spacing: .24em;
  color: rgba(255, 255, 255, .7);
  transform: translateX(-50%);
}

.p-mv__scroll::after {
  content: "";
  width: 1px;
  height: 6.4rem;
  background: linear-gradient(var(--c-accent), transparent);
  animation: scroll-line 2.2s var(--ease) infinite;
}

@keyframes scroll-line {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }

  45% {
    transform: scaleY(1);
    transform-origin: top;
  }

  55% {
    transform: scaleY(1);
    transform-origin: bottom;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* --------------------------------------------------------------------------
   7-2. 英字テキストマーキー（クラブのアイデンティティ帯）
   -------------------------------------------------------------------------- */
.p-ticker {
  padding-block: 1.4rem;
  overflow: hidden;
  color: var(--c-base);
  background: var(--c-accent);
}

.p-ticker__track {
  display: flex;
  width: max-content;
  font-family: var(--ff-en);
  font-size: clamp(1.6rem, 2.2vw, 2.4rem);
  line-height: 1;
  letter-spacing: .06em;
  white-space: nowrap;
  animation: ticker 30s linear infinite;
}

.p-ticker__track span {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  padding-right: 2.4rem;
}

.p-ticker__track span::after {
  content: "";
  width: 1rem;
  height: 1rem;
  background: var(--c-base);
  transform: rotate(45deg);
}

@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   8. NEXT GAME（試合日程）
   -------------------------------------------------------------------------- */
.p-nextgame {
  position: relative;
  padding-block: clamp(4.8rem, 6vw, 7.2rem);
  color: var(--c-text-invert);
  background: var(--c-base-2);
}

.p-nextgame::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--stripe);
}

.p-nextgame__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-bottom: 3.2rem;
}

.p-nextgame__title {
  font-family: var(--ff-en);
  font-size: clamp(2.8rem, 3.6vw, 4rem);
  line-height: 1;
}

.p-nextgame__title small {
  display: block;
  margin-top: .8rem;
  font-family: var(--ff-ja);
  font-size: 1.2rem;
  letter-spacing: .2em;
  color: var(--c-accent);
}

.p-nextgame__list {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
}

.p-nextgame__item {
  position: relative;
  display: grid;
  gap: 1.2rem;
  padding: 2.8rem 2.4rem 2.4rem;
  background: var(--c-base);
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-accent);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}

.p-nextgame__item:hover {
  transform: translateY(-4px);
  border-color: var(--c-accent);
}

.p-nextgame__badge {
  position: absolute;
  right: 0;
  top: 0;
  padding: .4rem 1.2rem;
  font-family: var(--ff-en);
  font-size: 1.1rem;
  letter-spacing: .16em;
  color: var(--c-base);
  background: var(--c-accent);
}

.p-nextgame__date {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-family: var(--ff-en);
  font-size: 4.4rem;
  line-height: 1;
  color: var(--c-white);
}

.p-nextgame__date small {
  font-family: var(--ff-ja);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c-accent);
}

.p-nextgame__name {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.6;
}

.p-nextgame__meta {
  display: grid;
  gap: .4rem;
  padding-top: 1.2rem;
  font-size: 1.3rem;
  color: var(--c-text-invert-mute);
  border-top: 1px dashed var(--c-line);
}

/* --------------------------------------------------------------------------
   9. News / Column リスト
   -------------------------------------------------------------------------- */
.p-newslist {
  display: grid;
  gap: 3.2rem 2.4rem;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
}

.p-newscard {
  position: relative;
}

.p-newscard a {
  display: grid;
  grid-template-rows: auto 1fr;
}

.p-newscard__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-base-3);
}

.p-newscard__thumb::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out);
}

.p-newscard:hover .p-newscard__thumb::after {
  transform: scaleX(1);
  transform-origin: left;
}

.p-newscard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}

.p-newscard:hover .p-newscard__thumb img {
  transform: scale(1.06);
}

.p-newscard__thumb .c-tag {
  position: absolute;
  left: 0;
  top: 0;
}

.p-newscard__noimg {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--c-base-3);
  background-image: var(--stripe);
  opacity: .4;
}

.p-newscard__body {
  padding-top: 1.8rem;
}

.p-newscard__title {
  margin-top: .8rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  transition: color .25s var(--ease);
}

.p-newscard:hover .p-newscard__title {
  color: var(--c-accent-d);
}

.l-section--dark .p-newscard:hover .p-newscard__title {
  color: var(--c-accent);
}

.p-newscard__excerpt {
  margin-top: .8rem;
  font-size: 1.35rem;
  color: var(--c-text-mute);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.l-section--dark .p-newscard__excerpt {
  color: var(--c-text-invert-mute);
}

/* 一覧（行タイプ） */
.p-newsrows {
  border-top: 1px solid var(--c-line-soft);
}

.l-section--dark .p-newsrows {
  border-color: var(--c-line);
}

.p-newsrows li {
  border-bottom: 1px solid var(--c-line-soft);
}

.l-section--dark .p-newsrows li {
  border-color: var(--c-line);
}

.p-newsrows a,
.p-newsrows__row {
  display: grid;
  grid-template-columns: 12rem 12rem 1fr;
  gap: 1.6rem;
  align-items: center;
  padding: 2.2rem .4rem;
}

.p-newsrows a {
  transition: background .25s var(--ease), padding-left .25s var(--ease);
}

.p-newsrows a:hover {
  padding-left: 1.6rem;
  background: rgba(248, 205, 37, .1);
}

@media (max-width: 767px) {

  .p-newsrows a,
  .p-newsrows__row {
    grid-template-columns: auto 1fr;
    row-gap: .6rem;
  }

  .p-newsrows .p-newsrows__title {
    grid-column: 1 / -1;
  }
}

.p-newsrows__title {
  font-size: 1.5rem;
  font-weight: 700;
}

/* 記事本文 */
.c-post-body {
  font-size: 1.6rem;
  line-height: 2.05;
}

.c-post-body>*+* {
  margin-top: 2.4rem;
}

.c-post-body h2 {
  margin-top: 4.8rem;
  padding: .4rem 0 .4rem 1.6rem;
  font-size: clamp(2rem, 2.6vw, 2.6rem);
  line-height: 1.5;
  border-left: 5px solid var(--c-accent);
}

.c-post-body h3 {
  margin-top: 3.6rem;
  font-size: 1.9rem;
  line-height: 1.6;
}

.c-post-body ul {
  list-style: disc;
  padding-left: 2.4rem;
}

.c-post-body ol {
  list-style: decimal;
  padding-left: 2.4rem;
}

.c-post-body a {
  color: var(--c-accent-d);
  text-decoration: underline;
}

.c-post-body table th,
.c-post-body table td {
  padding: 1.2rem;
  border: 1px solid var(--c-line-soft);
}

.c-post-body table th {
  width: 10em;
  text-align: left;
  background: var(--c-bg-soft);
}

.c-meta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

/* ページネーション */
.c-pagination {
  display: flex;
  justify-content: center;
  gap: .8rem;
  margin-top: 5.6rem;
  flex-wrap: wrap;
}

.c-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 4.4rem;
  height: 4.4rem;
  padding-inline: 1.2rem;
  font-family: var(--ff-en);
  font-size: 1.5rem;
  border: 1px solid var(--c-line-soft);
}

.c-pagination .page-numbers:hover,
.c-pagination .current {
  color: var(--c-base);
  background: var(--c-accent);
  border-color: var(--c-accent);
}

/* カテゴリー絞り込み */
.c-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 4rem;
}

.c-filter a {
  display: inline-block;
  padding: .9rem 2rem;
  font-size: 1.3rem;
  font-weight: 700;
  border: 1px solid var(--c-line-soft);
}

.c-filter a:hover,
.c-filter .is-current {
  color: var(--c-base);
  background: var(--c-accent);
  border-color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   10. About / 汎用ブロック
   -------------------------------------------------------------------------- */
.p-about {
  position: relative;
  overflow: hidden;
}

.p-about__grid {
  display: grid;
  gap: clamp(3.2rem, 5vw, 7.2rem);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

@media (max-width: 899px) {
  .p-about__grid {
    grid-template-columns: 1fr;
  }
}

.p-about__figure {
  position: relative;
}

.p-about__figure img {
  width: 100%;
}

.p-about__figure::before {
  content: "";
  position: absolute;
  left: -1.6rem;
  top: -1.6rem;
  width: 8rem;
  height: 8rem;
  background: var(--stripe);
}

.p-about__copy {
  font-size: clamp(2.2rem, 3.4vw, 3.6rem);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .02em;
}

.p-about__copy em {
  font-style: normal;
  color: var(--c-accent);
}

.l-section:not(.l-section--dark) .p-about__copy em {
  color: var(--c-accent-d);
}

.p-philosophy {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
}

.p-philosophy__item {
  position: relative;
  padding: 3.6rem 2.8rem 3.2rem;
  background: var(--c-base-2);
  border: 1px solid var(--c-line);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}

.p-philosophy__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--c-accent);
  transform: scaleX(.18);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}

.p-philosophy__item:hover {
  transform: translateY(-4px);
  border-color: var(--c-accent);
}

.p-philosophy__item:hover::before {
  transform: scaleX(1);
}

.p-philosophy__label {
  font-family: var(--ff-en);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--c-accent);
}

.p-philosophy__title {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-white);
}

.p-philosophy__text {
  margin-top: 1.6rem;
  font-size: 1.5rem;
}

.c-deflist {
  border-top: 1px solid var(--c-line-soft);
}

.c-deflist>div {
  display: grid;
  grid-template-columns: 20rem 1fr;
  gap: 2.4rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--c-line-soft);
}

.c-deflist dt {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.c-deflist dd {
  margin: 0;
}

@media (max-width: 767px) {
  .c-deflist>div {
    grid-template-columns: 1fr;
    gap: .4rem;
  }
}

.l-section--dark .c-deflist,
.l-section--dark .c-deflist>div {
  border-color: var(--c-line);
}

.c-history {
  position: relative;
  padding-left: 3.2rem;
}

.c-history::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 1rem;
  bottom: 1rem;
  width: 1px;
  background: var(--c-line-soft);
}

.c-history li {
  position: relative;
  padding-bottom: 3.6rem;
}

.c-history li::before {
  content: "";
  position: absolute;
  left: -3.2rem;
  top: 1rem;
  width: 9px;
  height: 9px;
  background: var(--c-accent);
}

.c-history__date {
  font-family: var(--ff-en);
  font-size: 1.8rem;
  letter-spacing: .06em;
  color: var(--c-accent-d);
}

.l-section--dark .c-history__date {
  color: var(--c-accent);
}

.c-history__text {
  font-size: 1.5rem;
}

.c-ceo {
  display: grid;
  gap: .4rem;
  margin-top: 3.2rem;
}

.c-ceo__role {
  font-size: 1.3rem;
  letter-spacing: .1em;
  color: var(--c-text-mute);
}

.c-ceo__name {
  font-size: 2.4rem;
  font-weight: 900;
}

.c-ceo__en {
  font-family: var(--ff-en);
  font-size: 1.3rem;
  letter-spacing: .14em;
  color: var(--c-text-mute);
}

/* --------------------------------------------------------------------------
   11. Players
   -------------------------------------------------------------------------- */
.p-players {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
}

.p-player {
  position: relative;
  overflow: hidden;
  background: var(--c-base-2);
  border: 1px solid var(--c-line);
  transition: border-color .3s var(--ease);
}

.p-player:hover {
  border-color: var(--c-accent);
}

.p-player a {
  display: block;
}

.p-player__thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-base-3);
}

.p-player__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 5, 6, .95) 6%, rgba(5, 5, 6, .05) 58%);
}

.p-player__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: transform .6s var(--ease-out), filter .5s var(--ease);
}

.p-player:hover .p-player__thumb img {
  transform: scale(1.05);
  filter: none;
}

.p-player__no {
  position: absolute;
  right: .8rem;
  top: -.6rem;
  z-index: 1;
  font-family: var(--ff-en);
  font-size: 7.2rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .32);
  transition: -webkit-text-stroke-color .3s var(--ease);
}

.p-player:hover .p-player__no {
  -webkit-text-stroke-color: var(--c-accent);
}

.p-player__body {
  position: relative;
  z-index: 1;
  margin-top: -6.8rem;
  padding: 0 1.8rem 2rem;
  color: var(--c-white);
}

.p-player__pos {
  display: inline-block;
  margin-bottom: .8rem;
  padding: .2rem .8rem;
  font-family: var(--ff-en);
  font-size: 1.1rem;
  letter-spacing: .12em;
  color: var(--c-base);
  background: var(--c-accent);
}

.p-player__name {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
}

.p-player__en {
  font-family: var(--ff-en);
  font-size: 1.2rem;
  letter-spacing: .12em;
  color: var(--c-text-invert-mute);
}

.p-playerhead {
  display: grid;
  gap: clamp(2.4rem, 5vw, 6.4rem);
  grid-template-columns: minmax(0, 40rem) 1fr;
  align-items: start;
}

@media (max-width: 899px) {
  .p-playerhead {
    grid-template-columns: 1fr;
  }
}

.p-playerhead__thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-base-3);
}

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

.p-playerhead__thumb::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 9rem;
  height: 6px;
  background: var(--stripe);
}

.p-playerhead__no {
  font-family: var(--ff-en);
  font-size: clamp(6.4rem, 11vw, 11rem);
  line-height: .85;
  color: var(--c-accent);
}

.p-playerhead__name {
  font-size: clamp(3rem, 4.2vw, 4.4rem);
  font-weight: 900;
  line-height: 1.25;
}

.p-playerhead__kana {
  display: block;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--c-text-mute);
}

.p-playerhead__en {
  font-family: var(--ff-en);
  font-size: 1.7rem;
  letter-spacing: .14em;
  color: var(--c-text-mute);
}

.p-playerhead__message {
  margin-top: 2.4rem;
  padding: 2.4rem;
  font-size: 1.5rem;
  background: var(--c-bg-soft);
  border-left: 4px solid var(--c-accent);
}

/* --------------------------------------------------------------------------
   12. 3x3 比較表・ルール
   -------------------------------------------------------------------------- */
.c-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.c-table {
  min-width: 56rem;
  font-size: 1.5rem;
}

.c-table th,
.c-table td {
  padding: 1.6rem 1.8rem;
  text-align: left;
  border-bottom: 1px solid var(--c-line-soft);
}

.c-table thead th {
  font-family: var(--ff-en);
  font-size: 1.6rem;
  letter-spacing: .08em;
  color: var(--c-white);
  background: var(--c-base);
}

/* 3x3と5人制の比較表だけ、2列目（3x3側）をゴールドで強調する */
.c-table--compare thead th:nth-child(2) {
  color: var(--c-base);
  background: var(--c-accent);
}

.c-table tbody th {
  width: 16rem;
  font-weight: 700;
  background: rgba(0, 0, 0, .03);
}

.p-rules {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  counter-reset: rule;
}

.p-rule {
  position: relative;
  padding: 3.6rem 2.6rem 2.8rem;
  background: var(--c-white);
  border: 1px solid var(--c-line-soft);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}

.p-rule:hover {
  transform: translateY(-4px);
  border-color: var(--c-accent);
}

.p-rule::before {
  counter-increment: rule;
  content: "0" counter(rule);
  position: absolute;
  right: 1.6rem;
  top: .8rem;
  font-family: var(--ff-en);
  font-size: 4.4rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(16, 16, 19, .2);
}

.p-rule__title {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.p-rule__text {
  margin-top: 1.2rem;
  font-size: 1.45rem;
  color: var(--c-text-mute);
}

/* --------------------------------------------------------------------------
   13. School
   -------------------------------------------------------------------------- */
.p-coaches {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
}

.p-coach {
  padding: 2.8rem 2.4rem;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line-soft);
  border-top: 3px solid var(--c-accent);
}

.l-section--soft .p-coach {
  background: var(--c-white);
}

.p-coach__thumb {
  width: 12rem;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 50%;
  background: #ddd;
}

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

.p-coach__name {
  margin-top: 1.6rem;
  font-size: 1.9rem;
  font-weight: 700;
  text-align: center;
}

.p-coach__kana {
  font-size: 1.2rem;
  color: var(--c-text-mute);
  text-align: center;
}

.p-coach__list {
  margin-top: 1.6rem;
  font-size: 1.4rem;
}

.p-coach__list div {
  display: flex;
  gap: .8rem;
  padding: .5rem 0;
  border-bottom: 1px dashed #d6d6da;
}

.p-coach__list dt {
  flex: 0 0 6.5em;
  font-weight: 700;
}

.p-coach__list dd {
  margin: 0;
}

.c-faq {
  border-top: 1px solid var(--c-line-soft);
}

.c-faq__item {
  border-bottom: 1px solid var(--c-line-soft);
}

.c-faq__q {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  width: 100%;
  padding: 2.2rem .4rem;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: left;
}

.c-faq__q::before {
  content: "Q";
  font-family: var(--ff-en);
  font-size: 1.8rem;
  line-height: 1.4;
  color: var(--c-accent-d);
}

.c-faq__q::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  margin-top: .8rem;
  width: 1rem;
  height: 1rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
}

.c-faq__q[aria-expanded="true"]::after {
  transform: rotate(-135deg);
}

.c-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
}

.c-faq__a.is-open {
  grid-template-rows: 1fr;
}

.c-faq__a>div {
  overflow: hidden;
}

.c-faq__a p {
  padding: 0 .4rem 2.2rem 3rem;
  font-size: 1.5rem;
  color: var(--c-text-mute);
}

.c-map {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-bg-soft);
}

.c-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.c-note {
  padding: 2.4rem;
  font-size: 1.45rem;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line-soft);
  border-left: 4px solid var(--c-accent);
}

.l-section--soft .c-note {
  background: var(--c-white);
}

/* --------------------------------------------------------------------------
   14. Partner
   -------------------------------------------------------------------------- */
.p-partner-group+.p-partner-group {
  margin-top: clamp(4rem, 6vw, 7.2rem);
}

.p-partner-group__title {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-bottom: 2.4rem;
  font-family: var(--ff-en);
  font-size: clamp(2.2rem, 3vw, 3.2rem);
  line-height: 1;
}

.p-partner-group__title::before {
  content: "";
  width: 3.2rem;
  height: 6px;
  background: var(--stripe);
}

.p-partner-group__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-line-soft);
}

.l-section--dark .p-partner-group__title::after {
  background: var(--c-line);
}

/* ロゴは小さい画面でも必ず2列以上並ぶようにする（1列だと1社ごとに画面いっぱいになるため） */
.p-partners {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

@media (min-width: 600px) {
  .p-partners {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }

  .p-partners--lg {
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  }
}

/* ロゴは正方形タイルで統一。横長〜縦長まで比率がバラバラなので
   object-fit: contain で中央に収め、余白だけで見栄えをそろえる */
.p-partner {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: clamp(1rem, 1.8vw, 1.8rem);
  background: var(--c-white);
  border: 1px solid var(--c-line-soft);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}

.p-partner:hover {
  border-color: var(--c-accent);
  transform: translateY(-3px);
}

.p-partner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  aspect-ratio: 1/1;
}

/* トップのロゴマーキー（参考サイトの「帯」表現：白地＋上下ゴールド罫＋2段流し） */
.p-logobelt {
  padding-block: 2.8rem;
  background: var(--c-white);
  border-top: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
}

/* 全幅の帯は視覚的に重いので、見出し・ボタンとの間隔を明示して上下対称にする */
.l-section .p-logobelt {
  margin-block: clamp(5.6rem, 6.5vw, 7.2rem);
}

.p-logobelt__row {
  overflow: hidden;
}

.p-logobelt__row+.p-logobelt__row {
  margin-top: 2.4rem;
}

.p-logobelt__track {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  width: max-content;
  /* 参考サイトの実測（約53px/秒）に合わせた速度 */
  animation: belt 32s linear infinite;
}

.p-logobelt__row--b .p-logobelt__track {
  animation-duration: 40s;
  animation-delay: -13s;
}

.p-logobelt__track a,
.p-logobelt__track span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  /* スポンサーページのタイルと同じく正方形でそろえる */
  width: 9.6rem;
  height: 9.6rem;
  padding: .6rem;
}

.p-logobelt__track img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes belt {
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   15. CTA / Contact form
   -------------------------------------------------------------------------- */
.p-cta {
  position: relative;
  padding-block: clamp(6.4rem, 8vw, 10rem);
  overflow: hidden;
  color: var(--c-white);
  background: var(--c-base);
  text-align: center;
}

.p-cta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--stripe);
}

.p-cta::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90rem;
  height: 90rem;
  background: radial-gradient(circle, rgba(248, 205, 37, .12), transparent 60%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.p-cta>* {
  position: relative;
  z-index: 1;
}

.p-cta__title {
  font-family: var(--ff-en);
  font-size: clamp(3.6rem, 6vw, 6.4rem);
  line-height: 1;
}

.p-cta__title small {
  display: block;
  margin-top: 1.2rem;
  font-family: var(--ff-ja);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .24em;
  color: var(--c-accent);
}

.p-cta__text {
  margin-top: 2rem;
  font-size: 1.5rem;
  color: var(--c-text-invert-mute);
}

.p-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  justify-content: center;
  margin-top: 3.6rem;
}

.c-form {
  display: grid;
  gap: 2.4rem;
}

.c-form__row {
  display: grid;
  grid-template-columns: 24rem 1fr;
  gap: 1.6rem 2.4rem;
  align-items: start;
}

@media (max-width: 767px) {
  .c-form__row {
    grid-template-columns: 1fr;
  }
}

.c-form__label {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding-top: 1.2rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.c-form__req {
  padding: .2rem .8rem;
  font-size: 1.1rem;
  color: var(--c-white);
  background: #d7222a;
}

.c-form__opt {
  padding: .2rem .8rem;
  font-size: 1.1rem;
  color: var(--c-text-mute);
  background: var(--c-bg-soft);
}

.c-form input[type="text"],
.c-form input[type="email"],
.c-form input[type="tel"],
.c-form select,
.c-form textarea {
  width: 100%;
  padding: 1.3rem 1.4rem;
  font: inherit;
  font-size: 1.5rem;
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid #cfcfd5;
  border-radius: 2px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.c-form textarea {
  min-height: 18rem;
  resize: vertical;
}

.c-form :is(input, select, textarea):focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(248, 205, 37, .3);
  outline: none;
}

.c-form__error {
  margin-top: .6rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: #d7222a;
}

.c-form__note {
  font-size: 1.3rem;
  color: var(--c-text-mute);
}

.c-form__privacy {
  padding: 2.4rem;
  font-size: 1.4rem;
  background: var(--c-bg-soft);
}

.c-form__check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.c-form__submit {
  display: grid;
  justify-items: center;
  gap: 1.6rem;
}

.c-form__submit .c-btn {
  min-width: 30rem;
}

.c-alert {
  padding: 2rem 2.4rem;
  font-size: 1.5rem;
}

.c-alert--error {
  color: #8c1219;
  background: #fdecee;
  border: 1px solid #f3b8bd;
}

.c-alert--done {
  color: #14532d;
  background: #e9f7ef;
  border: 1px solid #a9ddbd;
}

.c-form__hp {
  position: absolute;
  left: -9999px;
}

/* --------------------------------------------------------------------------
   16. 下層ページの見出しビジュアル
   -------------------------------------------------------------------------- */
.p-pagehead {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 36rem;
  padding: calc(var(--header-h) + 4.8rem) 0 4.8rem;
  color: var(--c-white);
  background: var(--c-base);
  overflow: hidden;
}

.p-pagehead::before {
  content: "";
  position: absolute;
  inset: auto -8% -55% auto;
  width: 60rem;
  height: 60rem;
  background: radial-gradient(circle, rgba(248, 205, 37, .16), transparent 62%);
}

.p-pagehead::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 18rem;
  height: 6px;
  background: var(--stripe);
}

.p-pagehead__media {
  position: absolute;
  inset: 0;
  opacity: .3;
}

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

.p-pagehead__inner {
  position: relative;
  z-index: 1;
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}

.p-pagehead__ja {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.6rem;
  font-family: var(--ff-ja);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--c-accent);
}

.p-pagehead__ja::before {
  content: "";
  width: 3.2rem;
  height: 2px;
  background: var(--c-accent);
}

/* パンくず */
.c-breadcrumb {
  padding: 1.4rem 0;
  font-size: 1.2rem;
  color: var(--c-text-mute);
  background: var(--c-bg-soft);
}

.c-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

.c-breadcrumb li+li::before {
  content: "/";
  margin-right: .8rem;
  color: #c3c3c8;
}

.c-breadcrumb a:hover {
  color: var(--c-accent-d);
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.l-footer {
  position: relative;
  padding-block: clamp(5.6rem, 7vw, 8rem) 3.2rem;
  color: var(--c-text-invert);
  background: var(--c-base-2);
}

.l-footer__top {
  display: grid;
  gap: 4.8rem;
  grid-template-columns: minmax(0, 30rem) 1fr;
}

@media (max-width: 899px) {
  .l-footer__top {
    grid-template-columns: 1fr;
  }
}

.l-footer__logo {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.l-footer__logo img {
  width: 7.2rem;
}

.l-footer__logo-text {
  display: grid;
  line-height: 1;
}

.l-footer__logo-text b {
  font-family: var(--ff-en);
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: .06em;
}

.l-footer__logo-text small {
  margin-top: .6rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--c-accent);
}

.l-footer__address {
  margin-top: 2.4rem;
  font-size: 1.3rem;
  color: var(--c-text-invert-mute);
  line-height: 2;
}

.l-footer__nav {
  display: grid;
  gap: 1.2rem 3.2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-content: start;
}

.l-footer__nav a {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: 1.4rem;
  font-weight: 700;
}

.l-footer__nav a::before {
  content: "";
  width: 8px;
  height: 1px;
  background: var(--c-accent);
  transition: width .25s var(--ease);
}

.l-footer__nav a:hover {
  color: var(--c-accent);
}

.l-footer__nav a:hover::before {
  width: 16px;
}

.l-footer__sns {
  display: flex;
  gap: 1.2rem;
  margin-top: 3.2rem;
}

.l-footer__sns a {
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  border: 1px solid var(--c-line);
}

.l-footer__sns svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: var(--c-white);
}

.l-footer__sns a:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
}

.l-footer__sns a:hover svg {
  fill: var(--c-base);
}

.l-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 5.6rem;
  padding-top: 2.4rem;
  font-size: 1.2rem;
  color: var(--c-text-invert-mute);
  border-top: 1px solid var(--c-line);
}

.l-footer__bottom ul {
  display: flex;
  gap: 1.6rem;
}

/* 明るい背景用のSNSリンク */
.c-snslist {
  display: flex;
  gap: 1.2rem;
}

.c-snslist a {
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  border: 1px solid var(--c-line-soft);
}

.c-snslist svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: var(--c-base);
}

.c-snslist a:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   18. スクロール演出
   -------------------------------------------------------------------------- */
.js-fade {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}

.js-fade.is-visible {
  opacity: 1;
  transform: none;
}

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

  .p-ticker__track,
  .p-mv__scroll::after,
  .p-mv__media img,
  .p-mv__media video {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }

  /* スポンサー帯はサイトの見せ場のため止めず、速度を半分にして負担を減らす。
     完全に止めたい場合は下の2行を animation: none; に置き換えてください */
  .p-logobelt__track {
    animation-duration: 64s;
  }

  .p-logobelt__row--b .p-logobelt__track {
    animation-duration: 80s;
  }
}

/* 動きを減らす設定の環境ではマーキーを止めるため、
   1行に切れて見えないよう折り返して中央寄せの一覧にする */
.p-logobelt__track.is-static {
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  animation: none;
}

.p-ticker__track.is-static {
  width: 100%;
  justify-content: center;
  animation: none;
}

/* --------------------------------------------------------------------------
   19. WordPress 標準クラス
   -------------------------------------------------------------------------- */
.alignleft {
  float: left;
  margin: 0 2.4rem 1.6rem 0;
}

.alignright {
  float: right;
  margin: 0 0 1.6rem 2.4rem;
}

.aligncenter {
  display: block;
  margin-inline: auto;
}

.wp-caption {
  max-width: 100%;
}

.wp-caption-text {
  margin-top: .8rem;
  font-size: 1.3rem;
  color: var(--c-text-mute);
  text-align: center;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 記事タイトル / ヒーロー画像 */
.c-post-title {
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1.5;
  font-weight: 900;
}

.c-post-hero {
  width: 100%;
}

/* 選手詳細の余白調整 */
.p-playerhead__title {
  margin-bottom: 1.2rem;
}

/* 記事下のナビ / 検索フォーム / 試合会場の補足 */
.c-meta--between {
  justify-content: space-between;
}

.c-searchrow {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.c-searchrow input[type="text"] {
  flex: 1 1 24rem;
}

.p-newsrows__venue {
  display: block;
  font-weight: 400;
  color: var(--c-text-mute);
}

.l-section--dark .p-newsrows__venue {
  color: var(--c-text-invert-mute);
}

/* ==========================================================================
   20. 追加：クラブらしさを強めるパーツ
   ========================================================================== */
/* --------------------------------------------------------------------------
   CLUB DATA（設立・拠点・選手数などの数値バンド）
   -------------------------------------------------------------------------- */
.p-data {
  margin-top: clamp(4.8rem, 6vw, 8rem);
  padding-top: clamp(3.2rem, 4vw, 4.8rem);
  border-top: 1px solid var(--c-line);
}

.p-data__list {
  display: grid;
  gap: 2.4rem 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.p-data__item {
  position: relative;
  padding-left: 2rem;
}

.p-data__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6rem;
  bottom: .6rem;
  width: 3px;
  background: var(--c-accent);
}

.p-data__num {
  display: block;
  font-family: var(--ff-en);
  font-size: clamp(3.6rem, 4.6vw, 5.2rem);
  line-height: 1;
  color: var(--c-white);
}

.p-data__num small {
  font-size: .4em;
  margin-left: .3em;
  color: var(--c-accent);
}

.p-data__label {
  display: block;
  margin-top: .8rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--c-text-invert-mute);
}

/* --------------------------------------------------------------------------
   下層ページ見出しの大型ウォーターマーク
   -------------------------------------------------------------------------- */
.p-pagehead__watermark {
  position: absolute;
  right: -2vw;
  bottom: -4vw;
  z-index: 0;
  font-family: var(--ff-en);
  font-size: min(26vw, 34rem);
  line-height: .8;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .09);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   フッターの大型ウォーターマーク
   -------------------------------------------------------------------------- */
.l-footer {
  overflow: hidden;
}

.l-footer__watermark {
  position: absolute;
  left: 50%;
  bottom: -3.5vw;
  z-index: 0;
  font-family: var(--ff-en);
  font-size: min(22vw, 26rem);
  line-height: .8;
  letter-spacing: .04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .06);
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

.l-footer>.l-wrap {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   選手詳細（ダークなヒーロー）
   -------------------------------------------------------------------------- */
.p-playerhero {
  position: relative;
  padding-block: clamp(4.8rem, 7vw, 9.6rem);
  overflow: hidden;
  color: var(--c-text-invert);
  background: var(--c-base);
}

.p-playerhero::before {
  content: attr(data-no);
  position: absolute;
  right: -1vw;
  top: 50%;
  font-family: var(--ff-en);
  font-size: min(34vw, 46rem);
  line-height: .78;
  color: transparent;
  -webkit-text-stroke: 1px rgba(248, 205, 37, .16);
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
}

.p-playerhero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.4rem, 4vw, 6.4rem);
  grid-template-columns: minmax(0, 38rem) 1fr;
  align-items: start;
}

@media (max-width: 899px) {
  .p-playerhero__grid {
    grid-template-columns: 1fr;
  }
}

.p-playerhero__photo {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-base-3);
}

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

.p-playerhero__photo::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 10rem;
  height: 6px;
  background: var(--stripe);
}

.p-playerhero__no {
  display: block;
  font-family: var(--ff-en);
  font-size: clamp(5.6rem, 9vw, 9.6rem);
  line-height: .85;
  color: var(--c-accent);
}

.p-playerhero__tag {
  display: inline-block;
  margin-bottom: 1.2rem;
}

.p-playerhero__name {
  margin-top: 1.2rem;
  font-size: clamp(3rem, 4.4vw, 4.8rem);
  font-weight: 900;
  line-height: 1.2;
}

.p-playerhero__kana {
  display: block;
  margin-top: .8rem;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--c-text-invert-mute);
}

.p-playerhero__en {
  margin-top: .8rem;
  font-family: var(--ff-en);
  font-size: 1.8rem;
  letter-spacing: .14em;
  color: var(--c-text-invert-mute);
}

.p-playerhero__profile {
  margin-top: 3.2rem;
  border-top: 1px solid var(--c-line);
}

.p-playerhero__profile>div {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 1.6rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--c-line);
}

@media (max-width: 599px) {
  .p-playerhero__profile>div {
    grid-template-columns: 1fr;
    gap: .2rem;
  }
}

.p-playerhero__profile dt {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--c-accent);
}

.p-playerhero__profile dd {
  margin: 0;
  font-size: 1.6rem;
}

.p-playerhero__message {
  margin-top: 3.2rem;
  padding: 2.4rem;
  font-size: 1.5rem;
  background: var(--c-base-2);
  border-left: 3px solid var(--c-accent);
}

.p-playerhero .c-snslist a {
  border-color: var(--c-line);
}

.p-playerhero .c-snslist svg {
  fill: var(--c-white);
}

/* --------------------------------------------------------------------------
   カードのホバー矢印
   -------------------------------------------------------------------------- */
.p-newscard__more {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.4rem;
  font-family: var(--ff-en);
  font-size: 1.1rem;
  letter-spacing: .18em;
  color: var(--c-text-mute);
  transition: color .25s var(--ease);
}

.p-newscard__more::after {
  content: "";
  width: 2rem;
  height: 1px;
  background: currentColor;
  transition: width .35s var(--ease-out);
}

.p-newscard:hover .p-newscard__more {
  color: var(--c-accent-d);
}

.p-newscard:hover .p-newscard__more::after {
  width: 3.2rem;
}

.l-section--dark .p-newscard__more {
  color: var(--c-text-invert-mute);
}

.l-section--dark .p-newscard:hover .p-newscard__more {
  color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   フィーチャーバナー（全幅の誘導ブロック）
   同じ2カラムの繰り返しになりがちな中盤のリズムを崩すために使う
   -------------------------------------------------------------------------- */
.p-feature {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(70vh, 62rem);
  padding-block: clamp(6.4rem, 9vw, 12rem);
  overflow: hidden;
  color: var(--c-white);
  background: var(--c-base);
}

.p-feature__media {
  position: absolute;
  inset: 0;
}

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

.p-feature__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(5, 5, 6, .94) 0%, rgba(5, 5, 6, .74) 42%, rgba(5, 5, 6, .35) 100%);
}

.p-feature::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: 6px;
  background: var(--stripe);
}

.p-feature__inner {
  position: relative;
  z-index: 1;
}

.p-feature__body {
  max-width: 56rem;
}

.p-feature__index {
  display: block;
  font-family: var(--ff-en);
  font-size: 1.3rem;
  letter-spacing: .3em;
  color: var(--c-accent);
}

.p-feature__title {
  margin-top: 1.2rem;
  font-family: var(--ff-en);
  font-size: clamp(4.8rem, 8vw, 9.6rem);
  line-height: .95;
  letter-spacing: .02em;
}

.p-feature__ja {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.4rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--c-accent);
}

.p-feature__ja::before {
  content: "";
  width: 3.2rem;
  height: 2px;
  background: var(--c-accent);
}

.p-feature__text {
  margin-top: 2.4rem;
  font-size: clamp(1.5rem, 1.7vw, 1.7rem);
  line-height: 2.1;
}

/* スマホでは選手一覧を2列にして、ロスター感を出しつつ縦の長さを抑える */
@media (max-width: 599px) {
  .p-players {
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    gap: 1rem;
  }

  .p-player__no {
    font-size: 5.2rem;
  }

  .p-player__body {
    margin-top: -5rem;
    padding: 0 1.2rem 1.6rem;
  }

  .p-player__name {
    font-size: 1.6rem;
  }

  .p-player__en {
    font-size: 1.05rem;
  }

  .p-player__pos {
    font-size: 1rem;
  }
}

/* ==========================================================================
   21. ブラッシュアップ
   ========================================================================== */
/* --------------------------------------------------------------------------
   NEWS：先頭記事を大きく見せる編集レイアウト
   -------------------------------------------------------------------------- */
.p-newsfeature {
  display: grid;
  gap: clamp(2.4rem, 3vw, 4rem);
  grid-template-columns: 1.35fr 1fr;
  align-items: start;
}

@media (max-width: 899px) {
  .p-newsfeature {
    grid-template-columns: 1fr;
  }
}

.p-newsfeature__list {
  display: grid;
  gap: 2.4rem;
}

/* 先頭の大きいカード */
.p-newscard--lg .p-newscard__thumb {
  aspect-ratio: 16 / 9;
}

.p-newscard--lg .p-newscard__body {
  padding-top: 2.2rem;
}

.p-newscard--lg .p-newscard__title {
  font-size: clamp(1.9rem, 2.2vw, 2.4rem);
  line-height: 1.6;
  -webkit-line-clamp: 2;
}

.p-newscard--lg .p-newscard__excerpt {
  font-size: 1.45rem;
  -webkit-line-clamp: 3;
}

/* 右側の小さいカードは横並びにして密度を上げる */
.p-newsfeature__list .p-newscard a {
  grid-template-columns: 13rem 1fr;
  grid-template-rows: auto;
  gap: 1.6rem;
  align-items: start;
}

.p-newsfeature__list .p-newscard__thumb {
  aspect-ratio: 4 / 3;
}

.p-newsfeature__list .p-newscard__body {
  padding-top: 0;
}

.p-newsfeature__list .p-newscard__excerpt,
.p-newsfeature__list .p-newscard__more {
  display: none;
}

.p-newsfeature__list .p-newscard__title {
  font-size: 1.5rem;
  -webkit-line-clamp: 3;
}

.p-newsfeature__list .p-newscard__thumb .c-tag {
  font-size: 1rem;
  padding: .2rem .8rem;
}

@media (max-width: 479px) {
  .p-newsfeature__list .p-newscard a {
    grid-template-columns: 10rem 1fr;
    gap: 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   暗いセクションに極薄のテクスチャを敷いて質感を出す（画像は使わない）
   -------------------------------------------------------------------------- */
.l-section--dark::before,
.p-nextgame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 4px);
  pointer-events: none;
}

.l-section--dark>*,
.p-nextgame>* {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   CTA：背面に大きなウォーターマーク
   -------------------------------------------------------------------------- */
.p-cta__watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  font-family: var(--ff-en);
  font-size: min(30vw, 38rem);
  line-height: .8;
  letter-spacing: .04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .055);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   選手カード：ホバーでゴールドの角を出す
   -------------------------------------------------------------------------- */
.p-player__thumb::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent var(--c-accent) transparent transparent;
  transition: border-width .35s var(--ease-out);
}

.p-player:hover .p-player__thumb::before {
  border-width: 0 4.8rem 4.8rem 0;
}

/* --------------------------------------------------------------------------
   パンくず：黒い見出しブロックと地続きに見せる
   -------------------------------------------------------------------------- */
.c-breadcrumb {
  padding: 1.5rem 0;
  font-size: 1.2rem;
  color: var(--c-text-invert-mute);
  background: var(--c-base-2);
  border-bottom: 1px solid var(--c-line);
}

.c-breadcrumb a:hover {
  color: var(--c-accent);
}

.c-breadcrumb li+li::before {
  color: #4a4a52;
}

/* --------------------------------------------------------------------------
   GALLERY（全幅の写真グリッド）
   -------------------------------------------------------------------------- */
/* 8枚が端数なく収まるよう、列数は2か4に固定する（auto-fitだと最終行が欠ける） */
.p-gallery {
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(3.2rem, 4vw, 4.8rem);
}

@media (min-width: 900px) {
  .p-gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

.p-gallery__item {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-base-3);
}

.p-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.8) contrast(1.05);
  transition: transform .6s var(--ease-out), filter .4s var(--ease);
}

.p-gallery__item:hover img {
  transform: scale(1.06);
  filter: none;
}

/* ==========================================================================
   22. スポンサーインタビュー
   ========================================================================== */
/* --------------------------------------------------------------------------
   カード
   -------------------------------------------------------------------------- */
.p-interviews {
  display: grid;
  gap: 3.2rem 2.4rem;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
}

.p-interview a {
  display: block;
}

.p-interview__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-base-3);
}

.p-interview__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}

.p-interview:hover .p-interview__thumb img {
  transform: scale(1.06);
}

.p-interview__thumb .c-tag {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--ff-en);
}

.p-interview__thumb::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out);
}

.p-interview:hover .p-interview__thumb::after {
  transform: scaleX(1);
  transform-origin: left;
}

.p-interview__body {
  padding-top: 1.8rem;
}

.p-interview__title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  transition: color .25s var(--ease);
}

.p-interview:hover .p-interview__title {
  color: var(--c-accent-d);
}

.l-section--dark .p-interview:hover .p-interview__title {
  color: var(--c-accent);
}

.p-interview__meta {
  display: grid;
  gap: .3rem;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--c-line-soft);
}

.l-section--dark .p-interview__meta {
  border-color: var(--c-line);
}

.p-interview__company {
  font-size: 1.3rem;
  font-weight: 700;
}

.p-interview__person {
  font-size: 1.4rem;
  font-weight: 700;
}

.p-interview__person small {
  margin-left: .8rem;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--c-text-mute);
}

.l-section--dark .p-interview__person small {
  color: var(--c-text-invert-mute);
}

.p-interview__body .c-date {
  display: block;
  margin-top: .8rem;
  font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   スライダー（ライブラリ不使用・スクロールスナップ）
   -------------------------------------------------------------------------- */
.p-slider {
  margin-top: clamp(2.4rem, 3vw, 3.2rem);
}

.p-slider__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.4rem;
  margin-bottom: 2.4rem;
}

.p-slider__lead {
  max-width: 56rem;
  font-size: 1.45rem;
  color: var(--c-text-invert-mute);
}

.l-section:not(.l-section--dark) .p-slider__lead {
  color: var(--c-text-mute);
}

.p-slider__nav {
  display: flex;
  gap: .8rem;
  flex: 0 0 auto;
}

.p-slider__btn {
  position: relative;
  width: 4.8rem;
  height: 4.8rem;
  border: 1px solid var(--c-line);
  background: transparent;
  transition: background .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}

.l-section:not(.l-section--dark) .p-slider__btn {
  border-color: var(--c-line-soft);
}

.p-slider__btn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1rem;
  height: 1rem;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-40%, -50%) rotate(45deg);
}

.p-slider__btn--next::before {
  transform: translate(-60%, -50%) rotate(-135deg);
}

.p-slider__btn:hover {
  color: var(--c-base);
  background: var(--c-accent);
  border-color: var(--c-accent);
}

.p-slider__btn[disabled] {
  opacity: .3;
  pointer-events: none;
}

.p-slider__track {
  display: flex;
  gap: 2.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* 画面端まで流して、左右に余白を作る */
  padding-inline: max(calc((100% - var(--wrap)) / 2), var(--gutter));
  padding-bottom: .8rem;
}

.p-slider__track::-webkit-scrollbar {
  display: none;
}

.p-slider__item {
  flex: 0 0 min(34rem, 78vw);
  scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
  .p-slider__track {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   インタビュー詳細
   -------------------------------------------------------------------------- */
.p-ivhero {
  position: relative;
  padding-block: clamp(4.8rem, 6vw, 8rem);
  color: var(--c-text-invert);
  background: var(--c-base);
}

.p-ivhero__grid {
  display: grid;
  gap: clamp(2.4rem, 4vw, 5.6rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}

@media (max-width: 899px) {
  .p-ivhero__grid {
    grid-template-columns: 1fr;
  }
}

.p-ivhero__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-base-3);
}

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

.p-ivhero__photo::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 9rem;
  height: 6px;
  background: var(--stripe);
}

.p-ivhero__title {
  margin-top: 1.6rem;
  font-size: clamp(2.2rem, 3.2vw, 3.2rem);
  font-weight: 900;
  line-height: 1.5;
}

.p-ivhero__meta {
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--c-line);
}

.p-ivhero__company {
  font-size: 1.4rem;
  color: var(--c-accent);
}

.p-ivhero__person {
  margin-top: .4rem;
  font-size: 2.2rem;
  font-weight: 700;
}

.p-ivhero__person small {
  margin-left: 1.2rem;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--c-text-invert-mute);
}

.p-ivhero__meta .c-date {
  display: block;
  margin-top: 1.2rem;
  font-size: 1.2rem;
}

.p-ivlead {
  padding: 2.4rem;
  font-size: clamp(1.6rem, 1.9vw, 1.9rem);
  font-weight: 700;
  line-height: 1.9;
  background: var(--c-bg-soft);
  border-left: 4px solid var(--c-accent);
}

/* 白抜きロゴ用：カード／帯のセルを濃色にする */
.p-partner--dark {
  background: var(--c-base);
  border-color: var(--c-line);
}

.p-logobelt__track a.is-dark,
.p-logobelt__track span.is-dark {
  background: var(--c-base);
}