@charset "UTF-8";
/* ==========================================================================
   Kakokura Portal — main.css

   【スケーリング設計】1kp-rem ≒ カンプ上の10px（純vw式）
   ルート要素（html）の font-size は変更せず、ブラウザ既定値のまま維持する。
   代わりに --kp-rem というカスタムプロパティに vw 計算式を持たせ、
   本ファイル内の全サイズを calc(var(--kp-rem) * N) の形で指定する
   （rem単位そのものは使わない）。

   - 〜767px    : SP基準（390pxカンプ） --kp-rem = 100vw / 39
   - 768〜1599px: PC基準（1600pxカンプ） --kp-rem = 100vw / 160
   - 1600px〜   : 10px固定（カンプ上限）

   768px以上では画面幅に対して同一比率で縮小・拡大する。
   767px以下でSPレイアウトに切り替わり、390pxカンプ基準で vw スケールする。
   フォントサイズのみ --kp-font-min（12px）を下限とし、max() でクランプする。

   数値はFigma実測値（px÷10）。座標コメントはカンプ上のpx値。
   ========================================================================== */

:root {
  /* SP基準（〜767px）。html要素のfont-sizeには触れない。 */
  --kp-rem: calc(100vw / 39);
}

@media (min-width: 768px) {
  :root {
    /* PC基準（768〜1599px） */
    --kp-rem: calc(100vw / 160);
  }
}

@media (min-width: 1600px) {
  :root {
    --kp-rem: 10px;
  }
}

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  --kp-color-primary: #ffd24d;
  --kp-color-primary-light: #fff2cc;
  --kp-color-secondary: #d65311;
  --kp-color-secondary-light: #fdefe7;
  --kp-color-tertiary: #313881;
  --kp-color-tertiary-light: #edf1f8;
  --kp-color-surface: #faf9f5;
  --kp-color-text: #333333;
  --kp-color-white: #ffffff;
  --kp-color-bg: #f8f7f1;
  --kp-color-badge-bg: #f2d9d9;
  --kp-color-badge-text: #ac3939;
  --kp-color-grid-line: rgba(49, 56, 129, 0.08);
  --kp-color-divider: #e6e6e6;
  --kp-color-gray: #cccccc;

  --kp-font: "LINE Seed JP", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;

  --kp-radius-card: calc(var(--kp-rem) * 3.2);
  --kp-container: calc(var(--kp-rem) * 101.6); /* 1016px */
  --kp-gutter: calc(var(--kp-rem) * 4); /* 画面端ガター PC 40 / SP は 767 以下で 20 */
  --kp-font-min: 12px;
  --kp-header-height: calc(var(--kp-rem) * 12); /* 120 */
}

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

html {
  overflow-x: hidden; /* 絶対配置イラストのはみ出しによる横スクロールを防止 */
  scroll-padding-top: var(--kp-header-height); /* 固定ヘッダー分（アンカーリンク用） */
}

body {
  margin: 0;
  padding-top: var(--kp-header-height);
  font-family: var(--kp-font);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  font-weight: 700;
  font-feature-settings: "palt" 1;
  color: var(--kp-color-text);
  background: var(--kp-color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* 絶対配置イラストのはみ出しによる横スクロールを防止 */
}

img {
  max-width: 100%;
  height: auto;
}

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

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

h1,
h2,
p,
figure {
  margin: 0;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  position: fixed;
  top: calc(var(--kp-rem) * 0.8);
  left: calc(var(--kp-rem) * 0.8);
  z-index: 100;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  padding: calc(var(--kp-rem) * 0.8) calc(var(--kp-rem) * 1.6);
  background: var(--kp-color-tertiary);
  color: var(--kp-color-white);
  border-radius: calc(var(--kp-rem) * 0.8);
}

:focus-visible {
  outline: 3px solid var(--kp-color-tertiary);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   共通ボタン
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  transform: translateY(calc(var(--kp-rem) * -0.2));
}

.btn__icon--search {
  width: calc(var(--kp-rem) * 3.2);  /* 32 */
  height: calc(var(--kp-rem) * 3.2);
}

.btn__icon--arrow {
  width: calc(var(--kp-rem) * 2.4);  /* 24 */
  height: calc(var(--kp-rem) * 2.4);
  transition: transform 0.25s ease;
}

.btn:hover .btn__icon--arrow,
.btn:focus-visible .btn__icon--arrow {
  transform: translateX(calc(var(--kp-rem) * 0.3));
}

/* 検索ピル: h80 / px40 / gap16 / 24px */
.btn--search {
  gap: calc(var(--kp-rem) * 1.6);
  height: calc(var(--kp-rem) * 8);
  padding: 0 calc(var(--kp-rem) * 4);
  background: var(--kp-color-primary);
  color: var(--kp-color-text);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2.4));
  line-height: 1.4;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ニュース一覧: px36 / py24 / gap16 / 24px */
.btn--news,
.btn--contact {
  gap: calc(var(--kp-rem) * 1.6);
  padding: calc(var(--kp-rem) * 2.4) calc(var(--kp-rem) * 3.6);
  background: var(--kp-color-secondary);
  color: var(--kp-color-white);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2.4));
  line-height: 1.4;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: inherit;
}

/* P-02 検索ボタン: px24 / py16 / gap16 / 18px */
.btn--filter {
  gap: calc(var(--kp-rem) * 1.6);
  padding: calc(var(--kp-rem) * 1.6) calc(var(--kp-rem) * 2.4);
  background: var(--kp-color-secondary);
  color: var(--kp-color-white);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.8));
  line-height: 1.4;
  flex-shrink: 0;
  align-self: flex-start;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: inherit;
}

/* --------------------------------------------------------------------------
   Header（白背景 / h120 / px40）
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--kp-color-white);
}

/* ログイン時: 管理バーの下にヘッダーを配置（WP標準の html margin-top と併用） */
body.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--kp-rem) * 12);
  padding-inline: var(--kp-gutter);
}

.site-header__brand {
  display: flex;
  align-items: center;
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: calc(var(--kp-rem) * 2.4); /* 24 */
  color: inherit;
  text-decoration: none;
}

.site-header__logo img {
  display: block;
  width: calc(var(--kp-rem) * 19.8); /* 198 */
  height: calc(var(--kp-rem) * 4.8); /* 48 */
}

.site-header__divider {
  width: 0;
  height: calc(var(--kp-rem) * 3.2); /* 32 */
  border-left: 1px solid rgba(51, 51, 51, 0.3);
}

.site-header__tagline {
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2.4)); /* 24 */
  line-height: 1;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: calc(var(--kp-rem) * 1.6); /* 16 */
}

/* ハンバーガー: 80px円 / 白バー26x6 x3 / gap6 */
.menu-toggle {
  display: grid;
  place-items: center;
  width: calc(var(--kp-rem) * 8);
  height: calc(var(--kp-rem) * 8);
  border: 0;
  border-radius: 50%;
  background: var(--kp-color-secondary);
  cursor: pointer;
}

.menu-toggle__bars {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 0.6);
}

.menu-toggle__bar {
  display: block;
  width: calc(var(--kp-rem) * 2.6);
  height: calc(var(--kp-rem) * 0.6);
  border-radius: 9999px;
  background: var(--kp-color-white);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
  transform: translateY(calc(var(--kp-rem) * 1.2)) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
  transform: translateY(calc(var(--kp-rem) * -1.2)) rotate(-45deg);
}

.global-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  padding: calc(var(--kp-rem) * 1.6) var(--kp-gutter);
}

.global-nav[hidden] {
  display: none;
}

/* Figma 308:78548 — 白カード / p40 / 角丸24 / 枠線2px */
.global-nav__panel {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 2.4);
  max-width: var(--kp-container);
  margin: 0 auto;
  padding: calc(var(--kp-rem) * 4);
  background: var(--kp-color-white);
  border: 2px solid var(--kp-color-divider);
  border-radius: calc(var(--kp-rem) * 2.4);
  box-shadow: 0 calc(var(--kp-rem) * 0.8) calc(var(--kp-rem) * 2.4) rgba(51, 51, 51, 0.08);
  opacity: 0;
  transform: translateY(calc(var(--kp-rem) * -1.6)) scale(0.98);
  transform-origin: top center;
  transition:
    opacity 0.32s ease,
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.global-nav.is-open .global-nav__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.global-nav__item,
.global-nav__rule,
.global-nav__external li {
  opacity: 0;
  transform: translateY(calc(var(--kp-rem) * 0.6));
  transition:
    opacity 0.24s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0s;
}

.global-nav.is-open .global-nav__item,
.global-nav.is-open .global-nav__rule,
.global-nav.is-open .global-nav__external li {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.18s;
}

.global-nav__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 2.4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.global-nav__link {
  display: flex;
  align-items: center;
  gap: calc(var(--kp-rem) * 1.6);
  color: var(--kp-color-text);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.8));
  font-weight: 700;
  line-height: 1.4;
}

.global-nav__link:hover {
  text-decoration: underline;
}

.global-nav__icon {
  display: block;
  width: calc(var(--kp-rem) * 2.4);
  height: calc(var(--kp-rem) * 2.4);
  flex-shrink: 0;
  color: var(--kp-color-tertiary);
  transition: transform 0.2s ease;
}

.global-nav__link:hover .global-nav__icon,
.global-nav__link:focus-visible .global-nav__icon {
  transform: translateX(calc(var(--kp-rem) * 0.3));
}

.global-nav__rule {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--kp-color-divider);
}

.global-nav__external {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 1.6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.global-nav__external-link {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--kp-rem) * 0.8);
  color: var(--kp-color-text);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  font-weight: 400;
  line-height: 1.4;
}

.global-nav__external-link:hover {
  text-decoration: underline;
}

body.nav-open {
  overflow: hidden;
}

/* PC：ハンバーガー右端（header gutter）にパネル右揃え */
@media (min-width: 768px) {
  .global-nav {
    left: auto;
    right: var(--kp-gutter);
    width: auto;
    padding: calc(var(--kp-rem) * 1.6) 0 0;
  }

  .global-nav__panel {
    width: max-content;
    min-width: calc(var(--kp-rem) * 19.1); /* Figma外部リンク幅191px */
    max-width: none;
    margin: 0;
    transform-origin: top right;
  }

  .global-nav__link {
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   Hero（1600x720 / タイトル行 y215 / バッジ y455）
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: calc(var(--kp-rem) * 72); /* 720 */
  padding-inline: var(--kp-gutter);
  overflow: hidden;
  --kp-hero-grid-line: color-mix(in srgb, #eeeadd 40%, transparent);
  background-color: var(--kp-color-bg);
  background-image:
    linear-gradient(to right, var(--kp-hero-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--kp-hero-grid-line) 1px, transparent 1px);
  background-size: calc(var(--kp-rem) * 4.8) calc(var(--kp-rem) * 4.8); /* 48 */
  background-repeat: repeat;
  background-position: calc(var(--kp-rem) * 3.2) calc(var(--kp-rem) * 3.2); /* 32,32 */
}

.hero__cloud {
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--kp-rem) * 32); /* 320 */
  pointer-events: none;
  background-image: url("../img/cloud.svg");
  background-repeat: repeat-x;
  background-position: top center;
  background-size: calc(var(--kp-rem) * 160) 100%; /* 1600px = 1タイル */
}

.hero__inner {
  position: relative;
  height: 100%;
  max-width: calc(var(--kp-rem) * 160);
  margin-inline: auto;
}

.hero__title {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--kp-rem) * 2.4); /* 行末431 → バッジ455 = 24 */
  padding-top: calc(var(--kp-rem) * 21.5); /* 行1 top = 215 */
}

.hero__heading {
  --kp-char-size: calc(var(--kp-rem) * 12); /* 120 */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* PC：1行目8文字を横一列に */
.hero__primary-group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.hero__row {
  display: flex;
}

/* 吹き出し「さぁ」: 120x88（角丸長方形＋しっぽ、Figmaベクター実測） / 行1左端+16 / 行1上-96 */
.hero__balloon {
  position: absolute;
  top: calc(var(--kp-rem) * -9.6);
  left: calc(50% - var(--kp-rem) * 38); /* 行1左端(50%-396px)+16px */
  display: block;
  width: calc(var(--kp-rem) * 12);
  aspect-ratio: 120 / 88;
}

.hero__balloon-shape {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hero__balloon-text {
  position: absolute;
  left: 50%;
  /* パス（本パス指定形状）の面積重心 y≒41.2 / 88 ≒ 46.8%（シューレース公式で算出） */
  top: 46.8%;
  transform: translate(-50%, -50%);
  color: var(--kp-color-white);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 4)); /* 40 */
  line-height: 1;
  letter-spacing: -0.08em;
  white-space: nowrap;
}

/* 行1b（自分探しに）は行1a（新しい）に.charと同じ比率で重なる */
.hero__row--primary-b {
  margin-left: calc(var(--kp-char-size) * -0.2);
}

/* 行2（出かけよう）は1行目に-24px重なる */
.hero__row--secondary {
  margin-top: calc(var(--kp-char-size) * -0.2);
}

.hero__char {
  display: grid;
  place-items: center;
  width: var(--kp-char-size);
  height: var(--kp-char-size);
  margin-right: calc(var(--kp-char-size) * -0.2); /* -24 */
  border-radius: 50%;
  background: var(--kp-color-primary);
  font-size: max(var(--kp-font-min), calc(var(--kp-char-size) * 0.5333)); /* 64 */
  line-height: 1.2;
  letter-spacing: -0.06em; /* -3.84px/64px */
  color: var(--kp-color-text);
}

.hero__char:last-child {
  margin-right: 0;
}

.hero__row--secondary .hero__char {
  background: var(--kp-color-secondary);
  color: var(--kp-color-white);
}

/* バッジ: 白 / 紺4px枠 / px32 py16 / 24px */
.hero__badge {
  display: inline-flex;
  padding: calc(var(--kp-rem) * 1.6) calc(var(--kp-rem) * 3.2);
  border: calc(var(--kp-rem) * 0.4) solid var(--kp-color-tertiary);
  border-radius: 9999px;
  background: var(--kp-color-white);
  color: var(--kp-color-tertiary);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2.4));
  line-height: 1.4;
}

/* イラスト6点（カンプ絶対座標） */
.hero__illusts {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero__illust {
  position: absolute;
  display: block;
  --kp-illust-enter-delay: 0s;
  --kp-illust-idle-duration: 4.5s;
  --kp-illust-idle-tilt: 2deg;
  animation: kp-hero-illust-idle var(--kp-illust-idle-duration) ease-in-out infinite;
  animation-delay: calc(var(--kp-illust-enter-delay) + 0.9s);
}

.hero__illust img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  --kp-illust-enter-rotate: -2deg;
  animation: kp-hero-illust-enter 0.9s ease-out forwards;
  animation-delay: var(--kp-illust-enter-delay);
}

@keyframes kp-hero-illust-enter {
  from {
    opacity: 0;
    transform: translateY(calc(var(--kp-rem) * 1.6)) scale(0.94) rotate(var(--kp-illust-enter-rotate));
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes kp-hero-illust-idle {
  0%,
  100% {
    transform: translateY(0) rotate(calc(var(--kp-illust-idle-tilt) * -1));
  }

  50% {
    transform: translateY(calc(var(--kp-rem) * -0.8)) rotate(var(--kp-illust-idle-tilt));
  }
}

.hero__illust--1 { left: calc(var(--kp-rem) * 21.8);  top: calc(var(--kp-rem) * 4);    width: calc(var(--kp-rem) * 17);   height: calc(var(--kp-rem) * 22);   --kp-illust-enter-delay: 0.1s;  --kp-illust-idle-duration: 4.2s; --kp-illust-idle-tilt: 2deg;   --kp-illust-enter-rotate: -2.5deg; }
.hero__illust--2 { left: calc(var(--kp-rem) * 3.2);   top: calc(var(--kp-rem) * 27.2); width: calc(var(--kp-rem) * 20);   height: calc(var(--kp-rem) * 19.4); --kp-illust-enter-delay: 0.25s; --kp-illust-idle-duration: 5s;   --kp-illust-idle-tilt: -2.5deg; --kp-illust-enter-rotate: 3deg; }
.hero__illust--3 { left: calc(var(--kp-rem) * 24.4);  top: calc(var(--kp-rem) * 45.6); width: calc(var(--kp-rem) * 24.2); height: calc(var(--kp-rem) * 22);   --kp-illust-enter-delay: 0.4s;  --kp-illust-idle-duration: 4.8s; --kp-illust-idle-tilt: 3deg;    --kp-illust-enter-rotate: -3deg; }
.hero__illust--4 { right: calc(var(--kp-rem) * 21.8); top: calc(var(--kp-rem) * 4);    width: calc(var(--kp-rem) * 19);   height: calc(var(--kp-rem) * 20.2); --kp-illust-enter-delay: 0.15s; --kp-illust-idle-duration: 4.6s; --kp-illust-idle-tilt: -2deg;   --kp-illust-enter-rotate: 2.5deg; }
.hero__illust--5 { right: calc(var(--kp-rem) * 3.2);  top: calc(var(--kp-rem) * 26.2); width: calc(var(--kp-rem) * 20.5); height: calc(var(--kp-rem) * 22);   --kp-illust-enter-delay: 0.3s;  --kp-illust-idle-duration: 5.2s; --kp-illust-idle-tilt: 2.5deg;  --kp-illust-enter-rotate: -2deg; }
.hero__illust--6 { right: calc(var(--kp-rem) * 24.4); top: calc(var(--kp-rem) * 45.6); width: calc(var(--kp-rem) * 17.8); height: calc(var(--kp-rem) * 22);   --kp-illust-enter-delay: 0.45s; --kp-illust-idle-duration: 4.4s; --kp-illust-idle-tilt: -3deg;   --kp-illust-enter-rotate: 2deg; }

/* --------------------------------------------------------------------------
   Tag slider（橙帯 h80 / gap24 / 20px）
   -------------------------------------------------------------------------- */
.tag-slider {
  background: var(--kp-color-secondary);
  overflow: hidden;
}

.tag-slider__track {
  display: flex;
  width: max-content;
  /* JS（main.js）が実測した1リスト分の幅を --kp-tag-distance に、
     それに応じた再生時間を --kp-tag-duration に設定し、
     画面幅やタグ数に関わらず途切れなくループさせる。
     JS未実行時のフォールバックは50%・40s（複製2個構成を前提）。 */
  animation-name: kp-tag-marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--kp-tag-duration, 40s);
}

.tag-slider:hover .tag-slider__track {
  animation-play-state: paused;
}

@keyframes kp-tag-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--kp-tag-distance, 50%)));
  }
}

.tag-slider__list {
  display: flex;
  align-items: center;
  gap: calc(var(--kp-rem) * 2.4);
  height: calc(var(--kp-rem) * 8);
  padding-right: calc(var(--kp-rem) * 2.4);
  color: var(--kp-color-white);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2));
  line-height: 1.4;
  white-space: nowrap;
}

.tag-slider__item a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Feature（カード y200 / 488x400 / gap40 / 黄円 x1200 y0 400px）
   -------------------------------------------------------------------------- */
.feature {
  position: relative;
  padding: calc(var(--kp-rem) * 20) var(--kp-gutter) calc(var(--kp-rem) * 16); /* カードtop200 / 帯まで160 */
  overflow: hidden;
}

.feature__illust--top {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(var(--kp-rem) * 40);
  height: calc(var(--kp-rem) * 40);
  color: var(--kp-color-primary-light);
  pointer-events: none;
}

.feature__illust--top svg {
  display: block;
  width: 100%;
  height: 100%;
}

.feature__inner {
  position: relative;
  display: flex;
  justify-content: center;
  gap: calc(var(--kp-rem) * 4);
  width: 100%;
  max-width: var(--kp-container);
  margin-inline: auto;
}

.feature-card {
  position: relative;
  flex: 0 1 calc(var(--kp-rem) * 48.8);
  height: calc(var(--kp-rem) * 40);
  border-radius: var(--kp-radius-card);
  background: var(--kp-color-primary);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.feature-card:hover {
  transform: translateY(calc(var(--kp-rem) * -0.6));
  box-shadow: 0 calc(var(--kp-rem) * 1.6) calc(var(--kp-rem) * 3.2) color-mix(in srgb, var(--kp-color-primary) 55%, transparent);
}

/* イラスト: 260x280 / top-80 / 中央 */
.feature-card__illust {
  position: absolute;
  top: calc(var(--kp-rem) * -8);
  left: 50%;
  width: calc(var(--kp-rem) * 26);
  height: calc(var(--kp-rem) * 28);
  transform: translateX(-50%);
}

.feature-card__illust img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ラベル: top224 / gap8 / EN24橙 / JA40 */
.feature-card__label {
  position: absolute;
  top: calc(var(--kp-rem) * 22.4);
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 0.8);
  transform: translateX(-50%);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}

.feature-card__en {
  color: var(--kp-color-secondary);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2.4));
}

.feature-card__ja {
  color: var(--kp-color-text);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 4));
}

/* 矢印: 48px / left416 top328 → right24 bottom24 */
.feature-card__arrow {
  position: absolute;
  right: calc(var(--kp-rem) * 2.4);
  bottom: calc(var(--kp-rem) * 2.4);
  color: var(--kp-color-secondary);
  transition: transform 0.25s ease;
}

.feature-card__arrow svg {
  display: block;
  width: calc(var(--kp-rem) * 4.8);
  height: calc(var(--kp-rem) * 4.8);
}

.feature-card:hover .feature-card__arrow {
  transform: translateX(calc(var(--kp-rem) * 0.6));
}

/* --------------------------------------------------------------------------
   Marquee（黄帯272 / ロゴ列 y16,104,192 各64 / キャラ200オーバーレイ）
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  margin-bottom: calc(var(--kp-rem) * 16); /* 160 */
}

.marquee__logos {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 2.4);        /* 列間24 */
  height: calc(var(--kp-rem) * 27.2);    /* 272 */
  padding: calc(var(--kp-rem) * 1.6) 0;  /* 上下16 */
}

.marquee__row {
  display: flex;
  width: max-content;
  /* JS（main.js）が実測した1グループ分の幅を --kp-marquee-distance に、
     再生時間を --kp-marquee-duration に設定する（要素ごとに個別値）。
     JS未実行時のフォールバックは50%・60s（複製2個構成を前提）。 */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--kp-marquee-duration, 60s);
}

.marquee__row--left {
  animation-name: kp-marquee;
}

.marquee__row--right {
  animation-name: kp-marquee;
  animation-direction: reverse;
}

@keyframes kp-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--kp-marquee-distance, 50%)));
  }
}

.marquee__group {
  display: flex;
  gap: calc(var(--kp-rem) * 4.8);
  padding-right: calc(var(--kp-rem) * 4.8);
}

.marquee__word {
  display: block;
  height: calc(var(--kp-rem) * 6.4); /* 64（SVGは500x64のアスペクト比を維持） */
  flex-shrink: 0;
}

.marquee__word img {
  display: block;
  height: 100%;
  width: auto;
}

/* キャラクター: 帯上にオーバーレイ（h200 / 帯272の中央） */
.marquee__illusts {
  position: absolute;
  top: calc(var(--kp-rem) * 3.6); /* (272-200)/2 */
  left: 0;
  display: flex;
  width: max-content;
  animation-name: kp-marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--kp-marquee-duration, 50s);
}

.marquee__illusts .marquee__group {
  gap: calc(var(--kp-rem) * 5.6);
  padding-right: calc(var(--kp-rem) * 5.6);
}

.marquee__illust {
  display: block;
  height: calc(var(--kp-rem) * 20); /* 200（幅は画像のアスペクト比に従う） */
  flex-shrink: 0;
}

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

/* --------------------------------------------------------------------------
   News（白 / スカラップ560x64タイル / 黄円 / 浮遊キャラ3体）
   ※ section.news に限定（CPT の post_class "news" と衝突しないように）
   -------------------------------------------------------------------------- */
section.news {
  position: relative;
  padding-inline: var(--kp-gutter);
  background: var(--kp-color-bg);
}

/* スカラップ: 560px = 1タイルでX方向リピート、--kp-color-bg(#f8f7f1)で直前のマーキー帯に被せる */
.news__scallop {
  position: absolute;
  top: calc(var(--kp-rem) * -6.3);
  left: 0;
  right: 0;
  height: calc(var(--kp-rem) * 6.4); /* 64 */
  background-image: url("../img/scallop.svg");
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: calc(var(--kp-rem) * 56) 100%;
  pointer-events: none;
}

/* 黄円（x400 y1110 400px 相当・下端で見切れ） */
.news__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.news__circle {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--kp-rem) * 40);
  height: calc(var(--kp-rem) * 40);
  color: var(--kp-color-primary-light);
  transform: rotate(180deg);
}

.news__circle svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* 浮遊キャラ（カンプ絶対座標: news top = y2032 基準） */
.news__illusts {
  position: absolute;
  inset: 0;
  max-width: calc(var(--kp-rem) * 160); /* 1600px。これ以上の画面幅では中央に固定され、デザイン位置からずれない */
  margin-inline: auto;
  pointer-events: none;
}

.news__illust {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

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

.news__illust--1 { top: calc(var(--kp-rem) * -8);   right: calc(var(--kp-rem) * 20);  width: calc(var(--kp-rem) * 20); height: calc(var(--kp-rem) * 24); } /* 1200,1952 200x240 */
.news__illust--2 { top: calc(var(--kp-rem) * 16);   left: calc(var(--kp-rem) * 16);   width: calc(var(--kp-rem) * 24); height: calc(var(--kp-rem) * 20); } /* 160,2192 240x200 */
.news__illust--3 { bottom: 0; right: calc(var(--kp-rem) * 16); width: calc(var(--kp-rem) * 20); height: calc(var(--kp-rem) * 20); } /* 1600px基準で右端から160px */

.news__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--kp-container);
  margin-inline: auto;
  padding-block: calc(var(--kp-rem) * 22.4); /* Frame15005 y=64+160=224 */
}

/* 見出し: News16橙 + JA40 + ドット10x3 gap16 */
.section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--kp-rem) * 0.8);
  margin-bottom: calc(var(--kp-rem) * 6.4); /* Title130 + 64 → List y194 */
  text-align: center;
}

.section-title__en {
  color: var(--kp-color-secondary);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2.4));
  line-height: 1;
}

.section-title__ja {
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 4));
  line-height: 1.4;
}

.section-title__dots {
  display: flex;
  gap: calc(var(--kp-rem) * 1.6);
  margin-top: calc(var(--kp-rem) * 2.4); /* 見出し下88 → ドットy120 */
}

.section-title__dots i {
  width: calc(var(--kp-rem) * 1);
  height: calc(var(--kp-rem) * 1);
  border-radius: 50%;
  background: var(--kp-color-secondary);
}

/* カード: 312幅 x3 / gap40 */
.news__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--kp-rem) * 4);
}

.news-card__link {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 2.4); /* 画像→テキスト群: 24px */
  align-items: flex-start;
}

.news-card__body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 1.6); /* 日付・タイトル・バッジ間: 16px */
  align-items: flex-start;
  width: 100%;
}

.news-card__image {
  width: 100%;
  aspect-ratio: 312 / 197;
  overflow: hidden;
  border-radius: calc(var(--kp-rem) * 1.6);
  border: 1px solid var(--kp-color-grid-line);
  background: var(--kp-color-white);
}

.news-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-card__link:hover .news-card__image img {
  transform: scale(1.05);
}

.news-card__date {
  color: var(--kp-color-tertiary);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  line-height: 1.6;
}

.news-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  line-height: 1.6;
}

/* バッジ: 重要なお知らせのみ / px16 py8 / 14px / Figma 304:22665 */
.news-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--kp-rem) * 0.8) calc(var(--kp-rem) * 1.6);
  border-radius: 9999px;
  background: var(--kp-color-badge-bg); /* #f2d9d9 */
  color: var(--kp-color-badge-text); /* #ac3939 */
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.4));
  line-height: 1;
  white-space: nowrap;
}

.news__empty {
  text-align: center;
}

/* ボタン: List下端581 → Button y645 = 64 */
.news__more {
  margin-top: calc(var(--kp-rem) * 6.4);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Footer（白背景 / p120 / gap64）
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--kp-color-white);
  padding: calc(var(--kp-rem) * 12) var(--kp-gutter);
}

.site-footer__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--kp-rem) * 8);
  height: calc(var(--kp-rem) * 12); /* 120 */
}

/* ブランド: ロゴ198x48 + タグライン24 縦gap12 */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--kp-rem) * 1.2);
  height: 100%;
  flex-shrink: 0;
}

.site-footer__brand img {
  display: block;
  width: calc(var(--kp-rem) * 19.8);
  height: calc(var(--kp-rem) * 4.8);
}

.site-footer__tagline {
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2.4));
  line-height: 1;
}

/* ナビ: 3列固定 / gap-x64 gap-y32 / 20px / アイコン24 gap16 */
.footer-nav__list {
  width: 100%;
  max-width: calc(var(--kp-rem) * 80); /* 800px @1600：3列+gapの目安 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--kp-rem) * 3.2) calc(var(--kp-rem) * 6.4);
}

.footer-nav__list a {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--kp-rem) * 1.6);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2));
  line-height: 1.4;
  white-space: nowrap;
}

.footer-nav__icon {
  display: block;
  width: calc(var(--kp-rem) * 2.4);
  height: calc(var(--kp-rem) * 2.4);
  flex-shrink: 0;
  color: var(--kp-color-tertiary);
  transition: transform 0.2s ease;
}

.footer-nav__list a:hover,
.footer-nav__list a:focus-visible {
  text-decoration: underline;
}

.footer-nav__list a:hover .footer-nav__icon,
.footer-nav__list a:focus-visible .footer-nav__icon {
  transform: translateX(calc(var(--kp-rem) * 0.3));
}

/* 罫線 */
.site-footer__rule {
  margin: calc(var(--kp-rem) * 6.4) 0;
  border: 0;
  border-top: 1px solid rgba(51, 51, 51, 0.2);
}

/* 下部: 外部リンク Regular16 + open_in_new20 gap8 / 項目gap40 / Copyright Regular14 */
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--kp-rem) * 3.2);
  flex-wrap: wrap;
}

.site-footer__external {
  display: flex;
  gap: calc(var(--kp-rem) * 4);
  flex-wrap: wrap;
}

.site-footer__external a {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--kp-rem) * 0.8);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  font-weight: 400;
  line-height: 1.4;
}

.site-footer__external a:hover {
  text-decoration: underline;
}

.ext-icon {
  width: calc(var(--kp-rem) * 2);
  height: calc(var(--kp-rem) * 2);
  color: var(--kp-color-gray);
}

.site-footer__copyright {
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.4));
  font-weight: 400;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Archive（フォールバックテンプレート）
   -------------------------------------------------------------------------- */
.archive-page__inner {
  padding-top: calc(var(--kp-rem) * 6.4); /* 64px @ 1600px */
}

/* --------------------------------------------------------------------------
   Motion preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tag-slider__track,
  .marquee__row,
  .marquee__illusts {
    animation: none;
  }

  .hero__illust {
    animation: none;
  }

  .hero__illust img {
    opacity: 1;
    animation: none;
    transform: none;
  }

  .btn,
  .btn__icon--arrow,
  .feature-card,
  .feature-card__arrow,
  .news-card__image img,
  .club-card__image img,
  .menu-toggle__bar,
  .global-nav__panel,
  .global-nav__item,
  .global-nav__rule,
  .global-nav__external li,
  .global-nav__icon,
  .footer-nav__icon {
    transition: none;
  }

  .global-nav__panel,
  .global-nav__item,
  .global-nav__rule,
  .global-nav__external li {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   下層ページ共通 / P-02 クラブをさがす
   Figma: node 299:2
   -------------------------------------------------------------------------- */
/* コンテンツ内枠: py160 / gap80（検索・区切り・リスト・区切り・ページネーション） */
.sub-page__content {
  padding-inline: var(--kp-gutter);
}

.sub-page__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--kp-rem) * 8);
  width: 100%;
  max-width: var(--kp-container);
  margin-inline: auto;
  padding: calc(var(--kp-rem) * 16) 0;
}

.sub-page__divider {
  border: 0;
  border-top: 1px solid var(--kp-color-divider);
  margin: 0;
  width: 100%;
}

/* ページタイトル帯: py48 */
.page-header {
  position: relative;
  background: var(--kp-color-surface);
  padding: calc(var(--kp-rem) * 4.8) var(--kp-gutter);
}

.page-header__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--kp-container);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 1.6);
}

.page-header__title {
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 3.2));
  line-height: 1.4;
  color: var(--kp-color-text);
}

/* イラスト: 149×160 / bottom-24 / コンテナ右端揃え（Figmaと同位置クリップ） */
.page-header__illust {
  position: absolute;
  right: max(var(--kp-gutter), calc((100% - var(--kp-container)) / 2));
  bottom: calc(var(--kp-rem) * -2.4);
  width: calc(var(--kp-rem) * 14.9);
  height: calc(var(--kp-rem) * 16);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.page-header__illust-img {
  position: absolute;
  display: block;
  width: 426.22%;
  height: 296.01%;
  max-width: none;
  left: -169.51%;
  top: -162.39%;
}

/* パンくず: 14px / gap16 / ホームアイコン gap8 */
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--kp-rem) * 1.6);
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: calc(var(--kp-rem) * 0.8);
}

.breadcrumb__sep {
  color: var(--kp-color-secondary);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.4));
  line-height: 1.4;
}

.breadcrumb__home {
  display: inline-flex;
  color: var(--kp-color-secondary);
}

.breadcrumb__home .icon {
  width: calc(var(--kp-rem) * 2);
  height: calc(var(--kp-rem) * 2);
}

.breadcrumb__link,
.breadcrumb__current {
  color: var(--kp-color-secondary);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.4));
  line-height: 1.4;
}

.breadcrumb__link:hover {
  text-decoration: underline;
}

/* クラブ検索フィルタ: 縦 gap40 */
.club-filter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--kp-rem) * 4);
  width: 100%;
}

/* 行: ラベル120 / 縦線 / チップ　gap40 */
.club-filter__row {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--kp-rem) * 4);
  width: 100%;
}

.club-filter__label {
  flex: 0 0 calc(var(--kp-rem) * 12);
  width: calc(var(--kp-rem) * 12);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  line-height: 1.4;
  text-align: center;
  color: var(--kp-color-text);
}

.club-filter__rule {
  flex-shrink: 0;
  width: 1px;
  align-self: stretch;
  min-height: calc(var(--kp-rem) * 2.8);
  background: var(--kp-color-divider);
}

.club-filter__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--kp-rem) * 0.8);
  flex: 1;
  min-width: 0;
}

/* チップ: px12 py4 / #と文言 gap4 / 14px */
.filter-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--kp-rem) * 0.4);
  padding: calc(var(--kp-rem) * 0.4) calc(var(--kp-rem) * 1.2);
  border-radius: 9999px;
  background: var(--kp-color-white);
  cursor: pointer;
  transition: background 0.2s ease;
}

.filter-chip__input {
  /* チップ全体をタップ領域に（clip 1px だとモバイルで label 連動が不安定な端末がある） */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.filter-chip__hash,
.filter-chip__text {
  position: relative;
  z-index: 1;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.4));
  line-height: 1.4;
  color: var(--kp-color-text);
  white-space: nowrap;
  pointer-events: none;
}

/* 選択状態のみ。:hover と同居させるとタッチ端末で sticky hover により解除後も選択中に見える */
.filter-chip:has(.filter-chip__input:checked) {
  background: var(--kp-color-primary);
}

@media (hover: hover) and (pointer: fine) {
  .filter-chip:hover {
    background: var(--kp-color-primary);
  }
}

/* 特設サイト news-filter と同様: 不可視 input ではなくチップ全体にフォーカスリングを出す */
.filter-chip:has(.filter-chip__input:focus-visible) {
  outline: 3px solid var(--kp-color-tertiary);
  outline-offset: 2px;
}

.filter-chip__input:focus-visible {
  outline: none;
}

.btn--filter .btn__icon--search {
  width: calc(var(--kp-rem) * 2.4);
  height: calc(var(--kp-rem) * 2.4);
}

/* クラブカード一覧: gap 64 / 40 */
.club-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--kp-rem) * 6.4) calc(var(--kp-rem) * 4);
  width: 100%;
}

.club-card__link {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 2.4);
}

.club-card__image {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--kp-color-divider);
  border-radius: calc(var(--kp-rem) * 1.6);
  aspect-ratio: 312 / 197;
  background: #e5e5e5;
}

.club-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.club-card__link:hover .club-card__image img {
  transform: scale(1.05);
}

.club-card__image--placeholder {
  background: var(--kp-color-white);
}

.club-card__image--placeholder img {
  object-fit: cover;
}

.club-card__body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 1.6);
}

.club-card__title {
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  line-height: 1.6;
}

.club-card__tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--kp-rem) * 1.2);
}

.club-card__tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--kp-rem) * 0.8);
}

.club-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--kp-rem) * 0.8) calc(var(--kp-rem) * 1.6);
  border-radius: 9999px;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.4));
  line-height: 1;
  white-space: nowrap;
}

.club-card__tag--category {
  background: var(--kp-color-primary-light);
  color: var(--kp-color-secondary);
}

.club-card__tag--region {
  background: var(--kp-color-tertiary-light);
  color: var(--kp-color-tertiary);
}

/* ページネーション: 40角 / radius4 / gap8 / Regular16（現行のみ Bold） */
.pagination {
  display: flex;
  justify-content: center;
  width: 100%;
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(var(--kp-rem) * 0.8);
}

.pagination__link,
.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--kp-rem) * 4);
  height: calc(var(--kp-rem) * 4);
  border-radius: calc(var(--kp-rem) * 0.4);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  font-weight: 400;
  line-height: 1;
  background: var(--kp-color-primary-light);
  color: var(--kp-color-text);
}

.pagination__link.is-current {
  background: var(--kp-color-primary);
  font-weight: 700;
}

.pagination__link:hover:not(.is-current) {
  background: var(--kp-color-primary);
}

.pagination__ellipsis {
  width: calc(var(--kp-rem) * 3.2);
  background: transparent;
}

/* --------------------------------------------------------------------------
   P-04 活動紹介
   Figma: node 301:17491
   -------------------------------------------------------------------------- */
.page-header__illust--activity {
  width: calc(var(--kp-rem) * 27.4); /* 274 */
  height: calc(var(--kp-rem) * 16); /* 160 */
}

.page-header__illust--activity .page-header__illust-img {
  position: static;
  width: 100%;
  height: 100%;
  left: auto;
  top: auto;
  object-fit: contain;
}

.page-header__illust--news {
  width: calc(var(--kp-rem) * 42.6); /* 426 */
  height: calc(var(--kp-rem) * 12); /* 120 */
}

.page-header__illust--news .page-header__illust-img {
  width: 158.89%;
  height: 100.21%;
  left: 0;
  top: -0.11%;
}

.page-header__illust--contact {
  width: calc(var(--kp-rem) * 15.1); /* 151 */
  height: calc(var(--kp-rem) * 16); /* 160 */
}

.page-header__illust--contact .page-header__illust-img {
  position: static;
  width: 100%;
  height: 100%;
  left: auto;
  top: auto;
  object-fit: contain;
}

.news-archive__list {
  gap: calc(var(--kp-rem) * 6.4) calc(var(--kp-rem) * 4);
}

/* --------------------------------------------------------------------------
   P-07 お問い合わせ
   Figma: node 304:35183
   -------------------------------------------------------------------------- */
.contact-faq {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 6.4);
  width: 100%;
}

.contact-faq__title {
  margin: 0;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 3.2));
  line-height: 1.4;
  color: var(--kp-color-text);
}

.contact-faq__empty {
  margin: 0;
  font-weight: 400;
}

.contact-faq__group {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 4);
  width: 100%;
}

.contact-faq__category {
  margin: 0;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2.4));
  line-height: 1.4;
  color: var(--kp-color-secondary);
}

.contact-faq__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-faq__item {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 2.4);
  width: 100%;
}

.contact-faq__question {
  display: flex;
  align-items: baseline;
  gap: calc(var(--kp-rem) * 1.6);
  width: 100%;
}

.contact-faq__q {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: calc(var(--kp-rem) * 4);
  height: calc(var(--kp-rem) * 4);
  border-radius: 9999px;
  background: var(--kp-color-secondary-light);
  color: var(--kp-color-secondary);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2));
  line-height: 1;
}

.contact-faq__question-text {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.8));
  line-height: 1.4;
  color: var(--kp-color-text);
}

.contact-faq__answer {
  width: 100%;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  font-weight: 400;
  line-height: 1.8;
  color: var(--kp-color-text);
}

.contact-faq__answer p {
  margin: 0;
}

.contact-form-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--kp-rem) * 4);
  width: 100%;
  text-align: center;
}

.contact-form-cta__title {
  margin: 0;
  width: 100%;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 3.2));
  line-height: 1.4;
  color: var(--kp-color-text);
  text-align: left;
}

.contact-form-cta__lead {
  width: 100%;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.8));
  font-weight: 400;
  line-height: 1.8;
  color: var(--kp-color-text);
  text-align: left;
}

.contact-form-cta__lead p {
  margin: 0;
}

.contact-form-cta__lead strong {
  font-weight: 700;
}

.btn--contact-external {
  flex-direction: column;
  gap: 0;
  width: calc(var(--kp-rem) * 32);
  max-width: 100%;
  justify-content: center;
  padding: calc(var(--kp-rem) * 1.6) calc(var(--kp-rem) * 2.4);
  background: var(--kp-color-secondary);
  color: var(--kp-color-white);
  text-align: center;
  text-decoration: none;
}

.btn--contact-external .btn__label {
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.8));
  line-height: 1.4;
}

.btn--contact-external .btn__sub {
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  line-height: 1.4;
}

.contact-phone {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 4);
  width: 100%;
}

.contact-phone__title {
  margin: 0;
  width: 100%;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 3.2));
  line-height: 1.4;
  color: var(--kp-color-text);
}

.contact-phone__body {
  width: 100%;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.8));
  font-weight: 400;
  line-height: 1.8;
  color: var(--kp-color-text);
}

.contact-phone__body p {
  margin: 0;
}

.contact-phone__tel {
  color: var(--kp-color-secondary);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   P-09 ご利用ガイド
   Figma: node 304:37884
   -------------------------------------------------------------------------- */
.page-header__illust--guide {
  width: calc(var(--kp-rem) * 26); /* 260 */
  height: calc(var(--kp-rem) * 16); /* 160 */
}

.page-header__illust--guide .page-header__illust-img {
  position: static;
  width: 100%;
  height: 100%;
  left: auto;
  top: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
}

.guide-flow {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 4);
  width: 100%;
}

.guide-flow__lead {
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.8));
  font-weight: 400;
  line-height: 1.8;
  color: var(--kp-color-text);
}

.guide-flow__lead p {
  margin: 0;
}

.guide-flow__steps {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-step {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(var(--kp-rem) * 2.4);
  width: 100%;
}

.guide-step__header {
  display: flex;
  align-items: center;
  gap: calc(var(--kp-rem) * 1.6);
  padding: calc(var(--kp-rem) * 2) calc(var(--kp-rem) * 4);
  background: var(--kp-color-primary);
}

.guide-step__num {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: calc(var(--kp-rem) * 4);
  height: calc(var(--kp-rem) * 4);
  border-radius: 9999px;
  background: var(--kp-color-white);
  color: var(--kp-color-text);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2.4));
  line-height: 1;
}

.guide-step__title {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2.4));
  line-height: 1.4;
  color: var(--kp-color-text);
}

.guide-step__body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 2.4);
  align-items: flex-start;
  padding: calc(var(--kp-rem) * 4);
  background: var(--kp-color-primary-light);
}

.guide-step__body--split {
  flex-direction: row;
  gap: calc(var(--kp-rem) * 4);
  align-items: stretch;
}

.guide-step__text {
  margin: 0;
  width: 100%;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  font-weight: 400;
  line-height: 1.8;
  color: var(--kp-color-text);
}

.guide-step__text strong {
  font-weight: 700;
}

.guide-step__col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 2.4);
  min-width: 0;
}

.guide-step__media {
  position: relative;
  width: 100%;
  max-width: calc(var(--kp-rem) * 44.8); /* 448 */
  aspect-ratio: 448 / 283;
  overflow: hidden;
  border-radius: calc(var(--kp-rem) * 2.4);
  background: var(--kp-color-surface);
}

.guide-step__media--contact {
  aspect-ratio: 448 / 230;
}

.guide-step__media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.guide-step__col-copy {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 0.8); /* 8 — Figma gap8 */
  width: 100%;
}

.guide-step__col-title {
  margin: 0;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2));
  line-height: 1.8;
}

.guide-step__col-title--secondary {
  color: var(--kp-color-secondary);
}

.guide-step__col-title--tertiary {
  color: var(--kp-color-tertiary);
}

.guide-step__col-text {
  margin: 0;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  font-weight: 400;
  line-height: 1.8;
  color: var(--kp-color-text);
}

.guide-step__col-text strong {
  font-weight: 700;
}

.guide-step .btn--filter .btn__icon--search {
  width: calc(var(--kp-rem) * 2.4);
  height: calc(var(--kp-rem) * 2.4);
}

.guide-contact-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--kp-rem) * 4);
  width: 100%;
}

.guide-contact-cta__title {
  margin: 0;
  width: 100%;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 3.2));
  line-height: 1.4;
  color: var(--kp-color-text);
  text-align: left;
}

.guide-contact-cta__lead {
  width: 100%;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.8));
  font-weight: 400;
  line-height: 1.8;
  color: var(--kp-color-text);
  text-align: left;
}

.guide-contact-cta__lead p {
  margin: 0;
}

.guide-contact-cta__lead strong {
  font-weight: 700;
}

.btn--guide-contact {
  justify-content: center;
  width: calc(var(--kp-rem) * 32);
  max-width: 100%;
  padding: calc(var(--kp-rem) * 1.6) calc(var(--kp-rem) * 2.4);
  background: var(--kp-color-secondary);
  color: var(--kp-color-white);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.8));
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   P-06 ニュース詳細
   Figma: node 304:27351
   -------------------------------------------------------------------------- */
.news-single {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 6.4);
  width: min(100%, calc(var(--kp-rem) * 72)); /* 720 */
  margin-inline: auto;
}

.news-single__header {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 2.4);
  width: 100%;
}

.news-single__date {
  color: var(--kp-color-tertiary);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  line-height: 1.4;
}

.news-single__title {
  margin: 0;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2.4));
  line-height: 1.4;
  color: var(--kp-color-text);
}

.news-single__meta {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.news-single__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--kp-rem) * 0.8) calc(var(--kp-rem) * 1.6);
  border-radius: 9999px;
  background: var(--kp-color-badge-bg);
  color: var(--kp-color-badge-text);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  line-height: 1;
  white-space: nowrap;
}

.news-single__image {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 760 / 480;
  border: 1px solid var(--kp-color-divider);
  border-radius: calc(var(--kp-rem) * 1.6);
  background: #e5e5e5;
  margin: 0;
}

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

.news-single__image--placeholder img {
  object-fit: contain;
  mix-blend-mode: darken;
}

.news-single__body {
  width: 100%;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  font-weight: 400;
  line-height: 1.8;
  color: var(--kp-color-text);
}

/* グローバルリセット（ul/p/h 等）を打ち消し、本文はブラウザ既定スタイルを使う */
.news-single__body :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, dl, dt, dd, hr, pre, table) {
  all: revert;
}

.news-single__body a {
  color: var(--kp-color-secondary);
  text-decoration: underline;
}

.news-single__body blockquote {
  margin-block: calc(var(--kp-rem) * 2.4);
  margin-inline: 0;
  padding: calc(var(--kp-rem) * 1.6) calc(var(--kp-rem) * 2.4);
  border-left: calc(var(--kp-rem) * 0.4) solid var(--kp-color-tertiary);
  background: var(--kp-color-tertiary-light);
  color: var(--kp-color-text);
}

.news-single__body blockquote > *:first-child {
  margin-block-start: 0;
}

.news-single__body blockquote > *:last-child {
  margin-block-end: 0;
}

.news-single__body blockquote cite {
  display: block;
  margin-block-start: calc(var(--kp-rem) * 0.8);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.4));
  font-style: normal;
  color: var(--kp-color-tertiary);
}

.club-detail {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 6.4);
  width: min(100%, calc(var(--kp-rem) * 72)); /* 720 */
  margin-inline: auto;
}

.club-detail__header {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 2.4);
  width: 100%;
}

.club-detail__title {
  margin: 0;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 3.2));
  line-height: 1.4;
  color: var(--kp-color-text);
}

.club-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--kp-rem) * 1.6);
}

.club-detail__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--kp-rem) * 0.8) calc(var(--kp-rem) * 1.6);
  border-radius: 9999px;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  line-height: 1;
  white-space: nowrap;
}

.club-detail__tag--type {
  background: var(--kp-color-primary-light);
  color: var(--kp-color-secondary);
}

.club-detail__tag--category {
  background: var(--kp-color-primary-light);
  color: var(--kp-color-secondary);
}

.club-detail__tag--region {
  background: var(--kp-color-tertiary-light);
  color: var(--kp-color-tertiary);
}

.club-detail__image {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 760 / 480;
  border: 1px solid var(--kp-color-divider);
  border-radius: calc(var(--kp-rem) * 1.6);
  background: #e5e5e5;
}

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

.club-detail__image--placeholder img {
  object-fit: contain;
  mix-blend-mode: darken;
}

.club-detail__sections {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 4);
  width: 100%;
}

.club-detail__section {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 0.8);
}

.club-detail__heading {
  margin: 0;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2));
  line-height: 1.4;
  color: var(--kp-color-tertiary);
}

.club-detail__body {
  margin: 0;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  font-weight: 400;
  line-height: 1.8;
  color: var(--kp-color-text);
}

.club-detail__body a {
  color: var(--kp-color-secondary);
  text-decoration: underline;
}

.club-detail__badge {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.1em 0.5em;
  border-radius: 0.4em;
  background: var(--kp-color-primary);
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1.4;
  color: var(--kp-color-text);
  vertical-align: middle;
}

.club-cta {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 4);
  width: 100%;
  padding: calc(var(--kp-rem) * 4);
  border-radius: calc(var(--kp-rem) * 2.4);
  background: var(--kp-color-surface);
}

.club-cta__actions {
  display: flex;
  gap: calc(var(--kp-rem) * 2.4);
  width: 100%;
}

.btn--cta-inquiry,
.btn--cta-apply {
  flex: 1 1 0;
  min-width: 0;
  min-height: calc(var(--kp-rem) * 9.7);
  justify-content: center;
  padding: calc(var(--kp-rem) * 2.4);
  border-radius: 9999px;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2));
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}

.btn--cta-inquiry {
  background: var(--kp-color-primary);
  color: var(--kp-color-text);
}

.btn--cta-apply {
  flex-direction: column;
  gap: 0;
  background: var(--kp-color-secondary);
  color: var(--kp-color-white);
}

.btn--cta-apply .btn__label {
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2));
  line-height: 1.4;
}

.btn--cta-apply .btn__sub {
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  line-height: 1.4;
}

.club-cta__notice {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp-rem) * 0.8);
  width: 100%;
  padding: calc(var(--kp-rem) * 4);
  border: 1px solid var(--kp-color-divider);
  border-radius: calc(var(--kp-rem) * 1.6);
  background: var(--kp-color-white);
}

.club-cta__notice-title {
  display: flex;
  align-items: center;
  gap: calc(var(--kp-rem) * 0.8);
  margin: 0;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2));
  line-height: 1.4;
  color: var(--kp-color-tertiary);
}

.club-cta__notice-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: calc(var(--kp-rem) * 2.4);
  height: calc(var(--kp-rem) * 2.4);
  color: var(--kp-color-primary);
}

.club-cta__notice-icon .icon {
  width: 100%;
  height: 100%;
}

.club-cta__notice-body {
  margin: 0;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  font-weight: 400;
  line-height: 1.8;
  color: var(--kp-color-text);
}

.club-cta__notice-body strong {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   クラブへのお問い合わせフォーム（contact-club）
   -------------------------------------------------------------------------- */
.club-contact {
  width: min(100%, calc(var(--kp-rem) * 72));
  margin-inline: auto;
}

.club-contact__lead {
  margin-bottom: calc(var(--kp-rem) * 4);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  font-weight: 400;
  line-height: 1.8;
  text-align: center;
}

.club-contact__errors {
  margin-bottom: calc(var(--kp-rem) * 3.2);
  padding: calc(var(--kp-rem) * 1.6) calc(var(--kp-rem) * 2.4);
  border: 1px solid var(--kp-color-badge-text);
  border-radius: calc(var(--kp-rem) * 0.8);
  background: var(--kp-color-badge-bg);
  color: var(--kp-color-badge-text);
}

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

.club-contact__errors li + li {
  margin-top: calc(var(--kp-rem) * 0.4);
}

.club-contact__section {
  margin-bottom: calc(var(--kp-rem) * 4.8);
}

.club-contact__section-title {
  margin: 0 0 calc(var(--kp-rem) * 2.4);
  padding-bottom: calc(var(--kp-rem) * 0.8);
  border-bottom: 2px solid var(--kp-color-secondary);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2));
  line-height: 1.4;
}

.club-contact__field {
  margin: 0 0 calc(var(--kp-rem) * 2.4);
}

.club-contact__label {
  display: block;
  margin-bottom: calc(var(--kp-rem) * 0.8);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  line-height: 1.4;
}

.club-contact__required {
  color: var(--kp-color-badge-text);
}

.club-contact__consent-label {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  align-items: center;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.5));
  line-height: 1.6;
  cursor: pointer;
}

.club-contact__consent-label a {
  color: var(--kp-color-secondary);
  text-decoration: underline;
}

.club-contact__input {
  width: 100%;
  padding: calc(var(--kp-rem) * 1.2) calc(var(--kp-rem) * 1.6);
  border: 1px solid var(--kp-color-divider);
  border-radius: calc(var(--kp-rem) * 0.8);
  background: var(--kp-color-white);
  color: var(--kp-color-text);
  font-family: inherit;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  font-weight: 400;
  line-height: 1.6;
}

.club-contact__input:focus {
  outline: 2px solid var(--kp-color-secondary);
  outline-offset: 2px;
}

.club-contact__input--readonly {
  background: var(--kp-color-surface);
  color: #666;
}

.club-contact__textarea {
  resize: vertical;
  min-height: calc(var(--kp-rem) * 16);
}

.club-contact__email-row,
.club-contact__otp-row {
  display: flex;
  gap: calc(var(--kp-rem) * 0.8);
  align-items: center;
}

.club-contact__email-row .club-contact__input,
.club-contact__otp-row .club-contact__input {
  flex: 1;
}

.club-contact__input--otp {
  max-width: calc(var(--kp-rem) * 24);
  text-align: center;
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
}

.btn--otp,
.btn--otp-confirm,
.btn--contact-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.btn--otp,
.btn--otp-confirm {
  padding: calc(var(--kp-rem) * 1.2) calc(var(--kp-rem) * 1.6);
  background: var(--kp-color-tertiary);
  color: var(--kp-color-white);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.4));
  border-radius: 9999px;
}

.btn--otp:disabled,
.btn--otp-confirm:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn--contact-secondary {
  padding: calc(var(--kp-rem) * 2.4) calc(var(--kp-rem) * 3.6);
  border: 2px solid var(--kp-color-secondary);
  border-radius: 9999px;
  background: var(--kp-color-white);
  color: var(--kp-color-secondary);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2.4));
}

.club-contact__help {
  margin: calc(var(--kp-rem) * 0.8) 0 0;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.4));
  font-weight: 400;
  line-height: 1.6;
  color: #666;
}

.club-contact__ok {
  color: #2f6b3a;
  font-weight: 700;
}

.club-contact__err {
  color: var(--kp-color-badge-text);
  font-weight: 700;
}

.club-contact__otp {
  margin-top: calc(var(--kp-rem) * 0.8);
  padding: calc(var(--kp-rem) * 1.6);
  border: 1px solid var(--kp-color-tertiary);
  border-radius: calc(var(--kp-rem) * 0.8);
  background: var(--kp-color-tertiary-light);
}

.club-contact__otp[hidden] {
  display: none;
}

.club-contact__actions {
  margin-top: calc(var(--kp-rem) * 4.8);
  text-align: center;
}

.club-contact__actions--dual {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--kp-rem) * 1.6);
  justify-content: center;
}

.club-contact__confirm {
  margin: 0 0 calc(var(--kp-rem) * 4.8);
  padding: calc(var(--kp-rem) * 3.2);
  border: 1px solid var(--kp-color-divider);
  border-radius: calc(var(--kp-rem) * 1.6);
  background: var(--kp-color-surface);
}

.club-contact__confirm-item {
  padding: calc(var(--kp-rem) * 1.6) 0;
  border-bottom: 1px solid var(--kp-color-divider);
}

.club-contact__confirm-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.club-contact__confirm-item:first-child {
  padding-top: 0;
}

.club-contact__confirm-item dt {
  margin-bottom: calc(var(--kp-rem) * 0.4);
  color: #666;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.4));
  font-weight: 700;
}

.club-contact__confirm-item dd {
  margin: 0;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  font-weight: 400;
  line-height: 1.8;
  white-space: pre-wrap;
}

.club-contact__result {
  text-align: center;
}

.club-contact__result-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--kp-rem) * 8);
  height: calc(var(--kp-rem) * 8);
  margin: 0 auto calc(var(--kp-rem) * 2.4);
  border-radius: 50%;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 3.2));
  font-weight: 700;
}

.club-contact__result-icon--ok {
  background: #e7f5ea;
  color: #2f6b3a;
}

.club-contact__result-icon--ng {
  background: var(--kp-color-badge-bg);
  color: var(--kp-color-badge-text);
}

.club-contact__result-title {
  margin: 0 0 calc(var(--kp-rem) * 1.6);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2.4));
  line-height: 1.4;
}

.club-contact__result-text {
  margin: 0 0 calc(var(--kp-rem) * 3.2);
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  font-weight: 400;
  line-height: 1.8;
}

.club-contact__notice {
  margin: 0 0 calc(var(--kp-rem) * 4.8);
  padding: calc(var(--kp-rem) * 2.4);
  border: 1px solid var(--kp-color-primary);
  border-radius: calc(var(--kp-rem) * 0.8);
  background: var(--kp-color-primary-light);
  text-align: left;
}

.club-contact__notice p {
  margin: 0;
  font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.4));
  font-weight: 400;
  line-height: 1.8;
}

.club-contact__notice p + p {
  margin-top: calc(var(--kp-rem) * 1.2);
}

/* --------------------------------------------------------------------------
   SP（〜767px / calc(var(--kp-rem) * 1) = 390pxカンプの10px）
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --kp-header-height: calc(var(--kp-rem) * 8); /* 80 */
    --kp-gutter: calc(var(--kp-rem) * 2); /* SP 片側 20 */
  }

  .site-header__inner {
    height: calc(var(--kp-rem) * 8);
    gap: calc(var(--kp-rem) * 1.2);
  }

  .site-header__actions {
    gap: calc(var(--kp-rem) * 1.2);
  }

  .site-header__logo img {
    width: calc(var(--kp-rem) * 13.2);
    height: calc(var(--kp-rem) * 3.2);
  }

  .site-header__logo .site-header__divider,
  .site-header__logo .site-header__tagline {
    display: none;
  }

  .btn--search {
    height: calc(var(--kp-rem) * 4.8);
    padding: 0 calc(var(--kp-rem) * 2);
    gap: calc(var(--kp-rem) * 0.8);
    font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.4));
  }

  .btn__icon--search {
    width: calc(var(--kp-rem) * 2);
    height: calc(var(--kp-rem) * 2);
  }

  .menu-toggle {
    width: calc(var(--kp-rem) * 4.8);
    height: calc(var(--kp-rem) * 4.8);
  }

  .menu-toggle__bar {
    width: calc(var(--kp-rem) * 1.8);
    height: calc(var(--kp-rem) * 0.4);
  }

  .menu-toggle__bars {
    gap: calc(var(--kp-rem) * 0.4);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
    transform: translateY(calc(var(--kp-rem) * 0.8)) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
    transform: translateY(calc(var(--kp-rem) * -0.8)) rotate(-45deg);
  }

  .hero {
    height: auto;
    min-height: calc(var(--kp-rem) * 66); /* 660px @390：上下イラスト＋タイトル */
    padding: calc(var(--kp-rem) * 1.6) var(--kp-gutter) calc(var(--kp-rem) * 2.4);
  }

  .hero__cloud {
    height: calc(var(--kp-rem) * 18);
    background-size: calc(var(--kp-rem) * 90) 100%;
  }

  .hero__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: calc(var(--kp-rem) * 0.4);
    row-gap: calc(var(--kp-rem) * 1.6);
    align-content: center;
    min-height: calc(var(--kp-rem) * 61);
    height: auto;
  }

  .hero__title {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: 0;
    align-self: center;
  }

  .hero__heading {
    --kp-char-size: calc(var(--kp-rem) * 7); /* 70px @390（最大5文字/行） */
  }

  /* SP：「新しい」改行「自分探しに」 */
  .hero__primary-group {
    flex-direction: column;
    align-items: center;
  }

  .hero__row--primary-b {
    margin-left: 0;
    margin-top: calc(var(--kp-char-size) * -0.2);
  }

  .hero__balloon {
    top: calc(var(--kp-rem) * -5.7);
    left: calc(50% - var(--kp-rem) * 7.5); /* 1行目3文字左端+16px相当 */
    width: calc(var(--kp-rem) * 7);
  }

  .hero__balloon-text {
    font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2.4));
  }

  .hero__badge {
    font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
    padding: calc(var(--kp-rem) * 1.2) calc(var(--kp-rem) * 2.4);
    border-width: calc(var(--kp-rem) * 0.3);
  }

  /* 上段3体・下段3体（display:contents で hero__inner のグリッドに参加） */
  .hero__illusts {
    display: contents;
  }

  .hero__illust {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
    height: calc(var(--kp-rem) * 11); /* 110px @390 */
    justify-self: center;
  }

  .hero__illust img {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
  }

  .hero__illust--1 { grid-row: 1; grid-column: 1; align-self: end; }
  .hero__illust--2 { grid-row: 1; grid-column: 2; align-self: end; }
  .hero__illust--3 { grid-row: 1; grid-column: 3; align-self: end; }
  .hero__illust--4 { grid-row: 3; grid-column: 1; align-self: start; }
  .hero__illust--5 { grid-row: 3; grid-column: 2; align-self: start; }
  .hero__illust--6 { grid-row: 3; grid-column: 3; align-self: start; }

  .tag-slider__list {
    height: calc(var(--kp-rem) * 5.6);
    gap: calc(var(--kp-rem) * 1.6);
    font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  }

  .feature {
    padding: calc(var(--kp-rem) * 12) var(--kp-gutter) calc(var(--kp-rem) * 9.6);
  }

  .feature__illust--top {
    width: calc(var(--kp-rem) * 24);
    height: calc(var(--kp-rem) * 24);
    top: calc(var(--kp-rem) * -8);
    right: calc(var(--kp-rem) * -8);
  }

  .feature__inner {
    flex-direction: column;
    align-items: center;
    gap: calc(var(--kp-rem) * 6.2);
  }

  .feature-card {
    flex-basis: auto;
    width: min(calc(var(--kp-rem) * 39), 88%);
    height: calc(var(--kp-rem) * 22); /* 250→220px @390 */
  }

  .feature-card__illust {
    top: calc(var(--kp-rem) * -4.1);
    width: calc(var(--kp-rem) * 13);
    height: calc(var(--kp-rem) * 14.5);
  }

  .feature-card__label {
    top: calc(var(--kp-rem) * 11.5);
  }

  .feature-card__en {
    font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  }

  .feature-card__ja {
    font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2.2));
  }

  .feature-card__arrow svg {
    width: calc(var(--kp-rem) * 3.2);
    height: calc(var(--kp-rem) * 3.2);
  }

  .marquee {
    margin-bottom: calc(var(--kp-rem) * 9.6); /* 160→96px @390（帯高さ16/27.2に合わせて縮小） */
  }

  .marquee__logos {
    height: calc(var(--kp-rem) * 16);
    gap: calc(var(--kp-rem) * 1.2);
    padding: calc(var(--kp-rem) * 0.8) 0;
  }

  .marquee__word {
    height: calc(var(--kp-rem) * 4);
  }

  .marquee__group {
    gap: calc(var(--kp-rem) * 3); /* 48→30px @390 */
    padding-right: calc(var(--kp-rem) * 3);
  }

  .marquee__illusts .marquee__group {
    gap: calc(var(--kp-rem) * 3.4); /* 56→34px @390 */
    padding-right: calc(var(--kp-rem) * 3.4);
  }

  .marquee__illusts {
    top: calc(var(--kp-rem) * 2);
  }

  .marquee__illust {
    height: calc(var(--kp-rem) * 12);
  }

  .news__scallop {
    height: calc(var(--kp-rem) * 3.2);
    top: calc(var(--kp-rem) * -3.1);
    background-size: calc(var(--kp-rem) * 28) 100%;
  }

  .news__inner {
    padding-top: calc(var(--kp-rem) * 9.6);
    padding-bottom: calc(var(--kp-rem) * 14); /* 下段イラスト（h10）分を確保 */
  }

  .news__illust--1 { top: calc(var(--kp-rem) * -4);  right: calc(var(--kp-rem) * 1.6); width: calc(var(--kp-rem) * 10); height: calc(var(--kp-rem) * 12); }
  .news__illust--2 { top: auto; bottom: 0; left: calc(var(--kp-rem) * 3.2); width: calc(var(--kp-rem) * 12); height: calc(var(--kp-rem) * 10); }
  .news__illust--3 { bottom: 0; right: calc(var(--kp-rem) * 3.2); width: calc(var(--kp-rem) * 10); height: calc(var(--kp-rem) * 10); }

  .news__circle {
    width: calc(var(--kp-rem) * 24);
    height: calc(var(--kp-rem) * 24);
  }

  .section-title__ja {
    font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2.8));
  }

  .news__list {
    grid-template-columns: 1fr;
    gap: calc(var(--kp-rem) * 4.8);
  }


  /* 下層: クラブをさがす */
  .page-header {
    padding-block: calc(var(--kp-rem) * 3.2);
  }

  .page-header__illust {
    display: none;
  }

  .page-header__title {
    font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2.4));
  }

  .sub-page__inner {
    gap: calc(var(--kp-rem) * 4.8);
    padding: calc(var(--kp-rem) * 4.8) 0 calc(var(--kp-rem) * 6.4);
  }

  .club-detail {
    gap: calc(var(--kp-rem) * 4);
  }

  .club-detail__title {
    font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2.4));
  }

  .news-single {
    gap: calc(var(--kp-rem) * 4);
  }

  .news-single__title {
    font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2));
  }

  .contact-faq__title,
  .contact-form-cta__title,
  .guide-contact-cta__title,
  .contact-phone__title {
    font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2.4));
  }

  .contact-faq__category {
    font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 2));
  }

  .contact-faq__question-text {
    font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
    white-space: normal;
  }

  .btn--contact-external,
  .btn--guide-contact {
    width: 100%;
  }

  .guide-step__header {
    gap: calc(var(--kp-rem) * 1.2);
    padding: calc(var(--kp-rem) * 1.6) calc(var(--kp-rem) * 2.4);
  }

  .guide-step__num {
    width: calc(var(--kp-rem) * 3.2);
    height: calc(var(--kp-rem) * 3.2);
    font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.8));
  }

  .guide-step__title {
    font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.8));
  }

  .guide-step__body {
    padding: calc(var(--kp-rem) * 2.4);
  }

  .guide-step__body--split {
    flex-direction: column;
    gap: calc(var(--kp-rem) * 3.2);
  }

  .guide-step__col-title {
    font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.8));
  }

  .guide-step .btn--filter {
    width: 100%;
    justify-content: center;
  }

  .club-detail__sections {
    gap: calc(var(--kp-rem) * 3.2);
  }

  .club-cta {
    gap: calc(var(--kp-rem) * 2.4);
    padding: calc(var(--kp-rem) * 2.4);
  }

  .club-cta__actions {
    flex-direction: column;
    gap: calc(var(--kp-rem) * 1.6);
  }

  .btn--cta-inquiry,
  .btn--cta-apply {
    width: 100%;
    min-height: calc(var(--kp-rem) * 7.2);
    padding: calc(var(--kp-rem) * 1.6) calc(var(--kp-rem) * 2.4);
    font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  }

  .btn--cta-apply .btn__label {
    font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  }

  .btn--cta-apply .btn__sub {
    font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.4));
  }

  .club-cta__notice {
    padding: calc(var(--kp-rem) * 2.4);
  }

  .club-cta__notice-title {
    font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  }

  .club-contact__email-row,
  .club-contact__otp-row,
  .club-contact__actions--dual {
    flex-direction: column;
    align-items: stretch;
  }

  .club-contact__input--otp {
    max-width: none;
  }

  .btn--otp,
  .btn--otp-confirm,
  .btn--contact-secondary {
    width: 100%;
  }

  .club-filter {
    gap: calc(var(--kp-rem) * 2.4);
  }

  .club-filter__row {
    flex-direction: column;
    gap: calc(var(--kp-rem) * 1.2);
  }

  .club-filter__label {
    flex: none;
    width: auto;
    text-align: left;
  }

  .club-filter__rule {
    display: none;
  }

  .club-list {
    grid-template-columns: 1fr;
    gap: calc(var(--kp-rem) * 3.2);
  }

  .btn--filter {
    width: 100%;
    justify-content: center;
  }

  .btn--news,
  .btn--contact {
    font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.8));
    padding: calc(var(--kp-rem) * 1.6) calc(var(--kp-rem) * 2.8);
  }

  .site-footer {
    padding: calc(var(--kp-rem) * 6.4) var(--kp-gutter);
  }

  .site-footer__main {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
  }

  .site-footer__brand {
    align-self: center;
  }

  .footer-nav__list {
    max-width: none;
    grid-template-columns: 1fr;
    gap: calc(var(--kp-rem) * 2);
  }

  .footer-nav__list a {
    font-size: max(var(--kp-font-min), calc(var(--kp-rem) * 1.6));
  }

  .site-footer__rule {
    margin: calc(var(--kp-rem) * 4) 0;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--kp-rem) * 2);
  }

  .site-footer__external {
    flex-direction: column;
    gap: calc(var(--kp-rem) * 1.6);
  }
}