/*
    トークンは /pub/elite-course の .coursePlanCard / .planShowcase から採用。
    角丸：カード 14px ／ カード内ブロック 10px ／ ボタン・バッジ 999px
    PCでは CSS subgrid で「プラン名・説明・価格・ボタン以下」の各段を3カード間で揃え、カードの高さも統一。
  */
  .tpp {
    --bg: #242622;
    --card: #343733;
    --inner: #2b302d;
    --line: rgba(255,255,255,.24);
    --line-soft: rgba(255,255,255,.1);
    --gold: rgba(246,228,140,.85);
    --green: #cbf236;
    --green-ink: #192100;
    --red: #ff4f4f;
    --text: #fff;
    /* 文字色はサイト内の既存色から採用（カード面 #343733 上のコントラスト比） */
    --text-2: #f0f2f1;   /* .planShowcase__recommendList li … 10.7:1 */
    --text-3: #cccccc;   /* --color-gray（style_min.css） … 7.5:1 */
    --text-4: #b4b8b5;   /* .coursePlanCard__priceUnit … 6.0:1 */
    --num: "Barlow Semi Condensed", "Noto Sans JP", sans-serif;

    background: var(--bg);
    color: var(--text);
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
  }
  .tpp *, .tpp *::before, .tpp *::after { box-sizing: border-box; }
  .tpp :where(h2, h3, p, ul) { margin: 0; padding: 0; }
  .tpp ul { list-style: none; }
  .tpp__wrap { margin-inline: auto; }

  /* ── 見出し：サイト固有の「\ ～ /」装飾 ── */
  .tpp__head { text-align: center; }
  .tpp__catch { font-size: 18px; font-weight: 700; }
  .tpp__catch::before { content: "\\"; margin-right: 8px; font-weight: 300; font-size: 24px; }
  .tpp__catch::after { content: "/"; margin-left: 8px; font-weight: 300; font-size: 24px; }
  .tpp__lead { margin-top: 6px; font-size: 13px; color: var(--text-3); }
  /* SPのみ改行 */
  @media (min-width: 768px) { .tpp-sp { display: none; } }

  /* ── プランカード ── */
  .tpp__plans { display: grid; gap: 28px; margin-top: 36px; }

  .tpp-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 28px 22px 24px;
    display: flex; flex-direction: column;
  }
  .tpp-card--featured { border: 2px solid rgba(203,242,54,.75); box-shadow: 0 16px 36px rgba(0,0,0,.35), 0 0 32px rgba(203,242,54,.08); }
  /* キャンペーンバッジ：ライムの枠＋右側だけ塗りの2トーンのピル
     2区画を1つのflex行でベースライン揃えにし、右側の塗りは疑似要素で上下いっぱいに敷く
     （フォントの字面・読み込み状況に左右されず、文字の下端が常に揃う） */
  .tpp-card__badge {
    position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: baseline; white-space: nowrap;
    padding: 8px 0 10px; line-height: 1; /* 上8px・下10px（字面が下寄りに見えるため上を1px詰める） */
    border: 1.5px solid var(--green); border-radius: 999px; overflow: hidden;
    background: #1e2320; isolation: isolate;
    box-shadow: 0 0 0 4px var(--bg), 0 8px 20px rgba(203,242,54,.22);
  }
  .tpp-card__badge-tag {
    padding: 0 12px 0 14px;
    color: var(--green); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  }
  .tpp-card__badge-main {
    position: relative; padding: 0 14px 0 12px;
    color: var(--green-ink); font-size: 12px; font-weight: 700;
  }
  .tpp-card__badge-main::before {
    content: ""; position: absolute; left: 0; right: 0; top: -40px; bottom: -40px;
    background: var(--green); z-index: -1;
  }
  .tpp-card__badge-main { letter-spacing: .04em; }

  .tpp-card__name { font-size: 22px; font-weight: 700; letter-spacing: .03em; line-height: 1.4; }
  .tpp-card__for { margin-top: 4px; font-size: 13px; color: var(--text-3); }

  .tpp-card__price { margin-top: 16px; display: flex; align-items: baseline; gap: 4px; line-height: 1; }
  .tpp-card__price small { font-size: 12px; color: var(--text-3); font-weight: 500; }
  .tpp-card__price strong { font-family: var(--num); font-size: 44px; font-weight: 700; letter-spacing: .01em; }
  .tpp-card__price .yen { font-size: 15px; font-weight: 700; }
  .tpp-card__price .tax { font-size: 11px; color: var(--text-4); margin-left: 2px; }

  /* CTA：ピル型。推しのみ塗り */
  .tpp-card__action { margin-top: 22px; }
  .tpp .ph { display: inline-block; } /* 文節の切れ目でのみ折り返す */
  .tpp-card__after { margin-top: 8px; text-align: center; font-size: 12px; line-height: 1.6; color: var(--text-3); }

  /* 再開導線：CTA直下に控えめなテキストリンク */
  /* 新規（ボタン）と切れ会員（リンク）を区切り線で分け、「対象者→行動」の同じ順で読ませる */
  .tpp-return { margin-top: 4px; padding-top: 0; text-align: center; }
  .tpp-return__label { margin: 0 0 4px; font-size: 12px; color: var(--text-3); }
  /* 再開リンクの下の罫線までの余白を、上の罫線から文字までの余白と揃える（字面で約16px） */
  .tpp-card--featured .tpp-card__features { margin-top: 16px; }
  .tpp-btn {
    appearance: none; display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 50px; padding: 12px 16px;
    border-radius: 999px; border: 1.5px solid var(--green);
    background: transparent; color: var(--green);
    font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .04em;
    text-decoration: none; cursor: pointer; transition: background .15s;
  }
  .tpp-btn:hover { background: rgba(203,242,54,.12); }
  .tpp-btn--fill { background: var(--green); color: var(--green-ink); }
  .tpp-btn--fill:hover { background: #b8dd2a; }
  .tpp-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

  .tpp-card__features { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
  .tpp-card__inherit { font-size: 12px; font-weight: 700; color: var(--text-3); margin-bottom: 12px; }
  .tpp-card__inherit span { color: var(--green); }
  .tpp-card__list { display: grid; gap: 10px; font-size: 14px; color: var(--text-2); }
  .tpp-card__list li { position: relative; padding-left: 22px; line-height: 1.55; }
  .tpp-card__list li::before {
    content: ""; position: absolute; left: 0; top: .3em; width: 14px; height: 14px; border-radius: 50%;
    background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 7.2l2.2 2.2 4.6-4.8' fill='none' stroke='%23192100' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
  }
  .tpp-card__list small { display: block; color: var(--text-4); font-size: 12px; margin-top: 2px; }
  .tpp-card__list b { color: var(--text); }


  @media (min-width: 768px) {
    .tpp__catch { font-size: 22px; }
    .tpp__catch::before, .tpp__catch::after { font-size: 28px; }
    .tpp__lead { font-size: 14px; }

    /* ボタン・注意書きとサービス内容を別の行にし、分割線の高さも共有 */
    .tpp__plans { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; row-gap: 0; margin-top: 44px; }
    .tpp-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; padding: 32px 26px 28px; }
    .tpp-card__bottom { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-self: stretch; }
    .tpp-card .tpp-card__features { margin-top: 16px; }
  }
  /* subgrid 非対応ブラウザ向けのフォールバック：補足ブロックの高さだけ固定 */
  @supports not (grid-template-rows: subgrid) {
    @media (min-width: 768px) {
      .tpp-card { display: flex; }
      .tpp-card__bottom { display: block; }
      .tpp-card__for { min-height: 2.2em; }
    }
  }
  @media (min-width: 768px) and (max-width: 980px) {
    .tpp__plans { column-gap: 12px; }
    .tpp-card { padding-inline: 18px; }
    .tpp-card__price strong { font-size: 38px; }
    .tpp-btn { font-size: 14px; }
  }
  @media (prefers-reduced-motion: reduce) { .tpp-btn { transition: none; } }

.tpp .tpp-btn:visited { color: var(--green); }
.tpp .tpp-btn--fill:visited { color: var(--green-ink); }
.tpp-btn:disabled { background: #4a4d4f; border-color: #4a4d4f; color: #c3c8cd; cursor: default; }

.topCommunityBanner__inner { margin-inline: auto; }
.topCommunityBanner__title { margin: 0 0 14px; border-left: none; padding-left: 0; }
.topCommunityBanner__image { display: block; overflow: hidden; border-radius: 12px; }
.topCommunityBanner img { display: block; width: 100%; height: auto; }
.topCommunityBanner a:focus-visible { outline: 3px solid #cbf236; outline-offset: 4px; }
.topCommunityBanner__panel { margin-top: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #333335; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; }
.topCommunityBanner__tag { align-self: flex-start; background: #cba452; color: #241b06; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 5px; }
.topCommunityBanner__panel h3 { color: #f5f5f1; margin: 0; font-size: 16px; font-weight: 700; line-height: 1.5; }
.topCommunityBanner__panel p { margin: 0; font-size: 13px; line-height: 1.8; color: #a6a6aa; }
.topCommunityBanner__panel ul { display: none; list-style: none; margin: 0; padding: 0; }
.topCommunityBanner__panel li { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.09); color: #f5f5f1; font-size: 14px; line-height: 1.6; }
.topCommunityBanner__panel li::before { content: ""; flex: 0 0 6px; height: 6px; margin-top: .6em; border-radius: 50%; background: #cbf236; }
.topCommunityBanner__cta, .topCommunityBanner__cta:visited { display: flex; justify-content: center; align-items: center; margin-top: 4px; padding: 13px 18px; border-radius: 999px; background: #cbf236; color: #192100; font-size: 14px; font-weight: 700; text-decoration: none; }
.topCommunityBanner__cta:hover { background: #b8dd2a; }
@media (min-width: 768px) {
    .topCommunityBanner__inner { display: grid; grid-template-columns: minmax(0, 1fr) min(340px, 42%); column-gap: 24px; }
    .topCommunityBanner__title { grid-column: 1 / -1; margin-bottom: 22px; }
    .topCommunityBanner__image { border-radius: 16px; align-self: start; min-width: 0; }
    .topCommunityBanner__panel { margin-top: 0; padding: 28px 26px; border-radius: 16px; gap: 14px; min-width: 0; }
    .topCommunityBanner__panel h3 { font-size: 21px; }
    .topCommunityBanner__panel ul { display: block; }
    .topCommunityBanner__cta { margin-top: auto; font-size: 15px; padding: 15px 20px; }
}