/* 波動のセルフ診断 [hado_check]
   文字の大きさと行間は、本文（.content）をそのまま受け継ぐ。
   THE THOR は html に .t-large .t-middle-pc を付けて rem の基準を変えるため
   （実測 2026-11-03：スマホ 12px／PC 11px）、rem で指定すると本文とずれる。
   本文の実測値：スマホ 16.8px / 行間 1.85、PC 17.6px / 行間 1.85 */
#hado-check, #hado-check * { box-sizing: border-box; }
#hado-check {
  --hc-surface:   #ffffff;
  --hc-surface-2: #f4f3f0;
  --hc-text:      #191919;   /* THE THOR の本文の文字色（カスタマイザーの .content ol{color} など） */
  --hc-text-2:    #4a4944;
  --hc-muted:     #6f6d66;
  --hc-line:      #e1e0d9;
  /* サイトの緑：カスタマイザーの出力 .content .btn__link-primary{color:#01a630; background-color:#ddefe0;} */
  --hc-accent:        #01a630;
  /* 白地の小さな文字用の濃い緑：THE THOR の .content .bgc-DPgreen（#007c36）。#01a630 は白地で 3.2:1 しかないため */
  --hc-accent-strong: #007c36;
  --hc-accent-bg:     rgba(1, 166, 48, 0.08);
  --hc-critical:  #d03b3b;
  --hc-radius:    14px;
  color: var(--hc-text);
  max-width: 680px;
  margin: 0 auto 2em;
}
#hado-check p { margin: 0 0 1em; }
#hado-check .hado-check__intro { color: var(--hc-text-2); }

/* ニックネーム */
/* ニックネーム欄：選択肢の灰色と区別するため、ごく薄い緑（サイトの緑 #01a630 を白に溶かした色）。角丸はサイト標準の5px */
#hado-check .hado-check__name {
  background: #f3faf5; border-radius: 5px;
  padding: 16px 18px; margin-bottom: 4px;
}
#hado-check .hado-check__name label { display: block; font-weight: 700; margin-bottom: 6px; }
#hado-check .hado-check__name input {
  width: 100%; font: inherit; line-height: 1.5; padding: 10px 12px;
  border: 1px solid #d8d8d8; border-radius: 8px; background: var(--hc-surface);
}

/* 設問
   枠の入れ子をやめる：設問はカードにせず区切り線で分け、選択肢は枠なしの行にする。
   THE THOR の .content ol / .content ol li（上余白・左余白・行間 1.5・番号の ::before）を打ち消す */
#hado-check .hado-check__questions { list-style: none; margin: 0; padding: 0; }
#hado-check .hado-check__q {
  list-style: none; margin: 0; padding: 20px 0;
  border-bottom: 1px solid var(--hc-line);
  line-height: inherit;   /* .content ol li{line-height:1.5} に勝つため */
  scroll-margin-top: 80px;
}
#hado-check .hado-check__q::before { content: none; }
/* 未回答：左に赤い線を出す */
#hado-check .hado-check__q.is-unanswered { padding-left: 12px; box-shadow: inset 3px 0 0 var(--hc-critical); }
#hado-check fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
#hado-check legend { padding: 0; margin-bottom: 8px; font-weight: 700; line-height: inherit; }
#hado-check .hado-check__qnum {
  display: inline-block; margin-right: .6em; padding: 0 .5em;
  border-radius: 6px; background: var(--hc-accent-bg); color: var(--hc-accent-strong);
  font-size: .9em; line-height: 1.6;
}
/* 選択肢：枠線は付けず、灰色の背景で1つ1つを「押せる塊」に見せる（2026-11-03 指示書 2-4） */
#hado-check .hado-check__choice {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 12px 14px; margin: 0 0 8px; border-radius: 8px;
  background: var(--hc-surface-2);
  cursor: pointer; font-weight: normal;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .1s ease;
}
#hado-check .hado-check__choice:last-child { margin-bottom: 0; }
@media (hover: hover) {
  #hado-check .hado-check__choice:hover { background: #ebe9e3; }
}
#hado-check .hado-check__choice:active { background: var(--hc-accent-bg); }
#hado-check .hado-check__choice:has(input:checked) { background: var(--hc-accent-bg); box-shadow: inset 0 0 0 1px var(--hc-accent); }
#hado-check .hado-check__choice:has(input:focus-visible) { outline: 2px solid var(--hc-accent); outline-offset: 1px; }
#hado-check .hado-check__choice input { margin: 0; flex: none; width: 1.3em; height: 1.3em; accent-color: var(--hc-accent); }

/* ボタン・エラー
   白文字と #01a630 の明暗比は 3.2:1 のため、文字を太字 1.125em（18.9px 以上＝大きな文字）にして 3:1 の基準に収める */
#hado-check .hado-check__btn {
  display: block; margin: 24px auto 0; font: inherit; font-size: 1.125em; font-weight: 700; line-height: 1.5;
  cursor: pointer; border-radius: 8px; padding: 12px 40px;
  border: 1px solid var(--hc-accent); background: var(--hc-accent); color: #fff;
  transition: background-color .15s ease, border-color .15s ease;
}
#hado-check .hado-check__btn:hover { background: var(--hc-accent-strong); border-color: var(--hc-accent-strong); }
#hado-check .hado-check__btn:focus-visible { outline: 2px solid var(--hc-accent-strong); outline-offset: 3px; }
#hado-check .hado-check__error { color: var(--hc-critical); font-weight: 700; text-align: center; margin: 16px 0 0; }

/* 結果 */
#hado-check .hado-check__result { scroll-margin-top: 80px; outline: none; }
#hado-check .hado-check__result-main {
  border: 1px solid var(--hc-line); border-radius: var(--hc-radius);
  padding: 20px 18px 4px;
}
#hado-check .hado-check__result-lead { text-align: center; color: var(--hc-muted); }
#hado-check .hado-check__result-img { display: block; width: 100%; height: auto; border-radius: 10px; margin: 0 auto 16px; }
#hado-check .hado-check__result-type { text-align: center; margin: 0 0 6px; }
#hado-check .hado-check__result-point { text-align: center; color: var(--hc-text-2); }
#hado-check .hado-check__result-point strong { font-size: 1.6em; color: var(--hc-accent-strong); margin-left: .2em; }

/* おすすめ記事（タイプごとに2本）。灰色の枠を1つにして、中にラベルと記事タイトルを並べる。
   記事タイトルの行は1行ごとに全体が1つのリンク。右端に矢印
   [design-css] 2026-11-03：色をサイトの値にそろえる（オーナー了承：灰色を薄く、緑を濃く）
   - 背景 #f8f8f8：THE THOR style.min.css の .widget.widget_calendar .calendar_wrap{background:#f8f8f8}
   - 枠線 #e5e5e5：THE THOR の .content table / .balloon-boder .balloon__text の線の色
   - 区切り線 #d8d8d8：THE THOR の .content .bgc-VLgray／.widgetSearch__submit の線の色
   - ラベル #007c36（--hc-accent-strong）：#01a630 は灰色の上で 2.9:1 しかないため。#f8f8f8 の上で 5.0:1 */
#hado-check .hado-check__recs {
  margin: 20px 0 16px; padding: 14px 16px 6px;
  background: #f8f8f8; border: 1px solid #e5e5e5; border-radius: var(--hc-radius);
}
#hado-check .hado-check__recs-label { font-size: .85em; font-weight: 700; color: var(--hc-accent-strong); margin: 0 0 4px; }
#hado-check .hado-check__rec {
  display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center;
  padding: 10px 0;
  color: var(--hc-text); text-decoration: none;
}
#hado-check .hado-check__recs-hr {
  height: 0; margin: 0; padding: 0; border: 0; border-top: 1px solid #d8d8d8;
  background: none;
}
#hado-check .hado-check__rec:hover { color: var(--hc-accent-strong); text-decoration: none; }
#hado-check .hado-check__rec:focus-visible { outline: 2px solid var(--hc-accent-strong); outline-offset: 2px; border-radius: 4px; }
#hado-check .hado-check__rec-title { font-weight: 700; line-height: 1.6; }
#hado-check .hado-check__rec-arrow { font-size: 1.4em; line-height: 1; color: var(--hc-accent-strong); }
/* 以前の「関連記事：…」の行と同じ見た目（小さめ・グレー・中央寄せ） */
#hado-check .hado-check__retry { font-size: .85em; color: var(--hc-muted); text-align: center; margin: 0; }
#hado-check .hado-check__retry a:focus-visible { outline: 2px solid var(--hc-accent); outline-offset: 2px; }

/* タイプ一覧(types="1" のときだけ出力) */
#hado-check .hado-check__types { margin-top: 28px; }
#hado-check .hado-check__types-title { font-weight: 700; }
#hado-check .hado-check__types table { width: 100%; border-collapse: collapse; }
#hado-check .hado-check__types th,
#hado-check .hado-check__types td { border: 1px solid var(--hc-line); padding: 8px 12px; text-align: left; }
#hado-check .hado-check__types th { background: var(--hc-surface-2); }

@media (max-width: 480px) {
  #hado-check .hado-check__name { padding: 14px; }
  #hado-check .hado-check__result-main { padding: 18px 14px 2px; }
}
@media (prefers-reduced-motion: reduce) {
  #hado-check .hado-check__btn { transition: none; }
}

/* 記事下のCTA（.postCta：ブログランキングへの投票のお願い）は、結果が出るまで隠す。
   このCSSは診断があるページでだけ読み込まれるので、ほかの記事には影響しない。
   :has() 非対応の古いブラウザでは、今までどおり常に表示される */
body:has(#hado-check:not(.is-done)) .postCta { display: none; }