/* 商品のページ（きくやん・ナビるやん・各 Lite・教科書・APDEL・自分解体新書・無料動画セミナー）の見た目の直し（2026-11-11。release/FIXES_20261111.md の 17〜22）
   ページの本文・部品は書き換えない。look=on のときだけ効く */

/* ---------- 白い箱（Q7）：白い箱を残すのは、料金と申込の箱・Lite と比べる表・よくある質問・入力欄だけ ---------- */
/* 箇条書き（お悩みの並び・お約束・「こんな方に」・第0章の中身）：箱をやめて地の上に。左の色の線（あるもの）と、項目の間の細い線は残す */
body.look-on :is(.kk-pain-item,.nb-pain-item,.ap-pain-item,.tb-for-whom-item,.kk-promise-item,.nb-promise-item,.nls-chapter0-item){
  background:transparent!important;box-shadow:none!important;border-top:0!important;border-right:0!important;border-radius:0!important;
  border-bottom:1px solid var(--lk-line)!important;
}
/* 「〜とは？」の長い説明の箱：文は地の上に（箱の中の動画・ボタンはそのまま） */
body.look-on :is(.kk-about-box,.nb-about-box){background:transparent!important;box-shadow:none!important;border:0!important;padding-left:0!important;padding-right:0!important}
/* カード（STEP・PDF の中身・カウンセリング・目次・立ち読み）：白い箱ではなく、薄い色の地（ラインナップの「こんな方におすすめ」と同じ） */
body.look-on :is(.tb-step-card,.tb-pdf-card,.nls-step-card,.ap-counseling-card,.nls-kaitai-toc-col,.nls-kaitai-sample){
  background:rgba(20,85,168,.05)!important;box-shadow:none!important;border-color:transparent!important;
}
/* APDEL：本文に直接書かれた白い箱（HOP・STEP・JUMP の並びなど）も、薄い色の地に。白い帯の段（ap-section-alt）は地の色に */
body.look-on .ap-section div[style*="background: #fff"], body.look-on .ap-section div[style*="background:#fff"]{
  background:rgba(20,85,168,.05)!important;border-color:transparent!important;box-shadow:none!important;
}
body.look-on .ap-section.ap-section-alt{background:transparent!important}
/* APDEL の冒頭「あなたがここにたどりついたのは偶然ではありません。」：1回目（11/11 朝）は白い帯に張り付いていたので上を 36px あけたが、
   白い帯をやめたので、ページの上の余白と重なって空きすぎた（2026-11-11 昼 きーぼー s5）→ 本文の style のまま（0）に戻す */

/* ---------- Lite と比べる表（きくやん Lite・ナビるやん Lite） ---------- */
/* 1回目（11/11 朝）：スマホではみ出して横にも動かせなかった（b4）→ 折り返して収めた。
   2回目（11/11 昼 きーぼー s5「表がダサい」）：線だけの表をやめ、見出しの行は紺の地に白い字・項目の列は薄い青の地・
   60分（フルバージョン）の列は薄い金の地で、比べる先がひと目でわかる形に。角を丸めた1枚の箱。本文の style（padding 8px・線）は上書きする */
body.look-on .post_content :is(.kk-section,.nb-section) .s_table{max-width:720px;margin:0 auto;border:1px solid var(--lk-line)!important;border-radius:10px;overflow:hidden!important;background:#fff;box-shadow:0 6px 22px rgba(10,45,89,.07);white-space:normal!important}
body.look-on .post_content :is(.kk-section,.nb-section) .s_table table{width:100%!important;margin:0!important;border:0!important;border-collapse:separate!important;border-spacing:0;font-size:.95em!important;table-layout:fixed}
body.look-on .post_content :is(.kk-section,.nb-section) .s_table tr{border:0!important}
body.look-on .post_content :is(.kk-section,.nb-section) .s_table td{padding:14px 16px!important;border:0!important;border-bottom:1px solid var(--lk-line)!important;vertical-align:middle;text-align:center;line-height:1.7;color:var(--lk-ink);background:transparent}
body.look-on .post_content :is(.kk-section,.nb-section) .s_table tr:last-child td{border-bottom:0!important}
body.look-on .post_content :is(.kk-section,.nb-section) .s_table tr:first-child td{background:var(--lk-main-deep)!important;color:#fff!important;font-weight:700;letter-spacing:.04em;border-bottom:0!important;padding:16px!important}
body.look-on .post_content :is(.kk-section,.nb-section) .s_table tr:first-child td:nth-child(2){background:var(--lk-main)!important}
body.look-on .post_content :is(.kk-section,.nb-section) .s_table tr:first-child a{color:#fff!important;text-decoration:underline;text-underline-offset:4px}
body.look-on .post_content :is(.kk-section,.nb-section) .s_table tr:not(:first-child) td:first-child{width:22%;background:rgba(20,85,168,.07);color:var(--lk-main-deep);font-weight:700}
body.look-on .post_content :is(.kk-section,.nb-section) .s_table tr:first-child td:first-child{width:22%}
body.look-on .post_content :is(.kk-section,.nb-section) .s_table tr:not(:first-child) td:nth-child(3){background:rgba(201,168,90,.10)}
body.look-on .post_content :is(.kk-section,.nb-section) .s_table td + td{border-left:1px solid var(--lk-line)!important}
body.look-on .post_content :is(.kk-section,.nb-section) .s_table tr:first-child td + td{border-left:1px solid rgba(255,255,255,.18)!important}
/* スマホ：項目の名前を上の帯にして、Lite と60分を左右2つに並べる（3つの列だと字が細切れに折れる） */
@media (max-width:767px){
  body.look-on .post_content :is(.kk-section,.nb-section) .s_table :is(table,tbody){display:block!important;width:100%!important}
  body.look-on .post_content :is(.kk-section,.nb-section) .s_table tr{display:grid!important;grid-template-columns:1fr 1fr}
  body.look-on .post_content :is(.kk-section,.nb-section) .s_table td{padding:11px 10px!important;font-size:.95em;word-break:normal;overflow-wrap:anywhere}
  body.look-on .post_content :is(.kk-section,.nb-section) .s_table tr:first-child td:first-child{display:none!important}
  body.look-on .post_content :is(.kk-section,.nb-section) .s_table tr:first-child td{padding:12px 8px!important;border-left:0!important}
  body.look-on .post_content :is(.kk-section,.nb-section) .s_table tr:first-child td:nth-child(3){border-left:1px solid rgba(255,255,255,.18)!important}
  body.look-on .post_content :is(.kk-section,.nb-section) .s_table tr:not(:first-child) td:first-child{grid-column:1/-1;width:auto!important;padding:5px 10px!important;font-size:.85em;letter-spacing:.06em;border-bottom:0!important}
  body.look-on .post_content :is(.kk-section,.nb-section) .s_table tr:not(:first-child) td:nth-child(2){border-left:0!important}
}

/* ---------- 料金の表・講座概要（きくやん・ナビるやん・APDEL の spec-box）：Lite と比べる表と同じ形にそろえる（s5「ほかのページの表も見直して」） ---------- */
body.look-on :is(.kk-spec-box,.nb-spec-box,.ap-spec-box){border:1px solid var(--lk-line)!important;border-radius:10px!important;overflow:hidden;background:#fff!important;box-shadow:0 6px 22px rgba(10,45,89,.07)!important}
body.look-on :is(.kk-spec-label,.nb-spec-label,.ap-spec-label){background:rgba(20,85,168,.07)!important;color:var(--lk-main-deep)!important;font-weight:700!important}
body.look-on :is(.kk-spec-row,.nb-spec-row,.ap-spec-row){border-color:var(--lk-line)!important}

/* ---------- きくやん・ナビるやん（各 Lite も） ---------- */
/* 白い帯の段（kk-section-alt・nb-section-alt）は地の色に。ただし一番上の料金と申込の段は白のまま（Q7） */
body.look-on .post_content .tcdce-body > section:is(.kk-section-alt,.nb-section-alt):not(:first-of-type){background:transparent!important}
/* プロフィール（id 30 の部品）：外の段の余白の外に出ていて、スマホで字が端まで詰まっていた（2026-11-11 きーぼー b4）→ 左右に余白 */
body.look-on .post_content section:is(.kk-section,.nb-section) > section.tb-section > .tb-inner{max-width:var(--kk-width,var(--nb-width,960px));margin:0 auto;padding:0 24px;box-sizing:border-box}
@media (max-width:767px){ body.look-on .post_content section:is(.kk-section,.nb-section) > section.tb-section > .tb-inner{padding:0 18px} }
/* 料金の表の値：横に並べる決まり（flex）で、リンク・文・太字が別々の列に割れていた →ふつうの文として折り返す */
body.look-on :is(.kk-spec-value,.nb-spec-value,.ap-spec-value){display:block!important;align-self:center}
/* 申込のボタン：スマホで「申し込/む ▶」と折れていた（FIXES 22）→ スマホでは左右の余白と字を少し詰める */
@media (max-width:767px){
  body.look-on :is(a.kk-btn,a.nb-btn,a.ap-btn,a.tb-btn,a.kk-purchase-btn,a.nb-purchase-btn){padding-left:12px!important;padding-right:12px!important;letter-spacing:.02em!important;max-width:100%;box-sizing:border-box;text-wrap:balance}
  body.look-on :is(a.kk-btn,a.nb-btn,a.ap-btn,a.tb-btn){padding-top:16px!important;padding-bottom:16px!important;font-size:1em!important}
}

/* ---------- 教科書 ---------- */
/* 白っぽい帯の段（tb-section-alt）は地の色に（Q7。料金の段は紺なので変わらない） */
body.look-on .post_content section.tb-section-alt{background:transparent!important}
/* 「月・牡羊座：…」「① 自分の『キャラ設定』を知る（STEP1：…）」の並び：横に並べる決まり（flex）で、太字と続きの文が別々の列に割れ、
   スマホで「月・牡／羊座」と名前の途中で折れていた → 印は左に置いたまま、太字と続きの文はふつうの文として折り返す */
body.look-on .tb-ba-item{display:block!important;position:relative;padding-left:2.4em!important}
body.look-on .tb-ba-item .tb-ba-item-icon{position:absolute;left:.6em;top:auto}

/* ---------- 無料動画セミナー ---------- */
/* 「その前に、ぼくのことを少しだけ知ってください」の下の名前の札：見出しの段の段落に幅の上限（600px）がかかっていて、PC で左に寄っていた（2026-11-11 きーぼー b4）→ 真ん中に */
body.look-on .ascolo-kiibo-who-page p.ascolo-kiibo-name{margin-left:auto!important;margin-right:auto!important}
/* 本文の頭のコメントだけの空の段落（<p><!-- … --></p>）が、ページの上の余白にさらに1行分の空きを足していた → 本文の一番頭のものだけ出さない（APDEL ほか。段と段の間のものは今のまま） */
body.look-on .post_content .tcdce-body > p:first-child:empty{display:none!important}
/* APDEL：冒頭の1つ目の段の、最初の段落の上の余白を詰める（ページの頭の絵との間が空きすぎ。s5） */
body.look-on .post_content .tcdce-body > section.ap-section:first-of-type .ap-inner-narrow > div:first-of-type > p:first-child{margin-top:0!important}

/* ---------- APDEL：個別カウンセリング2回の2つのカードの高さをそろえる（2026-11-11 昼 きーぼー s5）。
   本文は post_row／post_col-2（テーマの2列）の中にカードを置いているので、列を flex にしてカードを伸ばす ---------- */
@media (min-width:768px){
  body.look-on .post_content .post_row:has(> .post_col > .ap-counseling-card){display:flex!important;align-items:stretch}
  body.look-on .post_content .post_col:has(> .ap-counseling-card){display:flex!important;float:none!important;flex:1 1 0;min-width:0}
  body.look-on .post_content .post_col > .ap-counseling-card{flex:1 1 auto;box-sizing:border-box}
}
@media (max-width:767px){ body.look-on :is(.kk-spec-label,.nb-spec-label,.ap-spec-label){white-space:nowrap;font-size:.85em!important} }

/* ---------- よくある質問：トップ型（線で区切る形）にそろえる（2026-11-11 昼 きーぼー u5「どちらかに統一」→ トップ型）。
   きくやん kk-・ナビるやん nb-・教科書 tb-・APDEL と無料動画セミナー faq- の、白い箱・四角や丸の Q の札をやめ、
   「Q.」と問い・右に＋・問いと問いの間は細い線。js/faq.js が付ける acc-item・acc-q・acc-a で当てる ---------- */
body.look-on.ascolo-acc-page .is-acc{max-width:900px;margin-left:auto!important;margin-right:auto!important;border-top:1px solid var(--lk-line)}
body.look-on.ascolo-acc-page .is-acc .acc-item{background:transparent!important;border:0!important;border-bottom:1px solid var(--lk-line)!important;border-radius:0!important;box-shadow:none!important;margin:0!important;padding:0!important;overflow:visible!important}
body.look-on.ascolo-acc-page .is-acc .acc-q{display:flex!important;align-items:baseline;gap:16px;padding:22px 48px 22px 24px!important;margin:0!important;background:transparent!important;border:0!important;font-weight:700!important;font-size:16px!important;line-height:1.7!important;color:var(--lk-main-deep)!important}
body.look-on.ascolo-acc-page .is-acc .acc-q > span:first-child{flex:0 0 auto;display:inline!important;width:auto!important;height:auto!important;min-width:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--lk-accent)!important;font-family:var(--lk-latin)!important;font-weight:700!important;font-size:15px!important;line-height:1.7!important;position:static!important}
body.look-on.ascolo-acc-page .is-acc .acc-q > span:first-child:not(:has(+ *))::after{content:""}
body.look-on.ascolo-acc-page .is-acc .acc-a{padding:0 48px 24px 62px!important;margin:0!important;background:transparent!important;border:0!important;font-size:15px;line-height:1.95}
@media (max-width:767px){
  body.look-on.ascolo-acc-page .is-acc .acc-q{gap:12px;padding:18px 40px 18px 8px!important;font-size:15px!important}
  body.look-on.ascolo-acc-page .is-acc .acc-a{padding:0 12px 20px 38px!important;font-size:14.5px}
}
body.look-on.ascolo-acc-page .is-acc > p:empty{display:none!important} /* 問いの間のコメントだけの空の段落が、線と線の間に空きを作っていた（APDEL） */

/* ラジオのページのプロフィール（共有の部品 id 30 の段）：外側の段（section.profile）だけが白い地で、プロフィールはその中の左右の余白がない所に入っていて、
   スマホで字が白い地の端に詰まっていた（2026-11-11 切り替えのあと きーぼー「白枠も抜くことになってなかったっけ？」）。
   白い箱を残すのは料金と申込の箱・比べる表・よくある質問だけ（Q7）なので、白い地を抜いて地の上に。16ページを測って、白い地はここだけだった */
body.look-on section.profile:has(#instructor){background:transparent!important;box-shadow:none!important;border:0!important}