/* ==========================================================================
   Cool Lab — Responsive / SP対応 共通スタイル
   - SP対応 / 2カラム→1カラム
   - スクロール時: Gナビ非表示＋ハンバーガーメニュー表示
   - 右下: 固定問い合わせボックス（電話番号付き）
   ========================================================================== */

:root{
  --cl-blue:#1B9BC4;
  --cl-dark:#0A3D55;
  --cl-dark2:#0D5070;
  --cl-org:#F47D20;
  --cl-org2:#F5922A;
}

/* ========== ベース：横スクロール禁止 ========== */
html,body{max-width:100%;overflow-x:hidden}

/* ==========================================================================
   1. ハンバーガーボタン（右上固定）
   ========================================================================== */
.cl-hamb{
  position:fixed;top:16px;right:16px;
  width:44px;height:44px;
  background:var(--cl-dark);
  border:none;border-radius:8px;
  cursor:pointer;z-index:2000;
  display:none;align-items:center;justify-content:center;
  transition:transform .25s,background .25s,opacity .3s;
  padding:0;
}
.cl-hamb:hover{background:var(--cl-org);transform:scale(1.05)}
.cl-hamb-bars{position:relative;width:20px;height:14px;display:block}
.cl-hamb-bars::before,
.cl-hamb-bars::after,
.cl-hamb-bars i{
  content:'';position:absolute;left:0;
  width:100%;height:2px;background:#fff;
  transition:transform .3s,top .3s,opacity .2s;
  border-radius:2px;
}
.cl-hamb-bars::before{top:0}
.cl-hamb-bars i{top:6px;display:block}
.cl-hamb-bars::after{top:12px}
.cl-hamb.is-open .cl-hamb-bars::before{top:6px;transform:rotate(45deg)}
.cl-hamb.is-open .cl-hamb-bars::after{top:6px;transform:rotate(-45deg)}
.cl-hamb.is-open .cl-hamb-bars i{opacity:0}

/* スクロール時 もしくは SPでは表示 */
body.cl-scrolled .cl-hamb{display:flex}
@media (max-width:980px){
  .cl-hamb{display:flex}
}

/* ========== 左上 固定ロゴ ========== */
.cl-fixlogo{
  position:fixed;top:16px;left:16px;
  z-index:2000;
  display:none;align-items:center;justify-content:center;
  width:46px;height:46px;
  background:transparent;
  padding:0;
  transition:opacity .3s,transform .25s;
  text-decoration:none;
}
.cl-fixlogo:hover{transform:scale(1.05)}
.cl-fixlogo img{width:100%;height:100%;object-fit:contain;display:block}

body.cl-scrolled .cl-fixlogo{display:flex}
@media (max-width:980px){
  .cl-fixlogo{display:flex}
  /* TOP (home) のみファーストビューでは非表示、スクロール後に表示 */
  body.home .cl-fixlogo{display:none}
  body.home.cl-scrolled .cl-fixlogo{display:flex}
}
@media (max-width:480px){
  .cl-fixlogo{width:38px;height:38px;top:12px;left:12px;padding:0}
}
/* メニュー展開時は左上アイコンを隠す（PC/SP共通） */
body.cl-menu-open .cl-fixlogo{display:none !important}

/* スクロール時はオリジナルGナビを非表示（既存 .scrolled の表示を上書き） */
body.cl-scrolled .gnav,
body.cl-scrolled .gnav.scrolled{
  transform:translateY(-100%) !important;
  opacity:0;pointer-events:none;
  transition:transform .35s,opacity .25s;
}
/* SPでは常に元Gナビを非表示 */
@media (max-width:980px){
  .gnav,.gnav.scrolled{
    transform:translateY(-100%) !important;
    opacity:0;pointer-events:none;
  }
}

/* ==========================================================================
   2. ハンバーガーメニュー パネル
   ========================================================================== */
.cl-mask{
  position:fixed;inset:0;
  background:rgba(10,61,85,.45);
  backdrop-filter:blur(6px);
  z-index:1998;
  opacity:0;pointer-events:none;
  transition:opacity .35s;
}
.cl-mask.is-open{opacity:1;pointer-events:auto}

.cl-panel{
  position:fixed;top:0;right:0;
  width:min(360px,88vw);height:100vh;
  background:#fff;z-index:1999;
  transform:translateX(100%);
  transition:transform .42s cubic-bezier(.22,1,.36,1);
  padding:80px 24px 32px;
  overflow-y:auto;
  border-left:1px solid #eee;
  font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
}
.cl-panel.is-open{transform:translateX(0)}
.cl-panel-logo{
  position:absolute;top:18px;left:20px;z-index:2;
  display:inline-flex;align-items:center;
}
.cl-panel-logo img{height:28px !important;width:auto !important;display:block}

/* サイト内検索（パネル上部） */
.cl-search{
  display:flex;align-items:center;gap:6px;
  background:var(--cl-pale,#F6FAFB);
  border:1px solid rgba(10,61,85,.12);
  border-radius:8px;
  padding:4px 6px 4px 12px;
  margin-bottom:16px;
}
.cl-search:focus-within{border-color:var(--cl-org);box-shadow:0 0 0 3px rgba(244,125,32,.18)}
.cl-search input[type="search"]{
  flex:1;border:none;background:transparent;outline:none;
  font-size:13px;color:var(--cl-dark);font-family:inherit;
  padding:6px 0;min-width:0;
  -webkit-appearance:none;appearance:none;
}
.cl-search input[type="search"]::placeholder{color:#aaa}
.cl-search input[type="search"]::-webkit-search-cancel-button{appearance:none}
.cl-search button{
  background:var(--cl-dark);color:#fff;border:none;
  width:30px;height:30px;border-radius:6px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s;
  flex-shrink:0;
}
.cl-search button:hover{background:var(--cl-org)}
.cl-panel ul{list-style:none;padding:0;margin:0 0 20px}
.cl-panel li{border-bottom:1px solid #f0f0f0}
.cl-panel li:last-child{border-bottom:none}
.cl-panel li a{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 4px;font-weight:700;font-size:13px;line-height:1.3;
  color:var(--cl-dark);text-decoration:none;
  transition:color .2s,padding .2s;
}
.cl-panel li a::after{
  content:'\203A';color:#bbb;font-size:18px;
  transition:transform .2s,color .2s;
}
.cl-panel li a:hover{color:var(--cl-org);padding-left:8px}
.cl-panel li a:hover::after{color:var(--cl-org);transform:translateX(4px)}
.cl-panel li a .cl-ext-ico{
  display:inline-flex;align-items:center;margin-left:auto;margin-right:8px;color:#999;
}
.cl-panel li a .cl-ext-ico svg{display:block}

.cl-panel-tel{
  display:flex;flex-direction:column;align-items:center;
  padding:12px;border:2px solid var(--cl-dark);
  color:var(--cl-dark);text-align:center;border-radius:6px;
  font-weight:700;text-decoration:none;margin-bottom:8px;
  transition:background .25s,color .25s;
}
.cl-panel-tel:hover{background:var(--cl-dark);color:#fff}
.cl-panel-tel-num{font-family:'Barlow Condensed',sans-serif;font-size:20px;letter-spacing:.04em;line-height:1}
.cl-panel-tel-note{font-size:10px;color:#999;margin-top:3px}
.cl-panel-tel:hover .cl-panel-tel-note{color:rgba(255,255,255,.7)}
.cl-panel-cta{
  display:block;padding:12px;background:var(--cl-org);
  color:#fff;text-align:center;border-radius:6px;
  font-weight:700;font-size:13px;text-decoration:none;
  transition:background .25s;
}
.cl-panel-cta:hover{background:var(--cl-dark2)}

/* ==========================================================================
   3. 右下 固定 問い合わせボックス
   ========================================================================== */
.cl-fixcontact{
  position:fixed;right:16px;bottom:16px;
  z-index:1500;
  background:#fff;border-radius:10px;
  padding:14px 16px;
  width:248px;
  display:flex;flex-direction:column;gap:8px;
  border:1px solid rgba(10,61,85,.12);
  font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .3s;
}
.cl-fixcontact.is-hidden{transform:translateY(140%);opacity:0;pointer-events:none}
.cl-fixcontact-close{
  position:absolute;top:-10px;right:-10px;z-index:3;
  width:26px;height:26px;border-radius:50%;
  background:var(--cl-dark,#0A3D55);color:#fff;
  border:2px solid #fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1;font-weight:700;
  box-shadow:0 2px 8px rgba(10,61,85,.18);
  transition:background .2s,transform .2s;
  padding:0;
}
.cl-fixcontact-close:hover{background:var(--cl-org,#F47D20);transform:rotate(90deg)}
.cl-fixcontact-label{
  font-size:10px;letter-spacing:.18em;
  color:var(--cl-dark);font-weight:700;
  text-align:center;
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
}
.cl-fixcontact-tel{
  display:flex;flex-direction:column;align-items:center;
  gap:2px;text-decoration:none;
  padding:8px 0;
  border-bottom:1px solid rgba(10,61,85,.08);
  color:var(--cl-dark);
  transition:color .2s;
}
.cl-fixcontact-tel:hover{color:var(--cl-org)}
.cl-fixcontact-tel-num{
  font-family:'Barlow Condensed',sans-serif;
  font-size:22px;font-weight:700;letter-spacing:.04em;line-height:1.1;
}
.cl-fixcontact-tel-note{font-size:10px;color:#999;font-weight:500}
/* ブルー↔オレンジ流動グラデーション（共通） */
@keyframes cl-grad-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.cl-fixcontact-cta{
  display:block;background:var(--cl-org);color:#fff;
  text-align:center;padding:10px;border-radius:8px;
  font-size:13px;font-weight:700;text-decoration:none;
  transition:background .25s,transform .2s;
}
.cl-fixcontact-cta:hover{background:var(--cl-dark2);transform:translateY(-1px)}

/* 試算バナー（カードの最上段） */
.cl-fixcontact-sim{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:#fff;
  background:linear-gradient(135deg,#0A3D55 0%,#0D5070 32%,#1B6B8A 58%,#1B9BC4 85%,#5BB8D4 100%);
  padding:10px 12px;border-radius:8px;
  margin:2px 0 6px;
  transition:transform .25s;
  position:relative;overflow:hidden;
}
.cl-fixcontact-sim:hover{transform:translateY(-1px)}
.cl-fixcontact-sim-eyebrow{
  font-family:'Barlow Condensed',sans-serif;
  font-size:9px;font-weight:800;letter-spacing:.22em;
  color:rgba(255,255,255,.85);
  position:absolute;top:6px;left:12px;
}
.cl-fixcontact-sim-title{
  flex:1;font-size:12px;font-weight:800;line-height:1.4;
  padding-top:12px;letter-spacing:.02em;
}
.cl-fixcontact-sim-arrow{
  display:inline-flex;align-items:center;justify-content:center;
  align-self:flex-end;margin-bottom:2px;color:#fff;
  transition:transform .3s;
}
.cl-fixcontact-sim-arrow svg{display:block}
.cl-fixcontact-sim:hover .cl-fixcontact-sim-arrow{transform:translateY(-2px)}

@media (max-width:720px){
  .cl-fixcontact{
    right:12px;bottom:12px;
    width:200px;padding:12px 14px;
  }
  .cl-fixcontact-tel-num{font-size:18px}
  .cl-fixcontact-cta{padding:9px;font-size:12px}
}

/* ----- SP: 右下バナーを横2カラム表示（左:SIM／右:電話+お問い合わせ） ----- */
@media (max-width:640px){
  .cl-fixcontact{
    left:12px !important;right:12px !important;bottom:12px !important;
    width:auto !important;max-width:none !important;
    display:grid !important;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    column-gap:10px;row-gap:6px;
    padding:8px 10px !important;
    align-items:center;
  }
  .cl-fixcontact-sim{
    grid-column:1;grid-row:1 / span 2;
    margin:0;padding:10px 12px;
    display:flex;flex-direction:column;justify-content:center;
    align-items:flex-start;gap:3px;height:100%;
  }
  .cl-fixcontact-sim-eyebrow{
    position:static;top:auto;left:auto;
    font-size:9px;letter-spacing:.18em;
  }
  .cl-fixcontact-sim-title{
    padding-top:0;font-size:11px;line-height:1.4;
  }
  /* 矢印を SP でもコンパクト表示（グラフアイコン） */
  .cl-fixcontact-sim-arrow{display:inline-flex;position:absolute;right:6px;bottom:6px;color:#fff;opacity:.9}
  .cl-fixcontact-sim-arrow svg{width:20px;height:20px}
  /* CONTACT ラベルは SP では非表示 */
  .cl-fixcontact-label{display:none}
  .cl-fixcontact-tel{
    grid-column:2;grid-row:1;
    border-bottom:none;padding:0;gap:3px;
    align-items:center;
  }
  .cl-fixcontact-tel-num{font-size:24px;line-height:1.05;letter-spacing:.02em;font-weight:600}
  .cl-fixcontact-tel-note{font-size:8px;margin-top:2px;letter-spacing:-.02em;line-height:1;color:#888}
  .cl-fixcontact-cta{
    grid-column:2;grid-row:2;
    padding:7px;font-size:11px;
  }
}

/* ==========================================================================
   4. SP共通レイアウト：2カラム→1カラム（カルーセル除く）
   ========================================================================== */
@media (max-width:768px){

  /* gnav由来のCTA/TELエリアを完全に隠す */
  .gnav-links,.gnav-contact,.gnav-cta-btn,.gnav-tel{display:none !important}

  /* 共通グリッド（既存ページに存在するクラス名を一括で1カラム化） */
  .story-grid,.stats-grid,.feature-grid,.know-grid,.vip-grid,
  .col-grid,.strength-grid,.equip-grid,
  .prod-grid-2,.prod-grid-3,.prod-grid-4,
  .news-grid,.column-grid,
  .service-grid,.product-grid{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }
  /* footer-cta: 2カラム維持 (アイコン上+テキスト下) */
  .footer-cta{grid-template-columns:1fr 1fr !important;gap:0 !important}
  /* 個別: 2カラム維持 */
  .footer-main{
    grid-template-columns:1fr 1fr !important;
    gap:28px 20px !important;
  }
  /* .solutions-grid は main.css の SP ルール (横カルーセル化) を優先 */

  /* 汎用 grid-cols-X が出現したら1カラム化 */
  [class*="cols-2"],[class*="cols-3"],[class*="cols-4"],
  [class*="grid-2"],[class*="grid-3"],[class*="grid-4"]{
    grid-template-columns:1fr !important;
  }

  /* セクションpaddingを抑える */
  section{padding-left:20px !important;padding-right:20px !important}
  .page-hero{padding-left:20px !important;padding-right:20px !important}
  .page-hero h1{font-size:24px !important}

  /* hero ボタン群を縦積み */
  .hero-message-buttons,.btn-row,.cta-buttons{
    flex-direction:column !important;align-items:stretch !important;
  }
  .hero-message-buttons .btn,.btn-row .btn{width:100%;justify-content:center}

  /* hero高さ調整 + position:fixed解除（SP時、フッター下にはみ出すバグ対策） */
  .hero{
    position:relative !important;
    height:67vh !important;min-height:380px !important;
    z-index:auto !important;
  }
  .hero-spacer{display:none !important}
  /* hero-logo: SP で global img!important により小さくなる問題を解消 */
  .hero-logo{width:54vw !important;max-width:290px !important;height:auto !important;top:90px !important;z-index:15 !important;filter:drop-shadow(0 2px 12px rgba(255,255,255,.6))}

  /* テキストサイズ調整 */
  .hero-message-title{font-size:22px !important;line-height:1.5 !important}
  .hero-message{padding:48px 20px !important}
  .hero-message-desc{font-size:14px !important;line-height:1.8 !important}
  .hero-message-lead{display:block !important;width:fit-content !important;max-width:calc(100% - 24px) !important;background:#fff !important;color:var(--dark) !important;font-size:11px !important;font-weight:700 !important;padding:4px 12px !important;border-radius:8px !important;line-height:1.55 !important;margin:0 auto 12px !important;box-shadow:none !important;text-align:center !important}
  .hero-message-lead .sp-br{display:inline !important}

  /* カルーセルは元のJS制御（transform）を尊重 — overflowを上書きしない */

  /* テーブルは横スクロール */
  table{display:block;overflow-x:auto;white-space:nowrap}

  /* 画像/iframeはレスポンシブ */
  img,iframe,video{max-width:100% !important;height:auto !important}

  /* 末尾の白い空白を出さないため body padding-bottom は付けない */
}

@media (max-width:480px){
  .cl-hamb{width:40px;height:40px;top:12px;right:12px}
  .cl-hamb-bars{width:18px;height:12px}
  .cl-hamb-bars i{top:5px}
  .cl-hamb-bars::after{top:10px}
  .cl-hamb.is-open .cl-hamb-bars::before{top:5px}
  .cl-hamb.is-open .cl-hamb-bars::after{top:5px}
}

/* ハンバーガー展開中はスクロールロック */
body.cl-menu-open{overflow:hidden}

/* ==========================================================================
   「温度をデザインし、未来を創る」を一回り小さく
   - オープニングオーバーレイ表示
   - スクロール直後のグラデーション帯（hero-message-title）
   ========================================================================== */
.opening-overlay .opening-msg{
  font-size:clamp(19px,2.8vw,30px) !important;
  font-weight:800 !important;
  letter-spacing:.06em !important;
  line-height:1.5 !important;
}
.hero-message-title{
  font-size:clamp(22px,3vw,34px) !important;
  letter-spacing:.06em !important;
  line-height:1.55 !important;
}

/* ==========================================================================
   フッター視認性 / 重複削除
   ========================================================================== */
/* 重複している bottom 部の legal リンクを非表示（colsの中に同じものがあるため） */
.footer-legal{display:none !important}

/* リンク文字色を視認性高めに */
.footer-col ul li a{color:rgba(255,255,255,.78) !important}
.footer-col ul li a:hover{color:#fff !important}
.footer-col h3,.footer-col h4,.footer-col-title{color:#F9C898 !important;font-size:14px;font-weight:700;margin-bottom:12px;letter-spacing:.04em}
.footer-copy{color:rgba(255,255,255,.55) !important}
.footer-cta-desc{color:rgba(255,255,255,.65) !important}

/* PC用 フッターロゴ拡大（元36px→44px） */
@media (min-width:769px){
  .footer-brand img,.footer-logo img{height:44px !important}
}

/* ハンバーガーと同一項目に統一したフッターメニュー */
.footer-main:has(.cl-footer-menu){
  grid-template-columns:1fr 2fr !important;
}
.cl-footer-menu ul{
  column-count:2;column-gap:32px;
}
.cl-footer-menu li{break-inside:avoid;margin-bottom:8px}
@media (max-width:768px){
  .footer-main:has(.cl-footer-menu){
    grid-template-columns:1fr !important;
  }
  .cl-footer-menu ul{column-count:1}
}

/* ==========================================================================
   6. SP版 見出し・ヒーロー調整
   ========================================================================== */
@media (max-width:768px){

  /* ----- ヒーローロゴ：横中央＋やや上に (横ロゴ logo.svg 683×147) ----- */
  .hero-logo{
    width:54vw !important;
    max-width:290px !important;
    height:auto !important;
    top:90px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    z-index:15 !important;
    filter:drop-shadow(0 2px 12px rgba(255,255,255,.6));
  }

  /* ----- ヒーロー大型タイトルを2行に収める ----- */
  .hero-title{
    font-size:clamp(32px,9vw,56px) !important;
    line-height:1.05 !important;
    letter-spacing:0 !important;
    white-space:normal !important;
  }
  .hero-title br{display:inline}
  .hero-eyebrow{
    font-size:11px !important;
    margin-bottom:12px !important;
  }

  /* ----- ヒーローメッセージ ----- */
  .hero-message-title{font-size:18px !important;line-height:1.55 !important;letter-spacing:.04em !important}
  .hero-message-desc{font-size:13px !important;line-height:1.8 !important;margin-bottom:24px !important}
  .hero-message{padding:40px 20px !important}

  /* ----- 見出し全般を縮小 ----- */
  h1{font-size:22px !important;line-height:1.4 !important}
  h2{font-size:18px !important;line-height:1.5 !important}
  h3{font-size:15px !important;line-height:1.5 !important}
  .page-hero h1{font-size:20px !important;letter-spacing:.02em !important}
  .page-hero{padding:120px 20px 48px !important}
  .page-hero-desc{font-size:12px !important}
  .sec-label,.sec-label-w,.section-label,.eyebrow{font-size:10px !important;letter-spacing:.2em !important}

  /* セクションタイトル系（ページ独自） */
  .section-title,.sec-title,
  [class*="-section-title"]{
    font-size:18px !important;line-height:1.5 !important;
  }

  /* カード内タイトル */
  .card-title,[class*="-card-title"]{font-size:14px !important}
  .card-desc,[class*="-card-desc"]{font-size:12px !important;line-height:1.7 !important}

  /* セクション余白圧縮 */
  section,.section{padding-top:48px !important;padding-bottom:48px !important}

  /* ----- フッターロゴ ----- */
  .footer-brand img,.footer-logo img{height:32px !important}
  .footer-main{padding:40px 20px !important;gap:24px !important}
  .footer-bottom{padding:20px !important;font-size:11px !important}
  .footer-cta-title{font-size:16px !important}
  .footer-cta-label{font-size:10px !important}
  .footer-cta-desc{font-size:11px !important}
  .footer-cta-item{padding:24px 20px !important}
}

@media (max-width:480px){
  .hero-title{font-size:clamp(28px,8.5vw,44px) !important}
  .hero-message-title{font-size:16px !important}
  .page-hero h1{font-size:18px !important}
  h1{font-size:20px !important}
  h2{font-size:16px !important}
  .footer-brand img,.footer-logo img{height:28px !important}

  /* ----- Mobile S：余白圧縮 ----- */
  section,.section{padding-top:36px !important;padding-bottom:36px !important;padding-left:16px !important;padding-right:16px !important}
  .page-hero{padding:96px 16px 36px !important}
  .footer-main{padding:32px 16px !important;gap:20px !important}
  .footer-bottom{padding:16px !important}

  /* ----- Mobile S：固定問い合わせさらに縮小（横2カラムは維持） ----- */
  .cl-fixcontact{left:8px !important;right:8px !important;bottom:8px !important;width:auto !important;padding:8px 10px !important;border-radius:8px}
  .cl-fixcontact-sim{padding:12px 10px}
  .cl-fixcontact-sim-title{font-size:10px}
  .cl-fixcontact-tel-num{font-size:15px}
  .cl-fixcontact-cta{padding:7px;font-size:10px}
}

/* ==========================================================================
   6.5 アクセシビリティ：キーボードフォーカス可視化（共通）
   - マウス操作では出さず、Tabキー等のキーボード操作時のみリング表示
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--cl-org,#F47D20);
  outline-offset:2px;
  border-radius:4px;
}
/* form-input側は既存のbox-shadowリングを尊重 */
.form-input:focus-visible{outline:none}

/* ==========================================================================
   6.6 Contact Form 7 用スタイル（WP側でCF7プラグインを有効化したとき適用）
   - CF7のラッパー/エラー/スピナー/同意/Honeypotを既存デザインに馴染ませる
   ========================================================================== */
.wpcf7 form .wpcf7-response-output{
  border-radius:8px;padding:12px 16px;margin-top:16px;font-size:13px;
  border:1px solid transparent;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output{
  border-color:#E83A1F;background:#FFF2EF;color:#A52600;
}
.wpcf7 form.sent .wpcf7-response-output{
  border-color:#18A87A;background:#E9F8F1;color:#0F6E4F;
}
.wpcf7-not-valid-tip{
  color:#E83A1F;font-size:12px;margin-top:6px;display:block;
}
.wpcf7 .wpcf7-not-valid{
  border-color:#E83A1F !important;
  box-shadow:0 0 0 3px rgba(232,58,31,.12) !important;
}
.wpcf7-spinner{vertical-align:middle;margin-left:10px}
/* Honeypot field 完全非表示 */
.hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}

/* ==========================================================================
   7. タップ領域：全タップ可能要素に最小44px×44pxを保証
   ========================================================================== */
@media (hover:none) and (pointer:coarse){
  /* タッチデバイスのみ：ボタン・リンクの最小タップ領域を強制 */
  .btn,.cl-fixcontact-cta,.cl-panel li a,.cl-panel-cta,.cl-panel-tel,
  .cl-fixcontact-tel,.gnav-cta-btn,.gnav-tel,.gnav-links li a,
  [class*="btn-"]{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  /* インライン記法でpadding小さく指定されたボタンも44px確保 */
  a.btn[style*="padding:10px"],a[class*="btn"][style*="padding:10px"]{
    padding-top:12px !important;padding-bottom:12px !important;
  }
}

/* ==========================================================================
   8. SP共通：横スクロール完全防止（body以下全要素）
   ========================================================================== */
@media (max-width:768px){
  *{max-width:100vw}
  /* ただし overflow:auto を持つカルーセル等は除外 */
  .carousel,.swiper,.slider,[class*="carousel"]{max-width:none}
  /* テーブルは横スクロール許容（既に table{display:block;overflow-x:auto} 済） */
  table{max-width:none}
}