
body { position: static!important; }


#tokusho-final, #tokusho-final * { box-sizing: border-box; }
#tokusho-final {
  --bg:#f7f4eb; --paper:#fffdf8; --ink:#17170f; --muted:#66624f;
  --gold:#c9a34a; --gold2:#efd47a; --line:#e8e0cb; --dark:#11110c;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.85; font-size:15px;
  overflow:hidden;
}
#tokusho-final a { color:#7b5618; text-decoration:underline; text-underline-offset:2px; }
#tokusho-final .tkf-hero {
  background:linear-gradient(135deg,#0d0d09 0%,#19180f 60%,#0d0d09 100%);
  color:#fff; padding:64px 22px 54px; text-align:center; border-bottom:3px solid var(--gold); position:relative;
}
#tokusho-final .tkf-hero:before {
  content:""; position:absolute; inset:0; opacity:.12; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px);
  background-size:36px 36px;
}
#tokusho-final .tkf-hero-inner { position:relative; z-index:1; max-width:780px; margin:auto; }
#tokusho-final .tkf-badge { display:inline-block; border:1px solid rgba(239,212,122,.55); color:var(--gold2); padding:5px 15px; border-radius:999px; font-size:11px; letter-spacing:.15em; margin-bottom:16px; }
#tokusho-final .tkf-title { margin:0; font-family:"Noto Serif JP","Yu Mincho",serif; font-size:clamp(24px,4vw,34px); letter-spacing:.05em; }
#tokusho-final .tkf-title em { color:var(--gold2); font-style:normal; }
#tokusho-final .tkf-lead { margin:14px auto 0; max-width:680px; color:#d1cdbb; font-size:13px; }
#tokusho-final .tkf-wrap { max-width:920px; margin:auto; padding:0 20px 56px; }
#tokusho-final .tkf-sec { padding-top:48px; }
#tokusho-final .tkf-kicker { color:#a57a25; font-size:11px; letter-spacing:.14em; font-weight:700; margin-bottom:5px; }
#tokusho-final .tkf-h2 { font-family:"Noto Serif JP","Yu Mincho",serif; font-size:clamp(20px,3.2vw,26px); margin:0 0 8px; }
#tokusho-final .tkf-desc { color:var(--muted); font-size:13px; margin:0 0 22px; }
#tokusho-final .tkf-card { background:var(--paper); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 5px 22px rgba(0,0,0,.05); }
#tokusho-final table { width:100%; border-collapse:collapse; }
#tokusho-final tr + tr { border-top:1px solid var(--line); }
#tokusho-final th { width:190px; text-align:left; vertical-align:top; background:var(--dark); color:var(--gold2); padding:18px; font-size:13px; border-right:3px solid var(--gold); }
#tokusho-final td { vertical-align:top; padding:18px 20px; background:#fff; font-size:13px; }
#tokusho-final .tkf-sub { font-weight:800; margin:11px 0 4px; padding-left:10px; border-left:3px solid var(--gold); }
#tokusho-final .tkf-sub:first-child { margin-top:0; }
#tokusho-final ul { margin:7px 0 0 1.25em; padding:0; }
#tokusho-final li { margin:4px 0; }
#tokusho-final .tkf-note { margin-top:12px; padding:12px 14px; border:1px solid #e8d8a8; background:#fffbed; border-radius:9px; color:#5e4a17; font-size:12px; }
#tokusho-final .tkf-darknote { margin-top:12px; padding:14px 16px; background:#181810; border-radius:9px; color:#d7d3bd; font-size:12px; }
#tokusho-final .tkf-darknote strong { color:var(--gold2); }
#tokusho-final .tkf-strong { font-weight:800; }
#tokusho-final .tkf-footer { margin-top:48px; background:#0d0d09; color:#8f886c; text-align:center; padding:28px 18px; border-top:3px solid var(--gold); font-size:12px; }
#tokusho-final .tkf-footer strong { color:var(--gold2); }
#tokusho-final .tkf-updated { display:block; margin-top:6px; font-size:11px; color:#625f4f; }
@media (max-width:680px){
  #tokusho-final .tkf-hero { padding:48px 16px 42px; }
  #tokusho-final .tkf-wrap { padding:0 12px 42px; }
  #tokusho-final .tkf-card { border-radius:10px; }
  #tokusho-final table, #tokusho-final tbody, #tokusho-final tr, #tokusho-final th, #tokusho-final td { display:block; width:100%; }
  #tokusho-final th { border-right:0; border-bottom:2px solid var(--gold); padding:12px 14px; }
  #tokusho-final td { padding:14px; }
}

/* ============================================================
   旧ページから復元した動き（アニメーション）
   ・ヒーローの中はCSSだけで動かす（読み込んだ瞬間に必ず見える）
   ・表の行はJavaScriptが動いたときだけ動かす
     → JSが止まっていても文字は最初から見えるので、絶対に読めなくならない
   ============================================================ */
@keyframes tkf-scan    { 0%{top:-6%} 100%{top:110%} }
@keyframes tkf-float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes tkf-shine   { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes tkf-twinkle { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.2;transform:scale(.5)} }
@keyframes tkf-up      { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

/* 金色の走査線が上から下へ流れる */
#tokusho-final .tkf-scan {
  position:absolute; left:0; right:0; height:2px; pointer-events:none; z-index:0;
  background:linear-gradient(90deg,transparent,rgba(201,163,74,.45),transparent);
  animation:tkf-scan 4s linear infinite;
}
/* 瞬く星 */
#tokusho-final .tkf-star { position:absolute; width:4px; height:4px; background:var(--gold); border-radius:50%; pointer-events:none; z-index:0; }
#tokusho-final .tkf-star:nth-of-type(1){ top:15%; left:10%; animation:tkf-twinkle 2.1s ease infinite; }
#tokusho-final .tkf-star:nth-of-type(2){ top:30%; left:85%; animation:tkf-twinkle 1.7s ease infinite .3s; }
#tokusho-final .tkf-star:nth-of-type(3){ top:70%; left:8%;  animation:tkf-twinkle 2.4s ease infinite .6s; }
#tokusho-final .tkf-star:nth-of-type(4){ top:20%; left:60%; animation:tkf-twinkle 1.9s ease infinite .9s; }
#tokusho-final .tkf-star:nth-of-type(5){ top:75%; left:90%; animation:tkf-twinkle 2.2s ease infinite 1.2s; }
/* 中央のほのかな金色の光 */
#tokusho-final .tkf-hero:after {
  content:""; position:absolute; top:50%; left:50%; width:520px; height:260px;
  transform:translate(-50%,-50%); pointer-events:none; z-index:0;
  background:radial-gradient(ellipse, rgba(201,163,74,.18) 0%, transparent 70%);
}
/* 📋 がふわふわ上下する */
#tokusho-final .tkf-icon { display:block; font-size:44px; margin-bottom:12px; animation:tkf-float 5s ease-in-out infinite; }
/* 見出しの「表示」に金色の光が流れる */
#tokusho-final .tkf-title em {
  font-style:normal;
  background:linear-gradient(90deg,var(--gold),var(--gold2),var(--gold));
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:tkf-shine 3s linear infinite;
}
/* ヒーローの中身がふわっと出る */
#tokusho-final .tkf-badge { animation:tkf-up .8s ease both .15s; }
#tokusho-final .tkf-icon  { animation:tkf-float 5s ease-in-out infinite, tkf-up .8s ease both .25s; }
#tokusho-final .tkf-title { animation:tkf-up .8s ease both .3s; }
#tokusho-final .tkf-lead  { animation:tkf-up .8s ease both .4s; }

/* --- 表の行：JSが動いたときだけ、スクロールに合わせてふわっと出す --- */
#tokusho-final.tkf-anim .tkf-card tr { opacity:0; transform:translateY(14px); }
#tokusho-final.tkf-anim .tkf-card tr.tkf-in { animation:tkf-up .5s ease both; }
#tokusho-final.tkf-anim .tkf-card tr.tkf-in:nth-child(2){ animation-delay:.05s }
#tokusho-final.tkf-anim .tkf-card tr.tkf-in:nth-child(3){ animation-delay:.10s }
#tokusho-final.tkf-anim .tkf-card tr.tkf-in:nth-child(4){ animation-delay:.15s }
#tokusho-final.tkf-anim .tkf-card tr.tkf-in:nth-child(5){ animation-delay:.20s }
#tokusho-final.tkf-anim .tkf-card tr.tkf-in:nth-child(n+6){ animation-delay:.25s }

/* ★2026-08-08 追加：中に差し込む価格表の行は、この「隠して待つ」の対象にしない
   （価格表は表の中の表なので、外側と同じ扱いにすると数秒消える瞬間ができてしまう。
     法定表示で価格が一瞬でも消えるのは避ける） */
#tokusho-final.tkf-anim .tkf-card [id^="eaplp-"] tr {
  opacity:1 !important; transform:none !important; animation:none !important;
}

/* 動きが苦手な方の設定（OSの「視差効果を減らす」）では全部止める */
@media (prefers-reduced-motion: reduce) {
  #tokusho-final .tkf-scan, #tokusho-final .tkf-star, #tokusho-final .tkf-icon,
  #tokusho-final .tkf-title em, #tokusho-final .tkf-badge,
  #tokusho-final .tkf-title, #tokusho-final .tkf-lead { animation:none !important; }
  #tokusho-final.tkf-anim .tkf-card tr { opacity:1 !important; transform:none !important; animation:none !important; }
}

/* ============================================================
   テーマに負けないようにする（この囲みの中は外の影響を受けない）
   ── 見出しや本文が白く消えた原因 ──
   .tkf-h2 や td は「自分の文字色を持たず、親から受け継ぐ」作りだった。
   CSSでは、受け継ぎはテーマ側の直接指定（h2{color:#fff} 等）に必ず負ける。
   → 中の文字は、自分で色を宣言して外の指定をはね返す。
   ※ :where() を使っているので、この囲みの中の元の指定（金色の見出し等）は
     そのまま勝ち続ける。上書きしているのは「何も決めていなかった所」だけ。
   ============================================================ */
#tokusho-final :where(h1,h2,h3,h4,h5,h6,p,div,span,em,strong,b,i,small,
  ul,ol,li,table,thead,tbody,tr,th,td,dl,dt,dd,
  section,main,header,footer,article,address,figure,figcaption){
  color: inherit;
  font-family: inherit;
  text-shadow: none;
  text-transform: none;
}
/* 要の部分は、テーマが !important を使っていても勝てるように直接指定 */
#tokusho-final .tkf-title { color:#ffffff !important; }
#tokusho-final .tkf-h2    { color:var(--ink) !important; }
#tokusho-final .tkf-sub   { color:var(--ink) !important; }
#tokusho-final .tkf-desc  { color:var(--muted) !important; }
#tokusho-final .tkf-kicker{ color:#a57a25 !important; }
#tokusho-final td, #tokusho-final td li { color:var(--ink) !important; }
#tokusho-final th         { color:var(--gold2) !important; }
#tokusho-final .tkf-lead  { color:#d1cdbb !important; }
#tokusho-final .tkf-note  { color:#5e4a17 !important; }
#tokusho-final .tkf-darknote { color:#d8d2b8 !important; }
#tokusho-final .tkf-footer{ color:#8f886c !important; }
#tokusho-final .tkf-updated{ color:#625f4f !important; }
#tokusho-final a          { color:#7b5618 !important; }
#tokusho-final .tkf-footer a { color:#c9a34a !important; }
#tokusho-final .tkf-title em { color:transparent !important; -webkit-text-fill-color:transparent !important; }
/* 背景も同様に押さえる（テーマが白や透明にしてくると表が読めなくなるため） */
#tokusho-final           { background:var(--bg) !important; }
#tokusho-final .tkf-card { background:var(--paper) !important; }
#tokusho-final th        { background:var(--dark) !important; }
#tokusho-final table, #tokusho-final tbody, #tokusho-final tr, #tokusho-final td { background:transparent !important; }
#tokusho-final .tkf-footer { background:#0d0d09 !important; }

/* ★2026-08-08 追加：中に差し込む価格表の見出し行は、黒地に金文字のまま保つ
   （上の「背景を透明にする」指定に巻き込まれると、黒地が消えて金文字だけ残り読めなくなる） */
#tokusho-final .tkf-card [id^="eaplp-"] thead th { background:#241f16 !important; color:#e8c86a !important; }
#tokusho-final .tkf-card [id^="eaplp-"] td { color:#2b2b2b !important; }

