@charset "UTF-8";

/* ============================================================================
 * thanks.css — 完了/通知系画面（6ファイル共通）
 * ============================================================================
 *
 * 対応PHP：
 *   - thanks.php                       … 参加登録完了（メイン、フル装飾）
 *   - entry_closed.php                 … 登録期間外（通知モード）
 *   - event_end.php                    … イベント終了（通知モード）
 *   - password_reset_request_end.php   … パスワード再設定リクエスト完了
 *   - reset_password_end.php           … パスワード再設定完了
 *   - thanks_edit.php                  … 修正登録完了（マイページ系のため今回対象外）
 *
 * 設計方針：
 *   - HTML（class / id）は触らず、新規追加した装飾クラスにスタイルを当てる
 *   - 配色は案B（紺 #0C73B2 + ティール #26a69a）維持
 *   - チェックマーク・成功表示は緑（success #2a7a4f）
 *   - 既存 .thanks-message / .contact-area / .step-bar / dl/dt/dd を維持
 *
 * ============================================================================ */

/* ============================================================================
 * 1. メインコンテナ
 * ============================================================================ */
.container {
  max-width: 900px !important;
  width: auto !important;
  margin: 32px auto var(--footer-gap, 30vh) !important;
  padding: 0 24px !important;
}

@media (max-width: 575.98px) {
  .container {
    margin: 20px auto var(--footer-gap, 30vh) !important;
    padding: 0 12px !important;
  }
}

/* ============================================================================
 * 2. ページ見出し h2
 *    - thanks.php  : <h2>参加登録完了</h2> + Hero がある → h2 は視覚的に隠して Hero に役割委譲
 *    - password_reset_request_end.php / reset_password_end.php
 *                   : <h2>パスワード再設定リクエスト完了</h2> のみ（Heroなし） → 装飾表示
 *    - entry_closed.php / event_end.php : h2 なし（h1 が thanks-message 内にある）
 *
 *    判定：.container 内に .thanks-hero があるかどうかで分岐（:has() セレクタ）
 * ============================================================================ */

/* デフォルト：h2 を「Hero風」の見出しとして装飾表示 */
.container > h2 {
  /* common.css の h2（紺背景カードヘッダー型）を打ち消し */
  display: block !important;
  position: static !important;
  background: transparent !important;
  background-color: transparent !important;
  margin: 0 0 22px !important;
  padding: 0 0 14px !important;
  border: none !important;
  border-bottom: 2px solid var(--accent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: "Noto Serif JP", serif !important;
  font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem) !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  letter-spacing: 0.05em !important;
  text-align: center !important;
  line-height: 1.5 !important;
}

.container > h2::before {
  content: none !important;
  display: none !important;
}

/* Hero がある場合（thanks.php）は h2 を視覚的に隠す（SR向けには残る） */
.container:has(.thanks-hero) > h2 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

@media (max-width: 575.98px) {
  .container > h2 {
    margin-bottom: 18px !important;
    padding-bottom: 12px !important;
    font-size: 1.2rem !important;
  }
}

/* ============================================================================
 * 3. #thanks ラッパー
 *    既存 <section> の border / margin 等を解除し、新デザインに置き換え
 * ============================================================================ */
#thanks {
  margin: 0;
  padding: 0;
}

#thanks section {
  /* 旧 thanks.css の section スタイル（border, margin 等）を打ち消し */
  width: 100%;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin: 0 0 22px !important;
  /* padding: 0 !important; */
  /* background: transparent; */
}

@media (max-width: 575.98px) {
  #thanks section {
    margin: 0 0 16px !important;
  }
}

/* ============================================================================
 * 4. Hero（チェックマーク + 完了メッセージ）— thanks.php
 *    新規 <section class="thanks-hero"> + <div class="check-circle"> 装飾
 * ============================================================================ */
.thanks-hero {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 44px 28px 38px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* 上部にティール → 紺のグラデーション帯（装飾） */
.thanks-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%);
}

/* チェックマーク円（成功色） */
.thanks-hero .check-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--success) 0%, #3a9560 100%);
  color: #fff;
  font-size: 37px;
  font-weight: 700;
  margin: 0 auto 18px;
  box-shadow: 0 6px 20px rgba(42, 122, 79, 0.32);
  animation: thanksCheckPop 0.5s ease-out;
}

@keyframes thanksCheckPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* メッセージ部分 */
.thanks-hero .thanks-message {
  /* 旧 thanks.css の thanks-message（max-width: 800px / padding: 45px）を打ち消し */
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.thanks-hero .thanks-message h3 {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin: 0 0 12px;
}

.thanks-hero .thanks-message h3 span {
  display: inline-block;
  margin: 0 2px;
}

.thanks-hero .thanks-subtitle {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
  font-weight: 500;
}

@media (max-width: 575.98px) {
  .thanks-hero {
    padding: 32px 18px 28px;
  }
  .thanks-hero .check-circle {
    width: 60px;
    height: 60px;
    font-size: 31px;
    margin-bottom: 14px;
  }
  .thanks-hero .thanks-message h3 span {
    display: inline;
  }
}

/* ============================================================================
 * 5. メール通知バナー（.email-notice）— thanks.php
 * ============================================================================ */
.email-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fffbea;
  border: 1px solid #f0d060;
  border-left: 4px solid var(--warning);
  border-radius: var(--radius);
  padding: 14px 20px ;
}

.email-notice-icon {
  font-size: 23px;
  flex-shrink: 0;
  margin-top: 2px;
}

.email-notice-text {
  font-size: 14px;
  color: #7a5a10;
  line-height: 1.7;
  flex: 1;
}

.email-notice-text strong {
  color: #5a3a00;
  font-weight: 700;
  font-size: 13.5px;
}

.email-notice-addr {
  display: inline-block;
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: var(--primary);
  background: var(--white);
  padding: 1px 8px;
  border-radius: 3px;
  border: 1px solid var(--border-pale);
  font-size: 12.5px;
  margin: 2px 0;
}

.email-notice-sub {
  font-size: 13px;
  color: var(--text-muted);
  display: inline-block;
  margin-top: 2px;
}

@media (max-width: 575.98px) {
  .email-notice {
    padding: 12px 14px;
    gap: 10px;
  }
  .email-notice-icon {
    font-size: 19px;
  }
  .email-notice-text {
    font-size: 12.5px;
  }
}

/* ============================================================================
 * 5b. 銀行振込ユーザー向け通知バナー（.bank-notice）
 *     thanks.php で add_pay_type == "2" のときだけ表示される。
 *     口座情報を直接出さず「マイページで確認してください」と誘導する設計。
 * ============================================================================ */
.bank-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--primary-pale);
  border: 1px solid #b0c8e8;
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: 14px 20px;
}

.bank-notice-icon {
  font-size: 23px;
  flex-shrink: 0;
  margin-top: 2px;
}

.bank-notice-text {
  font-size: 14px;
  color: var(--text-color);
  line-height: 1.7;
  flex: 1;
}

.bank-notice-text strong {
  color: var(--primary);
  font-weight: 700;
  font-size: 13.5px;
}

/* 振込期限の赤文字強調（先方指示 2026-07-08 pptx） */
.bank-notice-deadline {
  color: var(--error);
}

@media (max-width: 575.98px) {
  .bank-notice {
    padding: 12px 14px;
    gap: 10px;
  }
  .bank-notice-icon {
    font-size: 19px;
  }
  .bank-notice-text {
    font-size: 12.5px;
  }
}

/* ============================================================================
 * 5c. 現金払いユーザー向け通知バナー（.cash-notice）
 *     thanks.php で add_pay_type == "3" のときだけ表示される。
 *     文言は大会ごとに変更前提（受付場所・時間など必要なら追記する）。
 * ============================================================================ */
.cash-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #f7f9fc;
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 20px;
}

.cash-notice-icon {
  font-size: 23px;
  flex-shrink: 0;
  margin-top: 2px;
}

.cash-notice-text {
  font-size: 14px;
  color: var(--text-color);
  line-height: 1.7;
  flex: 1;
}

.cash-notice-text strong {
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 13.5px;
}

@media (max-width: 575.98px) {
  .cash-notice {
    padding: 12px 14px;
    gap: 10px;
  }
  .cash-notice-icon {
    font-size: 19px;
  }
  .cash-notice-text {
    font-size: 12.5px;
  }
}

/* ============================================================================
 * 6. info-grid（登録内容 + お支払い内容）— thanks.php
 * ============================================================================ */
.info-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  background: transparent;
  border: none !important;
  margin: 0 0 22px !important;
}

@media (max-width: 767.98px) {
  .info-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.info-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.info-card-header {
  background: var(--primary);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.info-card-header::before {
  content: '';
  display: block;
  width: 4px;
  height: 18px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}

.info-card-header h3 {
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  margin: 0;
  padding: 0;
  /* contact-area の h3（中央寄せ大）と区別するため明示的に */
  text-align: left;
  line-height: 1.5;
}

.info-card-header h3 span {
  display: inline;
}

.info-card-header h3 span + span {
  margin-left: 4px;
}

.info-card-body {
  padding: 18px 22px;
}

/* 行（登録内容用） */
.info-card .detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-pale);
  gap: 10px;
  font-size: 12.5px;
}

.info-card .detail-row:last-child {
  border-bottom: none;
}

.info-card .detail-row .key {
  color: var(--text-muted);
  font-weight: 500;
  flex-shrink: 0;
}

.info-card .detail-row .val {
  color: var(--text-color);
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}

/* タグ（参加区分・懇親会） */
.info-card .tag-sm {
  display: inline-block;
  background: var(--primary-pale);
  color: var(--primary);
  border: 1px solid #b0c8e8;
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.info-card .tag-sm.join {
  background: var(--success-pale);
  color: var(--success);
  border-color: #7fca9f;
}

/* 行（お支払い内容用） */
.info-card .pay-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-pale);
  font-size: 12.5px;
}

.info-card .pay-row .key {
  color: var(--text-muted);
  font-weight: 500;
}

.info-card .pay-row .key small {
  color: var(--text-muted);
  font-size: 0.9em;
  margin-left: 2px;
  font-weight: 400;
}

.info-card .pay-row .val {
  color: var(--text-color);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 合計行 */
.info-card .pay-total {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 2px solid var(--primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-card .pay-total .key {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.04em;
}

.info-card .pay-total .val {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

/* 支払い方法・決済状況のメタ情報 */
.info-card .pay-meta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-pale);
}

.info-card .pay-meta .detail-row {
  border-bottom: none;
  padding: 4px 0;
}

.info-card .pay-method {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-weight: 700;
}

.info-card .pay-method .pay-method-icon {
  font-size: 15px;
  line-height: 1;
}

/* 決済状況の共通ベース */
.info-card .pay-status {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 12.5px;
}

.info-card .pay-status .status-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

/* バリエーション1：決済完了（クレジット）— 緑 */
.info-card .pay-status.status-paid {
  color: var(--success);
}
.info-card .pay-status.status-paid .status-dot {
  background: var(--success);
}

/* バリエーション2：入金待ち（銀行振込）— 黄（warning） */
.info-card .pay-status.status-pending {
  color: var(--warning);
}
.info-card .pay-status.status-pending .status-dot,
.info-card .pay-status .status-dot-pending {
  background: var(--warning);
  font-size: 12px;
}

/* バリエーション3：当日支払い（現金）— グレー */
.info-card .pay-status.status-cash {
  color: var(--text-muted);
}
.info-card .pay-status.status-cash .status-dot,
.info-card .pay-status .status-dot-cash {
  background: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 575.98px) {
  .info-card-header {
    padding: 12px 16px;
  }
  .info-card-body {
    padding: 14px 16px;
  }
  .info-card .pay-total .val {
    font-size: 18px;
  }
}

/* ============================================================================
 * 7. 今後の流れ（.next-card）— thanks.php
 * ============================================================================ */
.next-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.next-card-header {
  background: var(--primary);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.next-card-header::before {
  content: '';
  display: block;
  width: 4px;
  height: 18px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}

.next-card-header h3 {
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  margin: 0;
  padding: 0;
}

.next-card-body {
  padding: 6px 22px 14px;
}

.step-list {
  display: flex;
  flex-direction: column;
}

.next-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
}

.next-step + .next-step {
  border-top: 1px solid var(--border-pale);
}

.next-step-icon {
  width: 44px;
  height: 44px;
  background: var(--primary-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  flex-shrink: 0;
}

.next-step-text {
  flex: 1;
}

.next-step-text h4 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 4px;
  letter-spacing: 0.02em;
}

.next-step-text p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.75;
  margin: 0;
}

@media (max-width: 575.98px) {
  .next-card-header {
    padding: 12px 16px;
  }
  .next-card-body {
    padding: 4px 16px 10px;
  }
  .next-step {
    gap: 12px;
    padding: 14px 0;
  }
  .next-step-icon {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
}

/* ============================================================================
 * 8. お問い合わせ先（.contact-area）— 既存維持 + 新デザインに調整
 *    HTML：<section><div class="contact-area"><h3><span>x</span><span>y</span></h3><dl>...</dl></div></section>
 * ============================================================================ */
.contact-area {
  /* 旧 thanks.css の max-width: 800px / padding: 45px を打ち消し */
  max-width: none !important;
  margin: 0 !important;
  padding: 18px 22px 22px !important;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: none;
}

/* 連続する `.contact-area` を内包する `<section>` 間の余白
 * contact.php / thanks.php / reset_password_end.php 等で 2 つ以上の
 * 「お問い合わせ先」カードが密着しないように上余白を確保 */
section + section > .contact-area {
  margin-top: 24px !important;
}

/* 同一 <section> 内に連続する `.contact-area` カードも密着させない
 * （.contact-area の margin:0 !important が mt-* ユーティリティを打ち消すため個別指定） */
.contact-area + .contact-area {
  margin-top: 24px !important;
}

.contact-area h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.04em;
  margin: 0 0 16px;
  padding: 0 0 11px;
  border-bottom: 1px solid var(--border-pale);
  position: relative;
}

/* C案：縦バーは使わない（1px ヘアライン＋短いティール下線のみ） */

/* 見出しテキスト直下の短いティール下線（ヘアラインに重ねてレイヤード感を出す） */
.contact-area h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 46px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.contact-area h3 span {
  display: inline-block;
}

.contact-area dl {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.7;
}

.contact-area dl dt {
  color: var(--text-color);
  font-weight: 700;
  margin: 0 0 6px;
  font-size: 14px;
}

.contact-area dl dt span {
  display: inline-block;
  margin-right: 0;
}

.contact-area dl dd {
  color: var(--text-color);
  margin: 0 0 4px;
  font-weight: 500;
  font-size: 13px;
}

.contact-area dl dd:last-child {
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .contact-area {
    padding: 16px 18px 18px !important;
  }
  .contact-area h3 {
    font-size: 14px;
  }
  .contact-area dl {
    font-size: 13px;
  }
}

/* ============================================================================
 * 9. 印刷ボタン（.btn-print）— thanks.php
 * ============================================================================ */
.thanks-action {
  text-align: center;
  margin-top: 8px !important;
}

.btn-print {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 32px;
  background: var(--white);
  color: var(--primary);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 2px solid var(--primary);
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.btn-print:hover {
  background: var(--primary-pale);
  transform: translateY(-1px);
}

@media (max-width: 575.98px) {
  .btn-print {
    width: 100%;
    padding: 11px 24px;
    justify-content: center;
  }
}

/* ============================================================================
 * 10. 印刷時のスタイル（thanks.php）
 *     A4 縦 1 枚レイアウト：必要情報を保持しつつ、装飾を最小化して整列
 *     残す要素：タイトル／メール通知／銀行・現金案内／登録内容／
 *               お支払い内容／今後の流れ／お問合せ先
 *     非表示要素：ヘッダー／ステップバー／チェックマーク✓／緑グラデ帯／
 *                 印刷ボタン／フッター
 * ============================================================================ */
@media print {
  @page {
    size: A4 portrait;
    margin: 8mm 10mm;
  }
  body {
    background: #fff !important;
    font-size: 8.5pt !important;
    line-height: 1.45 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* --- 非表示（操作系・装飾系）--- */
  header,
  footer,
  .step-bar,
  .thanks-action,
  .btn-print,
  .thanks-hero .check-circle,
  .thanks-hero::before,                     /* ティール→紺グラデ帯（4px 装飾）削除 */
  #thanks > h2 {
    display: none !important;
  }

  /* --- container：余白最小化 --- */
  .container {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }
  #thanks {
    margin: 0 !important;
    padding: 0 !important;
  }
  #thanks > section {
    margin: 0 0 6px !important;             /* セクション間余白を 6px で統一 */
  }
  #thanks > section:last-of-type {
    margin-bottom: 0 !important;
  }

  /* === Hero（タイトル）=== */
  .thanks-hero {
    padding: 10px 14px !important;
    box-shadow: none !important;
    border: 1px solid #d8dfe9 !important;
    border-radius: 4px !important;
    page-break-inside: avoid;
    background: #fff !important;
    overflow: visible !important;
  }
  .thanks-hero .thanks-message {
    padding: 0 !important;
    text-align: center !important;
  }
  .thanks-hero .thanks-message h3 {
    font-size: 13pt !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    border: none !important;
    line-height: 1.3 !important;
  }
  .thanks-hero .thanks-subtitle {
    font-size: 8.5pt !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }

  /* === メール通知 / 銀行・現金案内（共通レイアウト）=== */
  .email-notice,
  .bank-notice,
  .cash-notice {
    padding: 7px 12px !important;
    font-size: 8.5pt !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    border: 1px solid #d8dfe9 !important;
    border-radius: 4px !important;
    background: #fff !important;
    page-break-inside: avoid;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .email-notice-icon,
  .bank-notice-icon,
  .cash-notice-icon {
    font-size: 11pt !important;
    flex-shrink: 0 !important;
    line-height: 1.3 !important;
  }
  .email-notice strong,
  .bank-notice strong,
  .cash-notice strong {
    font-size: 9pt !important;
  }
  .email-notice-sub {
    font-size: 7.5pt !important;
  }

  /* === info-grid（登録内容＋お支払い内容、2 カラム）=== */
  .info-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  .info-card {
    margin: 0 !important;
    box-shadow: none !important;
    border: 1px solid #d8dfe9 !important;
    border-radius: 4px !important;
    background: #fff !important;
    page-break-inside: avoid;
    overflow: hidden !important;            /* 角丸内に紺ヘッダーを収める */
  }

  /* === 紺背景ヘッダー（info-card / next-card 共通：縦中央揃え）=== */
  .info-card-header,
  .next-card-header {
    background: #0C73B2 !important;         /* primary */
    padding: 7px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .info-card-header::before,
  .next-card-header::before {
    content: '' !important;
    display: block !important;
    width: 3px !important;
    height: 11pt !important;                /* 文字サイズと同高でセンター揃い */
    background: #2EB398 !important;         /* accent */
    border-radius: 2px !important;
    flex-shrink: 0 !important;
  }
  .info-card-header h3,
  .next-card-header h3 {
    font-family: "Noto Serif JP", serif !important;
    font-size: 10pt !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    line-height: 1.1 !important;            /* バー高さに合わせる */
    letter-spacing: 0.04em !important;
  }

  /* === info-card-body：明細行 === */
  .info-card-body {
    padding: 7px 12px !important;
  }
  .detail-row,
  .pay-row {
    padding: 3px 0 !important;
    font-size: 8.5pt !important;
    line-height: 1.45 !important;
    border-bottom: 1px dotted #e5e7eb !important;
  }
  .detail-row:last-child,
  .pay-row:last-child {
    border-bottom: none !important;
  }
  .pay-total {
    padding: 4px 0 2px !important;
    font-size: 10.5pt !important;
    border-top: 1px solid #888 !important;
    margin-top: 4px !important;
  }
  .pay-meta {
    margin-top: 4px !important;
    padding-top: 4px !important;
    border-top: 1px dotted #e5e7eb !important;
  }
  .tag-sm,
  .tag-blue,
  .tag-green,
  .tag-gray {
    padding: 1px 6px !important;
    font-size: 7.5pt !important;
    line-height: 1.4 !important;
  }
  .pay-status,
  .pay-method {
    font-size: 8.5pt !important;
  }

  /* === 今後の流れ === */
  .next-card {
    margin: 0 !important;
    box-shadow: none !important;
    border: 1px solid #d8dfe9 !important;
    border-radius: 4px !important;
    background: #fff !important;
    page-break-inside: avoid;
    overflow: hidden !important;
  }
  .next-card-body {
    padding: 8px 12px 10px !important;
  }
  /* 4 ステップを 2×2 grid。dotted 区切りは入れず、row-gap で行を分離 */
  .step-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 18px !important;
    row-gap: 10px !important;
  }
  .next-step {
    padding: 0 !important;
    margin: 0 !important;
    gap: 8px !important;
    align-items: flex-start !important;
    border: none !important;
  }
  /* screen 用 .next-step + .next-step の border-top（L695）を打ち消し */
  .next-step + .next-step {
    border-top: none !important;
  }
  .next-step-icon {
    font-size: 11pt !important;
    flex-shrink: 0 !important;
    line-height: 1.4 !important;
    margin-top: 0 !important;
  }
  .next-step-text {
    flex: 1 1 auto !important;
  }
  .next-step-text h4 {
    font-size: 9pt !important;
    font-weight: 700 !important;
    margin: 0 0 4px !important;         /* 見出しと本文の間に 4px の余白 */
    padding: 0 !important;
    border: none !important;
    line-height: 1.4 !important;
    background: transparent !important;
    color: #0C73B2 !important;          /* primary：見出しを引き締める */
    letter-spacing: 0.02em !important;
  }
  .next-step-text p {
    font-size: 7.5pt !important;
    line-height: 1.6 !important;        /* 本文の行間広めで可読性 UP */
    margin: 0 !important;
    padding: 0 !important;
    color: #1c1c2e !important;
  }

  /* === お問合せ先（contact-area、白背景・紺文字＋緑バー）=== */
  #thanks > section:has(.contact-area) {
    margin: 0 0 6px !important;
  }
  section + section > .contact-area {
    margin-top: 0 !important;               /* L766 の screen 用 24px 上書き */
  }
  .contact-area {
    padding: 8px 12px !important;
    margin: 0 !important;
    border: 1px solid #d8dfe9 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    background: #fff !important;
    page-break-inside: avoid;
  }
  .contact-area h3 {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: 9.5pt !important;
    font-weight: 700 !important;
    color: #0C73B2 !important;
    margin: 0 0 5px !important;
    padding: 0 0 4px !important;
    border-bottom: 1px solid #d8dfe9 !important;
    text-align: left !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
  }
  .contact-area h3::before {
    content: '' !important;
    display: block !important;
    width: 3px !important;
    height: 9.5pt !important;               /* h3 文字サイズと同高 */
    background: #2EB398 !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  .contact-area h3 span {
    display: inline !important;
    margin: 0 !important;
  }
  .contact-area dl {
    margin: 0 !important;
    padding: 0 !important;
  }
  .contact-area dt {
    font-size: 8pt !important;
    font-weight: 700 !important;
    color: #1c1c2e !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
  }
  .contact-area dd {
    font-size: 7.5pt !important;
    color: #1c1c2e !important;
    margin: 0 !important;
    padding: 0 0 0 4px !important;
    line-height: 1.5 !important;
  }
  .contact-area dt span,
  .contact-area dd span {
    display: inline !important;
  }
}

/* ============================================================================
 * 11. 通知モード（.thanks-message のみ・Hero無し）
 *     entry_closed.php / event_end.php / password_reset_*_end.php 用
 *     既存 .thanks-message を新デザイン風に装飾
 * ============================================================================ */

/* Hero に含まれていない単独の .thanks-message（通知ページ用） */
#thanks > section:first-child > .thanks-message:only-child,
#thanks > section > .thanks-message {
  /* 旧スタイル（max-width: 800px / padding: 45px）をリセット */
  max-width: none;
  margin: 0;
  padding: 36px 32px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

/* Hero 内の thanks-message には適用しない（Hero側のスタイルを優先） */
.thanks-hero > .thanks-message {
  background: transparent !important;
  box-shadow: none !important;
  padding: 15px !important;
  border-radius: 0 !important;
}

/* 通知モード（h1 で大きく表示 / Phase 7-F-5 で h2.page-info-heading にも対応）
   対象：entry_closed / event_end / その他通知系ページ
   見た目は維持しつつ、HTML を <h2 class="page-info-heading"> にすることで
   見出し階層 h1（学会名）→ h2（ページタイトル） が正しく整う */
#thanks .thanks-message h1,
#thanks .thanks-message h2.page-info-heading {
  /* common.css の generic h2（紺背景カードヘッダー）を打ち消し */
  display: block;
  position: relative;
  background: transparent !important;
  background-color: transparent !important;
  border: none;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* 通知モード見出しスタイル */
  font-family: "Noto Serif JP", serif;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.04em;
  text-align: center;
  margin: 0 0 18px;
  padding: 0 0 16px;
  border-bottom: 2px solid var(--accent);
  line-height: 1.5;
}

/* common.css の h2::before（縦アクセント線）を打ち消し */
#thanks .thanks-message h2.page-info-heading::before {
  content: none !important;
  display: none !important;
}

/* 通知モード — h3 が thanks-message 内に直接ある場合（Hero外） */
#thanks > section > .thanks-message > h3 {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(1.2rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.04em;
  text-align: center;
  margin: 5px 0 14px;
  line-height: 1.5;
}

#thanks > section > .thanks-message > h3 span {
  display: inline-block;
  margin: 0 2px;
}

/* 通知モード — 本文 p */
#thanks > section > .thanks-message > p {
  font-size: 13.5px;
  color: var(--text-color);
  line-height: 1.85;
  margin: 0 0 16px;
  text-align: center;
}

#thanks > section > .thanks-message > p:last-child {
  margin-bottom: 0;
}

/* 通知モード — dl/dt/dd（password_reset_*_end.php 等で使用） */
#thanks > section > .thanks-message > dl {
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border-pale);
}

#thanks > section > .thanks-message > dl > dt {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 6px;
  padding: 0;
  letter-spacing: 0.03em;
}

#thanks > section > .thanks-message > dl > dd {
  font-size: 12.5px;
  color: var(--text-color);
  line-height: 1.85;
  margin: 0 0 12px;
  padding: 0 0 0 4px;
}

#thanks > section > .thanks-message > dl > dd:last-child {
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  #thanks > section > .thanks-message {
    padding: 26px 20px;
  }
  #thanks .thanks-message h1 {
    font-size: 1.25rem;
    padding-bottom: 12px;
    margin-bottom: 14px;
  }
  #thanks > section > .thanks-message > p {
    font-size: 12.5px;
    text-align: left;
  }
}

/* ============================================================================
 * 12. ステップバーの STEP 4 active 表示（既存 common.css 由来 / 補強）
 *     thanks.php 用：4ステップ目をアクティブ
 * ============================================================================ */
/* 特別な上書きは不要（common.css の .step-bar > .step.active で動作） */

/* ============================================================================
 * 13. ログインページボタン（reset_password_end.php）
 *     既存 HTML: <a href="..." class="btn login_link">ログインページ</a>
 *     Bootstrap .btn 単体だと装飾不足のためボタン感を与える
 *     login.css の #login-button.submit のデザインを踏襲（紺・丸角・影）
 * ============================================================================ */
a.login_link {
  display: inline-block;
  margin-top: 18px;
  padding: 12px 36px;
  min-width: 220px;
  background: #0C73B2;
  color: #ffffff !important;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", "Yu Gothic", YuGothic, "メイリオ", meiryo, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none !important;
  border: none;
  border-radius: 50px;
  box-shadow: 0 4px 14px rgba(12, 115, 178, 0.28);
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

a.login_link:hover,
a.login_link:focus {
  background: #1a8acd;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(12, 115, 178, 0.36);
  transform: translateY(-2px);
  outline: none;
}

a.login_link:active {
  background: #08527e;
  transform: translateY(0);
}

@media (max-width: 480px) {
  a.login_link {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 14px 24px;
    font-size: 15px;
  }
}

/* ============================================================================
 * 14. エラーページ（error.php / sys_error.php / option/error.php /
 *     upfile/error.php / top.php — entry_closed/event_end の thanks 通知モード基盤上で表示）
 *
 * - `.thanks-message > ul`：エラーメッセージ箇条書きを中央寄せ・bullet なしに
 *   （現状はブラウザデフォルトの list-style + padding-left で左に大きくずれていた）
 * - `.thanks-message > p > a`：「新規登録ページへ戻る」「マイページへ戻る」等の
 *   戻りリンクを a.login_link と同等のボタン表示に
 *   （HTML / PHP は無変更、CSS のみで対応）
 * ============================================================================ */

#thanks > section > .thanks-message > ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  text-align: center;
}

#thanks > section > .thanks-message > ul > li {
  font-size: 13.5px;
  color: var(--text-color);
  line-height: 1.85;
  margin: 0 0 4px;
}

#thanks > section > .thanks-message > ul > li:last-child {
  margin-bottom: 0;
}

/* 戻りリンクのボタン化（reset_password_end の a.login_link と同等デザイン）
 * 親 `<p>` の中に `<a>` が2つあるケース（`<br>` で改行）にも対応 */
#thanks > section > .thanks-message > p > a {
  display: inline-block;
  margin: 6px 4px;
  padding: 11px 28px;
  min-width: 220px;
  background: #0C73B2;
  color: #ffffff !important;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", "Yu Gothic", YuGothic, "メイリオ", meiryo, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none !important;
  border: none;
  border-radius: 50px;
  box-shadow: 0 4px 14px rgba(12, 115, 178, 0.28);
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

#thanks > section > .thanks-message > p > a:hover,
#thanks > section > .thanks-message > p > a:focus {
  background: #1a8acd;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(12, 115, 178, 0.36);
  transform: translateY(-2px);
  outline: none;
}

#thanks > section > .thanks-message > p > a:active {
  background: #08527e;
  transform: translateY(0);
}

@media (max-width: 575.98px) {
  #thanks > section > .thanks-message > p > a {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 8px auto;
    padding: 12px 20px;
  }
}