@charset "utf-8";

/*==============================================================

  電話占いシェリール 5周年記念キャンペーン LP
  /css/anniv/5th.css

  ・すべてのクラスに「c5-」を付けて、サイト共通CSSと干渉しないようにしています
  ・色を変えるときは、下の「カラー」の変数を変更してください

==============================================================*/

.c5 {
  /* カラー */
  --c5-night: #241C45;      /* 深い紫（FV・フッター・ボタン） */
  --c5-royal: #4B3A8F;      /* ロイヤル紫（選択中タブ・リンク） */
  --c5-ink: #2E2547;        /* 本文 */
  --c5-sub: #5A5170;        /* 補足テキスト */
  --c5-ivory: #FBF7EE;      /* ページ背景 */
  --c5-pink: #F3EAE4;       /* 注意事項・タブ背景（シャンパンピンク） */
  --c5-gold: #D4AA55;
  --c5-gold-line: #B8893B;
  --c5-gold-light: #F3DC98;
  --c5-gold-text: #7A5418;
  --c5-gold-deep: #5E4110;
  --c5-icon: #8A6420;
  --c5-rose: #9A2F5E;
  --c5-border: #E7D7B4;

  max-width: 750px;
  margin: 0 auto;
  background: var(--c5-ivory);
  color: var(--c5-ink);
  /* 本文は端末標準のゴシック体（Webフォントを読み込まず軽量化） */
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 14px;
  line-height: 1.75;
  text-align: left;
  overflow: hidden;
}

.c5 *,
.c5 *::before,
.c5 *::after {
  box-sizing: border-box;
}

/* リセット（:where で優先度を0にして、下の個別指定が必ず効くようにしています） */
.c5 :where(h1, h2, h3, p, ul, ol, li) {
  margin: 0;
  padding: 0;
  border: 0;
  letter-spacing: normal;
  font-weight: inherit;
}

.c5 a { transition: opacity .2s ease; }
.c5 a:hover { opacity: .75; }

.c5 svg { display: inline-block; vertical-align: middle; flex: none; }

.c5-mincho { font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; }
.c5-en { font-family: "Cormorant Garamond", "Times New Roman", serif; }


/*==============================================================
  キャンペーン終了のお知らせ
==============================================================*/

.c5-fin {
  width: 100%;
  max-width: 520px;
  margin-bottom: 12px;
  padding: 16px 18px;
  background: var(--c5-ivory);
  color: var(--c5-ink);
  border: 1px solid var(--c5-gold);
  outline: 1px solid rgba(212, 170, 85, .45);
  outline-offset: -6px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
}

.c5 .c5-fin__title {
  font-size: clamp(15px, 4.2vw, 18px);
  word-break: keep-all;
  font-weight: 800;
  line-height: 1.5;
  color: var(--c5-ink);
}

.c5-fin__text {
  margin-top: 6px !important;
  font-size: clamp(12px, 3.3vw, 13px);
  line-height: 1.7;
  color: var(--c5-sub);
}


/*==============================================================
  ファーストビュー
==============================================================*/

.c5-hero {
  position: relative;
  background: var(--c5-night);
  color: #FFFFFF;
  padding: clamp(18px, 5vw, 28px) 20px clamp(20px, 5vw, 28px);
  text-align: center;
  overflow: hidden;
}

.c5-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.c5-hero__star {
  position: absolute;
  fill: #E9CF8E;
}

.c5-hero__star--1 { top: 12%; left: 9%;  width: 26px; height: 26px; opacity: .9; }
.c5-hero__star--2 { top: 20%; right: 10%; width: 18px; height: 18px; opacity: .85; }
.c5-hero__star--3 { top: 46%; left: 16%; width: 14px; height: 14px; opacity: .8; }
.c5-hero__star--4 { top: 52%; right: 15%; width: 12px; height: 12px; opacity: .7; }

.c5-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.c5-hero__en {
  font-style: italic;
  font-size: clamp(13px, 3.6vw, 16px);
  letter-spacing: .12em;
  color: var(--c5-gold-light);
}

.c5-hero__emblem {
  width: clamp(130px, 36vw, 180px);
  height: auto;
}

.c5-hero__sub {
  font-size: clamp(14px, 3.8vw, 17px);
  font-weight: 700;
  letter-spacing: .12em;
  white-space: nowrap;
  color: var(--c5-gold-light);
}

.c5 .c5-hero__title {
  font-weight: 800;
  font-size: clamp(21px, 5.8vw, 32px);
  line-height: 1.4;
  white-space: nowrap;
  color: #FFFFFF;
}

.c5-hero__period {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 6px clamp(6px, 2vw, 18px);
  border-top: 1px solid rgba(233, 207, 142, .5);
  border-bottom: 1px solid rgba(233, 207, 142, .5);
}

.c5-hero__period span {
  font-weight: 700;
  font-size: clamp(13px, 3.7vw, 18px);
  white-space: nowrap;
}


/*==============================================================
  セクション見出し（左右に◆の飾り）
==============================================================*/

.c5-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.c5 .c5-heading h2 {
  font-size: 21px;
  font-weight: 700;
  color: var(--c5-ink);
}


/*==============================================================
  スケジュール（第1〜3弾の一覧）
==============================================================*/

.c5-schedule {
  padding: 22px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.c5-schedule__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.c5-sched {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 4px 12px;
  border: 1px solid var(--c5-border);
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--c5-ink);
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.c5-sched.is-active {
  border: 2px solid var(--c5-gold);
  box-shadow: 0 6px 18px rgba(184, 137, 59, .18);
}

.c5-sched__name {
  font-weight: 800;
  font-size: 17px;
}

.c5-sched__dates {
  font-size: 12px;
  color: var(--c5-sub);
}

.c5-badge {
  margin-top: 4px;
  border-radius: 3px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.75;
}

.c5-badge--live { background: var(--c5-rose); color: #FFFFFF; }
.c5-badge--soon { background: #FFF1D6; color: var(--c5-gold-text); }
.c5-badge--end  { background: #E9E6EF; color: var(--c5-sub); }
.c5-badge--last {
  background: #FBE9F0;
  color: var(--c5-rose);
  padding: 0 clamp(3px, 1vw, 6px);
  font-size: clamp(8.5px, 2.6vw, 11px);
  letter-spacing: -.02em;
  white-space: nowrap;
}


/*==============================================================
  タブ
==============================================================*/

.c5-phases {
  padding: 20px 0 8px;
}

.c5-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--c5-border);
  border-bottom: 1px solid var(--c5-border);
  background: var(--c5-pink);
}

.c5-tab {
  position: relative;
  min-height: 56px;
  border: none;
  background: var(--c5-pink);
  color: var(--c5-sub);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.c5-tab.is-active {
  background: var(--c5-ivory);
  color: var(--c5-royal);
}

.c5-tab__bar {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: transparent;
}

.c5-tab.is-active .c5-tab__bar {
  background: linear-gradient(90deg, #D4AA55, #F6E3A8, #D4AA55);
}

.c5-panels {
  padding: 24px 20px 8px;
}

.c5-panel {
  display: none;
  flex-direction: column;
  gap: 16px;
}

.c5-panel.is-active {
  display: flex;
}

.c5-banner {
  text-align: center;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
}

.c5-banner--live { background: var(--c5-night); color: var(--c5-gold-light); }
.c5-banner--soon { background: #FFF1D6; color: var(--c5-gold-text); }
.c5-banner--end  { background: #E9E6EF; color: var(--c5-sub); }
.c5-banner--last { background: var(--c5-night); color: var(--c5-gold-light); }


/*==============================================================
  開催前（Coming soon）・終了後の表示
==============================================================*/

.c5-soon,
.c5-ended {
  position: relative;
  margin-bottom: 28px;
  border-radius: 10px;
  padding: clamp(36px, 9vw, 48px) 20px;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.c5-soon {
  background: linear-gradient(160deg, #FFFEFA 0%, #FAF2DE 100%);
  border: 1.5px solid #DCC58F;
  box-shadow: 0 6px 16px rgba(184, 137, 59, .12);
}

.c5-soon > * { position: relative; }

.c5 .c5-soon__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.c5-soon__en,
.c5-ended__en {
  font-style: italic;
  line-height: 1.1;
}

.c5-soon__en {
  font-size: clamp(34px, 9vw, 44px);
  letter-spacing: .04em;
  color: var(--c5-gold-text);
}

.c5-soon__title,
.c5-ended__title {
  font-size: clamp(17px, 4.6vw, 20px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--c5-ink);
}

.c5-soon__text,
.c5-ended__text {
  font-size: 13px;
  color: var(--c5-sub);
}

.c5-ended {
  background: #F1EFF4;
  border: 1px solid #DCD6E6;
  padding-top: clamp(32px, 8vw, 44px);
  padding-bottom: clamp(32px, 8vw, 44px);
}

.c5-ended__en {
  font-size: clamp(28px, 7.5vw, 36px);
  color: #6B6585;
}

.c5-btn--go {
  max-width: 320px;
  min-height: 52px;
  margin-top: 8px;
  border: none;
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
}


/*==============================================================
  レイアウト
==============================================================*/

/* PCは横並び・SPは縦並び */
.c5-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.c5-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/*==============================================================
  特典チケット
==============================================================*/

.c5-ticket {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  color: var(--c5-ink);
}

/* 1番目：クーポン（濃い金） */
.c5-ticket--main {
  background: linear-gradient(160deg, #FCF0CB 0%, #E8C77F 100%);
  border: 2px solid var(--c5-gold-line);
  box-shadow: 0 12px 30px rgba(184, 137, 59, .32);
}

/* 第3弾クーポン（さらに濃い金） */
.c5-ticket--final {
  background: linear-gradient(160deg, #F9E6AE 0%, #D9B262 100%);
  border: 2px solid #A87A2E;
  box-shadow: 0 14px 34px rgba(168, 122, 46, .38);
}

/* 2番目：ログボ・感謝の声・事前購入（淡いシャンパンゴールド） */
.c5-ticket--sub {
  background: linear-gradient(160deg, #FFFEFA 0%, #FAF2DE 100%);
  border: 1.5px solid #DCC58F;
  box-shadow: 0 6px 16px rgba(184, 137, 59, .12);
}

.c5-ticket__top {
  padding: clamp(20px, 5vw, 26px) clamp(14px, 4vw, 22px) clamp(16px, 4vw, 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.c5-ticket__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c5-gold-text);
}

.c5-ticket--main .c5-ticket__label,
.c5-ticket--final .c5-ticket__label {
  color: var(--c5-gold-deep);
}

.c5-tag {
  border-radius: 3px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 900;
  background: var(--c5-rose);
  color: #FFFFFF;
}

.c5-tag--gold {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  font-size: 13px;
  background: linear-gradient(90deg, #E9CF8E, #F6E3A8, #D4AA55);
  color: var(--c5-ink);
}

.c5-ticket__value {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 800;
  line-height: 1.1;
  min-height: clamp(66px, 17.6vw, 97px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(60px, 16vw, 88px);
  color: var(--c5-gold-text);
  white-space: nowrap;
}

.c5-ticket--main .c5-ticket__value,
.c5-ticket--final .c5-ticket__value {
  color: var(--c5-gold-deep);
}

/* 桁の多い数字（1,000円OFF・2,500円分など） */
.c5-ticket__value--md {
  font-size: clamp(48px, 15vw, 66px);
}

.c5-ticket__value--lg-num {
  font-size: clamp(46px, 14vw, 66px);
}

.c5-unit     { font-size: .48em; }
.c5-unit--sm { font-size: .42em; }
.c5-unit--xs { font-size: .4em; }
.c5-pre      { font-size: .36em; margin-right: 2px; }

.c5-ticket__lead {
  font-size: 16px;
  font-weight: 700;
}

.c5-ticket__note {
  font-size: 13px;
  font-weight: 700;
}

.c5-ticket__catch {
  margin: -8px 0 4px;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--c5-gold-text);
}

.c5-ticket__catch--sm { font-size: 20px; }

.c5-ticket__desc {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

/* 切り取り線 */
.c5-ticket__dash {
  margin: auto 18px 0;
  border-top: 2px dashed rgba(184, 137, 59, .4);
}

.c5-ticket--main .c5-ticket__dash,
.c5-ticket--final .c5-ticket__dash {
  border-top-color: rgba(122, 84, 24, .45);
}

.c5-ticket__bottom {
  padding: 16px clamp(14px, 4vw, 22px) clamp(18px, 4.5vw, 22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.c5-ticket__bottom--tight {
  padding-top: 4px;
  padding-bottom: clamp(20px, 5vw, 26px);
}

.c5-ticket__period {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.5;
  text-align: center;
}

.c5-ticket__period span {
  white-space: nowrap;
  font-size: clamp(11.5px, 3.1vw, 13px);
}


/*==============================================================
  ボタン
==============================================================*/

.c5-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  min-height: 56px;
  border-radius: 999px;
  background: var(--c5-night);
  color: var(--c5-gold-light) !important;
  font-size: 17px;
  font-weight: 900;
  text-decoration: none !important;
}

.c5-btn--outline {
  min-height: 52px;
  border: 1.5px solid var(--c5-night);
  background: #FFFFFF;
  color: var(--c5-night) !important;
  font-size: 16px;
}

.c5-btn--line {
  max-width: none;
  margin-top: auto;
  min-height: 48px;
  border: 1.5px solid var(--c5-night);
  background: transparent;
  color: var(--c5-night) !important;
  font-size: 14px;
  font-weight: 700;
}

.c5-btn--gold {
  max-width: 400px;
  min-height: 58px;
  margin-top: 8px;
  background: linear-gradient(90deg, #E9CF8E, #F6E3A8, #D4AA55);
  color: var(--c5-ink) !important;
}


/*==============================================================
  LINE シークレット特典
==============================================================*/

.c5-card {
  background: #FFFFFF;
  border: 1px solid var(--c5-border);
  border-radius: 8px;
  padding: clamp(16px, 4.5vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c5-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.c5-card__icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #EEEBF5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c5 .c5-card__title {
  font-size: 15px;
  font-weight: 700;
}

.c5-card__text {
  font-size: 13px;
  color: var(--c5-sub);
}


/*==============================================================
  感謝の声：2ステップ
==============================================================*/

.c5-flow {
  width: 100%;
  max-width: 560px;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 2px dashed rgba(184, 137, 59, .4);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c5-flow__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--c5-gold-text);
}

.c5-flow__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 4px;
}

.c5-flow__arrow { align-self: center; }

.c5-step {
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid #EADFC6;
  border-radius: 6px;
  padding: 12px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.c5-step__num {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--c5-icon);
}

.c5-step__text {
  font-size: clamp(11.5px, 3.1vw, 13px);
  line-height: 1.5;
}

.c5-step__date {
  display: block;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed #DCC58F;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--c5-gold-text);
  white-space: nowrap;
}

.c5-warn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c5-rose);
}

.c5-warn a {
  color: var(--c5-rose);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/*==============================================================
  事前購入ポイント：付与表
==============================================================*/

.c5-table-wrap {
  width: 100%;
  max-width: 560px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 2px dashed rgba(184, 137, 59, .4);
}

.c5-table {
  background: #FFFFFF;
  border: 1px solid #EADFC6;
  border-radius: 6px;
  padding: 2px 12px;
}

/* 事前購入の表：<table> で列の縦位置を全行そろえています
   幅の狭い端末では文字・余白を少し小さくして、1行に収まるようにしています */
.c5 .c5-table table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  background: none;
  margin: 0;
}

.c5 .c5-table td {
  padding: 9px 0;
  border: 0;
  background: none;
  vertical-align: middle;
  white-space: nowrap;
  text-align: right;
}

.c5 .c5-table td + td { padding-left: clamp(6px, 2.4vw, 14px); }
.c5 .c5-table tr + tr td { border-top: 1px dotted #DCC58F; }

.c5-row__buy,
.c5-row__get {
  font-size: clamp(9.5px, 2.9vw, 13px);
  letter-spacing: -.01em;
}

.c5-row__buy strong { font-size: clamp(11px, 3.4vw, 16px); }

.c5-row__get strong {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: clamp(13px, 4vw, 19px);
  color: var(--c5-gold-text);
}


.c5-up {
  display: inline-block;
  border-radius: 3px;
  padding: 2px clamp(3px, 1.3vw, 6px);
  font-size: clamp(9px, 2.6vw, 12px);
  font-weight: 900;
  line-height: 1.3;
  white-space: nowrap;
  background: #F7EBCB;
  color: var(--c5-gold-deep);
}

.c5-up--top { background: var(--c5-rose); color: #FFFFFF; }

@media (max-width: 400px) {
  .c5-table { padding: 2px 8px; }
}


/*==============================================================
  注意事項
==============================================================*/

.c5-notes {
  margin-top: 36px;
  background: var(--c5-pink);
  padding: 36px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.c5-notes__lead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid #E8B9CB;
  border-bottom: 1px solid #E8B9CB;
  color: var(--c5-rose);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.c5-notes[hidden],
.c5-notes__group[hidden] { display: none; }

.c5-notes__group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.c5-note {
  scroll-margin-top: 80px;
  background: #FFFFFF;
  border: 1px solid #E2DCEE;
  border-radius: 8px;
  padding: clamp(16px, 4.5vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.c5 .c5-note__title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #E8E3F0;
  font-size: 16px;
  font-weight: 700;
}

.c5 .c5-note ul,
.c5 .c5-note ol {
  padding-left: 1.2em;
  font-size: 14px;
  line-height: 1.8;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.c5 .c5-note ul { list-style: disc; }
.c5 .c5-note ol { list-style: decimal; padding-left: 1.4em; }

.c5 .c5-note li.c5-note__period {
  list-style: none;
  margin-left: -1.2em;
}

.c5-label {
  display: inline-block;
  margin-bottom: 4px;
  background: var(--c5-night);
  color: var(--c5-gold-light);
  border-radius: 3px;
  padding: 1px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}

.c5-note__period strong {
  font-size: 14px;
  font-weight: 700;
}

.c5-mark {
  display: inline;
}

.c5-note__caution {
  font-size: 14px;
  font-weight: 700;
  color: var(--c5-rose);
}

.c5-note__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: 18px;
  padding-top: 4px;
}

.c5-note__links--col {
  flex-direction: column;
  align-items: flex-end;
}

.c5-textlink {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 6px 0;
  color: var(--c5-royal) !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}


/*==============================================================
  フッター（メッセージ・定期キャンペーン）
==============================================================*/

.c5-final {
  position: relative;
  background: var(--c5-night);
  color: var(--c5-ivory);
  padding: clamp(40px, 10vw, 48px) 20px clamp(44px, 11vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  overflow: hidden;
}

.c5-final__logo {
  display: block;
  width: min(44%, 170px);
  height: auto;
}

.c5-final__en {
  font-size: clamp(16px, 4.4vw, 20px);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--c5-gold-light);
}

.c5 .c5-final__title {
  font-size: clamp(20px, 5.2vw, 28px);
  font-weight: 700;
  line-height: 1.6;
  color: #FFFFFF;
}

.c5-info {
  margin-top: 32px;
  width: 100%;
  max-width: 560px;
  background: var(--c5-ivory);
  color: var(--c5-ink);
  border: 2px solid var(--c5-gold);
  border-radius: 8px;
  padding: clamp(18px, 5vw, 24px) clamp(14px, 4vw, 20px) 8px;
  text-align: left;
}

.c5-info__title {
  margin-bottom: 8px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
}

.c5-info__title span { display: block; }
.c5-info__title .c5-info__catch { color: var(--c5-gold-text); }
.c5-info__title .c5-info__thanks {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
}

.c5 .c5-info ul { list-style: none; }

.c5-info li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #E8E3F0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.c5-info li svg { margin-top: 2px; }

.c5-info li small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c5-sub);
}


/*==============================================================
  クーポン開始前の被せ（0:00〜10:00）
==============================================================*/

.c5-wait {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(251, 247, 238, .86);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  text-align: center;
}

.c5-wait__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c5-night);
  display: flex;
  align-items: center;
  justify-content: center;
}

.c5 .c5-wait__title {
  font-size: clamp(20px, 5.4vw, 24px);
  font-weight: 800;
  line-height: 1.45;
  color: var(--c5-ink);
}

.c5-wait__text {
  font-size: 13px;
  font-weight: 700;
  color: var(--c5-sub);
}