@charset "UTF-8";
/* ========================================
   体験料金キャンペーン表示（2026-08 追加）

   打ち消し価格と期限バッジのスタイル。
   style.css は Sass からのビルド成果物のため、
   上書きされないよう別ファイルに分けている。
   表示の ON/OFF は functions-inc/function_trial-price.php 側で制御。
======================================== */

/* --- 共通: 打ち消し価格 --- */
.p-price__trial-regular,
.p-floating-cta__status-regular {
  color: #9a9a9a;
  text-decoration: line-through;
  font-weight: 500;
}

/* --- 共通: 期限バッジ --- */
.p-price__trial-badge {
  display: inline-block;
  padding: 0.25em 0.9em;
  border-radius: 999px;
  background: #7d6a55;
  color: #fff;
  font-size: max(0.75rem, 9.6px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* --- TOP 料金セクション ---
   .p-price__trial は横並びのflex。キャンペーン表示は縦積みにしたいので
   ラッパーを1つのflexアイテムとして扱い、その中で縦に積む。 */
.p-price__trial-campaign {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  padding-block: 1.1em;
}

.p-price__trial-campaign .p-price__trial-badge {
  align-self: center;
}

.p-price__trial-campaign .p-price__trial-regular {
  display: flex;
  align-items: baseline;
  gap: 0.15em;
  font-size: max(1.125rem, 14.4px);
}

.p-price__trial-campaign .p-price__trial-regular s {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  text-decoration: line-through;
}

/* ラッパー内では価格自体の伸長は不要 */
.p-price__trial-campaign .p-price__trial-price {
  flex: 0 0 auto;
}

/* --- 追従CTA（省スペースなので控えめに） --- */
.p-floating-cta__status-regular {
  margin-right: 0.4em;
  font-size: 0.85em;
}

@media screen and (max-width: 767px) {
  .p-price__trial-regular {
    font-size: max(1rem, 12.8px);
  }
}

/* ========================================
   トップポップアップ 遅延表示（2026-08 追加）

   テーマCSSが .p-top-popup に display:grid を当てているため、
   HTMLの hidden 属性（＝ブラウザ標準の display:none）が打ち消されてしまう。
   その結果「読み込み直後に一度表示 → 2秒後にもう一度表示」となるため、
   hidden の間は確実に隠れるよう !important で上書きする。
   （表示は assets/js/top.js が hidden を外して行う）
======================================== */
.p-top-popup[hidden] {
  display: none !important;
}

/* ========================================
   料金プラン 5枚（2026-09 6枚化 → 2026-10-13 月2回を削除して5枚）
   1段目＝月4・6・8・12回、2段目＝1回チケット（5枚目）を中央に1枚。
   PCは4列グリッドなので2〜3列目にまたがらせて中央に置き、幅は1列分にそろえる。
   SPは2列なので、5枚目だけ2列ぶち抜きで中央に1列分の幅で置く。
======================================== */
@media screen and (min-width: 768px) {
  .p-price__plan:nth-child(5) {
    grid-column: 2 / 4;
    justify-self: center;
    width: calc((100% - max(.6875rem, 8.8px)) / 2);
  }
}
@media screen and (max-width: 767.9px) {
  .p-price__plan:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 1rem) / 2);
  }
}

/* 1回チケット: 「月N回」の代わりにプラン名を表示 */
.p-price-card__times-unit--ticket {
  line-height: 50px;
}
@media screen and (max-width: 767px) {
  .p-price-card__times-unit--ticket {
    line-height: 30px;
  }
}

/* ========================================
   トップポップアップ 画像化（2026-09 追加）
   体験レッスン予約のテキスト組みをキャンペーン画像に置き換え。
   画像は front-page.php、ON/OFF は同ファイルの if (false) ブロック参照。
======================================== */
.p-top-popup__campaign-img {
  display: block;
  width: 100%;
  max-width: 348px;
  height: auto;
  border-radius: 4px;
}

.p-top-popup__section--campaign + .p-top-popup__section--line {
  margin-top: 24px;
}

@media screen and (max-width: 767px) {
  .p-top-popup__section--campaign + .p-top-popup__section--line {
    margin-top: 18px;
  }
}

/* 月12回（2026-10-13 から4枚目）のリード「最短で効果を実感したい方向け」（14文字）が
   PCでカード幅に1文字分収まらず折り返すため、少しだけ詰めて1行に収める */
@media screen and (min-width: 768px) {
  .p-price__plan:nth-child(4) .p-price-card__lead {
    margin-inline: -0.75em;
    letter-spacing: -0.03em;
    white-space: nowrap;
  }
}