@charset "UTF-8";

/* ============================================================
   脳トレクエスト — 下層ページ共通スタイル
   notore_sub.css
============================================================ */

/* ============================
   Base Reset
============================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: #040c20;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  line-height: 1.7;
}

a { color: inherit; text-decoration: none; }
button, input { font-family: inherit; }

/* ============================
   Site Wrapper
============================ */
.site {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(180deg, #060e24 0%, #0a1428 60%, #0e1c38 100%);
  min-height: 100vh;
}

/* ============================
   Header (partial{body} 生成要素)
============================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: rgba(8, 16, 48, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 200, 0, .18);
  box-shadow: 0 2px 20px rgba(0, 0, 0, .35);
}

.logo { margin: 0; line-height: 1; }

.logo-img {
  display: block;
  height: 42px;
  width: auto;
  object-fit: contain;
}

.header-nav {
  display: flex;
  align-items: center;
}

.header-btn--login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-decoration: none;
  background: linear-gradient(135deg, #ffd200 0%, #ffaa00 50%, #ff8000 100%);
  color: #1a0800;
  box-shadow: 0 3px 0 #904000, 0 5px 14px rgba(255, 130, 0, .4);
  transition: transform .1s;
}
.header-btn--login:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 #904000;
}

.header-btn--logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .05em;
  text-decoration: none;
  background: transparent;
  color: rgba(255, 255, 255, .75);
  border: 1.5px solid rgba(255, 255, 255, .25);
  transition: opacity .1s;
}
.header-btn--logout:active { opacity: .6; }

/* Notice/Error */
#notice {
  padding: 0 18px;
  color: rgba(255, 255, 255, .8);
}

/* ============================
   Animations
============================ */
@keyframes subGoldPulse {
  0%, 100% { opacity: .4; }
  50%       { opacity: 1; }
}

@keyframes subGoldBorderPulse {
  0%, 100% { opacity: .45; }
  50%       { opacity: 1; }
}

@keyframes subTitleFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}

@keyframes subIconBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

@keyframes subFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes subShine {
  0%   { background-position: -200% center; }
  100% { background-position: 300% center; }
}

/* ============================
   Sub Dungeon Head (タイトルエリア)
============================ */
.sub-dungeon-head {
  position: relative;
  padding: 22px 20px 18px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(180deg,
    #020810 0%,
    #050e1e 55%,
    #0a1428 100%
  );
}

/* 星の粒子 */
.sub-dungeon-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255, 220, 0, .65) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 220, 0, .4)  1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, .3) 1px, transparent 1px);
  background-size: 80px 80px, 120px 120px, 60px 60px;
  background-position: 15px 20px, 55px 50px, 30px 70px;
  pointer-events: none;
}

/* 輝く上部ゴールドライン */
.sub-dungeon-head::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 220, 0, .8)  25%,
    rgba(255, 240, 80, 1) 50%,
    rgba(255, 220, 0, .8)  75%,
    transparent 100%
  );
  animation: subGoldPulse 2.5s ease-in-out infinite;
}

/* 装飾シンボル行 */
.sub-deco-row {
  position: relative;
  z-index: 1;
  font-size: 11px;
  letter-spacing: .2em;
  color: rgba(255, 200, 0, .55);
  line-height: 1;
  margin: 4px 0;
  animation: subFadeUp .3s ease-out both;
}

/* ページタイトル */
.sub-dungeon-title {
  position: relative;
  z-index: 1;
  margin: 8px 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.2;
  color: #fff;
  text-shadow:
    0 1px 0 rgba(80, 40, 0, .5),
    0 0 18px rgba(255, 200, 50, .5),
    0 0 40px rgba(255, 130, 0, .22);
}

/* タイトル下ゴールドバー */
.sub-dungeon-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, #ffd200 0%, #ff8000 100%);
  box-shadow: 0 1px 8px rgba(255, 170, 0, .6);
  margin: 6px auto 0;
}

/* ============================
   Sub Main Content Wrapper
============================ */
.sub-main {
  padding: 22px 18px 44px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ============================
   Parchment Card (羊皮紙カード)
============================ */
.sub-parchment {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg,
    rgba(255, 252, 228, .97) 0%,
    rgba(255, 242, 195, .97) 100%
  );
  box-shadow:
    0 6px 0 #7a4800,
    0 12px 36px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  animation: subFadeUp .3s .05s ease-out both;
}

/* 上部ゴールドアクセントバー（左ボーダーなし） */
.sub-parchment::before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg, #ffa000 0%, #ffd200 50%, #ff8000 100%);
  box-shadow: 0 1px 10px rgba(255, 160, 0, .5);
}

/* 下部装飾テキスト */
.sub-parchment::after {
  content: "\2726 \2500\2500 \2726 \2500\2500 \2726";
  display: block;
  text-align: center;
  font-size: 10px;
  letter-spacing: .18em;
  color: rgba(180, 120, 0, .45);
  padding-bottom: 16px;
}

.sub-parchment-body {
  padding: 22px 18px 10px;
}

/* 封印シール（ゴールド円形バッジ） */
.sub-parchment-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffcc00 0%, #ff8800 100%);
  box-shadow:
    0 5px 0 #a06000,
    0 8px 22px rgba(255, 130, 0, .42),
    inset 0 1px 0 rgba(255,255,255,.4);
  font-size: 28px;
  line-height: 1;
  margin: 0 auto 16px;
  animation: subIconBounce 3s ease-in-out infinite;
}

/* 本文テキスト */
.sub-parchment-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: #3e2800;
}
.sub-parchment-text + .sub-parchment-text {
  margin-top: 12px;
}

/* ============================
   汎用カード (sub-card) — 全バリアント左ボーダーなし
============================ */
.sub-card {
  border-radius: 16px;
  overflow: hidden;
  animation: subFadeUp .3s .06s ease-out both;
}

/* 上部カラーバー */
.sub-card::before {
  content: "";
  display: block;
  height: 5px;
}

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

/* Parchment */
.sub-card--parchment {
  background: linear-gradient(180deg, rgba(255, 252, 228, .97) 0%, rgba(255, 242, 195, .97) 100%);
  box-shadow: 0 6px 0 #7a4800, 0 12px 28px rgba(0,0,0,.45);
}
.sub-card--parchment::before {
  background: linear-gradient(90deg, #ffa000 0%, #ffd200 50%, #ff8000 100%);
}

/* Dark */
.sub-card--dark {
  background: linear-gradient(180deg, rgba(10, 20, 54, .96) 0%, rgba(14, 26, 64, .96) 100%);
  border: 1.5px solid rgba(255, 200, 0, .2);
  box-shadow: 0 6px 0 #02060e, 0 12px 24px rgba(0,0,0,.45);
}
.sub-card--dark::before {
  background: linear-gradient(90deg, #ffd200 0%, #ffaa00 50%, #ff7800 100%);
}

/* Blue */
.sub-card--blue {
  background: linear-gradient(180deg, rgba(235, 246, 255, .97) 0%, rgba(210, 235, 255, .97) 100%);
  box-shadow: 0 6px 0 rgba(20, 70, 200, .3), 0 12px 24px rgba(0,0,0,.35);
}
.sub-card--blue::before {
  background: linear-gradient(90deg, #1060e0 0%, #4098ff 50%, #60c8ff 100%);
}

.sub-card-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.3;
}
.sub-card--parchment .sub-card-title { color: #3e2800; }
.sub-card--dark      .sub-card-title { color: #ffd200; }
.sub-card--blue      .sub-card-title { color: #0e1c40; }

.sub-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.82;
}
.sub-card--parchment p { color: #4a3800; }
.sub-card--dark      p { color: rgba(255,255,255,.78); }
.sub-card--blue      p { color: #3a4870; }

/* ============================
   Section Heading（セクション内見出し）
============================ */
.sub-section-head {
  text-align: center;
  margin-bottom: 16px;
}

.sub-section-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px 16px;
  border-radius: 999px;
  background: rgba(255, 200, 0, .14);
  border: 1px solid rgba(255, 200, 0, .4);
  color: #ffd060;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  text-shadow: 0 0 8px rgba(255, 200, 0, .5);
}

.sub-section-kicker::before,
.sub-section-kicker::after {
  content: "\25C6";
  font-size: 6px;
  opacity: .7;
}

.sub-section-head h2 {
  margin: 14px 0 0;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.4), 0 0 20px rgba(255, 200, 0, .25);
}

.sub-section-head h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, #ffd200 0%, #ff8000 100%);
  box-shadow: 0 2px 8px rgba(255, 140, 0, .5);
  margin: 10px auto 0;
}

.sub-section-head p {
  margin: 10px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,.65);
}

/* ============================
   Quest Card（クエスト一覧カード）
============================ */
.sub-quest-list {
  display: grid;
  gap: 12px;
}

.sub-quest-card {
  display: block;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 0 rgba(0,0,0,.32), 0 10px 24px rgba(0,0,0,.28);
  text-decoration: none;
  overflow: hidden;
  transition: transform .12s;
}
.sub-quest-card:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
}

.sub-quest-card::before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg, #ffd200 0%, #ffaa00 50%, #ff7800 100%);
}

.sub-quest-card-inner {
  padding: 14px 16px 16px;
}

.sub-quest-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
}

.sub-quest-no {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  background: #0e1c40;
  color: #ffd200;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.sub-quest-type {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd200 0%, #ffaa00 100%);
  color: #3a1800;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 2px 0 #a06000;
}

.sub-quest-card h3 {
  margin: 0 0 7px;
  font-size: 15px;
  font-weight: 900;
  color: #0e1c40;
  line-height: 1.3;
}

.sub-quest-card p {
  margin: 0 0 12px;
  font-size: 13px;
  color: #4a5870;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sub-quest-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd200 0%, #ff9800 100%);
  color: #3a1800;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 4px 0 #a06000;
  letter-spacing: .04em;
}

/* ============================
   Buttons
============================ */

/* ホームへ戻る（ダークRPGスタイル） */
.sub-home-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .06em;
  text-decoration: none;
  background: linear-gradient(180deg, #1a3060 0%, #0e1c40 100%);
  color: #ffd200;
  border: 2px solid rgba(255, 200, 0, .35);
  border-bottom: 5px solid #04081a;
  box-shadow:
    0 7px 0 #02040e,
    inset 0 1px 0 rgba(255, 200, 0, .12);
  text-shadow: 0 0 10px rgba(255, 200, 0, .5);
  animation: subFadeUp .3s .12s ease-out both;
}
.sub-home-btn:active {
  border-bottom-width: 2px;
  box-shadow: 0 3px 0 #02040e;
  transform: translateY(4px);
}

/* ゴールドボタン */
.sub-btn-gold {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(180deg, #ffe840 0%, #ffa800 60%, #ff8800 100%);
  color: #5a2800;
  border: 2px solid #c86400;
  border-bottom: 5px solid #884000;
  box-shadow: 0 7px 0 #5a2800, inset 0 1px 0 rgba(255,255,255,.6);
  text-shadow: 1px 1px 0 rgba(255,255,255,.3);
}
.sub-btn-gold:active {
  border-bottom-width: 2px;
  box-shadow: 0 3px 0 #5a2800;
  transform: translateY(4px);
}

/* ブルーボタン */
.sub-btn-blue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(180deg, #60c8ff 0%, #1890e0 60%, #1060c0 100%);
  color: #fff;
  border: 2px solid #0860b0;
  border-bottom: 5px solid #044080;
  box-shadow: 0 7px 0 #044080, inset 0 1px 0 rgba(255,255,255,.5);
}
.sub-btn-blue:active {
  border-bottom-width: 2px;
  box-shadow: 0 3px 0 #044080;
  transform: translateY(4px);
}

/* ============================
   HR（design変数で出力される区切り線）
============================ */
hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 200, 0, .22) 25%,
    rgba(255, 200, 0, .22) 75%,
    transparent
  );
  margin: 4px 0;
}

/* ============================
   退会ページ — メール送信ボタン
============================ */
.sub-retire-mail-wrap {
  margin-top: 18px;
  text-align: center;
}

.sub-retire-mail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .06em;
  text-decoration: none;
  background: linear-gradient(180deg, #ffe840 0%, #ffa800 60%, #ff8800 100%);
  color: #5a2800;
  border: 2px solid #c86400;
  border-bottom: 5px solid #884000;
  box-shadow: 0 7px 0 #5a2800, inset 0 1px 0 rgba(255,255,255,.6);
  text-shadow: 1px 1px 0 rgba(255,255,255,.3);
}
.sub-retire-mail-btn:active {
  border-bottom-width: 2px;
  box-shadow: 0 3px 0 #5a2800;
  transform: translateY(4px);
}

/* ============================
   キャリア設定カード
============================ */
.sub-carrier-card {
  border-radius: 14px;
  overflow: hidden;
  padding: 18px 16px 20px;
  background: linear-gradient(180deg, rgba(10, 22, 54, .95) 0%, rgba(14, 26, 60, .95) 100%);
  border: 1.5px solid rgba(255, 200, 0, .18);
  box-shadow: 0 4px 0 #02060e, 0 8px 20px rgba(0,0,0,.4);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: subFadeUp .3s .08s ease-out both;
}

.sub-carrier-copy-label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 200, 0, .65);
  letter-spacing: .06em;
  text-align: center;
}

.sub-carrier-form {
  margin: 0;
}

.sub-carrier-input {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  border: 1.5px solid rgba(255, 200, 0, .3);
  color: #ffd200;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  outline: none;
  text-align: center;
  -webkit-appearance: none;
}
.sub-carrier-input:focus {
  border-color: rgba(255, 200, 0, .6);
  background: rgba(255, 255, 255, .11);
}

/* ============================
   レガシーバナー（キャリア固有ヘッダー）
============================ */
.sub-legacy-banner {
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  animation: subFadeUp .3s .04s ease-out both;
}

.sub-legacy-banner-title {
  margin: 0;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  background: rgba(0,0,0,.25);
  letter-spacing: .03em;
}

.sub-legacy-banner-img {
  display: block;
  width: 100%;
}

/* ============================
   登録ページ — 支払い画像
============================ */
.sub-regist-payment-img {
  text-align: center;
  margin-bottom: 16px;
}

.sub-regist-payment-img img {
  max-width: 100%;
  border-radius: 6px;
}

/* 利用規約リンク */
.sub-terms-link {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  font-size: 12px;
  color: #ffd060;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .85;
}

/* ============================
   登録 CTA エリア
============================ */
.sub-regist-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 26px 18px 28px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(10, 22, 54, .96) 0%, rgba(14, 26, 64, .96) 100%);
  border: 1.5px solid rgba(255, 200, 0, .22);
  box-shadow:
    0 4px 0 #02060e,
    0 10px 28px rgba(0,0,0,.45);
  animation: subFadeUp .3s .1s ease-out both;
}

/* 価格バッジ */
.sub-regist-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .06em;
  color: #ffd060;
  background: rgba(255, 200, 0, .14);
  border: 1px solid rgba(255, 200, 0, .38);
  text-shadow: 0 0 10px rgba(255, 200, 0, .45);
}

/* 登録ボタン（画像リンク） */
.sub-regist-btn-wrap {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 0 rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.35);
  transition: transform .1s;
}
.sub-regist-btn-wrap:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 rgba(0,0,0,.3);
}

.sub-regist-btn-img {
  display: block;
  max-width: 100%;
}

/* 通信料金リンク */
.sub-regist-cost-link {
  font-size: 12px;
  color: rgba(255,255,255,.4);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================
   汎用フォームカード
============================ */
.sub-form-card {
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(10, 22, 54, .96) 0%, rgba(14, 26, 64, .96) 100%);
  border: 1.5px solid rgba(255, 200, 0, .2);
  box-shadow: 0 4px 0 #02060e, 0 10px 24px rgba(0, 0, 0, .45);
  padding: 20px 18px 24px;
  animation: subFadeUp .3s .08s ease-out both;
}

.sub-form-card form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* localize 出力エリア（退会理由など） */
.sub-form-reasons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ラジオ・チェックボックスのラベル行 */
.sub-form-reasons label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 200, 0, .14);
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.sub-form-reasons label:active,
.sub-form-reasons label:has(input:checked) {
  background: rgba(255, 200, 0, .1);
  border-color: rgba(255, 200, 0, .4);
}

.sub-form-reasons input[type="radio"],
.sub-form-reasons input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #ffd200;
  flex-shrink: 0;
}

/* テキストエリア */
.sub-form-reasons textarea,
.sub-form-card textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  border: 1.5px solid rgba(255, 200, 0, .25);
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.7;
  resize: vertical;
  outline: none;
  -webkit-appearance: none;
}
.sub-form-reasons textarea:focus,
.sub-form-card textarea:focus {
  border-color: rgba(255, 200, 0, .55);
  background: rgba(255, 255, 255, .11);
}

/* テキスト入力 */
.sub-form-card input[type="text"],
.sub-form-card input[type="email"],
.sub-form-card input[type="tel"],
.sub-form-card input[type="password"] {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  border: 1.5px solid rgba(255, 200, 0, .25);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  -webkit-appearance: none;
}
.sub-form-card input[type="text"]:focus,
.sub-form-card input[type="email"]:focus,
.sub-form-card input[type="tel"]:focus,
.sub-form-card input[type="password"]:focus {
  border-color: rgba(255, 200, 0, .55);
  background: rgba(255, 255, 255, .11);
}

/* Submit ボタン（ゴールドRPGスタイル） */
.sub-form-submit {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .06em;
  cursor: pointer;
  background: linear-gradient(180deg, #ffe840 0%, #ffa800 60%, #ff8800 100%);
  color: #5a2800;
  border: 2px solid #c86400;
  border-bottom: 5px solid #884000;
  box-shadow: 0 7px 0 #5a2800, inset 0 1px 0 rgba(255, 255, 255, .6);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .3);
  -webkit-appearance: none;
}
.sub-form-submit:active {
  border-bottom-width: 2px;
  box-shadow: 0 3px 0 #5a2800;
  transform: translateY(4px);
}

/* ============================
   btn-left — コンテンツ内（ページ下部）
============================ */
.sub-main .btn-left {
  display: block;
}

.sub-main .btn-left a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .06em;
  text-decoration: none;
  background: linear-gradient(180deg, #1a3060 0%, #0e1c40 100%);
  color: #ffd200;
  border: 2px solid rgba(255, 200, 0, .35);
  border-bottom: 5px solid #04081a;
  box-shadow: 0 7px 0 #02040e, inset 0 1px 0 rgba(255, 200, 0, .12);
  text-shadow: 0 0 10px rgba(255, 200, 0, .5);
  animation: subFadeUp .3s .14s ease-out both;
}

.sub-main .btn-left a::before {
  content: "\25C4";
  font-size: 12px;
  line-height: 1;
}

.sub-main .btn-left a:active {
  border-bottom-width: 2px;
  box-shadow: 0 3px 0 #02040e;
  transform: translateY(4px);
}

/* ============================
   登録誘導エントリー
============================ */
.sub-regist-entry {
  animation: subFadeUp .3s .06s ease-out both;
}

/* ============================
   規約・プライバシーリンクリスト
============================ */
.sub-terms-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: subFadeUp .3s .1s ease-out both;
}

.sub-terms-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .58);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  text-decoration: none;
  transition: color .12s, background .12s, border-color .12s;
}
.sub-terms-list-item:active {
  color: #ffd200;
  background: rgba(255, 200, 0, .08);
  border-color: rgba(255, 200, 0, .25);
}

/* More Link */
.sub-more {
  text-align: center;
  margin-top: 18px;
}
.sub-more a {
  display: inline-flex;
  justify-content: center;
  min-width: 180px;
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1.5px solid rgba(255, 200, 0, .4);
  color: #ffd200;
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 4px 0 rgba(0,0,0,.3);
}

/* ============================
   Footer (partial{footer} 生成要素)
============================ */
.footer {
  padding: 0;
  background: #040e28;
}

.ft-body {
  padding: 32px 20px 0;
}

.ft-brand {
  text-align: center;
  margin-bottom: 24px;
}

.ft-logo-img {
  height: 52px;
  width: auto;
  opacity: .9;
  display: block;
  margin: 0 auto 8px;
}

.ft-tagline {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  letter-spacing: .08em;
  margin: 0;
}

.ft-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,200,0,.3) 30%, rgba(255,200,0,.3) 70%, transparent);
  margin: 0 0 20px;
}

.ft-nav {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.ft-nav li a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 10px;
  font-size: 12px;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  border-radius: 8px;
  transition: background .12s, color .12s;
}

.ft-nav li a::before {
  content: "\203A";
  color: rgba(255,200,0,.6);
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}

.ft-nav li a:active {
  background: rgba(255,255,255,.07);
  color: #ffd200;
}

.ft-copy {
  text-align: center;
  padding: 16px 20px 40px;
  font-size: 11px;
  color: rgba(255,255,255,.3);
  letter-spacing: .06em;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* ======================================================
   confirm_retire — 退会確認アクションボタン
====================================================== */
.sub-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 0 4px;
  animation: subFadeUp .3s .1s ease-out both;
}

/* 「やっぱり退会しない」— 主役ゴールドボタン */
.sub-confirm-btn-stay {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 17px 20px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .06em;
  text-decoration: none;
  box-sizing: border-box;
  background: linear-gradient(180deg, #ffe840 0%, #ffb700 55%, #ff8c00 100%);
  color: #5a2800;
  border: 2px solid #cc6a00;
  border-bottom: 6px solid #8a4000;
  box-shadow: 0 8px 0 #4a1c00, inset 0 1px 0 rgba(255,255,255,.55);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  transition: transform .08s, box-shadow .08s, border-bottom-width .08s;
}

.sub-confirm-btn-stay:active {
  border-bottom-width: 2px;
  box-shadow: 0 2px 0 #4a1c00;
  transform: translateY(4px);
}

/* 「やっぱり退会する」— 控えめ警告ボタン */
.sub-confirm-btn-leave {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  box-sizing: border-box;
  background: rgba(100, 20, 10, .22);
  color: rgba(255, 120, 100, .65);
  border: 1.5px solid rgba(200, 60, 40, .22);
  transition: background .14s, color .14s, border-color .14s;
}

.sub-confirm-btn-leave:active {
  background: rgba(140, 30, 15, .38);
  color: rgba(255, 130, 110, .95);
  border-color: rgba(220, 70, 50, .45);
}

/* ======================================================
   tokutei — 特定商取引ページ 定義リスト
====================================================== */
.sub-tokutei-list {
  margin: 12px 0 0;
  padding: 0;
}

.sub-tokutei-term {
  margin: 18px 0 5px;
  padding: 0 0 5px;
  font-size: 12px;
  font-weight: 700;
  color: #7a4a00;
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(160, 100, 0, .25);
}

.sub-tokutei-list > dt.sub-tokutei-term:first-child {
  margin-top: 0;
}

.sub-tokutei-desc {
  margin: 0;
  padding: 5px 0 0 10px;
  font-size: 12px;
  line-height: 1.9;
  color: #3e2800;
  border-left: 2px solid rgba(160, 100, 0, .2);
}

.sub-tokutei-desc p {
  margin: 0;
  padding: 0;
}

/* ======================================================
   toiawase_thanks — 問い合わせ送信完了ページ
====================================================== */
.sub-thanks-msg {
  margin: 4px 0 14px;
  padding: 3px 4px;
  font-size: 14px;
  font-weight: 700;
  color: #b85000;
  letter-spacing: .04em;
  background: linear-gradient(transparent 52%, rgba(180, 100, 0, .18) 52%);
  display: inline-block;
}

#datebox {
  color: #ffd200;
  font-weight: 700;
}

.sub-check-list {
  margin: 8px 0 12px;
  padding: 12px 14px 12px 14px;
  list-style: none;
  background: rgba(120, 80, 0, .06);
  border: 1px solid rgba(120, 80, 0, .15);
  border-radius: 10px;
}

.sub-check-list li {
  position: relative;
  padding: 4px 0 4px 20px;
  font-size: 12px;
  color: #3e2800;
  line-height: 1.7;
}

.sub-check-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 4px;
  color: #8b5e00;
  font-weight: 700;
  font-size: 13px;
}

/* ======================================================
   toiawase — 問い合わせページ
====================================================== */
iframe {
  border: none;
}

.sub-section-head {
  margin: 0 0 10px;
  padding: 0 0 7px;
  font-size: 14px;
  font-weight: 700;
  color: #ffd200;
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(255, 210, 0, .22);
}

.sub-inquiry-method {
  padding: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  animation: subFadeUp .3s .08s ease-out both;
}

.sub-inquiry-select-wrap {
  position: relative;
}

.sub-inquiry-select-wrap::after {
  content: "\25BC";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffd200;
  font-size: 10px;
  pointer-events: none;
}

#main_product {
  width: 100%;
  padding: 12px 36px 12px 12px;
  background: rgba(0, 0, 30, .75);
  color: rgba(255, 255, 255, .88);
  border: 1.5px solid rgba(255, 210, 0, .38);
  border-radius: 8px;
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  box-sizing: border-box;
}

#tell-frame {
  margin-top: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  animation: subFadeUp .2s ease-out both;
}

#tell-frame .link {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sub-info-tell {
  background: linear-gradient(transparent 52%, rgba(255, 210, 0, .22) 52%);
  color: #ff9080;
  font-weight: 700;
}

.link .title {
  list-style: none;
  padding: 0 0 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, .75);
  line-height: 1.9;
}

.tellch {
  list-style: none;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tellch label {
  font-size: 13px;
  color: rgba(255, 255, 255, .8);
  margin-left: 6px;
  vertical-align: middle;
  cursor: pointer;
}

.tellcheck {
  width: 18px;
  height: 18px;
  accent-color: #ffd200;
  cursor: pointer;
  vertical-align: middle;
}

li.icon_arrow {
  list-style: none;
  padding: 12px 0 0;
}

li.icon_arrow a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 20px;
  background: linear-gradient(180deg, #ffe840 0%, #ffb700 55%, #ff8c00 100%);
  color: #5a2800;
  font-size: 16px;
  font-weight: 900;
  border-radius: 12px;
  text-decoration: none;
  border: 2px solid #cc6a00;
  border-bottom: 5px solid #8a4000;
  box-shadow: 0 6px 0 #4a1c00;
  letter-spacing: .06em;
}

li.icon_arrow a .icon {
  width: 26px;
  height: 26px;
}

/* ======================================================
   qr — QRコードページ
====================================================== */
.sub-qr-sitename {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  letter-spacing: .06em;
}

.sub-qr-img-wrap {
  display: flex;
  justify-content: center;
  margin: 0 auto 14px;
  padding: 14px;
  background: #ffffff;
  border-radius: 12px;
  width: fit-content;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .5), 0 0 0 3px rgba(255, 210, 0, .35);
}

.sub-qr-img {
  display: block;
  width: 180px;
  height: 180px;
}

.sub-qr-url {
  margin: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, .45);
  text-align: center;
  letter-spacing: .03em;
  word-break: break-all;
}

/* ======================================================
   qa — よくある質問ページ
====================================================== */
.sub-qa-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sub-qa-q {
  position: relative;
  margin: 0;
  padding: 14px 14px 14px 38px;
  font-size: 13px;
  font-weight: 700;
  color: #ffd200;
  letter-spacing: .04em;
  background: rgba(255, 210, 0, .07);
  border-top: 1px solid rgba(255, 210, 0, .18);
  cursor: default;
}

.sub-qa-q::before {
  content: "Q";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  color: #1a1030;
  background: #ffd200;
  border-radius: 4px;
  flex-shrink: 0;
}

.sub-qa-list > dt.sub-qa-q:first-child {
  border-top: none;
}

.sub-qa-a {
  margin: 0;
  padding: 12px 14px 16px 38px;
  font-size: 12px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .025);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  position: relative;
}

.sub-qa-a::before {
  content: "A";
  position: absolute;
  left: 12px;
  top: 14px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .15);
  border-radius: 4px;
}

.sub-qa-a p {
  margin: 4px 0 0;
  padding: 0;
}

/* ======================================================
   privacy — プライバシーポリシーページ
====================================================== */
.sub-privacy-body {
  padding-top: 4px;
}

.sub-privacy-intro {
  margin: 0 0 18px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.9;
  color: #3e2800;
  background: rgba(120, 80, 0, .07);
  border-left: 3px solid rgba(120, 80, 0, .3);
  border-radius: 0 8px 8px 0;
}

.sub-privacy-clause {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  font-size: 12px;
  line-height: 1.9;
  color: #3e2800;
  border-bottom: 1px solid rgba(120, 80, 0, .12);
}

.sub-privacy-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 900;
  color: #1a1030;
  background: #ffd200;
  border-radius: 50%;
}

.sub-privacy-section {
  padding: 14px 0 10px;
  border-bottom: 1px solid rgba(120, 80, 0, .15);
}

.sub-privacy-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: #7a4a00;
  letter-spacing: .04em;
}

.sub-privacy-section-lead {
  margin: -4px 0 10px 30px;
  font-size: 12px;
  color: #5a3800;
  line-height: 1.7;
}

.sub-privacy-section-body {
  margin-left: 30px;
  font-size: 12px;
  line-height: 1.9;
  color: #3e2800;
}

.sub-privacy-sub-head {
  margin: 10px 0 3px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #7a4a00;
  background: rgba(120, 80, 0, .08);
  border-radius: 4px;
}

.sub-privacy-contact {
  margin: 16px 0;
  padding: 14px 16px;
  background: rgba(120, 80, 0, .08);
  border: 1.5px solid rgba(120, 80, 0, .22);
  border-radius: 10px;
  font-size: 12px;
  line-height: 2;
  color: #3e2800;
}

.sub-privacy-contact-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #7a4a00;
  letter-spacing: .04em;
}

/* ======================================================
   maintenance — メンテナンスページ
====================================================== */
.sub-maintenance-msg {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, .88);
  text-align: center;
  letter-spacing: .04em;
}

/* ======================================================
   kiyaku — 利用規約ページ（privacy クラスを継承）
====================================================== */
.sub-kiyaku-head {
  padding-left: 12px;
  border-left: 3px solid rgba(255, 210, 0, .55);
}

/* ======================================================
   kishu — 対応機種ページ
====================================================== */
.sub-kishu-test {
  border-color: rgba(100, 200, 255, .3);
  background: rgba(0, 60, 120, .3);
  font-size: 11px;
  color: rgba(160, 220, 255, .8);
}

/* ======================================================
   guide — ご利用ガイドページ
====================================================== */
.sub-guide-section {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(120, 80, 0, .18);
}

.sub-guide-section--last {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.sub-guide-head {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: #7a4a00;
  letter-spacing: .05em;
  padding-left: 10px;
  border-left: 3px solid rgba(255, 210, 0, .55);
}

.sub-guide-plans {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.sub-guide-carrier {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid rgba(120, 80, 0, .2);
  background: rgba(120, 80, 0, .06);
}

.sub-guide-carrier--au {
  border-color: rgba(200, 100, 0, .3);
  background: rgba(200, 100, 0, .07);
}

.sub-guide-carrier--docomo {
  border-color: rgba(180, 40, 40, .28);
  background: rgba(180, 40, 40, .06);
}

.sub-guide-carrier-name {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #3e2800;
}

.sub-guide-carrier--au .sub-guide-carrier-name {
  color: #8b4000;
}

.sub-guide-carrier--docomo .sub-guide-carrier-name {
  color: #8b0000;
}

.sub-guide-plan-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-top: 1px solid rgba(120, 80, 0, .12);
  font-size: 12px;
}

.sub-guide-plan-label {
  color: #5a3800;
}

.sub-guide-plan-price {
  font-weight: 700;
  color: #7a4a00;
}

.sub-guide-notes {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sub-guide-notes li {
  font-size: 12px;
  line-height: 1.8;
  color: #5a3800;
  padding-left: 12px;
  position: relative;
}

/* ======================================================
   tai04nig — 退会完了ページ
====================================================== */
.sub-retire-thanks-msg {
  margin: 4px 0 14px;
  font-size: 14px;
  font-weight: 700;
  color: #3e2800;
  text-align: center;
  line-height: 1.8;
  letter-spacing: .04em;
}

.sub-retire-img-wrap {
  margin: 0 auto 14px;
  max-width: 220px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}

.sub-retire-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
  animation: subFadeUp .3s .1s ease-out both;
}

.sub-retire-table th,
.sub-retire-table td {
  padding: 10px 12px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  text-align: left;
}

.sub-retire-table th {
  background: rgba(255, 210, 0, .12);
  color: #ffd200;
  font-weight: 700;
  width: 48%;
}

.sub-retire-table td {
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .7);
}

.sub-retire-table tbody tr:last-child th,
.sub-retire-table tbody tr:last-child td {
  border-bottom: none;
}

.sub-retire-table s {
  color: rgba(255, 80, 80, .6);
}

.sub-retire-top-wrap {
  margin-bottom: 16px;
  animation: subFadeUp .3s .12s ease-out both;
}

.sub-retire-ad {
  text-align: center;
  margin: 12px 0;
}

.sub-retire-terms {
  margin-top: 8px;
  font-size: 11px;
}

.sub-retire-inline-link {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 14px;
  font-size: 12px;
  color: rgba(255, 120, 100, .7);
  border: 1px solid rgba(200, 60, 40, .25);
  border-radius: 6px;
  text-decoration: none;
  background: rgba(100, 20, 10, .2);
}

.sub-retire-footer {
  padding: 16px 20px;
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, .3);
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.sub-privacy-section--last {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* ======================================================
   tai04eas — 退会（アンケート後）ページ
====================================================== */
/* 羊皮紙内の警告ボックス */
.sub-tai04-notice {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(160, 50, 0, .08);
  border: 1px solid rgba(160, 50, 0, .22);
  border-radius: 10px;
  color: #8b2000;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.75;
}

/* 羊皮紙の外（暗背景）の情報ブロック */
.sub-tai04-info-block {
  padding: 18px 16px;
  background: rgba(0, 0, 20, .55);
  border: 1.5px solid rgba(255, 200, 0, .15);
  border-radius: 16px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sub-tai04-caution-line {
  margin: 0;
  padding: 10px 14px;
  background: rgba(220, 50, 30, .12);
  border: 1px solid rgba(220, 50, 30, .28);
  border-radius: 9px;
  color: #ff9999;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
}

.sub-tai04-check-head {
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #ffd200;
  letter-spacing: .06em;
}

.sub-tai04-carriers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sub-carrier-name {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}

.sub-carrier-name--au     { color: #ffaa44; }
.sub-carrier-name--docomo { color: #ff7070; }
.sub-carrier-name--sb     { color: #88ccff; }

.sub-carrier-steps {
  margin: 0;
  font-size: 12px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .72);
}

.sub-tai04-retire-btn {
  font-size: 14px;
  font-weight: 700;
  padding: 14px 20px;
}

/* ======================================================
   tai03 — 退会確認画面（retire.css を notore_sub.css に統合）
====================================================== */
/* 解約確認テーブル（羊皮紙内） */
.order {
  margin: 14px 0 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid rgba(120, 80, 0, .22);
  background: rgba(120, 80, 0, .05);
}

.order > p {
  margin: 0;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #7a4a00;
  letter-spacing: .05em;
  background: rgba(120, 80, 0, .09);
  border-bottom: 1px solid rgba(120, 80, 0, .15);
}

.order dl {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 46% 1fr;
}

.order dt,
.order dd {
  margin: 0;
  padding: 9px 12px;
  font-size: 12px;
  border-bottom: 1px solid rgba(120, 80, 0, .1);
}

.order dt {
  color: #7a4a00;
  font-weight: 700;
  background: rgba(120, 80, 0, .05);
  border-right: 1px solid rgba(120, 80, 0, .12);
}

.order dd {
  color: #3e2800;
}

.order dl > dt:last-of-type,
.order dl > dd:last-of-type {
  border-bottom: none;
}

/* 決定ボタン */
.retire_button {
  margin: 20px 0 14px;
}

.btn-flat-border {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 18px 20px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .07em;
  text-decoration: none;
  box-sizing: border-box;
  background: linear-gradient(180deg, #c22000 0%, #8b0000 100%);
  color: #fff;
  border: 2px solid #6a0000;
  border-bottom: 6px solid #4a0000;
  box-shadow: 0 6px 0 #2a0000, 0 8px 24px rgba(150, 0, 0, .4);
  transition: transform .08s, box-shadow .08s, border-bottom-width .08s;
}

.btn-flat-border:active {
  border-bottom-width: 2px;
  box-shadow: 0 2px 0 #2a0000;
  transform: translateY(4px);
}

/* ======================================================
   tai02 — 退会アンケートページ（retire.css を統合）
====================================================== */
.sub-survey-card {
  padding: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  margin-bottom: 12px;
  animation: subFadeUp .25s ease-out both;
}

h2.retire {
  margin: 0 0 12px;
  padding: 0 0 7px;
  font-size: 13px;
  font-weight: 700;
  color: #ffd200;
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(255, 210, 0, .22);
}

.select-wrap {
  position: relative;
}

.select-wrap::after {
  content: "\25BC";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffd200;
  font-size: 10px;
  pointer-events: none;
}

.select-wrap select {
  width: 100%;
  padding: 11px 36px 11px 12px;
  background: rgba(0, 0, 30, .75);
  color: rgba(255, 255, 255, .85);
  border: 1.5px solid rgba(255, 210, 0, .35);
  border-radius: 8px;
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  box-sizing: border-box;
}

.radio-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.label-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .1s;
}

.label-radio:active {
  background: rgba(255, 210, 0, .08);
}

.label-radio input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #ffd200;
  flex-shrink: 0;
  cursor: pointer;
}

.lever {
  font-size: 13px;
  color: rgba(255, 255, 255, .8);
}

p.retire {
  margin: 0;
}

.box1 {
  width: 100%;
  padding: 10px 12px;
  background: rgba(0, 0, 30, .7);
  color: rgba(255, 255, 255, .85);
  border: 1.5px solid rgba(255, 210, 0, .28);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.7;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}

.box1:focus {
  border-color: rgba(255, 210, 0, .55);
}

/* ======================================================
   list — マイページ（list_sp_1）
====================================================== */
.sub-mypage-points-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(80, 50, 0, .55) 0%, rgba(40, 20, 0, .55) 100%);
  border: 1.5px solid rgba(255, 210, 0, .38);
  border-radius: 12px;
  margin-bottom: 14px;
  animation: subFadeUp .25s ease-out both;
}

.sub-mypage-points-label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 210, 0, .85);
  letter-spacing: .04em;
}

.sub-mypage-points-value {
  font-size: 22px;
  font-weight: 900;
  color: #ffd200;
  letter-spacing: .03em;
}

.sub-mypage-points-value small {
  font-size: 13px;
  font-weight: 700;
  margin-left: 2px;
  color: rgba(255, 210, 0, .7);
}

.menu-item {
  padding: 9px 14px;
  background: rgba(255, 210, 0, .1);
  color: #ffd200;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  border-top: 1px solid rgba(255, 210, 0, .2);
  border-bottom: 1px solid rgba(255, 210, 0, .2);
  margin: 12px 0 8px;
}

.menu-item a {
  text-decoration: none;
  color: inherit;
}

.sub-history-item {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  margin-bottom: 4px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  text-decoration: none;
  transition: background .12s;
}

.sub-history-item:active {
  background: rgba(255, 210, 0, .07);
}

.sub-history-path {
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .72);
}

.sub-mypage-member-card {
  padding: 12px 16px;
  background: rgba(0, 0, 20, .4);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
  line-height: 2;
  margin-bottom: 4px;
}

.sub-mypage-member-card p {
  margin: 0;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .04em;
  margin-bottom: 14px;
  box-sizing: border-box;
}

.button.gray {
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .55);
  border: 1.5px solid rgba(255, 255, 255, .14);
}

.button.gray:active {
  background: rgba(255, 255, 255, .13);
  color: rgba(255, 255, 255, .8);
}

/* ======================================================
   detail — 汎用モデル詳細ページ
====================================================== */
.sub-detail-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.btn-right a {
  display: inline-block;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #ffd200;
  border: 1.5px solid rgba(255, 210, 0, .4);
  border-radius: 6px;
  text-decoration: none;
  background: rgba(255, 210, 0, .08);
}

.sub-detail-subtitle {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .04em;
}

.msg {
  margin: 0 0 12px;
  padding: 10px 14px;
  font-size: 12px;
  color: rgba(255, 200, 100, .85);
  background: rgba(255, 160, 0, .08);
  border-left: 3px solid rgba(255, 200, 0, .4);
  border-radius: 0 8px 8px 0;
  min-height: 0;
}

.msg:empty {
  display: none;
}

table.detail {
  width: 100%;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 4px;
}

table.detail th,
table.detail td {
  padding: 9px 12px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  text-align: left;
  vertical-align: top;
}

table.detail th {
  background: rgba(255, 210, 0, .1);
  color: rgba(255, 210, 0, .85);
  font-weight: 700;
  width: 38%;
}

table.detail td {
  background: rgba(255, 255, 255, .03);
  color: rgba(255, 255, 255, .75);
  word-break: break-all;
}

table.detail tr:last-child th,
table.detail tr:last-child td {
  border-bottom: none;
}

.content_subtitle {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #ffd200;
  background: rgba(255, 210, 0, .07);
  border-left: 3px solid rgba(255, 210, 0, .5);
  border-radius: 0 6px 6px 0;
  margin-bottom: 4px;
}

.sub-detail-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0;
}

.btn.wide {
  width: 100%;
  padding: 13px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
}

.btn.wide.commit {
  background: linear-gradient(180deg, #ffe840 0%, #ffb700 55%, #ff8c00 100%);
  color: #5a2800;
  border: 2px solid #cc6a00;
  border-bottom: 4px solid #8a4000;
}

.btn.wide.gray {
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 80, 60, .65);
  border: 1.5px solid rgba(200, 60, 40, .22);
}

.mb10 {
  margin-bottom: 10px;
}

ul.link.info {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

li.arrow.list_26 {
  list-style: none;
}

li.arrow.list_26 a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, .65);
  text-decoration: none;
  background: rgba(255, 255, 255, .04);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
}

li.arrow.list_26 a::before {
  content: "\203A";
  color: #ffd200;
  font-size: 16px;
  flex-shrink: 0;
}

li.arrow.list_26 a:active {
  background: rgba(255, 210, 0, .07);
  color: #ffd200;
}

/* ======================================================
   list_g — ジャンル一覧ページ
====================================================== */
.not_found {
  padding: 20px 16px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .04);
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, .12);
  margin-bottom: 12px;
}

.content_wrap {
  animation: subFadeUp .25s ease-out both;
}

.genre_list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.list_26_con {
  list-style: none;
}

.list_26_con a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  letter-spacing: .03em;
  transition: background .12s, color .12s, border-color .12s;
}

.list_26_con a::before {
  content: "\25B6";
  color: #ffd200;
  font-size: 10px;
  flex-shrink: 0;
}

.list_26_con a:active {
  background: rgba(255, 210, 0, .09);
  color: #ffd200;
  border-color: rgba(255, 210, 0, .3);
}

/* ======================================================
   detail_quiz — クイズ問題ページ（コア体験）
====================================================== */
.sub-dungeon-head--quiz {
  background: linear-gradient(180deg,
    rgba(30, 10, 60, .98) 0%,
    rgba(10, 5, 30, .98) 100%);
}

.sub-quiz-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .04);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: 11px;
  margin-bottom: 10px;
  animation: subFadeUp .2s ease-out both;
}

.sub-quiz-meta-genre {
  color: rgba(255, 210, 0, .85);
  font-weight: 700;
}

.sub-quiz-meta-sep {
  color: rgba(255, 255, 255, .3);
  font-size: 13px;
}

.sub-quiz-meta-sub {
  color: rgba(255, 255, 255, .65);
}

.sub-quiz-meta-num {
  margin-left: auto;
  padding: 2px 8px;
  background: rgba(255, 210, 0, .15);
  color: #ffd200;
  font-weight: 900;
  font-size: 11px;
  border-radius: 20px;
  letter-spacing: .06em;
  border: 1px solid rgba(255, 210, 0, .3);
}

.sub-quiz-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, .9);
  letter-spacing: .04em;
  line-height: 1.5;
  animation: subFadeUp .2s .04s ease-out both;
}

.ditail_wrap {
  animation: subFadeUp .2s .06s ease-out both;
}

.detail_question {
  padding: 16px;
  background: linear-gradient(160deg, rgba(255, 250, 220, .06) 0%, rgba(255, 220, 100, .03) 100%);
  border: 1.5px solid rgba(255, 210, 0, .3);
  border-radius: 14px;
  margin-bottom: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.sub-quiz-question-label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 210, 0, .7);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sub-quiz-question-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .92);
  font-weight: 500;
}

.detail_answer_wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sub-quiz-answer-label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .4);
  letter-spacing: .08em;
}

.detail_answer {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 15px 18px;
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .88);
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  transition: background .1s, border-color .1s, color .1s;
}

.detail_answer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(255, 210, 0, .5);
  border-radius: 12px 0 0 12px;
  opacity: 0;
  transition: opacity .1s;
}

.detail_answer:active {
  background: rgba(255, 210, 0, .14);
  border-color: rgba(255, 210, 0, .55);
  color: #ffd200;
}

.detail_answer:active::before {
  opacity: 1;
}

.sub-quiz-nav {
  display: flex;
  gap: 10px;
  margin: 16px 0 10px;
  animation: subFadeUp .2s .12s ease-out both;
}

.sub-quiz-nav-btn {
  flex: 1;
}

.btn.red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  background: rgba(180, 50, 30, .3);
  color: rgba(255, 140, 110, .85);
  border: 1.5px solid rgba(200, 60, 40, .3);
  border-radius: 10px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: background .1s, color .1s;
}

.btn.red:active {
  background: rgba(200, 60, 30, .45);
  color: rgba(255, 160, 130, 1);
}

.sub-quiz-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 16px;
  animation: subFadeUp .2s .14s ease-out both;
}

.sub-quiz-bc-sep {
  color: rgba(255, 255, 255, .3);
  font-size: 16px;
}

.sub-quiz-insufficient {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 30px 20px;
  background: rgba(255, 255, 255, .04);
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 14px;
  animation: subFadeUp .25s ease-out both;
}

.sub-quiz-insufficient-icon {
  font-size: 40px;
  line-height: 1;
}

.sub-quiz-insufficient-pt {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  color: rgba(255, 255, 255, .35);
}

.sub-quiz-insufficient-pt small {
  font-size: 14px;
  margin-left: 4px;
  color: rgba(255, 255, 255, .3);
}

.sub-quiz-insufficient-msg {
  margin: 0 0 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, .5);
}

.sub-quiz-charge-btn {
  width: 100%;
  max-width: 280px;
  font-size: 15px;
}

/* ======================================================
   detail_img — 画像ダウンロード確認ページ
====================================================== */
.sub-dl-card {
  padding: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: subFadeUp .25s ease-out both;
}

.sub-dl-vote-label {
  margin: 0;
  font-size: 11px;
  color: rgba(255, 120, 100, .65);
  letter-spacing: .04em;
}

.sub-dl-arrows {
  margin: -6px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, .3);
  letter-spacing: .1em;
}

.sub-dl-img-wrap {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, .3);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 210, 0, .22);
}

.sub-dl-img {
  display: block;
  width: 100%;
  height: auto;
}

.sub-dl-point-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: rgba(255, 210, 0, .08);
  border: 1px solid rgba(255, 210, 0, .22);
  border-radius: 10px;
}

.sub-dl-point-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 210, 0, .75);
}

.sub-dl-point-value {
  font-size: 20px;
  font-weight: 900;
  color: #ffd200;
}

.sub-dl-point-value small {
  font-size: 12px;
  margin-left: 2px;
  color: rgba(255, 210, 0, .65);
}

.sub-dl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .06em;
  text-decoration: none;
  box-sizing: border-box;
  transition: transform .08s, box-shadow .08s;
}

.sub-dl-btn--dl {
  background: linear-gradient(180deg, #ffe840 0%, #ffb700 55%, #ff8c00 100%);
  color: #5a2800;
  border: 2px solid #cc6a00;
  border-bottom: 6px solid #8a4000;
  box-shadow: 0 8px 0 #4a1c00, inset 0 1px 0 rgba(255,255,255,.55);
}

.sub-dl-btn--dl:active {
  border-bottom-width: 2px;
  box-shadow: 0 2px 0 #4a1c00;
  transform: translateY(4px);
}

.sub-dl-btn--re {
  background: rgba(80, 160, 255, .2);
  color: rgba(160, 210, 255, .9);
  border: 1.5px solid rgba(100, 180, 255, .3);
}

.sub-dl-btn--re:active {
  background: rgba(80, 160, 255, .32);
  color: #fff;
}

.sub-dl-confirm-note {
  margin: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, .4);
  text-align: center;
  line-height: 1.7;
}

/* ======================================================
   detail_fla_utas — 楽曲ダウンロード確認ページ
====================================================== */
.sub-dl-music-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sub-dl-music-icon {
  font-size: 28px;
  flex-shrink: 0;
}

h2.title_cp {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, .92);
  line-height: 1.4;
  letter-spacing: .03em;
}

.sub-dl-music-info {
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 5em 1fr;
  gap: 0;
}

.sub-dl-music-info dt,
.sub-dl-music-info dd {
  margin: 0;
  padding: 7px 10px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.sub-dl-music-info dt {
  color: rgba(255, 210, 0, .75);
  font-weight: 700;
  background: rgba(255, 255, 255, .03);
}

.sub-dl-music-info dd {
  color: rgba(255, 255, 255, .72);
  word-break: break-all;
}

.sub-dl-music-info dt:last-of-type,
.sub-dl-music-info dd:last-of-type {
  border-bottom: none;
}

/* ======================================================
   answer_quiz — クイズ回答結果ページ（ゲーム感強め）
====================================================== */
@keyframes correctBurst {
  0%   { transform: scale(.4) rotate(-6deg); opacity: 0; }
  50%  { transform: scale(1.18) rotate(2deg); opacity: 1; }
  70%  { transform: scale(.95) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes correctGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 210, 0, 0); }
  50%       { box-shadow: 0 0 40px rgba(255, 210, 0, .55), 0 0 80px rgba(255, 160, 0, .2); }
}

@keyframes incorrectShake {
  0%, 100% { transform: translateX(0); }
  15%  { transform: translateX(-10px); }
  30%  { transform: translateX(10px); }
  45%  { transform: translateX(-7px); }
  60%  { transform: translateX(7px); }
  75%  { transform: translateX(-3px); }
  90%  { transform: translateX(3px); }
}

@keyframes incorrectFadeIn {
  0%   { transform: scale(.8); opacity: 0; filter: blur(4px); }
  100% { transform: scale(1); opacity: 1; filter: blur(0); }
}

.correct_wrap,
.incorrect_wrap {
  animation: subFadeUp .2s ease-out both;
}

/* ══════════════════════════════════════
   正解・不正解 ステージ演出
══════════════════════════════════════ */

/* 共通ステージ */
.sub-result-stage {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 30px 16px 26px;
  margin: 0 0 14px;
  text-align: center;
}

/* 正解ステージ */
.sub-result-stage--correct {
  background: linear-gradient(145deg,
    #3a2800 0%, #7a5200 30%, #c88000 55%, #7a5200 80%, #3a2800 100%);
  border: 2px solid rgba(255, 215, 0, .6);
  box-shadow:
    0 0 0 4px rgba(255, 200, 0, .12),
    0 8px 40px rgba(180, 120, 0, .6),
    inset 0 1px 0 rgba(255, 255, 255, .2);
  animation: correctStagePulse 2.5s ease-in-out infinite;
}

/* シマー */
.sub-result-stage--correct::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.18) 50%, transparent 80%);
  animation: resultShimmer 2.8s linear infinite;
  pointer-events: none;
}

/* 不正解ステージ */
.sub-result-stage--incorrect {
  background: linear-gradient(145deg,
    #2a0000 0%, #6a0808 30%, #b01010 55%, #6a0808 80%, #2a0000 100%);
  border: 2px solid rgba(255, 80, 80, .45);
  box-shadow:
    0 0 0 4px rgba(200, 0, 0, .1),
    0 8px 40px rgba(150, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .1);
  animation: incorrectStagePulse 2s ease-in-out infinite;
}

/* パーティクル（正解時の浮かぶ星） */
.sub-result-particles {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
}

.sub-result-particles span {
  position: absolute;
  font-size: 14px;
  color: rgba(255, 215, 0, .7);
}

.sub-result-particles span:nth-child(1) { top: 12%; left: 8%;  animation: particleFloat 2.1s ease-in-out infinite; }
.sub-result-particles span:nth-child(2) { top: 18%; right: 10%; animation: particleFloat 1.8s ease-in-out infinite .3s; }
.sub-result-particles span:nth-child(3) { bottom: 14%; left: 14%; animation: particleFloat 2.4s ease-in-out infinite .6s; }
.sub-result-particles span:nth-child(4) { bottom: 18%; right: 8%;  animation: particleFloat 1.6s ease-in-out infinite .9s; }
.sub-result-particles span:nth-child(5) { top: 50%; left: 4%;  animation: particleFloat 2.8s ease-in-out infinite .4s; }
.sub-result-particles span:nth-child(6) { top: 50%; right: 4%; animation: particleFloat 2s ease-in-out infinite 1.1s; }

/* 結果アイコン */
.sub-result-icon {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 6px;
  display: block;
}

.sub-result-icon--correct {
  animation: correctIconPop .6s .1s cubic-bezier(.22,.61,.36,1) both;
}

.sub-result-icon--incorrect {
  animation: incorrectIconShake .6s .1s ease-out both;
}

/* 結果タイトル */
.sub-result-title {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.2;
  display: block;
  margin-bottom: 8px;
}

.sub-result-title--correct {
  color: #FFD700;
  text-shadow:
    0 0 20px rgba(255, 215, 0, 1),
    0 0 50px rgba(255, 180, 0, .6),
    0 3px 0 #7a4000;
  animation: correctTitlePop .55s .2s cubic-bezier(.22,.61,.36,1) both;
}

.sub-result-title--incorrect {
  color: #ff8888;
  text-shadow:
    0 0 20px rgba(255, 80, 80, .8),
    0 3px 0 #600000;
  animation: incorrectTitleIn .45s .15s ease-out both;
}

/* サブテキスト */
.sub-result-sub--correct {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 230, 150, .85);
  letter-spacing: .1em;
  animation: subFadeUp .35s .5s ease-out both;
}

.sub-result-sub--incorrect {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 160, 160, .8);
  letter-spacing: .1em;
  animation: subFadeUp .35s .4s ease-out both;
}

/* 正解テキスト補助ラベル */
.sub-answer-correct-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 210, 0, .7);
  margin: 0 0 6px;
  letter-spacing: .06em;
}

/* あなたの回答ラベル */
.sub-answer-your-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 120, 120, .7);
  margin: 0 0 6px;
  letter-spacing: .06em;
}

/* アニメーション定義 */
@keyframes correctStagePulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 200, 0, .12), 0 8px 40px rgba(180, 120, 0, .6); }
  50%       { box-shadow: 0 0 0 6px rgba(255, 200, 0, .22), 0 10px 60px rgba(200, 140, 0, .85), 0 0 80px rgba(255, 200, 0, .15); }
}

@keyframes incorrectStagePulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(200, 0, 0, .1), 0 8px 40px rgba(150, 0, 0, .55); }
  50%       { box-shadow: 0 0 0 5px rgba(200, 0, 0, .2), 0 10px 55px rgba(180, 0, 0, .75); }
}

@keyframes resultShimmer {
  0%   { left: -100%; }
  100% { left: 200%; }
}

@keyframes particleFloat {
  0%, 100% { transform: scale(1) rotate(0deg) translateY(0); opacity: .7; }
  50%       { transform: scale(1.4) rotate(25deg) translateY(-6px); opacity: 1; }
}

@keyframes correctIconPop {
  0%   { transform: scale(.3) rotate(-15deg); opacity: 0; }
  55%  { transform: scale(1.25) rotate(5deg); opacity: 1; }
  75%  { transform: scale(.92) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes correctTitlePop {
  0%   { transform: scale(.5) translateY(10px); opacity: 0; }
  60%  { transform: scale(1.1) translateY(-3px); opacity: 1; }
  80%  { transform: scale(.97) translateY(1px); }
  100% { transform: scale(1) translateY(0); }
}

@keyframes incorrectIconShake {
  0%   { transform: scale(.5) translateX(0); opacity: 0; }
  20%  { transform: scale(1.1) translateX(-8px); opacity: 1; }
  40%  { transform: scale(1) translateX(8px); }
  60%  { transform: scale(1) translateX(-5px); }
  80%  { transform: scale(1) translateX(4px); }
  100% { transform: scale(1) translateX(0); }
}

@keyframes incorrectTitleIn {
  0%   { transform: scale(.7); opacity: 0; filter: blur(6px); }
  100% { transform: scale(1); opacity: 1; filter: blur(0); }
}

/* ---- 正解 ---- */
.correct {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 10px;
  margin: 14px 0 10px;
  background: linear-gradient(135deg,
    rgba(80, 60, 0, .7) 0%,
    rgba(140, 100, 0, .6) 50%,
    rgba(80, 60, 0, .7) 100%);
  border: 2px solid rgba(255, 210, 0, .7);
  border-radius: 16px;
  animation: correctBurst .5s .1s cubic-bezier(.22,.61,.36,1) both,
             correctGlow 1.2s .6s ease-in-out 2;
}

.sub-answer-label {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .08em;
}

.correct .sub-answer-label {
  color: #ffd200;
  text-shadow: 0 0 20px rgba(255, 200, 0, .8), 0 2px 0 rgba(0,0,0,.5);
}

.sub-answer-icon {
  font-size: 22px;
  line-height: 1;
}

.sub-answer-correct-text {
  padding: 14px 16px;
  background: rgba(255, 210, 0, .1);
  border: 1.5px solid rgba(255, 210, 0, .35);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, .92);
  text-align: center;
  margin: 0 0 10px;
  animation: subFadeUp .3s .5s ease-out both;
}

.choice {
  padding: 14px 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .75);
  animation: subFadeUp .3s .7s ease-out both;
}

.sub-choice-head {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #ffd200;
  letter-spacing: .06em;
  border-bottom: 1px solid rgba(255, 210, 0, .2);
  padding-bottom: 6px;
}

/* ---- 不正解 ---- */
.incorrect {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 10px;
  margin: 14px 0 10px;
  background: linear-gradient(135deg,
    rgba(80, 10, 10, .75) 0%,
    rgba(120, 20, 20, .65) 50%,
    rgba(80, 10, 10, .75) 100%);
  border: 2px solid rgba(200, 50, 50, .5);
  border-radius: 16px;
  animation: incorrectShake .5s .15s ease-out both,
             incorrectFadeIn .3s ease-out both;
}

.incorrect .sub-answer-label {
  color: #ff7070;
  text-shadow: 0 0 16px rgba(255, 80, 80, .6), 0 2px 0 rgba(0,0,0,.5);
}

.sub-answer-incorrect-text {
  padding: 12px 16px;
  background: rgba(200, 50, 50, .12);
  border: 1.5px solid rgba(200, 50, 50, .3);
  border-radius: 12px;
  font-size: 14px;
  color: rgba(255, 150, 130, .85);
  text-align: center;
  margin: 0 0 14px;
  animation: subFadeUp .3s .4s ease-out both;
}

.back_button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 20px;
  background: linear-gradient(180deg, #ffe840 0%, #ffb700 55%, #ff8c00 100%);
  color: #5a2800;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .06em;
  border-radius: 12px;
  text-decoration: none;
  border: 2px solid #cc6a00;
  border-bottom: 5px solid #8a4000;
  box-shadow: 0 6px 0 #4a1c00;
  animation: subFadeUp .3s .5s ease-out both;
  box-sizing: border-box;
}

.back_button:active {
  border-bottom-width: 2px;
  box-shadow: 0 2px 0 #4a1c00;
  transform: translateY(3px);
}

/* ======================================================
   list_sp_1_3 — クイズ一覧ページ
====================================================== */
.sub-genre-description {
  margin: 0 0 14px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .68);
  background: rgba(255, 255, 255, .04);
  border-left: 3px solid rgba(255, 210, 0, .4);
  border-radius: 0 8px 8px 0;
}

h2.content_title {
  margin: 16px 0 8px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #ffd200;
  letter-spacing: .05em;
  background: rgba(255, 210, 0, .08);
  border-top: 1px solid rgba(255, 210, 0, .18);
  border-bottom: 1px solid rgba(255, 210, 0, .18);
}

ul.content_list1 {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sub-content-item {
  display: block;
  text-decoration: none;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  overflow: hidden;
  transition: background .12s, border-color .12s;
}

.sub-content-item:active {
  background: rgba(255, 210, 0, .07);
  border-color: rgba(255, 210, 0, .25);
}

.list_title {
  padding: 7px 12px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 210, 0, .7);
  background: rgba(255, 210, 0, .06);
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.question {
  padding: 10px 12px;
}

.sub-content-question-text {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sub-content-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
}

.sub-content-status--done {
  color: rgba(100, 220, 130, .8);
  letter-spacing: .04em;
}

.sub-content-status--pt {
  color: #ffd200;
}

.sub-content-status--new {
  color: rgba(255, 255, 255, .35);
  letter-spacing: .04em;
}

/* ======================================================
   retire_sp_1 — 退会コース選択ページ
====================================================== */
.sub-retire-course-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

li.list_3_2 {
  list-style: none;
}

li.list_3_2:first-child:empty {
  display: none;
}

li.list_3_2 a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .04);
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  text-decoration: none;
  transition: background .12s, border-color .12s;
}

li.list_3_2 a:active {
  background: rgba(255, 210, 0, .08);
  border-color: rgba(255, 210, 0, .3);
}

li.list_3_2--processing a {
  background: rgba(100, 70, 0, .2);
  border-color: rgba(255, 160, 0, .25);
  pointer-events: none;
}

.sub-retire-price {
  font-size: 15px;
  font-weight: 700;
  color: #ffd200;
  letter-spacing: .04em;
}

.sub-retire-price small {
  font-size: 12px;
  color: rgba(255, 210, 0, .75);
}

.sub-retire-action {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 120, 100, .8);
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding-top: 6px;
  margin-top: 2px;
}

.sub-retire-processing-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 180, 60, .85);
  letter-spacing: .04em;
}

.sub-retire-processing-msg {
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
}

/* ======================================================
   retire_mysoftbank — SoftBank 専用退会ページ
====================================================== */
.sub-dungeon-head--sb {
  background: linear-gradient(180deg,
    rgba(10, 25, 60, .98) 0%,
    rgba(5, 15, 40, .98) 100%);
}

.sub-carrier-head-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 4px 14px;
  border-radius: 20px;
  margin: 4px 0 6px;
  display: inline-block;
}

.sub-carrier-head-badge--sb {
  background: rgba(100, 180, 255, .15);
  color: #88ccff;
  border: 1px solid rgba(100, 180, 255, .35);
}

.sub-sb-section-head {
  text-align: center;
  background: rgba(100, 180, 255, .08);
  color: #88ccff;
  border-color: rgba(100, 180, 255, .2);
}

ul.course_list {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sub-course-item a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .04);
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  text-decoration: none;
  transition: background .12s, border-color .12s;
}

.sub-course-item a:active {
  background: rgba(100, 180, 255, .08);
  border-color: rgba(100, 180, 255, .3);
}

.sub-course-item--processing a {
  background: rgba(60, 60, 100, .2);
  border-color: rgba(100, 180, 255, .2);
  pointer-events: none;
}

.sub-course-item--empty {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .04);
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, .1);
}

.sub-course-carrier-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 4px;
  width: fit-content;
}

.sub-course-carrier-tag--sb {
  background: rgba(100, 180, 255, .12);
  color: #88ccff;
  border: 1px solid rgba(100, 180, 255, .25);
}

/* ======================================================
   retire_docomo — docomo 専用退会ページ
====================================================== */
.sub-dungeon-head--docomo {
  background: linear-gradient(180deg,
    rgba(50, 5, 10, .98) 0%,
    rgba(25, 5, 8, .98) 100%);
}

.sub-carrier-head-badge--docomo {
  background: rgba(220, 50, 60, .15);
  color: #ff7070;
  border: 1px solid rgba(220, 50, 60, .35);
}

.sub-docomo-section-head {
  text-align: center;
  background: rgba(220, 50, 60, .08);
  color: #ff7070;
  border-color: rgba(220, 50, 60, .2);
}

.sub-course-carrier-tag--docomo {
  background: rgba(220, 50, 60, .12);
  color: #ff7070;
  border: 1px solid rgba(220, 50, 60, .25);
}

.sub-course-list--docomo .sub-course-item a:active {
  background: rgba(220, 50, 60, .08);
  border-color: rgba(220, 50, 60, .3);
}

/* ======================================================
   retire_auone — au 専用退会ページ
====================================================== */
.sub-dungeon-head--au {
  background: linear-gradient(180deg,
    rgba(50, 25, 0, .98) 0%,
    rgba(25, 12, 0, .98) 100%);
}

.sub-carrier-head-badge--au {
  background: rgba(255, 140, 0, .15);
  color: #ffaa44;
  border: 1px solid rgba(255, 140, 0, .35);
}

.sub-au-section-head {
  text-align: center;
  background: rgba(255, 140, 0, .08);
  color: #ffaa44;
  border-color: rgba(255, 140, 0, .2);
}

.sub-course-carrier-tag--au {
  background: rgba(255, 140, 0, .12);
  color: #ffaa44;
  border: 1px solid rgba(255, 140, 0, .25);
}

.sub-course-list--au .sub-course-item a:active {
  background: rgba(255, 140, 0, .08);
  border-color: rgba(255, 140, 0, .3);
}

.sub-au-shori-link {
  font-size: 12px;
  color: rgba(255, 170, 68, .7);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 170, 68, .3);
}

/* ======================================================
   regist_sp_1 — au 月額コース登録ページ
====================================================== */
h2.title_3 {
  margin: 16px 0 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #ffaa44;
  background: rgba(255, 140, 0, .09);
  border-top: 1px solid rgba(255, 140, 0, .2);
  border-bottom: 1px solid rgba(255, 140, 0, .2);
  letter-spacing: .05em;
}

ul.sub-regist-course-list {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

ul.sub-regist-course-list li.list_3_2 {
  list-style: none;
}

ul.sub-regist-course-list li.list_3_2 a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .04);
  border: 1.5px solid rgba(255, 140, 0, .2);
  border-radius: 12px;
  text-decoration: none;
  transition: background .12s, border-color .12s;
}

ul.sub-regist-course-list li.list_3_2 a:active {
  background: rgba(255, 140, 0, .1);
  border-color: rgba(255, 140, 0, .45);
}

.sub-regist-item--done a {
  background: rgba(255, 255, 255, .03) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  pointer-events: none;
  opacity: .75;
}

.sub-regist-pts {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 900;
  color: #ffaa44;
  letter-spacing: .04em;
}

.sub-regist-pts small {
  font-size: 12px;
  color: rgba(255, 170, 68, .7);
  font-weight: 700;
}

.sub-regist-price {
  font-size: 12px;
  color: rgba(255, 255, 255, .65);
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding-top: 6px;
}

.sub-regist-price small {
  font-size: 12px;
}

.sub-regist-cta-label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 200, 80, .85);
  letter-spacing: .04em;
}

.sub-regist-done-badge {
  font-size: 11px;
  font-weight: 700;
  color: rgba(100, 220, 130, .8);
  background: rgba(100, 220, 130, .1);
  border: 1px solid rgba(100, 220, 130, .25);
  border-radius: 20px;
  padding: 1px 8px;
}

/* ======================================================
   regist_ok — 登録完了ページ
====================================================== */
.sub-regist-login-info {
  padding: 16px;
  background: rgba(0, 0, 30, .5);
  border: 1.5px solid rgba(255, 210, 0, .28);
  border-radius: 12px;
  margin-bottom: 14px;
  animation: subFadeUp .3s .2s ease-out both;
}

.sub-regist-login-info-head {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: #ffd200;
  letter-spacing: .04em;
}

.sub-regist-login-info-note {
  margin: 0 0 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
  line-height: 1.7;
}

/* ======================================================
   no_login — ログインページ（キャリア選択）
====================================================== */
.sub-login-section {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  margin-bottom: 10px;
  text-align: center;
  animation: subFadeUp .25s ease-out both;
}

.sub-login-section--docomo {
  border-color: rgba(220, 50, 60, .28);
  background: rgba(80, 5, 10, .2);
}

.sub-login-section--au {
  border-color: rgba(255, 140, 0, .28);
  background: rgba(60, 25, 0, .2);
}

.sub-login-section--sb {
  border-color: rgba(100, 180, 255, .25);
  background: rgba(5, 20, 60, .2);
}

p.docomo,
p.au,
p.softbank {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}

p.docomo span { color: #ff7070; }
p.au span      { color: #ffaa44; }
p.softbank span { color: #88ccff; }

p.docomo,
p.au,
p.softbank {
  color: rgba(255, 255, 255, .75);
}

.sub-login-img {
  display: block;
  max-width: 200px;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .4);
}

/* ======================================================
   no_login — キャリアログインボタン（index の rq-cmd-btn 準拠）
====================================================== */

/* =====================================================
   no_login — キャリアログインボタン
===================================================== */

/* ── 外枠フレーム ── */
.sub-nologin-btn {
  display: block;
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  padding: 4px;
  border-radius: 20px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  border: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, box-shadow .12s;
}

/* 外枠パルスグロー */
.sub-nologin-btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  opacity: 0;
  animation: loginBtnGlow 2.4s ease-in-out infinite;
  pointer-events: none;
}

/* ── 内側レイヤー（グラデ＋斜めストライプ＋シマー） ── */
.sub-nologin-btn-inner {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 16px 20px 18px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .38);
  border-bottom: 1px solid rgba(0, 0, 0, .25);
}

/* シマーライト */
.sub-nologin-btn-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -130%;
  width: 45%;
  height: 100%;
  background: linear-gradient(110deg,
    transparent 10%,
    rgba(255, 255, 255, .25) 50%,
    transparent 90%);
  animation: loginBtnShimmer 2.4s linear infinite;
  pointer-events: none;
}

/* 上端グローライン */
.sub-nologin-btn-inner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, .7) 30%,
    rgba(255, 255, 255, .7) 70%,
    transparent);
  pointer-events: none;
}

/* ── オーナメントライン（✦───✦───✦） ── */
.sub-nologin-btn-ornament {
  display: block;
  font-size: 12px;
  letter-spacing: .1em;
  margin-bottom: 8px;
  opacity: .6;
}

/* ── キャリアバッジ ── */
.sub-nologin-btn-carrier {
  display: inline-block;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 5px 22px;
  border-radius: 30px;
  background: rgba(0, 0, 0, .32);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
}

/* ── メインテキスト ── */
.sub-nologin-btn-main {
  display: block;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.2;
}

/* ── 四隅コーナールーン ── */
.sub-nologin-btn-corner {
  position: absolute;
  font-size: 11px;
  line-height: 1;
  pointer-events: none;
  animation: loginCornerPulse 2.4s ease-in-out infinite;
}
.sub-nologin-btn-corner--tl { top: 6px;  left:  8px;  animation-delay: 0s; }
.sub-nologin-btn-corner--tr { top: 6px;  right: 8px;  animation-delay: .6s; }
.sub-nologin-btn-corner--bl { bottom: 8px; left:  8px; animation-delay: 1.2s; }
.sub-nologin-btn-corner--br { bottom: 8px; right: 8px; animation-delay: 1.8s; }

/* ── docomo（赤） ── */
.sub-nologin-btn--docomo {
  background: linear-gradient(180deg, #8a0014 0%, #4a0008 100%);
  box-shadow:
    0 8px 0 #2a0005,
    0 0 18px rgba(220, 20, 60, .35);
}
.sub-nologin-btn--docomo::before {
  box-shadow: 0 0 16px 4px rgba(255, 60, 90, .55);
}
.sub-nologin-btn--docomo .sub-nologin-btn-inner {
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 6px,
      rgba(255, 255, 255, .03) 6px,
      rgba(255, 255, 255, .03) 12px
    ),
    linear-gradient(170deg, #ff5568 0%, #e0001c 45%, #b0001a 100%);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
.sub-nologin-btn--docomo .sub-nologin-btn-ornament { color: rgba(255, 200, 210, .75); }
.sub-nologin-btn--docomo .sub-nologin-btn-corner   { color: rgba(255, 180, 190, .7); }
.sub-nologin-btn--docomo .sub-nologin-btn-carrier  {
  color: #ffccd4;
  border-color: rgba(255, 150, 170, .5);
  text-shadow: 0 0 8px rgba(255, 80, 100, .8);
}
.sub-nologin-btn--docomo:active {
  transform: translateY(5px);
  box-shadow: 0 3px 0 #2a0005, 0 0 8px rgba(220, 20, 60, .2);
}

/* ── au（オレンジ） ── */
.sub-nologin-btn--au {
  background: linear-gradient(180deg, #8a2c00 0%, #4a1400 100%);
  box-shadow:
    0 8px 0 #2a0a00,
    0 0 18px rgba(200, 80, 10, .35);
}
.sub-nologin-btn--au::before {
  box-shadow: 0 0 16px 4px rgba(255, 130, 50, .55);
}
.sub-nologin-btn--au .sub-nologin-btn-inner {
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 6px,
      rgba(255, 255, 255, .03) 6px,
      rgba(255, 255, 255, .03) 12px
    ),
    linear-gradient(170deg, #ff9055 0%, #e85510 45%, #c03a00 100%);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
.sub-nologin-btn--au .sub-nologin-btn-ornament { color: rgba(255, 210, 170, .75); }
.sub-nologin-btn--au .sub-nologin-btn-corner   { color: rgba(255, 200, 150, .7); }
.sub-nologin-btn--au .sub-nologin-btn-carrier  {
  color: #ffd8b0;
  border-color: rgba(255, 170, 90, .5);
  text-shadow: 0 0 8px rgba(255, 120, 20, .8);
}
.sub-nologin-btn--au:active {
  transform: translateY(5px);
  box-shadow: 0 3px 0 #2a0a00, 0 0 8px rgba(200, 80, 10, .2);
}

/* ── SoftBank（青） ── */
.sub-nologin-btn--sb {
  background: linear-gradient(180deg, #044090 0%, #022055 100%);
  box-shadow:
    0 8px 0 #011030,
    0 0 18px rgba(20, 100, 220, .35);
}
.sub-nologin-btn--sb::before {
  box-shadow: 0 0 16px 4px rgba(80, 160, 255, .55);
}
.sub-nologin-btn--sb .sub-nologin-btn-inner {
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 6px,
      rgba(255, 255, 255, .03) 6px,
      rgba(255, 255, 255, .03) 12px
    ),
    linear-gradient(170deg, #75d0ff 0%, #1a9af0 45%, #0e68cc 100%);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.sub-nologin-btn--sb .sub-nologin-btn-ornament { color: rgba(180, 225, 255, .75); }
.sub-nologin-btn--sb .sub-nologin-btn-corner   { color: rgba(160, 215, 255, .7); }
.sub-nologin-btn--sb .sub-nologin-btn-carrier  {
  color: #c8e8ff;
  border-color: rgba(120, 190, 255, .5);
  text-shadow: 0 0 8px rgba(40, 140, 255, .8);
}
.sub-nologin-btn--sb:active {
  transform: translateY(5px);
  box-shadow: 0 3px 0 #011030, 0 0 8px rgba(20, 100, 220, .2);
}

@keyframes loginBtnShimmer {
  0%   { left: -130%; }
  100% { left: 160%; }
}
@keyframes loginBtnGlow {
  0%, 100% { opacity: 0; }
  50%       { opacity: 1; }
}
@keyframes loginCornerPulse {
  0%, 100% { opacity: .45; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.35); }
}

/* ======================================================
   login_ng_id — IDログイン退会案内ページ
====================================================== */
.sub-login-contact-link {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 210, 0, .75);
  border: 1px solid rgba(255, 210, 0, .28);
  border-radius: 8px;
  text-decoration: none;
  background: rgba(255, 210, 0, .06);
  letter-spacing: .04em;
}

.sub-login-contact-link:active {
  background: rgba(255, 210, 0, .12);
  color: #ffd200;
}

/* ======================================================
   login_ng_id — IDログイン退会手続きページ
====================================================== */
/* 警告ボックス */
.sub-ngid-warn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 14px;
  padding: 12px 14px;
  background: rgba(180, 60, 0, .12);
  border: 1.5px solid rgba(200, 80, 0, .45);
  border-radius: 10px;
  color: #7a2000;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}
.sub-ngid-warn-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* 注記テキスト */
.sub-ngid-note {
  margin: 10px 0 14px;
  font-size: 13px;
  color: #4a2e00;
  line-height: 1.6;
}

/* ログインボタン */
.sub-ngid-login-btn {
  display: block;
  position: relative;
  width: 100%;
  margin: 6px 0 14px;
  padding: 4px;
  border-radius: 20px;
  text-decoration: none;
  box-sizing: border-box;
  background: linear-gradient(180deg, #044090 0%, #022055 100%);
  box-shadow: 0 8px 0 #011030, 0 0 18px rgba(20, 100, 220, .3);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, box-shadow .12s;
}
.sub-ngid-login-btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  box-shadow: 0 0 16px 4px rgba(80, 160, 255, .5);
  opacity: 0;
  animation: loginBtnGlow 2.4s ease-in-out infinite;
  pointer-events: none;
}
.sub-ngid-login-btn-inner {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 14px 20px 16px;
  text-align: center;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 6px,
      rgba(255, 255, 255, .03) 6px,
      rgba(255, 255, 255, .03) 12px
    ),
    linear-gradient(170deg, #75d0ff 0%, #1a9af0 45%, #0e68cc 100%);
  border-top: 1px solid rgba(255, 255, 255, .4);
  border-bottom: 1px solid rgba(0, 0, 0, .25);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.sub-ngid-login-btn-inner::before {
  content: '';
  position: absolute;
  top: 0; left: -130%;
  width: 45%;
  height: 100%;
  background: linear-gradient(110deg, transparent 10%, rgba(255,255,255,.25) 50%, transparent 90%);
  animation: loginBtnShimmer 2.4s linear infinite;
  pointer-events: none;
}
.sub-ngid-login-btn-inner::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7) 30%, rgba(255,255,255,.7) 70%, transparent);
  pointer-events: none;
}
.sub-ngid-login-btn-ornament {
  display: block;
  font-size: 12px;
  letter-spacing: .1em;
  margin-bottom: 6px;
  color: rgba(180, 225, 255, .75);
}
.sub-ngid-login-btn-label {
  display: block;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.2;
}
.sub-ngid-login-btn-sub {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  margin-top: 5px;
  opacity: .8;
}
.sub-ngid-login-btn:active {
  transform: translateY(5px);
  box-shadow: 0 3px 0 #011030;
}

/* 区切り線 */
.sub-ngid-divider {
  text-align: center;
  font-size: 11px;
  color: rgba(100, 70, 20, .45);
  letter-spacing: .1em;
  margin: 4px 0 14px;
}

/* お問い合わせボタン */
.sub-ngid-contact-btn {
  display: block;
  width: 100%;
  padding: 13px 20px;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em;
  box-sizing: border-box;
  background: linear-gradient(180deg, #6a5000 0%, #3e2e00 100%);
  color: #ffe080;
  border: 1.5px solid rgba(255, 200, 60, .45);
  border-bottom: 4px solid #1e1600;
  box-shadow: 0 6px 0 #110d00, inset 0 1px 0 rgba(255, 220, 100, .2);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  transition: transform .1s, box-shadow .1s;
}
.sub-ngid-contact-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #110d00;
  border-bottom-width: 1px;
}

/* ======================================================
   login_id — IDログインフォームページ
====================================================== */
.sub-login-id-form-card {
  padding: 20px 16px;
  background: rgba(0, 0, 30, .55);
  border: 1.5px solid rgba(255, 210, 0, .28);
  border-radius: 14px;
  margin-bottom: 14px;
  animation: subFadeUp .25s ease-out both;
}

.sub-login-id-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.sub-login-id-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 210, 0, .8);
  letter-spacing: .04em;
}

.sub-login-id-input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(0, 0, 20, .75);
  color: rgba(255, 255, 255, .9);
  border: 1.5px solid rgba(255, 210, 0, .3);
  border-radius: 8px;
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
}

.sub-login-id-input:focus {
  border-color: rgba(255, 210, 0, .6);
  box-shadow: 0 0 0 3px rgba(255, 210, 0, .1);
}

.sub-login-id-submit {
  width: 100%;
  padding: 15px 20px;
  margin-top: 4px;
  background: linear-gradient(180deg, #ffe840 0%, #ffb700 55%, #ff8c00 100%);
  color: #5a2800;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .08em;
  border: 2px solid #cc6a00;
  border-bottom: 5px solid #8a4000;
  border-radius: 12px;
  box-shadow: 0 6px 0 #4a1c00;
  cursor: pointer;
  box-sizing: border-box;
  transition: transform .08s, box-shadow .08s, border-bottom-width .08s;
}

.sub-login-id-submit:active {
  border-bottom-width: 2px;
  box-shadow: 0 2px 0 #4a1c00;
  transform: translateY(3px);
}

/* ======================================================
   regist_docomo — d払い登録ページ
====================================================== */

.sub-dc-rg-wrap {
  padding: 0 2px;
}

/* キャリアロゴ */
.sub-dc-rg-carrier-wrap {
  text-align: center;
  padding: 20px 0 16px;
}

.sub-dc-rg-carrier-logo {
  display: block;
  max-width: 220px;
  width: auto;
  height: auto;
  margin: 0 auto;
  padding: 10px 22px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
  box-sizing: border-box;
}

.sub-dc-rg-carrier-logo--sm {
  max-width: 160px;
  padding: 8px 16px;
}

/* ══════════════════════════════════════
   キャンペーンヒーローバナー
   ─ 緊急ダンジョンミッション演出 ─
══════════════════════════════════════ */
.sub-dc-rg-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(220, 30, 30, .85) 0%, transparent 58%),
    radial-gradient(ellipse at 15% 110%, rgba(100, 0, 60, .5) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 110%, rgba(130, 0, 0, .45) 0%, transparent 50%),
    linear-gradient(168deg, #080115 0%, #10061e 35%, #1c0610 65%, #050008 100%);
  border-radius: 18px;
  padding: 22px 20px 18px;
  margin-bottom: 14px;
  text-align: center;
  box-shadow:
    0 0 0 2px rgba(160, 0, 0, .7),
    0 0 0 4px rgba(255, 200, 0, .22),
    0 0 0 5px rgba(60, 0, 0, .6),
    0 14px 52px rgba(140, 0, 0, .7),
    inset 0 0 70px rgba(180, 0, 0, .09);
  box-shadow:
    0 0 0 2px rgba(160, 0, 0, .7),
    0 0 0 4px rgba(255, 200, 0, .22),
    0 0 0 5px rgba(60, 0, 0, .6),
    0 8px 28px rgba(100, 0, 0, .5),
    inset 0 0 70px rgba(180, 0, 0, .09);
}

/* パーティクルトレイル：流れ星コメット */
.sub-dc-rg-hero::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 235, 100, .8) 40%,
    transparent 100%
  );
  box-shadow:
    0 0  8px 4px rgba(255, 240, 120, .7),
    -12px  6px 12px rgba(255, 210,  60, .5),
    -26px 13px 18px rgba(255, 170,   0, .3),
    -44px 22px 24px rgba(255, 120,   0, .14),
    -66px 33px 30px rgba(255,  80,   0, .05);
  animation: dcCometFly 3s cubic-bezier(.25, 0, .72, 1) infinite;
  pointer-events: none;
  z-index: 2;
}

/* 右下大装飾 ★ — CSS Unicode エスケープで文字化け防止 */
.sub-dc-rg-hero::after {
  content: '\2605';
  position: absolute;
  bottom: -22px; right: -10px;
  font-size: 110px;
  color: rgba(255, 100, 100, .04);
  line-height: 1;
  pointer-events: none;
}

/* コーナールーン装飾 */
.sub-dc-rg-hero-corner {
  position: absolute;
  font-size: 13px;
  color: rgba(255, 215, 0, .5);
  pointer-events: none;
  line-height: 1;
  animation: dcCornerPulse 2.6s ease-in-out infinite;
}
.sub-dc-rg-hero-corner--tl { top: 9px;  left:  12px; animation-delay:  0s; }
.sub-dc-rg-hero-corner--tr { top: 9px;  right: 12px; animation-delay: .55s; }
.sub-dc-rg-hero-corner--bl { bottom: 9px; left:  12px; animation-delay: 1.1s; }
.sub-dc-rg-hero-corner--br { bottom: 9px; right: 12px; animation-delay: 1.65s; }

/* パーティクルトレイル：上昇スパーク */
.sub-dc-rg-hero-bg-star {
  position: absolute;
  pointer-events: none;
  line-height: 1;
}

.sub-dc-rg-hero-bg-star--1 {
  bottom: 28px; right: 32px;
  font-size: 16px;
  color: rgba(255, 225, 60, .75);
  animation: dcSparkTrail 1.9s ease-in infinite;
}
.sub-dc-rg-hero-bg-star--2 {
  bottom: 22px; left: 44px;
  font-size: 11px;
  color: rgba(255, 180, 100, .65);
  animation: dcSparkTrail 2.5s ease-in infinite .55s;
}
.sub-dc-rg-hero-bg-star--3 {
  bottom: 18px; left: 20px;
  font-size: 8px;
  color: rgba(255, 240, 160, .55);
  animation: dcSparkTrail 2.1s ease-in infinite 1.1s;
}

/* ── ミッション宣言バナー ── */
.sub-dc-rg-ribbon {
  position: relative;
  display: block;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(160, 110, 0, .2) 8%,
    #b87800 18%, #FFD700 35%, #fff6a0 50%, #FFD700 65%, #c88800 82%,
    rgba(160, 110, 0, .2) 92%,
    transparent 100%
  );
  background-size: 220% auto;
  color: #3a1800;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .28em;
  padding: 7px 0;
  margin: 0 -20px 16px;
  border-top: 1px solid rgba(255, 215, 0, .55);
  border-bottom: 1px solid rgba(255, 215, 0, .55);
  text-shadow: 0 1px 0 rgba(255, 255, 200, .5);
  box-shadow: 0 0 24px rgba(255, 200, 0, .3);
  animation: dcRibbonShine 2.4s linear infinite;
}

/* 「期間限定キャンペーン」ラベル */
.sub-dc-rg-hero-kind {
  display: block;
  font-size: 11px;
  color: rgba(255, 180, 180, .7);
  letter-spacing: .14em;
  margin-bottom: 14px;
  text-shadow: 0 0 10px rgba(255, 80, 80, .4);
}

/* メインコピー */
.sub-dc-rg-hero-free {
  display: block;
  font-size: 20px;
  font-weight: 900;
  color: rgba(255, 235, 235, .95);
  margin-bottom: 6px;
  text-shadow:
    0 0 18px rgba(255, 100, 0, .55),
    0 2px 0 rgba(0,0,0,.4);
  line-height: 1.55;
}

.sub-dc-rg-hero-free em {
  display: inline-block;
  font-style: normal;
  font-weight: 700;
  font-size: 56px;
  line-height: 1.15;
  vertical-align: middle;
  color: #FFD700;
  text-shadow:
    0 0 18px rgba(255, 240, 0, 1),
    0 0 44px rgba(255, 200, 0, .75),
    0 0 90px rgba(255, 140, 0, .45),
    0 5px 0 rgba(90, 40, 0, .85);
  animation: dcFreeBounce 1.9s ease-in-out infinite;
}

/* 「通常 ¥X → 0円」 */
.sub-dc-rg-hero-note {
  display: block;
  font-size: 13px;
  color: rgba(255, 200, 200, .72);
  margin-top: 10px;
  letter-spacing: .02em;
}

.sub-dc-rg-hero-note s {
  color: rgba(255, 255, 255, .32);
  font-size: 12px;
}

.sub-dc-rg-hero-note b {
  color: #FFD700;
  font-size: 19px;
  font-weight: 900;
  text-shadow:
    0 0 18px rgba(255, 210, 0, .9),
    0 0 45px rgba(255, 160, 0, .5);
}

/* アニメーション */
@keyframes dcHeroPulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(160, 0, 0, .7),
      0 0 0 4px rgba(255, 200, 0, .22),
      0 0 0 5px rgba(60, 0, 0, .6),
      0 14px 52px rgba(140, 0, 0, .7),
      inset 0 0 70px rgba(180, 0, 0, .09);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(200, 20, 20, .85),
      0 0 0 5px rgba(255, 210, 0, .35),
      0 0 0 9px rgba(255, 200, 0, .07),
      0 0 0 10px rgba(50, 0, 0, .55),
      0 18px 75px rgba(170, 0, 0, .9),
      0 0 120px rgba(255, 40, 0, .1),
      inset 0 0 90px rgba(200, 0, 0, .13);
  }
}

@keyframes dcCometFly {
  0%   { top:  8%; left:  -4%; opacity: 0; transform: scale(0); }
  6%   {           opacity: 1; transform: scale(1); }
  88%  {           opacity: 0.65; transform: scale(0.7); }
  100% { top: 88%; left: 106%; opacity: 0; transform: scale(0.15); }
}

@keyframes dcRibbonShine {
  0%   { background-position: 220% center; }
  100% { background-position: 0%   center; }
}

@keyframes dcFreeBounce {
  0%, 100% { transform: scale(1) translateY(0); filter: brightness(1); }
  42%       { transform: scale(1.07) translateY(-7px); filter: brightness(1.25); }
  62%       { transform: scale(1.03) translateY(-3px); filter: brightness(1.1); }
}

@keyframes dcSparkTrail {
  0%   { transform: translateY(0)    scale(0)   rotate(  0deg); opacity: 0; }
  10%  { transform: translateY(-8px)  scale(1.4) rotate( 30deg); opacity: 1; }
  50%  { transform: translateY(-28px) scale(1)   rotate( 85deg); opacity: 0.6; }
  100% { transform: translateY(-60px) scale(0)   rotate(170deg); opacity: 0; }
}

@keyframes dcCornerPulse {
  0%, 100% { opacity: .45; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.3); }
}

/* ══════════════════════════════════════
   星空フィールド（docomo / au 共通）
   Group A と Group B がアンチフェーズで瞬き
   → 個々の星が独立して輝いて見える
══════════════════════════════════════ */
.sub-dc-rg-hero-stars,
.sub-au-rg-hero-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  /* overflow: hidden を外す → box-shadow がクリップされない */
}

/* ── Group A ── */
.sub-dc-rg-hero-stars::before,
.sub-au-rg-hero-stars::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    /* 上段 — 輝度高め */
     20px  11px 2px 1px rgba(255, 255, 255, .95),
     52px   7px 1px 0   rgba(255, 245, 140, .90),
     90px  22px 2px 1px rgba(255, 255, 255, .80),
    128px  10px 1px 0   rgba(255, 255, 255, .85),
    165px  24px 2px 1px rgba(255, 248, 170, .75),
    205px   9px 1px 0   rgba(255, 255, 255, .88),
    248px  18px 2px 1px rgba(255, 242, 140, .80),
    285px   8px 1px 0   rgba(255, 255, 255, .82),
    /* 右端縦列 */
    355px  13px 2px 1px rgba(255, 255, 255, .88),
    375px  36px 1px 0   rgba(255, 238, 130, .80),
    360px  62px 2px 1px rgba(255, 255, 255, .72),
    370px  90px 1px 0   rgba(255, 242, 140, .75),
    358px 118px 2px 1px rgba(255, 255, 255, .68),
    365px 148px 1px 0   rgba(255, 234, 118, .70),
    /* 左端縦列 */
     14px  54px 2px 1px rgba(255, 248, 158, .85),
     30px  82px 1px 0   rgba(255, 255, 255, .70),
     10px 110px 2px 1px rgba(255, 234, 120, .78),
     22px 140px 1px 0   rgba(255, 255, 255, .65);
  animation: starGroupA 2.2s ease-in-out infinite;
}

/* ── Group B ── */
.sub-dc-rg-hero-stars::after,
.sub-au-rg-hero-stars::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    /* 上段 右寄り */
    318px  10px 2px 1px rgba(255, 255, 255, .85),
    340px  23px 1px 0   rgba(255, 238, 118, .82),
    328px  40px 2px 1px rgba(255, 255, 255, .75),
    /* 左端下 */
     16px 165px 2px 1px rgba(255, 242, 138, .78),
      7px 188px 1px 0   rgba(255, 255, 255, .65),
    /* 下段 */
     40px 182px 2px 1px rgba(255, 248, 158, .88),
     78px 190px 1px 0   rgba(255, 255, 255, .75),
    122px 182px 2px 1px rgba(255, 234, 118, .80),
    165px 190px 1px 0   rgba(255, 255, 255, .70),
    210px 183px 2px 1px rgba(255, 242, 138, .78),
    255px 190px 1px 0   rgba(255, 255, 255, .68),
    298px 182px 2px 1px rgba(255, 238, 128, .80),
    340px 188px 1px 0   rgba(255, 255, 255, .65),
    358px 182px 2px 1px rgba(255, 242, 138, .72),
    /* 中段 大きめグロー */
     65px  44px 3px 2px rgba(255, 255, 210, .55),
    295px  52px 3px 2px rgba(255, 244, 170, .55),
    100px  60px 2px 1px rgba(255, 255, 255, .55),
    240px  50px 1px 0   rgba(255, 248, 158, .50);
  animation: starGroupB 2.2s ease-in-out infinite;
}

@keyframes starGroupA {
  0%, 100% { opacity: 1;   filter: brightness(1.2); }
  50%       { opacity: 0;   filter: brightness(1); }
}

@keyframes starGroupB {
  0%, 100% { opacity: 0;   filter: brightness(1); }
  50%       { opacity: 1;   filter: brightness(1.2); }
}

/* 登録ボタン（シングルコース） */
.sub-dc-rg-btn-wrap {
  margin: 0 0 18px;
}

.sub-dc-rg-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  background: linear-gradient(180deg, #ffe840 0%, #ffb700 55%, #ff8c00 100%);
  color: #5a2800;
  text-decoration: none;
  border: 2.5px solid #cc6a00;
  border-bottom: 7px solid #8a4000;
  border-radius: 16px;
  box-shadow: 0 7px 0 #4a1c00, 0 10px 28px rgba(255, 130, 0, .45), inset 0 1px 0 rgba(255,255,255,.5);
  box-sizing: border-box;
  transition: transform .08s, box-shadow .08s, border-bottom-width .08s;
}

/* ロゴラップ（白背景ピル） */
.sub-dc-rg-btn-logo-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.sub-dc-rg-btn-logo {
  display: block;
  height: 32px;
  width: auto;
}

/* ラベル */
.sub-dc-rg-btn-label {
  flex: 1;
  text-align: center;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .07em;
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
}

.sub-dc-rg-btn:active {
  border-bottom-width: 2.5px;
  box-shadow: 0 2px 0 #4a1c00;
  transform: translateY(5px);
}

.sub-dc-rg-btn--registered {
  background: linear-gradient(180deg, #ddd, #bbb);
  color: #888;
  border-color: #aaa;
  border-bottom-color: #888;
  box-shadow: 0 4px 0 #777;
  font-size: 15px;
  padding: 15px 20px;
  cursor: default;
  pointer-events: none;
}

/* サイト説明 */
.sub-dc-rg-desc-text {
  padding: 13px 14px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, .82);
  background: rgba(0, 0, 20, .5);
  border-left: 3px solid rgba(194, 0, 0, .7);
  border-radius: 0 10px 10px 0;
  margin-bottom: 12px;
  line-height: 1.6;
}

.sub-dc-rg-desc-note {
  padding: 12px 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, .58);
  background: rgba(0, 0, 20, .35);
  border-radius: 10px;
  line-height: 1.7;
  margin-bottom: 14px;
}

/* 詳細インフォフレーム */
.sub-dc-rg-info-frame {
  padding: 16px 14px;
  background: rgba(0, 0, 20, .58);
  border: 1.5px solid rgba(194, 0, 0, .28);
  border-radius: 14px;
  margin-bottom: 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, .68);
  line-height: 1.7;
}

.sub-dc-rg-info-frame p {
  margin: 0 0 10px;
}

.sub-dc-rg-info-notice {
  background: rgba(194, 0, 0, .14);
  border: 1px solid rgba(194, 0, 0, .28);
  border-radius: 9px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 11px;
  color: rgba(255, 220, 220, .78);
  line-height: 1.65;
}

.sub-dc-rg-trial-note {
  font-size: 11px;
  color: rgba(255, 255, 255, .42);
  line-height: 1.65;
  margin: 0;
}

/* メタ情報 */
.sub-dc-rg-meta {
  font-size: 10px;
  color: rgba(255, 255, 255, .18);
  text-align: right;
  padding: 4px 2px;
  margin-bottom: 12px;
}

/* ══════════════════════════════════════
   マルチコース
══════════════════════════════════════ */

/* 通知バー */
.sub-dc-rg-notice-bar {
  padding: 12px 14px;
  background: rgba(0, 0, 20, .48);
  border: 1px solid rgba(194, 0, 0, .22);
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
  line-height: 1.7;
}

.sub-dc-rg-notice-bar p {
  margin: 0 0 4px;
}

.sub-dc-rg-billing-badge {
  display: inline-block;
  background: rgba(194, 0, 0, .22);
  border: 1px solid rgba(194, 0, 0, .38);
  color: #ff9999;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
}

/* セクションタイトル */
.sub-dc-rg-section-title {
  margin-bottom: 12px;
}

.sub-dc-rg-section-title-text {
  background: linear-gradient(135deg, #8a0000, #c20000);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  padding: 11px 16px;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 4px 12px rgba(194, 0, 0, .4);
}

.sub-dc-rg-section-title-text--info {
  background: linear-gradient(135deg, #1e3a5f, #18203a);
}

.sub-dc-rg-section-title-line {
  height: 3px;
  background: linear-gradient(90deg, rgba(194, 0, 0, .75), rgba(194, 0, 0, .1), transparent);
}

.sub-dc-rg-section-title-line--info {
  background: linear-gradient(90deg, rgba(30, 58, 95, .6), rgba(30, 58, 95, .1), transparent);
}

/* コースリスト */
.sub-dc-rg-course-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* コースカード */
.sub-dc-rg-course-card {
  display: block;
  background: rgba(0, 0, 20, .65);
  border: 1.5px solid rgba(194, 0, 0, .32);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .12s, background .12s;
  animation: subFadeUp .25s ease-out both;
}

.sub-dc-rg-course-card:active {
  border-color: rgba(194, 0, 0, .8);
  background: rgba(194, 0, 0, .1);
}

.sub-dc-rg-course-card--registered {
  border-color: rgba(255, 255, 255, .1);
  opacity: .6;
  position: relative;
  pointer-events: none;
}

/* カードヘッダー */
.sub-dc-rg-course-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  background: linear-gradient(135deg, rgba(194, 0, 0, .38), rgba(100, 0, 0, .22));
  border-bottom: 1px solid rgba(194, 0, 0, .2);
}

.sub-dc-rg-course-point-label {
  font-size: 10px;
  color: rgba(255, 120, 120, .85);
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 3px;
  text-transform: uppercase;
}

.sub-dc-rg-course-point {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.sub-dc-rg-course-point span {
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  font-weight: 700;
  margin-left: 3px;
}

.sub-dc-rg-course-arrow {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c20000;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(194, 0, 0, .6);
  flex-shrink: 0;
}

.sub-dc-rg-course-arrow--check {
  background: #888;
  box-shadow: none;
}

/* カードボディ */
.sub-dc-rg-course-card-body {
  padding: 12px 16px 14px;
}

.sub-dc-rg-course-card-body--done {
  background: rgba(255, 255, 255, .02);
}

/* 価格 */
.sub-dc-rg-price-free {
  display: inline-block;
  background: linear-gradient(135deg, #c20000, #870000);
  color: #FFD700;
  font-size: 14px;
  font-weight: 900;
  padding: 4px 16px;
  border-radius: 999px;
  margin-bottom: 5px;
  box-shadow: 0 3px 10px rgba(194, 0, 0, .5);
}

.sub-dc-rg-price-main {
  font-size: 22px;
  font-weight: 900;
  color: rgba(255, 255, 255, .9);
}

.sub-dc-rg-price-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, .58);
}

/* カードアクション */
.sub-dc-rg-course-card-action {
  background: linear-gradient(180deg, #c20000, #8a0000);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  padding: 13px 16px;
  text-align: center;
}

.sub-dc-rg-course-card-action--done {
  background: #888;
  color: rgba(255, 255, 255, .55);
}

/* 登録済みバッジ */
.sub-dc-rg-registered-badge {
  position: absolute;
  top: 12px; right: 14px;
  background: rgba(90, 90, 90, .85);
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 999px;
  z-index: 1;
}

/* サービスカード */
.sub-dc-rg-service-card {
  padding: 14px 16px;
  background: rgba(30, 58, 95, .28);
  border: 1.5px solid rgba(30, 58, 95, .45);
  border-radius: 12px;
  margin-bottom: 14px;
}

.sub-dc-rg-service-card-head {
  font-size: 12px;
  font-weight: 700;
  color: rgba(150, 190, 255, .68);
  margin-bottom: 8px;
}

.sub-dc-rg-service-link {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #7ab4ff;
  text-decoration: none;
}

.sub-dc-rg-service-link:active {
  opacity: .7;
}

/* ======================================================
   regist_auone — au かんたん決済 登録ページ
====================================================== */

.sub-au-rg-wrap {
  padding: 0 2px;
}

/* キャリアロゴ */
.sub-au-rg-carrier-wrap {
  text-align: center;
  padding: 20px 0 16px;
}

.sub-au-rg-carrier-logo {
  display: block;
  max-width: 220px;
  width: auto;
  height: auto;
  margin: 0 auto;
  padding: 10px 22px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
  box-sizing: border-box;
}

.sub-au-rg-carrier-logo--sm {
  max-width: 160px;
  padding: 8px 16px;
}

/* ══════════════════════════════════════
   キャンペーンヒーローバナー（au オレンジ版）
   ─ 緊急ダンジョンミッション演出・au カラー ─
══════════════════════════════════════ */
.sub-au-rg-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(230, 110, 0, .88) 0%, transparent 58%),
    radial-gradient(ellipse at 15% 110%, rgba(100, 50, 0, .5) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 110%, rgba(140, 60, 0, .45) 0%, transparent 50%),
    linear-gradient(168deg, #090210 0%, #130818 35%, #1e0c04 65%, #060004 100%);
  border-radius: 18px;
  padding: 22px 20px 18px;
  margin-bottom: 18px;
  text-align: center;
  box-shadow:
    0 0 0 2px rgba(170, 80, 0, .7),
    0 0 0 4px rgba(255, 200, 0, .22),
    0 0 0 5px rgba(60, 20, 0, .6),
    0 14px 52px rgba(150, 60, 0, .7),
    inset 0 0 70px rgba(200, 80, 0, .09);
  animation: auHeroPulse 3s ease-in-out infinite;
}

/* パーティクルトレイル：流れ星コメット（au） */
.sub-au-rg-hero::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 200, 80, .8) 40%,
    transparent 100%
  );
  box-shadow:
    0 0  8px 4px rgba(255, 220,  80, .7),
    -12px  6px 12px rgba(255, 180,  40, .5),
    -26px 13px 18px rgba(255, 140,   0, .3),
    -44px 22px 24px rgba(230, 100,   0, .14),
    -66px 33px 30px rgba(200,  60,   0, .05);
  animation: auCometFly 3.4s cubic-bezier(.25, 0, .72, 1) infinite .4s;
  pointer-events: none;
  z-index: 2;
}

/* 右下大装飾 ★ — CSS Unicode エスケープ */
.sub-au-rg-hero::after {
  content: '\2605';
  position: absolute;
  bottom: -22px; right: -10px;
  font-size: 110px;
  color: rgba(255, 150, 50, .04);
  line-height: 1;
  pointer-events: none;
}

/* コーナールーン装飾 */
.sub-au-rg-hero-corner {
  position: absolute;
  font-size: 13px;
  color: rgba(255, 215, 0, .5);
  pointer-events: none;
  line-height: 1;
  animation: auCornerPulse 2.6s ease-in-out infinite;
}
.sub-au-rg-hero-corner--tl { top: 9px;    left:  12px; animation-delay:  0s; }
.sub-au-rg-hero-corner--tr { top: 9px;    right: 12px; animation-delay: .55s; }
.sub-au-rg-hero-corner--bl { bottom: 9px; left:  12px; animation-delay: 1.1s; }
.sub-au-rg-hero-corner--br { bottom: 9px; right: 12px; animation-delay: 1.65s; }

/* パーティクルトレイル：上昇スパーク（au） */
.sub-au-rg-hero-bg-star {
  position: absolute;
  pointer-events: none;
  line-height: 1;
}

.sub-au-rg-hero-bg-star--1 {
  bottom: 28px; right: 32px;
  font-size: 16px;
  color: rgba(255, 200, 60, .75);
  animation: auSparkTrail 2s ease-in infinite .2s;
}
.sub-au-rg-hero-bg-star--2 {
  bottom: 22px; left: 44px;
  font-size: 11px;
  color: rgba(255, 160, 60, .65);
  animation: auSparkTrail 2.6s ease-in infinite .8s;
}
.sub-au-rg-hero-bg-star--3 {
  bottom: 18px; left: 20px;
  font-size: 8px;
  color: rgba(255, 230, 120, .55);
  animation: auSparkTrail 2.2s ease-in infinite 1.4s;
}

/* ── ミッション宣言バナー（au） ── */
.sub-au-rg-ribbon {
  position: relative;
  display: block;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(160, 110, 0, .2) 8%,
    #b87800 18%, #FFD700 35%, #fff6a0 50%, #FFD700 65%, #c88800 82%,
    rgba(160, 110, 0, .2) 92%,
    transparent 100%
  );
  background-size: 220% auto;
  color: #3a1800;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .28em;
  padding: 7px 0;
  margin: 0 -20px 16px;
  border-top: 1px solid rgba(255, 215, 0, .55);
  border-bottom: 1px solid rgba(255, 215, 0, .55);
  text-shadow: 0 1px 0 rgba(255, 255, 200, .5);
  box-shadow: 0 0 24px rgba(255, 200, 0, .3);
  animation: auRibbonShine 2.4s linear infinite;
}

/* 「期間限定キャンペーン」ラベル */
.sub-au-rg-hero-kind {
  display: block;
  font-size: 11px;
  color: rgba(255, 210, 160, .72);
  letter-spacing: .14em;
  margin-bottom: 14px;
  text-shadow: 0 0 10px rgba(255, 130, 0, .4);
}

/* メインコピー */
.sub-au-rg-hero-free {
  display: block;
  font-size: 20px;
  font-weight: 900;
  color: rgba(255, 240, 220, .95);
  margin-bottom: 6px;
  text-shadow:
    0 0 18px rgba(255, 140, 0, .55),
    0 2px 0 rgba(0, 0, 0, .4);
  line-height: 1.55;
}

.sub-au-rg-hero-free em {
  display: inline-block;
  font-style: normal;
  font-weight: 700;
  font-size: 56px;
  line-height: 1.15;
  vertical-align: middle;
  color: #FFD700;
  text-shadow:
    0 0 18px rgba(255, 240, 0, 1),
    0 0 44px rgba(255, 180, 0, .75),
    0 0 90px rgba(255, 120, 0, .45),
    0 5px 0 rgba(90, 40, 0, .85);
  animation: auFreeBounce 1.9s ease-in-out infinite;
}

/* 「通常 ¥X → 0円」 */
.sub-au-rg-hero-note {
  display: block;
  font-size: 13px;
  color: rgba(255, 215, 180, .72);
  margin-top: 10px;
  letter-spacing: .02em;
}

.sub-au-rg-hero-note s {
  color: rgba(255, 255, 255, .32);
  font-size: 12px;
}

.sub-au-rg-hero-note b {
  color: #FFD700;
  font-size: 19px;
  font-weight: 900;
  text-shadow:
    0 0 18px rgba(255, 210, 0, .9),
    0 0 45px rgba(255, 160, 0, .5);
}

/* アニメーション（au 専用名前空間） */
@keyframes auHeroPulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(170, 80, 0, .7),
      0 0 0 4px rgba(255, 200, 0, .22),
      0 0 0 5px rgba(60, 20, 0, .6),
      0 14px 52px rgba(150, 60, 0, .7),
      inset 0 0 70px rgba(200, 80, 0, .09);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(210, 110, 0, .85),
      0 0 0 5px rgba(255, 210, 0, .35),
      0 0 0 9px rgba(255, 200, 0, .07),
      0 0 0 10px rgba(50, 15, 0, .55),
      0 18px 75px rgba(180, 80, 0, .9),
      0 0 120px rgba(255, 100, 0, .1),
      inset 0 0 90px rgba(200, 80, 0, .13);
  }
}

@keyframes auCometFly {
  0%   { top:  8%; left:  -4%; opacity: 0; transform: scale(0); }
  6%   {           opacity: 1; transform: scale(1); }
  88%  {           opacity: 0.65; transform: scale(0.7); }
  100% { top: 88%; left: 106%; opacity: 0; transform: scale(0.15); }
}

@keyframes auRibbonShine {
  0%   { background-position: 220% center; }
  100% { background-position: 0%   center; }
}

@keyframes auFreeBounce {
  0%, 100% { transform: scale(1) translateY(0); filter: brightness(1); }
  42%       { transform: scale(1.07) translateY(-7px); filter: brightness(1.25); }
  62%       { transform: scale(1.03) translateY(-3px); filter: brightness(1.1); }
}

@keyframes auSparkTrail {
  0%   { transform: translateY(0)    scale(0)   rotate(  0deg); opacity: 0; }
  10%  { transform: translateY(-8px)  scale(1.4) rotate( 28deg); opacity: 1; }
  50%  { transform: translateY(-28px) scale(1)   rotate( 82deg); opacity: 0.6; }
  100% { transform: translateY(-60px) scale(0)   rotate(165deg); opacity: 0; }
}

@keyframes auCornerPulse {
  0%, 100% { opacity: .45; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.3); }
}

/* 登録ボタン */
.sub-au-rg-btn-wrap {
  margin: 0 0 18px;
}

.sub-au-rg-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  background: linear-gradient(180deg, #ffe840 0%, #ffb700 55%, #ff8c00 100%);
  color: #5a2800;
  text-decoration: none;
  border: 2.5px solid #cc6a00;
  border-bottom: 7px solid #8a4000;
  border-radius: 16px;
  box-shadow: 0 7px 0 #4a1c00, 0 10px 28px rgba(255, 130, 0, .45), inset 0 1px 0 rgba(255,255,255,.5);
  box-sizing: border-box;
  transition: transform .08s, box-shadow .08s, border-bottom-width .08s;
}

.sub-au-rg-btn-logo-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.sub-au-rg-btn-logo {
  display: block;
  height: 32px;
  width: auto;
}

.sub-au-rg-btn-label {
  flex: 1;
  text-align: center;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .07em;
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
}

.sub-au-rg-btn:active {
  border-bottom-width: 2.5px;
  box-shadow: 0 2px 0 #4a1c00;
  transform: translateY(5px);
}

.sub-au-rg-btn--registered {
  background: linear-gradient(180deg, #ddd, #bbb);
  color: #888;
  border-color: #aaa;
  border-bottom-color: #888;
  box-shadow: 0 4px 0 #777;
  font-size: 15px;
  padding: 15px 20px;
  cursor: default;
  pointer-events: none;
}

/* サイト説明（通常コース） */
.sub-au-rg-desc-text {
  padding: 13px 14px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, .82);
  background: rgba(0, 0, 20, .5);
  border-left: 3px solid rgba(232, 111, 0, .75);
  border-radius: 0 10px 10px 0;
  margin-bottom: 12px;
  line-height: 1.6;
}

/* インフォフレーム */
.sub-au-rg-info-frame {
  padding: 14px 14px;
  background: rgba(0, 0, 20, .55);
  border: 1.5px solid rgba(232, 111, 0, .28);
  border-radius: 14px;
  margin-bottom: 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, .68);
  line-height: 1.7;
}

.sub-au-rg-info-frame p {
  margin: 0 0 8px;
}

.sub-au-rg-info-notice {
  background: rgba(232, 111, 0, .14);
  border: 1px solid rgba(232, 111, 0, .3);
  border-radius: 9px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 11px;
  color: rgba(255, 225, 180, .82);
  line-height: 1.65;
}

.sub-au-rg-trial-note {
  font-size: 11px;
  color: rgba(255, 255, 255, .42);
  line-height: 1.65;
  margin: 0;
}

/* 通知バー（マルチコース） */
.sub-au-rg-notice-bar {
  padding: 12px 14px;
  background: rgba(0, 0, 20, .48);
  border: 1px solid rgba(232, 111, 0, .22);
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
  line-height: 1.7;
}

.sub-au-rg-notice-bar p {
  margin: 0 0 4px;
}

.sub-au-rg-billing-badge {
  display: inline-block;
  background: rgba(232, 111, 0, .22);
  border: 1px solid rgba(232, 111, 0, .38);
  color: #ffbb77;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
}

/* セクションタイトル */
.sub-au-rg-section-title {
  margin-bottom: 12px;
}

.sub-au-rg-section-title-text {
  background: linear-gradient(135deg, #8b3a00, #d06000);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  padding: 11px 16px;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 4px 12px rgba(180, 80, 0, .4);
}

.sub-au-rg-section-title-text--info {
  background: linear-gradient(135deg, #1e3a5f, #18203a);
}

.sub-au-rg-section-title-line {
  height: 3px;
  background: linear-gradient(90deg, rgba(232, 111, 0, .75), rgba(232, 111, 0, .1), transparent);
}

.sub-au-rg-section-title-line--info {
  background: linear-gradient(90deg, rgba(30, 58, 95, .6), rgba(30, 58, 95, .1), transparent);
}

/* コースリスト */
.sub-au-rg-course-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* コースカード */
.sub-au-rg-course-card {
  display: block;
  background: rgba(0, 0, 20, .65);
  border: 1.5px solid rgba(232, 111, 0, .32);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .12s, background .12s;
  animation: subFadeUp .25s ease-out both;
}

.sub-au-rg-course-card:active {
  border-color: rgba(232, 111, 0, .8);
  background: rgba(232, 111, 0, .1);
}

.sub-au-rg-course-card--registered {
  border-color: rgba(255, 255, 255, .1);
  opacity: .6;
  position: relative;
  pointer-events: none;
}

/* カードヘッダー */
.sub-au-rg-course-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  background: linear-gradient(135deg, rgba(232, 111, 0, .35), rgba(140, 60, 0, .2));
  border-bottom: 1px solid rgba(232, 111, 0, .2);
}

.sub-au-rg-course-point-label {
  font-size: 10px;
  color: rgba(255, 180, 100, .9);
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 3px;
}

.sub-au-rg-course-point {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.sub-au-rg-course-point span {
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  font-weight: 700;
  margin-left: 3px;
}

.sub-au-rg-course-arrow {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d06000;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(180, 80, 0, .6);
  flex-shrink: 0;
}

.sub-au-rg-course-arrow--check {
  background: #888;
  box-shadow: none;
}

/* カードボディ */
.sub-au-rg-course-card-body {
  padding: 12px 16px 14px;
}

.sub-au-rg-course-card-body--done {
  background: rgba(255, 255, 255, .02);
}

/* 価格 */
.sub-au-rg-price-free {
  display: inline-block;
  background: linear-gradient(135deg, #d06000, #8b3a00);
  color: #FFD700;
  font-size: 14px;
  font-weight: 900;
  padding: 4px 16px;
  border-radius: 999px;
  margin-bottom: 5px;
  box-shadow: 0 3px 10px rgba(180, 80, 0, .5);
}

.sub-au-rg-price-main {
  font-size: 22px;
  font-weight: 900;
  color: rgba(255, 255, 255, .9);
}

.sub-au-rg-price-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, .58);
}

/* カードアクション */
.sub-au-rg-course-card-action {
  background: linear-gradient(180deg, #d06000, #8b3a00);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  padding: 13px 16px;
  text-align: center;
}

.sub-au-rg-course-card-action--done {
  background: #888;
  color: rgba(255, 255, 255, .55);
}

/* 登録済みバッジ */
.sub-au-rg-registered-badge {
  position: absolute;
  top: 12px; right: 14px;
  background: rgba(90, 90, 90, .85);
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 999px;
  z-index: 1;
}

/* サービスカード */
.sub-au-rg-service-card {
  padding: 14px 16px;
  background: rgba(30, 58, 95, .28);
  border: 1.5px solid rgba(30, 58, 95, .45);
  border-radius: 12px;
  margin-bottom: 14px;
}

.sub-au-rg-service-card-head {
  font-size: 12px;
  font-weight: 700;
  color: rgba(150, 190, 255, .68);
  margin-bottom: 8px;
}

.sub-au-rg-service-link {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #7ab4ff;
  text-decoration: none;
}

.sub-au-rg-service-link:active {
  opacity: .7;
}

/* ======================================================
   regist_mysoftbank — SoftBank 登録ページ
====================================================== */

/* 課金注記テキスト（赤） */
.sub-regist-billing-note {
  color: #cc2200 !important;
  font-weight: 700;
  margin-top: 6px;
}

/* SoftBank 用コース登録リスト（色アクセント上書き） */
.sub-regist-course-list--sb li.list_3_2 a {
  border-left: 4px solid #1a7fd4;
}

.sub-regist-course-list--sb li.list_3_2 a:active {
  background: rgba(26, 127, 212, .1);
}

.sub-regist-course-list--sb .sub-regist-cta-label {
  color: #1a7fd4;
}

.sub-regist-course-list--sb .sub-regist-done-badge {
  background: rgba(26, 127, 212, .15);
  color: #1a7fd4;
}

/* SoftBank 案内セクション */
.sub-sb-info-section {
  margin: 4px 0 14px;
  padding: 14px 16px;
  background: rgba(26, 127, 212, .07);
  border: 1.5px solid rgba(26, 127, 212, .25);
  border-radius: 12px;
  animation: subFadeUp .25s ease-out both;
}

.sub-sb-info-head {
  font-size: 13px;
  font-weight: 900;
  color: #1a7fd4;
  margin: 0 0 8px;
  letter-spacing: .04em;
}

.sub-sb-info-link {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1a7fd4;
  text-decoration: none;
  padding: 6px 0;
}

.sub-sb-info-link:active {
  opacity: .65;
}

/* ======================================================
   共通ヘッダー（notore_header.html）
====================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: rgba(8, 16, 48, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 200, 0, .18);
  box-shadow: 0 2px 20px rgba(0, 0, 0, .35);
}

.logo {
  margin: 0;
  line-height: 1;
}

.logo-img {
  display: block;
  height: 42px;
  width: auto;
  object-fit: contain;
}

.header-nav {
  display: flex;
  align-items: center;
}

/* ホームに戻るボタン */
.header-btn--home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .05em;
  text-decoration: none;
  background: transparent;
  color: rgba(255, 255, 255, .75);
  border: 1.5px solid rgba(255, 255, 255, .25);
  transition: opacity .1s, background .1s, color .1s;
}

.header-btn--home:active {
  opacity: .6;
  background: rgba(255, 255, 255, .06);
  color: #ffd200;
}

/* ======================================================
   共通フッター（notore_footer.html）
====================================================== */
.footer {
  padding: 0;
  background: #040e28;
}

.ft-body {
  padding: 32px 20px 0;
}

.ft-brand {
  text-align: center;
  margin-bottom: 24px;
}

.ft-logo-img {
  height: 52px;
  width: auto;
  opacity: .9;
  display: block;
  margin: 0 auto 8px;
}

.ft-tagline {
  font-size: 11px;
  color: rgba(255, 255, 255, .4);
  letter-spacing: .08em;
}

.ft-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 200, 0, .3) 30%, rgba(255, 200, 0, .3) 70%, transparent);
  margin: 0 0 20px;
}

.ft-nav {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.ft-nav li a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, .65);
  text-decoration: none;
  border-radius: 8px;
  transition: background .12s, color .12s;
}

.ft-nav li a::before {
  content: "\203A ";
  color: rgba(255, 200, 0, .6);
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}

.ft-nav li a:active {
  background: rgba(255, 255, 255, .07);
  color: #ffd200;
}

.ft-copy {
  text-align: center;
  padding: 16px 20px 40px;
  font-size: 11px;
  color: rgba(255, 255, 255, .3);
  letter-spacing: .06em;
  border-top: 1px solid rgba(255, 255, 255, .06);
}