/* =====================================================================
soelc-shell.css — サイト共通chrome（トップバー / ヘッダー / ナビ / ロゴ /
ドロワー / フッター(.ft-light) / 追従CTA / .cta-compare 系 / ヘルパー）
・読み込み順：必ず soelc_main.css の直後に で読み込む
（soelc_main.css の article p{font-size:17px!important} 等の強い汎用
ルールに後勝ちさせるため）。
・マークアップの正本は template-parts/ の各パーツ。クラス名はトップ
ページ(tpl-soelc-top.php)と完全共通＝1箇所修正で全ページに反映。
・ここに定義する全クラスは soelc_main.css に存在しない専用名（衝突なし）。
===================================================================== */
/* ---------- ヘルパー ---------- */
.nowrap { white-space:nowrap; }
/* スマホ専用の改行制御：
はPCで無効・スマホ(≤767px)でのみ改行 */
.sp-only { display:none; }
@media (max-width:767px){ .sp-only { display:inline; } }
/* ===== CTA：比較サイト型（濃紺 #0F2540 ＋ オレンジ #F59E0B・端正／グラデ不使用） =====
共通バー：濃紺ボディ＋左バッジ＋中央テキスト＋右オレンジ矢印 */
.cta-compare { display:flex; align-items:stretch; width:100%; max-width:880px; margin:0 auto; min-height:72px; background:#0F2540; border:1px solid #0F2540; border-radius:8px; overflow:hidden; text-decoration:none; box-shadow:0 4px 14px rgba(15,37,64,0.16); transition:background .15s ease, box-shadow .15s ease; }
.cta-compare:hover { background:#15355F; box-shadow:0 8px 22px rgba(15,37,64,0.24); }
.cta-compare__badge { flex:0 0 auto; align-self:center; margin-left:14px; padding:7px 12px; border:1px solid rgba(255,255,255,0.55); border-radius:5px; font:700 12px/1.35 'Noto Sans JP'; color:#fff; text-align:center; white-space:nowrap; }
.cta-compare__label { flex:1 1 auto; min-width:0; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:0 16px; font:800 24px/1.2 'Zen Kaku Gothic New','Noto Sans JP'; color:#fff; white-space:nowrap; letter-spacing:0.02em; }
.cta-compare__arrow { flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:72px; background:#F59E0B; color:#0F2540; font-size:25px; font-weight:700; transition:background .15s ease; }
.cta-compare:hover .cta-compare__arrow { background:#FBB024; }
/* 補足3点（相談だけでもOK／およそ1分で完了／しつこい営業なし） */
.cta-assure { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; max-width:880px; margin:14px auto 0; }
.cta-assure__item { display:inline-flex; align-items:center; gap:7px; padding:2px 18px; font:700 13.5px/1.6 'Noto Sans JP'; color:#475569; }
.cta-assure__item + .cta-assure__item { border-left:1px solid #D7DEE7; }
.cta-assure__item svg { flex:0 0 auto; }
/* B. ヘッダー用（高さ44px・横長コンパクト） */
.cta-compare--header { width:auto; max-width:none; min-height:0; height:44px; margin:0; flex-shrink:0; border-radius:8px; box-shadow:0 1px 3px rgba(15,37,64,0.18); }
.cta-compare--header .cta-compare__badge { align-self:stretch; display:flex; align-items:center; gap:6px; margin-left:0; padding:0 11px; border:0; border-right:1px solid rgba(255,255,255,0.20); border-radius:0; font:700 11.5px/1 'Noto Sans JP'; color:#D6E2F0; }
.cta-compare--header .cta-compare__label { flex:0 0 auto; padding:0 13px; font:700 14px/1 'Noto Sans JP'; }
.cta-compare--header .cta-compare__arrow { width:40px; font-size:17px; }
/* C. モバイル追従（フルワイド・高さ60px前後） */
.cta-compare--mobile { max-width:560px; min-height:60px; border-radius:10px; }
.cta-compare--mobile .cta-compare__label { font-size:19px; }
.cta-compare--mobile .cta-compare__arrow { width:60px; font-size:21px; }
.cta-assure--mobile { margin-top:7px; flex-wrap:nowrap; }
.cta-assure--mobile .cta-assure__item { padding:0 5px; gap:4px; font-size:10px; color:#475569; white-space:nowrap; }
.cta-assure--mobile .cta-assure__item svg { width:12px; height:12px; }
.cta-assure--mobile .cta-assure__item + .cta-assure__item { border-left:0; }
/* D. 最終CTAバナー（白カード・左リード／中央補足3点／右ボタン） */
.cta-banner { display:flex; align-items:center; gap:30px; max-width:1000px; margin:0 auto; padding:34px 40px; background:#fff; border:1px solid #E2E8F0; border-radius:10px; box-shadow:0 16px 40px rgba(6,22,44,0.28); text-align:left; }
.cta-banner__lead { flex:0 0 auto; }
.cta-banner__eyebrow { display:inline-block; margin:0 0 10px; padding-bottom:9px; font:700 13px/1.5 'Noto Sans JP'; color:#0F2540; border-bottom:2px solid #14B8A6; }
.cta-banner__title { margin:0; font:800 26px/1.35 'Zen Kaku Gothic New','Noto Sans JP'; color:#0F2540; white-space:nowrap; }
.cta-banner__assure { flex:1 1 auto; display:flex; align-items:center; justify-content:center; }
.cta-banner__assure .cta-assure__item { flex-direction:column; gap:6px; padding:0 16px; text-align:center; font-size:12px; line-height:1.5; }
.cta-banner__assure .cta-assure__item + .cta-assure__item { border-left:1px solid #E2E8F0; }
.cta-compare--banner { width:auto; max-width:none; min-height:0; height:64px; margin:0; flex-shrink:0; border-radius:8px; }
.cta-compare--banner .cta-compare__label { flex:0 0 auto; padding:0 22px; font-size:17px; }
.cta-compare--banner .cta-compare__arrow { width:54px; font-size:20px; }
@media (max-width:980px){
.cta-banner { flex-wrap:wrap; gap:18px 20px; }
.cta-banner__lead { flex:1 1 100%; }
.cta-banner__title { white-space:normal; }
}
@media (max-width:880px){
.cta-banner { flex-direction:column; align-items:stretch; text-align:center; padding:24px 18px; }
.cta-banner__lead { text-align:center; }
.cta-banner__assure { justify-content:center; }
.cta-compare--banner { width:100%; }
.cta-compare--banner .cta-compare__label { flex:1 1 auto; }
}
@media (max-width:560px){
.cta-compare__label { font-size:16px; padding:0 8px; }
.cta-compare__badge { margin-left:9px; padding:5px 8px; font-size:10.5px; }
.cta-compare__arrow { width:52px; font-size:19px; }
.cta-compare--mobile .cta-compare__label { font-size:16px; }
.cta-compare--mobile .cta-compare__arrow { width:52px; }
/* プレーンcta-compare（in-content）はバッジ省略で「文言＋矢印」を1行に収める */
.cta-compare:not(.cta-compare--header):not(.cta-compare--banner):not(.cta-compare--mobile) .cta-compare__badge { display:none; }
.cta-assure { gap:6px 0; }
.cta-assure__item { padding:2px 12px; font-size:12.5px; }
}
@media (max-width:400px){
/* 極狭端末：文字・矢印をさらに詰め、オレンジ矢印が切れないようにする */
.cta-compare__label { font-size:14.5px; padding:0 6px; }
.cta-compare__arrow { width:46px; font-size:17px; }
.cta-compare--mobile .cta-compare__label { font-size:14.5px; }
.cta-compare--mobile .cta-compare__arrow { width:46px; }
}
/* ページ内（プレーン）cta-compare：バー自身の幅で表示を切替えるコンテナクエリ。
狭いラッパー（例 md:w-[412px]）内でもラベルが切れないよう、バッジを隠しラベルを縮める。
※ width:auto の header/banner/mobile 変種には container-type を付けない（コンテンツ幅で潰れるため）。 */
.cta-compare:not(.cta-compare--header):not(.cta-compare--banner):not(.cta-compare--mobile) { container-type: inline-size; }
@container (max-width: 470px) {
.cta-compare:not(.cta-compare--header):not(.cta-compare--banner):not(.cta-compare--mobile) .cta-compare__badge { display: none; }
.cta-compare:not(.cta-compare--header):not(.cta-compare--banner):not(.cta-compare--mobile) .cta-compare__label { font-size: 16px; }
}
@container (max-width: 360px) {
.cta-compare:not(.cta-compare--header):not(.cta-compare--banner):not(.cta-compare--mobile) .cta-compare__label { font-size: 14.5px; }
.cta-compare:not(.cta-compare--header):not(.cta-compare--banner):not(.cta-compare--mobile) .cta-compare__arrow { width: 46px; font-size: 17px; }
}
/* ---------- トップバー（PC=長文／スマモ=短文に切替） ---------- */
@media (max-width:880px){
.topbar-long { display:none !important; }
.topbar-short { display:inline !important; }
}
/* ---------- ヘッダー / グローバルナビ / ハンバーガー ---------- */
.hamburger { display:none; }
/* 狭めPC（1081〜1160px）：ナビ＋CTAが1行に収まるようヘッダー左右paddingを詰める */
@media (min-width:1081px) and (max-width:1160px){
.header-inner { padding-left:20px !important; padding-right:20px !important; }
.nav-desktop { gap:18px !important; }
}
@media (max-width:1080px){
.nav-desktop, .header-cta-desktop, .phone-desktop { display:none !important; }
.hamburger { display:inline-flex !important; }
.floating-cta { display:block !important; }
}
/* ---------- モバイルドロワー ---------- */
.drawer-root { visibility:hidden; opacity:0; pointer-events:none; overflow:hidden; transition:opacity .3s ease, visibility 0s linear .3s; }
.drawer-root.open { visibility:visible; opacity:1; pointer-events:auto; transition:opacity .3s ease; }
.drawer-panel { transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1); }
.drawer-root.open .drawer-panel { transform:translateX(0); }
/* ---------- 追従CTA ---------- */
.floating-cta { display:none; transform:translateY(170%); opacity:0; transition:transform .42s cubic-bezier(.34,1.08,.5,1), opacity .35s ease; pointer-events:none; }
.floating-cta.show { transform:none; opacity:1; pointer-events:auto; }
/* ---------- フッター（.ft-light：明るいフッター） ---------- */
.f-link { color:#475569; text-decoration:none; transition:color .15s ease; }
.f-link:hover { color:#B45309; }
.f-col-h { font:700 14.5px/1.5 'Noto Sans JP'; color:#0F2540; letter-spacing:0.04em; margin:0 0 16px; }
@media (max-width:880px){
/* 追従CTA分の下余白をフッター延長で確保 */
.ft-light { padding-bottom:40px !important; }
}
@media (max-width:880px){
/* フッターはPCと同じ左ぞろえに統一（ロゴ・説明・見出し・項目すべて左基準） */
.ft-light { padding-left:24px !important; padding-right:24px !important; }
.f-cols { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:26px 14px !important; }
.f-cols .f-link { font-size:13.5px !important; }
.ft-light p, .ft-light .f-col-h { text-align:left !important; }
.ft-light .f-col-h { margin-bottom:16px !important; }
.ft-light > div > div { justify-content:flex-start !important; }
.ft-light > div > div:first-child > div:first-child > div { justify-content:flex-start !important; }
/* リンク3列だけを次行へ折り返して全幅に均等配置 */
.ft-light .f-cols { justify-items:stretch !important; flex:1 1 100% !important; width:100% !important; }
.ft-light > div > div:first-child { row-gap:28px !important; column-gap:48px !important; }
.ft-light .f-cols > div > div { align-items:flex-start !important; gap:16px !important; }
}
@media (max-width:340px){
/* 極狭端末（〜340px）：フッター列の長いリンクの折り返しを防ぐ（後勝ちで880px時を上書き） */
footer.ft-light{ padding-left:16px !important; padding-right:16px !important; }
footer.ft-light .f-cols{ gap:22px 10px !important; }
footer.ft-light .f-cols .f-link{ font-size:12.5px !important; }
footer.ft-light .f-cols .f-col-h{ font-size:13px !important; }
}