@charset "UTF-8";
/* ==========================================================
   ヘッダー・電話/メールボタン・スマホ下部固定バー（2026-10-25）
   PC（/index.html）と SP（/sp/index.html）の両方から読み込む。
   参考：airconcleaning24.com の sd-logo / sd-fv__btn / sd-fixbtn
   色：電話 #DB342B（参考LPと同じ赤）、メール #FF821E（参考LPと同じオレンジ）、
       固定バーは参考LPの配色のまま、紺の部分だけ #EF6C00 に置き換え
   ========================================================== */
:root{--hd-red:#DB342B;--hd-or:#FF821E;--hd-or2:#EF6C00;--hd-ink:#333}

/* サイト名（画像ではなく文字で表示する。横に詰めたSVGは縦長に見えていた） */
.hd-logo{display:inline-block;font-family:"M PLUS 1p","Noto Sans JP",sans-serif;font-weight:900;color:var(--hd-ink);
  font-size:30px;line-height:1.2;letter-spacing:.02em;white-space:nowrap;vertical-align:middle}
.hd-logo--s{font-size:22px;letter-spacing:.01em}

/* ---------- PC：ファーストビューの左上 ---------- */
.fv-inner .logo{top:16px}

/* ---------- PC：固定ヘッダー ---------- */
.fixed-header-inner .logo-mark{width:auto;text-decoration:none}
.fixed-header-inner .tel-content .tel-group a.hd-telbtn{display:flex;align-items:center;gap:8px;height:52px;padding:0 22px 0 18px;border-radius:8px;
  background:var(--hd-red);color:#fff;font-family:"M PLUS 1p",Arial,sans-serif;font-size:32px;font-weight:800;letter-spacing:.02em;line-height:1;
  box-shadow:0 2px 0 #a8241d;transition:opacity .2s}
.hd-telbtn svg{flex:none;width:28px;height:28px}
.fixed-header-inner .tel-content .tel-txt{margin-top:6px}
.fixed-header-mail{border:0;box-shadow:none}
.hd-mailbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:260px;height:52px;border-radius:8px;
  background:var(--hd-or);color:#fff;font-size:16px;font-weight:700;letter-spacing:.02em;text-decoration:none;line-height:1;
  box-shadow:0 2px 0 #c95f0b;transition:opacity .2s}
.hd-mailbtn svg{flex:none;width:22px;height:22px}
.hd-telbtn:hover,.hd-mailbtn:hover{opacity:.85}

/* ---------- SP：ヘッダー（参考LPと同じ 40px 角のボタン） ---------- */
.header-wrap{height:60px;padding:10px;box-sizing:border-box;gap:8px}
.header-logo{min-width:0}
.header-logo .hd-logo{font-size:min(18px,4.7vw);letter-spacing:0}
.header-btn{flex:none}
.header-btn li{margin-left:8px}
.header-btn .hd-sqbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:40px;height:40px;border-radius:6px;
  color:#fff;font-size:9.5px;font-weight:700;line-height:1;text-decoration:none}
.header-btn .hd-sqbtn svg{width:20px;height:20px}
.header-btn .hd-sqbtn--tel{background:var(--hd-red)}
.header-btn .hd-sqbtn--mail{background:var(--hd-or)}

/* ---------- SP：下部固定バー（表示・非表示は既存のスクリプトのまま） ----------
   参考LP（airconcleaning24.com の .sd-fixbtn）と同じ配色。紺 #1A328A の部分だけを --hd-or2 に置き換えている。
   電話側の背景は白 #FFFFFF。電話番号の赤いグラデーションは参考LPの値のまま。
   メールの丸ボタンは #FF7900 に白い縁と白い文字（青は使わない） */
.btn-fixed{z-index:9990;padding-bottom:env(safe-area-inset-bottom);background:#fff;border-top:1px solid #e2e2e2}
.btn-fixed .fixed-content{display:flex;align-items:stretch;height:68px}
.hd-fix__tel,.hd-fix__mail{position:relative;display:block;flex:none;height:68px;overflow:hidden;text-decoration:none;line-height:1}
.hd-fix__tel{width:75%;background:#fff;color:var(--hd-or2)}
.hd-fix__tap{position:absolute;left:6px;top:5px;width:58px;height:58px;border-radius:50%;background:var(--hd-or2);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5px;font-size:8px;font-weight:900;text-align:center;white-space:nowrap}
.hd-fix__tap em{font-style:normal;font-size:10.5px}
.hd-fix__tap i{font-style:normal;font-size:9px}
.hd-fix__tap svg{width:12px;height:12px}
.hd-fix__tap::after{content:"";position:absolute;left:53px;top:18px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:8px solid var(--hd-or2);transform:rotate(-12deg)}
.hd-fix__num{position:absolute;left:72px;right:7px;top:9px;height:34px;border-radius:17px;display:flex;align-items:center;justify-content:center;gap:.3em;
  font-size:min(calc((75vw - 79px)*.099),26px);color:#fff;
  background:linear-gradient(180deg,#ff6a62 0%,#f44446 18%,#e23a47 42%,#d03147 58%,#c02748 76%,#ad184d 100%);
  box-shadow:0 2px 4px rgba(70,90,120,.38),inset 0 1px 1px rgba(255,255,255,.35)}
.hd-fix__num svg{flex:none;width:1.1em;height:1.1em}
.hd-fix__num b{font-family:"M PLUS 1p",Arial,sans-serif;font-size:1em;font-weight:800;letter-spacing:.035em;margin-right:-.035em;white-space:nowrap}
.hd-fix__sub{position:absolute;left:70px;right:6px;top:48px;font-size:11px;font-weight:900;text-align:center;white-space:nowrap;letter-spacing:.04em}
.hd-fix__mail{width:25%;background:var(--hd-or2);color:#fff}
.hd-fix__pill{position:absolute;left:4px;right:4px;top:10px;height:28px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:2px;
  font-size:9.5px;font-weight:900;letter-spacing:-.04em;white-space:nowrap;
  background:#FF7900;color:#fff;border:1.5px solid #fff;text-shadow:0 1px 1px rgba(150,60,0,.45);box-shadow:0 2px 3px rgba(0,0,0,.3)}
.hd-fix__pill svg{width:12px;height:12px}
.hd-fix__mail b{position:absolute;left:0;top:46px;width:100%;font-size:11px;font-weight:900;text-align:center;white-space:nowrap}
/* 固定バーで最下部の文字が隠れないよう、バーの高さ分だけ余白を足す */
body.hd-sp{padding-bottom:calc(68px + env(safe-area-inset-bottom))}