/* FILE: assets/css/page-lp-jss.css */
/* JSS（BGタンピネスローバーズ Japan Sponsors Salon）LP専用。
   本体サイトのトークン（tokens.css 等）は読み込まず、このファイルで完結させています。 */

/* ============================================================
   1. トークン
   ============================================================ */
:root {
  --jss-yellow:      #F9EC1E;   /* 資料の地色から実測 */
  --jss-yellow-dim:  #D9CE12;
  --jss-black:       #000000;
  --jss-paper:       #FFFFFF;
  --jss-smoke:       #F1F1EF;
  --jss-gray:        #6B6B66;
  --jss-line:        #DCDCD6;
  --jss-line-dark:   #3A3A36;

  --jss-font: "Archivo", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN",
              "Meiryo", sans-serif;

  --jss-gutter: 24px;
  --jss-max: 1160px;
}

/* ============================================================
   2. ベース
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

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

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

body {
  margin: 0;
  font-family: var(--jss-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.9;
  color: var(--jss-black);
  background: var(--jss-paper);
  font-feature-settings: "palt" 1;
}

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

a { color: inherit; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--jss-yellow);
  outline-offset: 2px;
}
.lp-dark :focus-visible,
.lp-yellow :focus-visible {
  outline-color: var(--jss-black);
}

/* ============================================================
   3. 汎用レイアウト
   ============================================================ */
.lp-wrap {
  width: 100%;
  max-width: var(--jss-max);
  margin-inline: auto;
  padding-inline: var(--jss-gutter);
}

.lp-sec {
  padding-block: clamp(56px, 8vw, 104px);
  scroll-margin-top: 88px;
}
.lp-sec--smoke { background: var(--jss-smoke); }
.lp-sec--dark  { background: var(--jss-black); color: var(--jss-paper); }
.lp-sec--yellow{ background: var(--jss-yellow); }

.lp-sec--dark a { color: var(--jss-yellow); }

/* 見出し：左に太いイエローのバー（ピッチのライン） */
.lp-h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.01em;
  padding-left: 22px;
  border-left: 8px solid var(--jss-yellow);
  margin-bottom: 14px;
}
.lp-sec--yellow .lp-h2 { border-left-color: var(--jss-black); }

.lp-h2__en {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--jss-gray);
  margin-bottom: 4px;
}
.lp-sec--dark .lp-h2__en { color: var(--jss-yellow); }
.lp-sec--yellow .lp-h2__en { color: #6a6412; }

.lp-lead {
  max-width: 46em;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  font-weight: 500;
  margin-bottom: 40px;
  padding-left: 30px;
}

.lp-p { max-width: 42em; }
.lp-p + .lp-p { margin-top: 1em; }

.lp-note {
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--jss-gray);
}
.lp-sec--dark .lp-note { color: #A9A9A2; }
.lp-sec--yellow .lp-note { color: #55510e; }

/* ============================================================
   4. ヘッダー
   ============================================================ */
.lp-header {
  background: var(--jss-black);
  color: var(--jss-paper);
  border-bottom: 3px solid var(--jss-yellow);
}
.lp-header__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
}
.lp-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: auto;
}
.lp-header__crest { width: 32px; height: auto; }
.lp-header__name {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
}
.lp-header__name span {
  display: block;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--jss-yellow);
}

.lp-nav ul {
  display: flex;
  gap: 4px;
}
.lp-nav a {
  display: block;
  padding: 10px 14px;
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--jss-paper);
  border-bottom: 3px solid transparent;
}
.lp-nav a:hover { border-bottom-color: var(--jss-yellow); }

.lp-btn.lp-header__cta { display: none; }

@media (min-width: 1024px) {
  .lp-header {
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .lp-btn.lp-header__cta {
    display: inline-flex;
    margin-left: 12px;
  }
}

/* モバイル：アンカーは2段目の横スクロール帯に */
@media (max-width: 1023px) {
  .lp-header__bar {
    flex-wrap: wrap;
    gap: 8px;
    min-height: 0;
  }
  .lp-header__brand {
    flex: 1 1 auto;
    min-width: 0;
    padding-block: 9px;
  }
  .lp-header__name { font-size: 0.74rem; }
  .lp-header__name span { font-size: 0.58rem; }
  .lp-nav {
    flex: 0 0 100%;
    order: 3;
    margin-inline: calc(var(--jss-gutter) * -1);
    border-top: 1px solid var(--jss-line-dark);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lp-nav::-webkit-scrollbar { display: none; }
  .lp-nav ul {
    gap: 0;
    padding-inline: var(--jss-gutter);
    width: max-content;
  }
  .lp-nav a { padding: 11px 12px; font-size: 0.8rem; white-space: nowrap; }
}

/* ============================================================
   5. ボタン
   ============================================================ */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 34px;
  background: var(--jss-yellow);
  color: var(--jss-black);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 2px solid var(--jss-yellow);
  border-radius: 2px;
  transition: background-color .15s ease, color .15s ease;
}
.lp-btn:hover { background: var(--jss-black); color: var(--jss-yellow); }

.lp-btn--onyellow {
  background: var(--jss-black);
  color: var(--jss-yellow);
  border-color: var(--jss-black);
}
.lp-btn--onyellow:hover { background: var(--jss-paper); color: var(--jss-black); border-color: var(--jss-black); }

.lp-btn--sm { padding: 10px 18px; font-size: 0.84rem; }

.lp-btn--big {
  padding: 22px 46px;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  width: 100%;
  max-width: 460px;
}

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

.lp-cta-note {
  margin-top: 10px;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--jss-gray);
}
.lp-hero .lp-cta-note { color: #B5B5AE; }
.lp-sec--yellow .lp-cta-note { color: #5f5a10; }

/* ============================================================
   6. ヒーロー
   ============================================================ */
.lp-hero {
  position: relative;
  background: var(--jss-black);
  color: var(--jss-paper);
  overflow: hidden;
}
/* 資料表紙の斜め分割を継承 */
.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--jss-yellow);
  clip-path: polygon(100% 0, 100% 20%, 74% 0);
  pointer-events: none;
}
@media (min-width: 768px) {
  .lp-hero::before { clip-path: polygon(100% 0, 100% 34%, 68% 0); }
}
@media (min-width: 1024px) {
  .lp-hero::before { clip-path: polygon(100% 0, 100% 46%, 60% 0); }
}
.lp-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(44px, 7vw, 88px);
}
.lp-hero__crest {
  width: clamp(64px, 9vw, 96px);
  margin-bottom: 22px;
}
.lp-hero__club {
  font-size: clamp(0.78rem, 1.6vw, 0.92rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--jss-yellow);
  margin-bottom: 14px;
}
.lp-hero__title {
  font-size: clamp(2.5rem, 7.4vw, 5rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.lp-hero__jp {
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 22px;
}
.lp-hero__lead {
  max-width: 34em;
  font-size: clamp(0.94rem, 1.5vw, 1.02rem);
  color: #D8D8D2;
  margin-bottom: 34px;
}
.lp-hero__cta { max-width: 460px; }

.lp-hero__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(180px, 26vw, 300px);
  object-fit: cover;
  object-position: center 32%;
}

/* 数字の帯 */
.lp-facts {
  background: var(--jss-yellow);
  border-top: 3px solid var(--jss-black);
}
.lp-facts ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.lp-facts li {
  padding: 18px 4px 18px 0;
  border-bottom: 1px solid rgba(0,0,0,.16);
}
.lp-facts li:nth-child(odd) { padding-right: 16px; border-right: 1px solid rgba(0,0,0,.16); }
.lp-facts li:nth-child(odd) { padding-left: 0; }
.lp-facts li:nth-child(even) { padding-left: 16px; }
.lp-facts dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #5f5a10;
}
.lp-facts dd {
  margin: 2px 0 0;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  font-weight: 900;
  line-height: 1.35;
}
.lp-facts dd small { font-size: 0.62em; font-weight: 700; }

@media (min-width: 768px) {
  .lp-facts ul { grid-template-columns: repeat(4, 1fr); }
  .lp-facts li,
  .lp-facts li:nth-child(odd),
  .lp-facts li:nth-child(even) {
    padding: 22px 20px;
    border-bottom: 0;
    border-right: 1px solid rgba(0,0,0,.16);
  }
  .lp-facts li:first-child { padding-left: 0; }
  .lp-facts li:last-child { border-right: 0; }
}

/* ============================================================
   7. 参加メリット（3点）
   ============================================================ */
.lp-points {
  display: grid;
  gap: 34px;
}
.lp-point__head {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 900;
  line-height: 1.5;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 3px solid var(--jss-yellow);
}
.lp-point__body { font-size: 0.95rem; }

@media (min-width: 900px) {
  .lp-points {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1fr;
    gap: 40px;
  }
  /* 見出しの行数が違っても本文の開始位置を揃える */
  .lp-point {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .lp-point__head { grid-row: 1; }
  .lp-point__body { grid-row: 2; }
}
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .lp-point { display: block; }
    .lp-point__head { min-height: 4.5em; }
  }
}

/* ============================================================
   8. JSSとは
   ============================================================ */
.lp-about {
  display: grid;
  gap: 32px;
  align-items: center;
}
.lp-about__statement {
  font-size: clamp(1.05rem, 2.3vw, 1.4rem);
  font-weight: 700;
  line-height: 2;
}
.lp-about__statement em {
  font-style: normal;
  background: linear-gradient(transparent 62%, var(--jss-yellow) 62%);
}
@media (min-width: 900px) {
  .lp-about { grid-template-columns: 1.05fr .95fr; gap: 56px; }
}

/* ============================================================
   9. クラブ紹介
   ============================================================ */
.lp-club__intro {
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.12rem);
  line-height: 1.9;
  max-width: 44em;
  margin-bottom: 40px;
}

.lp-datatable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.lp-datatable th,
.lp-datatable td {
  border: 1px solid var(--jss-black);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  line-height: 1.75;
}
.lp-datatable th {
  background: var(--jss-yellow);
  font-weight: 700;
  white-space: nowrap;
  width: 8.5em;
}
.lp-datatable td { background: var(--jss-paper); }

.lp-club__grid {
  display: grid;
  gap: 40px;
  margin-top: 48px;
}

.lp-feature {
  border-top: 3px solid var(--jss-black);
  padding-top: 20px;
}
.lp-feature__cols {
  display: grid;
  gap: 24px;
  align-items: start;
}
@media (min-width: 900px) {
  .lp-feature__cols { grid-template-columns: 1fr 1fr; gap: 40px; }
}
.lp-feature__title {
  font-size: clamp(1.05rem, 2.1vw, 1.25rem);
  font-weight: 900;
  line-height: 1.55;
  margin-bottom: 12px;
}
.lp-feature__body { font-size: 0.92rem; }
.lp-feature__media img { width: 100%; }
.lp-feature__media--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.lp-feature__media--pair img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.lp-people {
  display: grid;
  gap: 26px;
  margin-top: 18px;
}
@media (min-width: 620px) {
  .lp-people { grid-template-columns: 1fr 1fr; }
}
.lp-person img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 22%;
  margin-bottom: 12px;
}
.lp-person__name {
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1.5;
  margin-bottom: 8px;
}
.lp-person__name small {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--jss-gray);
  letter-spacing: 0.04em;
}
.lp-person__bio { font-size: 0.84rem; line-height: 1.85; }

.lp-tv {
  margin-top: 44px;
  border: 1px solid var(--jss-line);
  background: var(--jss-paper);
  padding: 24px;
}
.lp-tv__title { font-size: 1rem; font-weight: 900; margin-bottom: 8px; }
.lp-tv__links {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
@media (min-width: 620px) { .lp-tv__links { grid-template-columns: 1fr 1fr; } }
.lp-tv__links a {
  display: block;
  padding: 13px 16px;
  border: 2px solid var(--jss-black);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--jss-paper);
}
.lp-tv__links a:hover { background: var(--jss-yellow); }

/* ============================================================
   10. 活動内容
   ============================================================ */
.lp-acts { display: grid; gap: 48px; }

.lp-act {
  display: grid;
  gap: 22px;
  background: var(--jss-paper);
  border-left: 10px solid var(--jss-yellow);
  padding: 26px;
}
@media (min-width: 900px) {
  .lp-act { grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; padding: 32px; }
  .lp-act__media { order: 2; }
}
.lp-act__title {
  font-size: clamp(1.1rem, 2.3vw, 1.35rem);
  font-weight: 900;
  line-height: 1.5;
  margin-bottom: 12px;
}
.lp-act__title span {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--jss-gray);
}
.lp-act__body { font-size: 0.92rem; }
.lp-act__media img { width: 100%; }

.lp-spec {
  margin-top: 20px;
  border-top: 1px solid var(--jss-line);
  font-size: 0.86rem;
}
.lp-spec > div {
  display: grid;
  grid-template-columns: 8.5em 1fr;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--jss-line);
}
.lp-spec dt { font-weight: 700; }
.lp-spec dd { margin: 0; line-height: 1.8; }
.lp-spec li { padding-left: 1em; text-indent: -1em; }
@media (max-width: 520px) {
  .lp-spec > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ============================================================
   11. 運営会社
   ============================================================ */
.lp-company {
  display: grid;
  gap: 30px;
}
@media (min-width: 900px) {
  .lp-company { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
}
.lp-company .lp-datatable th { background: var(--jss-black); color: var(--jss-yellow); border-color: var(--jss-line-dark); }
.lp-company .lp-datatable td { background: transparent; color: var(--jss-paper); border-color: var(--jss-line-dark); }
.lp-company__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.lp-company__links a {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border: 2px solid var(--jss-yellow);
  color: var(--jss-yellow);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}
.lp-company__links a:hover { background: var(--jss-yellow); color: var(--jss-black); }

/* ============================================================
   12. 協賛について
   ============================================================ */
.lp-price {
  display: grid;
  gap: 16px;
  margin-bottom: 36px;
}
@media (min-width: 720px) {
  .lp-price { grid-template-columns: 1fr 1fr; gap: 20px; }
}
.lp-price__card {
  background: var(--jss-paper);
  border: 3px solid var(--jss-black);
  padding: 24px 26px;
}
.lp-price__label { font-size: 0.88rem; font-weight: 700; }
.lp-price__value {
  font-size: clamp(2rem, 6vw, 2.9rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.lp-price__value small { font-size: 0.36em; font-weight: 700; letter-spacing: 0; }

.lp-use {
  background: rgba(0,0,0,.06);
  padding: 20px 24px;
  margin-bottom: 40px;
  font-size: 0.9rem;
}
.lp-use__title { font-weight: 900; margin-bottom: 8px; }
.lp-use li { padding-left: 1.1em; text-indent: -1.1em; }

.lp-flow {
  counter-reset: flow;
  display: grid;
  gap: 2px;
  margin-bottom: 14px;
}
.lp-flow li {
  counter-increment: flow;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  align-items: start;
  background: var(--jss-paper);
  padding: 18px 22px;
}
.lp-flow li::before {
  content: counter(flow);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--jss-black);
  color: var(--jss-yellow);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}
.lp-flow__title { font-weight: 900; line-height: 1.5; }
.lp-flow__body { font-size: 0.86rem; line-height: 1.8; margin-top: 2px; }

.lp-final {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 3px solid var(--jss-black);
}
.lp-final__head {
  font-size: clamp(1.15rem, 2.8vw, 1.6rem);
  font-weight: 900;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* ============================================================
   13. フッター
   ============================================================ */
.lp-footer {
  background: var(--jss-black);
  color: #C9C9C2;
  padding-block: 48px 40px;
  font-size: 0.86rem;
}
.lp-footer a { color: var(--jss-yellow); }
.lp-footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.lp-footer__brand img { width: 34px; }
.lp-footer__brand strong { color: var(--jss-paper); font-size: 0.94rem; }
.lp-footer__copy {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--jss-line-dark);
  font-size: 0.74rem;
  color: #8E8E88;
}

/* ============================================================
   14. モバイル追従CTA
   ============================================================ */
.lp-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--jss-paper);
  border-top: 3px solid var(--jss-black);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 18px rgba(0,0,0,.12);
}
.lp-sticky .lp-btn { width: 100%; padding: 15px 20px; font-size: 0.98rem; }
.lp-sticky .lp-cta-note { margin: 6px 0 0; text-align: center; }

body { padding-bottom: 98px; }

@media (min-width: 1024px) {
  .lp-sticky { display: none; }
  body { padding-bottom: 0; }
}

/* 印刷 */
@media print {
  .lp-header, .lp-sticky { display: none; }
  body { padding-bottom: 0; }
}