/* 相性診断ページの追加分。共通部分は style.css（星出しと同じ）を先に読み込む */

/* このファイルは固定ページ aishou でだけ読み込まれる（swell_child/functions.php）。
   購入者だけが開くページなので、テーマのヘッダー・追従ヘッダー・フッター・パンくずは出さない。
   プライバシーポリシーなどのリンクは、診断ページ自身のフッターに入っている */
.l-header, .l-fixHeader, .l-footer, #breadcrumb, .p-breadcrumb,
.l-sidebar, .c-widget, .p-toc, .c-shareBtns { display: none; }
/* サイドバーを消したぶん、本文を中央に置く */
.l-mainContent { width: 100%; max-width: 100%; margin: 0 auto; float: none; }

/* WordPressの固定ページに埋め込むと、テーマ（SWELL）の見出し・表のスタイルが乗る。ここで打ち消す。
   打ち消すのは、テーマが当てていて診断ページ側が指定していないものだけ（背景・文字色・余白・行間・疑似要素） */
.hoshidashi h1, .hoshidashi h2, .hoshidashi h3 { background: none; color: var(--ink); padding: 0; border-radius: 0; line-height: 1.8; }
.hoshidashi h1::before, .hoshidashi h2::before, .hoshidashi h3::before,
.hoshidashi h1::after, .hoshidashi h2::after, .hoshidashi h3::after { content: none; display: none; }
/* thead は SWELL が .post_content thead th（詳細度 0,1,2）で色を付けてくるので、こちらも同じ形で指定する */
.hoshidashi table, .hoshidashi th, .hoshidashi td,
.hoshidashi table thead th, .hoshidashi table thead td { background: none; color: inherit; line-height: 1.8; }

.hoshidashi .page--wide { max-width: 640px; }
.hoshidashi .lead { margin: 0 0 28px; text-align: center; font-size: 15px; color: var(--ink-soft); }

.hoshidashi .person { margin: 0 0 18px; padding: 16px 14px 14px; border: 1px solid var(--line); border-radius: 4px; }
.hoshidashi .person__legend { padding: 0 8px; font-size: 14px; letter-spacing: 0.15em; color: var(--ink-soft); }
.hoshidashi .gender { margin-top: 14px; }
.hoshidashi .gender__choices { display: flex; gap: 10px; margin-top: 6px; }
.hoshidashi .gender__choice { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); font-size: 16px; cursor: pointer; }
.hoshidashi .gender__choice:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.hoshidashi .gender__choice input { accent-color: var(--accent); }
.hoshidashi .gender__choice:has(input:checked) input { accent-color: var(--accent-ink); }

.hoshidashi .chapter { margin: 36px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 19px; font-weight: 500; letter-spacing: 0.1em; }
.hoshidashi .chapter:first-of-type { margin-top: 0; }
.hoshidashi .chapter__body p { margin: 0 0 14px; font-size: 15px; }
.hoshidashi .chapter__body strong { font-weight: 600; }

.hoshidashi .kigou, .hoshidashi .ketsuen { width: 100%; margin: 4px 0 18px; border-collapse: collapse; font-size: 14px; }
.hoshidashi .kigou th, .hoshidashi .kigou td,
.hoshidashi .ketsuen th, .hoshidashi .ketsuen td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: center; font-weight: normal; vertical-align: middle; }
.hoshidashi .kigou thead th, .hoshidashi .ketsuen thead th { font-size: 12px; color: var(--ink-soft); letter-spacing: 0.08em; }
.hoshidashi .kigou tbody th { text-align: left; font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.hoshidashi .ketsuen tbody th { text-align: left; font-size: 12px; color: var(--ink-soft); line-height: 1.6; }
.hoshidashi .kigou td { font-size: 16px; }
.hoshidashi .ketsuen td { font-size: 13px; line-height: 1.6; }
.hoshidashi .ketsuen td.ketsuen__kanshi { font-size: 16px; white-space: nowrap; }
.hoshidashi .ketsuen td.ketsuen__rank { white-space: nowrap; }

.hoshidashi .outro { margin-top: 32px; padding: 20px 18px; background: var(--paper); border-radius: 4px; }
.hoshidashi .outro p { margin: 0 0 12px; font-size: 15px; }
.hoshidashi .outro p:last-child { margin-bottom: 0; }

@media (max-width: 480px) {
  .hoshidashi .kigou, .hoshidashi .ketsuen { font-size: 13px; }
  .hoshidashi .ketsuen thead { display: none; }
  .hoshidashi .ketsuen tbody th, .hoshidashi .ketsuen tbody td { display: block; border-bottom: none; text-align: left; padding: 2px 0; }
  .hoshidashi .ketsuen tbody tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .hoshidashi .ketsuen td.ketsuen__rank::before { content: '強さの順：'; color: var(--ink-soft); font-size: 12px; }
}