@charset "utf-8";
/* ============================================================
   Q-AUTO（service/qauto）
   本番テーマ lastcompass220713 のCSSより後に読み込むこと。
   画像は ../../images/restyle/ に配置。
   自動生成: build_dist.py — プレビューの適用順をそのまま保持。
   ============================================================ */

/* ---------- lcRestyle ---------- */
/* ============================================================
   Q-AUTO（集客改善）ページ個別の適応
   オリジナル配色を遵守（共通スキン不適用）。
   ここでは①白ヘッダー化 ②視認性の低い文字色の修正 のみ行う
   ============================================================ */

/* ---- ヘッダー：白（サイト確定の白ヘッダー言語） ---- */
body.qauto.service .header-wrap{
  background:rgba(255,255,255,.94) !important;
  backdrop-filter:blur(12px);
  border-bottom:1px solid #e6e9ee !important;
}
body.qauto.service .box-header-02 .header-nav a{ color:#1c2a3c !important; }
body.qauto.service .box-header-02 .header-nav a span{ color:#8a93a3 !important; }
body.qauto.service .box-header-02 .header-wrap .header-inner .header-nav ul.nav-inner > li > a::after{
  color:#8a93a3 !important;
}
body.qauto.service .box-header-02 .header-wrap .header-inner .header-nav ul.nav-inner > li > a:hover{
  color:#a8834a !important;
  box-shadow:inset 0 -2px 0 #B8945A;
}
body.qauto.service .box-header-02 .header-wrap .header-inner .header-nav ul.nav-inner > li > a:hover::after{
  color:rgba(168,131,74,.8) !important;
}
body.qauto.service .header-logo, body.qauto.service .header-logo a{ color:#1c2a3c !important; }
/* このページのロゴは白SVG（logo-v-w.svg）のため黒転して白ヘッダーで見えるように */
body.qauto.service .header-logo a span{
  filter:brightness(0) opacity(.85);
}
body.qauto.service .header-btn .btn-inner{
  border:1px solid rgba(184,148,90,.8) !important;
  color:#a8834a !important;
  background:#fff !important;
}
/* ドロップダウンは白パネル（テーマ標準）のまま */

/* ---- フォント：他のサービスページと統一
   （本文=Noto Sans JP、セクション見出し=Noto Serif JP） ---- */
body.qauto.service,
body.qauto.service p,
body.qauto.service li,
body.qauto.service dd,
body.qauto.service td,
body.qauto.service a{
  font-family:"Noto Sans JP","Inter",-apple-system,sans-serif;
}
body.qauto.service .worries_ttl,
body.qauto.service .logo_ttl,
body.qauto.service .partner_ttl,
body.qauto.service .qa_ttl,
body.qauto.service .seminar_ttl,
body.qauto.service .inquiry_ttl{
  font-family:"Noto Serif JP",serif !important;
}

/* ---- ① ヒーロータイトル（住宅会社特化型〜「Q-AUTO(クオート)」）：ゴシック ---- */
body.qauto.service .mainImg_ttl{
  font-family:"Noto Sans JP","Inter",sans-serif !important;
  font-weight:700 !important;
}

/* ---- ② 下部フォームの送信ボタン「資料を受け取る」：CVボタン（案1インスタグラデ）と統一 ---- */
body.qauto.service .btn-submit-qauto{
  background:none !important;
  box-shadow:none !important;
}
body.qauto.service .btn-submit-qauto .wpcf7-submit{
  background-image:url("https://lastcompass.co.jp/wp-content/themes/lastcompass220713/images/page/service/qauto/icon_arrow_bottom_white.png"), linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%) !important;
  background-position:calc(100% - 14px) 50%, center !important;
  background-size:14px, cover !important;
  background-repeat:no-repeat, no-repeat !important;
  background-color:transparent !important;
  color:#fff !important;
  border:0 !important;
  border-radius:25px !important;
  font-family:"Noto Sans JP",sans-serif !important;
  font-weight:700 !important;
  letter-spacing:.06em;   /* 無料で資料請求と同値(1.2px@20px) */
  padding:13px 46px !important;  /* 高さ55px=無料で資料請求と同じ */
  cursor:pointer;
  display:block;   /* ラッパーと密着させ、白リングのズレを防ぐ */
  box-shadow:0 4px 12px rgba(204,35,102,.18);
  transition:filter .25s, box-shadow .25s, transform .2s;
}
body.qauto.service .btn-submit-qauto .wpcf7-submit:hover{
  filter:brightness(1.12) saturate(1.15);
  transform:translateY(-2px);
  box-shadow:0 7px 18px rgba(204,35,102,.3);
}

/* 「無料で資料請求」と同じ白い内側リング（outlineで input 自身に描画） */
body.qauto.service .btn-submit-qauto{
  position:relative;
  display:inline-block;
  font-size:0;
  line-height:0;
  margin-top:28px;   /* フォームとの間隔 */
}
body.qauto.service .btn-submit-qauto .wpcf7-submit{
  outline:2px solid #fff !important;
  outline-offset:-5px !important;
}

/* CF7のスピナーがラッパー内で高さ24pxを占有し白リングがズレるため、
   絶対配置に逃がす（送信時の表示機能は維持） */
body.qauto.service .btn-submit-qauto .wpcf7-spinner{
  position:absolute;
  left:50%;
  bottom:-30px;
  transform:translateX(-50%);
  margin:0;
}

/* ---- フッター：日本語を游ゴシック→Noto Sans JPへ（英字はOpen Sans維持） ---- */
body.qauto.service .box-footer-01,
body.qauto.service .box-footer-01 a,
body.qauto.service .box-footer-01 p,
body.qauto.service .box-footer-01 li,
body.qauto.service .box-footer-01 dt,
body.qauto.service .box-footer-01 dd,
body.qauto.service .box-footer-01 address{
  font-family:"Open Sans","Noto Sans JP",sans-serif !important;
}

/* ============================================================
   左右のガターを他ページに合わせる
   PC：SEMINAR節が左73px（他ページ133px）だった
   iPad：901-1100px にガター指定が無く、本文が画面端まで寄っていた
   携帯：基準ガターが15px（他ページ25〜40px）だった
   ============================================================ */
@media screen and (min-width:1101px){
  body.qauto.service main .seminar_blc,
  body.qauto.service main .qa_blc{
    padding-left:133px !important;
    padding-right:133px !important;
    box-sizing:border-box !important;
  }
}
@media screen and (min-width:901px) and (max-width:1100px){
  body.qauto.service main .about_blc,
  body.qauto.service main .service_head,
  body.qauto.service main .seminar_blc,
  body.qauto.service main .qa_blc,
  body.qauto.service main .case_blc_in{
    padding-left:40px !important;
    padding-right:40px !important;
    box-sizing:border-box !important;
  }
}
@media screen and (max-width:900px){
  body.qauto.service main .about_blc,
  body.qauto.service main .service_head,
  body.qauto.service main .seminar_blc,
  body.qauto.service main .qa_blc{
    padding-left:20px !important;
    padding-right:20px !important;
    box-sizing:border-box !important;
  }
}
/* 商品タグが画面外へはみ出すのを防ぐ */
body.qauto.service main .tag-inner{
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* ---- iPad：資料請求ブロックが右に寄る ----
   テーマは padding-left:150px / padding-right:0 のため、
   幅いっぱいになるiPad帯では中身が右に押し出されていた。 */
@media screen and (min-width:901px) and (max-width:1100px){
  body.qauto.service main .inquiry_blc_in{
    padding-left:130px !important;
    padding-right:60px !important;
    box-sizing:border-box !important;
  }
}

/* ============================================================
   サービスページ共通フッター（グレー）
   背景 #F2F2F2 に統一し、フォントは "Open Sans","Noto Sans JP"。
   ============================================================ */
body.service:not(.recruit) .box-footer-01:not(.recruit){
  background:#F2F2F2 !important;
}
/* 内側wrapの二重塗りを無効化 */
body.service:not(.recruit) .box-footer-01:not(.recruit) .footer-wrap{
  background:transparent !important;
}
body.service:not(.recruit) .box-footer-01:not(.recruit) a,
body.service:not(.recruit) .box-footer-01:not(.recruit) p,
body.service:not(.recruit) .box-footer-01:not(.recruit) li,
body.service:not(.recruit) .box-footer-01:not(.recruit) dt,
body.service:not(.recruit) .box-footer-01:not(.recruit) dd,
body.service:not(.recruit) .box-footer-01:not(.recruit) address{
  color:#1C222F !important;
}
body.service:not(.recruit) .box-footer-01:not(.recruit) a:hover{ color:#a8834a !important; }

/* メニュー横の商品名（::after）は金 */
body.service:not(.recruit) .box-footer-01:not(.recruit) a::after,
body.service:not(.recruit) footer:not(.recruit) .footer-sitemap a::after{
  color:#a8834a !important;
}
body.service:not(.recruit) .box-footer-01:not(.recruit) .footer-wrap .footer-info::before{
  background:rgba(28,34,47,.14) !important;
}
body.service:not(.recruit) .box-footer-01:not(.recruit) .footer-copyright{
  background:#E9E9E9 !important;
  color:#6B7280 !important;
}

/* 中央ロゴは原色（反転しない） */
body.service:not(.recruit) footer:not(.recruit) .unit-logo-03,
body.service:not(.recruit) .box-footer-01:not(.recruit) .unit-logo-03,
body.service:not(.recruit) .box-footer-01:not(.recruit) .footer-logo{
  filter:none !important;
  opacity:1 !important;
}

/* ---- フォント統一 ---- */
body.service:not(.recruit) .box-footer-01:not(.recruit),
body.service:not(.recruit) .box-footer-01 a,
body.service:not(.recruit) .box-footer-01 p,
body.service:not(.recruit) .box-footer-01 li,
body.service:not(.recruit) .box-footer-01 dt,
body.service:not(.recruit) .box-footer-01 dd,
body.service:not(.recruit) .box-footer-01 address,
body.service:not(.recruit) .box-footer-01 .footer-copyright{
  font-family:"Open Sans","Noto Sans JP",sans-serif !important;
}

/* ============================================================
   サービスページ共通 — 金の正本化
   テーマ側に残る旧ゴールド #D2C185 を正本の4値に寄せる。

   正本パレット
     #ECD8A4  ペール（濃色背景のグラデ上端）
     #D8B877  ライト（濃色背景の文字）
     #B8945A  スタンダード（罫・枠・面）
     #A8834A  ダーク（明色背景の文字）
   ============================================================ */

/* 問い合わせフォームの表の罫線 */
body.service:not(.recruit) .box-form-01 table td,
body.service:not(.recruit) .box-form-01 table th,
body.service:not(.recruit) .box-table-08 table td,
body.service:not(.recruit) .box-table-08 table th,
body.service:not(.recruit) table th.required,
body.service:not(.recruit) table th.required.nowrap{
  /* テーマ既定の 2px ベタ金は重いので、1pxの淡い金に */
  border-bottom:1px solid rgba(184,148,90,.42) !important;
}

/* 「WEB」などのラベルバッジ */
body.service:not(.recruit) .under-simplenote-sec04 li > span{
  background:#B8945A !important;
  color:#ffffff !important;
}

/* ============================================================
   SEMINAR・ブログ一覧カード（.box-article-01）の左右余白
   携帯で本文が画面端から10px、日付(.time-inner)が右へはみ出していた。
   ============================================================ */
@media screen and (max-width:900px){
  body.service:not(.recruit) .box-article-01 > li{
    padding-left:6px !important;
    padding-right:6px !important;
    box-sizing:border-box !important;
  }
  body.service:not(.recruit) .box-article-01 .time-inner{
    display:inline-block !important;
    max-width:100% !important;
    white-space:normal !important;
    box-sizing:border-box !important;
  }
}

/* CASE一覧（.box-article-04）：親wrapperの余白が10pxしかなく本文が端に寄る */
@media screen and (max-width:1100px){
  body.service:not(.recruit) .box-article-04{
    padding-left:10px !important;
    padding-right:10px !important;
    box-sizing:border-box !important;
  }
}

/* ============================================================
   iPad帯のガター穴を塞ぐ
   テーマは .blc_in / .wrapper に @media(max-width:1000px) でしか
   左右paddingを与えておらず、1001〜1100pxでは max-width:1000px の
   まま余白が5pxしか残らない。
   ※ReNOMAは個別に調整済みのため除外（比較表と白ボックスの幅一致を保つ）
   ============================================================ */
@media screen and (min-width:1001px) and (max-width:1100px){
  body.service:not(.recruit):not(.renoma):not(.simplenote) .blc_in,
  body.service:not(.recruit):not(.renoma):not(.simplenote) .wrapper{
    padding-left:40px !important;
    padding-right:40px !important;
    box-sizing:border-box !important;
  }
}

/* ---------- qacvbar ---------- */
@media screen and (max-width:768px){
/* ============================================================
   フッターCVバー 案3 — フローティングゴールド
   画面下に浮かせた独立ボタン（左右に余白＋影）。
   バー型よりアプリ的で、コンテンツの視認を妨げない。
   ※本番反映時はリンク先(tel:)を資料ページURLへ変更が必要。採用LP(.recruit)のENTRYバーは対象外
   ============================================================ */
.unit-fix-07:not(.recruit){
  left:14px !important;
  right:14px !important;
  bottom:14px !important;
  width:auto !important;
}
/* 下層ページはバー内に複数リンク（セミナー/資料請求/電話）があるため、
   資料請求(fix-inquery)だけを残してCTA化する。TOPは電話のみ→そのまま置換 */
.unit-fix-07:has(.fix-inquery) .fix-inner:not(.fix-inquery){ display:none !important; }
.unit-fix-07:not(.recruit) .fix-inner .fix-main,
.unit-fix-07:not(.recruit) .fix-inner .fix-sub{ display:none !important; }
.unit-fix-07:not(.recruit) .fix-inner{
  background:linear-gradient(135deg,#ecd8a4,#d8b877 45%,#b8945a) !important;
  display:flex !important;
  align-items:center; justify-content:center; gap:9px;
  padding:15px 10px !important;
  border-radius:2px !important;
  box-shadow:0 5px 14px rgba(5,12,25,.28), inset 0 0 0 1px rgba(255,255,255,.35);
}
.unit-fix-07:not(.recruit) .fix-inner::before{
  content:"期間限定資料を確認する";
  font-family:"Noto Sans JP",sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:.12em;
  color:#16233b;
  line-height:1;
}
.unit-fix-07:not(.recruit) .fix-inner::after{
  content:"→";
  font-weight:700;
  color:#16233b;
  line-height:1;
}

}

/* ---------- qacv1 ---------- */
/* ============================================================
   CVボタン 案1 — 定番インスタグラデーション
   Instagramの公式風5色グラデ。ホバーで明るく浮き上がる
   ============================================================ */
body.qauto.service .qa_inquiry_btn a{
  background-image:url("https://lastcompass.co.jp/wp-content/themes/lastcompass220713/images/page/service/qauto/icon_arrow_bottom_white.png"), linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%) !important;
  background-position:calc(100% - 14px) 50%, center !important;
  background-size:14px, cover !important;
  background-repeat:no-repeat, no-repeat !important;
  color:#fff !important;
  box-shadow:0 4px 12px rgba(204,35,102,.18);
  transition:filter .25s, box-shadow .25s, transform .2s;
}
body.qauto.service .qa_inquiry_btn a:hover{
  filter:brightness(1.12) saturate(1.15);
  transform:translateY(-2px);
  box-shadow:0 7px 18px rgba(204,35,102,.3);
}

/* ---------- inline ---------- */
html{background:#fff; color-scheme:light;} .grecaptcha-badge,[class*="grecaptcha"]{display:none !important;}


/* ============================================================
   英字セクション見出し（unit-title-08）を行書系からゴシックへ統一
   ページ上部の「SERVICE MENU / サービスメニュー」等も対象
   ============================================================ */
h1.unit-title-08, h2.unit-title-08, p.unit-title-08,
h1.unit-title-08 span, h2.unit-title-08 span, p.unit-title-08 span,
h1.unit-title-08::after, h2.unit-title-08::after, p.unit-title-08::after,
.unit-title-08, .unit-title-08 span, .unit-title-08::after{
  font-family:"Open Sans","Noto Sans JP",sans-serif !important;
}


/* ---- 見出しの太さを統一（SERVICE MENU=500 / SUB MENU=600 と不揃いだった） ---- */
h1.unit-title-08, h2.unit-title-08, p.unit-title-08,
h1.unit-title-08 span, h2.unit-title-08 span, p.unit-title-08 span{
  font-weight:600 !important;
}

/* ---- 導入カードの見出し（unit-title-13）も行書体→ゴシックに ---- */
h2.unit-title-13, .unit-title-13, .unit-title-13 span{
  font-family:"Open Sans","Noto Sans JP",sans-serif !important;
  font-weight:700 !important;
}


/* 携帯: 下部CVボタンの幅をTOPの6ボタングリッド(左右10px)と統一 */
@media screen and (max-width:768px){
  .unit-fix-07:not(.recruit){ left:10px !important; right:10px !important; }
}