@charset "UTF-8";

/* ============================================================
   CAMPAIGN — 構成は LIVE と共通（.liveList を流用）
   追加の小さめテキストとフォームリンクだけをここで定義する。
   index_0917.html 専用。style.css の後に読み込む。
   ============================================================ */

.campaignNote {
  margin: 0 0 6px;
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--text-dim);
}

.campaignNote__label {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: rgba(244, 241, 234, 0.4);
}

.campaignNote time {
  font-family: var(--font-sans);
  color: var(--gold);
  letter-spacing: 0.06em;
}

/* —— ボタン（意匠は STORE の .storeBlock__btn に合わせたピル型） —— */
.campaignBtns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 16px 0 0;
}

.campaignBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--text);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease),
    color 0.35s var(--ease);
}

.campaignBtn::after {
  content: "→";
  font-size: 1.05em;
  transition: transform 0.35s var(--ease);
}

.campaignBtn:hover,
.campaignBtn:focus-visible {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.campaignBtn:hover::after {
  transform: translateX(3px);
}

.campaignBtn:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 2px;
}

/* キャンペーンサイトへの動線は主役として金の枠で強調 */
.campaignBtn--primary {
  border-color: rgba(212, 184, 114, 0.55);
  color: var(--gold);
}

.campaignBtn--primary:hover,
.campaignBtn--primary:focus-visible {
  border-color: var(--gold);
  background: rgba(212, 184, 114, 0.1);
  color: var(--gold);
}

/* リンク先URLが未発行のタイトル（a タグを付ければそのままリンクになる） */
.liveList__titleText {
  color: inherit;
}

@media (max-width: 767px) {
  .campaignNote { font-size: 1.15rem; }

  .campaignBtns { gap: 8px 10px; }

  .campaignBtn {
    padding: 10px 18px;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
  }
}