/* ════════════════════════════════════════════════════════
   qm-sub.css — QuizMaster サブページ共通スタイル
   qm-style.css を継承して使用する
   ════════════════════════════════════════════════════════ */

/* UA デフォルト余白リセット */
body {
  margin: 0;
  padding: 0;
}

/* CSS変数フォールバック（qm-style.css 未読み込み時の保険） */
:root {
  --yellow: #FFE500;
  --muted:  #555;
}


/* ══════════════════════════════════════
   タイトルコマ
   黒背景＋ハーフトーン網点＋斜め下端カット
   斜め量 22px、上下パディングは視覚的均等に調整
══════════════════════════════════════ */
.qm-sp-title-koma {
  margin: 0 6px;
  background: #111;
  position: relative;
  overflow: hidden;
  /* 上16px / 下28px（斜め平均11px分を加算して視覚的に均等） */
  padding: 16px 20px 28px;
  text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 0 100%);
}

/* ドット網点 */
.qm-sp-title-koma::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,229,0,.09) 1.5px, transparent 1.5px);
  background-size: 15px 15px;
  pointer-events: none;
  z-index: 0;
}

/* 中央スポットライト */
.qm-sp-title-koma::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(255,229,0,.10) 0%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}

.qm-sp-title-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* コマ番号風ウォーターマーク */
.qm-sp-title-watermark {
  position: absolute;
  bottom: 8px;
  right: 14px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .22em;
  color: rgba(255,229,0,.18);
  z-index: 0;
  pointer-events: none;
}

/* キッカーバッジ（qm-style.css の .qm-kicker を上書きせず独自定義） */
.qm-sp-kicker {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: #FFE500;
  color: #000;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  border: 2px solid #fff;
}

.qm-sp-h1 {
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.1;
  text-shadow:
    4px 4px 0 rgba(255,229,0,.35),
    -1px -1px 0 rgba(0,0,0,.6);
}

/* タイトル下デコライン */
.qm-sp-title-rule {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,229,0,.5);
  font-size: 11px;
  line-height: 1;
}


/* ══════════════════════════════════════
   コンテンツコマ
   上端をタイトルコマ下端（右落ち 22px）と噛み合わせる
   インデックスの qm-frame + qm-frame 連結と同じ仕組み
══════════════════════════════════════ */
.qm-sp-content-koma {
  margin: 0 6px;
  background: #000;
  overflow: hidden;
  clip-path: polygon(0 22px, 100% 0, 100% 100%, 0 100%);
}

/* margin: 4px で黒ガターをボーダー幅として表現
   内側も同じ斜めに合わせて4px均等ボーダーを実現 */
.qm-sp-content-inner {
  margin: 4px;
  background: #faf8f4;
  padding: 34px 18px 36px;
  clip-path: polygon(0 26px, 100% 4px, 100% 100%, 0 100%);
}


/* ══════════════════════════════════════
   コンテンツ内 汎用パーツ
══════════════════════════════════════ */

/* partial{notice} 出力エリア */
.qm-sp-notice-wrap {
  margin-bottom: 6px;
}

/* ── 注意パネル（切り角コマ枠スタイル）──
   左ボーダーフレームは使わない
   右上コーナーカット＋黄色オフセットシャドウで差別化
── */
.qm-sp-caution-panel {
  border: 3px solid #000;
  box-shadow: 5px 5px 0 #FFE500;
  overflow: hidden;
  clip-path: polygon(
    0 0,
    calc(100% - 22px) 0,
    100% 22px,
    100% 100%,
    0 100%
  );
}

/* パネルヘッダー（黒帯） */
.qm-sp-caution-head {
  background: #000;
  color: #FFE500;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  border-bottom: 2.5px solid #000;
}

/* !バッジ */
.qm-sp-caution-badge {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: #FFE500;
  color: #000;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  border: 2px solid #FFE500;
  flex-shrink: 0;
}

.qm-sp-caution-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
}

/* パネル本文 */
.qm-sp-caution-body {
  background: #fff;
  /* 右上の切り角分の余白を右側に追加 */
  padding: 18px 30px 18px 14px;
}

.qm-sp-caution-body p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 2.0;
  color: #111;
}


/* ══════════════════════════════════════
   Homeへ戻るボタン
   黒背景＋黄テキスト＋黄枠（逆コマボタン）
   色値は直書きで CSS変数に依存しない
══════════════════════════════════════ */
.qm-sp-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  padding: 14px 20px;
  background: #000;
  color: #FFE500;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
  border: 2.5px solid #FFE500;
  box-shadow: 4px 4px 0 #FFE500;
  text-decoration: none;
  transition: transform .1s, box-shadow .1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.qm-sp-back-btn:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}


/* ════════════════════════════════════════════════════════
   退会ページ固有スタイル  (.qm-rt-*)
   ════════════════════════════════════════════════════════ */

/* HR変数など不要な区切り出力を非表示 */
.qm-sp-vars-hidden {
  display: none;
}

/* 旧キャリア絵文字（PUA領域・現代ブラウザで文字化け）を非表示
   エンティティはソースに保持しつつ視覚的に隠す */
.qm-carrier-sym {
  display: none;
}

/* ── 空メール送信CTAパネル ──
   qm-sp-caution-panel と同じ切り角コマ枠スタイル
── */
.qm-rt-cta-panel {
  border: 3px solid #000;
  box-shadow: 5px 5px 0 #FFE500;
  overflow: hidden;
  clip-path: polygon(
    0 0,
    calc(100% - 22px) 0,
    100% 22px,
    100% 100%,
    0 100%
  );
  margin-bottom: 20px;
}

.qm-rt-cta-head {
  background: #000;
  color: #FFE500;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  border-bottom: 2.5px solid #000;
}

.qm-rt-cta-badge {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: #FFE500;
  color: #000;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  border: 2px solid #FFE500;
  flex-shrink: 0;
}

.qm-rt-cta-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
}

.qm-rt-cta-body {
  background: #fff;
  padding: 18px 30px 18px 14px;
}

.qm-rt-cta-lead {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.9;
  color: #111;
}

/* 空メール送信ボタン（黄地・黒枠・4pxオフセット） */
.qm-rt-mail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 20px;
  background: #FFE500;
  color: #000;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .06em;
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
  text-decoration: none;
  transition: transform .1s, box-shadow .1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.qm-rt-mail-btn:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

/* ── キャリア別設定パネル ── */
.qm-rt-carrier-panel {
  border: 2.5px solid #000;
  box-shadow: 3px 3px 0 #000;
  overflow: hidden;
  margin-top: 16px;
}

.qm-rt-carrier-head {
  background: #111;
  color: #FFE500;
  padding: 8px 12px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
}

.qm-rt-carrier-body {
  background: #faf8f4;
  padding: 16px 14px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #333;
  line-height: 1.9;
}

.qm-rt-carrier-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: #000;
  color: #FFE500;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  border: 2px solid #FFE500;
  box-shadow: 3px 3px 0 #FFE500;
  text-decoration: none;
  margin-bottom: 12px;
  transition: transform .1s, box-shadow .1s;
  -webkit-tap-highlight-color: transparent;
}

.qm-rt-carrier-link:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

.qm-rt-carrier-copy {
  margin: 8px 0 4px;
  font-size: 11px;
  font-weight: 700;
  color: #555;
}

.qm-rt-input {
  width: 100%;
  max-width: 200px;
  padding: 8px 10px;
  border: 2px solid #000;
  font-size: 13px;
  font-weight: 700;
  background: #f5f5f5;
  outline: none;
  border-radius: 0;
  box-sizing: border-box;
  font-family: inherit;
}

.qm-rt-input:focus {
  border-color: #FFE500;
  background: #FFFDE6;
  box-shadow: 0 0 0 2px rgba(255,229,0,.3);
}


/* ════════════════════════════════════════════════════════
   登録ページ固有スタイル  (.qm-rg-*)
   ════════════════════════════════════════════════════════ */

/* バナー画像コマ（フルブリード） */
.qm-rg-banner {
  margin: 0 0 16px;
  border: 3px solid #000;
  overflow: hidden;
}

.qm-rg-banner-title {
  background: #000;
  color: #FFE500;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  padding: 6px 12px;
  border-bottom: 2px solid #000;
}

.qm-rg-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* au決済画像 */
.qm-rg-payment-wrap {
  text-align: center;
  margin: 16px 0;
}

.qm-rg-payment-wrap img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/* 登録案内テキストエリア */
.qm-rg-info {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.9;
  color: #111;
  margin-bottom: 4px;
}

.qm-rg-info a {
  color: #000;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 登録CTAパネル（切り角コマ枠） */
.qm-rg-cta-panel {
  border: 3px solid #000;
  box-shadow: 5px 5px 0 #FFE500;
  overflow: hidden;
  clip-path: polygon(
    0 0,
    calc(100% - 22px) 0,
    100% 22px,
    100% 100%,
    0 100%
  );
  margin: 20px 0;
}

.qm-rg-cta-head {
  background: #000;
  color: #FFE500;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  border-bottom: 2.5px solid #000;
}

.qm-rg-cta-badge {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: #FFE500;
  color: #000;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  border: 2px solid #FFE500;
  flex-shrink: 0;
}

.qm-rg-cta-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
}

.qm-rg-cta-body {
  background: #fff;
  padding: 20px 30px 20px 14px;
  text-align: center;
}

/* 価格タグ（▼月額 ▼） */
.qm-rg-price-tag {
  display: inline-block;
  background: #000;
  color: #FFE500;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .06em;
  padding: 8px 18px;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #FFE500;
  margin-bottom: 16px;
}

/* au登録ボタン画像 */
.qm-rg-au-btn {
  display: flex;
  justify-content: center;
}

.qm-rg-au-btn a {
  display: inline-block;
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
  transition: transform .1s, box-shadow .1s;
  -webkit-tap-highlight-color: transparent;
}

.qm-rg-au-btn a:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

.qm-rg-au-btn img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 通信料金リンク */
.qm-rg-comm-link {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
}

.qm-rg-comm-link a {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ════════════════════════════════════════════════════════
   フォームページ共通スタイル  (.qm-form-*)
   ════════════════════════════════════════════════════════ */

/* リードテキスト */
.qm-form-lead {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.9;
  color: #111;
}

/* フォームパネル（切り角コマ枠） */
.qm-form-panel {
  border: 3px solid #000;
  box-shadow: 5px 5px 0 #FFE500;
  overflow: hidden;
  clip-path: polygon(
    0 0,
    calc(100% - 22px) 0,
    100% 22px,
    100% 100%,
    0 100%
  );
}

.qm-form-head {
  background: #000;
  color: #FFE500;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  border-bottom: 2.5px solid #000;
}

.qm-form-badge {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: #FFE500;
  color: #000;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  border: 2px solid #FFE500;
  flex-shrink: 0;
}

.qm-form-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
}

.qm-form-body {
  background: #fff;
  padding: 18px 40px 18px 14px;
}

/* フォーム内 汎用要素 */
.qm-form-body label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 700;
  color: #111;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

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

.qm-form-body textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  border: 2px solid #000;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  background: #f9f9f9;
  outline: none;
  border-radius: 0;
  box-sizing: border-box;
  resize: vertical;
  line-height: 1.7;
}

.qm-form-body textarea:focus {
  border-color: #FFE500;
  background: #FFFDE6;
  box-shadow: 0 0 0 2px rgba(255,229,0,.3);
}

/* 送信ボタン */
.qm-form-submit-wrap {
  margin-top: 16px;
}

.qm-form-body input[type="submit"] {
  display: block;
  width: 100%;
  padding: 14px 20px;
  background: #000;
  color: #FFE500;
  font-size: 14px;
  font-weight: 900;
  font-family: inherit;
  letter-spacing: .1em;
  border: 2.5px solid #FFE500;
  box-shadow: 4px 4px 0 #FFE500;
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.qm-form-body input[type="submit"]:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}


/* ════════════════════════════════════════════════════════
   非会員・登録誘導ページ固有スタイル  (.qm-nm-*)
   ════════════════════════════════════════════════════════ */

/* 案内テキスト */
.qm-nm-info {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.9;
  color: #111;
  margin-bottom: 20px;
}

/* 会員登録CTAボタン（黄地・黒枠・最重要アクション） */
.qm-nm-regist-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  background: #FFE500;
  color: #000;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .06em;
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
  text-decoration: none;
  transition: transform .1s, box-shadow .1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.qm-nm-regist-btn:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

/* 規約・プライバシーリンク */
.qm-nm-legal {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.qm-nm-legal a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #faf8f4;
  border: 1.5px solid #000;
  font-size: 12px;
  font-weight: 700;
  color: #000;
  text-decoration: none;
  margin-top: -1.5px;
}

.qm-nm-legal a::before {
  content: "\25A0";
  color: #FFE500;
  font-size: 10px;
  flex-shrink: 0;
}

.qm-nm-legal a:active {
  background: #FFE500;
}


/* ════════════════════════════════════════════════════════
   退会確認ページ固有スタイル  (.qm-confirm-*)
   ════════════════════════════════════════════════════════ */

/* 確認メッセージ */
.qm-confirm-msg {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.9;
  color: #111;
  margin-bottom: 20px;
}

/* 2択ボタンエリア */
.qm-confirm-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0;
}

/* ── 「退会しない」ボタン（推奨・黄地） ── */
.qm-confirm-stay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  background: #FFE500;
  color: #000;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .04em;
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
  text-decoration: none;
  transition: transform .1s, box-shadow .1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.qm-confirm-stay-btn:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

/* ── 「退会する」ボタン（警告・黒地） ── */
.qm-confirm-go-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  background: #000;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  border: 2.5px solid #000;
  box-shadow: 3px 3px 0 #555;
  text-decoration: none;
  transition: transform .1s, box-shadow .1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.qm-confirm-go-btn:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}


/* ════════════════════════════════════════════════════════
   特定商取引ページ固有スタイル  (.qm-toku-*)
   ════════════════════════════════════════════════════════ */

/* イントロテキスト */
.qm-toku-intro {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.8;
  color: #555;
  padding: 10px 12px;
  background: #f0ede8;
  border: 1.5px solid #000;
}

/* セクション群ラッパー */
.qm-toku-sections {
  display: flex;
  flex-direction: column;
}

/* 各セクション（重なり枠でリスト感） */
.qm-toku-section {
  border: 2px solid #000;
  margin-top: -2px;
  overflow: hidden;
}

.qm-toku-section:first-child {
  margin-top: 0;
}

/* セクション見出し（黒帯・黄文字） */
.qm-toku-heading {
  background: #000;
  color: #FFE500;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* セクション本文 */
.qm-toku-body {
  background: #fff;
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.9;
  color: #111;
  border-top: 1.5px solid #000;
}

.qm-toku-body p {
  margin: 0 0 6px;
}

.qm-toku-body p:last-child {
  margin-bottom: 0;
}

/* 会社情報テーブル */
.qm-toku-company {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.qm-toku-company-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dotted #ddd;
  align-items: flex-start;
}

.qm-toku-company-row:last-child {
  border-bottom: none;
}

.qm-toku-company-key {
  font-size: 10px;
  font-weight: 900;
  color: #555;
  letter-spacing: .04em;
  padding-top: 2px;
  flex-shrink: 0;
}

.qm-toku-company-val {
  font-size: 12px;
  font-weight: 700;
  color: #111;
  word-break: break-all;
}

.qm-toku-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #ddd;
  font-size: 11px;
  font-weight: 700;
  color: #555;
}


/* ════════════════════════════════════════════════════════
   お問い合わせ完了ページ固有スタイル  (.qm-thanks-*)
   ════════════════════════════════════════════════════════ */

/* grtag 出力ラッパー */
.qm-thanks-note-wrap {
  padding: 12px 14px;
  background: #f8f5ee;
  border: 1.5px solid #000;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.9;
  color: #333;
  margin-bottom: 16px;
}

/* 送信完了バナー */
.qm-thanks-sent {
  background: #FFE500;
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
  padding: 14px 16px;
  text-align: center;
  margin-bottom: 20px;
}

.qm-thanks-sent-kicker {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #000;
  margin-bottom: 6px;
}

.qm-thanks-sent-text {
  font-size: 16px;
  font-weight: 900;
  color: #000;
}

/* 情報パネル共通 */
.qm-thanks-panel {
  border: 2px solid #000;
  overflow: hidden;
  margin-bottom: 14px;
}

.qm-thanks-panel-head {
  background: #000;
  color: #FFE500;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
}

.qm-thanks-panel-body {
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.9;
  color: #111;
  background: #fff;
  border-top: 1.5px solid #000;
}

/* datebox（newdate.js が注入）*/
.qm-thanks-datebox {
  font-weight: 900;
  color: #000;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* チェックリスト */
.qm-thanks-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.qm-thanks-checklist li {
  padding: 7px 0 7px 22px;
  position: relative;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  color: #111;
  border-bottom: 1px dotted #ccc;
}

.qm-thanks-checklist li:last-child {
  border-bottom: none;
}

.qm-thanks-checklist li::before {
  content: "\25B8";
  position: absolute;
  left: 2px;
  top: 7px;
  font-weight: 900;
  color: #000;
}

/* チェックリスト下の補足文 */
.qm-thanks-check-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1.5px solid #000;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.8;
  color: #444;
}


/* ════════════════════════════════════════════════════════
   お問い合わせページ固有スタイル  (.qm-contact-*)
   ════════════════════════════════════════════════════════ */

/* iframe ボーダーリセット */
.qm-sp-content-koma iframe {
  border: none;
  display: block;
}

/* 方法選択パネル */
.qm-contact-method-panel {
  border: 2px solid #000;
  overflow: hidden;
  margin-bottom: 16px;
}

.qm-contact-method-head {
  background: #000;
  color: #FFE500;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
}

.qm-contact-method-body {
  background: #fff;
  padding: 14px;
  border-top: 1.5px solid #000;
}

/* セレクトボックス */
.qm-contact-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 900;
  color: #000;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 2px solid #000;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
  box-shadow: 3px 3px 0 #000;
}

.qm-contact-select:focus {
  background-color: #FFE500;
}

/* 電話問い合わせパネル */
.qm-contact-tell-panel {
  border: 2px solid #000;
  overflow: hidden;
  margin-bottom: 16px;
}

.qm-contact-tell-warning {
  background: #111;
  color: #fff;
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.9;
  border-bottom: 1.5px solid #000;
}

/* .info_tell 置き換え：黄色アンダーライン風 */
.qm-contact-highlight {
  background: linear-gradient(transparent 55%, #FFE500 55%);
  color: #fff;
  font-weight: 900;
  padding: 0 2px;
}

/* チェックボックス群 */
.qm-contact-checks {
  background: #f8f5ee;
  padding: 12px 14px;
  border-bottom: 1.5px solid #000;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qm-contact-check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #111;
  cursor: pointer;
  user-select: none;
}

.qm-contact-check-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  accent-color: #000;
  flex-shrink: 0;
  cursor: pointer;
}

/* 電話ボタン (.icon_arrow は JS が show/hide) */
.icon_arrow {
  padding: 16px 14px;
  background: #fff;
  text-align: center;
}

.qm-contact-tel-btn {
  display: inline-block;
  background: #FFE500;
  color: #000;
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .06em;
  text-decoration: none;
}

.qm-contact-tel-btn:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}


/* ════════════════════════════════════════════════════════
   QR コードページ固有スタイル  (.qm-qr-*)
   ════════════════════════════════════════════════════════ */

.qm-qr-panel {
  border: 2.5px solid #000;
  box-shadow: 5px 5px 0 #000;
  background: #fff;
  padding: 24px 16px 20px;
  text-align: center;
  margin-bottom: 20px;
}

.qm-qr-site-name {
  font-size: 13px;
  font-weight: 900;
  color: #000;
  letter-spacing: .06em;
  margin: 0 0 16px;
}

.qm-qr-img-wrap {
  display: inline-block;
  border: 3px solid #000;
  padding: 10px;
  background: #fff;
  box-shadow: 3px 3px 0 #000;
  margin-bottom: 16px;
  line-height: 0;
}

.qm-qr-img-wrap img {
  display: block;
  width: 180px;
  height: auto;
}

.qm-qr-url {
  font-size: 11px;
  font-weight: 700;
  color: #555;
  word-break: break-all;
  letter-spacing: .04em;
  margin: 0;
}


/* ════════════════════════════════════════════════════════
   FAQ ページ固有スタイル  (.qm-faq-*)
   ════════════════════════════════════════════════════════ */

.qm-faq-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.qm-faq-item {
  border: 2px solid #000;
  margin-top: -2px;
  overflow: hidden;
}

.qm-faq-item:first-child {
  margin-top: 0;
}

/* Q 行（黒帯・黄文字） */
.qm-faq-q {
  background: #000;
  color: #FFE500;
  padding: 9px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.qm-faq-q-badge {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: #FFE500;
  color: #000;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.qm-faq-q-text {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.55;
  padding-top: 2px;
}

/* A 行（白地） */
.qm-faq-a {
  background: #fff;
  border-top: 1.5px solid #000;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.qm-faq-a-badge {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: #FFE500;
  color: #000;
  font-size: 12px;
  font-weight: 900;
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.qm-faq-a-text {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.9;
  color: #111;
  flex: 1;
  min-width: 0;
}

/* 回答内箇条書き */
.qm-faq-a-text ul,
.qm-faq-a-text ol {
  padding: 4px 0 0 20px;
  margin: 6px 0 0;
}

.qm-faq-a-text ul {
  list-style: none;
  padding-left: 0;
}

.qm-faq-a-text ul li {
  padding-left: 16px;
  position: relative;
}

.qm-faq-a-text ul li::before {
  content: "\25B8";
  position: absolute;
  left: 0;
  font-weight: 900;
}

.qm-faq-a-text ol {
  list-style: decimal;
}

.qm-faq-a-text ol li {
  padding-left: 4px;
}

/* ※注記 */
.qm-faq-note {
  display: block;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dotted #ccc;
  font-size: 11px;
  color: #555;
}

/* rep_s.js 注入要素 */
.qm-faq-box {
  margin-top: 6px;
}


/* ════════════════════════════════════════════════════════
   プライバシーポリシーページ固有スタイル  (.qm-priv-*)
   ════════════════════════════════════════════════════════ */

/* 基本方針（1〜7 条）番号付きリスト */
.qm-priv-principles {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: priv-counter;
}

.qm-priv-principles li {
  counter-increment: priv-counter;
  padding: 8px 0 8px 28px;
  position: relative;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.9;
  color: #111;
  border-bottom: 1px dotted #ccc;
}

.qm-priv-principles li:last-child {
  border-bottom: none;
}

.qm-priv-principles li::before {
  content: counter(priv-counter);
  position: absolute;
  left: 0;
  top: 8px;
  width: 20px;
  height: 20px;
  background: #000;
  color: #FFE500;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 利用目的・提供条件の小見出し */
.qm-priv-sub-head {
  display: block;
  font-size: 12px;
  font-weight: 900;
  color: #000;
  background: #f0ede8;
  padding: 6px 10px;
  margin: 12px 0 6px;
  border-bottom: 2px solid #000;
}

.qm-priv-subsection:first-child .qm-priv-sub-head {
  margin-top: 0;
}

/* 小見出し配下の箇条書き */
.qm-priv-sub-list {
  list-style: none;
  padding: 0;
  margin: 0 0 4px;
}

.qm-priv-sub-list li {
  padding: 4px 0 4px 18px;
  position: relative;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.75;
  color: #111;
  border-bottom: 1px dotted #eee;
}

.qm-priv-sub-list li:last-child {
  border-bottom: none;
}

.qm-priv-sub-list li::before {
  content: "\25B8";
  position: absolute;
  left: 2px;
  font-weight: 900;
}

/* 第三者提供の条件番号リスト */
.qm-priv-numbered {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  counter-reset: priv-num;
}

.qm-priv-numbered li {
  counter-increment: priv-num;
  padding: 6px 0 6px 22px;
  position: relative;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.85;
  color: #111;
  border-bottom: 1px dotted #ccc;
}

.qm-priv-numbered li:last-child {
  border-bottom: none;
}

.qm-priv-numbered li::before {
  content: counter(priv-num);
  position: absolute;
  left: 0;
  font-weight: 900;
  color: #000;
}

/* 補足テキスト */
.qm-priv-note {
  display: block;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dotted #ccc;
  font-size: 11px;
  font-weight: 700;
  color: #555;
  line-height: 1.8;
}


/* ════════════════════════════════════════════════════════
   メンテナンスページ固有スタイル  (.qm-maint-*)
   ════════════════════════════════════════════════════════ */

.qm-maint-msg {
  border: 2.5px solid #000;
  box-shadow: 5px 5px 0 #000;
  background: #fff;
  padding: 28px 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 2.4;
  color: #111;
}

.qm-maint-msg p {
  margin: 0;
}


/* ════════════════════════════════════════════════════════
   利用規約ページ固有スタイル  (.qm-kiyaku-*)
   ════════════════════════════════════════════════════════ */

/* 条文番号付きリスト (1. 2. 3. ...) */
.qm-kiyaku-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: kiyaku-item;
}

.qm-kiyaku-list > li {
  counter-increment: kiyaku-item;
  padding: 7px 0 7px 22px;
  position: relative;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.9;
  color: #111;
  border-bottom: 1px dotted #ccc;
}

.qm-kiyaku-list > li:last-child {
  border-bottom: none;
}

.qm-kiyaku-list > li::before {
  content: counter(kiyaku-item) ".";
  position: absolute;
  left: 0;
  font-weight: 900;
  color: #000;
}

/* (1)(2)(3) サブ番号リスト */
.qm-kiyaku-sub {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  counter-reset: kiyaku-sub;
}

.qm-kiyaku-sub li {
  counter-increment: kiyaku-sub;
  padding: 4px 0 4px 26px;
  position: relative;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.75;
  color: #333;
  border-bottom: 1px dotted #eee;
}

.qm-kiyaku-sub li:last-child {
  border-bottom: none;
}

.qm-kiyaku-sub li::before {
  content: "(" counter(kiyaku-sub) ")";
  position: absolute;
  left: 0;
  font-weight: 900;
  font-size: 10px;
}

/* 販売価格エリア（box1〜4 ラッパー） */
.qm-kiyaku-price {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1.5px solid #000;
}

.qm-kiyaku-price-label {
  font-size: 12px;
  font-weight: 900;
  color: #000;
  margin: 0 0 4px;
}


/* ════════════════════════════════════════════════════════
   ご利用ガイドページ固有スタイル  (.qm-guide-*)
   ════════════════════════════════════════════════════════ */

/* キャリアブロック群 */
.qm-guide-carrier-wrap {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qm-guide-carrier {
  border: 2px solid #000;
  overflow: hidden;
}

.qm-guide-carrier-head {
  background: #111;
  color: #FFE500;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  border-bottom: 1.5px solid #000;
}

.qm-guide-course-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px dotted #ccc;
  align-items: center;
}

.qm-guide-course-row:last-child {
  border-bottom: none;
}

.qm-guide-course-name {
  font-size: 12px;
  font-weight: 700;
  color: #111;
}

.qm-guide-course-price {
  font-size: 12px;
  font-weight: 900;
  color: #000;
  white-space: nowrap;
}

/* ※ノートリスト */
.qm-guide-notes {
  list-style: none;
  padding: 0;
  margin: 0;
}

.qm-guide-notes li {
  padding: 7px 0 7px 20px;
  position: relative;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.85;
  color: #333;
  border-bottom: 1px dotted #ccc;
}

.qm-guide-notes li:last-child {
  border-bottom: none;
}

.qm-guide-notes li::before {
  content: "\203B";
  position: absolute;
  left: 0;
  font-weight: 900;
  color: #000;
}


/* ════════════════════════════════════════════════════════
   退会サンクスページ固有スタイル  (.qm-tnk-*)
   ════════════════════════════════════════════════════════ */

/* サンクスバナー */
.qm-tnk-thanks {
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
  background: #FFE500;
  padding: 20px 16px;
  text-align: center;
  margin-bottom: 16px;
}

.qm-tnk-thanks-main {
  font-size: 14px;
  font-weight: 900;
  line-height: 2.2;
  color: #000;
  margin: 0 0 10px;
}

.qm-tnk-thanks-sub {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.9;
  color: #222;
  margin: 0;
}

/* TOPへ戻るボタンラッパー */
.qm-tnk-btn-wrap {
  text-align: center;
  margin-bottom: 16px;
}

/* 広告エリア */
.qm-tnk-ad-wrap {
  text-align: center;
  margin: 16px 0;
}

/* コンパクト FAQ（ご確認ください） */
.qm-tnk-faq-body {
  padding: 0 !important;
  border-top: none !important;
}

.qm-tnk-faq-item {
  border-bottom: 1px dotted #ccc;
}

.qm-tnk-faq-item:last-child {
  border-bottom: none;
}

.qm-tnk-faq-q {
  background: #f0ede8;
  padding: 7px 14px 7px 30px;
  font-size: 12px;
  font-weight: 900;
  color: #000;
  border-bottom: 1px solid #ddd;
  position: relative;
}

.qm-tnk-faq-q::before {
  content: "\25B8";
  position: absolute;
  left: 12px;
  font-weight: 900;
}

.qm-tnk-faq-a {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.9;
  color: #111;
  background: #fff;
}

.qm-tnk-faq-note {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #555;
}

/* 退会ボタンエリア（FAQ最終アイテム） */
.qm-tnk-retire-area {
  padding: 14px;
  background: #fff;
  text-align: center;
}


/* ════════════════════════════════════════════════════════
   退会アンケート完了ページ固有スタイル  (.qm-tai-*)
   ════════════════════════════════════════════════════════ */

/* 退会警告バナー */
.qm-tai-warn {
  border: 2.5px solid #000;
  background: #111;
  color: #fff;
  padding: 16px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.9;
  margin-bottom: 16px;
}

/* キャリア確認パネル見出し */
.qm-tai-check-label {
  display: block;
  font-size: 13px;
  font-weight: 900;
  color: #000;
  text-align: center;
  padding: 10px 0 8px;
  letter-spacing: .06em;
}

/* キャリアカード */
.qm-tai-carrier-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.qm-tai-carrier {
  border: 2px solid #000;
  overflow: hidden;
}

.qm-tai-carrier-head {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  border-bottom: 1.5px solid #000;
}

.qm-tai-carrier-head.au    { background: #e86f00; color: #fff; }
.qm-tai-carrier-head.docomo  { background: #c20000; color: #fff; }
.qm-tai-carrier-head.softbank { background: #333;   color: #FFE500; }

.qm-tai-carrier-body {
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 700;
  line-height: 2;
  color: #111;
  background: #fff;
}

/* 退会ボタンラッパー */
.qm-tai-retire-wrap {
  text-align: center;
  margin-bottom: 16px;
}

/* copyright フッター（tai04day 等） */
.qm-day-footer {
  text-align: center;
  padding: 16px;
  font-size: 10px;
  font-weight: 700;
  color: #555;
  border-top: 2px solid #000;
  margin-top: 0;
}


/* ════════════════════════════════════════════════════════
   退会確認画面固有スタイル  (.qm-order-*)
   ════════════════════════════════════════════════════════ */

/* 確認イントロ */
.qm-order-intro {
  font-size: 12px;
  font-weight: 700;
  color: #555;
  line-height: 1.9;
  padding: 12px 14px;
  background: #f8f5ee;
  border: 1.5px solid #000;
  margin-bottom: 16px;
}

/* 解約内容パネル */
.qm-order-panel {
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
  overflow: hidden;
  margin-bottom: 20px;
}

.qm-order-head {
  background: #000;
  color: #FFE500;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  border-bottom: 1.5px solid #000;
}

.qm-order-row {
  display: grid;
  grid-template-columns: 115px 1fr;
  background: #fff;
  border-bottom: 1px dotted #ccc;
}

.qm-order-row:last-child {
  border-bottom: none;
}

.qm-order-key {
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 900;
  color: #000;
  background: #f0ede8;
  border-right: 1.5px solid #ccc;
}

.qm-order-val {
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #111;
}

/* 決定ボタンラッパー */
.qm-order-btn-wrap {
  text-align: center;
  margin-bottom: 20px;
}


/* ════════════════════════════════════════════════════════
   退会アンケートページ固有スタイル  (.qm-survey-*)
   ════════════════════════════════════════════════════════ */

/* アンケート設問フィールド */
.qm-survey-field {
  border: 2px solid #000;
  overflow: hidden;
  margin-bottom: 14px;
}

.qm-survey-field-head {
  background: #000;
  color: #FFE500;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  border-bottom: 1.5px solid #000;
}

.qm-survey-field-body {
  background: #fff;
  padding: 14px;
}

/* セレクトボックス（qm-contact-select 流用） */
.qm-survey-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 900;
  color: #000;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 2px solid #000;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
  box-shadow: 3px 3px 0 #000;
  box-sizing: border-box;
}

.qm-survey-select:focus { background-color: #FFE500; }

/* ラジオボタングループ */
.qm-survey-radios {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qm-survey-radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #111;
  cursor: pointer;
  user-select: none;
}

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

/* テキストエリア */
.qm-survey-textarea {
  width: 100%;
  border: 2px solid #000;
  padding: 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  background: #fff;
}

.qm-survey-textarea:focus {
  border-color: #FFE500;
  background: #fffde7;
}

/* 次へボタンラッパー */
.qm-survey-btn-wrap {
  text-align: center;
  margin-bottom: 16px;
}


/* ════════════════════════════════════════════════════════
   マイページ固有スタイル  (.qm-myp-*)
   ════════════════════════════════════════════════════════ */

/* ポイント表示パネル */
.qm-myp-points-panel {
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
  background: #FFE500;
  padding: 18px 16px;
  text-align: center;
  margin-bottom: 16px;
}

.qm-myp-points-label {
  font-size: 11px;
  font-weight: 900;
  color: #000;
  letter-spacing: .1em;
  margin: 0 0 6px;
}

.qm-myp-points-num {
  font-size: 32px;
  font-weight: 900;
  color: #000;
  letter-spacing: .04em;
}

.qm-myp-points-unit {
  font-size: 14px;
  font-weight: 900;
  color: #000;
}

/* ダウンロード履歴リスト */
.qm-myp-history-list {
  background: #fff;
  border-top: 1.5px solid #000;
}

.qm-myp-not-found {
  text-align: center;
  padding: 20px;
  font-size: 13px;
  font-weight: 700;
  color: #555;
}

.qm-myp-history-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.qm-myp-history-item {
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  color: #111;
  border-bottom: 1px dotted #ccc;
  background: #fff;
}

.qm-myp-history-link:active .qm-myp-history-item {
  background: #fffde7;
}

/* 会員情報 */
.qm-myp-member-info {
  padding: 14px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 2.2;
  text-align: center;
  color: #111;
  border-top: 1.5px solid #000;
}

.qm-myp-member-info p { margin: 0; }

/* ログアウトエリア */
.qm-myp-logout-wrap {
  padding: 16px;
  text-align: center;
  background: #fff;
  border-top: 1.5px solid #000;
}


/* ════════════════════════════════════════════════════════
   汎用詳細ページ固有スタイル  (detail_sp / .qm-detail-*)
   ════════════════════════════════════════════════════════ */

/* トップアクションバー */
.qm-detail-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 8px;
}

/* 編集ショートカットリンク */
.qm-detail-edit-link {
  font-size: 12px;
  font-weight: 900;
  color: #000;
  text-decoration: none;
  background: #FFE500;
  border: 2px solid #000;
  padding: 5px 12px;
  white-space: nowrap;
}

/* メッセージ */
.qm-detail-msg {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #555;
  background: #f8f5ee;
  border: 1.5px solid #000;
  margin-bottom: 14px;
}

.qm-detail-msg:empty { display: none; }

/* データテーブル */
table.detail,
table.qm-detail-table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #000;
  margin-bottom: 14px;
}

table.detail tr th,
table.qm-detail-table tr th {
  background: #000;
  color: #FFE500;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 900;
  width: 36%;
  vertical-align: top;
  border-bottom: 1px solid #333;
  text-align: left;
}

table.detail tr td,
table.qm-detail-table tr td {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #111;
  border-bottom: 1px dotted #ccc;
  vertical-align: top;
  background: #fff;
}

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

/* PHP 生成 小見出し（#キー） */
.content_subtitle {
  background: #f0ede8;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 900;
  color: #000;
  border: 2px solid #000;
  margin: 12px 0 0;
}

/* edit / destroy ボタン */
.qm-detail-btn-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.qm-detail-edit-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: #FFE500;
  color: #000;
  border: 2.5px solid #000;
  box-shadow: 3px 3px 0 #000;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}

.qm-detail-destroy-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: #fff;
  color: #000;
  border: 2px solid #000;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}

/* ナビリンクリスト */
.qm-detail-links {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  border: 2px solid #000;
  overflow: hidden;
}

.qm-detail-links li {
  border-bottom: 1px dotted #ccc;
  background: #fff;
}

.qm-detail-links li:last-child { border-bottom: none; }

.qm-detail-links li a {
  display: block;
  padding: 10px 14px 10px 28px;
  font-size: 12px;
  font-weight: 700;
  color: #000;
  text-decoration: none;
  position: relative;
}

.qm-detail-links li a::before {
  content: "\25B8";
  position: absolute;
  left: 10px;
  font-weight: 900;
}


/* ════════════════════════════════════════════════════════
   ジャンル一覧ページ固有スタイル  (.qm-genre-*)
   ════════════════════════════════════════════════════════ */

.qm-genre-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 2px solid #000;
  overflow: hidden;
}

.qm-genre-list li {
  border-bottom: 1px dotted #ccc;
}

.qm-genre-list li:last-child {
  border-bottom: none;
}

.qm-genre-link {
  display: block;
  padding: 13px 14px 13px 30px;
  font-size: 14px;
  font-weight: 900;
  color: #000;
  text-decoration: none;
  background: #fff;
  position: relative;
}

.qm-genre-link::before {
  content: "\25B8";
  position: absolute;
  left: 12px;
  font-weight: 900;
}

.qm-genre-link:active {
  background: #FFE500;
}


/* ════════════════════════════════════════════════════════
   クイズ問題ページ固有スタイル  (.qm-quiz-*)
   ════════════════════════════════════════════════════════ */

/* ポイント表示バー */
.qm-quiz-points-bar {
  background: #111;
  color: #FFE500;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 5px;
}

.qm-quiz-points-num {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .03em;
}

/* テスト情報バー（開発用） */
.qm-quiz-test-info {
  background: #eaf4e0;
  border: 1.5px solid #5a7a3a;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #333;
  margin-bottom: 12px;
  line-height: 1.7;
}

/* 問題パネル */
.qm-quiz-question-panel {
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
  overflow: hidden;
  margin-bottom: 16px;
}

.qm-quiz-question-head {
  background: #000;
  color: #FFE500;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
}

.qm-quiz-question-num {
  padding: 10px 14px 6px;
  font-size: 12px;
  font-weight: 700;
  color: #888;
  background: #fff;
  border-bottom: 1px dotted #ddd;
}

.qm-quiz-question-text {
  padding: 18px 14px 14px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.75;
  color: #111;
  background: #fff;
}

.qm-quiz-title {
  padding: 0 14px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  background: #fff;
  line-height: 1.7;
}

/* 回答ボタン群 */
.qm-quiz-answers {
  display: flex;
  flex-direction: column;
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
  overflow: hidden;
  margin-bottom: 20px;
}

.qm-quiz-answer-btn {
  display: block;
  padding: 16px 14px 16px 42px;
  font-size: 14px;
  font-weight: 900;
  color: #000;
  text-decoration: none;
  background: #fff;
  border-bottom: 1.5px solid #ccc;
  line-height: 1.6;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.qm-quiz-answer-btn:last-child {
  border-bottom: none;
}

.qm-quiz-answer-btn::before {
  content: "\25CB";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 900;
  color: #000;
}

.qm-quiz-answer-btn:active {
  background: #FFE500;
}

/* 前/次ナビゲーション */
.qm-quiz-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

.qm-quiz-nav-btn {
  display: block;
  padding: 13px 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  color: #000;
  text-decoration: none;
  border: 2px solid #000;
  background: #fff;
  box-shadow: 3px 3px 0 #000;
}

.qm-quiz-nav-btn:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

/* パンくずリスト */
.qm-quiz-breadcrumbs {
  font-size: 11px;
  font-weight: 700;
  color: #555;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-bottom: 14px;
  line-height: 1.7;
}

.qm-quiz-breadcrumbs a {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ポイント不足パネル */
.qm-quiz-no-points {
  border: 2.5px solid #000;
  background: #f8f5ee;
  padding: 28px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 2.4;
  color: #111;
  margin-bottom: 16px;
}

.qm-quiz-no-points-num {
  font-size: 24px;
  font-weight: 900;
  color: #000;
}

.qm-quiz-add-points-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 13px 30px;
  background: #FFE500;
  color: #000;
  font-weight: 900;
  border: 2.5px solid #000;
  box-shadow: 3px 3px 0 #000;
  text-decoration: none;
  font-size: 14px;
}


/* ════════════════════════════════════════════════════════
   ダウンロード詳細ページ共通スタイル  (.qm-dl-*)
   ════════════════════════════════════════════════════════ */

/* ダウンロードボタン */
.qm-dl-btn {
  display: inline-block;
  padding: 14px 36px;
  background: #FFE500;
  color: #000;
  font-size: 16px;
  font-weight: 900;
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
  text-decoration: none;
  letter-spacing: .06em;
}

.qm-dl-btn:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

/* 画像フレーム */
.qm-dl-img-frame {
  border: 3px solid #000;
  box-shadow: 5px 5px 0 #000;
  display: inline-block;
  line-height: 0;
  margin: 14px auto;
}

.qm-dl-img-frame img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 投票テキスト・矢印 */
.qm-dl-vote-text {
  font-size: 12px;
  font-weight: 900;
  color: #e00;
  margin-bottom: 4px;
}

.qm-dl-vote-arrows {
  font-size: 14px;
  color: #000;
  letter-spacing: .2em;
  margin-bottom: 8px;
}

/* 消費ポイント表示 */
.qm-dl-point-info {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  margin: 10px 0;
}

/* 確認テキスト */
.qm-dl-confirm-note {
  font-size: 12px;
  font-weight: 700;
  color: #555;
  line-height: 1.85;
  margin-top: 14px;
  padding: 10px 12px;
  background: #f8f5ee;
  border: 1.5px solid #ccc;
}

/* 楽曲情報テーブル */
.qm-dl-music-info {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #000;
  margin-bottom: 14px;
}

.qm-dl-music-info tr th {
  background: #000;
  color: #FFE500;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 900;
  width: 90px;
  vertical-align: top;
  border-bottom: 1px solid #333;
  text-align: left;
}

.qm-dl-music-info tr td {
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 700;
  color: #111;
  background: #fff;
  border-bottom: 1px dotted #ccc;
  vertical-align: top;
}

.qm-dl-music-info tr:last-child th,
.qm-dl-music-info tr:last-child td {
  border-bottom: none;
}

/* ポイント不足（dl 版） */
.qm-dl-no-points {
  border: 2px solid #000;
  background: #f8f5ee;
  padding: 20px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 2.2;
  color: #111;
  margin-bottom: 14px;
}

.qm-dl-no-points a {
  display: inline-block;
  margin-top: 10px;
  padding: 11px 26px;
  background: #FFE500;
  color: #000;
  font-weight: 900;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  text-decoration: none;
}


/* ════════════════════════════════════════════════════════
   クイズ回答結果ページ固有スタイル  (.qm-ans-*)
   ════════════════════════════════════════════════════════ */

/* ── キーフレーム ── */
@keyframes qm-pop {
  0%   { transform: scale(.4) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(2deg); opacity: 1; }
  80%  { transform: scale(.94) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes qm-shake {
  0%, 100% { transform: translateX(0); }
  15%  { transform: translateX(-9px) rotate(-1.5deg); }
  35%  { transform: translateX(9px)  rotate(1.5deg); }
  55%  { transform: translateX(-6px) rotate(-1deg); }
  75%  { transform: translateX(6px)  rotate(1deg); }
  90%  { transform: translateX(-3px); }
}

@keyframes qm-pulse-border {
  0%, 100% { box-shadow: 6px 6px 0 #000; }
  50%       { box-shadow: 8px 8px 0 #000, 0 0 20px rgba(255,229,0,.7); }
}

/* ── 問題振り返りヘッダー ── */
.qm-ans-question-recap {
  background: #f0ede8;
  border: 2px solid #000;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #333;
  line-height: 1.8;
  margin-bottom: 16px;
}

.qm-ans-question-recap-label {
  font-size: 11px;
  font-weight: 900;
  color: #000;
  letter-spacing: .06em;
  display: block;
  margin-bottom: 4px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 4px;
}

.qm-ans-question-text {
  font-size: 13px;
  font-weight: 900;
  color: #111;
  line-height: 1.7;
}

/* ── 正解パネル ── */
.qm-ans-correct-panel {
  background: repeating-conic-gradient(#FFE500 0% 5%, #FFD000 5% 10%);
  border: 4px solid #000;
  box-shadow: 6px 6px 0 #000;
  padding: 30px 16px 24px;
  text-align: center;
  margin-bottom: 16px;
  animation: qm-pulse-border 1.6s ease infinite;
  position: relative;
  overflow: hidden;
}

.qm-ans-correct-kicker {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #000;
  display: block;
  margin-bottom: 10px;
}

.qm-ans-correct-label {
  font-size: 56px;
  font-weight: 900;
  color: #000;
  letter-spacing: .02em;
  line-height: 1;
  display: block;
  animation: qm-pop .65s cubic-bezier(.34,1.56,.64,1) both;
  text-shadow: 4px 4px 0 rgba(0,0,0,.18);
}

.qm-ans-correct-answer {
  display: block;
  margin-top: 16px;
  padding: 12px 16px;
  background: #000;
  color: #FFE500;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.6;
}

/* ── 不正解パネル ── */
.qm-ans-incorrect-panel {
  background: #111;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0, transparent 8px,
    rgba(255,255,255,.04) 8px, rgba(255,255,255,.04) 9px
  );
  border: 4px solid #555;
  box-shadow: 6px 6px 0 #000;
  padding: 30px 16px 24px;
  text-align: center;
  margin-bottom: 16px;
}

.qm-ans-incorrect-kicker {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #888;
  display: block;
  margin-bottom: 10px;
}

.qm-ans-incorrect-label {
  font-size: 44px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  display: block;
  animation: qm-shake .6s ease .1s both;
  text-shadow: 2px 2px 0 rgba(0,0,0,.5);
}

.qm-ans-incorrect-choice {
  display: block;
  margin-top: 14px;
  padding: 10px 14px;
  background: #2a2a2a;
  color: #ccc;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  border: 1.5px solid #555;
}

.qm-ans-back-btn {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 28px;
  background: #FFE500;
  color: #000;
  font-weight: 900;
  border: 2.5px solid #fff;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .04em;
}

.qm-ans-back-btn:active {
  background: #ccc;
}

/* ── 解説パネル ── */
.qm-ans-description {
  border: 2px solid #000;
  overflow: hidden;
  margin-bottom: 16px;
}

.qm-ans-description-head {
  background: #000;
  color: #FFE500;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
}

.qm-ans-description-body {
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.85;
  color: #111;
  background: #fff;
  border-top: 1.5px solid #000;
}


/* ════════════════════════════════════════════════════════
   コンテンツ一覧ページ固有スタイル  (.qm-clist-*)
   ════════════════════════════════════════════════════════ */

/* ジャンル説明文 */
.qm-clist-description {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.85;
  color: #555;
  padding: 10px 14px;
  background: #f8f5ee;
  border: 1.5px solid #000;
  margin-bottom: 14px;
}

/* 一覧見出し */
.qm-clist-heading {
  background: #000;
  color: #FFE500;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  margin-bottom: -2px;
  border: 2px solid #000;
}

/* コンテンツカードリスト */
.qm-clist-ul {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  border: 2px solid #000;
  border-top: none;
  overflow: hidden;
}

.qm-clist-ul li {
  border-bottom: 1px solid #ddd;
}

.qm-clist-ul li:last-child {
  border-bottom: none;
}

/* カードリンク */
.qm-clist-link {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  padding: 12px 14px;
}

.qm-clist-link:active {
  background: #fffde7;
}

/* カード内: メタ情報（ジャンル/難易度/No.） */
.qm-clist-meta {
  font-size: 10px;
  font-weight: 700;
  color: #888;
  letter-spacing: .04em;
  margin-bottom: 5px;
}

/* カード内: 問題テキスト */
.qm-clist-question {
  font-size: 14px;
  font-weight: 900;
  color: #111;
  line-height: 1.65;
  margin-bottom: 8px;
}

/* カード内: ステータス行 */
.qm-clist-status {
  text-align: right;
  font-size: 11px;
  font-weight: 700;
}

/* 回答済バッジ */
.qm-clist-badge-done {
  display: inline-block;
  padding: 2px 10px;
  background: #000;
  color: #FFE500;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

/* 未回答 */
.qm-clist-badge-new {
  color: #888;
}


/* ════════════════════════════════════════════════════════
   退会コース選択ページ固有スタイル  (.qm-retire-*)
   ════════════════════════════════════════════════════════ */

/* コース選択リスト */
.qm-retire-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 通常退会可能カード */
.qm-retire-card {
  display: block;
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.qm-retire-card:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

.qm-retire-card-amount {
  background: #FFE500;
  color: #000;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 900;
  border-bottom: 2px solid #000;
}

.qm-retire-card-amount small {
  font-size: 12px;
  font-weight: 700;
  display: block;
  line-height: 1.7;
}

.qm-retire-card-action {
  background: #000;
  color: #FFE500;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  text-align: center;
}

/* 登録処理中カード */
.qm-retire-card-processing {
  border: 2px solid #aaa;
  box-shadow: 3px 3px 0 #aaa;
  overflow: hidden;
}

.qm-retire-card-processing .qm-retire-card-amount {
  background: #eee;
  color: #555;
  border-bottom: 1.5px solid #aaa;
}

.qm-retire-processing-badge {
  display: inline-block;
  background: #e00;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 8px;
  margin-right: 4px;
}

.qm-retire-processing-note {
  background: #f8f8f8;
  color: #888;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}


/* ════════════════════════════════════════════════════════
   Softbank 退会ページ固有スタイル  (.qm-sb-*)
   ════════════════════════════════════════════════════════ */

/* Softbank ブランドバナー */
.qm-sb-brand-banner {
  background: #1a1a3e;
  color: #fff;
  padding: 10px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  margin-bottom: 16px;
}

.qm-sb-brand-banner span {
  display: inline-block;
  border: 1.5px solid rgba(255,255,255,.4);
  padding: 2px 10px;
  font-size: 10px;
  letter-spacing: .14em;
  color: #aac;
  margin-bottom: 4px;
}

/* コース一覧見出し（Softbank 色） */
.qm-sb-list-head {
  background: #1a1a3e;
  color: #fff;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  border: 2px solid #000;
}

/* Softbank カード（退会可能） */
.qm-sb-card {
  display: block;
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.qm-sb-card:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

.qm-sb-card-carrier {
  background: #1a1a3e;
  color: #fff;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  border-bottom: 1.5px solid #000;
}

.qm-sb-card-amount {
  background: #fff;
  color: #000;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 900;
  border-bottom: 1.5px solid #ddd;
}

.qm-sb-card-action {
  background: #1a1a3e;
  color: #fff;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  letter-spacing: .06em;
}

/* 処理中カード */
.qm-sb-card-processing {
  border: 2px solid #aaa;
  overflow: hidden;
}

.qm-sb-card-processing .qm-sb-card-carrier {
  background: #666;
}

.qm-sb-card-processing .qm-sb-card-amount {
  background: #f0f0f0;
  color: #888;
  border-bottom: 1px solid #ddd;
}

/* 空表示 */
.qm-sb-empty {
  padding: 16px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #888;
  text-align: center;
  background: #fff;
  border: 2px solid #000;
  border-top: none;
}


/* ════════════════════════════════════════════════════════
   Docomo 退会ページ固有スタイル  (.qm-dc-*)
   ════════════════════════════════════════════════════════ */

.qm-dc-brand-banner {
  background: #c20000;
  color: #fff;
  padding: 10px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  margin-bottom: 16px;
}

.qm-dc-brand-banner span {
  display: inline-block;
  border: 1.5px solid rgba(255,255,255,.4);
  padding: 2px 10px;
  font-size: 10px;
  letter-spacing: .14em;
  color: #ffaaaa;
  margin-bottom: 4px;
}

.qm-dc-list-head {
  background: #c20000;
  color: #fff;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  border: 2px solid #000;
}

.qm-dc-card {
  display: block;
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  cursor: pointer;
}

.qm-dc-card:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

.qm-dc-card-carrier {
  background: #c20000;
  color: #fff;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  border-bottom: 1.5px solid #000;
}

.qm-dc-card-amount {
  background: #fff;
  color: #000;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.7;
  border-bottom: 1.5px solid #ddd;
}

.qm-dc-card-amount small {
  font-size: 12px;
  font-weight: 700;
  display: block;
  line-height: 1.7;
}

.qm-dc-card-action {
  background: #c20000;
  color: #fff;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  letter-spacing: .06em;
}

.qm-dc-card-processing {
  border: 2px solid #aaa;
  overflow: hidden;
}

.qm-dc-card-processing .qm-dc-card-carrier {
  background: #888;
}

.qm-dc-card-processing .qm-dc-card-amount {
  background: #f0f0f0;
  color: #888;
}

.qm-dc-empty {
  padding: 16px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #888;
  text-align: center;
  background: #fff;
  border: 2px solid #000;
  border-top: none;
}

.qm-dc-shori-link {
  text-align: right;
  margin-top: 8px;
  font-size: 12px;
}

.qm-dc-shori-link a {
  color: #757575;
  text-decoration: none;
  border-bottom: 1px dotted #999;
}


/* ════════════════════════════════════════════════════════
   docomo 入会ページ  (.qm-dc-rg-*)
   ════════════════════════════════════════════════════════ */

/* バナーアニメーション */
@keyframes qm-hero-pulse {
  0%, 100% { box-shadow: 6px 6px 0 #000, 0 0 0 rgba(194,0,0,0); }
  50%       { box-shadow: 6px 6px 0 #000, 0 0 20px rgba(194,0,0,.5); }
}
@keyframes qm-au-hero-pulse {
  0%, 100% { box-shadow: 6px 6px 0 #000, 0 0 0 rgba(232,111,0,0); }
  50%       { box-shadow: 6px 6px 0 #000, 0 0 20px rgba(232,111,0,.5); }
}
@keyframes qm-hero-free-bounce {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.12); }
  60%      { transform: scale(.96); }
}
@keyframes qm-ribbon-shine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes qm-hero-spark {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1) rotate(180deg); }
}
@keyframes qm-hero-lines {
  0%   { transform: translate(-50%,-50%) rotate(0deg); }
  100% { transform: translate(-50%,-50%) rotate(360deg); }
}

/* キャリアロゴ帯 */
.qm-dc-rg-carrier-wrap {
  text-align: center;
  padding: 10px 0 12px;
  background: #fff;
  border: 2px solid #000;
  margin-bottom: 14px;
}

/* ─── キャンペーンヒーローバナー ─── */
.qm-dc-rg-hero {
  position: relative;
  overflow: hidden;
  background: #c20000;
  border: 3px solid #000;
  box-shadow: 6px 6px 0 #000;
  padding: 22px 16px 18px;
  text-align: center;
  margin: 0 0 16px;
}

/* 放射状スピードライン（回転アニメ付き） */
.qm-dc-rg-hero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    rgba(255,255,255,.09) 0deg 2deg,
    transparent 2deg 5.5deg
  );
  pointer-events: none;
  z-index: 0;
  animation: qm-hero-lines 18s linear infinite;
}

/* ハーフトーン風ドット（重ね） */
.qm-dc-rg-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0,0,0,.08) 1px, transparent 1px);
  background-size: 6px 6px;
  pointer-events: none;
  z-index: 0;
}

.qm-dc-rg-hero > * { position: relative; z-index: 1; }

/* 「CAMPAIGN」リボン */
.qm-dc-rg-ribbon {
  display: inline-block;
  background: #FFD700;
  color: #000;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 14px;
  letter-spacing: .18em;
  border: 1.5px solid #000;
  box-shadow: 2px 2px 0 rgba(0,0,0,.4);
  margin-bottom: 8px;
}

/* 「期間限定キャンペーン」テキスト */
.qm-dc-rg-hero-kind {
  display: block;
  color: rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 8px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}

/* メインコピー */
.qm-dc-rg-hero-free {
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .02em;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000;
  margin-bottom: 8px;
}

/* 「無料」強調ワード */
.qm-dc-rg-hero-free em {
  font-style: normal;
  display: inline-block;
  font-size: 52px;
  color: #FFD700;
  line-height: 1;
  text-shadow: 3px 3px 0 #000, -2px -2px 0 rgba(0,0,0,.6);
  -webkit-text-stroke: 1px #000;
  vertical-align: middle;
}

/* 料金注記 */
.qm-dc-rg-hero-note {
  display: inline-block;
  color: rgba(255,255,255,.9);
  font-size: 12px;
  margin-top: 4px;
  background: rgba(0,0,0,.25);
  padding: 3px 10px;
  border-radius: 2px;
}

.qm-dc-rg-hero-note s { color: rgba(255,255,255,.5); }
.qm-dc-rg-hero-note b { color: #FFD700; font-size: 13px; font-weight: 900; }

/* ─── 登録ボタン（シングルコース） ─── */
.qm-dc-rg-btn-wrap {
  text-align: center;
  margin: 0 0 14px;
}

.qm-dc-rg-btn {
  display: inline-block;
  background: #c20000;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  padding: 14px 40px;
  border: 2.5px solid #000;
  box-shadow: 5px 5px 0 #000;
  text-decoration: none;
  letter-spacing: .06em;
  transition: transform .1s, box-shadow .1s;
}

.qm-dc-rg-btn:active {
  transform: translate(5px,5px);
  box-shadow: none;
}

.qm-dc-rg-btn--registered {
  background: #999;
  color: #fff;
  box-shadow: 4px 4px 0 #555;
  cursor: default;
}

/* シングルコース補足テキスト */
.qm-dc-rg-desc-text {
  font-size: 12px;
  color: #333;
  padding: 10px 14px;
  background: #fff;
  border: 2px solid #000;
  margin: 0 0 10px;
  line-height: 1.7;
}

.qm-dc-rg-desc-note {
  font-size: 11px;
  color: #555;
  padding: 10px 14px;
  background: #f8f8f8;
  border: 1.5px solid #ccc;
  margin: 0 0 10px;
  line-height: 1.8;
}

/* 詳細情報フレーム */
.qm-dc-rg-info-frame {
  font-size: 11px;
  color: #444;
  padding: 12px 14px;
  background: #fff;
  border: 2px solid #000;
  line-height: 1.8;
  margin: 0 0 10px;
}

.qm-dc-rg-info-frame a { color: #c20000; font-weight: 700; }

.qm-dc-rg-info-notice {
  background: #fff8f8;
  border: 1.5px solid #c20000;
  padding: 8px 10px;
  font-size: 11px;
  margin: 8px 0;
  color: #c20000;
  line-height: 1.7;
}

.qm-dc-rg-trial-note {
  font-size: 10px;
  color: #777;
  margin: 6px 0 0;
  line-height: 1.7;
}

/* メタ情報 */
.qm-dc-rg-meta {
  text-align: right;
  font-size: 10px;
  color: #bbb;
  padding: 2px 4px;
  margin-bottom: 16px;
}

/* ─── マルチコース ─── */
.qm-dc-rg-notice-bar {
  background: #f8f8f8;
  border: 2px solid #000;
  padding: 10px 12px;
  margin: 0 0 14px;
  font-size: 11px;
  line-height: 1.8;
}

.qm-dc-rg-notice-bar a { color: #c20000; font-weight: 700; }

.qm-dc-rg-billing-badge {
  display: inline-block;
  background: #c20000;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 10px;
  margin-top: 4px;
  letter-spacing: .06em;
  border: 1.5px solid #000;
}

/* セクションタイトル */
.qm-dc-rg-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

.qm-dc-rg-section-title-text {
  background: linear-gradient(135deg, #c20000, #7a0000);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  padding: 7px 14px;
  border: 2px solid #000;
  white-space: nowrap;
  letter-spacing: .06em;
  flex-shrink: 0;
}

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

/* コースカード */
.qm-dc-rg-course-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.qm-dc-rg-course-list li { margin-bottom: 10px; }

.qm-dc-rg-course-card {
  display: block;
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .1s, box-shadow .1s;
}

.qm-dc-rg-course-card:active {
  transform: translate(4px,4px);
  box-shadow: none;
}

.qm-dc-rg-course-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #c20000, #7a0000);
  padding: 10px 14px;
  border-bottom: 1.5px solid #000;
}

.qm-dc-rg-course-point-label {
  font-size: 10px;
  color: rgba(255,255,255,.8);
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 2px;
}

.qm-dc-rg-course-point {
  font-size: 22px;
  font-weight: 900;
  color: #FFD700;
  line-height: 1.1;
  text-shadow: 1px 1px 0 rgba(0,0,0,.4);
}

.qm-dc-rg-course-point span {
  font-size: 12px;
  color: #fff;
  font-weight: 700;
}

.qm-dc-rg-course-arrow {
  font-size: 24px;
  font-weight: 900;
  color: #FFD700;
  line-height: 1;
}

.qm-dc-rg-course-card-body {
  background: #fff;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #000;
  line-height: 1.8;
  border-bottom: 1.5px solid #eee;
}

.qm-dc-rg-price-free {
  display: inline-block;
  background: #c20000;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  padding: 2px 10px;
  border: 1.5px solid #000;
  margin-bottom: 2px;
}

.qm-dc-rg-price-main {
  font-size: 16px;
  font-weight: 900;
  color: #c20000;
}

.qm-dc-rg-price-sub {
  font-size: 12px;
  color: #555;
  font-weight: 700;
}

.qm-dc-rg-course-card-action {
  background: #c20000;
  color: #fff;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  letter-spacing: .06em;
}

/* 登録済みカード */
.qm-dc-rg-course-card--registered {
  position: relative;
  border-color: #aaa;
  box-shadow: 3px 3px 0 #aaa;
}

.qm-dc-rg-course-card--registered .qm-dc-rg-course-card-head {
  background: #aaa;
}

.qm-dc-rg-course-card--registered .qm-dc-rg-course-point {
  color: #fff;
}

.qm-dc-rg-registered-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #c00;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 6px;
  border: 1px solid #800;
  letter-spacing: .06em;
  z-index: 1;
}

/* サービスカード */
.qm-dc-rg-service-card {
  border: 2px solid #000;
  overflow: hidden;
  margin-bottom: 20px;
}

.qm-dc-rg-service-card-head {
  background: linear-gradient(135deg, #1e3a5f, #18203a);
  color: #aabbff;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 12px;
  letter-spacing: .08em;
  border-bottom: 1.5px solid #000;
}

.qm-dc-rg-service-link {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #1e3a5f;
  text-decoration: underline;
  background: #fff;
}


/* ════════════════════════════════════════════════════════
   au 入会ページ固有スタイル  (.qm-au-rg-*)
   ════════════════════════════════════════════════════════ */

.qm-au-rg-hero {
  position: relative;
  overflow: hidden;
  background: #e86f00;
  border: 3px solid #000;
  box-shadow: 6px 6px 0 #000;
  padding: 22px 16px 18px;
  text-align: center;
  margin: 0 0 16px;
}

.qm-au-rg-hero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    rgba(255,255,255,.09) 0deg 2deg,
    transparent 2deg 5.5deg
  );
  pointer-events: none;
  z-index: 0;
  animation: qm-hero-lines 18s linear infinite;
}

.qm-au-rg-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0,0,0,.07) 1px, transparent 1px);
  background-size: 6px 6px;
  pointer-events: none;
  z-index: 0;
}

.qm-au-rg-hero > * { position: relative; z-index: 1; }

.qm-au-rg-ribbon {
  display: inline-block;
  background: #FFD700;
  color: #000;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 14px;
  letter-spacing: .18em;
  border: 1.5px solid #000;
  box-shadow: 2px 2px 0 rgba(0,0,0,.4);
  margin-bottom: 8px;
}

.qm-au-rg-hero-kind {
  display: block;
  color: rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 8px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}

.qm-au-rg-hero-free {
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .02em;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000;
  margin-bottom: 8px;
}

.qm-au-rg-hero-free em {
  font-style: normal;
  display: inline-block;
  font-size: 52px;
  color: #FFD700;
  line-height: 1;
  text-shadow: 3px 3px 0 #000, -2px -2px 0 rgba(0,0,0,.6);
  -webkit-text-stroke: 1px #000;
  vertical-align: middle;
}

.qm-au-rg-hero-note {
  display: inline-block;
  color: rgba(255,255,255,.9);
  font-size: 12px;
  margin-top: 4px;
  background: rgba(0,0,0,.25);
  padding: 3px 10px;
  border-radius: 2px;
}

.qm-au-rg-hero-note s { color: rgba(255,255,255,.5); }
.qm-au-rg-hero-note b { color: #FFD700; font-size: 13px; font-weight: 900; }

.qm-au-rg-info-frame {
  font-size: 11px;
  color: #444;
  padding: 12px 14px;
  background: #fff;
  border: 2px solid #000;
  line-height: 1.8;
  margin: 0 0 10px;
}

.qm-au-rg-info-frame a { color: #e86f00; font-weight: 700; }

.qm-au-rg-info-notice {
  background: #fff8f0;
  border: 1.5px solid #e86f00;
  padding: 8px 10px;
  font-size: 11px;
  margin: 8px 0;
  color: #b35400;
  line-height: 1.7;
}

.qm-au-rg-trial-note {
  display: block;
  font-size: 10px;
  color: #777;
  margin: 6px 0 0;
  line-height: 1.7;
}

.qm-au-rg-carrier-wrap {
  text-align: center;
  padding: 10px 0 12px;
  background: #fff;
  border: 2px solid #000;
  margin-bottom: 14px;
}

.qm-au-rg-btn-wrap {
  text-align: center;
  margin: 0 0 14px;
}

.qm-au-rg-btn {
  display: inline-block;
  background: #e86f00;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  padding: 14px 40px;
  border: 2.5px solid #000;
  box-shadow: 5px 5px 0 #000;
  text-decoration: none;
  letter-spacing: .06em;
  transition: transform .1s, box-shadow .1s;
}

.qm-au-rg-btn:active {
  transform: translate(5px, 5px);
  box-shadow: none;
}

.qm-au-rg-btn--registered {
  background: #999;
  color: #fff;
  box-shadow: 4px 4px 0 #555;
  cursor: default;
}

.qm-au-rg-desc-text {
  font-size: 12px;
  color: #333;
  padding: 10px 14px;
  background: #fff;
  border: 2px solid #000;
  margin: 0 0 10px;
  line-height: 1.7;
}

.qm-au-rg-notice-bar {
  background: #f8f8f8;
  border: 2px solid #000;
  padding: 10px 12px;
  margin: 0 0 14px;
  font-size: 11px;
  line-height: 1.8;
}

.qm-au-rg-notice-bar a { color: #e86f00; font-weight: 700; }

.qm-au-rg-billing-badge {
  display: inline-block;
  background: #e86f00;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 10px;
  margin-top: 4px;
  letter-spacing: .06em;
  border: 1.5px solid #000;
}

.qm-au-rg-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

.qm-au-rg-section-title-text {
  background: linear-gradient(135deg, #e86f00, #b35400);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  padding: 7px 14px;
  border: 2px solid #000;
  white-space: nowrap;
  letter-spacing: .06em;
  flex-shrink: 0;
}

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

.qm-au-rg-course-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.qm-au-rg-course-list li { margin-bottom: 10px; }

.qm-au-rg-course-card {
  display: block;
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .1s, box-shadow .1s;
}

.qm-au-rg-course-card:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

.qm-au-rg-course-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #e86f00, #b35400);
  padding: 10px 14px;
  border-bottom: 1.5px solid #000;
}

.qm-au-rg-course-point-label {
  font-size: 10px;
  color: rgba(255,255,255,.85);
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 2px;
}

.qm-au-rg-course-point {
  font-size: 22px;
  font-weight: 900;
  color: #FFD700;
  line-height: 1.1;
  text-shadow: 1px 1px 0 rgba(0,0,0,.4);
}

.qm-au-rg-course-point span {
  font-size: 12px;
  color: #fff;
  font-weight: 700;
}

.qm-au-rg-course-arrow {
  font-size: 24px;
  font-weight: 900;
  color: #FFD700;
  line-height: 1;
}

.qm-au-rg-course-card-body {
  background: #fff;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #000;
  line-height: 1.8;
  border-bottom: 1.5px solid #eee;
}

.qm-au-rg-price-free {
  display: inline-block;
  background: #e86f00;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  padding: 2px 10px;
  border: 1.5px solid #000;
  margin-bottom: 2px;
}

.qm-au-rg-price-main {
  font-size: 16px;
  font-weight: 900;
  color: #e86f00;
}

.qm-au-rg-price-sub {
  font-size: 12px;
  color: #555;
  font-weight: 700;
}

.qm-au-rg-course-card-action {
  background: #e86f00;
  color: #fff;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  letter-spacing: .06em;
}

.qm-au-rg-course-card--registered {
  position: relative;
  border-color: #aaa;
  box-shadow: 3px 3px 0 #aaa;
}

.qm-au-rg-course-card--registered .qm-au-rg-course-card-head {
  background: #aaa;
}

.qm-au-rg-course-card--registered .qm-au-rg-course-point {
  color: #fff;
}

.qm-au-rg-registered-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #e86f00;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 6px;
  border: 1px solid #000;
  letter-spacing: .06em;
  z-index: 1;
}

.qm-au-rg-service-card {
  border: 2px solid #000;
  overflow: hidden;
  margin-bottom: 20px;
}

.qm-au-rg-service-card-head {
  background: linear-gradient(135deg, #e86f00, #b35400);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 12px;
  letter-spacing: .08em;
  border-bottom: 1.5px solid #000;
}

.qm-au-rg-service-link {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #b35400;
  background: #fff;
}

/* ════════════════════════════════════════════════════════
   共通ヘッダー  (.qm-header / .qm-header-*)
   ※ qm-style.css からコピー・サブページ用
   ════════════════════════════════════════════════════════ */

.qm-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #000;
  padding: 0 16px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid #FFD700;
}

.qm-header-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
  height: 100%;
}

.qm-header-logo-img {
  height: 22px;
  width: auto;
  display: block;
}

.qm-header-link {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #000;
  border: 2px solid #000;
  padding: 6px 14px;
  background: #FFD700;
  box-shadow: 2px 2px 0 #555;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .1s, box-shadow .1s;
}

.qm-header-link:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* ════════════════════════════════════════════════════════
   共通フッター  (.qmf-*)  ※ qm-style.css からコピー
   ════════════════════════════════════════════════════════ */

.qmf-footer {
  background: #111;
  color: #ccc;
  border-top: 3px solid #000;
  padding: 32px 20px 24px;
}

.qmf-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.qmf-logo img {
  height: 18px;
}

.qmf-section-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .2em;
  color: #FFD700;
  text-transform: uppercase;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.qmf-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #333;
}

.qmf-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-bottom: 20px;
}

.qmf-nav-grid a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #ccc;
  text-decoration: none;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  transition: background .1s, color .1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.qmf-nav-grid a::before {
  content: '\203A';
  color: #FFD700;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.qmf-nav-grid a:active {
  background: #222;
  color: #FFD700;
}

.qmf-nav-grid a.qmf-nav-highlight {
  background: #1e1a00;
  color: #FFD700;
  border-color: #3a3200;
}

.qmf-divider {
  height: 1px;
  background: #2a2a2a;
  margin: 20px 0;
}

.qmf-copyright {
  font-size: 10px;
  color: #555;
  text-align: center;
  letter-spacing: .04em;
  line-height: 1.8;
}

/* ════════════════════════════════════════════════════════
   login_id  (.qm-lid-*)
   ════════════════════════════════════════════════════════ */

.qm-lid-intro {
  padding: 14px 16px;
  background: #fff;
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.9;
  margin: 14px 0 16px;
  position: relative;
}
.qm-lid-intro::before {
  content: 'NOTICE';
  position: absolute;
  top: -11px; left: 12px;
  background: #FFE500;
  color: #000;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  padding: 1px 8px;
  border: 1.5px solid #000;
}

.qm-lid-form-card {
  border: 3px solid #000;
  box-shadow: 6px 6px 0 #000;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
}

.qm-lid-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1a1a1a;
  padding: 11px 14px;
  border-bottom: 2px solid #000;
  position: relative;
  overflow: hidden;
}
.qm-lid-form-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(rgba(255,255,255,.05) 0deg 3deg, transparent 3deg 7deg);
  pointer-events: none;
}
.qm-lid-form-header > span:first-child {
  color: #FFE500;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  position: relative;
  z-index: 1;
}
.qm-lid-form-header-badge {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .18em;
  color: #000;
  background: #FFE500;
  padding: 2px 7px;
  border: 1px solid #000;
  position: relative;
  z-index: 1;
}

.qm-lid-form-body {
  background: #fff;
  padding: 18px 16px 8px;
}

.qm-lid-field {
  margin-bottom: 16px;
}
.qm-lid-label {
  display: block;
  font-size: 11px;
  font-weight: 900;
  color: #555;
  letter-spacing: .08em;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.qm-lid-input {
  display: block;
  width: 100%;
  padding: 12px 12px;
  border: 2.5px solid #000;
  font-size: 16px;
  font-weight: 700;
  box-sizing: border-box;
  outline: none;
  background: #fafafa;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
}
.qm-lid-input:focus {
  border-color: #c20000;
  box-shadow: 3px 3px 0 #c20000;
  background: #fff;
}

.qm-lid-form-footer {
  padding: 14px 16px 16px;
  background: #f0f0f0;
  border-top: 2px solid #000;
  text-align: center;
}
.qm-lid-submit {
  display: inline-block;
  width: 100%;
  background: #1a1a1a;
  color: #FFE500;
  font-size: 16px;
  font-weight: 900;
  padding: 15px 0;
  border: 2.5px solid #000;
  box-shadow: 5px 5px 0 #000;
  letter-spacing: .1em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .1s, box-shadow .1s;
}
.qm-lid-submit:active {
  transform: translate(5px, 5px);
  box-shadow: none;
}

/* ════════════════════════════════════════════════════════
   login_info  (.qm-linfo-*)
   ════════════════════════════════════════════════════════ */

/* 保管注意バナー */
.qm-linfo-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 16px;
  padding: 13px 16px;
  background: #c20000;
  border: 2.5px solid #000;
  box-shadow: 5px 5px 0 #000;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.qm-linfo-warning::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(rgba(255,255,255,.06) 0deg 3deg, transparent 3deg 7deg);
  pointer-events: none;
}
.qm-linfo-warning-icon {
  font-size: 22px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.qm-linfo-warning-text {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

/* クレデンシャルカード */
.qm-linfo-card {
  border: 3px solid #000;
  box-shadow: 6px 6px 0 #000;
  overflow: hidden;
  margin-bottom: 20px;
}
.qm-linfo-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1a1a1a;
  padding: 10px 14px;
  border-bottom: 2px solid #000;
}
.qm-linfo-card-title {
  color: #FFE500;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}
.qm-linfo-card-badge {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .18em;
  color: #000;
  background: #FFE500;
  padding: 2px 7px;
  border: 1px solid #000;
}

.qm-linfo-row {
  display: flex;
  align-items: stretch;
  border-bottom: 2px solid #000;
}
.qm-linfo-row--last {
  border-bottom: none;
}
.qm-linfo-row-label {
  width: 42%;
  flex-shrink: 0;
  background: #f5f5f5;
  padding: 14px 12px;
  font-size: 12px;
  font-weight: 900;
  color: #111;
  border-right: 2px solid #000;
  display: flex;
  align-items: center;
}
.qm-linfo-row-value {
  flex: 1;
  padding: 14px 14px;
  font-size: 15px;
  font-weight: 900;
  color: #111;
  background: #fff;
  word-break: break-all;
  display: flex;
  align-items: center;
  letter-spacing: .04em;
}

/* ════════════════════════════════════════════════════════
   login_ng_id  (.qm-lngid-*)
   ════════════════════════════════════════════════════════ */

/* 退会メッセージパネル */
.qm-lngid-msg-panel {
  margin: 14px 0;
  padding: 16px 16px 14px;
  background: #fff;
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
  position: relative;
}
.qm-lngid-msg-panel::before {
  content: 'INFO';
  position: absolute;
  top: -11px; left: 12px;
  background: #1a1a1a;
  color: #FFE500;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  padding: 1px 8px;
  border: 1.5px solid #000;
}
.qm-lngid-msg-main {
  font-size: 15px;
  font-weight: 900;
  margin: 0 0 8px;
  color: #111;
}
.qm-lngid-msg-sub {
  font-size: 12px;
  color: #444;
  line-height: 1.8;
  margin: 0;
}

/* 警告パネル */
.qm-lngid-alert-panel {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 18px;
  padding: 14px 16px;
  background: #fffbe6;
  border: 2.5px solid #e86f00;
  box-shadow: 4px 4px 0 #000;
}
.qm-lngid-alert-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  color: #e86f00;
  margin-top: 1px;
}
.qm-lngid-alert-text {
  font-size: 12px;
  font-weight: 700;
  color: #333;
  line-height: 1.9;
  margin: 0;
}

/* ID忘れ案内パネル */
.qm-lngid-info-panel {
  margin: 0 0 20px;
  padding: 16px 16px 14px;
  background: #f5f5f5;
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
}
.qm-lngid-info-title {
  font-size: 13px;
  font-weight: 900;
  color: #111;
  margin: 0 0 8px;
  letter-spacing: .04em;
}
.qm-lngid-info-text {
  font-size: 12px;
  color: #555;
  line-height: 1.9;
  margin: 0 0 12px;
}
.qm-lngid-contact-btn {
  display: block;
  text-align: center;
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: 900;
  padding: 11px 0;
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
  text-decoration: none;
  letter-spacing: .06em;
  transition: transform .1s, box-shadow .1s;
}
.qm-lngid-contact-btn:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

/* ════════════════════════════════════════════════════════
   ログインページ固有スタイル  (.qm-login-*)
   ════════════════════════════════════════════════════════ */

/* ページタイトルのデフォルト文字色 */
.qm-sp-title-main {
  color: #FFE500;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .06em;
  text-shadow: 2px 2px 0 #000;
  margin: 0;
  line-height: 1.2;
}
.qm-sp-title-sub {
  color: rgba(255,229,0,.65);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  margin: 0;
}

.qm-login-wrap {
  padding: 0 12px;
}

.qm-login-intro {
  padding: 14px 16px;
  background: #fff;
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.9;
  margin: 14px 0 20px;
  position: relative;
}
.qm-login-intro::before {
  content: 'NOTICE';
  position: absolute;
  top: -11px;
  left: 12px;
  background: #FFE500;
  color: #000;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  padding: 1px 8px;
  border: 1.5px solid #000;
}

/* キャリアセクション */
.qm-login-carrier-section {
  margin-bottom: 20px;
}
.qm-login-carrier-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .2em;
  color: #777;
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* キャリアセクション */
.qm-login-carrier-section {
  margin-bottom: 6px;
}

/* form はブロック展開してボタン幅を継承させる */
.qm-login-btn-form {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* キャリアボタン共通 */
.qm-login-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 3px solid #000;
  box-shadow: 6px 6px 0 #000;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  background: none;
  box-sizing: border-box;
  transition: transform .12s, box-shadow .12s;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}
.qm-login-btn:active {
  transform: translate(6px, 6px);
  box-shadow: none;
}

/* 放射スピードライン（漫画感） */
.qm-login-btn::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 200%; height: 200%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(rgba(255,255,255,.07) 0deg 2deg, transparent 2deg 6deg);
  pointer-events: none;
  z-index: 0;
}

/* 右上コーナーの斜め帯アクセント */
.qm-login-btn::after {
  content: 'LOGIN \25B6';
  position: absolute;
  top: 8px; right: -2px;
  background: #FFE500;
  color: #000;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
  padding: 3px 10px 3px 8px;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  z-index: 2;
  clip-path: polygon(6px 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* 左側カラーバー */
.qm-login-btn-bar {
  width: 10px;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* テキストエリア */
.qm-login-btn-body {
  flex: 1;
  padding: 18px 14px 18px 16px;
  position: relative;
  z-index: 1;
}

.qm-login-btn-carrier {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1;
  text-shadow: 2px 2px 0 rgba(0,0,0,.35);
}
.qm-login-btn-sub {
  font-size: 10px;
  font-weight: 700;
  display: block;
  margin-top: 5px;
  letter-spacing: .06em;
  opacity: .88;
}

/* 矢印エリア */
.qm-login-btn-arrow {
  font-size: 28px;
  font-weight: 900;
  padding-right: 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* ─── docomo ─── */
.qm-login-btn--dc {
  background: linear-gradient(135deg, #c20000 0%, #8a0000 100%);
  color: #fff;
}
.qm-login-btn--dc .qm-login-btn-bar {
  background: repeating-linear-gradient(180deg, #ff4444 0px, #ff4444 4px, #c20000 4px, #c20000 8px);
}
.qm-login-btn--dc .qm-login-btn-sub { color: #ffbbbb; }

/* ─── au ─── */
.qm-login-btn--au {
  background: linear-gradient(135deg, #e86f00 0%, #b35400 100%);
  color: #fff;
}
.qm-login-btn--au .qm-login-btn-bar {
  background: repeating-linear-gradient(180deg, #ffaa44 0px, #ffaa44 4px, #e86f00 4px, #e86f00 8px);
}
.qm-login-btn--au .qm-login-btn-sub { color: #ffddb8; }

/* ─── SoftBank ─── */
.qm-login-btn--sb {
  background: linear-gradient(135deg, #1a1a3e 0%, #0d0d24 100%);
  color: #fff;
}
.qm-login-btn--sb .qm-login-btn-bar {
  background: repeating-linear-gradient(180deg, #6677cc 0px, #6677cc 4px, #1a1a3e 4px, #1a1a3e 8px);
}
.qm-login-btn--sb .qm-login-btn-sub { color: #aac0ff; }

/* ════════════════════════════════════════════════════════
   au 退会ページ固有スタイル  (.qm-au-*)
   ════════════════════════════════════════════════════════ */

.qm-au-brand-banner {
  background: #e86f00;
  color: #fff;
  padding: 10px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  margin-bottom: 16px;
}

.qm-au-brand-banner span {
  display: inline-block;
  border: 1.5px solid rgba(255,255,255,.4);
  padding: 2px 10px;
  font-size: 10px;
  letter-spacing: .14em;
  color: #ffd0aa;
  margin-bottom: 4px;
}

.qm-au-list-head {
  background: #e86f00;
  color: #fff;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  border: 2px solid #000;
}

.qm-au-card {
  display: block;
  border: 2.5px solid #000;
  box-shadow: 4px 4px 0 #000;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.qm-au-card:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

.qm-au-card-carrier {
  background: #e86f00;
  color: #fff;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  border-bottom: 1.5px solid #000;
}

.qm-au-card-amount {
  background: #fff;
  color: #000;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.7;
  border-bottom: 1.5px solid #ddd;
}

.qm-au-card-amount small {
  font-size: 12px;
  font-weight: 700;
  display: block;
  line-height: 1.7;
}

.qm-au-card-action {
  background: #e86f00;
  color: #fff;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  letter-spacing: .06em;
}

.qm-au-card-processing {
  border: 2px solid #aaa;
  overflow: hidden;
}

.qm-au-card-processing .qm-au-card-carrier {
  background: #aaa;
}

.qm-au-card-processing .qm-au-card-amount {
  background: #f0f0f0;
  color: #888;
}

.qm-au-empty {
  padding: 16px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #888;
  text-align: center;
  background: #fff;
  border: 2px solid #000;
  border-top: none;
}