@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/* ============================================================
   目次 / TABLE OF CONTENTS
   ============================================================
   1. クイズページ用CSS（白基調）
   2. KMAX トップページ用CSS
   3. レスポンシブ / スマホ対応
   ============================================================ */


/* ============================================================
   1. クイズページ用CSS（白基調）
   ============================================================ */

/* 背景：薄いグレー白 */
body.page,
body.single {
  background-color: #f4f6f8;
}

/* Cocoonの余計な背景を除去 */
.main,
.entry-card,
.article,
.content,
.content-wrap {
  background-color: transparent !important;
}

.entry-content {
  background-color: transparent !important;
  color: #1a2535 !important;
  position: relative;
  z-index: 1;
}

/* タイトル（TG1_1 など） */
.entry-title,
h1.entry-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(36px, 6vw, 52px) !important;
  letter-spacing: 0.05em !important;
  color: #1a2535 !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
  border: none !important;
  padding: 0 !important;
}

/* タイトル下の区切り線 */
.entry-title::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, #2a476e 0%, transparent 100%);
  margin-top: 10px;
}

/* 進捗表示 */
.anki-progress {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 24px !important;
  font-weight: normal !important;
  color: #2a476e !important;
  letter-spacing: 0.1em;
  margin: 0 0 24px !important;
  display: block;
}

/* 問題カード全体 */
.quiz-card {
  background: #fff !important;
  border: 1px solid #dce3ec !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  margin-bottom: 32px;
  overflow: hidden;
  display: none;
}

.quiz-card.is-active {
  display: block;
}

/* 問題文エリア（黄色グラデーション） */
.entry-content .question,
.quiz-card .question {
  background: #c9c9c7;
  border: none !important;
  border-radius: 0 !important;
  padding: 24px 28px !important;
  margin: 0 !important;
  color: #1a2535 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.01em !important;
}

/* 問題文の前に"Q." */
.entry-content .question::before,
.quiz-card .question::before {
  content: "Q. ";
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  color: #1a2535;
  margin-right: 8px;
  font-weight: 900;
  position: static;
  border: none;
}

/* Cocoonのquestion-boxスタイルを無効化 */
.is-style-question-box::before,
.question-box::before {
  content: none !important;
  border: none !important;
  padding: 0 !important;
}

/* === Ruby（ふりがな）=== */
ruby {
  display: inline-ruby;
  margin: 0;
  padding: 0;
  ruby-align: center;
  vertical-align: baseline;
  line-height: 2;

}

rt {
  font-size: 45%;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  transform: translateY(-2px);
}



/* 問題エリアの画像：中央寄せ */
.quiz-card .question img,
.entry-content .question img {
  display: block !important;
  margin: 12px auto !important;
  max-width: 100% !important;
  height: auto !important;
}



/* 選択肢リスト */
.choices {
  list-style: none !important;
  padding: 24px 20px !important;
  
  background: #f8fafc;
}

.choices li {
  background: #fff !important;
  border: 2px solid #dce3ec !important;
  /* padding: 14px 20px !important; */
  padding: 14px 50px 14px 20px !important;
  margin-bottom: 10px !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  transition: all 0.15s !important;
  display: block !important;
  gap: 1px !important;
  position: relative !important;
  list-style: none !important;
  font-size: 16px !important;
  color: #1a2535 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  align-items: center !important;
  /* align-items: first baseline !important; */
  line-height: 2 !important;
  flex-wrap: nowrap !important;

}

.choices li:hover {
  background: #eef3ff !important;
  border-color: #2a476e !important;
  transform: translateX(3px);
}

/* 番号 */
.choices li:nth-child(1)::before { content: "1."; }
.choices li:nth-child(2)::before { content: "2."; }
.choices li:nth-child(3)::before { content: "3."; }
.choices li:nth-child(4)::before { content: "4."; }

/* 正解 */
.choices li.correct,
.choices li.is-correct {
  background: #f0fae8 !important;
  border-color: #6aaa1e !important;
  color: #3a6e0a !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 3px rgba(106,170,30,0.15);
}

.choices li.correct::before,
.choices li.is-correct::before {
  color: #6aaa1e !important;
  top: 50% !important;                        /* 位置を中央に変更 */
  transform: translateY(-50%) !important;     /* 中央寄せ用のtransform追加 */
}

.choices li.is-correct::after {
  content: "〇";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  color: #6aaa1e;
  font-weight: 900;
}

/* 不正解 */
.choices li.wrong,
.choices li.is-wrong {
  background: #fff5f5 !important;
  border-color: #c0392b !important;
  color: #8b2020 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,0.1);
}

.choices li.wrong::before,
.choices li.is-wrong::before {
  color: #c0392b !important;
}

.choices li.is-wrong::after {
  content: "×";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  color: #c0392b;
  font-weight: 900;
}

/* クリック不可 */
.choices li.disabled {
  pointer-events: none;
  opacity: 0.7;
}

/* 解説ボタン非表示 */
.explain-btn {
  display: none !important;
}

/* 解説エリア */
.explanation {
  background: #f0f4fa !important;
  border-top: 3px solid #2a476e !important;
  border-left: none !important;
  border-radius: 0 !important;
  padding: 24px 28px !important;
  margin: 0 !important;
  color: #2a3a50 !important;
  line-height: 1.7 !important;
}

/* KOSA KATA ラベル */
.explanation > b:first-child {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 20px !important;
  letter-spacing: 0.12em !important;
  color: #2a476e !important;
  display: block !important;
  margin-bottom: 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid #2a476e !important;
}

/* PENJELASAN ラベル */
.explanation p b {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 18px !important;
  letter-spacing: 0.1em !important;
  color: #2a476e !important;
  display: block !important;
  margin-top: 16px !important;
  margin-bottom: 8px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px dashed #b0bfd0 !important;
}

.explanation p {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #2a3a50 !important;
  margin-bottom: 12px !important;
}

.explanation ul,
.explanation ol {
  border-top: 1px dashed #b0bfd0 !important;
  padding-top: 14px !important;
  margin-top: 14px !important;
  list-style: none !important;
}

.explanation li {
  font-size: 14px !important;
  color: #3a5070 !important;
  margin-bottom: 6px !important;
  line-height: 1.6 !important;
  list-style: none !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

/* ボタン共通 */
.anki-btn-wrap {
  display: flex !important;
  gap: 12px !important;
  /* margin-top: 32px !important; */
  align-items: stretch !important;
}

.anki-back-btn,
.anki-next-btn {
  flex: 1 !important;
  padding: 16px !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 19px !important;
  letter-spacing: 0.15em !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  text-align: center !important;
  font-weight: normal !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
}

.anki-back-btn {
  background: #e8ecf0 !important;
  color: #5a6a7a !important;
}

.anki-back-btn:hover {
  background: #d4dbe3 !important;
  color: #1a2535 !important;
}

.anki-next-btn {
  background: #2a476e !important;
  color: #fff !important;
}

.anki-next-btn:hover {
  background: #1e3556 !important;
}

#anki-repeat-wrong {
  display: block;
  width: 80%;
  margin: 16px auto;
  padding: 16px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 19px;
  letter-spacing: 0.15em;
  background: #f5c518;
  color: #1a2535;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

#anki-repeat-wrong:hover { background: #d4a800; }

.anki-finish-btn {
  display: block;
  width: 80%;
  margin: 16px auto;
  padding: 16px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 19px;
  letter-spacing: 0.15em;
  background: #2a476e;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.anki-finish-btn:hover { background: #1e3556; }

@media print { body { display: none; } }


/* ============================================================
   2. KMAX トップページ用CSS（白基調）
   ============================================================ */

.kmax-wrap {
  --kmax-base:    #2a476e;
  --kmax-yellow:  #f5c518;
  --kmax-green:   #5a9e1e;
  --kmax-green-lt:#eef6e6;
  --kmax-red:     #c0392b;
  --kmax-text:    #1a2535;
  --kmax-muted:   #6b7f96;
  --kmax-border:  #dce3ec;
  --kmax-surface: #fff;
  --kmax-bg:      #f4f6f8;
  background: var(--kmax-bg);
  color: var(--kmax-text);
  font-family: 'Noto Sans', sans-serif;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* 不要なpタグ非表示 */
.kmax-q-grid > p,
.kmax-pricing-grid > p {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* ヒーローセクション：紺帯 */
.kmax-hero {
  background: #1a2535;
  position: relative;
  overflow: hidden;
  padding: 56px 40px 48px;
  box-sizing: border-box;
}

/* ヒーロー背景グリッド */
.kmax-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.kmax-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.kmax-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #94c546;
  margin-bottom: 16px;
}

.kmax-eyebrow::before {
  content: '';
  width: 20px;
  height: 1.5px;
  background: #94c546;
  flex-shrink: 0;
}

.kmax-wrap .kmax-h1 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(44px, 6vw, 80px) !important;
  line-height: 0.95 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 12px !important;
  color: #fff !important;
  border: none !important;
  padding: 0 !important;
}

.kmax-h1-accent { color: var(--kmax-yellow) !important; }

.kmax-sub {
  font-size: clamp(13px, 1.6vw, 16px);
  font-weight: 300;
  color: #9aacbf;
  margin-bottom: 32px;
  letter-spacing: 0.03em;
}

.kmax-stats {
  display: flex;
  gap: 32px;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  flex-wrap: wrap;
}

.kmax-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  color: #fff;
  letter-spacing: 0.04em;
  line-height: 1;
}

.kmax-stat-unit  { font-size: 16px; color: var(--kmax-yellow); }
.kmax-stat-label { font-size: 11px; color: #6a8099; letter-spacing: 0.06em; margin-top: 2px; }

/* メインコンテンツ */
.kmax-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 40px 72px;
  box-sizing: border-box;
}

.kmax-section-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.kmax-section-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--kmax-muted);
  white-space: nowrap;
}

.kmax-section-hr { flex: 1; height: 1px; background: var(--kmax-border); }

/* 問題グリッド */
.kmax-q-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: 64px 64px 64px !important;
  gap: 1px !important;
  background: var(--kmax-border);
  border: 1px solid var(--kmax-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 28px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.kmax-q-card {
  background: var(--kmax-surface) !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  transition: background 0.15s, border-left-color 0.15s !important;
  text-decoration: none !important;
  color: var(--kmax-text) !important;
  height: 64px !important;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  border-left: 3px solid transparent;
}

.kmax-q-card:hover {
  background: #eef3ff !important;
  border-left-color: var(--kmax-base) !important;
  color: var(--kmax-text) !important;
}

/* フリーサンプルカード */
.kmax-q-sample {
  background: var(--kmax-green-lt) !important;
  border-left: 3px solid var(--kmax-green) !important;
  grid-row: 3 !important;
  grid-column: 2 / 5 !important;
  height: 64px !important;
}

.kmax-q-sample:hover {
  background: #dff0cc !important;
}

.kmax-q-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--kmax-text);
}

.kmax-q-sample .kmax-q-name { color: var(--kmax-green); font-weight: 700; }

.kmax-q-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 700;
  flex-shrink: 0;
}

/* ===== ロック/アンロック切り替え ===== */
/* デフォルト：未登録・無料会員は赤ロック */
.kmax-locked { color: #c0392b; }
.kmax-free   { color: #c0392b; }

.kmax-locked .kmax-icon-lock        { display: inline-block; }
.kmax-locked .kmax-icon-unlock      { display: none; }
.kmax-locked .kmax-badge-text-lock  { display: inline; }
.kmax-locked .kmax-badge-text-unlock{ display: none; }

/* 無料会員：サンプルのみ緑 */
.is-free-member .kmax-free { color: var(--kmax-green) !important; }

/* 有料・従業員：全部緑アンロック */
.is-premium .kmax-locked             { color: var(--kmax-green); }
.is-premium .kmax-locked .kmax-icon-lock        { display: none; }
.is-premium .kmax-locked .kmax-icon-unlock      { display: inline-block; }
.is-premium .kmax-locked .kmax-badge-text-lock  { display: none; }
.is-premium .kmax-locked .kmax-badge-text-unlock{ display: inline; }

.is-premium .kmax-q-badge.kmax-locked { color: var(--kmax-green); }
.is-premium .kmax-free { color: var(--kmax-green) !important; }

/* SVGアイコンの色をfilterで調整 */
.kmax-locked .kmax-icon-lock {
  opacity: 0.6;
}
.is-premium .kmax-locked .kmax-icon-unlock,
.is-free-member .kmax-free svg,
.is-premium .kmax-free svg {
  filter: invert(35%) sepia(60%) saturate(600%) hue-rotate(75deg) brightness(95%);
}
/* サンプルのアンロックアイコンにもfilter適用 */
.is-free-member .sample-icon-unlocked,
.is-premium .sample-icon-unlocked {
  filter: invert(35%) sepia(60%) saturate(600%) hue-rotate(75deg) brightness(95%);
}

/* CTAバナー */
.kmax-cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  background: var(--kmax-base);
  border-radius: 8px;
  box-sizing: border-box;
  margin-bottom: 0;
}

.kmax-cta-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  color: #fff;
}

.kmax-cta-desc { font-size: 13px; color: #9aacbf; margin: 0; }

.kmax-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 24px;
  background: var(--kmax-yellow);
  color: #1a2535 !important;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-decoration: none !important;
  white-space: nowrap;
  border-radius: 4px;
  transition: all 0.15s;
  flex-shrink: 0;
}

.kmax-cta-btn:hover { background: #d4a800; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* 料金プラン */
.kmax-pricing { margin-top: 48px; }

.kmax-pricing-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  background: transparent !important;
  border: none !important;
  width: 100%;
  box-sizing: border-box;
}

.kmax-price-card {
  background: var(--kmax-surface);
  border: 1px solid var(--kmax-border);
  border-radius: 10px;
  padding: 28px 24px;
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s;
}

.kmax-price-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

/* おすすめカード：ボーダーとシャドウで強調 */
.kmax-featured {
  border-color: var(--kmax-base);
  border-width: 2px;
  box-shadow: 0 4px 16px rgba(42,71,110,0.15);
}

.kmax-price-tier {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--kmax-muted);
  margin-bottom: 6px;
}

.kmax-featured .kmax-price-tier { color: var(--kmax-base); }
.kmax-employee .kmax-price-tier { color: var(--kmax-red); }

.kmax-price-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  color: var(--kmax-text);
}

.kmax-featured .kmax-price-name { color: var(--kmax-base); }
.kmax-employee .kmax-price-name { color: var(--kmax-red); }

.kmax-price-rule { height: 1px; background: var(--kmax-border); margin-bottom: 16px; }

.kmax-price-orig { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.kmax-strike { font-size: 14px; color: var(--kmax-muted); text-decoration: line-through; }
.kmax-off-badge {
  font-size: 10px; font-weight: 700;
  color: #fff;
  background: var(--kmax-red);
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.06em;
}

.kmax-price-amount { display: flex; align-items: baseline; gap: 2px; margin-bottom: 2px; }
.kmax-price-curr { font-size: 14px; font-weight: 700; color: var(--kmax-muted); }

.kmax-price-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--kmax-text);
}

.kmax-price-free          { color: var(--kmax-muted) !important; font-size: 36px !important; }
.kmax-featured .kmax-price-num { color: var(--kmax-base); }
.kmax-employee .kmax-price-num { color: var(--kmax-red); }

.kmax-price-per    { font-size: 12px; color: var(--kmax-muted); font-weight: 300; margin: 0 0 2px; }
.kmax-price-saving {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  color: var(--kmax-red);
  background: #fff0ee;
  border-radius: 3px;
  padding: 2px 8px;
  margin: 6px 0 0;
  letter-spacing: 0.04em;
}

.kmax-feat-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 20px !important;
}

.kmax-feat-list li {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--kmax-muted) !important;
  padding: 7px 0 !important;
  border-bottom: 1px solid var(--kmax-border) !important;
  list-style: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  cursor: default !important;
  background: none !important;
}

.kmax-feat-list li:last-child { border-bottom: none !important; }
.kmax-feat-on   { color: var(--kmax-text) !important; font-weight: 500 !important; }
.kmax-feat-ok   { color: var(--kmax-green) !important; flex-shrink: 0; }
.kmax-feat-lock { color: #cdd5de; flex-shrink: 0; }

.kmax-feat-bonus {
  color: #b07800 !important;
  background: #fffbe6 !important;
  border-radius: 4px !important;
  padding: 6px 8px !important;
  border: none !important;
  border-bottom: none !important;
  margin-top: 6px !important;
}

.kmax-feat-bonus .kmax-feat-ok { color: #b07800 !important; }

.kmax-jitsu-zero {
  display: inline-block;
  /* background: var(--kmax-yellow); */
  color: #1a2535;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  border-radius: 4px;
  margin: 10px 0 -2px;
}

.kmax-price-btn {
  display: block !important;
  width: 100% !important;
  padding: 12px !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-decoration: none !important;
  border: 1.5px solid var(--kmax-border) !important;
  color: var(--kmax-muted) !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
}

.kmax-price-btn:hover {
  border-color: var(--kmax-base) !important;
  color: var(--kmax-base) !important;
  background: #f0f4ff !important;
}

.kmax-btn-blue {
  background: var(--kmax-base) !important;
  border-color: var(--kmax-base) !important;
  color: #fff !important;
}
.kmax-btn-blue:hover {
  background: #1e3556 !important;
  border-color: #1e3556 !important;
  color: #fff !important;
}

.kmax-btn-gold {
  background: var(--kmax-yellow) !important;
  border-color: var(--kmax-yellow) !important;
  color: #1a2535 !important;
}
.kmax-btn-gold:hover {
  background: #d4a800 !important;
  border-color: #d4a800 !important;
}

/* RECOMMENDEDバッジ */
.kmax-rec-badge {
  position: absolute;
  top: 0; 
  right: 35%;
  background: var(--kmax-base);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 4px 10px;
  border-radius: 0 0 4px 4px;
  text-transform: uppercase;
}

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

.kmax-hero { animation: kmaxFadeUp 0.4s ease both; }
.kmax-main { animation: kmaxFadeUp 0.4s 0.08s ease both; }


/* ============================================================
   3. レスポンシブ / スマホ対応
   ============================================================ */

@media (max-width: 900px) {
  .kmax-q-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(6, 64px) !important;
  }
  .kmax-q-sample { grid-row: 5 !important; grid-column: 1 / 3 !important; }
  .kmax-pricing-grid { grid-template-columns: 1fr !important; }
  .kmax-cta-banner { grid-template-columns: 1fr; }
  .kmax-hero, .kmax-main { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 640px) {
  .choices {
    padding: 16px 2px !important;
  }
  .choices li {
    padding: 12px 46px 12px 14px !important;  /* スマホ用paddingに変更 */
    font-size: 15px !important;
    line-height: 2.2 !important;
    word-break: auto-phrase; 
  }
  .choices li::before {
    display: none !important;
  }
  .choices li.is-correct::after,
  .choices li.is-wrong::after {
    top: 7px !important;
    right: 10px !important;
    transform: none !important;
    font-size: 22px !important;
  }
  .entry-content .question,
  .quiz-card .question {
    padding: 18px 16px !important;
    font-size: 16px !important;
  }
  .anki-btn-wrap { gap: 8px !important; }
  .kmax-q-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(10, 64px) !important;
  }
  .kmax-q-sample { grid-row: auto !important; grid-column: 1 !important; }
  .kmax-stats { gap: 20px; }

  rt {
  font-size: 60%;
  }

  main.main{
    width: 32px 2%;
  }


 body.page-id-64 #header-container 
 body.page-id-85 #header-container, 
 body.page-id-87 #header-container, 
 body.page-id-90 #header-container,
 body.page-id-91 #header-container,
 body.page-id-92 #header-container,
 body.page-id-93 #header-container,
 body.page-id-94 #header-container,
 body.page-id-221 #header-container,/* サンプル28問 */
 body.page-id-19 #header-container/* サンプル3問 */
  {
    display: none !important;
     }
}



/* ⓪ デフォルト（未登録）：全部赤 */
.kmax-locked { color: #c0392b; }
.kmax-free   { color: #c0392b; }

/* ① 無料会員：問題は赤のまま、サンプルだけ緑 */
.is-free-member .kmax-free { color: var(--kmax-green) !important; }

/* ②③ 有料・従業員：問題もサンプルも緑、アイコン切替 */
.is-premium .kmax-locked { color: var(--kmax-green); }
.is-premium .kmax-free   { color: var(--kmax-green) !important; }

.is-premium .kmax-locked .kmax-icon-lock { display: none; }
.is-premium .kmax-locked .kmax-icon-unlock { display: inline-block; }
.is-premium .kmax-locked .kmax-badge-text-lock { display: none; }
.is-premium .kmax-locked .kmax-badge-text-unlock { display: inline; }


.quiz-card p:nth-child(2){
  background: #f8fafc;
  padding: 1% 0;
   margin-bottom: 0px!important;
}

div.quiz-card p img{
    display: block;
    margin: 0 auto;
}

.article ul{
  margin-bottom: 0px!important;
}


/* 登録ボタン（menu-item-57）を黄色に */
body:not(.is-member) #menu-item-57 .item-label {
  background: #f5c518 !important;
  color: #1a2535 !important;
  padding: 8px 20px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  transition: all 0.2s !important;
}

body:not(.is-member) #menu-item-57 .item-label:hover {
  background: #d4a800 !important;
}

/* ログイン後は元に戻す */
body.is-member #menu-item-57 .item-label {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
}



body.is-premium .kmax-pricing {
  display: none !important;
}










/* サンプル問題バッジ */
.kmax-sample-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 700;
  flex-shrink: 0;
}

/* 未登録時：ロック表示（緑） */
body:not(.is-member) .sample-icon-locked,
body:not(.is-member) .sample-text-locked {
  display: inline;
  color: #5a9e1e;
}

body:not(.is-member) .sample-icon-unlocked,
body:not(.is-member) .sample-text-unlocked {
  display: none;
}

/* 登録済み時：オープン表示（明るい緑） */
body.is-member .sample-icon-locked,
body.is-member .sample-text-locked {
  display: none;
}

body.is-member .sample-icon-unlocked,
body.is-member .sample-text-unlocked {
  display: inline;
  color: #5a9e1e;
}



/* サンプルカード全体 */
.kmax-q-sample {
  background: var(--kmax-green-lt) !important;
  border-left: 3px solid var(--kmax-green) !important;
}

/* 未登録時：点線ボーダーで「要登録」感を出す */
body:not(.is-member) .kmax-q-sample {
  border-left-style: dashed !important;
  opacity: 0.9;
}

/* 登録済み時：実線ボーダーで「アクセス可」感 */
body.is-member .kmax-q-sample {
  border-left-style: solid !important;
  opacity: 1;
}


/* 有料会員：サンプル問題を通常カードと同じ見た目に */
body.is-premium .kmax-q-sample {
  background: #fff !important;
  border-left: 3px solid transparent !important;
}

body.is-premium .kmax-q-sample:hover {
  background: #eef3ff !important;
  border-left-color: #2a476e !important;
}


/* アイキャッチ画像を中央寄せ */
.eye-catch-wrap {
  text-align: center !important;
}

.eye-catch {
  margin: 0 auto !important;
  display: block !important;
}

.eye-catch img {
  object-position: center center !important;
  margin: 0 auto !important;
  display: block !important;
}

/* アイキャッチ上のカテゴリラベル：背景色だけ透明に、文字は残す */
.eye-catch .cat-label {
  background-color: transparent !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}