/* ====================================================================
   hyakkin-lab.com デザインシステムCSS v2
   更新: 2026-07-04 ／ 配色は _brand-colors.md（確定版）準拠
   参考にした構成: selectra.jp（目次・冒頭サマリー・スクロール表）
                  house-cleaning系レビューサイト（スペック表・口コミ枠・CTA反復）
   使い方: WordPress管理画面 > 外観 > カスタマイズ > 追加CSS に全文貼り付け

   【見出し(h2/h3)のセレクタについて】
   .entry-content 配下に効かせている（Cocoon/SWELL/Lightning等の標準）。
   テーマの本文コンテナが違う場合はセレクタを差し替えること。
==================================================================== */

:root {
  --hl-main: #FF6E9C;
  --hl-main-dark: #E85585;
  --hl-accent: #40C4B0;
  --hl-yellow: #FFC53D;
  --hl-text: #333A40;
  --hl-text-light: #8A9199;
  --hl-bg-pink: #FFF4F7;
  --hl-bg-mint: #EEFAF8;
  --hl-marker: #FFE3EC;
  --hl-border: #E8EAED;
}

/* ================= 見出し（ピンクは面でなく帯・線で使う） ================= */

.entry-content h2 {
  background: var(--hl-bg-pink);
  border-left: 6px solid var(--hl-main);
  border-radius: 0 6px 6px 0;
  padding: 0.65em 0.8em;
  margin: 2.2em 0 1em;
  font-size: 1.25em;
  line-height: 1.4;
}

.entry-content h3 {
  border-left: 4px solid var(--hl-main);
  border-bottom: 2px solid var(--hl-border);
  padding: 0.3em 0 0.3em 0.6em;
  margin: 1.8em 0 0.8em;
  font-size: 1.1em;
}

.entry-content h4 {
  padding-left: 0.5em;
  border-left: 3px solid var(--hl-accent);
  margin: 1.5em 0 0.7em;
}

/* ================= 記事冒頭まわり ================= */

/* PR表記 */
.hl-meta {
  font-size: 0.78em;
  color: var(--hl-text-light);
  margin-bottom: 1em;
}

/* リード文 */
.hl-lead {
  border-left: 4px solid var(--hl-main);
  background: var(--hl-bg-pink);
  border-radius: 0 6px 6px 0;
  padding: 0.9em 1em;
  font-weight: 600;
  line-height: 1.8;
}

/* 結論サマリーボックス（Selectra式・冒頭で即答する枠） */
.hl-answer {
  border: 2px solid var(--hl-main);
  border-radius: 8px;
  padding: 1em 1.2em;
  margin: 1.4em 0;
  background: #fff;
}
.hl-answer::before {
  content: "この記事の結論";
  display: inline-block;
  background: var(--hl-main);
  color: #fff;
  font-size: 0.78em;
  font-weight: 700;
  border-radius: 4px;
  padding: 0.15em 0.8em;
  margin-bottom: 0.6em;
}

/* 目次ボックス（プラグイン未使用時の手動目次用） */
.hl-toc {
  background: #fff;
  border: 1px solid var(--hl-border);
  border-top: 3px solid var(--hl-main);
  border-radius: 6px;
  padding: 1em 1.4em;
  margin: 1.6em 0;
}
.hl-toc .hl-toc-title {
  font-weight: 700;
  margin: 0 0 0.5em;
}
.hl-toc ol {
  margin: 0;
  padding-left: 1.4em;
}
.hl-toc li {
  margin: 0.3em 0;
  line-height: 1.6;
}
.hl-toc a {
  color: var(--hl-text);
  text-decoration: none;
  border-bottom: 1px dashed var(--hl-border);
}
.hl-toc a:hover { color: var(--hl-main-dark); }

/* ================= リスト（ul / ol） ================= */

/* 通常の箇条書き: ピンクの丸マーカー */
.entry-content ul {
  list-style: none;
  padding-left: 0.2em;
}
.entry-content ul > li {
  position: relative;
  padding-left: 1.4em;
  margin: 0.5em 0;
  line-height: 1.8;
}
.entry-content ul > li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.62em;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--hl-main);
}

/* 番号付きリスト: 丸数字バッジ */
.entry-content ol {
  list-style: none;
  counter-reset: hl-ol;
  padding-left: 0.2em;
}
.entry-content ol > li {
  position: relative;
  counter-increment: hl-ol;
  padding-left: 2em;
  margin: 0.6em 0;
  line-height: 1.8;
}
.entry-content ol > li::before {
  content: counter(hl-ol);
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1.45em;
  height: 1.45em;
  border-radius: 50%;
  background: var(--hl-main);
  color: #fff;
  font-size: 0.82em;
  font-weight: 700;
  text-align: center;
  line-height: 1.45em;
}

/* チェックリスト: <ul class="hl-check">（持ち物・確認事項に） */
.entry-content ul.hl-check > li::before {
  content: "✔";
  width: 1.25em;
  height: 1.25em;
  top: 0.28em;
  border-radius: 4px;
  background: var(--hl-accent);
  color: #fff;
  font-size: 0.8em;
  text-align: center;
  line-height: 1.3em;
}
.entry-content ul.hl-check > li { padding-left: 1.7em; }

/* NGリスト: <ul class="hl-ng">（やってはいけないこと系に） */
.entry-content ul.hl-ng > li::before {
  content: "✕";
  width: 1.25em;
  height: 1.25em;
  top: 0.28em;
  border-radius: 4px;
  background: var(--hl-text-light);
  color: #fff;
  font-size: 0.8em;
  text-align: center;
  line-height: 1.3em;
}
.entry-content ul.hl-ng > li { padding-left: 1.7em; }

/* 入れ子リストは控えめなグレー点に */
.entry-content ul ul > li::before {
  background: var(--hl-text-light);
  width: 0.4em;
  height: 0.4em;
}

/* 目次内のリストは装飾をリセット（シンプルな番号のまま） */
.hl-toc ol {
  list-style: decimal;
  counter-reset: none;
  padding-left: 1.4em;
}
.hl-toc ol > li {
  padding-left: 0.2em;
  margin: 0.3em 0;
}
.hl-toc ol > li::before { content: none; }

/* ================= 表（見やすさの主役） ================= */

/* 横スクロールラッパー。幅広の表はこれで包む */
.hl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.2em 0;
}
.hl-scroll::before {
  content: "← 横にスクロールできます →";
  display: block;
  text-align: center;
  font-size: 0.75em;
  color: var(--hl-text-light);
  margin-bottom: 0.3em;
}
@media (min-width: 769px) {
  .hl-scroll::before { display: none; } /* PCでは案内不要 */
}
.hl-scroll .hl-table { margin: 0; min-width: 640px; }

.hl-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  font-size: 0.93em;
  background: #fff;
}
.hl-table th {
  background: var(--hl-bg-pink);
  border: 1px solid var(--hl-border);
  border-bottom: 2px solid var(--hl-main);
  padding: 0.65em 0.75em;
  text-align: left;
  white-space: nowrap;
}
.hl-table td {
  border: 1px solid var(--hl-border);
  padding: 0.65em 0.75em;
  vertical-align: top;
}
.hl-table tr:nth-child(even) td { background: #FAFBFC; } /* しま模様で行を追いやすく */

/* スペック表（左列がth・house-cleaning式）: <table class="hl-table hl-spec"> */
.hl-spec th {
  width: 30%;
  background: var(--hl-bg-mint);
  border-bottom: 1px solid var(--hl-border);
  white-space: normal;
}

/* ================= 囲みボックス3種（ラベル付き） ================= */

.hl-point, .hl-caution, .hl-memo {
  position: relative;
  border-radius: 8px;
  padding: 1.5em 1.2em 1em;
  margin: 1.8em 0 1.4em;
}
.hl-point::before, .hl-caution::before, .hl-memo::before {
  position: absolute;
  top: -0.9em;
  left: 1em;
  color: #fff;
  font-size: 0.8em;
  font-weight: 700;
  border-radius: 4px;
  padding: 0.2em 0.9em;
}
.hl-point {
  border: 2px solid var(--hl-accent);
  background: var(--hl-bg-mint);
}
.hl-point::before { content: "ポイント"; background: var(--hl-accent); }

.hl-caution {
  border: 2px solid var(--hl-yellow);
  background: #FFFBEF;
}
.hl-caution::before { content: "注意"; background: var(--hl-yellow); }

.hl-memo {
  border: 2px solid var(--hl-border);
  background: #FAFBFC;
}
.hl-memo::before { content: "メモ"; background: var(--hl-text-light); }

/* ================= 口コミ・体験談の枠 ================= */

.hl-voice {
  border: 1px solid var(--hl-border);
  border-left: 4px solid var(--hl-accent);
  border-radius: 0 6px 6px 0;
  background: #fff;
  padding: 0.9em 1.1em;
  margin: 1em 0;
  font-size: 0.95em;
}
.hl-voice .hl-voice-src {
  display: block;
  text-align: right;
  font-size: 0.8em;
  color: var(--hl-text-light);
  margin-top: 0.4em;
}

/* ================= 確認日バッジ・マーカー強調 ================= */

.hl-checkdate {
  display: inline-block;
  background: var(--hl-accent);
  color: #fff;
  font-size: 0.72em;
  font-weight: 700;
  border-radius: 3px;
  padding: 0.12em 0.6em;
  margin-left: 0.4em;
  vertical-align: middle;
  white-space: nowrap;
}

.hl-marker {
  background: linear-gradient(transparent 55%, var(--hl-marker) 55%);
  font-weight: 600;
}

/* ================= 手順（STEP見出し・番号付き） ================= */

.hl-step {
  counter-increment: hl-step;
  border-left: none !important;
  border-bottom: 2px solid var(--hl-border) !important;
  padding-left: 0 !important;
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.hl-step::before {
  content: "STEP " counter(hl-step);
  flex-shrink: 0;
  background: var(--hl-main);
  color: #fff;
  font-size: 0.72em;
  font-weight: 700;
  border-radius: 4px;
  padding: 0.25em 0.7em;
}
.entry-content { counter-reset: hl-step; }

/* ================= FAQ（Q/Aアイコン付き） ================= */

.hl-faq {
  border: 1px solid var(--hl-border);
  border-radius: 8px;
  padding: 1em 1.2em;
  margin: 0.9em 0;
  background: #fff;
}
.hl-faq p { position: relative; padding-left: 2em; margin: 0.4em 0; }
.hl-faq p:first-child::before,
.hl-faq p:not(:first-child)::before {
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  color: #fff;
  font-size: 0.85em;
  font-weight: 700;
  text-align: center;
  line-height: 1.5em;
}
.hl-faq p:first-child::before { content: "Q"; background: var(--hl-main); }
.hl-faq p:not(:first-child)::before { content: "A"; background: var(--hl-accent); }

/* ================= まとめ枠 ================= */

.hl-summary {
  background: var(--hl-bg-pink);
  border-radius: 8px;
  padding: 1.1em 1.3em;
  line-height: 1.9;
}

/* ================= ボタン・収益導線 ================= */

/* 汎用CTA（内部リンク誘導にも使用可） */
.hl-cta {
  display: block;
  max-width: 480px;
  margin: 1.4em auto;
  background: var(--hl-main);
  color: #fff !important;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.9em 1.5em;
  box-shadow: 0 3px 0 var(--hl-main-dark);
  transition: transform 0.1s, box-shadow 0.1s;
}
.hl-cta:hover {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--hl-main-dark);
}

/* 通販3択ボックス（ASP承認後のSHOPBOX置換で使用） */
.hl-shopbox {
  border: 2px solid var(--hl-main);
  border-radius: 10px;
  padding: 1.1em 1.2em;
  margin: 1.6em 0;
  text-align: center;
  background: #fff;
}
.hl-shopbox-title {
  font-weight: 700;
  margin-bottom: 0.7em;
}
.hl-shopbox-title::before { content: "🛒 "; }
.hl-btn {
  display: inline-block;
  min-width: 8.5em;
  color: #fff !important;
  text-decoration: none;
  border-radius: 6px;
  padding: 0.6em 1.2em;
  margin: 0.25em;
  font-weight: 700;
  transition: opacity 0.15s;
}
.hl-btn:hover { opacity: 0.85; }
.hl-btn-rakuten { background: #BF0000; }
.hl-btn-amazon  { background: #FF9900; }
.hl-btn-yahoo   { background: #FF0033; }
.hl-btn-kaitori { background: var(--hl-main); }

/* 買取導線ボックス */
.hl-kaitori {
  border: 1px dashed var(--hl-accent);
  border-radius: 8px;
  padding: 1em 1.2em;
  margin: 1.6em 0;
  background: var(--hl-bg-mint);
}

/* ================= スマホ調整 ================= */

@media (max-width: 768px) {
  .hl-table { font-size: 0.88em; }
  .hl-table th, .hl-table td { padding: 0.55em 0.6em; }
  .hl-btn { display: block; margin: 0.4em auto; max-width: 320px; }
  .hl-cta { max-width: 100%; }
}

/* ====================================================================
   固定ページ・トップFV・お問い合わせフォーム用（2026-07-08追加）
   配色は本ファイル冒頭の確定ブランド変数を流用（新色は足さない）。
   使い方: 各HTMLは カスタムHTML/固定ページに貼付。本CSSは既に追加CSSに含む。
==================================================================== */

/* --- 固定ページ共通ラッパー .hl-doc（entry-content外でも効かせる） --- */
.hl-doc { line-height: 1.9; color: var(--hl-text); }
.hl-doc h2 {
  /*background: var(--hl-bg-pink);
  border-left: 6px solid var(--hl-main);*/
  border-radius: 0 6px 6px 0;
  padding: 0.65em 0.8em;
  margin: 2.2em 0 1em;
  font-size: 1.25em;
  line-height: 1.4;
}
.hl-doc h3 {
  border-left: 4px solid var(--hl-main);
  border-bottom: 2px solid var(--hl-border);
  padding: 0.3em 0 0.3em 0.6em;
  margin: 1.8em 0 0.8em;
  font-size: 1.1em;
}
.hl-doc ul { list-style: none; padding-left: 0.2em; }
.hl-doc ul > li { position: relative; padding-left: 1.4em; margin: 0.5em 0; line-height: 1.8; }
.hl-doc ul > li::before {
  content: ""; position: absolute; left: 0.15em; top: 0.62em;
  width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--hl-main);
}
.hl-doc a { color: var(--hl-main-dark); text-decoration: underline; }
.hl-doc a:hover { color: var(--hl-accent); }
.hl-doc .hl-note { font-size: 0.8em; color: var(--hl-text-light); margin-top: 1.8em; }

/* ページ見出しヘッダー（運営者情報など） */
.hl-pagehead {
  background: var(--hl-bg-pink);
  border-left: 6px solid var(--hl-main);
  border-radius: 0 8px 8px 0;
  padding: 1.2em 1.3em;
  margin: 0 0 1.6em;
}
.hl-pagehead-title { font-size: 1.4em; font-weight: 800; color: var(--hl-text); margin: 0 0 0.3em; }
.hl-pagehead p { margin: 0; color: var(--hl-text); line-height: 1.8; }

/* --- トップページ ファーストビュー（白ベース・帯/線アクセント） --- */
.hl-fv-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.hl-fv-hero { background: var(--hl-bg-pink); color: var(--hl-text); }
.hl-fv-hero .hl-fv-inner { display: flex; gap: 36px; align-items: center; padding: 54px 20px; }
.hl-fv-hero-copy { flex: 1.2; }
.hl-fv-badge { display: inline-block; background: var(--hl-main); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 13px; border-radius: 999px; margin-bottom: 16px; }
.hl-fv-hero-title { font-size: 33px; font-weight: 800; line-height: 1.5; margin: 0 0 16px; color: var(--hl-text); }
.hl-fv-hero-title .hl-hl { background: linear-gradient(transparent 55%, var(--hl-marker) 55%); }
.hl-fv-hero-lead { font-size: 15px; color: var(--hl-text); line-height: 1.85; margin: 0 0 26px; }
.hl-fv-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.hl-fv-btn-primary { background: var(--hl-main); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; padding: 14px 26px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 3px 0 var(--hl-main-dark); transition: transform .1s, box-shadow .1s; }
.hl-fv-btn-primary:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--hl-main-dark); color: #fff; }
.hl-fv-btn-ghost { border: 1.5px solid var(--hl-main); color: var(--hl-text); background: #fff; font-size: 15px; font-weight: 600; text-decoration: none; padding: 12px 24px; border-radius: 999px; display: inline-flex; align-items: center; transition: background .15s; }
.hl-fv-btn-ghost:hover { background: var(--hl-bg-pink); color: var(--hl-text); }
.hl-fv-hero-visual { flex: 1; min-height: 240px; border-radius: 12px; background: #fff; border: 1px solid var(--hl-border); box-shadow: 0 8px 24px rgba(51,58,64,.08); display: flex; align-items: center; justify-content: center; }
.hl-fv-illust { width: 100%; height: auto; max-width: 360px; display: block; }

.hl-fv-cats { background: #fff; padding: 26px 0; }
.hl-fv-cats .hl-fv-inner { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.hl-fv-cat { background: #fff; border: 1px solid var(--hl-border); border-top: 3px solid var(--hl-main); border-radius: 8px; padding: 20px 12px; text-align: center; text-decoration: none; color: var(--hl-text); transition: box-shadow .15s, transform .15s; }
.hl-fv-cat:hover { box-shadow: 0 3px 10px rgba(51,58,64,.12); transform: translateY(-2px); color: var(--hl-text); }
.hl-fv-cat svg { width: 30px; height: 30px; color: var(--hl-accent); }
.hl-fv-cat span { display: block; font-size: 14px; font-weight: 700; margin-top: 10px; }

.hl-fv-section { padding: 48px 0; }
.hl-fv-sec-head { text-align: center; margin-bottom: 34px; }
.hl-fv-sec-head h2 { font-size: 24px; font-weight: 800; color: var(--hl-text); margin: 0 0 8px; border: none; background: none; padding: 0; }
.hl-fv-sec-head h2 .hl-hl { background: linear-gradient(transparent 55%, var(--hl-marker) 55%); }
.hl-fv-sec-head p { font-size: 14px; color: var(--hl-text-light); margin: 0; }

.hl-fv-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.hl-fv-step { background: #fff; border: 1px solid var(--hl-border); border-radius: 10px; padding: 26px 22px 22px; position: relative; }
.hl-fv-step-num { position: absolute; top: -14px; left: 22px; width: 34px; height: 34px; background: var(--hl-main); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; }
.hl-fv-step h3 { font-size: 17px; color: var(--hl-text); margin: 6px 0 10px; border: none; padding: 0; }
.hl-fv-step p { font-size: 13.5px; color: var(--hl-text); line-height: 1.8; margin: 0; }

.hl-fv-posts { background: var(--hl-bg-pink); }
.hl-fv-post-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.hl-fv-post { background: #fff; border: 1px solid var(--hl-border); border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--hl-text); transition: box-shadow .15s, transform .15s; display: block; }
.hl-fv-post:hover { box-shadow: 0 6px 16px rgba(51,58,64,.12); transform: translateY(-2px); color: var(--hl-text); }
.hl-fv-post-thumb { height: 150px; background: var(--hl-bg-mint); position: relative; }
.hl-fv-post-cat { position: absolute; top: 10px; left: 10px; background: var(--hl-accent); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.hl-fv-post-body { padding: 16px 16px 20px; }
.hl-fv-post-body h3 { font-size: 15.5px; line-height: 1.55; margin: 0 0 10px; border: none; padding: 0; }
.hl-fv-post-date { font-size: 12px; color: var(--hl-text-light); }

.hl-fv-cta-band { background: var(--hl-bg-pink); text-align: center; padding: 44px 20px; }
.hl-fv-cta-band h2 { font-size: 23px; font-weight: 800; margin: 0 0 10px; color: var(--hl-text); border: none; background: none; padding: 0; }
.hl-fv-cta-band p { font-size: 14px; color: var(--hl-text); margin: 0 0 22px; }
.hl-fv-cta-band a { background: var(--hl-main); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; padding: 15px 34px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 3px 0 var(--hl-main-dark); transition: transform .1s, box-shadow .1s; }
.hl-fv-cta-band a:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--hl-main-dark); color: #fff; }

.hl-fv-hero, .hl-fv-cats, .hl-fv-posts, .hl-fv-cta-band { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.top #content { padding-top: 0; }

@media (max-width: 900px) {
  .hl-fv-hero .hl-fv-inner { flex-direction: column; gap: 26px; padding: 38px 20px; }
  .hl-fv-hero-visual { width: 100%; }
  .hl-fv-hero-title { font-size: 26px; }
  .hl-fv-steps { grid-template-columns: 1fr; }
  .hl-fv-post-grid { grid-template-columns: repeat(2,1fr); }
  .hl-fv-cats .hl-fv-inner { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .hl-fv-hero-title { font-size: 22px; }
  .hl-fv-post-grid { grid-template-columns: 1fr; }
  .hl-fv-hero-btns { flex-direction: column; }
  .hl-fv-btn-primary, .hl-fv-btn-ghost { justify-content: center; }
}

/* --- お問い合わせフォーム（Contact Form 7） --- */
.hl-form { margin-top: 6px; }
.hl-field { margin-bottom: 18px; }
.hl-flabel { display: block; font-weight: 700; color: var(--hl-text); font-size: 14px; margin: 0 0 6px; }
.hl-req { display: inline-block; background: var(--hl-main); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-left: 4px; vertical-align: 2px; }
.hl-opt { color: var(--hl-text-light); font-size: 12px; font-weight: 500; margin-left: 2px; }
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=url], .wpcf7 textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--hl-border); border-radius: 8px;
  padding: 12px 14px; font-size: 15px; background: #fff; color: var(--hl-text);
  transition: border-color .15s, box-shadow .15s;
}
.wpcf7 textarea { resize: vertical; min-height: 120px; }
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: none; border-color: var(--hl-main); box-shadow: 0 0 0 3px rgba(255,110,156,.15); }
.wpcf7 ::placeholder { color: #b9bfc4; }
.hl-radios .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 10px; }
.hl-radios .wpcf7-list-item { margin: 0; position: relative; }
.hl-radios .wpcf7-list-item > label { display: inline-flex; align-items: center; border: 1.5px solid var(--hl-border); background: #fff; color: var(--hl-text); font-size: 13.5px; font-weight: 600; padding: 10px 16px; border-radius: 999px; cursor: pointer; transition: border-color .15s, background .15s; }
.hl-radios .wpcf7-list-item input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.hl-radios .wpcf7-list-item > label:hover { border-color: var(--hl-main); }
.hl-radios .wpcf7-list-item:has(input:checked) > label { border-color: var(--hl-main); background: var(--hl-bg-pink); color: var(--hl-main-dark); font-weight: 700; }
.hl-radios .wpcf7-list-item:has(input:focus-visible) > label { box-shadow: 0 0 0 3px rgba(255,110,156,.15); }
.hl-agree { margin: 4px 0 22px; font-size: 13.5px; color: var(--hl-text); }
.hl-agree .wpcf7-list-item { margin: 0; }
.hl-agree label { display: flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 500; }
.hl-agree input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--hl-main); flex: none; }
.hl-agree a { color: var(--hl-main-dark); font-weight: 600; }
.hl-submit-wrap { text-align: center; }
.wpcf7 input[type=submit] { width: 100%; max-width: 340px; background: var(--hl-main); color: #fff; border: none; border-radius: 999px; font-size: 16px; font-weight: 700; padding: 15px 40px; cursor: pointer; box-shadow: 0 3px 0 var(--hl-main-dark); transition: transform .1s, box-shadow .1s; }
.wpcf7 input[type=submit]:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--hl-main-dark); }
.wpcf7 .wpcf7-spinner { margin: 0 0 0 10px; }
.wpcf7 .wpcf7-response-output { border-radius: 8px; padding: 12px 16px !important; font-size: 13.5px; margin: 16px 0 0 !important; }
.wpcf7 .wpcf7-not-valid-tip { color: var(--hl-main-dark); font-size: 12.5px; margin-top: 5px; }
.wpcf7-not-valid { border-color: var(--hl-main) !important; }

@media (max-width: 768px) {
  .hl-pagehead-title { font-size: 1.2em; }
}

/* ================= 手動調整 ================= */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
	color: #fff;
}
.p-termHead__desc {
  display: none;
}
.p-termHead {
  border: none;
}