/* ================================================================
   pe-sub.css ? サブページ共通スタイル（Sona Yell デザイン版）
================================================================ */

/* ── デザイントークン ── */
:root {
  --sy-black:  #111111;
  --sy-yellow: #FFD100;
  --sy-white:  #ffffff;
  --sy-red:    #cc0000;
  --sy-border: 2.5px solid #111111;
  --sy-shadow: 5px 5px 0 #111111;
  --sy-shadow-sm: 3px 3px 0 #111111;
  --sy-radius: 6px;
  --sy-radius-sm: 4px;
  /* インデックスページと同じ面取り（chamfer）クリップパス */
  --sy-chamfer: polygon(
    0 14px, 14px 0,
    calc(100% - 14px) 0, 100% 14px,
    100% calc(100% - 14px),
    calc(100% - 14px) 100%,
    14px 100%, 0 calc(100% - 14px)
  );
  --sy-chamfer-sm: polygon(
    0 10px, 10px 0,
    calc(100% - 10px) 0, 100% 10px,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    10px 100%, 0 calc(100% - 10px)
  );
  --sy-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
             "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

/* ── ページ共通ベース ── */
body {
  margin: 0;
  background: #f5f5f0;
  font-family: var(--sy-font);
  font-size: 15px;
  line-height: 1.85;
  color: var(--sy-black);
  -webkit-text-size-adjust: 100%;
  word-break: break-all;
}

.sp-page {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--sy-white);
  padding-bottom: 60px;
  border-left:  1px solid rgba(0,0,0,.07);
  border-right: 1px solid rgba(0,0,0,.07);
}

/* ── 戻るボタン ── */
.sp-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 20px 18px 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--sy-black);
  color: var(--sy-yellow);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-decoration: none;
  border: var(--sy-border);
  filter: drop-shadow(var(--sy-shadow-sm));
  transition: filter .1s;
}
.sp-back::before { content: "\2190"; font-size: 13px; }
.sp-back:hover   { filter: drop-shadow(5px 5px 0 rgba(0,0,0,.85)); }

/* ── ページヘッド ── */
.sp-head {
  position: relative;
  margin: 22px 18px 0;
  padding: 22px 20px 18px;
  /* インデックスページと同じ面取り八角形 */
  clip-path: var(--sy-chamfer);
  background: var(--sy-black);
  /* clip-path と共存できる drop-shadow */
  filter: drop-shadow(5px 5px 0 rgba(0,0,0,.75));
  overflow: hidden;
}
/* 上部ハザードストライプ（clip-path で面取りが自然にかかる） */
.sp-head::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 7px;
  background: repeating-linear-gradient(
    -45deg, var(--sy-yellow) 0 7px, var(--sy-black) 7px 14px
  );
}
.sp-head::before {
  content: "!";
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  font-family: "Rubik", sans-serif;
  font-size: 64px; font-weight: 900;
  color: rgba(255,255,255,.07);
  line-height: 1; pointer-events: none;
}
.sp-head-kicker {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--sy-yellow);
  color: var(--sy-black);
  font-size: 9px; font-weight: 900; letter-spacing: .16em;
}
.sp-head h1 {
  margin: 0;
  font-size: 19px; font-weight: 900; letter-spacing: -.02em; line-height: 1.3;
  color: var(--sy-white);
}

/* ヘッドバリアント（clip-path は基底クラスから継承） */
.sp-head--blue  { background: #1a2a4a; }
.sp-head--green { background: #0f2a1a; }
.sp-head--pink  { background: #2a0f1a; }
.sp-head--navy  { background: var(--sy-black); }
.sp-head--navy h1 { color: var(--sy-white); }

.sp-notice-wrap { margin: 16px 18px 0; }

/* ── 汎用カード ── */
.sp-card {
  position: relative;
  margin: 14px 18px 0;
  padding: 22px 20px;
  clip-path: var(--sy-chamfer-sm);
  border: var(--sy-border);
  background: var(--sy-white);
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,.85));
  overflow: hidden;
}
.sp-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 5px;
  background: repeating-linear-gradient(90deg, var(--sy-yellow) 0 12px, var(--sy-black) 12px 16px);
}
.sp-card-icon {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 14px; padding: 5px 12px; border-radius: 6px;
  background: #fff8d0; border: 2px solid var(--sy-yellow);
  color: #7a5000; font-size: 11px; font-weight: 900; letter-spacing: .08em;
}
.sp-card-icon::before { content: "\26A0"; font-size: 13px; color: #cc7700; }
.sp-card-icon--info   { background: #e8f0ff; border-color: #99b3ff; color: #1a3a8a; }
.sp-card-icon--info::before   { content: "\2139"; color: #3355cc; }
.sp-card-icon--check  { background: #e8ffe8; border-color: #88cc88; color: #1a4a1a; }
.sp-card-icon--check::before  { content: "\2713"; color: #228822; }
.sp-card p { margin: 0; font-size: 14.5px; line-height: 1.9; color: var(--sy-black); font-weight: 500; }
.sp-card p + p { margin-top: 14px; }
.sp-card p strong { color: var(--sy-red); font-weight: 900; }

/* ── セクションタイトル ── */
.sp-section-title {
  margin: 28px 18px 0; font-size: 18px; font-weight: 900; letter-spacing: -.04em;
  color: var(--sy-black); display: flex; align-items: center; gap: 8px;
}
.sp-section-title::before {
  content: ""; display: inline-block; width: 6px; height: 22px;
  background: var(--sy-yellow); border: 1.5px solid var(--sy-black); flex-shrink: 0;
}

/* ── フォーム ── */
.sp-form { margin: 14px 18px 0; }
.sp-form label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 900; color: var(--sy-black); }
.sp-form input, .sp-form select, .sp-form textarea {
  display: block; width: 100%; box-sizing: border-box; padding: 12px 14px;
  border-radius: var(--sy-radius-sm); border: var(--sy-border); background: var(--sy-white);
  font-size: 14px; color: var(--sy-black); box-shadow: var(--sy-shadow-sm);
  outline: none; transition: border-color .15s; font-family: inherit;
}
.sp-form input:focus, .sp-form select:focus, .sp-form textarea:focus {
  border-color: #cc9900; box-shadow: 3px 3px 0 var(--sy-yellow);
}
.sp-form .sp-form-row { margin-bottom: 16px; }

/* ── ボタン ── */
.sp-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 20px 18px 0; padding: 15px 18px; border-radius: 999px;
  font-size: 15px; font-weight: 900; text-decoration: none;
  border: var(--sy-border); box-shadow: var(--sy-shadow);
  cursor: pointer; transition: transform .1s, box-shadow .1s; text-align: center;
}
.sp-btn:hover  { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--sy-black); }
.sp-btn:active { transform: translate(3px,3px);  box-shadow: 2px 2px 0 var(--sy-black); }
.sp-btn--primary { background: var(--sy-yellow); color: var(--sy-black); }
.sp-btn--dark    { background: var(--sy-black);  color: var(--sy-yellow); }
.sp-btn--green   { background: #117700; color: var(--sy-white); }
.sp-btn--red     { background: var(--sy-red);    color: var(--sy-white); }
.sp-btn--ghost   { background: var(--sy-white);  color: var(--sy-black); }

.sp-home-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 28px 18px 0; padding: 15px 18px; border-radius: 999px;
  background: var(--sy-black); color: var(--sy-yellow); font-size: 15px; font-weight: 900;
  text-decoration: none; border: var(--sy-border); box-shadow: var(--sy-shadow);
  transition: transform .1s, box-shadow .1s;
}
.sp-home-btn::before { content: "\2302"; font-size: 16px; }
.sp-home-btn:hover  { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--sy-black); }

/* ── リスト ── */
.sp-list { margin: 14px 18px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sp-list li a {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
  border: var(--sy-border); background: var(--sy-white);
  font-size: 14px; font-weight: 700; color: var(--sy-black); text-decoration: none;
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,.85)); transition: filter .1s, background .1s;
}
.sp-list li a::after { content: "\203A"; margin-left: auto; font-size: 20px; color: rgba(0,0,0,.3); font-weight: 900; }
.sp-list li a:hover  { background: #fffbe0; filter: drop-shadow(5px 5px 0 rgba(0,0,0,.85)); }

/* ================================================================
   共通コンポーネント（ページをまたいで使われる）
================================================================ */

/* --- ポイントバー共通 --- */
[class*="-point-bar"] {
  margin: 14px 18px 0; padding: 12px 16px; border-radius: var(--sy-radius-sm);
  background: var(--sy-black); border: var(--sy-border); box-shadow: var(--sy-shadow-sm);
  display: flex; align-items: center; gap: 12px;
}

/* ================================================================
   退会ページ（retire_sp_1）
================================================================ */
.retire-page .sp-head { background: var(--sy-black); }
.retire-page .sp-head h1 { color: var(--sy-white); }
.retire-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.retire-page .sp-head::before { content: "\26A0"; font-size: 72px; color: rgba(255,255,255,.08); }

.retire-lead { display: flex; align-items: flex-start; gap: 14px; margin: 18px 18px 0; padding: 16px; border-radius: var(--sy-radius); background: #f0fff0; border: var(--sy-border); box-shadow: var(--sy-shadow-sm); }
.retire-lead-step { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #117700; color: var(--sy-white); font-size: 11px; font-weight: 900; border: var(--sy-border); box-shadow: 2px 2px 0 var(--sy-black); }
.retire-lead-text { font-size: 13.5px; line-height: 1.85; color: var(--sy-black); font-weight: 500; padding-top: 2px; }
.retire-lead-text strong { color: var(--sy-red); font-weight: 900; }
.retire-mail-wrap { margin: 18px 18px 0; text-align: center; }
.retire-mail-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 18px 20px; border-radius: 999px; border: var(--sy-border); background: var(--sy-red); color: var(--sy-white); font-size: 17px; font-weight: 900; text-decoration: none; box-shadow: var(--sy-shadow); transition: transform .1s, box-shadow .1s; }
.retire-mail-btn::before { content: "\2709"; font-size: 18px; }
.retire-mail-btn:hover  { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--sy-black); }
.retire-mail-btn:active { transform: translate(3px,3px);  box-shadow: 2px 2px 0 var(--sy-black); }

.retire-carrier { margin: 24px 18px 0; }
.retire-carrier-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 900; color: rgba(0,0,0,.4); letter-spacing: .1em; }
.retire-carrier-title::before, .retire-carrier-title::after { content: ""; flex: 1; height: 1px; background: rgba(0,0,0,.15); }
.retire-carrier-card { padding: 16px 18px; border-radius: var(--sy-radius-sm); background: var(--sy-white); border: var(--sy-border); box-shadow: var(--sy-shadow-sm); font-size: 13px; line-height: 1.75; color: var(--sy-black); }
.retire-carrier-card a { display: inline-block; margin: 8px 0 4px; padding: 8px 16px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 12px; font-weight: 900; text-decoration: none; border: var(--sy-border); box-shadow: 2px 2px 0 rgba(0,0,0,.2); }
.retire-carrier-card input[type="text"] { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 10px 14px; border-radius: var(--sy-radius-sm); border: var(--sy-border); background: #f8f8f8; font-size: 13px; color: var(--sy-black); font-family: inherit; }

/* ================================================================
   登録ページ（regist_sp_1）
================================================================ */
.regist-page .sp-head { background: var(--sy-yellow); position: relative; overflow: hidden; padding-bottom: 16px; }
.regist-page .sp-head::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 16px; background: var(--sy-white); z-index: 1; }
.regist-page .sp-head h1    { color: var(--sy-black); position: relative; z-index: 2; }
.regist-page .sp-head-kicker { background: var(--sy-black); color: var(--sy-yellow); position: relative; z-index: 2; }
.regist-page .sp-head::before { content: "\2B50"; font-size: 120px; color: rgba(0,0,0,.05); position: absolute; right: -10px; top: -10px; z-index: 0; }

.regist-page .rg-notice-bar { margin: 18px 18px 0; padding: 12px 16px; border-radius: var(--sy-radius-sm); background: var(--sy-white); border: var(--sy-border); box-shadow: var(--sy-shadow-sm); display: flex; flex-direction: column; gap: 8px; }
.regist-page .rg-kiyaku { font-size: 13px; font-weight: 700; color: var(--sy-black); line-height: 1.7; }
.regist-page .rg-kiyaku a { color: #0033aa; font-weight: 900; text-decoration: underline; }
.regist-page .rg-billing-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; background: #fff0f0; border: 1.5px solid #ffaaaa; font-size: 12px; font-weight: 900; color: var(--sy-red); width: fit-content; }
.regist-page .rg-billing-badge::before { content: "\1F4C5"; font-size: 13px; }
.regist-page .rg-payment-wrap { margin: 16px 18px 0; border-radius: var(--sy-radius-sm); border: var(--sy-border); background: var(--sy-white); padding: 14px; display: flex; align-items: center; justify-content: center; }
.regist-page .rg-payment-wrap img { max-width: 200px; height: auto; display: block; }
.regist-page .rg-section-title { margin: 22px 18px 12px; display: flex; align-items: center; gap: 10px; }
.regist-page .rg-section-title-text { font-size: 14px; font-weight: 900; padding: 9px 18px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); box-shadow: var(--sy-shadow-sm); }
.regist-page .rg-section-title-line { flex: 1; height: 2px; background: linear-gradient(90deg, rgba(0,0,0,.2) 0%, transparent 100%); }
.regist-page .rg-course-list { margin: 0 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.regist-page .rg-course-card { border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); overflow: hidden; display: block; text-decoration: none; transition: transform .1s, box-shadow .1s; position: relative; }
.regist-page .rg-course-card:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--sy-black); }
.regist-page .rg-course-card--available .rg-course-card-head { background: #fffbe0; border-bottom: 2px solid rgba(0,0,0,.12); }
.regist-page .rg-course-card--registered { opacity: .6; }
.regist-page .rg-course-card--registered .rg-course-card-head { background: #f4f4f4; border-bottom: 2px solid #e0e0e0; }
.regist-page .rg-registered-badge { position: absolute; top: 12px; right: 12px; padding: 3px 10px; border-radius: 999px; background: #888; color: var(--sy-white); font-size: 10px; font-weight: 900; border: 1.5px solid var(--sy-black); }
.regist-page .rg-course-card-head { padding: 14px 18px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.regist-page .rg-course-point-wrap { flex: 1; min-width: 0; }
.regist-page .rg-course-point-label { font-size: 10px; font-weight: 900; color: #7a5000; margin-bottom: 2px; }
.regist-page .rg-course-point-label--registered { color: #888; }
.regist-page .rg-course-point { font-family: "Rubik", sans-serif; font-size: 26px; font-weight: 900; color: var(--sy-black); line-height: 1; }
.regist-page .rg-course-point span { font-size: 14px; font-weight: 700; color: #555; margin-left: 2px; }
.regist-page .rg-course-arrow { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sy-black); color: var(--sy-yellow); font-size: 20px; font-weight: 900; border: var(--sy-border); box-shadow: var(--sy-shadow-sm); }
.regist-page .rg-course-arrow--registered { background: #e0e0e0; box-shadow: none; color: #888; }
.regist-page .rg-course-card-body { padding: 10px 18px 14px; font-size: 13px; font-weight: 700; color: var(--sy-black); line-height: 1.7; }
.regist-page .rg-price-main  { font-size: 15px; font-weight: 900; color: var(--sy-black); }
.regist-page .rg-price-sub   { font-size: 12px; color: #555; }
.regist-page .rg-price-free  { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: #fffbe0; border: 1.5px solid var(--sy-yellow); color: #7a5000; font-size: 12px; font-weight: 900; margin-bottom: 4px; }
.regist-page .rg-price-free::before { content: "\1F381"; }
.regist-page .rg-course-cta { padding: 9px 18px; background: var(--sy-black); color: var(--sy-yellow); font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center; gap: 6px; }
.regist-page .rg-course-cta::after { content: "\00BB"; }
.regist-page .rg-service-card { margin: 22px 18px 0; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow-sm); overflow: hidden; }
.regist-page .rg-service-card-head { padding: 13px 18px; background: var(--sy-black); font-size: 13px; font-weight: 900; color: var(--sy-yellow); }
.regist-page .rg-service-link { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; text-decoration: none; font-size: 14px; font-weight: 700; color: var(--sy-black); border-bottom: 1px solid #f0f0f0; transition: background .12s; }
.regist-page .rg-service-link:hover { background: #fffbe0; }
.regist-page .rg-service-link::after { content: "\203A"; font-size: 20px; color: var(--sy-black); font-weight: 900; }

/* ================================================================
   クイズ回答ページ（answer-quiz-page）
================================================================ */
.answer-quiz-page .sp-head { background: #1a0a2a; }
.answer-quiz-page .sp-head h1 { color: var(--sy-white); }
.answer-quiz-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.answer-quiz-page .sp-head::before { content: "\1F4AC"; font-size: 68px; color: rgba(255,255,255,.08); }

.answer-quiz-page #notice { margin: 14px 18px 0; padding: 12px 16px; border-radius: var(--sy-radius-sm); background: #fff0f0; border: 2px dashed #ffaaaa; font-size: 13px; font-weight: 700; color: #990000; line-height: 1.8; }
.answer-quiz-page .ans-test-info { margin: 10px 18px 0; padding: 10px 14px; border-radius: var(--sy-radius-sm); background: #f8f8f8; border: 2px dashed rgba(0,0,0,.15); font-size: 11px; color: rgba(0,0,0,.45); font-weight: 600; line-height: 1.8; }
.answer-quiz-page .ans-header { margin: 18px 18px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.answer-quiz-page .ans-genre-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 11px; font-weight: 900; border: var(--sy-border); box-shadow: var(--sy-shadow-sm); }
.answer-quiz-page .ans-num-badge   { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: var(--sy-yellow); color: var(--sy-black); font-size: 11px; font-weight: 900; border: var(--sy-border); box-shadow: var(--sy-shadow-sm); }
.answer-quiz-page .ans-question-card { margin: 12px 18px 0; padding: 18px 20px; border-radius: var(--sy-radius); border: var(--sy-border); background: #fafaf0; box-shadow: var(--sy-shadow-sm); }
.answer-quiz-page .ans-question-label { display: inline-block; margin-bottom: 8px; padding: 2px 10px; border-radius: 4px; background: var(--sy-black); color: var(--sy-yellow); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.answer-quiz-page .ans-question-text { font-size: 14.5px; font-weight: 700; color: var(--sy-black); line-height: 1.9; word-break: break-all; margin: 0; }

@keyframes answer-quiz-page-correctPop { 0%{transform:scale(.7);opacity:0;} 60%{transform:scale(1.06);} 100%{transform:scale(1);opacity:1;} }
@keyframes answer-quiz-page-starSpin { 0%{transform:rotate(0deg) scale(1);} 50%{transform:rotate(180deg) scale(1.2);} 100%{transform:rotate(360deg) scale(1);} }
@keyframes answer-quiz-page-rainbowBg { 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }

.answer-quiz-page .ans-correct-card { margin: 14px 18px 0; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); overflow: hidden; animation: answer-quiz-page-correctPop .45s cubic-bezier(.22,.68,0,1.2) both; }
.answer-quiz-page .ans-correct-banner { padding: 26px 20px 22px; text-align: center; position: relative; overflow: hidden; background: linear-gradient(270deg, var(--sy-yellow), #ffee44, var(--sy-yellow)); background-size: 300% 300%; animation: answer-quiz-page-rainbowBg 3s ease infinite; }
.answer-quiz-page .ans-correct-banner::before { content: "\2605\2606\2605"; position: absolute; left: 0; right: 0; top: 8px; text-align: center; font-size: 14px; color: rgba(0,0,0,.3); letter-spacing: 6px; animation: answer-quiz-page-starSpin 3s linear infinite; }
.answer-quiz-page .ans-correct-circle { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--sy-white); border: 4px solid var(--sy-black); box-shadow: 4px 4px 0 var(--sy-black); margin-bottom: 10px; font-size: 36px; line-height: 1; }
.answer-quiz-page .ans-correct-label { display: block; font-family: "Rubik", sans-serif; font-size: 32px; font-weight: 900; color: var(--sy-black); letter-spacing: .06em; }
.answer-quiz-page .ans-correct-sub   { display: block; margin-top: 4px; font-size: 12px; font-weight: 900; color: rgba(0,0,0,.55); letter-spacing: .12em; }
.answer-quiz-page .ans-correct-body  { padding: 16px 20px; font-size: 15px; font-weight: 700; color: var(--sy-black); line-height: 1.8; border-bottom: 2px solid rgba(0,0,0,.08); background: #f8fff8; word-break: break-all; }
.answer-quiz-page .ans-desc { padding: 14px 20px 18px; display: flex; gap: 12px; align-items: flex-start; }
.answer-quiz-page .ans-desc-icon { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: #117700; color: var(--sy-white); font-size: 13px; font-weight: 900; border: var(--sy-border); box-shadow: 2px 2px 0 var(--sy-black); margin-top: 1px; }
.answer-quiz-page .ans-desc-text { font-size: 13.5px; font-weight: 600; color: var(--sy-black); line-height: 1.9; word-break: break-all; }

@keyframes answer-quiz-page-incorrectShake { 0%{transform:translateX(0);} 15%{transform:translateX(-8px) rotate(-2deg);} 30%{transform:translateX(8px) rotate(2deg);} 45%{transform:translateX(-6px) rotate(-1deg);} 60%{transform:translateX(6px) rotate(1deg);} 75%{transform:translateX(-3px);} 100%{transform:translateX(0);} }
@keyframes answer-quiz-page-slumpIn    { 0%{transform:translateY(-10px);opacity:0;} 100%{transform:translateY(0);opacity:1;} }
@keyframes answer-quiz-page-teardrop   { 0%,100%{transform:translateY(0) scale(1);opacity:.7;} 50%{transform:translateY(6px) scale(.85);opacity:.3;} }

.answer-quiz-page .ans-incorrect-card { margin: 14px 18px 0; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); overflow: hidden; animation: answer-quiz-page-incorrectShake .6s ease both; }
.answer-quiz-page .ans-incorrect-banner { padding: 24px 20px 20px; background: var(--sy-black); text-align: center; position: relative; overflow: hidden; }
.answer-quiz-page .ans-incorrect-banner::before { content: "\1F4A7\1F4A7\1F4A7"; position: absolute; top: 6px; left: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: 8px; animation: answer-quiz-page-teardrop 1.8s ease-in-out infinite; }
.answer-quiz-page .ans-incorrect-circle { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #222; border: 4px solid rgba(255,255,255,.2); margin-bottom: 10px; font-size: 34px; line-height: 1; animation: answer-quiz-page-slumpIn .4s .2s ease both; }
.answer-quiz-page .ans-incorrect-label { display: block; font-family: "Rubik", sans-serif; font-size: 26px; font-weight: 900; color: var(--sy-white); letter-spacing: .04em; }
.answer-quiz-page .ans-incorrect-sub   { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.45); letter-spacing: .14em; }
.answer-quiz-page .ans-incorrect-body  { padding: 14px 20px; font-size: 13.5px; font-weight: 600; color: #555; line-height: 1.8; border-bottom: 2px solid rgba(0,0,0,.08); background: #f8f8f8; word-break: break-all; }
.answer-quiz-page .ans-incorrect-body::before { content: "\3042\306A\305F\306E\56DE\7B54\A"; white-space: pre; display: block; font-size: 10px; font-weight: 900; color: #999; letter-spacing: .08em; margin-bottom: 4px; }
.answer-quiz-page .ans-back-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 20px 18px; padding: 14px 18px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 15px; font-weight: 900; text-decoration: none; border: var(--sy-border); box-shadow: var(--sy-shadow); transition: transform .1s, box-shadow .1s; }
.answer-quiz-page .ans-back-btn::before { content: "\21A9"; font-size: 16px; color: var(--sy-yellow); }
.answer-quiz-page .ans-back-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--sy-black); }
.answer-quiz-page .btn_grid2 { display: flex; gap: 10px; margin: 20px 18px 0; }
.answer-quiz-page .next_btn { flex: 1; display: flex; align-items: center; justify-content: center; padding: 14px 18px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 15px; font-weight: 900; text-decoration: none; border: var(--sy-border); box-shadow: var(--sy-shadow-sm); transition: transform .1s, box-shadow .1s; }
.answer-quiz-page .next_btn:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--sy-black); }
.answer-quiz-page .breadcrumbs { margin: 16px 18px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12px; font-weight: 700; color: #555; }
.answer-quiz-page .breadcrumbs a { color: var(--sy-black); text-decoration: none; font-weight: 900; }
.answer-quiz-page .breadcrumbs a:hover { text-decoration: underline; }
.answer-quiz-page .ans-invalid { margin: 22px 18px 0; padding: 28px 20px; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow-sm); text-align: center; font-size: 14px; font-weight: 700; color: #888; }
.answer-quiz-page .ans-invalid::before { content: "\26A0"; display: block; font-size: 36px; color: var(--sy-yellow); margin-bottom: 10px; }

/* ================================================================
   退会確認（confirm-retire-page）
================================================================ */
.confirm-retire-page .sp-head { background: var(--sy-black); }
.confirm-retire-page .sp-head h1 { color: var(--sy-white); }
.confirm-retire-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.confirm-retire-page .sp-head::before { content: "?"; font-family: "Rubik", sans-serif; font-size: 88px; color: rgba(255,255,255,.08); right: 20px; }

.confirm-retire-page .confirm-card { margin: 18px 18px 0; padding: 20px 18px; border-radius: var(--sy-radius); background: var(--sy-white); border: var(--sy-border); box-shadow: var(--sy-shadow); font-size: 13.5px; line-height: 1.82; color: var(--sy-black); font-weight: 500; }
.confirm-retire-page .confirm-question { font-size: 17px; font-weight: 900; color: var(--sy-black); margin-bottom: 10px; }
.confirm-retire-page .confirm-actions  { margin: 22px 18px 0; display: flex; flex-direction: column; gap: 12px; }
.confirm-retire-page .confirm-cancel   { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 20px; border-radius: 999px; border: var(--sy-border); background: #117700; color: var(--sy-white); font-size: 17px; font-weight: 900; text-decoration: none; box-shadow: var(--sy-shadow); transition: transform .1s, box-shadow .1s; }
.confirm-retire-page .confirm-cancel::before { content: "\2713"; font-size: 16px; }
.confirm-retire-page .confirm-cancel:hover  { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--sy-black); }
.confirm-retire-page .confirm-cancel:active { transform: translate(3px,3px);  box-shadow: 2px 2px 0 var(--sy-black); }
.confirm-retire-page .confirm-proceed  { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 20px; border-radius: 999px; border: 2.5px solid rgba(180,0,0,.5); background: var(--sy-white); color: var(--sy-red); font-size: 14px; font-weight: 800; text-decoration: none; box-shadow: 3px 3px 0 rgba(180,0,0,.2); transition: transform .1s, background .1s; }
.confirm-retire-page .confirm-proceed::before { content: "\203A"; font-size: 16px; }
.confirm-retire-page .confirm-proceed:hover  { background: #fff0f0; transform: translate(-1px,-1px); }
.confirm-retire-page .confirm-proceed:active { transform: translate(2px,2px); }

/* ================================================================
   コンテンツ一覧（contents-list-page）
================================================================ */
.contents-list-page .sp-head { background: #1a1a3a; }
.contents-list-page .sp-head h1 { color: var(--sy-white); font-size: 18px; }
.contents-list-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.contents-list-page .sp-head::before { content: "\1F4DA"; font-size: 68px; color: rgba(255,255,255,.08); }
.contents-list-page .sp-head-desc { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.7); line-height: 1.7; }
.contents-list-page .cl-point-bar { margin: 14px 18px 0; padding: 12px 16px; border-radius: var(--sy-radius-sm); background: var(--sy-black); border: var(--sy-border); box-shadow: var(--sy-shadow-sm); display: flex; align-items: center; gap: 12px; }
.contents-list-page .cl-point-bar::before { content: "\2B50"; font-size: 20px; flex-shrink: 0; }
.contents-list-page .cl-point-label { font-size: 11px; font-weight: 900; color: rgba(255,255,255,.55); letter-spacing: .08em; }
.contents-list-page .cl-point-val  { font-family: "Rubik", sans-serif; font-size: 20px; font-weight: 900; color: var(--sy-yellow); line-height: 1; }
.contents-list-page .cl-point-unit { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.6); margin-left: 3px; }
.contents-list-page .cl-diff-title { margin: 20px 18px 8px; font-size: 13px; font-weight: 900; color: var(--sy-black); display: flex; align-items: center; gap: 8px; }
.contents-list-page .cl-diff-title::before { content: ""; display: inline-block; width: 5px; height: 18px; background: var(--sy-yellow); border: 1.5px solid var(--sy-black); flex-shrink: 0; }
.contents-list-page .cl-diff-list { margin: 0 18px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.contents-list-page .cl-diff-list li a { display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 999px; border: var(--sy-border); background: var(--sy-white); font-size: 13px; font-weight: 900; color: var(--sy-black); text-decoration: none; box-shadow: var(--sy-shadow-sm); transition: transform .1s, box-shadow .1s, background .1s; position: relative; }
.contents-list-page .cl-diff-list li a:hover { background: #fffbe0; transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--sy-black); }
.contents-list-page .cl-diff-list li a.cl-diff--active { background: var(--sy-black); color: var(--sy-yellow); padding-left: 30px; }
.contents-list-page .cl-diff-list li a.cl-diff--active::before { content: "\2713"; position: absolute; left: 13px; font-size: 12px; font-weight: 900; color: var(--sy-yellow); }
.contents-list-page .cl-diff-list li a.cl-diff--active:hover { background: var(--sy-black); }
.contents-list-page .cl-current-level { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 5px 13px 5px 11px; border-radius: 999px; background: var(--sy-yellow); color: var(--sy-black); font-size: 12.5px; font-weight: 900; box-shadow: 2px 2px 0 var(--sy-black); }
.contents-list-page .cl-current-level::before { content: "\1F3AF"; font-size: 13px; }
.contents-list-page .cl-section-title { margin: 20px 18px 10px; padding: 10px 16px; border-radius: var(--sy-radius-sm); background: var(--sy-black); color: var(--sy-yellow); font-size: 13px; font-weight: 900; letter-spacing: .06em; }
.contents-list-page .cl-pagination { margin: 0 18px; }
.contents-list-page .cl-list { margin: 0 18px; display: flex; flex-direction: column; gap: 8px; }
.contents-list-page .cl-item { display: block; padding: 14px 16px; border-radius: var(--sy-radius-sm); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow-sm); text-decoration: none; transition: transform .1s, box-shadow .1s; position: relative; overflow: hidden; }
.contents-list-page .cl-item:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--sy-black); }
.contents-list-page .cl-item--done { border-color: #117700; }
.contents-list-page .cl-item--done:hover { box-shadow: 5px 5px 0 #117700; }
.contents-list-page .cl-item-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.contents-list-page .cl-item-genre { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; background: #fffbe0; color: #7a5000; font-size: 10px; font-weight: 900; border: 1.5px solid var(--sy-yellow); }
.contents-list-page .cl-item-num { font-family: "Rubik", sans-serif; font-size: 10px; font-weight: 900; color: #888; }
.contents-list-page .cl-item-question { font-size: 14px; font-weight: 700; color: var(--sy-black); line-height: 1.7; word-break: break-all; margin-bottom: 8px; }
.contents-list-page .cl-item-status { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.contents-list-page .cl-status-done { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: #e8ffe8; color: #117700; font-size: 11px; font-weight: 900; border: 1.5px solid #88cc88; }
.contents-list-page .cl-status-done::before { content: "\2713"; }
.contents-list-page .cl-status-new  { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: #f0f4ff; color: #1a2a8a; font-size: 11px; font-weight: 900; border: 1.5px solid #aabbff; }
.contents-list-page .cl-status-new::before  { content: "\25CB"; }
.contents-list-page .cl-item-point { font-size: 11px; font-weight: 700; color: #555; }
.contents-list-page .cl-empty { margin: 0 18px; padding: 28px 20px; border-radius: var(--sy-radius); border: 2px dashed rgba(0,0,0,.15); background: #f8f8f8; text-align: center; font-size: 14px; font-weight: 700; color: #888; }
.contents-list-page .cl-empty::before { content: "\1F4ED"; display: block; font-size: 34px; margin-bottom: 10px; }

/* ================================================================
   ダウンロード系（detail-ani / detail-fla-utas / detail-img）
   ページごとのアクセントカラーを除き構造は共通
================================================================ */
.detail-ani-page .sp-head       { background: #2a0a0a; }
.detail-fla-utas-page .sp-head  { background: #1a0a2a; }
.detail-img-page .sp-head       { background: #0a1a2a; }
.detail-ani-page .sp-head h1,
.detail-fla-utas-page .sp-head h1,
.detail-img-page .sp-head h1    { color: var(--sy-white); }
.detail-ani-page .sp-head-kicker,
.detail-fla-utas-page .sp-head-kicker,
.detail-img-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.detail-ani-page .sp-head::before       { content: "\1F3A8"; font-size: 68px; color: rgba(255,255,255,.08); }
.detail-fla-utas-page .sp-head::before  { content: "\1F3B5"; font-size: 68px; color: rgba(255,255,255,.08); }
.detail-img-page .sp-head::before       { content: "\1F4E5"; font-size: 68px; color: rgba(255,255,255,.08); }

.detail-ani-page #notice,
.detail-fla-utas-page #notice,
.detail-img-page #notice { margin: 14px 18px 0; padding: 12px 16px; border-radius: var(--sy-radius-sm); background: #fff0f0; border: 2px dashed #ffaaaa; font-size: 13px; font-weight: 700; color: #990000; line-height: 1.8; }
.detail-ani-page #notice:empty,
.detail-fla-utas-page #notice:empty { display: none; }
.detail-ani-page .dl-test-info,
.detail-fla-utas-page .dl-test-info,
.detail-img-page .dl-test-info { margin: 10px 18px 0; padding: 10px 14px; border-radius: var(--sy-radius-sm); background: #f8f8f8; border: 2px dashed rgba(0,0,0,.15); font-size: 11px; color: rgba(0,0,0,.45); font-weight: 600; line-height: 1.8; }
.detail-ani-page .dl-card,
.detail-img-page .dl-card { margin: 18px 18px 0; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); overflow: hidden; }
.detail-fla-utas-page .dl-music-card { margin: 18px 18px 0; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); overflow: hidden; }
.detail-img-page .dl-vote-banner { padding: 8px 16px; background: var(--sy-black); text-align: center; font-size: 11px; font-weight: 900; color: var(--sy-yellow); letter-spacing: .08em; }

.detail-ani-page .dl-image-wrap,
.detail-img-page .dl-image-wrap { padding: 20px 20px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.detail-ani-page .dl-image-wrap img,
.detail-img-page .dl-image-wrap img { display: block; max-width: 100%; border-radius: var(--sy-radius-sm); border: var(--sy-border); box-shadow: var(--sy-shadow-sm); }

.detail-ani-page .dl-point-row,
.detail-fla-utas-page .dl-point-row,
.detail-img-page .dl-point-row { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; background: #fffbe0; border-top: var(--sy-border); border-bottom: var(--sy-border); }
.detail-ani-page .dl-point-label,
.detail-fla-utas-page .dl-point-label,
.detail-img-page .dl-point-label { font-size: 12px; font-weight: 700; color: #7a5000; }
.detail-ani-page .dl-point-val,
.detail-fla-utas-page .dl-point-val,
.detail-img-page .dl-point-val { font-family: "Rubik", sans-serif; font-size: 22px; font-weight: 900; color: var(--sy-black); }
.detail-ani-page .dl-point-unit,
.detail-fla-utas-page .dl-point-unit,
.detail-img-page .dl-point-unit { font-size: 12px; font-weight: 700; color: #7a5000; }

.detail-ani-page .dl-btn-wrap,
.detail-fla-utas-page .dl-btn-wrap,
.detail-img-page .dl-btn-wrap { padding: 16px 20px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.detail-ani-page .dl-btn,
.detail-fla-utas-page .dl-btn,
.detail-img-page .dl-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 17px 20px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 17px; font-weight: 900; text-decoration: none; border: var(--sy-border); box-shadow: var(--sy-shadow); transition: transform .1s, box-shadow .1s; }
.detail-ani-page .dl-btn::before,
.detail-fla-utas-page .dl-btn::before,
.detail-img-page .dl-btn::before { content: "\1F4E5"; font-size: 18px; }
.detail-ani-page .dl-btn--redownload,
.detail-fla-utas-page .dl-btn--redownload,
.detail-img-page .dl-btn--redownload { background: #117700; color: var(--sy-white); }
.detail-ani-page .dl-btn--redownload::before,
.detail-fla-utas-page .dl-btn--redownload::before,
.detail-img-page .dl-btn--redownload::before { content: "\1F504"; }
.detail-ani-page .dl-btn:hover,
.detail-fla-utas-page .dl-btn:hover,
.detail-img-page .dl-btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--sy-black); }
.detail-ani-page .dl-confirm-note,
.detail-fla-utas-page .dl-confirm-note,
.detail-img-page .dl-confirm-note { font-size: 12px; font-weight: 600; color: #555; text-align: center; line-height: 1.8; }

.detail-fla-utas-page .dl-music-head { padding: 20px 20px 16px; background: #fafaf0; border-bottom: var(--sy-border); text-align: center; }
.detail-fla-utas-page .dl-music-kicker { display: inline-block; margin-bottom: 10px; padding: 3px 12px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 10px; font-weight: 900; border: var(--sy-border); box-shadow: 2px 2px 0 var(--sy-black); }
.detail-fla-utas-page .dl-music-title { font-size: 18px; font-weight: 900; color: var(--sy-black); line-height: 1.4; word-break: break-all; margin: 0; }
.detail-fla-utas-page .dl-meta { padding: 4px 0; }
.detail-fla-utas-page .dl-meta-row { display: flex; align-items: flex-start; padding: 11px 20px; border-bottom: 1.5px solid rgba(0,0,0,.07); gap: 10px; }
.detail-fla-utas-page .dl-meta-row:last-child { border-bottom: none; }
.detail-fla-utas-page .dl-meta-label { flex-shrink: 0; font-size: 11px; font-weight: 900; color: #888; width: 72px; padding-top: 2px; }
.detail-fla-utas-page .dl-meta-val   { font-size: 14px; font-weight: 700; color: var(--sy-black); line-height: 1.6; word-break: break-all; flex: 1; }

/* ポイント不足 共通 */
.detail-ani-page .dl-no-point,
.detail-fla-utas-page .dl-no-point,
.detail-img-page .dl-no-point { padding: 24px 20px; text-align: center; }
.detail-ani-page .dl-no-point::before,
.detail-fla-utas-page .dl-no-point::before,
.detail-img-page .dl-no-point::before { content: "\1F4B0"; display: block; font-size: 40px; margin-bottom: 10px; }
.detail-ani-page .dl-no-point-current,
.detail-fla-utas-page .dl-no-point-current,
.detail-img-page .dl-no-point-current { display: inline-block; margin-bottom: 12px; padding: 6px 20px; border-radius: 999px; background: var(--sy-yellow); color: var(--sy-black); font-family: "Rubik", sans-serif; font-size: 18px; font-weight: 900; border: var(--sy-border); box-shadow: var(--sy-shadow-sm); }
.detail-ani-page .dl-no-point p,
.detail-fla-utas-page .dl-no-point p,
.detail-img-page .dl-no-point p { margin: 0 0 16px; font-size: 14px; font-weight: 700; color: var(--sy-black); line-height: 1.9; }
.detail-ani-page .dl-add-btn,
.detail-fla-utas-page .dl-add-btn,
.detail-img-page .dl-add-point-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 15px; font-weight: 900; text-decoration: none; border: var(--sy-border); box-shadow: var(--sy-shadow); transition: transform .1s, box-shadow .1s; }
.detail-ani-page .dl-add-btn::before,
.detail-fla-utas-page .dl-add-btn::before,
.detail-img-page .dl-add-point-btn::before { content: "\2B50"; }
.detail-ani-page .dl-add-btn:hover,
.detail-fla-utas-page .dl-add-btn:hover,
.detail-img-page .dl-add-point-btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--sy-black); }

/* ================================================================
   詳細ページ（detail-page）
================================================================ */
.detail-page .sp-head { background: var(--sy-black); }
.detail-page .sp-head h1 { color: var(--sy-white); font-size: 18px; }
.detail-page .sp-head h2 { color: rgba(255,255,255,.6); font-size: 13px; font-weight: 600; margin: 4px 0 0; }
.detail-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.detail-page .sp-head::before { content: "\1F4C4"; font-size: 68px; color: rgba(255,255,255,.07); }
.detail-page .det-msg { margin: 14px 18px 0; padding: 12px 16px; border-radius: var(--sy-radius-sm); background: #fffbe0; border: 2px solid var(--sy-yellow); font-size: 13px; font-weight: 700; color: #7a5000; line-height: 1.8; }
.detail-page .det-msg:empty { display: none; }
.detail-page .det-card { margin: 14px 18px 0; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow-sm); overflow: hidden; }
.detail-page .det-subtitle { margin: 14px 18px 0; padding: 10px 16px; border-radius: var(--sy-radius-sm); background: #f4f4f4; border: 2px solid rgba(0,0,0,.1); font-size: 13px; font-weight: 900; color: var(--sy-black); }
.detail-page table.detail { width: 100%; border-collapse: collapse; }
.detail-page table.detail tr { border-bottom: 1.5px solid rgba(0,0,0,.07); }
.detail-page table.detail tr:last-child { border-bottom: none; }
.detail-page table.detail th { display: block; padding: 10px 16px 2px; font-size: 11px; font-weight: 900; color: #888; letter-spacing: .06em; text-align: left; }
.detail-page table.detail td { display: block; padding: 0 16px 12px; font-size: 14px; font-weight: 700; color: var(--sy-black); word-break: break-all; line-height: 1.7; }
.detail-page .det-actions { margin: 18px 18px 0; display: flex; flex-direction: column; gap: 10px; }
.detail-page .det-actions input[type="button"] { display: block; width: 100%; padding: 15px 18px; border-radius: 999px; font-size: 15px; font-weight: 900; border: var(--sy-border); box-shadow: var(--sy-shadow); cursor: pointer; transition: transform .1s, box-shadow .1s; font-family: inherit; }
.detail-page .det-actions input.commit { background: var(--sy-black); color: var(--sy-yellow); }
.detail-page .det-actions input.gray  { background: var(--sy-red);   color: var(--sy-white); }
.detail-page .det-actions input[type="button"]:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--sy-black); }
.detail-page .det-nav { margin: 18px 18px 0; display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; }
.detail-page .det-nav li a { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: var(--sy-radius-sm); border: var(--sy-border); background: var(--sy-white); font-size: 14px; font-weight: 700; color: var(--sy-black); text-decoration: none; box-shadow: var(--sy-shadow-sm); transition: transform .1s, box-shadow .1s; }
.detail-page .det-nav li a::after { content: "\203A"; font-size: 18px; color: rgba(0,0,0,.3); font-weight: 900; }
.detail-page .det-nav li a:hover { background: #fffbe0; transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--sy-black); }

/* ================================================================
   クイズ詳細ページ（detail-quiz-page）
================================================================ */
.detail-quiz-page .sp-head { background: #1a0a2a; }
.detail-quiz-page .sp-head h1 { color: var(--sy-white); }
.detail-quiz-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.detail-quiz-page .sp-head::before { content: "\2753"; font-size: 72px; color: rgba(255,255,255,.08); }
.detail-quiz-page #notice { margin: 14px 18px 0; padding: 12px 16px; border-radius: var(--sy-radius-sm); background: #fff0f0; border: 2px dashed #ffaaaa; font-size: 13px; font-weight: 700; color: #990000; line-height: 1.8; }
.detail-quiz-page .quiz-test-info { margin: 10px 18px 0; padding: 10px 14px; border-radius: var(--sy-radius-sm); background: #f8f8f8; border: 2px dashed rgba(0,0,0,.15); font-size: 11px; color: rgba(0,0,0,.45); font-weight: 600; line-height: 1.8; }
.detail-quiz-page .quiz-header { margin: 18px 18px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-quiz-page .quiz-genre-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 11px; font-weight: 900; border: var(--sy-border); box-shadow: var(--sy-shadow-sm); }
.detail-quiz-page .quiz-num-badge   { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: var(--sy-yellow); color: var(--sy-black); font-size: 11px; font-weight: 900; border: var(--sy-border); box-shadow: var(--sy-shadow-sm); }
.detail-quiz-page .quiz-question-card { margin: 12px 18px 0; padding: 22px 20px; border-radius: var(--sy-radius); border: var(--sy-border); background: #fafaf0; box-shadow: var(--sy-shadow); position: relative; overflow: hidden; }
.detail-quiz-page .quiz-question-card::before { content: "Q"; position: absolute; right: 14px; top: 10px; font-family: "Rubik", sans-serif; font-size: 72px; font-weight: 900; color: rgba(0,0,0,.05); line-height: 1; pointer-events: none; }
.detail-quiz-page .quiz-question-label { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 4px; background: var(--sy-black); color: var(--sy-yellow); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.detail-quiz-page .quiz-question-text { font-size: 16px; font-weight: 800; color: var(--sy-black); line-height: 2; word-break: break-all; }
.detail-quiz-page .quiz-answers { margin: 14px 18px 0; display: flex; flex-direction: column; gap: 10px; counter-reset: answer-counter; }
.detail-quiz-page .detail_answer { display: flex; align-items: center; gap: 14px; padding: 15px 18px 15px 14px; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow-sm); font-size: 15px; font-weight: 700; color: var(--sy-black); text-decoration: none; transition: transform .1s, box-shadow .1s; word-break: break-all; line-height: 1.6; counter-increment: answer-counter; }
.detail-quiz-page .detail_answer::before { content: counter(answer-counter, upper-alpha); flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; font-family: "Rubik", sans-serif; font-size: 15px; font-weight: 900; border: var(--sy-border); box-shadow: 2px 2px 0 rgba(0,0,0,.15); }
.detail-quiz-page .detail_answer:nth-child(1)::before { background: var(--sy-black);  color: var(--sy-yellow); }
.detail-quiz-page .detail_answer:nth-child(2)::before { background: #222244; color: #aabbff; }
.detail-quiz-page .detail_answer:nth-child(3)::before { background: #114400; color: #aaffaa; }
.detail-quiz-page .detail_answer:nth-child(4)::before { background: #442200; color: #ffddaa; }
.detail-quiz-page .detail_answer:nth-child(5)::before { background: #440000; color: #ffaaaa; }
.detail-quiz-page .detail_answer:nth-child(6)::before { background: #220033; color: #ddaaff; }
.detail-quiz-page .detail_answer:nth-child(7)::before { background: #002233; color: #aaddff; }
.detail-quiz-page .detail_answer:nth-child(1) { border-left: 5px solid var(--sy-black); }
.detail-quiz-page .detail_answer:nth-child(2) { border-left: 5px solid #3355cc; }
.detail-quiz-page .detail_answer:nth-child(3) { border-left: 5px solid #117700; }
.detail-quiz-page .detail_answer:nth-child(4) { border-left: 5px solid #cc7700; }
.detail-quiz-page .detail_answer:nth-child(5) { border-left: 5px solid var(--sy-red); }
.detail-quiz-page .detail_answer:nth-child(6) { border-left: 5px solid #7700cc; }
.detail-quiz-page .detail_answer:nth-child(7) { border-left: 5px solid #0077cc; }
.detail-quiz-page .detail_answer:hover { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 var(--sy-black); }
.detail-quiz-page .btn_grid2 { display: flex; gap: 10px; margin: 20px 18px 0; }
.detail-quiz-page .next_btn { flex: 1; display: flex; align-items: center; justify-content: center; padding: 14px 18px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 15px; font-weight: 900; text-decoration: none; border: var(--sy-border); box-shadow: var(--sy-shadow-sm); transition: transform .1s, box-shadow .1s; }
.detail-quiz-page .next_btn:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--sy-black); }
.detail-quiz-page .breadcrumbs { margin: 16px 18px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12px; font-weight: 700; color: #555; }
.detail-quiz-page .breadcrumbs a { color: var(--sy-black); text-decoration: none; font-weight: 900; }
.detail-quiz-page .breadcrumbs a:hover { text-decoration: underline; }
.detail-quiz-page .quiz-no-point { margin: 18px 18px 0; padding: 28px 22px; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); text-align: center; }
.detail-quiz-page .quiz-no-point::before { content: "\1F4B0"; display: block; font-size: 44px; margin-bottom: 14px; }
.detail-quiz-page .quiz-no-point p { margin: 0 0 18px; font-size: 14px; font-weight: 700; color: var(--sy-black); line-height: 1.9; }
.detail-quiz-page .quiz-no-point .quiz-point-val { display: inline-block; margin-bottom: 14px; padding: 6px 20px; border-radius: 999px; background: var(--sy-yellow); color: var(--sy-black); font-family: "Rubik", sans-serif; font-size: 20px; font-weight: 900; border: var(--sy-border); box-shadow: var(--sy-shadow-sm); }
.detail-quiz-page .quiz-add-point-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 15px; font-weight: 900; text-decoration: none; border: var(--sy-border); box-shadow: var(--sy-shadow); transition: transform .1s, box-shadow .1s; }
.detail-quiz-page .quiz-add-point-btn::before { content: "\2B50"; }
.detail-quiz-page .quiz-add-point-btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--sy-black); }

/* ================================================================
   ガイド（guide-page）/ 対応機種（kishu-page）
================================================================ */
.guide-page .sp-head { background: #0a1a3a; }
.kishu-page .sp-head { background: var(--sy-black); }
.guide-page .sp-head h1, .kishu-page .sp-head h1 { color: var(--sy-white); }
.guide-page .sp-head-kicker, .kishu-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.guide-page .sp-head::before { content: "\1F4D6"; font-size: 68px; color: rgba(255,255,255,.08); }
.kishu-page .sp-head::before { content: "\1F4F1"; font-size: 72px; color: rgba(255,255,255,.08); }

.guide-page .guide-section { margin: 14px 18px 0; display: flex; flex-direction: column; gap: 10px; }
.guide-page .guide-block { border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow-sm); overflow: hidden; }
.guide-page .guide-block-head { display: flex; align-items: center; gap: 10px; padding: 13px 18px; background: #fffbe0; border-bottom: var(--sy-border); }
.guide-page .guide-block-icon { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sy-black); color: var(--sy-yellow); font-size: 15px; border: var(--sy-border); box-shadow: 2px 2px 0 var(--sy-black); }
.guide-page .guide-block-title { font-size: 14px; font-weight: 900; color: var(--sy-black); }
.guide-page .guide-block-body { padding: 16px 18px; font-size: 13.5px; line-height: 1.9; color: var(--sy-black); font-weight: 500; }
.guide-page .guide-carrier { margin-bottom: 14px; }
.guide-page .guide-carrier:last-child { margin-bottom: 0; }
.guide-page .guide-carrier-label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 4px 12px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 12px; font-weight: 900; border: var(--sy-border); box-shadow: var(--sy-shadow-sm); }
.guide-page .guide-plan-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: var(--sy-radius-sm); border: var(--sy-border); background: #fafaf0; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--sy-black); }
.guide-page .guide-plan-row:last-child { margin-bottom: 0; }
.guide-page .guide-plan-name { display: flex; align-items: center; gap: 8px; }
.guide-page .guide-plan-name::before { content: "\2605"; color: var(--sy-yellow); font-size: 14px; }
.guide-page .guide-plan-price { font-family: "Rubik", sans-serif; font-size: 13px; font-weight: 900; color: var(--sy-black); }
.guide-page .guide-notes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.guide-page .guide-notes li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.8; padding: 10px 12px; border-radius: var(--sy-radius-sm); background: #fafaf0; border: 1.5px solid rgba(0,0,0,.1); }
.guide-page .guide-notes li::before { content: "\203B"; flex-shrink: 0; font-weight: 900; color: var(--sy-black); margin-top: 1px; }

.kishu-page .kishu-card { margin: 18px 18px 0; padding: 28px 22px; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); text-align: center; position: relative; overflow: hidden; }
.kishu-page .kishu-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--sy-yellow) 0 6px, var(--sy-black) 6px 12px); }
.kishu-page .kishu-os-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 20px; }
.kishu-page .kishu-os-badge { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 20px; border-radius: var(--sy-radius-sm); border: var(--sy-border); background: #fafaf0; box-shadow: var(--sy-shadow-sm); min-width: 90px; }
.kishu-page .kishu-os-icon  { font-size: 32px; line-height: 1; }
.kishu-page .kishu-os-label { font-family: "Rubik", sans-serif; font-size: 13px; font-weight: 900; color: var(--sy-black); }
.kishu-page .kishu-slash { font-family: "Rubik", sans-serif; font-size: 28px; font-weight: 900; color: rgba(0,0,0,.2); }
.kishu-page .kishu-desc  { font-size: 14px; font-weight: 600; color: var(--sy-black); line-height: 1.9; }
.kishu-page .kishu-note  { display: inline-block; margin-top: 14px; padding: 8px 16px; border-radius: 8px; background: #fffbe0; border: 2px solid var(--sy-yellow); font-size: 12px; font-weight: 700; color: #7a5000; }
.kishu-page .kishu-note::before { content: "\26A0\0020"; }
.kishu-page .kishu-test-box { margin: 14px 18px 0; padding: 16px 18px; border-radius: var(--sy-radius-sm); border: 2px dashed rgba(0,0,0,.25); background: #f8f8f8; font-size: 12px; line-height: 1.8; color: rgba(0,0,0,.55); font-weight: 600; }
.kishu-page .kishu-test-box::before { content: "TEST INFO"; display: inline-block; margin-bottom: 8px; padding: 2px 10px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 10px; font-weight: 900; letter-spacing: .1em; }

/* ================================================================
   利用規約（kiyaku-page）
================================================================ */
.kiyaku-page .sp-head { background: #0a1a3a; }
.kiyaku-page .sp-head h1 { color: var(--sy-white); }
.kiyaku-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.kiyaku-page .sp-head::before { content: "\1F4DC"; font-size: 68px; color: rgba(255,255,255,.08); }
.kiyaku-page .kiyaku-intro { margin: 18px 18px 0; padding: 16px 18px; border-radius: var(--sy-radius); border: var(--sy-border); background: #fffbe0; box-shadow: var(--sy-shadow-sm); font-size: 13.5px; font-weight: 700; color: var(--sy-black); line-height: 1.8; }
.kiyaku-page .kiyaku-intro::before { content: "\26A0"; margin-right: 6px; color: #cc7700; }
.kiyaku-page .kiyaku-list { margin: 14px 18px 0; display: flex; flex-direction: column; gap: 10px; }
.kiyaku-page .kiyaku-item { border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow-sm); overflow: hidden; }
.kiyaku-page .kiyaku-item-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--sy-black); border-bottom: var(--sy-border); }
.kiyaku-page .kiyaku-item-num { flex-shrink: 0; display: grid; place-items: center; padding: 0 8px; height: 26px; border-radius: 4px; background: var(--sy-yellow); color: var(--sy-black); font-family: "Rubik", sans-serif; font-size: 11px; font-weight: 900; white-space: nowrap; }
.kiyaku-page .kiyaku-item-title { font-size: 14px; font-weight: 900; color: var(--sy-white); line-height: 1.4; }
.kiyaku-page .kiyaku-item-body { padding: 16px 18px; font-size: 13px; line-height: 1.9; color: var(--sy-black); font-weight: 500; }
.kiyaku-page .kiyaku-item-body p { margin: 0 0 8px; }
.kiyaku-page .kiyaku-item-body p:last-child { margin-bottom: 0; }
.kiyaku-page .kiyaku-price-box { margin-top: 10px; padding: 10px 14px; border-radius: var(--sy-radius-sm); background: #fffbe0; border: 2px solid var(--sy-yellow); font-size: 13px; font-weight: 700; color: var(--sy-black); }
.kiyaku-page .kiyaku-price-label { display: inline-block; margin-bottom: 6px; font-size: 12px; font-weight: 900; color: #7a5000; }

/* ================================================================
   ジャンル一覧（list-page）
================================================================ */
.list-page .sp-head { background: #0a2a1a; }
.list-page .sp-head h1 { color: var(--sy-white); }
.list-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.list-page .sp-head::before { content: "\1F4DA"; font-size: 68px; color: rgba(255,255,255,.08); }
.list-page .gl-empty { margin: 18px 18px 0; padding: 30px 20px; border-radius: var(--sy-radius); border: 2px dashed rgba(0,0,0,.15); background: #f8f8f8; text-align: center; font-size: 14px; font-weight: 700; color: #888; }
.list-page .gl-empty::before { content: "\1F4ED"; display: block; font-size: 36px; margin-bottom: 10px; }
.list-page .gl-pagination { margin: 14px 18px 0; }
.list-page .gl-list { margin: 10px 18px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.list-page .gl-list li a { display: flex; align-items: center; padding: 16px 18px; border-radius: var(--sy-radius-sm); border: var(--sy-border); background: var(--sy-white); font-size: 15px; font-weight: 900; color: var(--sy-black); text-decoration: none; box-shadow: var(--sy-shadow-sm); transition: transform .1s, box-shadow .1s; position: relative; overflow: hidden; }
.list-page .gl-list li a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--sy-yellow); border-right: 1.5px solid var(--sy-black); }
.list-page .gl-list li a::after  { content: "\203A"; margin-left: auto; font-size: 20px; font-weight: 900; color: rgba(0,0,0,.3); flex-shrink: 0; }
.list-page .gl-list li a:hover   { background: #fffbe0; transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--sy-black); }

/* ================================================================
   ログイン系（login-id / login-info / login-menu / login-ng-id）
================================================================ */
@keyframes sy-pop { 0%{transform:scale(.7);opacity:0;} 70%{transform:scale(1.08);opacity:1;} 100%{transform:scale(1);opacity:1;} }
@keyframes sy-nudge { 0%,100%{transform:translateX(0);} 50%{transform:translateX(5px);} }

/* 共通ヘッド */
.sp-page.login-id-page,
.sp-page.login-info-page,
.sp-page.login-menu-page,
.sp-page.no-login-page { background: #f8f5e0; }
.login-id-page .sp-head,
.login-info-page .sp-head,
.login-menu-page .sp-head,
.no-login-page .sp-head { background: var(--sy-black); }
.login-id-page .sp-head h1,
.login-info-page .sp-head h1,
.login-menu-page .sp-head h1,
.no-login-page .sp-head h1 { color: var(--sy-white); position: relative; z-index: 2; }
.login-id-page .sp-head-kicker,
.login-info-page .sp-head-kicker,
.login-menu-page .sp-head-kicker,
.no-login-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); position: relative; z-index: 2; }
.login-id-page .sp-head::before  { content: "\1F511"; font-size: 60px; position: absolute; right: 16px; top: 50%; margin-top: -30px; z-index: 1; opacity: .15; }
.login-info-page .sp-head::before { content: "\1F510"; font-size: 60px; position: absolute; right: 16px; top: 50%; margin-top: -30px; z-index: 1; opacity: .15; }
.login-menu-page .sp-head::before,
.no-login-page .sp-head::before  { content: "\1F511"; font-size: 64px; position: absolute; right: 16px; top: 50%; margin-top: -32px; z-index: 1; opacity: .15; }
.login-menu-page .sp-head::after,
.no-login-page .sp-head::after   { content: "\2728"; font-size: 22px; position: absolute; left: 18px; bottom: 12px; z-index: 1; opacity: .3; }

/* login-id フォーム */
.login-id-page .li-lead { margin: 22px 18px 0; padding: 16px 18px; border-radius: var(--sy-radius); background: var(--sy-white); border: var(--sy-border); box-shadow: var(--sy-shadow); font-size: 13.5px; font-weight: 700; color: var(--sy-black); line-height: 1.8; text-align: center; }
.login-id-page .li-lead b { background: linear-gradient(transparent 60%, var(--sy-yellow) 60%); padding: 0 2px; font-weight: 900; }
.login-id-page .li-form-card { margin: 18px 18px 0; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); overflow: hidden; animation: sy-pop .5s cubic-bezier(.22,1,.36,1) both; }
.login-id-page .li-form-card-head { padding: 12px 18px; background: var(--sy-black); font-size: 13px; font-weight: 900; color: var(--sy-yellow); display: flex; align-items: center; gap: 8px; }
.login-id-page .li-form-card-head::before { content: "\1F4CB"; }
.login-id-page .li-form-card form { margin: 0; padding: 18px; }
.login-id-page .li-field { margin-bottom: 14px; text-align: left; }
.login-id-page .li-field label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 900; color: var(--sy-black); margin-bottom: 6px; }
.login-id-page .li-field--id label::before { content: "\1F464"; }
.login-id-page .li-field--pw label::before { content: "\1F511"; }
.login-id-page .li-field input[type="text"],
.login-id-page .li-field input[type="password"] { width: 100%; box-sizing: border-box; padding: 13px 14px; border-radius: var(--sy-radius-sm); border: var(--sy-border); background: #f8f8f0; font-size: 16px; font-weight: 700; color: var(--sy-black); outline: none; }
.login-id-page .li-field input:focus { border-color: #cc9900; background: var(--sy-white); }
.login-id-page .li-submit { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 15px 20px; border-radius: 999px; border: var(--sy-border); background: var(--sy-black); color: var(--sy-yellow); font-size: 17px; font-weight: 900; box-shadow: var(--sy-shadow); cursor: pointer; transition: transform .1s, box-shadow .1s; font-family: inherit; }
.login-id-page .li-submit:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--sy-black); }

/* login-info カード */
.login-info-page .li-lead { margin: 22px 18px 0; padding: 16px 18px; border-radius: var(--sy-radius); background: #fffbe0; border: 2px solid var(--sy-yellow); box-shadow: var(--sy-shadow-sm); font-size: 13.5px; font-weight: 800; color: #7a5000; line-height: 1.8; text-align: center; display: flex; gap: 8px; align-items: center; justify-content: center; }
.login-info-page .li-lead::before { content: "\1F4E2"; font-size: 18px; }
.login-info-page .li-card { margin: 18px 18px 0; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); overflow: hidden; animation: sy-pop .5s cubic-bezier(.22,1,.36,1) both; }
.login-info-page .li-card-head { padding: 12px 18px; background: var(--sy-black); font-size: 13px; font-weight: 900; color: var(--sy-yellow); display: flex; align-items: center; gap: 8px; }
.login-info-page .li-card-head::before { content: "\1F4CB"; }
.login-info-page .li-row { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.login-info-page .li-row + .li-row { border-top: 2px dashed #e8e8e8; }
.login-info-page .li-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 900; color: #7a5000; }
.login-info-page .li-label--id::before { content: "\1F464"; }
.login-info-page .li-label--pw::before { content: "\1F511"; }
.login-info-page .li-value { font-family: "Rubik", "Courier New", monospace; font-size: 20px; font-weight: 900; color: var(--sy-black); word-break: break-all; padding: 10px 14px; border-radius: var(--sy-radius-sm); background: #f8f8f0; border: var(--sy-border); }

/* login-menu / no-login キャリアカード共通 */
.login-menu-page .lg-lead,
.no-login-page   .lg-lead { position: relative; margin: 22px 18px 0; padding: 18px 18px 16px; border-radius: var(--sy-radius); background: var(--sy-white); border: var(--sy-border); box-shadow: var(--sy-shadow); font-size: 14px; font-weight: 700; color: var(--sy-black); line-height: 1.8; }
.login-menu-page .lg-lead b,
.no-login-page   .lg-lead b { background: linear-gradient(transparent 60%, var(--sy-yellow) 60%); padding: 0 2px; font-weight: 900; }
.no-login-page .lg-lead { padding-top: 26px; }
.no-login-page .lg-lead::before { content: "\1F44B"; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--sy-yellow); border: var(--sy-border); font-size: 20px; }

.login-menu-page .lg-carrier-list,
.no-login-page   .lg-carrier-list { margin: 22px 18px 6px; display: flex; flex-direction: column; gap: 16px; }
.login-menu-page .lg-carrier-card,
.no-login-page   .lg-carrier-card { position: relative; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); overflow: hidden; transition: transform .12s, box-shadow .12s; animation: sy-pop .5s cubic-bezier(.22,1,.36,1) both; }
.login-menu-page .lg-carrier-card:hover,
.no-login-page   .lg-carrier-card:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--sy-black); }
.no-login-page .lg-carrier-card:nth-child(2) { animation-delay: .08s; }
.no-login-page .lg-carrier-card:nth-child(3) { animation-delay: .16s; }

.login-menu-page .lg-carrier-head,
.no-login-page   .lg-carrier-head { position: relative; display: flex; align-items: center; gap: 10px; padding: 13px 16px; font-size: 14px; font-weight: 800; color: var(--sy-white); overflow: hidden; }
.login-menu-page .lg-carrier-head::after,
.no-login-page   .lg-carrier-head::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(125deg, rgba(255,255,255,.1) 0 10px, transparent 10px 22px); pointer-events: none; }
.login-menu-page .lg-carrier-head .lg-icon,
.no-login-page   .lg-carrier-head .lg-icon { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.95); border: 2px solid rgba(0,0,0,.12); font-size: 16px; position: relative; z-index: 1; }
.login-menu-page .lg-carrier-head .lg-brand,
.no-login-page   .lg-carrier-head .lg-brand { font-family: "Rubik", sans-serif; font-size: 16px; font-weight: 900; padding: 3px 12px; border-radius: 999px; background: rgba(255,255,255,.22); border: 1.5px solid rgba(255,255,255,.45); position: relative; z-index: 1; }
.login-menu-page .lg-carrier-head .lg-headtext,
.no-login-page   .lg-carrier-head .lg-headtext { position: relative; z-index: 1; }

.login-menu-page .lg-carrier-card--docomo .lg-carrier-head,
.no-login-page   .lg-carrier-card--docomo .lg-carrier-head { background: linear-gradient(135deg, #e60012 0%, #8a0008 100%); }
.login-menu-page .lg-carrier-card--au .lg-carrier-head,
.no-login-page   .lg-carrier-card--au .lg-carrier-head { background: linear-gradient(135deg, #ff7700 0%, #c24400 100%); }
.login-menu-page .lg-carrier-card--sb .lg-carrier-head,
.no-login-page   .lg-carrier-card--sb .lg-carrier-head { background: linear-gradient(135deg, #0044cc 0%, #002288 100%); }
.login-menu-page .lg-carrier-card--docomo .lg-icon { color: #e60012; }
.login-menu-page .lg-carrier-card--au .lg-icon     { color: #ff7700; }
.login-menu-page .lg-carrier-card--sb .lg-icon     { color: #0044cc; }
.no-login-page   .lg-carrier-card--docomo .lg-icon { color: #e60012; }
.no-login-page   .lg-carrier-card--au .lg-icon     { color: #ff7700; }
.no-login-page   .lg-carrier-card--sb .lg-icon     { color: #0044cc; }

.login-menu-page .lg-carrier-body,
.no-login-page   .lg-carrier-body { padding: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; background: #fafaf0; }
.login-menu-page .lg-carrier-card--docomo .lg-carrier-body,
.no-login-page   .lg-carrier-card--docomo .lg-carrier-body { background: #fff5f5; }
.login-menu-page .lg-carrier-card--au .lg-carrier-body,
.no-login-page   .lg-carrier-card--au .lg-carrier-body { background: #fff8f0; }
.login-menu-page .lg-carrier-card--sb .lg-carrier-body,
.no-login-page   .lg-carrier-card--sb .lg-carrier-body { background: #f5f8ff; }
.login-menu-page .lg-carrier-body form,
.no-login-page   .lg-carrier-body form { margin: 0; }
.login-menu-page .lg-carrier-body img,
.login-menu-page .lg-carrier-body input[type="image"],
.no-login-page   .lg-carrier-body img,
.no-login-page   .lg-carrier-body input[type="image"] { max-width: 180px; height: auto; border: 0; border-radius: var(--sy-radius-sm); box-shadow: 0 3px 0 rgba(0,0,0,.15); transition: transform .1s, box-shadow .1s; cursor: pointer; }
.login-menu-page .lg-carrier-body img:hover,
.login-menu-page .lg-carrier-body input[type="image"]:hover,
.no-login-page   .lg-carrier-body img:hover,
.no-login-page   .lg-carrier-body input[type="image"]:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 0 rgba(0,0,0,.15); }
.login-menu-page .lg-tap,
.no-login-page   .lg-tap { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 11px; font-weight: 900; }
.login-menu-page .lg-tap::before,
.no-login-page   .lg-tap::before { content: "\1F446"; animation: sy-nudge 1.1s ease-in-out infinite; }

/* login-ng-id */
.sp-page.login-ng-id-page { background: #f8f5e0; }
.login-ng-id-page .sp-head { background: var(--sy-yellow); }
.login-ng-id-page .sp-head h1 { color: var(--sy-black); position: relative; z-index: 2; }
.login-ng-id-page .sp-head-kicker { background: var(--sy-black); color: var(--sy-yellow); position: relative; z-index: 2; }
.login-ng-id-page .sp-head::before { content: "\1F44B"; font-size: 64px; position: absolute; right: 16px; top: 50%; margin-top: -32px; z-index: 1; opacity: .15; }
.login-ng-id-page .ln-lead { margin: 22px 18px 0; padding: 16px 18px; border-radius: var(--sy-radius); background: var(--sy-white); border: var(--sy-border); box-shadow: var(--sy-shadow); font-size: 15px; font-weight: 800; color: var(--sy-black); line-height: 1.8; text-align: center; }
.login-ng-id-page .ln-caution { margin: 14px 18px 0; padding: 13px 16px; border-radius: var(--sy-radius-sm); background: #fff0f0; border: 2px solid #ffaaaa; font-size: 13px; font-weight: 700; color: #990000; line-height: 1.8; display: flex; gap: 10px; align-items: flex-start; }
.login-ng-id-page .ln-caution::before { content: "\26A0\FE0F"; font-size: 18px; flex-shrink: 0; }
.login-ng-id-page .ln-login-card { margin: 18px 18px 0; padding: 16px; border-radius: var(--sy-radius); background: var(--sy-white); border: var(--sy-border); box-shadow: var(--sy-shadow); }
.login-ng-id-page .ln-login-note { font-size: 12.5px; font-weight: 700; color: #555; line-height: 1.8; margin-bottom: 12px; }
.login-ng-id-page .ln-btn { display: block; width: 100%; box-sizing: border-box; padding: 15px 20px; border-radius: 999px; background: var(--sy-yellow); color: var(--sy-black); font-family: "Rubik", sans-serif; font-size: 17px; font-weight: 900; text-align: center; text-decoration: none; border: var(--sy-border); box-shadow: var(--sy-shadow); transition: transform .1s, box-shadow .1s; }
.login-ng-id-page .ln-btn::before { content: "\1F511\00A0"; }
.login-ng-id-page .ln-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--sy-black); }
.login-ng-id-page .ln-hint { margin: 16px 18px 0; padding: 14px 16px; border-radius: var(--sy-radius-sm); background: #fffbe0; border: 2px solid var(--sy-yellow); font-size: 12.5px; font-weight: 700; color: var(--sy-black); line-height: 1.85; }
.login-ng-id-page .ln-hint b { background: linear-gradient(transparent 60%, var(--sy-yellow) 60%); padding: 0 2px; font-weight: 900; }
.login-ng-id-page .ln-contact-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 9px 20px; border-radius: 999px; background: var(--sy-white); color: var(--sy-black); font-size: 13px; font-weight: 900; text-decoration: none; border: var(--sy-border); box-shadow: var(--sy-shadow-sm); transition: transform .1s, box-shadow .1s; }
.login-ng-id-page .ln-contact-btn::before { content: "\1F4AC"; }
.login-ng-id-page .ln-contact-btn:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--sy-black); }
.login-ng-id-page .ln-ad { margin: 22px 18px 0; text-align: center; }

/* ================================================================
   メンテナンス（maintenance-page）
================================================================ */
.maintenance-page .sp-head { background: var(--sy-yellow); }
.maintenance-page .sp-head h1 { color: var(--sy-black); }
.maintenance-page .sp-head-kicker { background: var(--sy-black); color: var(--sy-yellow); }
.maintenance-page .sp-head::before { content: "\1F6E0"; font-size: 68px; color: rgba(0,0,0,.08); }
.maintenance-page .maint-card { margin: 22px 18px 0; padding: 30px 22px; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); text-align: center; position: relative; overflow: hidden; }
.maintenance-page .maint-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--sy-yellow) 0 6px, var(--sy-black) 6px 12px); }
.maintenance-page .maint-icon   { font-size: 52px; line-height: 1; margin-bottom: 16px; display: block; }
.maintenance-page .maint-thanks { display: inline-block; margin-bottom: 18px; padding: 5px 16px; border-radius: 999px; background: #fffbe0; border: 2px solid var(--sy-yellow); color: #7a5000; font-size: 13px; font-weight: 900; }
.maintenance-page .maint-msg { font-size: 15px; line-height: 2; color: var(--sy-black); font-weight: 600; }
.maintenance-page .maint-msg strong { display: inline-block; margin-top: 4px; color: var(--sy-red); font-weight: 900; }

/* ================================================================
   マイページ（mypage-list-page）
================================================================ */
.mypage-list-page .sp-head { background: #0a1a3a; }
.mypage-list-page .sp-head h1 { color: var(--sy-white); }
.mypage-list-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.mypage-list-page .sp-head::before { content: "\1F464"; font-size: 68px; color: rgba(255,255,255,.08); }
.mypage-list-page .myp-point-card { margin: 18px 18px 0; padding: 22px 20px; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-black); box-shadow: var(--sy-shadow); display: flex; align-items: center; gap: 16px; position: relative; overflow: hidden; }
.mypage-list-page .myp-point-card::before { content: "\2B50"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 60px; opacity: .06; pointer-events: none; }
.mypage-list-page .myp-point-icon  { flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--sy-yellow); border: var(--sy-border); font-size: 24px; }
.mypage-list-page .myp-point-label { display: block; font-size: 11px; font-weight: 900; color: rgba(255,255,255,.55); letter-spacing: .1em; margin-bottom: 4px; }
.mypage-list-page .myp-point-value { font-family: "Rubik", sans-serif; font-size: 28px; font-weight: 900; color: var(--sy-yellow); line-height: 1; }
.mypage-list-page .myp-point-unit  { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.7); margin-left: 4px; }
.mypage-list-page .myp-section-head { display: flex; align-items: center; gap: 10px; margin: 22px 18px 10px; padding: 11px 16px; border-radius: var(--sy-radius-sm); background: var(--sy-black); color: var(--sy-yellow); font-size: 13px; font-weight: 900; }
.mypage-list-page .myp-history-list { margin: 0 18px; display: flex; flex-direction: column; gap: 8px; }
.mypage-list-page .myp-history-item { display: block; padding: 14px 16px; border-radius: var(--sy-radius-sm); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow-sm); text-decoration: none; transition: transform .1s, box-shadow .1s; }
.mypage-list-page .myp-history-item:hover { background: #fffbe0; transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--sy-black); }
.mypage-list-page .myp-history-path { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12px; font-weight: 700; color: #555; margin-bottom: 4px; }
.mypage-list-page .myp-history-path span { color: rgba(0,0,0,.3); }
.mypage-list-page .myp-history-title { font-size: 14px; font-weight: 900; color: var(--sy-black); line-height: 1.5; word-break: break-all; }
.mypage-list-page .myp-history-arrow { display: flex; align-items: center; justify-content: flex-end; margin-top: 4px; }
.mypage-list-page .myp-history-arrow::after { content: "\203A"; font-size: 18px; color: rgba(0,0,0,.3); font-weight: 900; }
.mypage-list-page .myp-empty { margin: 0 18px; padding: 30px 20px; border-radius: var(--sy-radius); border: 2px dashed rgba(0,0,0,.15); background: #f8f8f8; text-align: center; font-size: 14px; font-weight: 700; color: #888; }
.mypage-list-page .myp-empty::before { content: "\1F4ED"; display: block; font-size: 36px; margin-bottom: 10px; }
.mypage-list-page .myp-member-card { margin: 0 18px; padding: 18px 20px; border-radius: var(--sy-radius-sm); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow-sm); }
.mypage-list-page .myp-member-row   { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-bottom: 1.5px solid rgba(0,0,0,.08); }
.mypage-list-page .myp-member-row:last-child { border-bottom: none; }
.mypage-list-page .myp-member-label { font-size: 11px; font-weight: 900; color: #888; }
.mypage-list-page .myp-member-val   { font-size: 14px; font-weight: 700; color: var(--sy-black); word-break: break-all; }
.mypage-list-page .myp-logout-btn   { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 18px; padding: 15px 18px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 15px; font-weight: 900; text-decoration: none; border: var(--sy-border); box-shadow: var(--sy-shadow); transition: transform .1s, box-shadow .1s; }
.mypage-list-page .myp-logout-btn::before { content: "\1F6AA"; font-size: 16px; }
.mypage-list-page .myp-logout-btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--sy-black); }
.mypage-list-page .myp-pagination { margin: 0 18px 8px; }

/* ================================================================
   未ログイン（no-login-page）/ 未会員（no-member-page）
================================================================ */
.no-member-page .sp-head { background: var(--sy-yellow); }
.no-member-page .sp-head h1 { color: var(--sy-black); }
.no-member-page .sp-head-kicker { background: var(--sy-black); color: var(--sy-yellow); }
.no-member-page .sp-head::before { content: "\1F511"; font-size: 64px; color: rgba(0,0,0,.08); }
.no-member-page .nomember-lead { display: flex; align-items: flex-start; gap: 14px; margin: 18px 18px 0; padding: 18px 16px; border-radius: var(--sy-radius); background: #fffbe0; border: var(--sy-border); box-shadow: var(--sy-shadow-sm); }
.no-member-page .nomember-lead-icon { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--sy-black); color: var(--sy-yellow); font-size: 18px; border: var(--sy-border); box-shadow: 2px 2px 0 rgba(0,0,0,.2); }
.no-member-page .nomember-lead-text { font-size: 13.5px; line-height: 1.82; color: var(--sy-black); font-weight: 500; padding-top: 2px; }
.no-member-page .nomember-lead-text strong { display: block; font-size: 14px; font-weight: 900; margin-bottom: 4px; }
.no-member-page .nomember-regist-btn { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 20px 18px 0; padding: 18px 20px; border-radius: 999px; border: var(--sy-border); background: var(--sy-black); color: var(--sy-yellow); font-size: 18px; font-weight: 900; text-decoration: none; box-shadow: var(--sy-shadow); transition: transform .1s, box-shadow .1s; }
.no-member-page .nomember-regist-btn::before { content: "\2192"; font-size: 18px; }
.no-member-page .nomember-regist-btn:hover  { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--sy-black); }
.no-member-page .nomember-regist-btn:active { transform: translate(3px,3px);  box-shadow: 2px 2px 0 var(--sy-black); }
.no-member-page .nomember-links { margin: 18px 18px 0; display: flex; flex-direction: column; gap: 8px; }
.no-member-page .nomember-links a { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--sy-radius-sm); border: var(--sy-border); background: var(--sy-white); font-size: 13px; font-weight: 700; color: var(--sy-black); text-decoration: none; box-shadow: var(--sy-shadow-sm); transition: transform .1s, box-shadow .1s; }
.no-member-page .nomember-links a::before { content: "\25A0"; color: var(--sy-yellow); font-size: 10px; flex-shrink: 0; }
.no-member-page .nomember-links a::after  { content: "\203A"; margin-left: auto; font-size: 18px; color: rgba(0,0,0,.3); }
.no-member-page .nomember-links a:hover   { background: #fffbe0; transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--sy-black); }

/* ================================================================
   プライバシーポリシー（privacy-page）
================================================================ */
.privacy-page .sp-head { background: var(--sy-black); }
.privacy-page .sp-head h1 { color: var(--sy-white); }
.privacy-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.privacy-page .sp-head::before { content: "\1F512"; font-size: 68px; color: rgba(255,255,255,.07); }
.privacy-page .priv-intro { margin: 18px 18px 0; padding: 20px 18px; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow-sm); font-size: 13.5px; line-height: 1.9; color: var(--sy-black); font-weight: 500; position: relative; overflow: hidden; }
.privacy-page .priv-intro::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: repeating-linear-gradient(-45deg, var(--sy-yellow) 0 5px, var(--sy-black) 5px 10px); }
.privacy-page .priv-list { margin: 14px 18px 0; display: flex; flex-direction: column; gap: 10px; }
.privacy-page .priv-item { border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow-sm); overflow: hidden; }
.privacy-page .priv-item-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--sy-black); border-bottom: var(--sy-border); }
.privacy-page .priv-item-num { flex-shrink: 0; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 4px; background: var(--sy-yellow); color: var(--sy-black); font-size: 13px; font-weight: 900; }
.privacy-page .priv-item-title { font-size: 14px; font-weight: 900; color: var(--sy-white); line-height: 1.4; }
.privacy-page .priv-item-body { padding: 16px 18px; font-size: 13px; line-height: 1.9; color: var(--sy-black); font-weight: 500; }
.privacy-page .priv-item-body ul { margin: 8px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.privacy-page .priv-item-body ul li { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.8; padding: 2px 0; }
.privacy-page .priv-item-body ul li::before { content: "\30FB"; flex-shrink: 0; color: #555; margin-top: 1px; }
.privacy-page .priv-sub-title { margin: 12px 0 4px; font-size: 13px; font-weight: 900; color: var(--sy-black); border-left: 3px solid var(--sy-yellow); padding-left: 8px; }
.privacy-page .priv-contact { margin: 14px 18px 0; padding: 20px 18px; border-radius: var(--sy-radius); border: var(--sy-border); background: #fffbe0; box-shadow: var(--sy-shadow-sm); }
.privacy-page .priv-contact-title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 14px; font-weight: 900; color: var(--sy-black); }
.privacy-page .priv-contact-title::before { content: "\1F4EC"; font-size: 18px; }
.privacy-page .priv-contact dl { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.privacy-page .priv-contact-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.8; }
.privacy-page .priv-contact-label { flex-shrink: 0; width: 54px; font-weight: 900; color: #555; font-size: 12px; }
.privacy-page .priv-contact-val   { color: var(--sy-black); font-weight: 600; word-break: break-all; }

/* ================================================================
   FAQ（qa-page）
================================================================ */
.qa-page .sp-head { background: var(--sy-black); }
.qa-page .sp-head h1 { color: var(--sy-white); }
.qa-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.qa-page .sp-head::before { content: "?"; font-family: "Rubik", sans-serif; font-size: 90px; color: rgba(255,255,255,.08); }
.qa-page .qa { margin: 14px 18px 0; display: flex; flex-direction: column; gap: 10px; }
.qa-page .qa-item { border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow-sm); overflow: hidden; }
.qa-page .qa-q { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; background: var(--sy-yellow); border-bottom: var(--sy-border); }
.qa-page .qa-q-badge { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sy-black); color: var(--sy-yellow); font-family: "Rubik", sans-serif; font-size: 15px; font-weight: 900; border: var(--sy-border); box-shadow: 2px 2px 0 rgba(0,0,0,.2); margin-top: 1px; }
.qa-page .qa-q-text { font-size: 14.5px; font-weight: 900; color: var(--sy-black); line-height: 1.55; padding-top: 5px; }
.qa-page .qa-a { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; }
.qa-page .qa-a-badge { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sy-black); color: var(--sy-yellow); font-family: "Rubik", sans-serif; font-size: 15px; font-weight: 900; border: var(--sy-border); box-shadow: 2px 2px 0 var(--sy-black); margin-top: 1px; }
.qa-page .qa-a-body { font-size: 13.5px; font-weight: 500; color: var(--sy-black); line-height: 1.9; flex: 1; }
.qa-page .qa-a-note { display: block; margin-top: 10px; padding: 10px 12px; border-radius: var(--sy-radius-sm); background: #f8f8f0; border: 1.5px solid rgba(0,0,0,.1); font-size: 12px; color: rgba(0,0,0,.55); line-height: 1.8; }

/* ================================================================
   QR（qr-page）
================================================================ */
.qr-page .sp-head { background: var(--sy-black); }
.qr-page .sp-head h1 { color: var(--sy-white); }
.qr-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.qr-page .sp-head::before { content: "\1F4F1"; font-size: 68px; color: rgba(255,255,255,.08); }
.qr-page .qr-card { position: relative; margin: 18px 18px 0; padding: 30px 20px 26px; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); text-align: center; overflow: hidden; }
.qr-page .qr-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--sy-yellow) 0 6px, var(--sy-black) 6px 12px); }
.qr-page .qr-site-name { display: inline-block; margin-bottom: 18px; padding: 6px 18px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-family: "Rubik", sans-serif; font-size: 14px; font-weight: 900; border: var(--sy-border); box-shadow: var(--sy-shadow-sm); }
.qr-page .qr-image-wrap { display: inline-block; padding: 12px; border-radius: var(--sy-radius-sm); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); margin-bottom: 18px; }
.qr-page .qr-image-wrap img { display: block; width: 180px; height: 180px; }
.qr-page .qr-url  { display: inline-block; padding: 8px 16px; border-radius: var(--sy-radius-sm); background: #f4f4f0; border: 2px solid rgba(0,0,0,.12); font-size: 11px; font-weight: 700; color: #555; word-break: break-all; }
.qr-page .qr-desc { margin: 14px 18px 0; padding: 16px 18px; border-radius: var(--sy-radius-sm); background: #fffbe0; border: 2px solid var(--sy-yellow); font-size: 13px; line-height: 1.8; color: #7a5000; text-align: center; }
.qr-page .qr-desc::before { content: "\1F4A1"; display: block; font-size: 24px; margin-bottom: 6px; }

/* ================================================================
   退会理由（reason-page）
================================================================ */
.reason-page .sp-head { background: var(--sy-black); }
.reason-page .sp-head h1 { color: var(--sy-white); }
.reason-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.reason-page .sp-head::before { content: "\1F4DD"; font-size: 60px; color: rgba(255,255,255,.08); }
.reason-page .reason-lead { margin: 18px 18px 0; font-size: 13.5px; line-height: 1.8; color: #555; font-weight: 500; padding: 0 2px; }
.reason-page .reason-form-card { margin: 14px 18px 0; padding: 22px 18px; border-radius: var(--sy-radius); background: var(--sy-white); border: var(--sy-border); box-shadow: var(--sy-shadow); }
.reason-page .reason-form-card textarea,
.reason-page .reason-form-card input[type="text"],
.reason-page .reason-form-card select { display: block; width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: var(--sy-radius-sm); border: var(--sy-border); background: #f8f8f0; font-size: 14px; color: var(--sy-black); font-family: inherit; margin-bottom: 14px; outline: none; transition: border-color .15s; }
.reason-page .reason-form-card textarea:focus,
.reason-page .reason-form-card input[type="text"]:focus,
.reason-page .reason-form-card select:focus { border-color: #cc9900; box-shadow: 0 0 0 3px rgba(255,209,0,.2); }
.reason-page .reason-form-card input[type="radio"],
.reason-page .reason-form-card input[type="checkbox"] { accent-color: var(--sy-black); width: 16px; height: 16px; margin-right: 8px; vertical-align: middle; }
.reason-page .reason-form-card label { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--sy-black); margin-bottom: 10px; cursor: pointer; }
.reason-page .reason-form-card br { display: none; }
.reason-page .reason-form-card input[type="submit"] { display: block; width: 100%; margin-top: 8px; padding: 15px 18px; border-radius: 999px; border: var(--sy-border); background: var(--sy-red); color: var(--sy-white); font-size: 16px; font-weight: 900; box-shadow: var(--sy-shadow); cursor: pointer; transition: transform .1s, box-shadow .1s; font-family: inherit; }
.reason-page .reason-form-card input[type="submit"]:hover  { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--sy-black); }
.reason-page .reason-form-card input[type="submit"]:active { transform: translate(3px,3px);  box-shadow: 2px 2px 0 var(--sy-black); }

/* ================================================================
   キャリア登録ページ共通（regist-auone / regist-docomo / regist-mysoftbank）
================================================================ */
@keyframes sy-regist-pop { 0%{transform:scale(.7);opacity:0;} 70%{transform:scale(1.08);opacity:1;} 100%{transform:scale(1);opacity:1;} }

.regist-auone-page .sp-head      { background: #2a1400; position: relative; overflow: hidden; }
.regist-docomo-page .sp-head     { background: #1a0000; position: relative; overflow: hidden; }
.regist-mysoftbank-page .sp-head { background: #001a3a; position: relative; overflow: hidden; padding-bottom: 16px; }
.regist-mysoftbank-page .sp-head::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 16px; background: #f8f8f8; z-index: 1; }
.regist-auone-page .sp-head h1,
.regist-docomo-page .sp-head h1,
.regist-mysoftbank-page .sp-head h1 { color: var(--sy-white); position: relative; z-index: 2; }
.regist-auone-page .sp-head-kicker,
.regist-docomo-page .sp-head-kicker,
.regist-mysoftbank-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); position: relative; z-index: 2; }
.regist-auone-page .sp-head::before,
.regist-docomo-page .sp-head::before,
.regist-mysoftbank-page .sp-head::before { content: "\2B50"; font-size: 120px; color: rgba(255,255,255,.05); position: absolute; right: -10px; top: -10px; z-index: 0; }

.regist-auone-page .rg-carrier-wrap,
.regist-docomo-page .rg-carrier-wrap { margin: 16px 18px 0; padding: 14px; border-radius: var(--sy-radius-sm); border: var(--sy-border); background: var(--sy-white); display: flex; align-items: center; justify-content: center; }
.regist-auone-page .rg-carrier-wrap img,
.regist-docomo-page .rg-carrier-wrap img { max-width: 130px; height: auto; display: block; }

/* フリーヒーローバナー */
.regist-auone-page .rg-free-hero,
.regist-docomo-page .rg-free-hero { position: relative; margin: 16px 18px 0; padding: 26px 20px 24px; border-radius: var(--sy-radius); border: var(--sy-border); box-shadow: var(--sy-shadow); overflow: hidden; text-align: center; }
.regist-auone-page .rg-free-hero  { background: repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 14px,transparent 14px 28px), linear-gradient(180deg, #ff8800 0%, #cc4400 100%); }
.regist-docomo-page .rg-free-hero { background: repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 14px,transparent 14px 28px), linear-gradient(180deg, #cc0010 0%, #7a0008 100%); }
.regist-auone-page .rg-free-hero::before,
.regist-docomo-page .rg-free-hero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 10px, transparent 10px 20px); pointer-events: none; }
.regist-auone-page .rg-free-hero > *,
.regist-docomo-page .rg-free-hero > * { position: relative; }
.regist-auone-page .rg-free-hero__ribbon,
.regist-docomo-page .rg-free-hero__ribbon { position: absolute; top: 13px; right: -34px; width: 130px; transform: rotate(45deg); background: var(--sy-yellow); color: var(--sy-black); font-family: "Rubik", sans-serif; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-align: center; padding: 4px 0; z-index: 2; }
.regist-auone-page .rg-free-hero__kind,
.regist-docomo-page .rg-free-hero__kind { display: inline-block; padding: 5px 18px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 13px; font-weight: 900; border: 2px solid rgba(255,255,255,.2); margin-bottom: 12px; animation: sy-regist-pop .5s cubic-bezier(.22,1,.36,1) both; }
.regist-auone-page .rg-free-hero__free,
.regist-docomo-page .rg-free-hero__free { display: block; font-family: "Rubik", sans-serif; font-size: 28px; font-weight: 900; color: var(--sy-white); line-height: 1.15; white-space: nowrap; text-shadow: 0 2px 0 rgba(0,0,0,.25); animation: sy-regist-pop .6s cubic-bezier(.22,1,.36,1) both; }
.regist-auone-page .rg-free-hero__free em,
.regist-docomo-page .rg-free-hero__free em { font-style: normal; color: var(--sy-black); background: var(--sy-yellow); padding: 0 7px; border-radius: 4px; }
.regist-auone-page .rg-free-hero__note,
.regist-docomo-page .rg-free-hero__note { display: inline-block; margin-top: 14px; padding: 6px 18px; border-radius: 999px; background: rgba(0,0,0,.28); border: 1.5px solid rgba(255,255,255,.22); font-size: 12px; font-weight: 800; color: var(--sy-white); }
.regist-auone-page .rg-free-hero__note s,
.regist-docomo-page .rg-free-hero__note s { color: rgba(255,255,255,.65); margin-right: 2px; }
.regist-auone-page .rg-free-hero__note b,
.regist-docomo-page .rg-free-hero__note b { color: var(--sy-yellow); font-weight: 900; }

/* 登録ボタン */
.regist-auone-page .rg-single-btn-wrap,
.regist-docomo-page .rg-single-btn-wrap { margin: 16px 18px 0; }
.regist-auone-page .rg-btn-regist { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 17px 20px; border-radius: 999px; background: #117700; color: var(--sy-white); font-family: "Rubik", sans-serif; font-size: 18px; font-weight: 900; text-decoration: none; border: var(--sy-border); box-shadow: 4px 4px 0 var(--sy-black); transition: transform .1s, box-shadow .1s; }
.regist-auone-page .rg-btn-regist::before { content: "\2728"; font-size: 18px; }
.regist-auone-page .rg-btn-regist:hover { animation-play-state: paused; transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--sy-black); }
.regist-auone-page .rg-btn-regist--registered { background: #ccc; color: #777; animation: none; pointer-events: none; }
.regist-auone-page .rg-btn-regist--registered::before { content: "\2713"; }
.regist-docomo-page .rg-btn-regist { display: block; width: 100%; padding: 15px 20px; border-radius: 999px; background: var(--sy-red); color: var(--sy-white); font-family: "Rubik", sans-serif; font-size: 17px; font-weight: 900; text-align: center; text-decoration: none; border: var(--sy-border); box-shadow: var(--sy-shadow); transition: transform .1s, box-shadow .1s; }
.regist-docomo-page .rg-btn-regist:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--sy-black); }
.regist-docomo-page .rg-btn-regist--registered { background: #ccc; color: #777; pointer-events: none; }
.regist-docomo-page .rg-single-btn-wrap { margin: 14px 18px 0; }

/* 共通詳細テキスト・フレーム */
.regist-auone-page .rg-single-desc-text,
.regist-docomo-page .rg-single-desc-text { margin: 14px 18px 0; padding: 12px 16px; border-radius: var(--sy-radius-sm); background: var(--sy-white); border: var(--sy-border); box-shadow: var(--sy-shadow-sm); font-size: 13px; font-weight: 700; color: var(--sy-black); line-height: 1.8; }
.regist-docomo-page .rg-single-desc-note { margin: 10px 18px 0; padding: 10px 14px; border-radius: var(--sy-radius-sm); background: #f8f8f8; border: 1.5px solid #e0e0e0; font-size: 12px; font-weight: 700; color: #555; line-height: 1.8; }
.regist-auone-page .rg-info-frame,
.regist-docomo-page .rg-info-frame { margin: 14px 18px 0; padding: 13px 16px; border-radius: var(--sy-radius-sm); background: #fffbe0; border: 1.5px solid var(--sy-yellow); font-size: 12px; font-weight: 700; color: #7a5000; line-height: 1.9; display: flex; flex-direction: column; gap: 8px; }
.regist-auone-page .rg-info-frame a,
.regist-docomo-page .rg-info-frame a { color: #553300; text-decoration: underline; }
.regist-auone-page .rg-info-frame__notice,
.regist-docomo-page .rg-info-frame__notice { padding: 8px 12px; border-radius: 8px; background: #fff0f0; border: 1.5px solid #ffaaaa; font-size: 11.5px; color: #990000; line-height: 1.8; }
.regist-auone-page .rg-trial-note,
.regist-docomo-page .rg-trial-note { font-size: 11px; color: #777; line-height: 1.8; }
.regist-auone-page .rg-meta,
.regist-docomo-page .rg-meta { margin: 10px 18px 0; font-size: 10px; color: #ccc; text-align: right; }

/* マルチコース共通（3キャリア） */
.regist-auone-page .rg-notice-bar,
.regist-docomo-page .rg-notice-bar,
.regist-mysoftbank-page .rg-notice-bar { margin: 18px 18px 0; padding: 12px 16px; border-radius: var(--sy-radius-sm); background: var(--sy-white); border: var(--sy-border); box-shadow: var(--sy-shadow-sm); display: flex; flex-direction: column; gap: 8px; }
.regist-auone-page .rg-kiyaku,
.regist-docomo-page .rg-kiyaku,
.regist-mysoftbank-page .rg-kiyaku { font-size: 13px; font-weight: 700; color: var(--sy-black); line-height: 1.7; }
.regist-auone-page .rg-kiyaku a   { color: #553300; font-weight: 900; text-decoration: underline; }
.regist-docomo-page .rg-kiyaku a  { color: #990000; font-weight: 900; text-decoration: underline; }
.regist-mysoftbank-page .rg-kiyaku a { color: #000e4a; font-weight: 900; text-decoration: underline; }
.regist-auone-page .rg-billing-badge,
.regist-docomo-page .rg-billing-badge,
.regist-mysoftbank-page .rg-billing-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; background: #fff0f0; border: 1.5px solid #ffaaaa; font-size: 12px; font-weight: 900; color: var(--sy-red); width: fit-content; }
.regist-auone-page .rg-billing-badge::before,
.regist-docomo-page .rg-billing-badge::before,
.regist-mysoftbank-page .rg-billing-badge::before { content: "\1F4C5"; font-size: 13px; }
.regist-auone-page .rg-section-title,
.regist-docomo-page .rg-section-title,
.regist-mysoftbank-page .rg-section-title { margin: 22px 18px 12px; display: flex; align-items: center; gap: 10px; }
.regist-auone-page .rg-section-title-text,
.regist-docomo-page .rg-section-title-text,
.regist-mysoftbank-page .rg-section-title-text { font-size: 14px; font-weight: 900; padding: 9px 18px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); box-shadow: var(--sy-shadow-sm); }
.regist-auone-page .rg-section-title-line,
.regist-docomo-page .rg-section-title-line,
.regist-mysoftbank-page .rg-section-title-line { flex: 1; height: 2px; background: linear-gradient(90deg, rgba(0,0,0,.2) 0%, transparent 100%); }
.regist-auone-page .rg-course-list,
.regist-docomo-page .rg-course-list,
.regist-mysoftbank-page .rg-course-list { margin: 0 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.regist-auone-page .rg-course-card,
.regist-docomo-page .rg-course-card,
.regist-mysoftbank-page .rg-course-card { border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); overflow: hidden; display: block; text-decoration: none; transition: transform .1s, box-shadow .1s; position: relative; }
.regist-auone-page .rg-course-card:hover,
.regist-docomo-page .rg-course-card:hover,
.regist-mysoftbank-page .rg-course-card:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--sy-black); }
.regist-auone-page .rg-course-card--available .rg-course-card-head,
.regist-mysoftbank-page .rg-course-card--available .rg-course-card-head { background: #fffbe0; border-bottom: 2px solid rgba(0,0,0,.1); }
.regist-docomo-page .rg-course-card--available .rg-course-card-head { background: #fff0f0; border-bottom: 2px solid rgba(0,0,0,.1); }
.regist-auone-page .rg-course-card--registered,
.regist-docomo-page .rg-course-card--registered,
.regist-mysoftbank-page .rg-course-card--registered { opacity: .65; }
.regist-auone-page .rg-course-card--registered .rg-course-card-head,
.regist-docomo-page .rg-course-card--registered .rg-course-card-head,
.regist-mysoftbank-page .rg-course-card--registered .rg-course-card-head { background: #f4f4f4; border-bottom: 2px solid #e0e0e0; }
.regist-auone-page .rg-registered-badge,
.regist-docomo-page .rg-registered-badge,
.regist-mysoftbank-page .rg-registered-badge { position: absolute; top: 12px; right: 12px; padding: 3px 10px; border-radius: 999px; background: #888; color: var(--sy-white); font-size: 10px; font-weight: 900; border: 1.5px solid var(--sy-black); }
.regist-auone-page .rg-course-card-head,
.regist-docomo-page .rg-course-card-head,
.regist-mysoftbank-page .rg-course-card-head { padding: 14px 18px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.regist-auone-page .rg-course-point-wrap,
.regist-docomo-page .rg-course-point-wrap,
.regist-mysoftbank-page .rg-course-point-wrap { flex: 1; min-width: 0; }
.regist-auone-page .rg-course-point-label,
.regist-docomo-page .rg-course-point-label { font-size: 10px; font-weight: 900; color: #7a5000; margin-bottom: 2px; }
.regist-mysoftbank-page .rg-course-point-label { font-size: 10px; font-weight: 900; color: #000e4a; margin-bottom: 2px; }
.regist-docomo-page .rg-course-point-label { color: #990000; }
.regist-auone-page .rg-course-point-label--registered,
.regist-docomo-page .rg-course-point-label--registered,
.regist-mysoftbank-page .rg-course-point-label--registered { color: #888; }
.regist-auone-page .rg-course-point,
.regist-docomo-page .rg-course-point,
.regist-mysoftbank-page .rg-course-point { font-family: "Rubik", sans-serif; font-size: 26px; font-weight: 900; color: var(--sy-black); line-height: 1; }
.regist-auone-page .rg-course-point span,
.regist-docomo-page .rg-course-point span,
.regist-mysoftbank-page .rg-course-point span { font-size: 14px; font-weight: 700; color: #555; margin-left: 2px; }
.regist-auone-page .rg-course-arrow,
.regist-mysoftbank-page .rg-course-arrow { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sy-black); color: var(--sy-yellow); font-size: 20px; font-weight: 900; border: var(--sy-border); box-shadow: var(--sy-shadow-sm); }
.regist-docomo-page .rg-course-arrow { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sy-red); color: var(--sy-white); font-size: 20px; font-weight: 900; border: var(--sy-border); box-shadow: var(--sy-shadow-sm); }
.regist-auone-page .rg-course-arrow--registered,
.regist-docomo-page .rg-course-arrow--registered,
.regist-mysoftbank-page .rg-course-arrow--registered { background: #e0e0e0; box-shadow: none; color: #888; }
.regist-auone-page .rg-course-card-body,
.regist-docomo-page .rg-course-card-body,
.regist-mysoftbank-page .rg-course-card-body { padding: 10px 18px 14px; font-size: 13px; font-weight: 700; color: var(--sy-black); line-height: 1.7; }
.regist-auone-page .rg-price-main,
.regist-docomo-page .rg-price-main,
.regist-mysoftbank-page .rg-price-main { font-size: 15px; font-weight: 900; color: var(--sy-black); }
.regist-auone-page .rg-price-sub,
.regist-docomo-page .rg-price-sub,
.regist-mysoftbank-page .rg-price-sub { font-size: 12px; color: #555; }
.regist-auone-page .rg-price-free,
.regist-docomo-page .rg-price-free,
.regist-mysoftbank-page .rg-price-free { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: #fffbe0; border: 1.5px solid var(--sy-yellow); color: #7a5000; font-size: 12px; font-weight: 900; margin-bottom: 4px; }
.regist-auone-page .rg-price-free::before,
.regist-docomo-page .rg-price-free::before,
.regist-mysoftbank-page .rg-price-free::before { content: "\1F381"; }
.regist-mysoftbank-page .rg-course-cta { padding: 9px 18px; background: var(--sy-black); color: var(--sy-yellow); font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center; gap: 6px; }
.regist-mysoftbank-page .rg-course-cta::after { content: "\00BB"; }
.regist-auone-page .rg-service-card,
.regist-docomo-page .rg-service-card,
.regist-mysoftbank-page .rg-service-card { margin: 22px 18px 0; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow-sm); overflow: hidden; }
.regist-auone-page .rg-service-card-head,
.regist-docomo-page .rg-service-card-head,
.regist-mysoftbank-page .rg-service-card-head { padding: 13px 18px; background: var(--sy-black); font-size: 13px; font-weight: 900; color: var(--sy-yellow); }
.regist-auone-page .rg-service-link,
.regist-docomo-page .rg-service-link,
.regist-mysoftbank-page .rg-service-link { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; text-decoration: none; font-size: 14px; font-weight: 700; color: var(--sy-black); border-bottom: 1px solid #f0f0f0; transition: background .12s; }
.regist-auone-page .rg-service-link:hover,
.regist-docomo-page .rg-service-link:hover,
.regist-mysoftbank-page .rg-service-link:hover { background: #fffbe0; }
.regist-auone-page .rg-service-link::after,
.regist-docomo-page .rg-service-link::after,
.regist-mysoftbank-page .rg-service-link::after { content: "\203A"; font-size: 20px; color: var(--sy-black); font-weight: 900; }

/* ================================================================
   登録完了・エラー・中止ページ
================================================================ */
.regist-ok-page .sp-head { background: #0a2a0a; position: relative; overflow: hidden; }
.regist-ok-page .sp-head h1 { color: var(--sy-white); position: relative; z-index: 1; }
.regist-ok-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); position: relative; z-index: 1; }
.regist-ok-page .sp-head::before { content: "\1F389"; font-size: 110px; color: rgba(255,255,255,.07); position: absolute; right: -8px; top: -6px; z-index: 0; }

.regist-ok-page .rok-celebrate { margin: 20px 18px 0; border-radius: var(--sy-radius); border: var(--sy-border); background: #e8ffe8; box-shadow: var(--sy-shadow); padding: 22px 20px; text-align: center; }
.regist-ok-page .rok-celebrate-icon { font-size: 52px; display: block; margin-bottom: 8px; line-height: 1; }
.regist-ok-page .rok-celebrate-title { font-family: "Rubik", sans-serif; font-size: 20px; font-weight: 900; color: var(--sy-black); margin-bottom: 10px; }
.regist-ok-page .rok-celebrate-text { font-size: 14px; font-weight: 700; color: var(--sy-black); line-height: 1.9; }
.regist-ok-page .rok-login-card { margin: 18px 18px 0; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow-sm); overflow: hidden; }
.regist-ok-page .rok-login-card-head { padding: 12px 18px; background: var(--sy-black); font-size: 13px; font-weight: 900; color: var(--sy-yellow); display: flex; align-items: center; gap: 8px; }
.regist-ok-page .rok-login-card-head::before { content: "\1F511"; }
.regist-ok-page .rok-login-card-notice { padding: 10px 18px; background: #fffbe0; border-bottom: 1.5px solid var(--sy-yellow); font-size: 12px; font-weight: 700; color: #7a5000; line-height: 1.7; }
.regist-ok-page .rok-login-card-notice::before { content: "\203B\0020"; }
.regist-ok-page .rok-login-row { display: flex; align-items: stretch; border-bottom: 1.5px solid #f0f0f0; }
.regist-ok-page .rok-login-row:last-child { border-bottom: none; }
.regist-ok-page .rok-login-label { flex-shrink: 0; width: 130px; padding: 13px 14px; background: #f8f8f8; font-size: 12px; font-weight: 900; color: #555; display: flex; align-items: center; border-right: 1.5px solid #e0e0e0; }
.regist-ok-page .rok-login-value { flex: 1; padding: 13px 16px; font-family: "Rubik", sans-serif; font-size: 16px; font-weight: 900; color: var(--sy-black); word-break: break-all; display: flex; align-items: center; }
.regist-ok-page .rok-home-btn { display: block; margin: 22px 18px 0; padding: 16px 20px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 15px; font-weight: 900; text-align: center; text-decoration: none; border: var(--sy-border); box-shadow: var(--sy-shadow); transition: transform .1s, box-shadow .1s; }
.regist-ok-page .rok-home-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--sy-black); }
.regist-ok-page .rok-home-btn::before { content: "\1F3E0\0020"; }
.regist-ok-page .rok-aff-wrap { margin: 20px 18px 0; }

.regist-stop-page .sp-head { background: var(--sy-yellow); }
.regist-stop-page .sp-head h1 { color: var(--sy-black); }
.regist-stop-page .sp-head-kicker { background: var(--sy-black); color: var(--sy-yellow); }
.regist-stop-page .sp-head::before { content: "\1F6AB"; font-size: 68px; color: rgba(0,0,0,.08); }
.regist-stop-page .rs-card { margin: 28px 18px 0; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); overflow: hidden; text-align: center; }
.regist-stop-page .rs-card-head { padding: 16px 18px; background: #fffbe0; border-bottom: var(--sy-border); }
.regist-stop-page .rs-card-icon  { font-size: 48px; display: block; margin-bottom: 6px; }
.regist-stop-page .rs-card-title { font-family: "Rubik", sans-serif; font-size: 15px; font-weight: 900; color: var(--sy-black); }
.regist-stop-page .rs-card-body  { padding: 20px 20px 22px; font-size: 14px; font-weight: 700; color: var(--sy-black); line-height: 2; }
.regist-stop-page .rs-card-body .rs-thanks { display: block; margin-bottom: 10px; font-size: 13px; color: #555; }
.regist-stop-page .rs-card-body .rs-notice { display: inline-block; padding: 10px 18px; border-radius: var(--sy-radius-sm); background: #fffbe0; border: 2px solid var(--sy-yellow); color: #7a5000; font-size: 14px; font-weight: 900; line-height: 1.8; }
.regist-stop-page .rs-home-btn { display: block; margin: 20px 18px 0; padding: 15px 20px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 15px; font-weight: 900; text-align: center; text-decoration: none; border: var(--sy-border); box-shadow: var(--sy-shadow); transition: transform .1s, box-shadow .1s; }
.regist-stop-page .rs-home-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--sy-black); }
.regist-stop-page .rs-home-btn::before { content: "\1F3E0\0020"; }

.registered-page .sp-head { background: var(--sy-red); }
.registered-page .sp-head h1 { color: var(--sy-white); }
.registered-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.registered-page .sp-head::before { content: "\26A0\FE0F"; font-size: 64px; color: rgba(255,255,255,.12); }
.registered-page .reg-fail-card { margin: 20px 18px 0; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); overflow: hidden; }
.registered-page .reg-fail-card-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #fff0f0; border-bottom: var(--sy-border); font-size: 14px; font-weight: 900; color: #990000; }
.registered-page .reg-fail-card-head::before { content: "\26A0\FE0F"; font-size: 20px; flex-shrink: 0; }
.registered-page .reg-fail-card-body { padding: 18px; font-size: 14px; font-weight: 700; color: var(--sy-black); line-height: 1.9; }
.registered-page .reg-fail-hint { margin: 14px 18px 0; padding: 12px 16px; border-radius: var(--sy-radius-sm); background: #fffbe0; border: 2px solid var(--sy-yellow); font-size: 13px; font-weight: 700; color: #7a5000; line-height: 1.8; }
.registered-page .reg-fail-hint::before { content: "\1F4A1\0020"; }
.registered-page .reg-top-btn { display: block; margin: 22px 18px 0; padding: 15px 20px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 15px; font-weight: 900; text-align: center; text-decoration: none; border: var(--sy-border); box-shadow: var(--sy-shadow); transition: transform .1s, box-shadow .1s; }
.registered-page .reg-top-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--sy-black); }
.registered-page .reg-top-btn::before { content: "\1F3E0\0020"; }

/* ================================================================
   退会関連ページ（account選択 / au / docomo / SB / キャンセル / 完了）
================================================================ */
/* 共通ヘッド */
.retire-account-page .sp-head,
.retire-docomo-page .sp-head,
.retire-mysoftbank-page .sp-head { background: var(--sy-black); }
.retire-auone-page .sp-head { background: #2a1000; }
.retire-ng-page .sp-head { background: #0a2a0a; }
.retire-ok-page .sp-head { background: var(--sy-black); }

.retire-account-page .sp-head h1, .retire-auone-page .sp-head h1,
.retire-docomo-page .sp-head h1, .retire-mysoftbank-page .sp-head h1,
.retire-ng-page .sp-head h1, .retire-ok-page .sp-head h1 { color: var(--sy-white); }
.retire-account-page .sp-head-kicker, .retire-auone-page .sp-head-kicker,
.retire-docomo-page .sp-head-kicker, .retire-mysoftbank-page .sp-head-kicker,
.retire-ng-page .sp-head-kicker, .retire-ok-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.retire-account-page .sp-head::before, .retire-auone-page .sp-head::before,
.retire-docomo-page .sp-head::before, .retire-mysoftbank-page .sp-head::before,
.retire-ok-page .sp-head::before { content: "\1F6AA"; font-size: 68px; color: rgba(255,255,255,.07); }
.retire-ng-page .sp-head::before { content: "\1F44D"; font-size: 68px; color: rgba(255,255,255,.08); }

/* リード文 */
.retire-account-page .ra-lead,
.retire-auone-page .rau-lead,
.retire-docomo-page .rdc-lead,
.retire-mysoftbank-page .rmb-lead { margin: 16px 18px 0; padding: 14px 16px; border-radius: var(--sy-radius); background: var(--sy-white); border: var(--sy-border); box-shadow: var(--sy-shadow-sm); font-size: 14px; font-weight: 700; color: var(--sy-black); line-height: 1.8; }
.retire-account-page .ra-lead-note { display: block; margin-top: 8px; padding: 8px 12px; border-radius: var(--sy-radius-sm); background: #fffbe0; border: 1.5px solid var(--sy-yellow); font-size: 12px; font-weight: 700; color: #7a5000; }
.retire-account-page .ra-lead-note::before,
.retire-auone-page .rau-lead-note::before,
.retire-docomo-page .rdc-lead-note::before { content: "\203B\0020"; }
.retire-auone-page .rau-lead-note,
.retire-docomo-page .rdc-lead-note { display: block; margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: #fffbe0; border: 1.5px solid var(--sy-yellow); font-size: 12px; font-weight: 700; color: #7a5000; }
.retire-docomo-page .rdc-login-error { margin: 12px 18px 0; padding: 12px 16px; border-radius: var(--sy-radius-sm); background: #fff0f0; border: 2px dashed #ffaaaa; font-size: 13px; font-weight: 700; color: #990000; }

/* キャリアバッジ */
.retire-auone-page .rau-carrier-badge,
.retire-docomo-page .rdc-carrier-badge,
.retire-mysoftbank-page .rmb-carrier-badge { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 18px 0; padding: 12px 16px; border-radius: var(--sy-radius-sm); background: #fffbe0; border: var(--sy-border); box-shadow: var(--sy-shadow-sm); font-size: 14px; font-weight: 900; color: var(--sy-black); }
.retire-auone-page .rau-carrier-badge::before,
.retire-docomo-page .rdc-carrier-badge::before,
.retire-mysoftbank-page .rmb-carrier-badge::before { content: "\1F4F1"; font-size: 18px; }

/* セクションタイトル */
.retire-account-page .ra-course-list,
.retire-auone-page .rau-section-title,
.retire-docomo-page .rdc-section-title,
.retire-mysoftbank-page .rmb-section-title { margin: 18px 18px 10px; padding: 10px 16px; border-radius: var(--sy-radius-sm); background: var(--sy-black); color: var(--sy-yellow); font-size: 13px; font-weight: 900; }
.retire-auone-page .rau-section-title,
.retire-docomo-page .rdc-section-title,
.retire-mysoftbank-page .rmb-section-title { margin: 18px 18px 10px; }
.retire-account-page .ra-course-list { margin: 14px 18px 0; display: flex; flex-direction: column; gap: 10px; padding: 0; background: none; color: inherit; font-size: inherit; font-weight: inherit; }

/* コースリスト */
.retire-auone-page .rau-course-list,
.retire-docomo-page .rdc-course-list,
.retire-mysoftbank-page .rmb-course-list { margin: 0 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }

/* コースカード */
.retire-account-page .ra-course-card,
.retire-auone-page .rau-course-card,
.retire-docomo-page .rdc-course-card,
.retire-mysoftbank-page .rmb-course-card { border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow-sm); overflow: hidden; display: block; text-decoration: none; cursor: pointer; transition: transform .1s, box-shadow .1s; }
.retire-account-page .ra-course-card:hover,
.retire-auone-page .rau-course-card:hover,
.retire-docomo-page .rdc-course-card:hover,
.retire-mysoftbank-page .rmb-course-card:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--sy-black); }
.retire-account-page .ra-course-card--processing,
.retire-auone-page .rau-course-card--processing,
.retire-docomo-page .rdc-course-card--processing,
.retire-mysoftbank-page .rmb-course-card--processing { opacity: .7; pointer-events: none; }
.retire-auone-page .rau-course-card--empty,
.retire-docomo-page .rdc-course-card--empty,
.retire-mysoftbank-page .rmb-course-card--empty { padding: 20px 18px; text-align: center; font-size: 14px; font-weight: 700; color: #888; pointer-events: none; cursor: default; }
.retire-auone-page .rau-course-card--empty::before,
.retire-docomo-page .rdc-course-card--empty::before,
.retire-mysoftbank-page .rmb-course-card--empty::before { content: "\2705"; display: block; font-size: 28px; margin-bottom: 8px; }

.retire-account-page .ra-course-head,
.retire-auone-page .rau-course-head,
.retire-docomo-page .rdc-course-head,
.retire-mysoftbank-page .rmb-course-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; background: #f8f8f0; border-bottom: 2px solid rgba(0,0,0,.1); gap: 10px; }
.retire-account-page .ra-course-head--processing,
.retire-auone-page .rau-course-head--processing,
.retire-docomo-page .rdc-course-head--processing,
.retire-mysoftbank-page .rmb-course-head--processing { background: #f8f8f8; }

.retire-auone-page .rau-course-carrier,
.retire-docomo-page .rdc-course-carrier,
.retire-mysoftbank-page .rmb-course-carrier { font-size: 11px; font-weight: 900; color: #555; margin-bottom: 3px; }
.retire-account-page .ra-course-price,
.retire-auone-page .rau-course-price,
.retire-docomo-page .rdc-course-price,
.retire-mysoftbank-page .rmb-course-price { font-family: "Rubik", sans-serif; font-size: 17px; font-weight: 900; color: var(--sy-black); line-height: 1.4; }
.retire-account-page .ra-course-price small,
.retire-auone-page .rau-course-price small,
.retire-docomo-page .rdc-course-price small { display: block; font-size: 12px; font-weight: 700; color: #555; margin-top: 2px; line-height: 1.6; }
.retire-docomo-page .rdc-course-price .free-note { color: var(--sy-red); font-weight: 900; font-size: 11px; display: block; margin-top: 3px; }
.retire-mysoftbank-page .rmb-course-price { font-size: 18px; }

.retire-account-page .ra-course-arrow,
.retire-auone-page .rau-course-arrow,
.retire-docomo-page .rdc-course-arrow,
.retire-mysoftbank-page .rmb-course-arrow { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sy-red); color: var(--sy-white); font-size: 16px; font-weight: 900; border: var(--sy-border); box-shadow: var(--sy-shadow-sm); }

.retire-account-page .ra-course-body,
.retire-auone-page .rau-course-body,
.retire-docomo-page .rdc-course-body,
.retire-mysoftbank-page .rmb-course-body { padding: 12px 18px; font-size: 14px; font-weight: 900; color: var(--sy-red); }
.retire-account-page .ra-course-body--processing,
.retire-auone-page .rau-course-body--processing,
.retire-docomo-page .rdc-course-body--processing,
.retire-mysoftbank-page .rmb-course-body--processing { color: #777; font-size: 13px; font-weight: 700; }

.retire-account-page .ra-processing-badge,
.retire-auone-page .rau-processing-badge,
.retire-docomo-page .rdc-processing-badge,
.retire-mysoftbank-page .rmb-processing-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: #fffbe0; color: #7a5000; font-size: 11px; font-weight: 900; border: 1.5px solid var(--sy-yellow); margin-bottom: 4px; }
.retire-account-page .ra-processing-badge::before,
.retire-auone-page .rau-processing-badge::before,
.retire-docomo-page .rdc-processing-badge::before,
.retire-mysoftbank-page .rmb-processing-badge::before { content: "\23F3"; }

.retire-account-page .ra-empty { margin: 14px 18px 0; padding: 28px 20px; border-radius: var(--sy-radius); border: 2px dashed rgba(0,0,0,.15); background: #f8f8f8; text-align: center; font-size: 14px; font-weight: 700; color: #888; }
.retire-account-page .ra-empty::before { content: "\2705"; display: block; font-size: 34px; margin-bottom: 10px; }

.retire-auone-page .rau-shori-wrap,
.retire-docomo-page .rdc-shori-wrap { margin: 10px 18px 0; text-align: right; overflow: hidden; }
.retire-auone-page .rau-shori-link,
.retire-docomo-page .rdc-shori-link { font-size: 12px; color: #777; text-decoration: none; border-bottom: 1px dotted #999; }

/* 退会キャンセル完了 */
.retire-ng-page .rng-card { margin: 22px 18px 0; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); overflow: hidden; text-align: center; }
.retire-ng-page .rng-card-top { padding: 28px 20px 22px; background: #e8ffe8; position: relative; overflow: hidden; }
.retire-ng-page .rng-card-top::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: repeating-linear-gradient(-45deg, var(--sy-yellow) 0 5px, var(--sy-black) 5px 10px); }
.retire-ng-page .rng-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #117700; color: var(--sy-white); font-size: 30px; border: var(--sy-border); box-shadow: var(--sy-shadow); margin-bottom: 14px; }
.retire-ng-page .rng-title { font-family: "Rubik", sans-serif; font-size: 20px; font-weight: 900; color: var(--sy-black); margin-bottom: 4px; }
.retire-ng-page .rng-subtitle { font-size: 11px; font-weight: 700; color: rgba(0,0,0,.4); letter-spacing: .12em; }
.retire-ng-page .rng-card-body { padding: 20px 22px 22px; }
.retire-ng-page .rng-msg { font-size: 15px; font-weight: 700; color: var(--sy-black); line-height: 1.9; margin-bottom: 20px; }
.retire-ng-page .rng-top-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 18px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 15px; font-weight: 900; text-decoration: none; border: var(--sy-border); box-shadow: var(--sy-shadow); transition: transform .1s, box-shadow .1s; }
.retire-ng-page .rng-top-btn::before { content: "\1F3E0"; font-size: 16px; }
.retire-ng-page .rng-top-btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--sy-black); }

/* 退会完了 */
.retire-ok-page .rok-card { margin: 22px 18px 0; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); overflow: hidden; text-align: center; }
.retire-ok-page .rok-card-top { padding: 28px 20px 22px; background: var(--sy-black); position: relative; overflow: hidden; }
.retire-ok-page .rok-card-top::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: repeating-linear-gradient(-45deg, var(--sy-yellow) 0 4px, var(--sy-black) 4px 8px); }
.retire-ok-page .rok-check { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--sy-yellow); color: var(--sy-black); font-size: 30px; border: 3px solid rgba(255,255,255,.25); box-shadow: 0 0 0 6px rgba(255,209,0,.12); margin-bottom: 14px; }
.retire-ok-page .rok-title { font-family: "Rubik", sans-serif; font-size: 22px; font-weight: 900; color: var(--sy-white); margin-bottom: 6px; }
.retire-ok-page .rok-subtitle { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.4); letter-spacing: .12em; }
.retire-ok-page .rok-card-body { padding: 20px 22px 22px; }
.retire-ok-page .rok-msg { font-size: 14.5px; font-weight: 600; color: var(--sy-black); line-height: 2; }
.retire-ok-page .rok-msg strong { display: block; font-size: 16px; font-weight: 900; color: var(--sy-black); margin-bottom: 6px; }
.retire-ok-page .rok-ad { margin: 22px 18px 0; text-align: center; }

/* ================================================================
   決済中止（regist-ng-page）
================================================================ */
.regist-ng-page .sp-head { background: var(--sy-yellow); }
.regist-ng-page .sp-head h1 { color: var(--sy-black); }
.regist-ng-page .sp-head-kicker { background: var(--sy-black); color: var(--sy-yellow); }
.regist-ng-page .sp-head::before { content: "\1F6AB"; font-size: 68px; color: rgba(0,0,0,.08); }
.regist-ng-page .rgng-card { margin: 22px 18px 0; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); overflow: hidden; text-align: center; }
.regist-ng-page .rgng-card-top { padding: 28px 20px 22px; background: #fffbe0; position: relative; overflow: hidden; }
.regist-ng-page .rgng-card-top::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: repeating-linear-gradient(-45deg, var(--sy-yellow) 0 5px, var(--sy-black) 5px 10px); }
.regist-ng-page .rgng-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--sy-yellow); color: var(--sy-black); font-size: 28px; font-weight: 900; border: var(--sy-border); box-shadow: var(--sy-shadow); margin-bottom: 14px; }
.regist-ng-page .rgng-title { font-family: "Rubik", sans-serif; font-size: 20px; font-weight: 900; color: var(--sy-black); margin-bottom: 4px; }
.regist-ng-page .rgng-subtitle { font-size: 11px; font-weight: 700; color: rgba(0,0,0,.4); letter-spacing: .12em; }
.regist-ng-page .rgng-card-body { padding: 20px 22px 22px; }
.regist-ng-page .rgng-msg { font-size: 15px; font-weight: 700; color: var(--sy-black); line-height: 1.9; margin-bottom: 20px; }
.regist-ng-page .rgng-top-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 18px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 15px; font-weight: 900; text-decoration: none; border: var(--sy-border); box-shadow: var(--sy-shadow); transition: transform .1s, box-shadow .1s; }
.regist-ng-page .rgng-top-btn::before { content: "\1F3E0"; font-size: 16px; }
.regist-ng-page .rgng-top-btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--sy-black); }

/* ================================================================
   難易度別（subgenre-detail-page）
================================================================ */
.subgenre-detail-page .sp-head { background: var(--sy-black); }
.subgenre-detail-page .sp-head h1 { color: var(--sy-white); }
.subgenre-detail-page .sp-head h2 { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.6); }
.subgenre-detail-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.subgenre-detail-page .sp-head::before { content: "\1F3AF"; font-size: 68px; color: rgba(255,255,255,.08); }
.subgenre-detail-page .sg-msg { margin: 14px 18px 0; padding: 14px 16px 16px; border-radius: var(--sy-radius-sm); background: #fffbe0; border: 2px dashed var(--sy-yellow); position: relative; }
.subgenre-detail-page .sg-msg:empty { display: none; }
.subgenre-detail-page .sg-msg::before { content: "\1F4E3\0020 NOTICE"; display: inline-flex; align-items: center; margin-bottom: 10px; padding: 3px 12px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.subgenre-detail-page .sg-msg font,
.subgenre-detail-page .sg-msg > * { display: block; font-size: 13.5px; font-weight: 600; color: #7a5000; line-height: 1.9; }
.subgenre-detail-page .sg-list { margin: 18px 18px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.subgenre-detail-page .sg-list li:nth-child(1) .sg-item { --c: #117700; --ct: #fff; }
.subgenre-detail-page .sg-list li:nth-child(2) .sg-item { --c: #0044cc; --ct: #fff; }
.subgenre-detail-page .sg-list li:nth-child(3) .sg-item { --c: #cc7700; --ct: #fff; }
.subgenre-detail-page .sg-list li:nth-child(4) .sg-item { --c: #cc0000; --ct: #fff; }
.subgenre-detail-page .sg-list li:nth-child(n+5) .sg-item { --c: #7700cc; --ct: #fff; }
.subgenre-detail-page .sg-item { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); text-decoration: none; transition: transform .1s, box-shadow .1s; position: relative; overflow: hidden; }
.subgenre-detail-page .sg-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c, var(--sy-yellow)); }
.subgenre-detail-page .sg-item:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--sy-black); }
.subgenre-detail-page .sg-badge { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--c, var(--sy-black)); color: var(--ct, var(--sy-white)); font-family: "Rubik", sans-serif; font-size: 13px; font-weight: 900; border: var(--sy-border); box-shadow: 2px 2px 0 rgba(0,0,0,.2); }
.subgenre-detail-page .sg-name { font-size: 16px; font-weight: 900; color: var(--sy-black); letter-spacing: -.02em; flex: 1; }
.subgenre-detail-page .sg-arrow { flex-shrink: 0; font-size: 20px; color: rgba(0,0,0,.3); font-weight: 900; }
.subgenre-detail-page .sg-ad { margin: 24px 18px 0; text-align: center; }

/* ================================================================
   退会フロー（tai01〜tai04 / 各ステップ）
================================================================ */
/* 共通ヘッド */
.tai01-page .sp-head, .tai02-page .sp-head { background: #2a0010; }
.tai03-page .sp-head { background: var(--sy-yellow); }
.tai04day-page .sp-head, .tai04eas-page .sp-head { background: var(--sy-black); }
.tai04nig-page .sp-head { background: var(--sy-yellow); }
.tai01-page .sp-head h1, .tai02-page .sp-head h1, .tai04day-page .sp-head h1, .tai04eas-page .sp-head h1 { color: var(--sy-white); }
.tai03-page .sp-head h1, .tai04nig-page .sp-head h1 { color: var(--sy-black); }
.tai01-page .sp-head-kicker, .tai02-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.tai03-page .sp-head-kicker, .tai04nig-page .sp-head-kicker { background: var(--sy-black); color: var(--sy-yellow); }
.tai04day-page .sp-head-kicker, .tai04eas-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.tai01-page .sp-head::before, .tai02-page .sp-head::before { content: "\1F6AA"; font-size: 68px; color: rgba(255,255,255,.08); }
.tai03-page .sp-head::before { content: "\2714"; font-family: "Rubik", sans-serif; font-size: 80px; color: rgba(0,0,0,.08); }
.tai04day-page .sp-head::before, .tai04eas-page .sp-head::before { content: "\1F6AA"; font-size: 68px; color: rgba(255,255,255,.08); }
.tai04nig-page .sp-head::before { content: "\1F64F"; font-size: 68px; color: rgba(0,0,0,.08); }

/* tai01 ステップバー */
.tai01-page .tai01-steps { display: flex; align-items: center; justify-content: center; margin: 18px 18px 0; padding: 14px 16px; border-radius: var(--sy-radius); background: var(--sy-white); border: var(--sy-border); box-shadow: var(--sy-shadow-sm); }
.tai01-page .tai01-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.tai01-page .tai01-step-circle { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-family: "Rubik", sans-serif; font-size: 13px; font-weight: 900; border: var(--sy-border); }
.tai01-page .tai01-step-circle--active   { background: var(--sy-black); color: var(--sy-yellow); box-shadow: 2px 2px 0 var(--sy-black); }
.tai01-page .tai01-step-circle--inactive { background: #f0f0f0; color: #aaa; }
.tai01-page .tai01-step-label { font-size: 9px; font-weight: 900; color: #888; letter-spacing: .04em; white-space: nowrap; }
.tai01-page .tai01-step-label--active { color: var(--sy-black); }
.tai01-page .tai01-step-divider { flex: 0 0 20px; height: 2px; background: rgba(0,0,0,.12); margin-bottom: 14px; }
.tai02-page .tai01-page { display: none; }

/* tai01 / tai02 セクション */
.tai01-page .tai01-section, .tai02-page .tai02-section { margin: 14px 18px 0; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow-sm); overflow: hidden; }
.tai01-page .tai01-section-head, .tai02-page .tai02-section-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: #fffbe0; border-bottom: var(--sy-border); }
.tai01-page .tai01-section-num, .tai02-page .tai02-section-num { flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; background: var(--sy-black); color: var(--sy-yellow); font-family: "Rubik", sans-serif; font-size: 12px; font-weight: 900; border: var(--sy-border); box-shadow: 2px 2px 0 var(--sy-black); }
.tai01-page .tai01-section-title, .tai02-page .tai02-section-title { font-size: 14px; font-weight: 900; color: var(--sy-black); }
.tai01-page .tai01-section-body, .tai02-page .tai02-section-body { padding: 16px 18px; }

/* セレクト共通 */
.tai01-page .tai01-select, .tai02-page .tai02-select { display: block; width: 100%; box-sizing: border-box; padding: 13px 36px 13px 14px; border-radius: var(--sy-radius-sm); border: var(--sy-border); background: #f8f8f0; font-size: 14px; font-weight: 700; color: var(--sy-black); font-family: inherit; box-shadow: var(--sy-shadow-sm); outline: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23111111' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
.tai01-page .tai01-select:focus, .tai02-page .tai02-select:focus { border-color: #cc9900; box-shadow: 3px 3px 0 var(--sy-yellow); }

/* ラジオリスト共通 */
.tai01-page .tai01-radio-list, .tai02-page .tai02-radio-list { display: flex; flex-direction: column; gap: 8px; }
.tai01-page .tai01-radio-list label, .tai02-page .tai02-radio-list label { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--sy-radius-sm); border: var(--sy-border); background: var(--sy-white); font-size: 14px; font-weight: 700; color: var(--sy-black); cursor: pointer; transition: background .12s; }
.tai01-page .tai01-radio-list label:hover, .tai02-page .tai02-radio-list label:hover { background: #fffbe0; }
.tai01-page .tai01-radio-list input[type="radio"], .tai02-page .tai02-radio-list input[type="radio"] { accent-color: var(--sy-black); width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }

/* tai02 テキストエリア */
.tai02-page .tai02-textarea { display: block; width: 100%; box-sizing: border-box; padding: 13px 14px; border-radius: var(--sy-radius-sm); border: var(--sy-border); background: #f8f8f0; font-size: 14px; color: var(--sy-black); font-family: inherit; line-height: 1.8; resize: vertical; box-shadow: var(--sy-shadow-sm); outline: none; transition: border-color .15s; }
.tai02-page .tai02-textarea:focus { border-color: #cc9900; box-shadow: 3px 3px 0 var(--sy-yellow); }

/* tai02 リード */
.tai02-page .tai02-lead { margin: 16px 18px 0; padding: 12px 16px; border-radius: var(--sy-radius-sm); background: #fffbe0; border: 2px solid var(--sy-yellow); font-size: 13px; font-weight: 700; color: #7a5000; line-height: 1.8; }
.tai02-page .tai02-lead::before { content: "\1F4AC\0020"; font-size: 15px; }

/* 次へボタン */
.tai01-page .tai01-next-btn, .tai02-page .tai02-next-btn { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 22px 18px 0; padding: 17px 18px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 16px; font-weight: 900; text-decoration: none; border: var(--sy-border); box-shadow: var(--sy-shadow); transition: transform .1s, box-shadow .1s; }
.tai01-page .tai01-next-btn::after, .tai02-page .tai02-next-btn::after { content: "\203A"; font-family: "Rubik", sans-serif; font-size: 22px; font-weight: 900; line-height: 1; }
.tai01-page .tai01-next-btn:hover, .tai02-page .tai02-next-btn:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--sy-black); }

/* tai03 */
.tai03-page .tai03-lead { margin: 16px 18px 0; padding: 12px 16px; border-radius: var(--sy-radius-sm); background: #fffbe0; border: 2px solid var(--sy-yellow); font-size: 13px; font-weight: 700; color: #7a5000; line-height: 1.8; }
.tai03-page .tai03-lead::before { content: "\2139\0020"; font-size: 15px; color: #cc7700; font-weight: 900; }
.tai03-page .tai03-order-card { margin: 14px 18px 0; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); overflow: hidden; }
.tai03-page .tai03-order-head { padding: 12px 20px; background: var(--sy-black); display: flex; align-items: center; gap: 8px; }
.tai03-page .tai03-order-head-icon { font-size: 16px; color: var(--sy-yellow); }
.tai03-page .tai03-order-head-title { font-family: "Rubik", sans-serif; font-size: 13px; font-weight: 900; color: var(--sy-white); letter-spacing: .08em; }
.tai03-page .tai03-order-body { padding: 4px 0 8px; }
.tai03-page .tai03-order-row { display: flex; flex-direction: column; padding: 13px 18px; border-bottom: 1.5px solid rgba(0,0,0,.08); gap: 4px; }
.tai03-page .tai03-order-row:last-child { border-bottom: none; }
.tai03-page .tai03-order-dt { font-size: 11px; font-weight: 900; color: #888; letter-spacing: .06em; }
.tai03-page .tai03-order-dd { font-size: 15px; font-weight: 900; color: var(--sy-black); word-break: break-all; }
.tai03-page .tai03-order-dd--agree { color: #117700; }
.tai03-page .tai03-order-dd--no    { color: var(--sy-red); }
.tai03-page .tai03-btn-wrap { margin: 20px 18px 0; }
.tai03-page .tai03-btn-wrap a,
.tai03-page .tai03-btn-wrap .btn-flat-border { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 17px 18px; border-radius: 999px; background: var(--sy-red); color: var(--sy-white); font-size: 17px; font-weight: 900; text-decoration: none; border: var(--sy-border); box-shadow: var(--sy-shadow); transition: transform .1s, box-shadow .1s; }
.tai03-page .tai03-btn-wrap a::before,
.tai03-page .tai03-btn-wrap .btn-flat-border::before { content: "\00D7"; font-family: "Rubik", sans-serif; font-size: 20px; font-weight: 900; }
.tai03-page .tai03-btn-wrap a:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--sy-black); }

/* tai04day / tai04eas 統合カード */
.tai04day-page .tai-combined-card,
.tai04eas-page .tai-combined-card { margin: 18px 18px 0; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); overflow: hidden; }
.tai04day-page .tai-combined-top,
.tai04eas-page .tai-combined-top { background: var(--sy-black); padding: 20px 22px 18px; text-align: center; }
.tai04day-page .tai-combined-top-kicker,
.tai04eas-page .tai-combined-top-kicker { display: inline-block; margin-bottom: 10px; padding: 3px 12px; border-radius: 999px; background: var(--sy-yellow); color: var(--sy-black); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.tai04day-page .tai-combined-top p,
.tai04eas-page .tai-combined-top p { margin: 0; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.85); line-height: 1.9; text-align: left; }
.tai04day-page .tai-combined-top p strong,
.tai04eas-page .tai-combined-top p strong { display: block; font-size: 15px; font-weight: 900; color: var(--sy-white); margin-bottom: 8px; }
.tai04day-page .tai-combined-top p u,
.tai04eas-page .tai-combined-top p u { display: block; margin-top: 8px; text-align: center; color: var(--sy-yellow); text-decoration: none; font-weight: 800; }
.tai04day-page .tai-combined-warn,
.tai04eas-page .tai-combined-warn { padding: 16px 22px 18px; background: #fff5f5; border-top: var(--sy-border); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tai04day-page .tai-combined-warn-badge,
.tai04eas-page .tai-combined-warn-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px; background: var(--sy-red); color: var(--sy-white); font-size: 10px; font-weight: 900; border: var(--sy-border); box-shadow: 2px 2px 0 var(--sy-black); }
.tai04day-page .tai-combined-warn p,
.tai04eas-page .tai-combined-warn p { margin: 0; font-size: 13.5px; font-weight: 700; color: #990000; line-height: 1.8; text-align: left; align-self: stretch; }
.tai04day-page .tai-combined-warn p strong,
.tai04eas-page .tai-combined-warn p strong { display: block; font-size: 14.5px; font-weight: 900; margin-top: 6px; }

/* キャリアカード共通（tai04） */
.tai04day-page .tai-carrier-title,
.tai04eas-page .tai-carrier-title { margin: 24px 18px 10px; font-size: 15px; font-weight: 900; color: var(--sy-black); display: flex; align-items: center; gap: 8px; }
.tai04day-page .tai-carrier-title::before,
.tai04eas-page .tai-carrier-title::before { content: ""; display: inline-block; width: 6px; height: 20px; background: var(--sy-yellow); border: 1.5px solid var(--sy-black); flex-shrink: 0; }
.tai04day-page .tai-carrier-list,
.tai04eas-page .tai-carrier-list { margin: 0 18px; display: flex; flex-direction: column; gap: 10px; }
.tai04day-page .tai-carrier-card,
.tai04eas-page .tai-carrier-card { border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow-sm); overflow: hidden; }
.tai04day-page .tai-carrier-head,
.tai04eas-page .tai-carrier-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: var(--sy-border); }
.tai04day-page .tai-carrier-head--au,
.tai04eas-page .tai-carrier-head--au   { background: #fff8f0; }
.tai04day-page .tai-carrier-head--dcm,
.tai04eas-page .tai-carrier-head--dcm  { background: #fff0f0; }
.tai04day-page .tai-carrier-head--sb,
.tai04eas-page .tai-carrier-head--sb   { background: #f0f4ff; }
.tai04day-page .tai-carrier-badge,
.tai04eas-page .tai-carrier-badge { flex-shrink: 0; padding: 4px 12px; border-radius: 999px; font-family: "Rubik", sans-serif; font-size: 12px; font-weight: 900; border: var(--sy-border); box-shadow: 2px 2px 0 var(--sy-black); }
.tai04day-page .tai-carrier-badge--au,
.tai04eas-page .tai-carrier-badge--au  { background: #ff6600; color: var(--sy-white); }
.tai04day-page .tai-carrier-badge--dcm,
.tai04eas-page .tai-carrier-badge--dcm { background: #e60012; color: var(--sy-white); }
.tai04day-page .tai-carrier-badge--sb,
.tai04eas-page .tai-carrier-badge--sb  { background: #0044cc; color: var(--sy-white); }
.tai04day-page .tai-carrier-label,
.tai04eas-page .tai-carrier-label { font-size: 13px; font-weight: 900; color: var(--sy-black); }
.tai04day-page .tai-carrier-body,
.tai04eas-page .tai-carrier-body { padding: 14px 16px; font-size: 12.5px; line-height: 1.9; color: var(--sy-black); font-weight: 500; }
.tai04day-page .tai-carrier-step,
.tai04eas-page .tai-carrier-step { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; }
.tai04day-page .tai-carrier-arrow,
.tai04eas-page .tai-carrier-arrow { color: rgba(0,0,0,.3); font-weight: 900; flex-shrink: 0; }

/* 退会ボタン（tai04） */
.tai04day-page .tai-retire-btn,
.tai04eas-page .tai-retire-btn { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 22px 18px 0; padding: 17px 18px; border-radius: 999px; background: var(--sy-red); color: var(--sy-white); font-size: 16px; font-weight: 900; text-decoration: none; border: var(--sy-border); box-shadow: var(--sy-shadow); transition: transform .1s, box-shadow .1s; }
.tai04day-page .tai-retire-btn::before,
.tai04eas-page .tai-retire-btn::before { content: "\00D7"; font-family: "Rubik", sans-serif; font-size: 20px; font-weight: 900; color: var(--sy-white); line-height: 1; }
.tai04day-page .tai-retire-btn:hover,
.tai04eas-page .tai-retire-btn:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--sy-black); }
.tai04day-page .tai-ad, .tai04eas-page .tai-ad,
.tai01-page .tai01-ad, .tai02-page .tai02-ad, .tai03-page .tai03-ad { margin: 22px 18px 0; text-align: center; }
.tai04day-page .tai-footer { margin: 32px 18px 0; padding: 16px 18px; border-radius: var(--sy-radius); background: #f0f0f0; border: 2px solid rgba(0,0,0,.1); font-size: 11px; color: rgba(0,0,0,.5); text-align: center; font-weight: 600; line-height: 1.8; }
.tai01-page #box { width: 100%; }

/* tai04nig 完了カード */
.tai04nig-page .retire-thanks-card { margin: 18px 18px 0; padding: 30px 22px; border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow); text-align: center; position: relative; overflow: hidden; }
.tai04nig-page .retire-thanks-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--sy-yellow) 0 6px, var(--sy-black) 6px 12px); }
.tai04nig-page .retire-thanks-icon { font-size: 48px; line-height: 1; margin-bottom: 14px; display: block; }
.tai04nig-page .retire-thanks-main { font-size: 15px; font-weight: 900; color: var(--sy-black); line-height: 1.9; margin-bottom: 14px; }
.tai04nig-page .retire-thanks-sub  { font-size: 13px; font-weight: 500; color: rgba(0,0,0,.6); line-height: 1.9; }
.tai04nig-page .retire-top-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 18px 0; padding: 15px 18px; border-radius: 999px; background: var(--sy-black); color: var(--sy-yellow); font-size: 15px; font-weight: 900; text-decoration: none; border: var(--sy-border); box-shadow: var(--sy-shadow); transition: transform .1s, box-shadow .1s; }
.tai04nig-page .retire-top-btn::before { content: "\1F3E0"; font-size: 16px; }
.tai04nig-page .retire-top-btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--sy-black); }
.tai04nig-page .retire-ad { margin: 20px 18px 0; text-align: center; }
.tai04nig-page .retire-faq-title { margin: 28px 18px 8px; font-size: 17px; font-weight: 900; color: var(--sy-black); display: flex; align-items: center; gap: 8px; }
.tai04nig-page .retire-faq-title::before { content: ""; display: inline-block; width: 6px; height: 22px; background: var(--sy-yellow); border: 1.5px solid var(--sy-black); flex-shrink: 0; }
.tai04nig-page .retire-faq-list { margin: 0 18px; display: flex; flex-direction: column; gap: 8px; }
.tai04nig-page .retire-faq-item { border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow-sm); overflow: hidden; }
.tai04nig-page .retire-faq-q { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; background: #fffbe0; border-bottom: 1.5px solid rgba(0,0,0,.1); }
.tai04nig-page .retire-faq-q-badge { flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; background: var(--sy-black); color: var(--sy-yellow); font-family: "Rubik", sans-serif; font-size: 12px; font-weight: 900; margin-top: 1px; }
.tai04nig-page .retire-faq-q-text  { font-size: 13.5px; font-weight: 900; color: var(--sy-black); line-height: 1.5; padding-top: 3px; }
.tai04nig-page .retire-faq-a { padding: 12px 16px; font-size: 13px; line-height: 1.85; color: var(--sy-black); font-weight: 500; }
.tai04nig-page .retire-action-card { margin: 14px 18px 0; padding: 20px 18px; border-radius: var(--sy-radius); border: var(--sy-border); background: #fffbe0; box-shadow: var(--sy-shadow-sm); text-align: center; }
.tai04nig-page .retire-action-card p  { margin: 0 0 14px; font-size: 13.5px; font-weight: 600; color: var(--sy-black); line-height: 1.8; }
.tai04nig-page .retire-action-card a  { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 28px; border-radius: 999px; background: var(--sy-red); color: var(--sy-white); font-size: 15px; font-weight: 900; text-decoration: none; border: var(--sy-border); box-shadow: var(--sy-shadow-sm); transition: transform .1s, box-shadow .1s; }
.tai04nig-page .retire-action-card a::before { content: "\00D7"; font-size: 18px; font-weight: 900; }
.tai04nig-page .retire-action-card a:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--sy-black); }

/* ================================================================
   お問い合わせ（toiawase-page）
================================================================ */
.toiawase-page .sp-head { background: #0a1a3a; }
.toiawase-page .sp-head h1 { color: var(--sy-white); }
.toiawase-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.toiawase-page .sp-head::before { content: "\2709"; font-size: 74px; color: rgba(255,255,255,.08); }
.toiawase-page iframe { border: none; }
.toiawase-page .info_tell { background: linear-gradient(transparent 60%, var(--sy-yellow) 60%); color: var(--sy-red); font-weight: 800; }

.toiawase-page .toiawase-select-card { margin: 18px 18px 0; padding: 20px 18px; border-radius: var(--sy-radius); background: var(--sy-white); border: var(--sy-border); box-shadow: var(--sy-shadow-sm); }
.toiawase-page .toiawase-select-label { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 900; color: var(--sy-black); }
.toiawase-page #main_product { display: block; width: 100%; box-sizing: border-box; padding: 13px 36px 13px 14px; border-radius: var(--sy-radius-sm); border: var(--sy-border); background: #f8f8f0; font-size: 14px; color: var(--sy-black); font-family: inherit; font-weight: 600; box-shadow: var(--sy-shadow-sm); outline: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23111111' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
.toiawase-page #main_product:focus { border-color: #cc9900; box-shadow: 3px 3px 0 var(--sy-yellow); }
.toiawase-page #review { display: none; width: 100%; margin-top: 4px; }
.toiawase-page #tell-frame { display: none; margin: 14px 0 0; }
.toiawase-page .tell-notice { display: flex; align-items: flex-start; gap: 12px; padding: 18px 16px; border-radius: var(--sy-radius); background: var(--sy-white); border: var(--sy-border); box-shadow: var(--sy-shadow-sm); font-size: 14.5px; line-height: 1.9; color: var(--sy-black); font-weight: 500; margin-bottom: 14px; }
.toiawase-page .tell-notice::before { content: "!"; flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sy-yellow); color: var(--sy-black); font-family: "Rubik", sans-serif; font-size: 16px; font-weight: 900; border: var(--sy-border); box-shadow: 2px 2px 0 var(--sy-black); margin-top: 1px; }
.toiawase-page .tell-time { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: rgba(0,0,0,.5); }
.toiawase-page .tellch { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.toiawase-page .tellch input[type="checkbox"] { accent-color: var(--sy-black); width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
.toiawase-page .tellch label { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; color: var(--sy-black); cursor: pointer; padding: 12px 16px; border-radius: var(--sy-radius-sm); border: var(--sy-border); background: var(--sy-white); transition: background .15s; }
.toiawase-page .tellch label:hover { background: #fffbe0; }
.toiawase-page .icon_arrow a { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 20px; border-radius: 999px; border: var(--sy-border); background: #117700; color: var(--sy-white); font-size: 17px; font-weight: 900; text-decoration: none; box-shadow: var(--sy-shadow); transition: transform .1s, box-shadow .1s; margin-top: 4px; }
.toiawase-page .icon_arrow a .icon { width: 24px; height: 24px; object-fit: contain; }
.toiawase-page .icon_arrow a:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--sy-black); }

/* ================================================================
   お問い合わせ完了（toiawase-thanks-page）
================================================================ */
.toiawase-thanks-page .sp-head { background: #0a2a0a; }
.toiawase-thanks-page .sp-head h1 { color: var(--sy-white); }
.toiawase-thanks-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.toiawase-thanks-page .sp-head::before { content: "\2713"; font-family: "Rubik", sans-serif; font-size: 96px; color: rgba(255,255,255,.1); right: 14px; }
.toiawase-thanks-page .thanks { display: inline-block; padding: 2px 6px; border-radius: 4px; background: linear-gradient(transparent 60%, var(--sy-yellow) 60%); color: var(--sy-red); font-weight: 800; }
.toiawase-thanks-page .thanks-banner { margin: 18px 18px 0; padding: 16px 18px; border-radius: var(--sy-radius); background: #e8ffe8; border: var(--sy-border); box-shadow: var(--sy-shadow-sm); display: flex; align-items: center; gap: 14px; }
.toiawase-thanks-page .thanks-banner-icon { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #117700; color: var(--sy-white); font-size: 20px; border: var(--sy-border); box-shadow: 2px 2px 0 var(--sy-black); }
.toiawase-thanks-page .thanks-banner-text { font-size: 13.5px; line-height: 1.75; color: #0a3a0a; font-weight: 700; }
.toiawase-thanks-page .thanks-banner-text strong { display: block; font-size: 15px; font-weight: 900; margin-bottom: 2px; }
.toiawase-thanks-page .thanks-date-card { margin: 14px 18px 0; padding: 16px 18px; border-radius: var(--sy-radius); background: var(--sy-white); border: 2px solid var(--sy-yellow); box-shadow: var(--sy-shadow-sm); font-size: 13.5px; line-height: 1.75; color: var(--sy-black); font-weight: 500; }
.toiawase-thanks-page .thanks-date-label { display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px; background: var(--sy-yellow); color: var(--sy-black); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.toiawase-thanks-page #datebox { color: #0033aa; font-weight: 900; }
.toiawase-thanks-page .thanks-check-card { margin: 14px 18px 0; padding: 18px; border-radius: var(--sy-radius); background: var(--sy-white); border: var(--sy-border); box-shadow: var(--sy-shadow-sm); }
.toiawase-thanks-page .thanks-check-title { font-size: 12px; font-weight: 900; color: rgba(0,0,0,.5); letter-spacing: .1em; margin-bottom: 12px; }
.toiawase-thanks-page .thanks-check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.toiawase-thanks-page .thanks-check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.6; color: var(--sy-black); font-weight: 500; }
.toiawase-thanks-page .thanks-check-list li::before { content: "\2713"; flex-shrink: 0; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--sy-black); color: var(--sy-yellow); font-size: 10px; font-weight: 900; margin-top: 1px; }
.toiawase-thanks-page .thanks-check-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.08); font-size: 12px; color: rgba(0,0,0,.55); line-height: 1.72; }

/* ================================================================
   特定商取引（tokutei-page）
================================================================ */
.tokutei-page .sp-head { background: #0a1a3a; }
.tokutei-page .sp-head h1 { color: var(--sy-white); }
.tokutei-page .sp-head-kicker { background: var(--sy-yellow); color: var(--sy-black); }
.tokutei-page .sp-head::before { content: "\2750"; font-size: 80px; color: rgba(255,255,255,.08); }
.tokutei-page .tokutei-intro { margin: 18px 18px 0; font-size: 12.5px; color: rgba(0,0,0,.55); font-weight: 500; line-height: 1.7; padding: 0 2px; }
.tokutei-page .tokutei-list { margin: 14px 18px 0; display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; }
.tokutei-page .tokutei-item { border-radius: var(--sy-radius); border: var(--sy-border); background: var(--sy-white); box-shadow: var(--sy-shadow-sm); overflow: hidden; }
.tokutei-page .tokutei-item-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--sy-black); color: var(--sy-yellow); font-size: 11px; font-weight: 900; letter-spacing: .06em; }
.tokutei-page .tokutei-item-head::before { content: "\25CF"; font-size: 7px; color: var(--sy-yellow); }
.tokutei-page .tokutei-item-body { padding: 14px 16px; font-size: 13px; line-height: 1.82; color: var(--sy-black); font-weight: 500; }
.tokutei-page .tokutei-item-body a { color: #0033aa; font-weight: 700; text-decoration: underline; }
.tokutei-page #box1, .tokutei-page #box2 { margin: 4px 0 0; font-size: 13px; color: var(--sy-black); font-weight: 600; }