@charset "UTF-8";  /*! Theme Name: Cocoon Child Description: Cocoon専用の子テーマ Theme URI: https://wp-cocoon.com/ Author: わいひら Author URI: https://nelog.jp/ Template:   cocoon-master Version:    1.1.3 */  /************************************ ** 子テーマ用のスタイルを書く ************************************/ /*必要ならばここにコードを書く*/  /* ============================================================    ブランドリニューアル デザイントークン（2026-07-20〜 実装）    Owner・Tom壁打ちで確定した配色・書体をサイト全体（グローバルchrome）に適用。    トップ／当社の特徴／引越しプラン／対応エリアは本文もこのフェーズ以降で刷新。    不用品回収・お問い合わせ系は本文は現状維持だが、このヘッダー/フッター/ボタン再配色は    グローバルCSSとして他ページ同様に自動的にかかる（Owner確認済み・2026-07-20）。    フォント読み込みは functions.php 側で wp_enqueue_style している。    ============================================================ */ :root {   --hh-ink: #1E2A38;   --hh-ink-soft: #52626E;   --hh-paper: #F5F6F1;   --hh-accent: #D9612C;   --hh-accent-soft: #F3D9C7;   --hh-line: #DEDFD6;   --hh-mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;   --hh-gothic: "Noto Sans JP", "Hiragino Sans", "Meiryo", sans-serif; }  /* サイト全体の背景・本文フォント */ body {   background-color: var(--hh-paper);   color: var(--hh-ink);   font-family: var(--hh-gothic); }  /* 見出し類は明朝体に統一 */ h1, h2, h3, h4, .header .site-name, .entry-title {   font-family: var(--hh-mincho); }  /* ヘッダー再配色 */ #header-container, #header {   background-color: var(--hh-paper); } #header .site-name a { color: var(--hh-ink); }  /* ヘッダーの帯（ロゴ＋ナビを含む横並びのバー全体）を紺色の枠線で画面端まで囲む（2026-07-21）    従来の #header-container 下端の薄いグレー区切り線（--hh-line, 1px）をこの枠線に置き換える。    #header-container はビューポート全幅（x:0〜画面右端）で描画されることを実測で確認済みのため、    この要素にだけ border を付ければ「画面の左右の端まで届く」枠になる。#header（ロゴ側の内側要素）    には付けない＝ロゴだけを囲むバッジ状の枠にはしない。 */ #header-container {   border: 2px solid var(--hh-ink); }  /* グローバルナビ再配色 */ #navi { background-color: var(--hh-ink); } #navi .menu-header a, #navi .menu-mobile a { color: var(--hh-paper); } #navi .menu-header a:hover { color: var(--hh-accent); }  /* PC版ヘッダーナビの偏り修正（2026-07-21）    ヘッダーロゴを画像からテキストワードマークに差し替えた結果、ロゴの実効幅が縮小し、    Cocoonの「トップメニュー・右寄せ」設定（.hlt-tm-right .navi-in > ul{justify-content:flex-end}、    詳細度0,2,1）により、ナビ全体（Cocoon側 .navi{width:100%} でロゴの残り幅いっぱいに広がる）の    中でリンクだけが右端に押しつけられ、ロゴとの間に大きな空白ができて右に偏って見えていた。    ナビの表示領域幅自体は変えず、その中でのリンク配置をヘッダー全幅に均等展開させることで解消する。    #navi を含めた詳細度1,2,1でCocoon側（0,2,1）を確実に上回るため!importantは不要。 */ #navi .navi-in > .menu-header {   justify-content: space-between; }  /* フッター再配色 */ #footer { background-color: var(--hh-ink); color: var(--hh-paper); } #footer a { color: var(--hh-paper); } /* 2026-07-21追記：Cocoon本体の「フッター背景色」設定が同一詳細度の#footer{background:#2d2d2d}を    出力しており（サイトキーカラー由来の#footer{background-color:#1e2a38}とは別ルール）、    現行のカスケード順（子テーマCSSが両方より後に読み込まれる）では既に上記のvar(--hh-ink)が    優先されヘッドレスブラウザの計算値でも#1E2A38を確認済みだが、将来の設定変更や読み込み順の    変化に対しても確実にブランド濃紺を維持できるよう、詳細度を明確に上回るセレクタで重ねて固定する。 */ body #footer { background-color: var(--hh-ink); }  /* Cocoonブロックのボタン（button-1）をアクセントカラーに統一 */ .btn, .wp-block-cocoon-blocks-button-1 a.btn {   background-color: var(--hh-accent) !important;   border-color: var(--hh-accent) !important;   color: #fff !important;   font-family: var(--hh-gothic); }  /* サイト全体でアンカーリンクのスクロールを滑らかに */ html { scroll-behavior: smooth; }  /* ============================================================    Phase 2：トップページ本文（page 49）用コンポーネントCSS（2026-07-20）    モックアップのセクション構成（ヒーロー→診断ツール導線→当社の特徴→    プラン→対応エリア→フッターCTA）をそのまま再現するための部品群。    hh- プレフィックスで既存Cocoonクラスとの衝突を避けている。    ============================================================ */ .hh-band { padding: 64px 0; border-bottom: 1px solid var(--hh-line); } .hh-band-raised { background: #fff; } .hh-wrap { max-width: 640px; margin: 0 auto; padding: 0 20px; } .hh-eyebrow { font-size: .78rem; letter-spacing: .14em; color: var(--hh-accent); font-weight: 700; margin: 0 0 .6em; text-align: center; } .hh-band h1, .hh-band h2 { text-align: center; font-family: var(--hh-mincho); font-weight: 700; margin: 0; line-height: 1.5; } .hh-band h1 { font-size: clamp(1.7rem, 6vw, 2.3rem); } .hh-band h2 { font-size: clamp(1.4rem, 5vw, 1.8rem); } .hh-lead { color: var(--hh-ink-soft); margin: 18px auto 28px; max-width: 34em; text-align: center; } .hh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; justify-content: center; } .hh-chip { font-size: .78rem; padding: 6px 12px; border-radius: 999px; background: var(--hh-accent-soft); color: var(--hh-ink); } .hh-hero-graphic { margin-top: 36px; text-align: center; } .hh-hero-graphic img { border-radius: 14px; }  .hh-cta {   display: flex; align-items: center; justify-content: center; gap: 8px;   width: 100%; background: var(--hh-accent); color: #fff !important;   padding: 18px 28px; border-radius: 999px; border: none;   font-weight: 700; font-size: 1.05rem; text-decoration: none;   box-shadow: 0 1px 2px rgba(30,42,56,.06), 0 8px 24px -12px rgba(30,42,56,.18); } .hh-cta.hh-secondary { background: var(--hh-accent-soft); color: var(--hh-ink) !important; box-shadow: none; } .hh-cta:not(.hh-secondary) { position: relative; overflow: hidden; } .hh-cta:not(.hh-secondary)::after {   content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;   background: linear-gradient(120deg, transparent, rgba(255,255,255,.65), transparent);   transform: skewX(-20deg); } @media (prefers-reduced-motion: no-preference) {   .hh-cta:not(.hh-secondary)::after { animation: hh-cta-shine 3.4s ease-in-out infinite; } } @keyframes hh-cta-shine {   0% { left: -60%; }   45%, 100% { left: 130%; } }  .hh-steps { display: flex; flex-direction: column; gap: 18px; margin: 26px 0 28px; } .hh-step-label { font-size: .82rem; color: var(--hh-ink-soft); margin-bottom: 8px; display: flex; gap: 8px; align-items: flex-start; } .hh-step-label .hh-n { width: 20px; height: 20px; border-radius: 50%; background: var(--hh-ink); color: var(--hh-paper); display: grid; place-items: center; font-size: .68rem; flex-shrink: 0; } .hh-step-label .hh-label-text { flex: 1; } .hh-step-caption { margin: -4px 0 10px 28px; font-size: .78rem; color: var(--hh-ink-soft); } .hh-step-caption.hh-highlight { display: inline-block; margin-left: 28px; color: var(--hh-ink); background: var(--hh-accent-soft); padding: 4px 10px; border-radius: 8px; } .hh-mark { background: var(--hh-accent-soft); padding: 0 3px; border-radius: 4px; } .hh-pillset { display: flex; flex-wrap: wrap; gap: 8px; } .hh-pill { border: 1px solid var(--hh-line); background: #fff; padding: 9px 16px; border-radius: 999px; cursor: pointer; font-size: .88rem; font-family: inherit; } .hh-pill[aria-pressed="true"] { background: var(--hh-ink); color: var(--hh-paper); border-color: var(--hh-ink); }  .hh-cards { display: flex; flex-direction: column; gap: 14px; margin: 26px 0; } .hh-card { background: #fff; border: 1px solid var(--hh-line); border-radius: 14px; padding: 20px; display: flex; gap: 14px; align-items: flex-start; } .hh-card .hh-icon { flex: none; width: 40px; height: 40px; color: var(--hh-accent); } .hh-card h3 { font-size: 1rem; margin: 0 0 6px; font-family: var(--hh-mincho); } .hh-card p { margin: 0; color: var(--hh-ink-soft); font-size: .92rem; }  .hh-plans { display: flex; flex-direction: column; gap: 16px; margin: 26px 0; } .hh-plan { background: #fff; border: 1px solid var(--hh-line); border-radius: 14px; padding: 24px; position: relative; overflow: hidden; } .hh-plan .hh-tag { position: absolute; top: 0; right: 0; background: var(--hh-ink); color: var(--hh-paper); font-size: .7rem; padding: 5px 12px; border-radius: 0 0 0 10px; } .hh-plan h3 { font-size: 1.15rem; margin: 0 0 6px; font-family: var(--hh-mincho); } .hh-plan .hh-price { margin: 14px 0; font-size: 1.6rem; font-weight: 700; } .hh-plan .hh-price .hh-unit { font-size: .8rem; font-weight: 400; color: var(--hh-ink-soft); } .hh-plan .hh-price .hh-draft { font-size: .68rem; color: var(--hh-ink-soft); font-weight: 400; display: block; margin-top: 2px; } .hh-plan ul { margin: 14px 0 18px; padding-left: 1.1em; color: var(--hh-ink-soft); font-size: .9rem; } .hh-plan ul li { margin-bottom: 4px; } .hh-disclaimer { margin-top: 14px; font-size: .78rem; color: var(--hh-ink-soft); text-align: center; }  /* 診断結果画面の「あなたの回答」サマリー欄（2026-07-22 Owner壁打ちで追加）。    sessionStorageに直前の回答がある場合のみ表示（URLパラメータのみの直接アクセス時は非表示）。 */ .hh-plan-summary { margin-top: 16px; padding: 12px 14px; background: var(--hh-accent-soft); border-radius: 8px; text-align: left; } .hh-plan-summary-label { margin: 0 0 4px; font-size: .78rem; font-weight: 700; color: var(--hh-ink); } .hh-plan-summary-text { margin: 0; font-size: .82rem; line-height: 1.7; color: var(--hh-ink-soft); }  .hh-reach { text-align: center; margin: 30px 0; } .hh-reach img { border-radius: 14px; border: 1px solid var(--hh-line); } .hh-area-detail { margin-top: 22px; font-size: .86rem; color: var(--hh-ink-soft); text-align: center; }   /*全てをまとめて非表示*/ .home.page .entry-title, .home.page .date-tags, .home.page .author-info{   display: none; }  /* Phase 3（2026-07-21）：当社の特徴／引越しプラン／対応エリアも本文側にh1を用意したため、    Cocoon標準のページタイトル（entry-title）二重表示を防ぐ。トップページと同じ考え方。 */ .page-id-26 .entry-title, .page-id-18 .entry-title, .page-id-10 .entry-title{   display: none; }  /* Phase 5（2026-07-22）：投稿144（今すぐ無料診断）も本文側に見出し（h2「今すぐ無料診断」）を    用意したため、Cocoon標準のページタイトル（entry-title）二重表示を防ぐ。    固定ページと異なり投稿なのでbodyクラスは page-id- ではなく postid- になる。 */ .postid-144 .entry-title{   display: none; }  form table {     overflow-x: auto; 	width: 100%; } form table tr:nth-child(1) td:nth-child(1) { 	width: 40%; } form td { 	vertical-align: top; }   /************************************ ** レスポンシブデザイン用のメディアクエリ ************************************/ /*1023px以下*/ @media screen and (max-width: 1023px){   /*必要ならばここにコードを書く*/ }  /*834px以下*/ @media screen and (max-width: 834px){   /*必要ならばここにコードを書く*/ }  /*480px以下*/ @media screen and (max-width: 480px){   /*必要ならばここにコードを書く*/ }  /* ============================================================    Phase 3：固定ページ本体（当社の特徴／引越しプラン／対応エリア）用CSS（2026-07-21）    Phase 2のコンポーネント（hh-band / hh-wrap / hh-eyebrow / hh-lead / hh-cards /    hh-card / hh-plan / hh-plans / hh-cta / hh-disclaimer / hh-hero-graphic /    hh-reach）をそのまま再利用。ここでは各ページ固有の追加パーツのみ定義する。    ============================================================ */  /* 引越しプラン：トラックサイズ別料金の縦積みリスト */ .hh-price-list { display: flex; flex-direction: column; gap: 10px; margin: 26px 0; } .hh-price-row {   display: flex; justify-content: space-between; align-items: baseline;   background: #fff; border: 1px solid var(--hh-line); border-radius: 10px;   padding: 14px 18px; } .hh-price-row-label { font-family: var(--hh-mincho); font-weight: 700; color: var(--hh-ink); } .hh-price-row-value { font-weight: 700; color: var(--hh-accent); font-size: 1.05rem; } .hh-price-row-value .hh-unit { font-size: .72rem; font-weight: 400; color: var(--hh-ink-soft); margin-left: 2px; }  /* 対応エリア：都県別グループ一覧 */ .hh-area-groups { display: flex; flex-direction: column; gap: 16px; margin: 30px 0; text-align: left; } .hh-area-group {   background: #fff; border: 1px solid var(--hh-line); border-radius: 14px;   padding: 20px 22px; } .hh-area-group h3 {   font-family: var(--hh-mincho); font-size: 1.05rem; color: var(--hh-ink);   margin: 0 0 10px; padding-left: 10px; border-left: 4px solid var(--hh-accent); } .hh-area-group p { margin: 0 0 8px; color: var(--hh-ink-soft); font-size: .92rem; line-height: 1.9; } .hh-area-group p:last-child { margin-bottom: 0; } .hh-area-group .hh-area-sub { font-weight: 700; color: var(--hh-ink); }  /* プラン詳細・アンカー遷移時、見出しが隠れないための余白 */ .hh-plan[id] { scroll-margin-top: 100px; }  /* ============================================================    ヘッダーロゴのテキスト化 ＋ ヒーロー大ロゴ（2026-07-21）    画像ロゴ（旧スクリーンショット由来）が新ブランドと合っていないため、    常時表示ヘッダー/フッターは文字ロゴ（ワードマーク）に統一し、    トップページのヒーローには大きめの二段組ロゴを1回だけ追加する。    追従（sticky）ヘッダーは使用しない（Cocoon側「ヘッダー固定」設定が    現状オフであることを確認済み。子テーマ側にも sticky/fixed の指定なし）。    ============================================================ */  /* 常時表示ヘッダー／フッターの文字ロゴ（functions.php の the_site_logo_tag    フィルターで出力されるマークアップに対応。アイコン・英字サブラベルなし） */ .hh-wordmark .site-name-text {   font-weight: 700;   font-size: 1.02rem;   letter-spacing: .01em; } @media screen and (min-width: 835px) {   .hh-wordmark .site-name-text {     font-size: 1.12rem;   } } /* 2026-07-21：紺色ヘッダー枠追加に伴い、最小幅スマホ（375px前後）でも    「八王子引っ越しセンター」が絶対に2行に折り返さないことを明示的に担保する。    Cocoon親テーマ側に .header-container-in.hlt-top-menu .site-name-text{white-space:normal}    という834px以下専用の上書き（詳細度0,3,0）が存在し、単純な .hh-wordmark .site-name-text    （詳細度0,2,0）ではこれに負けて折り返し可能な状態に戻ってしまうことをヘッドレスブラウザの    マッチルール検証で確認したため、#header を含めて詳細度(1,2,0)に引き上げ確実に上回るようにする。 */ #header .hh-wordmark .site-name-text, #header .hh-wordmark .site-name-text-link {   white-space: nowrap; } .hh-wordmark-footer .site-name-text {   font-weight: 700; }  /* ヒーロー大ロゴ（トップページ最上段のみ、既存ヒーローイラストの直前に配置）は、    ヘッダーとブランド名が2回表示されて冗長・モバイルで縦スペースを圧迫するとの    Owner・Tom判断（2026-07-21）により廃止・本文から削除した。対応クラスも未使用    のため削除。 */  /* ============================================================    ヘッダー／フッターの文字ロゴ色 修正（2026-07-21、Owner実機確認で発覚）    上のヘッダー再配色ブロックで #header-container / #header の背景を    明るい --hh-paper に変更したところ、Cocoon「サイトキーカラー」設定由来の    .site-name-text の文字色（ライブ確認値 #f5f6f1 ≒ --hh-paper とほぼ同一）と    衝突し、白系文字が白系背景に埋もれて実質見えなくなっていた    （text-indent/font-size:0等の「隠す」トリックではなく、単純な背景と文字の    同化が原因と判明）。#header/#footer のIDセレクタを含めて詳細度を確実に    Cocoon側（.header .site-name-text、詳細度0,2,0）より高くし、ヘッダーは    明るい背景向けに濃紺、フッターは背景が濃紺のままなので明るい紙色を明示指定する。 */ #header .hh-wordmark .site-name-text, #header .hh-wordmark .site-name-text-link {   color: var(--hh-ink); } #footer .hh-wordmark .site-name-text, #footer .hh-wordmark .site-name-text-link {   color: var(--hh-paper); }  /* ============================================================    見積もり依頼／お問い合わせフォーム 共通CSS（2026-07-22）    /contact/（無料見積もり、CF7フォーム105）・/inquiry/（お問い合わせ、    CF7フォーム154）の両方に適用される。フォーム側のHTMLに元々用意されて    いた構造用クラス（cf7-form-wrap／cf7-row／cf7-radio-wrap等）に、    既存のhh-系デザイントークンで見た目を合わせている。    ============================================================ */ :root {   --hh-required: #C0392B;   --hh-dest-soft: #DDE3EA; }  /* Cocoon標準のページタイトル（entry-title）二重表示を防ぐ    （本文側に独自の見出しh1を用意しているため）    page-id-108＝/contact/（無料見積もり）、page-id-229＝/inquiry/（お問い合わせ） */ .page-id-108 .entry-title, .page-id-229 .entry-title {   display: none; }  .cf7-form-wrap {   display: flex;   flex-direction: column;   gap: 22px;   margin-top: 30px;   text-align: left; } .cf7-row { display: flex; flex-direction: column; gap: 8px; } .cf7-label, .cf7-label label {   font-weight: 700;   font-size: .92rem;   color: var(--hh-ink); } .cf7-req { color: var(--hh-required); font-weight: 700; font-size: .82em; margin-left: .3em; } .cf7-opt { color: var(--hh-ink-soft); font-weight: 400; font-size: .82em; margin-left: .3em; }  .cf7-field input[type="text"], .cf7-field input[type="email"], .cf7-field input[type="tel"], .cf7-field input[type="date"], .cf7-field select, .cf7-field textarea {   width: 100%;   border: 1px solid var(--hh-line);   border-radius: 10px;   padding: 11px 14px;   font-size: .95rem;   font-family: var(--hh-gothic);   color: var(--hh-ink);   background: #fff;   box-sizing: border-box; } .cf7-field textarea { min-height: 120px; resize: vertical; } .cf7-field input:focus, .cf7-field select:focus, .cf7-field textarea:focus {   outline: none;   border-color: var(--hh-accent);   box-shadow: 0 0 0 3px var(--hh-accent-soft); }  /* ピル化：CF7標準の label > input + span 構造はそのまま維持し、見た目だけ    トップページ診断ツールの .hh-pill と揃えたボタン状にする */ .cf7-radio-wrap, .cf7-check-wrap {   display: flex;   flex-wrap: wrap;   margin-top: 2px; } .cf7-radio-wrap .wpcf7-list-item, .cf7-check-wrap .wpcf7-list-item {   margin: 0 8px 8px 0; } .cf7-radio-wrap .wpcf7-list-item label, .cf7-check-wrap .wpcf7-list-item label {   display: inline-flex;   align-items: center;   border: 1px solid var(--hh-line);   background: #fff;   padding: 9px 16px;   border-radius: 999px;   cursor: pointer;   font-size: .88rem;   font-weight: 400;   color: var(--hh-ink);   transition: background-color .15s, color .15s, border-color .15s; } .cf7-radio-wrap input[type="radio"], .cf7-check-wrap input[type="checkbox"] {   position: absolute;   opacity: 0;   width: 1px;   height: 1px;   overflow: hidden; } .cf7-radio-wrap input[type="radio"]:checked + .wpcf7-list-item-label, .cf7-check-wrap input[type="checkbox"]:checked + .wpcf7-list-item-label {   background: var(--hh-ink);   color: var(--hh-paper);   border-color: var(--hh-ink); } .cf7-radio-wrap input[type="radio"]:focus-visible + .wpcf7-list-item-label, .cf7-check-wrap input[type="checkbox"]:focus-visible + .wpcf7-list-item-label {   outline: 2px solid var(--hh-accent);   outline-offset: 2px; }  /* 条件表示欄（初期状態は非表示。hh-forms.jsが選択に応じて出し分ける） */ .cf7-date-wrap, .cf7-tel-time-wrap {   margin-top: 10px;   padding: 12px 14px;   background: var(--hh-paper);   border: 1px solid var(--hh-line);   border-radius: 10px; } .cf7-date-wrap[hidden], .cf7-tel-time-wrap[hidden] { display: none; } .cf7-date-label, .cf7-sub-label {   display: block;   font-size: .8rem;   color: var(--hh-ink-soft);   margin-bottom: 6px; }  /* 住所セクション：現在のご住所／お引越し先のご住所を見出し帯の色で区別 */ .cf7-row-address {   border: 1px solid var(--hh-line);   border-radius: 14px;   overflow: hidden;   gap: 0; } .cf7-row-address > .cf7-label {   padding: 12px 16px;   margin: 0; } .cf7-row-address > .cf7-field {   padding: 16px;   background: #fff;   display: flex;   flex-direction: column;   gap: 16px; } .cf7-row-address-current > .cf7-label { background: var(--hh-accent-soft); } .cf7-row-address-new > .cf7-label { background: var(--hh-dest-soft); }  .cf7-addr-grid {   display: grid;   grid-template-columns: 1fr 1fr;   gap: 12px; } .cf7-addr-item label, .cf7-addr-sub label {   display: block;   font-size: .82rem;   color: var(--hh-ink-soft);   margin-bottom: 6px; }  /* フォーム上部の相互リンク（見積もり⇔お問い合わせ） */ .cf7-cross-link { margin-top: 10px; text-align: center; } .cf7-cross-link a { font-size: .84rem; color: var(--hh-ink-soft); text-decoration: underline; } .cf7-cross-link a:hover { color: var(--hh-accent); }  /* 送信ボタンをサイト共通CTAスタイルに統一 */ .cf7-form-wrap input[type="submit"] {   width: 100%;   background: var(--hh-accent);   color: #fff;   border: none;   border-radius: 999px;   padding: 16px 28px;   font-weight: 700;   font-size: 1.02rem;   cursor: pointer;   font-family: var(--hh-gothic); } .cf7-form-wrap input[type="submit"]:hover { opacity: .92; }  /* JS側の送信前チェックによるインラインエラー表示 */ .hh-inline-error {   display: block;   color: var(--hh-required);   font-size: .8rem;   margin-top: 4px; }  /* CF7標準のフィールド単位エラー・送信後メッセージも最低限整える */ .wpcf7-not-valid-tip { color: var(--hh-required); font-size: .8rem; margin-top: 4px; display: block; } .wpcf7-response-output {   margin-top: 18px !important;   border-radius: 10px !important;   font-size: .9rem; }  /* フォーム全体の横幅を他ページの本文（.hh-wrap）と揃える */ .wpcf7 {   max-width: 640px;   margin: 0 auto;   padding: 0 20px; }  @media screen and (max-width: 480px) {   .cf7-addr-grid { grid-template-columns: 1fr; } }
/* Phase 6 micro-adjustment（2026-07-22）：グローバルメニューの無料見積もりだけを
   CTA色の黄色で強調する。対象は既存メニュー項目 id 230 を差し替えたもの。 */
#navi .menu-header #menu-item-230 > a,
#navi .menu-mobile #menu-item-230 > a,
#navi-footer .menu-item-230 > a,
#navi-menu-content .menu-item-230 > a {
  background: #F5B700;
  color: #1E2A38 !important;
  font-weight: 700;
}
#navi .menu-header #menu-item-230 > a:hover,
#navi .menu-mobile #menu-item-230 > a:hover,
#navi-footer .menu-item-230 > a:hover,
#navi-menu-content .menu-item-230 > a:hover {
  background: #F5B700;
  color: #1E2A38 !important;
  opacity: .92;
}

/* 2026-07-22: unify selected pill colors across diagnosis + CF7 forms. */
.hh-pill,
.cf7-radio-wrap .wpcf7-list-item label,
.cf7-check-wrap .wpcf7-list-item label {
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}

.hh-pill:hover,
.cf7-radio-wrap .wpcf7-list-item label:hover,
.cf7-check-wrap .wpcf7-list-item label:hover {
  background: #FFF7D6;
  border-color: #F5B700;
}

.hh-pill[aria-pressed="true"] {
  background: #F5B700;
  color: #1E2A38;
  border-color: #F5B700;
  box-shadow: 0 8px 20px -14px rgba(245, 183, 0, .95);
}

.cf7-radio-wrap .wpcf7-list-item label:has(input[type="radio"]:checked),
.cf7-check-wrap .wpcf7-list-item label:has(input[type="checkbox"]:checked) {
  background: #F5B700;
  color: #1E2A38;
  border-color: #F5B700;
  box-shadow: 0 8px 20px -14px rgba(245, 183, 0, .95);
}

.cf7-radio-wrap input[type="radio"]:checked + .wpcf7-list-item-label,
.cf7-check-wrap input[type="checkbox"]:checked + .wpcf7-list-item-label {
  background: transparent;
  color: inherit;
  border-color: inherit;
}

/* 2026-07-22: hide category / related / bottom breadcrumb only on diagnosis post. */
.postid-144 .entry-categories-tags,
.postid-144 #related-entries,
.postid-144 #breadcrumb {
  display: none;
}