/*
Theme Name: カイカエ先生
Theme URI: https://kaikaesensei.com/
Author: Kaikae Sensei
Author URI: https://kaikaesensei.com/
Description: 「カイカエ先生」カスタムテーマ（エコキュート・給湯器交換のLP/サイト向け）。黄色をアクセントに、CTA固定バー・施工実績スライダー・FAQ・ステップ導線などを搭載。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kaikaesensei
*/

/* Base reset */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;color:#0d1b2a;}
img{max-width:100%;height:auto}
a{color:inherit}
:root{
    --ks-yellow:#F4C400;
  --ks-ink:#102A43;
  --ks-yellow-2:#FFD84D;
  --ks-navy:#0D2B66;
  --ks-navy-2:#0A214F;
  --ks-blue:#1677FF;
  --ks-green:#10B981;
  --ks-orange:#FF6A3D;
  --ks-text:#0d1b2a;
  --ks-muted:#4b5563;
  --ks-card:#ffffff;
  --ks-border:rgba(13,43,102,.12);
  --ks-shadow:0 12px 30px rgba(13,43,102,.12);
  --ks-radius:18px;
  --ks-radius-lg:26px;
  --ks-max:1200px;
}

/* Utilities */
.ks-container{max-width:var(--ks-max);margin:0 auto;padding:0 18px}
.ks-btn{display:inline-flex;align-items:center;gap:.55em;padding:14px 18px;border-radius:999px;text-decoration:none;font-weight:800;letter-spacing:.02em;border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 24px rgba(0,0,0,.12);transition:.2s transform,.2s filter,.2s box-shadow}
.ks-btn:hover{transform:translateY(-2px);filter:saturate(1.05);box-shadow:0 14px 34px rgba(0,0,0,.16)}
.ks-btn:active{transform:translateY(0)}
.ks-btn--mail{background:linear-gradient(180deg,#23A7FF,#1677FF);color:#fff}
.ks-btn--phone{background:linear-gradient(180deg,#FF8C4D,#FF6A3D);color:#fff}
.ks-btn--line{background:linear-gradient(180deg,#1AD36B,#10B981);color:#fff}
.ks-chip{display:inline-flex;align-items:center;gap:.4em;padding:6px 10px;border-radius:999px;background:rgba(255,196,0,.18);border:1px solid rgba(255,196,0,.35);font-weight:800;color:var(--ks-navy)}
.ks-kicker{font-weight:900;color:var(--ks-navy);letter-spacing:.06em}
.ks-underline{position:relative;display:inline-block}
.ks-underline::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:-.05em;height:.55em;
  background:linear-gradient(90deg,rgba(255,196,0,.0),rgba(255,196,0,.85),rgba(255,196,0,.0));
  z-index:-1;border-radius:999px;transform:rotate(-1.2deg)
}

/* Header */
.ks-site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--ks-border)}
.ks-site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0}
.ks-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.ks-brand__logo{width:46px;height:46px;border-radius:14px;background:radial-gradient(circle at 30% 25%,#fff, #fff0 55%),linear-gradient(135deg,var(--ks-yellow),#FFDD70);border:1px solid rgba(0,0,0,.06);box-shadow:0 10px 26px rgba(255,196,0,.25)}
.ks-brand__text{display:flex;flex-direction:column;line-height:1.1}
.ks-brand__name{font-weight:1000;font-size:18px;color:var(--ks-navy)}
.ks-brand__domain{font-weight:800;font-size:12px;color:var(--ks-muted)}
.ks-nav{display:none;align-items:center;gap:18px}
.ks-nav a{font-weight:900;color:var(--ks-navy);text-decoration:none;opacity:.9}
.ks-nav a:hover{opacity:1}
.ks-header-ctas{display:flex;align-items:center;gap:10px}
.ks-header-ctas .ks-btn{padding:10px 14px;box-shadow:none;border:0}
.ks-hamburger{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;border:1px solid var(--ks-border);background:#fff;color:var(--ks-navy);cursor:pointer}

/* Mobile menu */
.ks-drawer{position:fixed;inset:0;z-index:90;display:none}
.ks-drawer.is-open{display:block}
.ks-drawer__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.ks-drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(420px,92vw);background:#fff;border-left:1px solid var(--ks-border);box-shadow:var(--ks-shadow);padding:18px}
.ks-drawer__top{display:flex;align-items:center;justify-content:space-between}
.ks-drawer__close{width:46px;height:46px;border-radius:14px;border:1px solid var(--ks-border);background:#fff;cursor:pointer}
.ks-drawer nav{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.ks-drawer nav a{padding:12px 12px;border-radius:14px;text-decoration:none;font-weight:900;color:var(--ks-navy);background:#f3f6ff;border:1px solid rgba(13,43,102,.08)}
.ks-drawer .ks-header-ctas{margin-top:14px;flex-direction:column;align-items:stretch}
.ks-drawer .ks-btn{justify-content:center}

/* Hero */
.ks-hero{position:relative;overflow:hidden;background:radial-gradient(1200px 500px at 20% 10%,rgba(255,196,0,.35),transparent 55%),
linear-gradient(180deg,#eef5ff 0%, #f6f8fc 70%)}
.ks-hero__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:34px 0 18px}
.ks-hero h1{margin:8px 0 10px;font-size:clamp(30px,4.2vw,54px);line-height:1.1;color:var(--ks-navy);font-weight:1000}
.ks-hero p{margin:0 0 16px;color:var(--ks-muted);font-weight:700;line-height:1.8}
.ks-hero__card{background:rgba(255,255,255,.85);border:1px solid var(--ks-border);border-radius:var(--ks-radius-lg);box-shadow:var(--ks-shadow);padding:18px}
.ks-hero__badge{display:inline-flex;align-items:center;gap:.6em;padding:10px 14px;border-radius:999px;background:rgba(13,43,102,.94);color:#fff;font-weight:1000}
.ks-hero__badge b{color:var(--ks-yellow)}
.ks-hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.ks-hero__visual{position:relative}
.ks-hero__visual .ks-mascot{width:min(380px,90%);margin:0 auto;display:block;filter:drop-shadow(0 22px 34px rgba(13,43,102,.25))}
.ks-hero__stamp{
  position:absolute;right:2%;top:4%;width:160px;aspect-ratio:1/1;border-radius:999px;
  background:radial-gradient(circle at 35% 30%,#fffb, transparent 55%),linear-gradient(180deg,#ff2a2a,#b80000);
  display:grid;place-items:center;color:#fff;text-align:center;font-weight:1000;box-shadow:0 18px 40px rgba(184,0,0,.25);border:4px solid rgba(255,255,255,.45)
}
.ks-hero__stamp span{display:block;font-size:16px;opacity:.95}
.ks-hero__stamp strong{display:block;font-size:28px;letter-spacing:.06em}

/* Section */
.ks-section{padding:54px 0}
.ks-section--tight{padding:34px 0}
.ks-section__head{text-align:center;margin-bottom:26px}
.ks-section__title{margin:0;font-size:clamp(24px,3vw,40px);font-weight:1000;color:var(--ks-navy)}
.ks-section__lead{margin:10px auto 0;max-width:840px;color:var(--ks-muted);font-weight:700;line-height:1.8}
.ks-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ks-card{background:var(--ks-card);border:1px solid var(--ks-border);border-radius:var(--ks-radius);box-shadow:var(--ks-shadow);overflow:hidden}
.ks-card__top{padding:14px 14px 10px;border-bottom:1px solid rgba(13,43,102,.08);display:flex;align-items:center;justify-content:space-between;gap:10px}
.ks-card__brand{font-weight:1000;color:var(--ks-navy);letter-spacing:.06em}
.ks-card__tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ks-tag{font-weight:1000;font-size:12px;border-radius:999px;padding:6px 10px;background:#f3f6ff;border:1px solid rgba(13,43,102,.12);color:var(--ks-navy)}
.ks-card__body{padding:14px}
.ks-price{display:flex;align-items:baseline;gap:8px}
.ks-price__num{font-size:34px;font-weight:1000;color:#d30000}
.ks-price__yen{font-weight:1000;color:#d30000}
.ks-price__note{margin:6px 0 0;color:var(--ks-muted);font-weight:700;font-size:12px;line-height:1.6}
.ks-card__meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.ks-meta{background:#f6f8ff;border:1px solid rgba(13,43,102,.10);border-radius:14px;padding:10px}
.ks-meta b{display:block;color:var(--ks-navy);font-weight:1000;font-size:12px}
.ks-meta span{display:block;color:var(--ks-text);font-weight:900;margin-top:2px}

/* Points */
.ks-points{display:grid;grid-template-columns:1fr;gap:20px}
.ks-point{display:grid;grid-template-columns:.95fr 1.05fr;gap:20px;align-items:center;background:#fff;border:1px solid var(--ks-border);border-radius:var(--ks-radius-lg);box-shadow:var(--ks-shadow);padding:22px;position:relative;overflow:hidden}
.ks-point__no{position:absolute;right:18px;top:10px;font-size:96px;font-weight:1000;color:rgba(13,43,102,.09)}
.ks-point h3{margin:0 0 8px;font-size:28px;font-weight:1000;color:var(--ks-navy)}
.ks-point p{margin:0;color:var(--ks-muted);font-weight:700;line-height:1.9}
.ks-point__media{display:grid;place-items:center}
.ks-point__media img{border-radius:22px;box-shadow:0 18px 44px rgba(13,43,102,.18)}

/* Steps */
.ks-steps{background:linear-gradient(180deg,#cfe6ff 0%, #e9f3ff 100%);border-radius:var(--ks-radius-lg);padding:28px;border:1px solid rgba(13,43,102,.10)}
.ks-steps__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.ks-step{background:rgba(255,255,255,.85);border:1px solid rgba(13,43,102,.10);border-radius:18px;padding:14px;min-height:176px;position:relative}
.ks-step b{display:block;font-weight:1000;color:var(--ks-navy);font-size:14px}
.ks-step strong{display:block;font-weight:1000;color:var(--ks-navy);font-size:22px;margin:6px 0 6px}
.ks-step p{margin:0;color:var(--ks-muted);font-weight:700;font-size:12px;line-height:1.7}

/* Works slider */
.ks-slider{position:relative}
.ks-track{display:flex;gap:14px;overflow:auto;scroll-snap-type:x mandatory;padding:6px 2px 16px}
.ks-track::-webkit-scrollbar{height:10px}
.ks-track::-webkit-scrollbar-thumb{background:rgba(13,43,102,.15);border-radius:999px}
.ks-work{flex:0 0 min(320px,86vw);scroll-snap-align:start;background:#fff;border:1px solid rgba(13,43,102,.10);border-radius:20px;overflow:hidden;box-shadow:0 18px 44px rgba(13,43,102,.15)}
.ks-work__img{aspect-ratio:4/3;background:#e9eefc}
.ks-work__body{padding:14px}
.ks-work__body b{display:block;color:var(--ks-navy);font-weight:1000}
.ks-work__body span{display:block;color:var(--ks-muted);font-weight:800;font-size:12px;margin-top:4px}

/* FAQ */
.ks-faq{display:grid;gap:12px;max-width:900px;margin:0 auto}
.ks-faq details{background:#fff;border:1px solid rgba(13,43,102,.10);border-radius:18px;box-shadow:0 14px 32px rgba(13,43,102,.10);padding:14px}
.ks-faq summary{cursor:pointer;font-weight:1000;color:var(--ks-navy);list-style:none}
.ks-faq summary::-webkit-details-marker{display:none}
.ks-faq summary::after{content:"＋";float:right;font-weight:1000}
.ks-faq details[open] summary::after{content:"−"}
.ks-faq p{margin:10px 0 0;color:var(--ks-muted);font-weight:700;line-height:1.9}

/* Contact section */
.ks-contact{
	display:grid;
	/*grid-template-columns:1fr 1fr;*/
	gap:16px}
.ks-panel{background:#fff;border:1px solid rgba(13,43,102,.10);border-radius:22px;box-shadow:var(--ks-shadow);padding:18px}
.ks-panel h3{margin:0 0 10px;color:var(--ks-navy);font-weight:1000}
.ks-panel p{margin:0;color:var(--ks-muted);font-weight:700;line-height:1.9}
.ks-form{display:grid;gap:12px;margin-top:10px}
.ks-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ks-input, .ks-textarea{
  width:100%;padding:12px 12px;border-radius:14px;border:1px solid rgba(13,43,102,.14);background:#f7f9ff;
  font-weight:800;outline:none
}
.ks-input:focus, .ks-textarea:focus{border-color:rgba(22,119,255,.65);box-shadow:0 0 0 4px rgba(22,119,255,.15)}
.ks-textarea{min-height:140px;resize:vertical}
.ks-submit{cursor:pointer;border:0}
.ks-note{font-size:12px;color:var(--ks-muted);font-weight:700}

/* Footer */
.ks-footer{
    background: linear-gradient(to bottom, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .06) 45%, rgb(255 141 0 / 15%) 100%), var(--ks-yellow);
	color:#2b2b2b;margin-top:30px
}
.ks-footer__inner{padding:30px 0}
.ks-footer__grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:18px}
.ks-footer a{color:#2b2b2b;opacity:.9;text-decoration:none}
.ks-footer a:hover{opacity:1}
.ks-footer h4{margin:0 0 10px;font-weight:1000}
.ks-footer p{margin:0;color:#2b2b2b;font-weight:700;line-height:1.8}
.ks-footer__bottom{border-top:1px solid rgba(255,255,255,.12);padding:12px 0;font-size:12px;color:rgba(255,255,255,.75)}

/* Fixed CTA bar */
.ks-fixed-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-top:1px solid var(--ks-border)}
.ks-fixed-cta__inner{max-width:var(--ks-max);margin:0 auto;padding:10px 14px;display:flex;gap:10px;align-items:center;justify-content:center}
.ks-fixed-cta .ks-btn{flex:1;justify-content:center;max-width:420px}
.ks-topbtn{
  position:fixed;right:18px;bottom:86px;z-index:61;width:56px;height:56px;border-radius:999px;border:1px solid rgba(13,43,102,.18);
  background:#fff;box-shadow:0 16px 34px rgba(13,43,102,.18);display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(8px);transition:.25s
}
.ks-topbtn.is-show{opacity:1;transform:translateY(0)}
.ks-topbtn svg{width:20px;height:20px;color:var(--ks-navy)}

/* Responsive */
@media (min-width: 980px){
  .ks-nav{display:flex}
  .ks-hamburger{display:none}
}
@media (max-width: 980px){
  .ks-hero__inner{grid-template-columns:1fr;gap:18px}
  .ks-hero__stamp{right:4%;top:6%}
  .ks-cards{grid-template-columns:repeat(2,1fr)}
  .ks-point{grid-template-columns:1fr}
  .ks-steps__grid{grid-template-columns:repeat(2,1fr)}
  .ks-footer__grid{grid-template-columns:1fr}
  .ks-contact{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .ks-cards{grid-template-columns:1fr}
  .ks-header-ctas{display:none}
  .ks-row{grid-template-columns:1fr}
}




:root{
  --ks-yellow:#f6c400;
  --ks-yellow-2:#ffe37a;
  --ks-navy:#0d2a6b;
  --ks-navy-2:#0a2052;
  --ks-text:#0b1b2b;
  --ks-border:#e7edf6;
  --ks-shadow:0 10px 30px rgba(0,0,0,.12);
}

/* ヘッダー全体 */
.ks-header{  background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.06); }
.ks-inner{ width:min(1200px, 92%); margin-inline:auto; }

/* 上段 */
.ks-headerTop{ background:#fff; }
.ks-headerTop__row{
  display:grid;
  grid-template-columns: 260px 1fr 260px;
  gap:16px;
  align-items:center;
  padding:14px 0;
}
.ks-brand__link{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.ks-brand__badge{
  width:40px; height:40px;
}
.ks-brand__name{ display:block; font-weight:900; letter-spacing:.02em; color:var(--ks-navy); font-size:18px; }
.ks-brand__domain{ display:block; font-size:12px; color:#6a7a94; margin-top:2px; }

.ks-telBox{ text-align:center; }
.ks-telBox__label{ font-size:12px; color:#4a5d7a; margin-bottom:4px; }
.ks-telBox__tel{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; text-decoration:none;
  font-weight:900; letter-spacing:.02em;
  color:#e3002c;
  font-size:28px;
  line-height:1;
}
.ks-telBox__note{ font-size:11px; color:#6a7a94; margin-top:4px; }
.ks-telBox__icon{ font-size:18px; transform: translateY(-1px); }

.ks-ctaTop{ display:flex; gap:10px; justify-content:flex-end; }
.ks-btn{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius:14px;
  color:#fff; text-decoration:none;
  box-shadow:0 10px 20px rgba(0,0,0,.12);
  transition:.2s transform, .2s filter;
  min-height:54px;
}
.ks-btn:hover{ transform:translateY(-2px); filter:brightness(1.03); }
.ks-btn__icon{ font-size:22px; line-height:1; }
.ks-btn__text{ font-weight:800; line-height:1.05; }
.ks-btn__text small{ font-weight:700; opacity:.9; }
.ks-btn--mail{ background:#2f7cff; }
.ks-btn--line{ background:#15c15d; }

/* 下段：ナビ */
.ks-headerNav{position:sticky; top:0; z-index:999; background:var(--ks-navy); }
.ks-headerNav__row{ padding:8px 0; }
.ks-nav__menu{ display:flex; gap:18px; align-items:center; justify-content:center; list-style:none; margin:0; padding:0; }
.ks-nav__menu a{
  color:#fff; text-decoration:none; font-weight:700;
  font-size:13px; padding:10px 8px; display:inline-block;
  opacity:.95;
}
.ks-nav__menu a:hover{ opacity:1; text-decoration:underline; }

/* カテゴリタブ帯 */
.ks-catTabs{ background:#fff; border-top:1px solid rgba(255,255,255,.1); }
.ks-catTabs__row{ display:flex; gap:10px; padding:10px 0 14px; flex-wrap:wrap; justify-content:center; }
.ks-tab{
  display:flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  border:2px solid var(--ks-navy);
  color:var(--ks-navy);
  text-decoration:none;
  font-weight:900;
  background:#fff;
  min-width:130px;
}
.ks-tab:hover{ background:rgba(246,196,0,.15); }
/*
.ks-tab.is-active{
  background:var(--ks-yellow);
  border-color:var(--ks-yellow);
  color:var(--ks-navy);
}
*/

/* SP */
.ks-burger{ display:none; background:transparent; border:0; padding:10px; cursor:pointer; }
.ks-burger span{ display:block; width:26px; height:2px; background:var(--ks-navy); margin:6px 0; border-radius:2px; }

@media (max-width: 900px){
  .ks-headerTop__row{ 
	  grid-template-columns: 1fr auto;
	  position: relative;
	  padding-bottom: 40px;
	}
  .ks-telBox{ display:none; }
  .ks-ctaTop{ gap:8px; }
  .ks-btn{ padding:10px 12px; border-radius:14px; }
  .ks-btn__text small{ display:none; }
  .ks-headerNav__row{ display:block; } /* SPはメニュー簡略化したいなら後でJSで開閉に */
  .ks-burger{ 
	  display:block;
	          position: absolute;
        right: 0;
        bottom: -5px;
	}
  .ks-catTabs__row{ justify-content:flex-start; overflow:auto; flex-wrap:nowrap; }
}

.ks-fv{
  position:relative;
  overflow:hidden;
  padding:50px 0;
  /* “水っぽい背景” → 画像にするのが最強 */
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.05)),
    url("../img/fv-water.jpg") center/cover no-repeat;
}

/* うっすら白もや（文字が読みやすくなる） */
.ks-fv::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 25% 45%, rgba(255,255,255,.30), rgba(255,255,255,0) 55%);
  pointer-events:none;
}
.ks-fvih{
  position:relative;
  overflow:hidden;
  padding:50px 0;
  /* “水っぽい背景” → 画像にするのが最強 */
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.05)),
    url("../img/ihheader.png") center/cover no-repeat;
}

/* うっすら白もや（文字が読みやすくなる） */
.ks-fvih::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 25% 45%, rgba(255,255,255,.30), rgba(255,255,255,0) 55%);
  pointer-events:none;
}

.ks-fvwi{
  position:relative;
  overflow:hidden;
  padding:50px 0;
  /* “水っぽい背景” → 画像にするのが最強 */
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.05)),
    url("../img/ee.jpg") center/cover no-repeat;
}

/* うっすら白もや（文字が読みやすくなる） */
.ks-fvwi::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 25% 45%, rgba(255,255,255,.30), rgba(255,255,255,0) 55%);
  pointer-events:none;
}

.ks-fv__inner{
  width:min(1300px,92%);
  margin-inline:auto;
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:28px;
  align-items:center;
}

.ks-fv__title{
  margin:0 0 28px;
  color:#fff;
  font-weight:900;
  letter-spacing:.02em;
  font-size:56px;
  line-height:1.15;
  text-shadow:0 10px 30px rgba(0,0,0,.45);
  /* 参考っぽい“少し斜体” */
  transform:skewX(-6deg);
}
.ks-fv__title br{ display:block; }

/* 青い割引パネル */
.ks-fv__panel{
	display: flex;
    align-items: center;
    gap: 18px;
    background: #2f63c9;
    border-radius: 14px;
    padding: 0px 22px;
    width: min(517px, 100%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .25);
    position: absolute;
    right: 240px;
	    bottom: -10px;
}

.ks-fv__panelBird{
  width:140px;
  aspect-ratio: 1.5 / 1;
  border-radius:12px;
  flex:0 0 auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}

.ks-fv__panelTop{
  display:flex;
  align-items:baseline;
  gap:10px;
  color:#fff;
  font-weight:900;
}
.ks-fv__panelMax{ font-size:20px; opacity:.95; }
.ks-fv__panelOff{ font-size:78px; letter-spacing:.02em; }
.ks-fv__panelOff2{ font-size:54px; }

.ks-fv__panelLine{
  height:8px;
  width: 78%;
  margin:8px 0 10px;
  background:#ffe200;
  border-radius:999px;
}

.ks-fv__panelNote{
  margin:0;
  color:#fff;
  font-size:14px;
  font-weight:700;
  opacity:.95;
}

/* 右側（赤丸＋機器） */
.ks-fv__right{
  position:relative;
  min-height:360px;
}

.ks-fv__badge{
  position:absolute;
  top:20px;
  left:30px;
  width:170px;
  height:170px;
  border-radius:999px;
  background:#d9001b;
  color:#fff;
  display:grid;
  place-items:center;
  text-align:center;
  font-weight:900;
  line-height:1.15;
  box-shadow:0 18px 34px rgba(0,0,0,.25);
}
.ks-fv__badge b{ display:block; font-size:28px; }

.ks-fv__products{
  position:absolute;
  right:0;
  bottom:-10px;
  width: 420px;
  height: 360px;
}

.tom{
	width: 100%;
}
.tomimg{
    height: 450px;
}
.ks-fv__prod{
  position:absolute;
  object-fit:contain;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.25));
}
.ks-fv__prod--out{ left:0; bottom:0; width:250px; height:250px; }
.ks-fv__prod--tank{
	right: -50px;
    bottom: -90px;
    /* width: 220px; */
    height: 450px;}

/* レスポンシブ */
@media (max-width: 720px){
  .ks-fv{ padding:44px 0; }
	.ks-fv__panel{
		/*position:relative;*/
		        left: 50%;
        transform: translateX(-50%);
	}
	
  .ks-fv__title{ font-size:42px; transform:skewX(-5deg); }
  .ks-fv__right{ min-height:320px; }
  .ks-fv__products{ 
		width: 230px;
	      height: 470px;
        position:relative;
	}
  .ks-fv__badge{ left:10px; top:10px; width:150px; height:150px; }
	
	
	
}
@media (max-width: 520px){
  .ks-fv__title{ font-size:34px; }
  .ks-fv__panel{ padding:16px; gap:12px; }
  .ks-fv__panelBird{ width:105px; }
  .ks-fv__panelOff{ font-size:60px; }
  .ks-fv__panelOff2{ font-size:44px; }
}

/* ===== までの大特価 セクション ===== */
.ks-sale{
  background:#fbf6d9; /* 画像の薄いクリームっぽい背景 */
  padding:70px 0 80px;
}

.ks-sale__inner{
  width:min(1200px, 92%);
  margin-inline:auto;
}

.ks-sale__head{
  text-align:center;
  margin-bottom:34px;
}

.ks-sale__title{
  margin:0;
  display:inline-block;
  position:relative;
  font-weight:900;
  letter-spacing:.02em;
  font-size:64px;
  color:#d40000;
  line-height:1.05;
}

/* 黄色の“筆ブラシ”下線（それっぽく） */
.ks-sale__title::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-10px;
  width:min(520px, 90%);
  height:18px;
  background:#ffe200;
  border-radius:999px;
  filter: blur(.2px);
  z-index:-1;
  opacity:.95;
}

.ks-sale__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:30px;
  align-items:start;
  justify-content:center;
}

.ks-saleCard{
  margin:0;
  background:#fff;
  border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
}

.ks-saleCard img{
  display:block;
  width:100%;
  height:auto;
}

/* レスポンシブ */
@media (max-width: 980px){
  .ks-sale{ padding:52px 0 60px; }
  .ks-sale__title{ font-size:46px; }
  .ks-sale__grid{ grid-template-columns: 1fr; gap:22px; }
}
@media (max-width: 520px){
  .ks-sale__title{ font-size:38px; }
}

/* ===== 在庫・納期の確認 ===== */
.ks-stock{
  background:#FFF;
  padding:80px 0;
}
.ks-stock__inner{
  width:min(1200px, 92%);
  margin-inline:auto;
}
.ks-stock__head{
  text-align:center;
  margin-bottom:34px;
}
.ks-stock__title{
  margin:0;
  font-size:52px;
  font-weight:900;
  color:var(--ks-navy, #0d2a6b);
  letter-spacing:.02em;
  line-height:1.1;
  position:relative;
  display:inline-block;
}
.ks-stock__title::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-10px;
  width:min(320px, 92%);
  height:14px;
  background:#ffe200;
  border-radius:999px;
  z-index:-1;
}
.ks-stock__lead{
  margin:14px auto 0;
  max-width: 720px;
  font-size:14px;
  color:#36506f;
  background:#f2f7ff;
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.04);
}

.ks-stock__grid{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:34px;
  align-items:center;
  margin-top:28px;
}

/* 左カード */
.ks-stockCard{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.05);
}
.ks-stockCard__top{
  background:var(--ks-navy, #0d2a6b);
  color:#fff;
  text-align:center;
  font-weight:900;
  padding:16px 12px;
  font-size:18px;
}
.ks-stockCard__body{
  padding:18px 18px 22px;
  background:#f6f9ff;
}
.ks-stockBlock{
  background:#fff;
  border-radius:12px;
  padding:14px 14px;
  border:1px solid rgba(0,0,0,.05);
  margin-bottom:12px;
}
.ks-stockBlock__label{
  text-align:center;
  font-weight:900;
  color:var(--ks-navy, #0d2a6b);
  margin-bottom:10px;
}
.ks-stockBlock__big{
  text-align:center;
  font-size:32px;
  font-weight:900;
  color:#0b1b2b;
}
.ks-stockBlock__sub{
  text-align:center;
  font-size:12px;
  color:#6a7a94;
  margin-top:4px;
}
.ks-stockStatus{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:6px;
}
.ks-stockStatus__icon{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:10px;
  font-weight:900;
  background:#fff;
  border:2px solid rgba(0,0,0,.08);
}
.ks-stockStatus__text{
  font-size:22px;
  font-weight:900;
}
.ks-stockStatus__icon.is-ok{ color:#1aa84b; border-color:rgba(26,168,75,.35); }
.ks-stockStatus__text.is-ok{ color:#1aa84b; }

.ks-stockStatus__icon.is-warn{ color:#f0a000; border-color:rgba(240,160,0,.35); }
.ks-stockStatus__text.is-warn{ color:#f0a000; }

.ks-stockStatus__icon.is-ng{ color:#e0002c; border-color:rgba(224,0,44,.35); }
.ks-stockStatus__text.is-ng{ color:#e0002c; }

.ks-stockDays{
  text-align:center;
  font-size:34px;
  font-weight:900;
  color:var(--ks-navy, #0d2a6b);
}
.ks-stockBlock__note{
  margin-top:8px;
  font-size:11px;
  color:#6a7a94;
  text-align:center;
  line-height:1.35;
}

/* 右：地図っぽいブロック */
.ks-map{
  position:relative;
  min-height:360px;
  background:#fff;
  border-radius:16px;
  padding:22px;
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.05);
  overflow:hidden;
}

.ks-map__hint{
  position:absolute;
  left:28px;
  top:50px;
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border:2px solid var(--ks-navy, #0d2a6b);
  color:var(--ks-navy, #0d2a6b);
  border-radius:999px;
  padding:14px 18px;
  font-weight:900;
  box-shadow:0 12px 22px rgba(0,0,0,.10);
}
.ks-map__glass{ font-size:20px; }

.ks-map__areas{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:78px;
  max-width: 560px;
  margin-left:auto;
}

.ks-area{
  width:100%;
  padding:14px 12px;
  border-radius:12px;
  border:2px solid var(--ks-navy, #0d2a6b);
  background:var(--ks-navy, #0d2a6b);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 12px 22px rgba(0,0,0,.10);
  transition:.18s transform, .18s filter, .18s background;
}
.ks-area:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.ks-area.is-active{
  background:#fff;
  color:var(--ks-navy, #0d2a6b);
  border-color:var(--ks-navy, #0d2a6b);
}

.ks-map__note{
  margin:18px 0 0;
  text-align:right;
  font-size:12px;
  color:#6a7a94;
}

@media (max-width: 720px){
	
	.ks-fv__panel {

    right: 0;
    bottom: 20px;
}
	
  .ks-stock{ padding:60px 0; }
  .ks-stock__title{ font-size:40px; }
  .ks-stock__grid{ grid-template-columns: 1fr; }
  .ks-map__areas{ grid-template-columns: repeat(2, minmax(0,1fr)); margin-left:0; }
  .ks-map__hint{ position:static; margin:0 0 16px; width:max-content; }
}


/* ===== SVG 日本地図（ブロック型） ===== */
.ks-jmap{
  width:100%;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding:10px 0 0;
}
.ks-jmap__svg{
  width:min(640px, 100%);
  height:auto;
	z-index: 2;
}

/* 地域ブロック */
.ks-jmap__region{ cursor:pointer; }
.ks-jmap__shape{
  fill: #ff940a;
  rx:14; ry:14;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.12));
  transition: transform .18s ease, filter .18s ease, fill .18s ease;
}
.ks-jmap__label{
  fill:#fff;
  font-weight:900;
  font-size:26px;
  letter-spacing:.02em;
  pointer-events:none;
}
.ks-jmap__q{
  fill:#fff;
  stroke: #ff940a;
  stroke-width:3;
  pointer-events:none;
}
.ks-jmap__qtxt{
  fill: #ff940a;
  font-weight:900;
  font-size:18px;
  pointer-events:none;
}

/* hover */
.ks-jmap__region:hover .ks-jmap__shape{
  transform: translateY(-2px);
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.16));
  fill:#ff940a;
}

/* active（選択中） */
.ks-jmap__region.is-active .ks-jmap__shape{
  fill:#ffffff;
  stroke: var(--ks-yellow, #0d2a6b);
  stroke-width:6;
}
.ks-jmap__region.is-active .ks-jmap__label{
  fill: var(--ks-yellow, #0d2a6b);
}
.ks-jmap__region.is-active .ks-jmap__q{
  fill: var(--ks-yellow, #0d2a6b);
  stroke: var(--ks-yellow, #0d2a6b);
}
.ks-jmap__region.is-active .ks-jmap__qtxt{
  fill:#fff;
}

/* スマホではボタンを見せる（地図は小さくなるので） */
@media (max-width: 980px){
  .ks-jmap{ justify-content:center; }
  .ks-map__areas{ display:grid; }
}
@media (min-width: 981px){
  .ks-map__areas{ display:none; } /* PCは地図をメインに */
}


/* ===== 4つのポイント ===== */
.kp-points{
      background: radial-gradient(800px 380px at 18% 45%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 60%), radial-gradient(900px 420px at 82% 55%, rgba(255, 255, 255, .70), rgba(255, 255, 255, 0) 65%), linear-gradient(135deg, #fff7cc 0%, #fff 42%, #fff2b8 100%);
  padding: 56px 0;
}
.kp-container{
  width: min(1100px, 92vw);
  margin: 0 auto;
}

/* 見出し */
.kp-head{
  text-align:center;
  padding: 8px 0 30px;
  color:#0d2a6b;
}
.kp-head__sub{
  font-weight: 900;
  letter-spacing: .02em;
  margin: 0 0 6px;
}
.kp-head__ttl{
  margin: 0;
  line-height: 1.05;
  position: relative;
  display: inline-block;
  padding: 0 10px 14px;
}
.kp-head__big{
  font-size: clamp(44px, 5.2vw, 86px);
  font-weight: 1000;
}
.kp-head__marker{
  position:absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 92%;
  height: 18px;
  background: #ffe83a;
  border-radius: 999px;
  filter: blur(.1px);
  z-index: -1;
}

/* リード */
.kp-head__lead{
  margin: 12px auto 0;
  font-size: 14px;
  color: rgba(13,42,107,.85);
}

/* 各ポイント */
.kp-point{
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(13,42,107,.10);
  margin: 18px 0 80px;

}
.kp-point__inner{
  position: relative;
  display: grid;
  grid-template-columns: 460px 1fr;
  align-items: center;
  gap: 32px;
  padding: 34px 40px;
  min-height: 330px;
}

/* 薄い番号（右上） */
.kp-point__num{
  position:absolute;
  right: 26px;
  top: -115px;
  font-weight: 1000;
  font-size: 150px;
  letter-spacing: .02em;
  color: rgba(13,42,107,.12);
  user-select:none;
  pointer-events:none;
}

/* 画像 */
.kp-point__media{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}
.kp-point__media img{
  width: 100%;
  height: 400px;
  object-fit: cover;
  display:block;
}

/* テキスト */
.kp-point__body{
  color:#0d2a6b;
}
.kp-point__kicker{
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 18px;
}
.kp-point__title{
  margin: 0 0 14px;
  font-weight: 1000;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.25;
}
.kp-point__title span{
  display:inline-block;
  position: relative;
}
.kp-point__title span::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 10px;
  background: #ffe83a;
  z-index: -1;
  border-radius: 999px;
}
.kp-point__text{
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(13,42,107,.9);
}

/* 交互配置（偶数は左右反転） */
.kp-point.is-even .kp-point__inner{
  grid-template-columns: 1fr 460px;
}
.kp-point.is-even .kp-point__media{
  order: 2;
}
.kp-point.is-even .kp-point__body{
  order: 1;
}

/* レスポンシブ */
@media (max-width: 980px){
  .kp-point__inner{
    grid-template-columns: 1fr;
    padding: 22px 18px;
    gap: 18px;
    min-height: unset;
  }
  .kp-point__media img{ height: 220px; }
  .kp-point__num{
    right: 14px;
    top: 6px;
    font-size: 110px;
  }
  .kp-head__rays{ display:none; }
}


/* =========================
   CTA（お問い合わせ）
========================= */
.ks-cta{
  /* まずはベースをグラデに */
  background:
    radial-gradient(900px 240px at 50% -40px, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #ffe96a 0%, #ffd92a 35%, #ffc800 100%);
  padding: 56px 0 64px;
  position: relative;
  overflow: hidden;
}

/* 上端のうっすらライン（参考の帯感） */
.ks-cta::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,0), rgba(255,255,255,.25));
  opacity: .8;
}

/* うっすら下側の影（深み） */
.ks-cta::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.08));
  pointer-events:none;
}
.ks-cta__inner{
  width: min(1100px, 92vw);
  margin: 0 auto;
  text-align: center;
}

.ks-cta__title{
  margin: 0 0 18px;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 900;
  letter-spacing: .02em;
  color: #0d2a6b;
}

/* バッジ */
.ks-cta__badges{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

.ks-cta__badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 2px solid rgba(13,42,107,.35);
  border-radius: 12px;
  background: rgba(255,255,255,.25);
  color: #0d2a6b;
  font-weight: 800;
}

.ks-cta__ico{
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(13,42,107,.15);
  font-size: 16px;
}

.ks-cta__note{
  margin: 10px 0 26px;
  color: rgba(13,42,107,.85);
  font-weight: 700;
}


/* 黄色背景でも文字が沈まないように */
.ks-cta__title{
  color:#0d2a6b;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

.ks-cta__note{
  color: rgba(13,42,107,.85);
}

/* ボタン列 */
.ks-cta__buttons{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}

/* 共通ボタン */
.ks-cta__btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 18px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  box-shadow: 0 18px 0 rgba(0,0,0,.12);
  transform: translateY(0);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  position: relative;
  overflow: hidden;
}

.ks-cta__btn:hover{
  transform: translateY(2px);
  box-shadow: 0 14px 0 rgba(0,0,0,.10);
  filter: brightness(1.02);
}

.ks-cta__btn-ico{
  font-size: 22px;
  line-height: 1;
}

.ks-cta__btn-text{
  font-size: clamp(18px, 2.1vw, 30px);
  letter-spacing: .02em;
}

.ks-cta__btn-arrow{
  position: absolute;
  right: 22px;
  font-size: 34px;
  opacity: .9;
}

/* 色 */
.ks-cta__btn.is-mail{ background: #10cbb0; }
.ks-cta__btn.is-tel{ background: #ff6a2b; }
.ks-cta__btn.is-line{ background: #10b636; }

/* SP */
@media (max-width: 900px){
  .ks-cta__buttons{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .ks-cta__btn{
    padding: 20px 16px;
  }
  .ks-cta__btn-arrow{
    right: 18px;
  }
}



/* =========================
   FLOW / 設置の流れ
========================= */
.ks-flow{
  padding: 56px 0 70px;
  background: #fff;
}

.ks-flow__head{
  text-align: center;
  margin-bottom: 34px;
}

/* 6カラム（狭くなったら自動で折り返し） */
.ks-flow__grid{
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
}

@media (max-width: 1200px){
  .ks-flow__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px){
  .ks-flow__grid{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* カード */
.ks-flowCard{
  position: relative;
  padding-top: 56px;          /* STEP表示の分 */
}

.ks-flowCard__step{
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 900;
  letter-spacing: .02em;
  color: #0b2a66;
  line-height: 1.0;
  font-size: 20px;
	    z-index: 1;
}

.ks-flowCard__step span{
  display: inline-block;
  margin-top: 2px;
  font-size: 56px;            /* STEP 01 の大きさ */
}

/* 本体：薄い青 + 右側の矢印ノッチ */
.ks-flowCard__body{
  position: relative;
  background: #fffccf;        /* 参考の薄青 */
  border-radius: 14px;
  padding: 22px 18px 18px;
  min-height: 420px;          /* 高さを揃える */

}

/* 右にくいっと出る矢印 */
.ks-flowCard__body::after{
  content:"";
  position: absolute;
  top: 50%;
  right: -22px;
  width: 44px;
  height: 44px;
  background: #fffccf;
  transform: translateY(-50%) rotate(45deg);
  border-radius: 10px;
}

/* 最後だけ矢印なし */
.ks-flowCard:last-child .ks-flowCard__body::after{
  display: none;
}

.ks-flowCard__icon{
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  margin: 6px auto 14px;
}

.ks-flowCard__icon svg{
  width: 72px;
  height: 72px;
  fill: #0b2a66;
}

.ks-flowCard__title{
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  color: #0b2a66;
  margin: 6px 0 12px;
}

.ks-flowCard__text{
  font-size: 14px;
  line-height: 1.85;
  color: #0b2a66;
  margin: 0;
}

/* SPで矢印の見え方を調整（縦並び時は矢印不要でもOK） */
@media (max-width: 680px){
  .ks-flowCard__body{
    min-height: auto;
    padding: 20px 18px 18px;
  }
  .ks-flowCard__body::after{
    display: none;
  }
}


/* ===== 施工実績： ===== */
.ks-work-marquee{
  width: 100vw;
  margin-left: calc(50% - 50vw);   /* コンテンツ幅に縛られず横いっぱい */
  margin-right: calc(50% - 50vw);
  background: #eaf0ff;
  padding: 0 0 24px;
}

.ks-work-marquee__bar{
      background: radial-gradient(900px 240px at 50% -40px, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #ffe96a 0%, #ffd92a 35%, #ffc800 100%);
  color: var(--ks-navy);
  padding: 22px 16px;
  text-align: center;
  position: relative;
}
.ks-work-marquee__title{
  margin: 0;
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 900;
  letter-spacing: .02em;
}


.ks-work-marquee__viewport{
  overflow: hidden;
  position: relative;
  padding: 18px 0 12px;
}

.ks-work-marquee__track{
  display: flex;
  gap: 18px;
  width: max-content;
  will-change: transform;
}

/* カード（縦長） */
.ks-work-card{
  width: 170px;
  background: #fff;
  border: 2px solid #203a7a;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 18px rgba(18,48,111,.10);
  flex: 0 0 auto;
}
.ks-work-card__head{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: #fff;
}
.ks-work-card__col{
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: stretch;
  border-bottom: 1px solid rgba(32,58,122,.18);
}
.ks-work-card__col:last-child{ border-bottom: none; }

.ks-work-card__tag{
  background: #203a7a;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: .08em;
}
.ks-work-card__tag.-new{ background:#102c66; }

.ks-work-card__meta{
  padding: 10px 10px 8px;
  line-height: 1.2;
}
.ks-work-card__maker{
  font-weight: 900;
  font-size: 13px;
  color:#0f2b66;
}
.ks-work-card__model{
  margin-top: 6px;
  font-weight: 900;
  font-size: 12px;
  color:#0f2b66;
}
.ks-work-card__model.-hl{
  background: #ffe86a;
  display: inline-block;
  padding: 2px 6px;
  border-radius: 6px;
}

.ks-work-card__photo{
  margin: 0;
  background: #f4f7ff;
  padding: 10px;
}
.ks-work-card__photo img{
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(32,58,122,.18);
}

.ks-work-card__foot{
  padding: 10px 10px 12px;
  text-align: center;
  font-weight: 900;
  font-size: 13px;
  color: #0f2b66;
  border-top: 1px solid rgba(32,58,122,.18);
}

/* スマホで少し大きく */
@media (max-width: 768px){
  .ks-work-card{ width: 155px; }
  .ks-work-card__photo img{ height: 140px; }
}
.ks-work-marquee__track.is-marquee{
  animation: ks-marquee var(--marquee-duration, 30s) linear infinite;
}
@keyframes ks-marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(var(--marquee-distance, 800px) * -1)); }
}

/* ホバーで止めたい場合（任意） */
.ks-work-marquee__viewport:hover .ks-work-marquee__track.is-marquee{
  animation-play-state: paused;
}

/* ===== fixed footer bar (white) ===== */
:root{
  --ks-fixedbar-h: 74px;
}

body{
  padding-bottom: var(--ks-fixedbar-h);
}

.ks-fixed-cta{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 999;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.12);
}

.ks-fixed-cta__inner{
  max-width: var(--ks-max, 1100px);
  margin: 0 auto;
  padding: 10px 14px;
}

.ks-fixedbar{
  display: grid;
  grid-template-columns: 160px 1fr 320px;
  align-items: center;
  gap: 14px;
}

/* left badge */
.ks-fixedbar__badge{
  line-height: 1.1;
  color: #d70000;
  font-weight: 800;
  text-align: left;
}
.ks-fixedbar__badge small{
  font-size: 12px;
  font-weight: 800;
}

/* center tel */
.ks-fixedbar__tel{
  display: flex;
  align-items: baseline;
  gap: 10px;
  justify-content: center;
}
.ks-fixedbar__tel-icon{
  font-size: 18px;
}
.ks-fixedbar__tel-num{
  font-size: 34px;
  font-weight: 900;
  color: #e00000;
  letter-spacing: .5px;
  text-decoration: none;
}
.ks-fixedbar__note{
  margin-top: 2px;
  font-size: 12px;
  color: #333;
  text-align: center;
}

/* right buttons */
.ks-fixedbar__right{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.ks-fixedbar__btn{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  min-width: 150px;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.ks-fixedbar__btn-ic{ font-size: 20px; }
.ks-fixedbar__btn-txt{ line-height: 1.1; font-size: 13px; }
.ks-fixedbar__btn-arr{ margin-left: auto; font-size: 22px; opacity: .9; }

.ks-fixedbar__btn--mail{ background: #2f6fe4; }
.ks-fixedbar__btn--line{ background: #17b34a; }

/* responsive */
@media (max-width: 980px){
  :root{ --ks-fixedbar-h: 92px; }
  .ks-fixedbar{
        grid-template-columns: 300px 1fr 0px;
    gap: 8px;
  }
  .ks-fixedbar__left{ display:none; }
  .ks-fixedbar__right{ justify-content: center; }
  .ks-fixedbar__tel-num{ font-size: 28px; }
}
@media (max-width: 720px){
	.ks-fixedbar{
        grid-template-columns:1fr ;
    gap: 8px;
  }
}
@media (max-width: 520px){
  :root{ --ks-fixedbar-h: 110px; }
  .ks-fixedbar__right{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .ks-fixedbar__btn{ min-width: 0; padding: 10px 10px; }
  .ks-fixedbar__btn-txt{ font-size: 12px; }
}

.ks-headerNav{
    background: linear-gradient(to bottom, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .06) 45%, rgb(255 141 0 / 15%) 100%), var(--ks-yellow);
  color: var(--ks-ink);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.18);
}

.ks-headerNav a{
  color: var(--ks-ink);
  font-weight: 800;
  letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

.ks-headerNav a:hover{
  background: rgba(255,255,255,.22);
}

.ks-catTabs__row{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.ks-tab{
  display:flex;
  align-items:center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 12px;

  border: 2px solid var(--ks-navy);
  background: #fff;
  color: var(--ks-navy);
  text-decoration:none;
  font-weight: 900;

  min-height: 52px;
  /* 必要なら幅を揃える */
  /* min-width: 180px; */
}

.ks-tab__img{
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ks-tab__img img{
  width:100%;
  height:100%;
  /*object-fit: contain;*/
  display:block;
}

.ks-tab__text{
  white-space: nowrap;
  line-height: 1;
}

.ks-tab__arrow{
  margin-left: auto;
  font-weight: 900;
  line-height: 1;
}

/* hover / active */
.ks-tab:hover{
  background: rgba(246, 196, 0, 0.15);
}

.ks-tab.is-active{
  background: rgba(246, 196, 0, 0.22);
}

/* スマホで詰める */
@media (max-width: 640px){
  .ks-catTabs__row{ gap: 10px; }
  .ks-tab{
    padding: 9px 12px;
    min-height: 48px;
  }
  .ks-tab__img{ width: 30px; height: 30px; flex-basis: 30px; }
}
.ks-tab__arrow{
  margin-left:auto;
  width: 22px;
  height: 22px;
  border: 2px solid var(--ks-navy);
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
}

/* 画像枠 */
.ks-card__media{
  margin: 6px 0 12px;
  background: linear-gradient(180deg, rgba(13,43,102,.06), rgba(13,43,102,.02));
  border: 1px solid rgba(13,43,102,.10);
  border-radius: 16px;
  padding: 10px;
   /*aspect-ratio: 4 / 3;         ここが「商品画像っぽい枠」 */
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* 商品画像 */
.ks-card__img{
  width: 100%;
  height: 100%;
  object-fit: contain;          /* はみ出さず全部見せる */
  transform: scale(1.00);
  transition: transform .25s ease;
}

/* ちょいホバーで気持ちよく */
.ks-card:hover .ks-card__img{
  transform: scale(1.04);
}

/* 吹き出し化（タイトル） */
.ks-fv__balloon{
display: inline-block;
    position: relative;
    margin: 0 0 22px;
    padding: 18px 22px;
    max-width: 520px;
    color: #1b2b4a;
    background: rgba(255, 255, 255, .92);
    border: 3px solid rgba(27, 43, 74, .25);
    border-radius: 22px;
    font-weight: 900;
    letter-spacing: .02em;
    font-size: 54px;
    line-height: 1.15;
    text-shadow: none;
    transform: none;
    box-shadow: 0 18px 36px rgba(0, 0, 0, .18);
    backdrop-filter: blur(3px);
    left: -115px;
    top: -25px;
}

/* しっぽ（右のキャラに向ける） */
.ks-fv__balloon::after{
  content:"";
  position:absolute;

  /* 右側にしっぽを出してキャラへ */
  right: -14px;
  top: 62%;

  width: 26px;
  height: 26px;
  background: rgba(255,255,255,.92);

  /* 三角っぽく */
  transform: translateY(-50%) rotate(45deg);

  /* 枠線っぽさも合わせる */
  border-right: 3px solid rgba(27,43,74,.25);
  /*border-bottom: 3px solid rgba(27,43,74,.25);*/
  border-radius: 4px;
	
}

/* 吹き出しを “キャラ側” に寄せる（しゃべってる感） */
.ks-fv__left{
  display:flex;
  flex-direction:column;
  align-items:flex-end; /* 右寄せ */
}

/* パネルは左寄せのままが良ければ、ここで戻す */
.ks-fv__panel{
  align-self:flex-start; /* パネルだけ左に置く */
}

/* 右側：赤丸消す場合の余白調整（任意） */
.ks-fv__right{
  min-height: 360px;
}



.ks-stock{
  position:relative;
  overflow:hidden;
  padding:70px 0;

}

.ks-stock::before{
  /* 粒子（ノイズ風）っぽいドットをうっすら */
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(80,60,0,.10) 1px, transparent 1.6px);
  background-size: 22px 22px;
  opacity:.12;
  pointer-events:none;
}

@media (max-width: 1150px){
	.ks-fv__balloon{
		    font-size: 44px;
		    top: -3px;
	}
	.ks-fv__panelOff{
		    font-size: 72px;
	}
	
}
@media (max-width: 980px){
	    .ks-fv__balloon {
        left: -184px;
    }
}

@media (max-width: 720px){
      .ks-fv__left {
        align-items: flex-start;
        margin-bottom: 169px;
        text-align: center;
    }

  .ks-fv__balloon{
        font-size: 40px;
        max-width: 100%;
        font-size: 32px;
        padding: 14px 16px;
        border-radius: 18px;
	          width: 280px;
	  left: -60px;
        top: -26px;

  }

	.kp-point.is-even .kp-point__inner{
		grid-template-columns: auto;
	
}
  /* しっぽを下向きに変更 */
  .ks-fv__balloon::after{
    right: 18px;
    top: auto;
    bottom: -14px;
    transform: rotate(45deg);
  }
	.ks-fv__prod--tank {
        right: -22%;
        bottom: 175px;
        /* width: 220px; */
        height: 406px;
}
	.tomimg{
height: 40%;
        position: absolute;
        top: 45%;
        left: 5%;
        transform: translate(0, -65%);

}
}

	

.ks-work-marquee{
  position:relative;
  overflow:hidden;
  padding: 0 0 70px 0;
  background:
    radial-gradient(800px 380px at 18% 45%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%),
    radial-gradient(900px 420px at 82% 55%, rgba(255,255,255,.70), rgba(255,255,255,0) 65%),
    linear-gradient(135deg, #fff7cc 0%, #fff 42%, #fff2b8 100%);
}

.ks-work-marquee::before{
  /* 粒子（ノイズ風）っぽいドットをうっすら */
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(80,60,0,.10) 1px, transparent 1.6px);
  background-size: 22px 22px;
  opacity:.12;
  pointer-events:none;
}

.ks-flowCard__icon img{
	    max-width: 65px;
}

.nihon{
	position:absolute;
	    width: 80%;
}

/* =========================
  キャンペーンセクション
========================= */
.ks-camp{
  --bg1:#f6c356;
  --bg2:#ffd98a;
  --line:#ff6c00;
  --shadow: 0 12px 24px rgba(0,0,0,.12);
  --radius: 24px;
  padding: 22px 0 0;
}

.ks-camp__inner{
  width:100%;
  margin-inline:auto;
}

.ks-camp__hero{
  position:relative;
  border-radius: var(--radius);

  background: linear-gradient(180deg, var(--bg2), var(--bg1));
  box-shadow: var(--shadow);

  display:grid;

  align-items: center;
}
.ks-camp__hero img{
	    width: 100%;
}


/* 前面コンテンツ */
.ks-camp__left,
.ks-camp__center,
.ks-camp__right{
  position:relative;
  z-index:1;
}

/* 左：メモ＋キャラ */
.ks-camp__note{
  display:flex;
  align-items:flex-start;
  gap:10px;
  background: rgba(255,255,255,.8);
  border: 2px solid rgba(0,0,0,.15);
  border-radius: 14px;
  padding: 10px 12px;
  max-width: 330px;
}
.ks-camp__noteTag{
  display:inline-grid;
  place-items:center;
  width:48px; height:48px;
  border-radius: 999px;
  background:#fff;
  border:2px solid rgba(0,0,0,.15);
  font-weight: 900;
  font-size: 12px;
}
.ks-camp__noteText{
  margin:0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
}

.ks-camp__mascot{
  margin-top: 10px;
  width: min(200px, 70%);
}
.ks-camp__mascot img{
  width:100%;
  height:auto;
  display:block;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.18));
}

/* 中央：見出し */
.ks-camp__topline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}

.ks-camp__topLabel{
  font-weight: 900;
  letter-spacing:.08em;
  font-size: 14px;
  background:#111;
  color:#fff;
  padding: 6px 10px;
  border-radius: 999px;
}

.ks-camp__headlineTop{
  font-weight: 900;
  font-size: clamp(22px, 2.5vw, 34px);
  color:#1c7f1c;
  -webkit-text-stroke: 6px rgba(255,255,255,.85);
  text-shadow: 0 6px 0 rgba(0,0,0,.18);
  paint-order: stroke fill;
}

.ks-camp__check{
  display:flex;
  align-items:center;
  gap:8px;
}
.ks-camp__checkCircle{
  width:42px; height:42px;
  border-radius:999px;
  background:#2fbf5b;
  color:#fff;
  display:grid;
  place-items:center;
  font-weight: 900;
  font-size: 22px;
  box-shadow: 0 8px 16px rgba(0,0,0,.15);
}
.ks-camp__checkText{
  font-weight: 900;
  font-size: 12px;
}

.ks-camp__titles{
  display:grid;
  gap: 6px;
  text-align:center;
}
.ks-camp__titleLine{
  font-weight: 1000;
  font-size: clamp(34px, 4vw, 58px);
  color:#e43a23;
  -webkit-text-stroke: 10px rgba(255,255,255,.92);
  text-shadow: 0 10px 0 rgba(0,0,0,.22);
  paint-order: stroke fill;
  letter-spacing: .03em;
}

/* CTA */
.ks-camp__cta{
  margin: 16px auto 0;
  width: min(560px, 95%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 16px;
  text-decoration:none;
  border-radius: 999px;
  padding: 16px 18px;
  background: linear-gradient(180deg, #ff4d2e, #d61f14);
  color:#fff;
  font-weight: 1000;
  font-size: clamp(16px, 2vw, 22px);
  box-shadow: 0 14px 22px rgba(0,0,0,.18);
  border: 4px solid rgba(255,255,255,.85);
  transition: transform .18s ease, filter .18s ease;
}
.ks-camp__cta:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
}
.ks-camp__ctaIcon{
  width:44px; height:44px;
  border-radius:999px;
  background: rgba(255,255,255,.22);
  display:grid;
  place-items:center;
  font-size: 22px;
}

/* 右：商品＋バッジ */
.ks-camp__brandBadge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
  margin-left: auto;
}

.ks-camp__product{
  position:relative;
  margin-top: 12px;
  height: 240px;
}
.ks-camp__img{
  position:absolute;
  width:auto;
  height:auto;
  max-height: 240px;
  max-width: 100%;
  display:block;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.18));
}
.ks-camp__img--tank{
  right: 0;
  top: 0;
  height: 240px;
}
.ks-camp__img--out{
  left: 0;
  bottom: 4px;
  height: 150px;
}

.ks-camp__priceBadge{
  position:absolute;
  right: 18px;
  bottom: 18px;
  z-index:2;
  width: 118px;
  height: 118px;
  display:grid;
  place-items:center;
  text-align:center;
  font-weight: 1000;
  color:#fff;
  line-height:1.1;
  background: #d51010;
  clip-path: polygon(
    50% 0%, 62% 10%, 78% 6%, 82% 20%, 96% 22%, 90% 38%,
    100% 50%, 90% 62%, 96% 78%, 82% 80%, 78% 94%, 62% 90%,
    50% 100%, 38% 90%, 22% 94%, 18% 80%, 4% 78%, 10% 62%,
    0% 50%, 10% 38%, 4% 22%, 18% 20%, 22% 6%, 38% 10%
  );
  box-shadow: 0 14px 20px rgba(0,0,0,.18);
  border: 5px solid rgba(255,255,255,.75);
  font-size: 16px;
}

/* 下の特徴ボックス列 
.ks-camp__features{
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  border: 4px solid var(--line);
  border-top: none;
  background: #fbf7ea;;
}
*/

.ks-camp__feat{
  padding: 10px 10px 12px;
  border-left: 3px solid var(--line);
  text-align:center;
}
.ks-camp__feat:first-child{ border-left:none; }

.ks-camp__featLead{
  font-size: 12px;
  font-weight: 800;
  color:#111;
  margin-bottom: 4px;
}
.ks-camp__featStrong{
  font-size: 18px;
  font-weight: 1000;
  color: var(--line);
  text-decoration: underline;
  text-decoration-thickness: 6px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255,230,0,.85);
}

/* =========================
  レスポンシブ
========================= */
@media (max-width: 1020px){
  .ks-camp__hero{
    grid-template-columns: 1fr;

  }
  .ks-camp__left{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
  }
  .ks-camp__mascot{ margin-top:0; width: 140px; }
  .ks-camp__right{
    display:grid;
    gap:10px;
    justify-items:center;
  }
  .ks-camp__product{ height: 220px; width:min(520px, 100%); }
  .ks-camp__img--tank{ height: 220px; }
  .ks-camp__img--out{ height: 140px; }
  .ks-camp__priceBadge{ position:relative; right:auto; bottom:auto; margin-top: 6px; }
  .ks-camp__features{ grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 560px){
  .ks-camp{ padding-top: 14px; }
  .ks-camp__note{ display:none; } /* スマホはスッキリ */
  .ks-camp__features{ grid-template-columns: repeat(2, 1fr); }
  .ks-camp__titleLine{ -webkit-text-stroke: 8px rgba(255,255,255,.92); }
}

:root{
  --navy:#172d7a;         /* 画像の紺っぽい色 */
  --bg:#eaf3fb;           /* セクション背景 */
  --card:#ffffff;
  --radius:18px;
}

.p-products{
  background:var(--bg);
  padding:56px 0 64px;
}

.p-products__inner{
  width:min(1100px, 92%);
  margin-inline:auto;
}

.p-products__title{
  text-align:center;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--navy);
  font-size:clamp(28px, 3.2vw, 44px);
  margin:0 0 28px;
}

.p-products__grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:26px;
}

.p-products__card{
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:2px solid var(--navy);
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:0 10px 22px rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease;
}

.p-products__card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 30px rgba(0,0,0,.12);
}

.p-products__thumb{
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,0));
  display:grid;
  place-items:center;
}

.p-products__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.p-products__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  background:#fff;
}

.p-products__name{
  margin:0;
  color:var(--navy);
  font-weight:800;
  line-height:1.15;
  font-size:22px;
}

.p-products__arrow{
  width:36px;
  height:36px;
  border-radius:999px;
  border:2px solid var(--navy);
  color:var(--navy);
  display:grid;
  place-items:center;
  flex:0 0 auto;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}

.p-products__card:hover .p-products__arrow{
  transform:translateX(2px);
  background:var(--navy);
  color:#fff;
}

/* レスポンシブ */
@media (max-width: 900px){
  .p-products__grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px){
  .p-products{ padding:44px 0 52px; }
  .p-products__grid{ grid-template-columns:1fr; gap:18px; }
  .p-products__name{ font-size:20px; }
}

:root{
  --navy:#172d7a;
  --bg:#eaf3fb;
  --card:#fff;
  --shadow:0 10px 22px rgba(0,0,0,.10);
  --radius:10px;
}

.rv{
  background:var(--bg);
  padding:72px 0 90px;
}
.rv__inner{
  width:min(1100px, 92%);
  margin-inline:auto;
}
.rv__title{
  text-align:center;
  color:var(--navy);
  font-weight:800;
  letter-spacing:.02em;
  font-size:clamp(26px, 3vw, 40px);
  margin:0 0 34px;
}

.rv__list{
  display:grid;
  gap:18px;
}

.rv__card{
  background:var(--card);
  border-radius:6px;
  box-shadow:var(--shadow);
  padding:18px 22px;
  display:grid;
  grid-template-columns:56px 1fr;
  gap:16px;
  align-items:start;
}

.rv__avatar{
  width:56px; height:56px;
  border-radius:999px;
  overflow:hidden;
  background:#dfe7f4;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.rv__avatar img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.rv__avatar--ph{
  width:100%; height:100%;
  background:#f4b59b;
}
.rv__initial{
  width:100%; height:100%;
  background:#6b2aa6;
  color:#fff;
  font-weight:800;
  display:grid;
  place-items:center;
  font-size:16px;
}

.rv__text{
  margin:0 0 10px;
  color:#1a1a1a;
  line-height:1.7;
  font-size:14px;
}

.rv__meta{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}

.rv__name{
  margin:0;
  font-weight:800;
  color:#111;
  font-size:16px;
}

.rv__right{
  display:flex;
  align-items:center;
  gap:10px;
}

.rv__stars{
  color:#f6a300;
  letter-spacing:1px;
  font-size:16px;
  line-height:1;
  white-space:nowrap;
}
.rv__stars span{ opacity:.35; }
.rv__stars .is-on{ opacity:1; }

.rv__ago{
  color:#6b7280;
  font-size:12px;
  font-weight:700;
}

.rv__g{
  display:inline-grid;
  place-items:center;
}

.rv__more{
  display:flex;
  justify-content:center;
  margin-top:22px;
}
.rv__btn{
  border:none;
  background:var(--navy);
  color:#fff;
  font-weight:800;
  padding:12px 28px;
  border-radius:6px;
  cursor:pointer;
  box-shadow:0 10px 18px rgba(23,45,122,.18);
  transition:transform .15s ease, opacity .15s ease;
}
.rv__btn:hover{ transform:translateY(-2px); }
.rv__btn:active{ transform:translateY(0); opacity:.9; }

/* SP */
@media (max-width: 600px){
  .rv__card{ grid-template-columns:44px 1fr; padding:14px 14px; }
  .rv__avatar{ width:44px; height:44px; }
  .rv__name{ font-size:15px; }
}


:root{
  --navy:#172d7a;
  --bg:#eaf3fb;
  --card:#ffffff;
  --line:rgba(17, 24, 39, .18);
}

.news{
  background:var(--bg);
  padding:70px 0;
}

.news__inner{
  width:min(1100px, 92%);
  margin-inline:auto;
}

.news__title{
  text-align:center;
  font-weight:800;
  font-size:clamp(28px, 3vw, 44px);
  margin:0 0 26px;
  color:#222;
  letter-spacing:.02em;
}

.news__box{
  background:var(--card);
  border-radius:4px;
  padding:34px 56px 26px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.news__list{
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid var(--line);
}

.news__item{
  border-bottom:1px solid var(--line);
}

.news__link{
  display:grid;
  grid-template-columns: 170px 1fr 28px;
  gap:18px;
  align-items:center;
  padding:16px 0;
  text-decoration:none;
  color:#333;
}

.news__date{
  font-variant-numeric: tabular-nums;
  color:#3b3b3b;
  font-weight:600;
}

.news__text{
  line-height:1.5;
}

.news__arrow{
  justify-self:end;
  color:var(--navy);
  font-size:28px;
  line-height:1;
  transform:translateY(-1px);
}

.news__link:hover .news__text{
  text-decoration:underline;
  text-underline-offset:3px;
}

.news__more{
  display:flex;
  justify-content:flex-end;
  margin-top:18px;
}

.news__moreLink{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--navy);
  text-decoration:none;
  font-weight:800;
}

.news__moreIcon{
  width:22px;
  height:22px;
  border-radius:999px;
  background:var(--navy);
  color:#fff;
  display:inline-grid;
  place-items:center;
  font-size:16px;
  line-height:1;
}

.news__moreLink:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

/* responsive */
@media (max-width: 860px){
  .news__box{ padding:28px 22px 22px; }
  .news__link{ grid-template-columns: 150px 1fr 24px; }
}
@media (max-width: 600px){
  .news__link{
    grid-template-columns: 1fr 24px;
    gap:10px;
    padding:14px 0;
  }
  .news__date{
    grid-column:1 / -1;
    font-size:13px;
    color:#555;
  }
}

:root{
  --navy:#172d7a;
  --blue:#0b5ea8;
  --bg:#eaf3fb;
  --card:#fff;
  --shadow:0 10px 24px rgba(0,0,0,.10);
}

.tvc{
  background:var(--bg);
  padding:50px 0 70px;
}

.tvc__inner{
  width:min(1100px, 92%);
  margin-inline:auto;
  background:var(--card);
  border-radius:6px;
  padding:42px 48px 46px;
  box-shadow:var(--shadow);
}

/* HERO */
.tvc__hero{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:24px;
  align-items:center;
  margin-bottom:20px;
}

.tvc__mascot{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:190px;
}
.tvc__mascot img{
  width:min(235px, 100%);
  height:auto;
  display:block;
}

.tvc__copy{
  color:var(--navy);
}
.tvc__kicker{
  margin:0 0 8px;
  font-weight:900;
  letter-spacing:.08em;
  font-size:28px;
  display:flex;
  gap:10px;
  align-items:center;
}
.tvc__kicker span{ color:#f3b13a; }

.tvc__sub{
  margin:0 0 10px;
  font-weight:700;
  opacity:.95;
}

.tvc__name{
  margin:0;
  font-weight:900;
  font-size:44px;
  letter-spacing:.04em;
  line-height:1.1;
}

.tvc__en{
  margin:8px 0 0;
  font-weight:800;
  font-style:italic;
  letter-spacing:.10em;
}

/* HEADLINE */
.tvc__headline{
  display:flex;
  justify-content:center;
  margin:18px 0 26px;
}
.tvc__headlineText{
  color:var(--navy);
  font-weight:900;
  letter-spacing:.35em;
  font-size:28px;
  padding-bottom:6px;
  border-bottom:3px dotted var(--navy);
}

/* GRID */
.tvc__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}

.tvc__video{
  appearance:none;
  border:none;
  background:transparent;
  padding:0;
  text-align:left;
  cursor:pointer;
}

.tvc__thumb{
  position:relative;
  display:block;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 8px 18px rgba(0,0,0,.14);
  background:#000;
  aspect-ratio: 16 / 9;
}
.tvc__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1);
  transition:transform .25s ease, opacity .25s ease;
  opacity:.96;
}

.tvc__play{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}
.tvc__play::before{
  content:"";
  width:62px; height:44px;
  border-radius:12px;
  background:rgba(255, 0, 0, .92);
  box-shadow:0 10px 18px rgba(0,0,0,.25);
}
.tvc__play::after{
  content:"";
  position:absolute;
  width:0; height:0;
  border-left:16px solid #fff;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  transform:translateX(3px);
}

.tvc__video:hover .tvc__thumb img{
  transform:scale(1.03);
  opacity:1;
}

.tvc__caption{
  display:block;
  margin-top:10px;
  color:#333;
  font-weight:700;
  font-size:14px;
  text-align:center;
}

/* CTA */
.tvc__cta{
  display:flex;
  justify-content:center;
  margin-top:26px;
}
.tvc__ctaBtn{
  width:min(760px, 100%);
    background: linear-gradient(90deg, #FFD54A, #FFB300);
  color:#fff;
  text-decoration:none;
  font-weight:900;
  padding:16px 22px;
  border-radius:999px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  box-shadow:0 14px 22px rgba(10,79,146,.22);
  letter-spacing:.04em;
  position:relative;
  overflow:hidden;
}

.tvc__ctaBtn strong{ font-size:1.06em; }
.tvc__ctaAr{ opacity:.9; }

.tvc__ctaBtn:hover{
  transform:translateY(-2px);
}
.tvc__ctaBtn{ transition:transform .18s ease; }

/* Modal */
.ytm{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}
.ytm.is-open{ display:block; }

.ytm__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
}

.ytm__panel{
  position:relative;
  width:min(980px, 92%);
  margin:6vh auto 0;
  background:#000;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}

.ytm__close{
  position:absolute;
  top:10px; right:12px;
  z-index:2;
  width:40px; height:40px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:24px;
  cursor:pointer;
}

.ytm__frame{
  aspect-ratio:16/9;
}

/* Responsive */
@media (max-width: 860px){
  .tvc__inner{ padding:30px 22px 34px; }
  .tvc__hero{ grid-template-columns:1fr; text-align:center; }
  .tvc__kicker{ justify-content:center; }
  .tvc__grid{ grid-template-columns:1fr; }
  .tvc__headlineText{ letter-spacing:.22em; font-size:24px; }
  .tvc__name{ font-size:38px; }
}

:root{
  --navy:#182e77;   /* 濃紺 */
  --yellow:#ffe600; /* 見出しの黄色 */
}

.price-banner{
  position:relative;
  background:var(--navy);
  color:#fff;
  padding:54px 0 58px;
  text-align:center;
  overflow:visible;
}

.price-banner__inner{
  width:min(1100px, 92%);
  margin-inline:auto;
}

.price-banner__title{
  margin:0 0 14px;
  font-weight:900;
  letter-spacing:.04em;
  font-size:clamp(28px, 3.4vw, 48px);
  line-height:1.15;
}

.price-banner__titleAccent{
  color:var(--yellow);
}

.price-banner__lead{
  margin:0 0 14px;
  font-weight:700;
  font-size:clamp(14px, 1.6vw, 18px);
  letter-spacing:.02em;
}

.price-banner__note{
  margin:0;
  font-size:clamp(12px, 1.3vw, 15px);
  line-height:1.9;
  opacity:.92;
}

/* 下の黄色▽（影つき） */
.price-banner__chev{
  position:absolute;
  left:50%;
  bottom:-34px;
  transform:translateX(-50%);
  width:min(340px, 70vw);
  height:68px;
  background:var(--yellow);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.18));
}

/* SP微調整 */
@media (max-width: 560px){
  .price-banner{ padding:44px 0 52px; }
  .price-banner__chev{ bottom:-30px; height:60px; }
}


:root{
  --navy:#172d7a;
  --bg:#eaf3fb;
  --yellow:#ffe600;
  --red:#d40012;
  --line:rgba(23,45,122,.35);
}

.cat{
  background:var(--bg);
  padding:46px 0 70px;
}

.cat__inner{
  width:min(1100px, 92%);
  margin-inline:auto;
}

.cat__head{
  display:flex;
  justify-content:center;
  margin-bottom:26px;
}

.cat__title{
  margin:0;
  font-weight:900;
  color:var(--navy);
  font-size:clamp(34px, 4vw, 56px);
  letter-spacing:.02em;
  position:relative;
  line-height:1.05;
}
.cat__title span{
  position:relative;
  z-index:1;
}
.cat__title::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:6px;
  width:calc(100% + 22px);
  height:.45em;
  background:var(--yellow);
  z-index:0;
}

/* ===== cards grid ===== */
.cat__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
  align-items:start;
}

/* ===== Product Card ===== */
.pCard{
  background:#fff;
  border:2px solid var(--navy);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 12px 24px rgba(0,0,0,.10);
}

.pCard__top{
  padding:10px 14px 8px;
  border-bottom:10px solid var(--navy);
  display:flex;
  justify-content:center;
  align-items:center;
}
.pCard__brand{
  font-weight:900;
  font-size:22px;
  color:#111;
}

.pCard__tags{
  display:flex;
  gap:8px;
  padding:10px 12px;
  justify-content:center;
  flex-wrap:wrap;
}
.tag{
  border:1px solid rgba(0,0,0,.25);
  padding:3px 8px;
  border-radius:3px;
  font-size:12px;
  font-weight:800;
  background:#fff;
}

.pCard__mid{
  position:relative;
  padding:12px 12px 4px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:210px;
}
.pCard__img{
  width:min(220px, 90%);
  height:auto;
  display:block;
}
.pCard__badge{
  position:absolute;
  left:12px;
  bottom:12px;
  background:linear-gradient(180deg, #ffd7a5, #ffbf6a);
  color:#b10000;
  border-radius:50%;
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  text-align:center;
  font-weight:900;
  font-size:11px;
  line-height:1.05;
  box-shadow:0 8px 14px rgba(0,0,0,.18);
}
.pCard__badge b{ font-size:20px; }

.pCard__eco{
  position:absolute;
  right:12px;
  bottom:14px;
  font-weight:900;
  color:#0b57a8;
  font-size:14px;
  background:#fff;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(11,87,168,.35);
}

.pCard__model{
  background:#cfe2f7;
  color:var(--navy);
  text-align:center;
  font-weight:900;
  padding:8px 10px;
  font-size:20px;
  letter-spacing:.02em;
}

/* table */
.pCard__tbl{
  padding:12px 12px 8px;
}
.row{
  display:grid;
  grid-template-columns: 86px 1fr;
  gap:10px;
  align-items:center;
  border:1px solid rgba(0,0,0,.12);
  border-radius:6px;
  padding:10px 10px;
  margin-bottom:10px;
	position:relative;
}
.row--head{
  grid-template-columns:1fr;
  justify-items:center;
  background:var(--navy);
  color:#fff;
  font-weight:900;
  border:none;
  padding:8px 10px;
}
.row--head span{ letter-spacing:.06em; }

.row--price{
  border-color:rgba(0,0,0,.15);
}
.label{
  font-weight:900;
  color:#111;
  background:#f1f1f1;
  border-radius:4px;
  padding:6px 8px;
  text-align:center;
  font-size:12px;
}
.label--blue{
  background:#e5f0ff;
  color:#0b4bb0;
}
.label--navy{
  background:var(--navy);
  color:#fff;
}
.label small{
  display:block;
  font-weight:700;
  opacity:.92;
  font-size:11px;
  margin-top:2px;
}

.val{
  font-weight:900;
  text-align:right;
  font-variant-numeric: tabular-nums;
}
.val--red{ 
	color:var(--red);
	font-size:18px;
}
.tax{ font-size:11px; font-weight:800; margin-left:3px; color:#444; }

.off{
  background:var(--red);
  color:#fff;
  border-radius:6px;
  text-align:center;
  padding:8px 6px;
  font-weight:900;
  line-height:1.1;
	    position: absolute;
    left: 100px;
}
.off2{
	    background: var(--red);
    color: #fff;
    border-radius: 6px;
    text-align: center;
    padding: 8px 6px;
    font-weight: 900;
    line-height: 1.1;
    position: absolute;
    left: 183px;
    top: -10px;
    font-size: 13px;
}
.off b{ font-size:18px; display:block; }
.off small{ font-size:12px; display:block; }
.off--empty{ background:transparent; }

.off2 b{ font-size:18px; display:block; }
.off2 small{ font-size:12px; display:block; }
.off2--empty{ background:transparent; }

@media (max-width: 1200px){
	.val--red{
		font-size: 16px;
	}
	.off2{
		left: 160px;
	}
}

.pCard__totalHead{
  background:linear-gradient(90deg, rgba(212,0,18,.15), rgba(212,0,18,.02));
  color:var(--red);
  font-weight:900;
  text-align:center;
  padding:10px 12px;
  border-top:1px solid rgba(0,0,0,.08);
}

.pCard__total{
  position:relative;
  text-align:center;
  padding:14px 12px 18px;
  background:#fff;
}
.pCard__total::after{
  /* 黄色の下地 */
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:10px;
  height:22px;
  background:var(--yellow);
  z-index:0;
}
.yen, .yenSub, .taxChip{ position:relative; z-index:1; }

.yen{
  font-weight:1000;
  color:var(--red);
  font-size:54px;
  letter-spacing:.02em;
  font-variant-numeric: tabular-nums;
}
.yenSub{
  font-weight:1000;
  color:var(--red);
  font-size:22px;
  margin-left:2px;
}
.taxChip{
  display:inline-block;
  margin-left:8px;
  background:var(--red);
  color:#fff;
  font-weight:900;
  font-size:12px;
  padding:2px 2px;
  border-radius:6px;
  vertical-align:super;
}

/* ===== more card ===== */
.cat__moreRow{
  display:flex;
  justify-content:center;
  margin:34px 0 22px;
}

.moreCard{
  width:min(520px, 92%);
  display:grid;
  grid-template-columns: 1fr 220px 34px;
  align-items:stretch;
  border:1px solid rgba(23,45,122,.35);
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:0 10px 18px rgba(0,0,0,.08);
}
.moreCard__txt{
  padding:18px 18px;
}
.moreCard__ttl{
  font-weight:900;
  color:var(--navy);
  font-size:33px;
  line-height:1.1;
}
.moreCard__sub{
  margin-top:10px;
  color:var(--navy);
  font-weight:800;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:8px;
}
.moreCard__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.moreCard__arrow{
  display:grid;
  place-items:center;
  color:var(--navy);
  font-size:28px;
}

/* ===== bottom pill button ===== */
.cat__bottom{
  display:flex;
  justify-content:center;
}
.pillBtn{
  background:var(--navy);
  color:#fff;
  font-weight:900;
  text-decoration:none;
  padding:14px 26px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  box-shadow:0 14px 22px rgba(23,45,122,.18);
}
.pillBtn__ar{
  width:24px; height:24px;
  border-radius:999px;
  background:#fff;
  color:var(--navy);
  display:grid;
  place-items:center;
  font-size:16px;
  line-height:1;
}

/* responsive */
@media (max-width: 980px){
  .cat__grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 640px){
  .cat__grid{ grid-template-columns:1fr; }
  .moreCard{ grid-template-columns: 1fr 140px 34px; }
  .yen{ font-size:48px; }
}



:root{
  --navy:#172d7a;
  --bg:#eaf3fb;
  --card:#fff;
  --line:rgba(23,45,122,.35);
  --shadow:0 10px 24px rgba(0,0,0,.08);
}

.mk{
  background:var(--bg);
  padding:42px 0 60px;
}

.mk__inner{
  width:min(1100px, 92%);
  margin-inline:auto;
}

/* ===== 含まれる内容 ===== */
.mk__included{
  display:grid;
  grid-template-columns: 260px 1fr;
  border:2px solid var(--navy);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 18px rgba(0,0,0,.06);
  margin-bottom:26px;
}

.mk__includedLabel{
  background:linear-gradient(90deg, #FFD54A, #FFB300);
  color:#fff;
  font-weight:900;
  padding:18px 18px;
  line-height:1.25;
  font-size:18px;
  display:flex;
  align-items:center;
}

.mk__includedText{
  padding:18px 22px;
  color:#1f2937;
  font-weight:700;
  line-height:1.8;
  font-size:14px;
  display:flex;
  align-items:center;
}

/* ===== 対応メーカー ===== */
.mk__card{
  background:var(--card);
  border-radius:10px;
  padding:30px 34px 34px;
  box-shadow:var(--shadow);
}

.mk__title{
  margin:0;
  text-align:center;
  color:var(--navy);
  font-weight:900;
  font-size:clamp(26px, 2.6vw, 38px);
  letter-spacing:.04em;
}

.mk__rule{
  height:2px;
  background:var(--navy);
  opacity:.85;
  margin:14px auto 24px;
  width:min(720px, 90%);
}

/* ロゴ並び */
.mk__logos{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:22px 34px;
  padding:4px 0 0;
}

.mk__logo{
  height:52px;          /* ロゴの高さ統一 */
  width:auto;
  object-fit:contain;
  filter: none;
}

/* ちょい大きさ差を吸収（必要なら個別クラス追加して調整OK） */
@media (max-width: 900px){
  .mk__included{ grid-template-columns: 220px 1fr; }
  .mk__logo{ height:46px; }
}

@media (max-width: 640px){
  .mk__included{ grid-template-columns: 1fr; }
  .mk__includedLabel{ justify-content:center; text-align:center; }
  .mk__includedText{ padding:14px 16px; }
  .mk__card{ padding:22px 18px 24px; }
  .mk__logo{ height:42px; }
}


:root{
  --navy:#172d7a;

  --card:#fff;
  --shadow:0 12px 26px rgba(0,0,0,.18);
  --blue:#2b74d6;
  --line:#06c755;
}

.cta{
  background:var(--bg);
  padding:54px 0 70px;
  color:#fff;
}

.cta__inner{
  width:min(1200px, 92%);
  margin-inline:auto;
}

.cta__head{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  margin-bottom:10px;
}

.cta__title{
  margin:0;
  font-weight:900;
  font-size:clamp(26px, 3vw, 40px);
  letter-spacing:.03em;
}

.cta__slash{
  margin:0;
  font-weight:900;
  opacity:.9;
  letter-spacing:.08em;
  font-size:clamp(18px, 2vw, 26px);
}

.cta__lead{
  margin:0 0 18px;
  text-align:center;
  opacity:.92;
  font-weight:700;
  font-size:14px;
}

/* chips */
.cta__chips{
  list-style:none;
  padding:0;
  margin:0 0 26px;
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.chip{
  border:1px solid rgba(255,255,255,.35);
  border-radius:10px;
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  background:rgba(255,255,255,.06);
}
.chip__ico{ font-size:18px; }
.chip__txt{ letter-spacing:.02em; }

/* cards */
.cta__cards{
  display:grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap:22px;
  align-items:stretch;
}

.ctaCard{
  background:var(--card);
  color:#1f2937;
  border-radius:6px;
  overflow:hidden;
  box-shadow:var(--shadow);
  position:relative;
}

.ctaCard__title{
  margin:0;
  padding:16px 18px;
  font-weight:900;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background:#fff;
}

.ctaCard__tIco{
  color:var(--navy);
  display:inline-grid;
  place-items:center;
}

.ctaCard__main{
  padding:18px 18px 16px;
}

.ctaCard__main--center{
  min-height:176px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ctaCard__tel{
  display:grid;
  gap:6px;
  margin-bottom:8px;
}

.ctaCard__telSmall{
  font-weight:900;
  color:#111;
  font-size:12px;
  opacity:.85;
}

.ctaCard__telNum{
  font-weight:1000;
  color:#d10012;
  font-size:32px;
  letter-spacing:.03em;
  font-variant-numeric: tabular-nums;
}

.ctaCard__note{
  margin:0 0 14px;
  font-size:12px;
  line-height:1.7;
  color:#374151;
}

.ctaCard__foot{
  margin:12px 0 0;
  text-align:center;
  font-size:12px;
  color:#374151;
  font-weight:700;
}

/* buttons */
.ctaBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-decoration:none;
  color:#fff;
  font-weight:900;
  padding:14px 16px;
  border-radius:999px;
  box-shadow:0 12px 18px rgba(0,0,0,.12);
  transition:transform .16s ease, opacity .16s ease;
  width:100%;
  max-width:360px;
  margin-inline:auto;
}

.ctaBtn:hover{ transform:translateY(-2px); }
.ctaBtn:active{ transform:translateY(0); opacity:.92; }

.ctaBtn__ar{
  width:24px; height:24px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  display:inline-grid;
  place-items:center;
  font-size:18px;
  line-height:1;
}

.ctaBtn--navy{ background:#14306f; }
.ctaBtn--blue{ background:var(--blue); }
.ctaBtn--line{ background:var(--line); color:#062b14; }
.ctaBtn--line .ctaBtn__ar{ background:rgba(0,0,0,.12); }

/* responsive */
@media (max-width: 980px){
  .cta__cards{ grid-template-columns: 1fr; }
  .ctaCard__main--center{ min-height:auto; padding:22px 18px; }
}

:root{
  --navy:#122a74;
  --navy2:#0f2a74;
  --step:#21408f;
  --yellow:#ffe600;
}

.flow{
  background:linear-gradient(180deg, #ff7a1a 0%, #ff6000 55%, #e84f00 100%);
  color:#fff;
  padding:62px 0 70px;
}

.flow__inner{
  width:min(1200px, 92%);
  margin-inline:auto;
}

.flow__title{
  margin:0 0 30px;
  text-align:center;
  font-weight:1000;
  font-size:clamp(30px, 3.4vw, 50px);
  letter-spacing:.04em;
  position:relative;
  display:inline-block;
  left:50%;
  transform:translateX(-50%);
  padding-bottom:14px;
}
.flow__title::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:220px;
  height:10px;
  background:var(--yellow);
}

/* ===== STEP BAR ===== */
.flow__steps{
  list-style:none;
  padding:0;
  margin:0 0 30px;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:0;
  border-radius:8px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
}

.flowStep{
  position:relative;
  background:#f9ff00;
  text-align:center;
  padding:18px 10px;
  font-weight:1000;
  letter-spacing:.08em;
  font-style:italic;
}
.flowStep span{ 
	opacity:.95; 
	color: #000000;
}

.flowStep:not(:last-child)::after{
  content:"";
  position:absolute;
  top:0; right:-34px;
  width:0; height:0;
  border-top:28px solid transparent;
  border-bottom:29px solid transparent;
  border-left:34px solid #ff7a1a;
  z-index:2;
}


/* ===== 5 COLUMNS ===== */
.flow__cols{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:26px;
  margin-bottom:18px;
}

.flowCol__head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}

.flowCol__ico{
  width:40px; height:40px;
  border-radius:999px;
  background:var(--yellow);
  color:var(--navy2);
  display:grid;
  place-items:center;
  flex:0 0 auto;
}

.flowCol__ttl{
  margin:0;
  color:var(--yellow);
  font-weight:1000;
  letter-spacing:.02em;
  font-size:18px;
}

.flowCol__txt{
  margin:0;
  line-height:1.8;
  font-weight:700;
  opacity:.95;
  font-size:13px;
}

/* bottom */
.flow__note{
  text-align:center;
  margin:26px 0 18px;
  opacity:.92;
  font-weight:800;
  font-size:13px;
}

.flow__btns{
  display:flex;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
}

.flowBtn{
  background:#fff;
  color:var(--navy2);
  text-decoration:none;
  font-weight:1000;
  padding:16px 26px;
  border-radius:999px;
  min-width:min(420px, 92vw);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  box-shadow:0 16px 26px rgba(0,0,0,.18);
  transition:transform .16s ease, opacity .16s ease;
}
.flowBtn:hover{ transform:translateY(-2px); }
.flowBtn span{
  width:24px; height:24px;
  border-radius:999px;
  background:rgba(15,42,116,.12);
  display:grid;
  place-items:center;
  font-size:18px;
}

/* ===== responsive ===== */
@media (max-width: 980px){
  .flow__steps{ grid-template-columns:1fr; }
  .flowStep:not(:last-child)::after,
  .flowStep:not(:first-child)::before{ display:none; }

  .flow__cols{ grid-template-columns:1fr; gap:16px; }
  .flowCol{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    padding:14px 14px;
    border-radius:10px;
  }
}

:root{
  --navy:#ff6000;
  --text:#222;
  --muted:#666;
  --line:rgba(17, 24, 39, .18);
	--bg: #fbf7ea;
}

.faq{
  background:#fff;
  padding:70px 0;
}

.faq__inner{
  width:min(1100px, 92%);
  margin-inline:auto;
}

.faq__title{
  text-align:center;
  margin:0;
  font-weight:900;
  color:var(--text);
  font-size:clamp(28px, 3vw, 40px);
  letter-spacing:.02em;
}

.faq__lead{
  text-align:center;
  margin:10px 0 26px;
  color:var(--muted);
  font-weight:600;
  font-size:14px;
}

.faq__list{
  border-top:1px solid var(--line);
}

.faq__item{
  border-bottom:1px solid var(--line);
}

.faq__q{
  list-style:none;
  display:grid;
  grid-template-columns: 44px 1fr 28px;
  gap:14px;
  align-items:center;
  padding:18px 0;
  cursor:pointer;
}

.faq__q::-webkit-details-marker{ display:none; }

.faq__qIcon{
  width:34px;
  height:34px;
  border-radius:999px;
  background:var(--navy);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
}

.faq__qText{
  color:#2b2b2b;
  font-weight:700;
  line-height:1.5;
}

.faq__chev{
  justify-self:end;
  width:18px;
  height:18px;
  border-right:2px solid var(--navy);
  border-bottom:2px solid var(--navy);
  transform:rotate(45deg);
  transition:transform .18s ease;
  margin-right:4px;
}
.area{
  background:var(--bg);
  padding:60px 0;
}

.area__inner{
  width:min(1200px, 92%);
  margin-inline:auto;
}

.area__box{
  background:var(--card);
  border-radius:6px;
  padding:34px 40px;
  box-shadow:var(--shadow);
}

/* 見出し */
.area__head{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  margin:0 0 22px;
}

.area__title{
  margin:0;
  font-weight:900;
  color:#222;
  font-size:clamp(18px, 2.2vw, 28px);
  letter-spacing:.02em;
}

/* パンッの装飾（左右の“とげ”） */
.area__burst{
  width:22px; height:22px;
  position:relative;
  flex:0 0 auto;
}
.area__burst::before,
.area__burst::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:6px; height:28px;
  background:var(--navy);
  border-radius:2px;
  transform-origin:center;
}
.area__burst::before{ transform:translate(-50%,-50%) rotate(25deg); }
.area__burst::after { transform:translate(-50%,-50%) rotate(-25deg); }
.area__burst--l{ margin-left:4px; }
.area__burst--r{ margin-left:6px; }

/* 2カラム */
.area__grid{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:34px;
  align-items:center;
}

/* 左：円形画像枠 */
.area__circle{
  margin:0;
  width:min(360px, 100%);
  aspect-ratio: 1 / 1;
  border-radius:999px;
  overflow:hidden;
  justify-self:center;
}
.area__circle img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 右：日本地図の画像枠 */
.area__map{
  margin:0;
  width:100%;
  max-width:720px;
  justify-self:end;
}
.area__map img{
  width:100%;
  height:auto;
  display:block;
}

/* レスポンシブ */
@media (max-width: 900px){
  .area__box{ padding:26px 22px; }
  .area__grid{
    grid-template-columns: 1fr;
    gap:22px;
  }
  .area__map{ justify-self:center; }
}
/* open状態 */
.faq__item[open] .faq__chev{
  transform:rotate(-135deg);
}

/* answer */
.faq__a{
  padding:0 0 18px;
}

.faq__aInner{
  display:grid;
  grid-template-columns: 44px 1fr;
  gap:14px;
  align-items:start;
}

.faq__aIcon{
  width:34px;
  height:34px;
  border-radius:999px;
  background:#eef2ff;
  color:var(--navy);
  display:grid;
  place-items:center;
  font-weight:900;
}

.faq__aText{
  margin:4px 0 0;
  color:#374151;
  line-height:1.8;
  font-size:14px;
}

/* more link */
.faq__more{
  display:flex;
  justify-content:flex-end;
  margin-top:18px;
}

.faq__moreLink{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--navy);
  text-decoration:none;
  font-weight:900;
}

.faq__moreIcon{
  width:22px;
  height:22px;
  border-radius:999px;
  background:var(--navy);
  color:#fff;
  display:inline-grid;
  place-items:center;
  font-size:16px;
  line-height:1;
}

.faq__moreLink:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

@media (max-width: 600px){
  .faq__q{ grid-template-columns: 40px 1fr 22px; padding:14px 0; }
  .faq__qIcon, .faq__aIcon{ width:30px; height:30px; }
  .faq__qText{ font-size:14px; }
}

/* 初期：PCのみ表示 */
.nav-mobile{ 
	display:none !important; 
	list-style: none;
}

/* SPだけ切替 */
@media (max-width: 760px){
  .nav-desktop{ display:none !important; }
  .nav-mobile{ display:block !important; }
}

/* =========================
   ヘッダーメニュー中央寄せ
========================= */
.ks-nav{
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 100%;

}

/* ul自体を中央に */
.ks-nav .menu,
.ks-nav ul{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* 各メニュー */
.ks-nav .menu > li,
.ks-nav ul > li{
  position: relative;
  display: flex;
  align-items: center;
}

/* リンク */
.ks-nav .menu > li > a,
.ks-nav ul > li > a{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 28px;
  color: #000;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
	    font-size: 18px;
	    margin-right: 20px;	
}

 @media (min-width: 900px) {
/* メニュー間の棒 */
.ks-nav .menu > li:not(:last-child)::after,
.ks-nav ul > li:not(:last-child)::after{
  content: "";
  width: 1px;
  height: 22px;
  background: rgba(43, 79, 156, 0.35);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
}

/* hover */
.ks-nav .menu > li > a:hover,
.ks-nav ul > li > a:hover{
  color: #163a7a;
}


/* =========================
   campaign
========================= */
.ks-camp{
  --bg: #fff8ee;
  --bg2: #fff3dc;
  --card: #fffdf8;
  --line: #f4b24b;
  --line2: #ffd36b;
  --text: #3b2a18;
  --accent: #f57c00;
  --accent2: #ffb300;
  --shadow: 0 10px 24px rgba(0,0,0,.10);
  position: relative;
  padding: 0;
  background: #f5f0e6;
}



.ks-camp__hero{
  position: relative;
  z-index: 1;
}

.ks-camp__hero img{
  display: block;
  width: 100%;
  height: auto;
}

/* 特徴一覧 */
.ks-camp__features{
  position: relative;
  z-index: 2;

  margin: 5px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: stretch;
}

/* 各カード */
.ks-camp__feat{
  position: relative;
  background:
    linear-gradient(180deg, var(--card) 0%, #fff6e7 100%);
  border: 2px solid var(--line);
  border-radius: 18px;
  padding: 5px 10px;
  text-align: center;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/*
.ks-camp__feat::before{
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 6px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, var(--accent2) 0%, var(--accent) 100%);
}
*/


.ks-camp__feat:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0,0,0,.13);
  border-color: #ee9b1f;
}

.ks-camp__featLead{
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff1c9;
  color: #7a5715;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .03em;
}

.ks-camp__featStrong{
  display: block;
  color: var(--accent);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .03em;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

/* タブレット */
@media (max-width: 1024px){
  .ks-camp__features{
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: -10px;
  }

  .ks-camp__feat{
    border-radius: 16px;
    padding: 12px 8px 11px;
  }

  .ks-camp__featLead{
    font-size: 11px;
    padding: 4px 8px;
    margin-bottom: 7px;
  }

  .ks-camp__featStrong{
    font-size: clamp(17px, 2vw, 22px);
  }
}

/* SP */
@media (max-width: 767px){
  .ks-camp{
    padding-bottom: 22px;
  }

  .ks-camp__features{
    width: min(96%, 520px);
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 14px auto 0;
  }

  .ks-camp__feat{
    min-height: 84px;
    border-radius: 14px;
    padding: 11px 8px 10px;
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
  }

  .ks-camp__feat::before{
    left: 10px;
    right: 10px;
    height: 5px;
  }

  .ks-camp__featLead{
    font-size: 11px;
    margin-bottom: 6px;
  }

  .ks-camp__featStrong{
    font-size: 18px;
  }
}




/* =========================
   モバイル用 ドロワーメニュー
========================= */
@media (max-width: 900px) {
	.ks-topbtn.is-show {

    z-index: 9999;
}

  .ks-header {
    position: relative;
    z-index: 1000;
  }

  .ks-burger {
    display: block;
    position: absolute;
    right: 0;
    bottom: -5px;
    z-index: 1201;
    background: transparent;
    border: 0;
    padding: 10px;
    cursor: pointer;
  }

  .ks-burger span {
    display: block;
    width: 28px;
    height: 3px;
    margin: 5px 0;
    background: #1f3f8f;
    border-radius: 999px;
    transition: transform .3s ease, opacity .3s ease, background .3s ease;
  }

  /* ハンバーガー開いた時 → × */
  .ks-burger.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .ks-burger.is-open span:nth-child(2) {
    opacity: 0;
  }

  .ks-burger.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* 背景オーバーレイ */
  .ks-navOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 1190;
  }

  .ks-navOverlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* 右から出てくるメニュー本体 */
  .ks-headerNav {
    position: fixed;
    top: 0;
    right: 0;
    width: min(82vw, 320px);
    height: 100vh;
    background: #fff;
    box-shadow: -12px 0 30px rgba(0,0,0,.18);
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
    z-index: 1200;
    overflow-y: auto;
    padding: 90px 20px 30px;
  }

  .ks-headerNav.is-open {
    transform: translateX(0);
  }

  /* メニュー中身の例 */
  .ks-headerNav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ks-headerNav li {
    border-bottom: 1px solid #eee;
  }

  .ks-headerNav a {
    display: block;
    padding: 16px 8px;
    color: #333;
    text-decoration: none;
    font-weight: 700;
  }

  .ks-headerNav a:hover {
    background: #fff8e8;
  }

  body.is-menu-open {
    overflow: hidden;
  }
}

/* =========================
   Kaikae Sensei ContactForm7
========================= */

.ks-contact-page {
  background: #f7f7f7;
  padding: 60px 0 90px;
}

.ks-contact-container {
  width: min(1100px, 92%);
  margin: 0 auto;
}

.ks-contact-hero {
  position: relative;
  min-height: 280px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),url("../img/contact-hero.jpg") center/cover no-repeat;
}

.ks-contact-hero__title {
  color: #fff;
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .04em;
  text-shadow: 0 4px 18px rgba(0,0,0,.25);
}

.ks-contact-breadcrumb {
  width: min(1100px, 92%);
  margin: 18px auto 40px;
  font-size: 13px;
  color: #666;
}

.ks-contact-breadcrumb a {
  color: #1e3a8a;
  text-decoration: none;
}

.ks-contact-breadcrumb span {
  margin: 0 8px;
}

/* wrap */
.ks-cf7-wrap {
  background: transparent;
}

/* header */
.ks-cf7-head {
  margin-bottom: 26px;
}

.ks-cf7-head h2 {
  margin: 0;
  padding: 20px 24px;
  background: #fff4bf;
  border-bottom: 4px solid #1f3b8f;
  text-align: center;
  font-size: clamp(24px, 2.4vw, 40px);
  font-weight: 800;
  color: #222;
  line-height: 1.4;
  border-radius: 10px 10px 0 0;
}

.ks-cf7-note {
  margin: 18px 0 0;
  color: #e60033;
  font-size: 30px;
  font-weight: 800;
}

/* table-like layout */
.ks-cf7-table {
  border-top: 1px solid #cfcfcf;
  border-left: 1px solid #cfcfcf;
  background: #fff;
}

.ks-cf7-row {
  display: grid;
  grid-template-columns: 250px 1fr;
}

.ks-cf7-th,
.ks-cf7-td {
  border-right: 1px solid #cfcfcf;
  border-bottom: 1px solid #cfcfcf;
  padding: 18px 16px;
}

.ks-cf7-th {
  background: #f3f3f3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ks-cf7-label {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.6;
  color: #111;
}

.ks-cf7-required {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 28px;
  padding: 0 8px;
  border-radius: 4px;
  background: #1f3b8f;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

/* inputs */
.ks-cf7-wrap .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.ks-input,
.ks-textarea {
  width: 100%;
  border: 1px solid #cfcfcf;
  background: #fff;
  border-radius: 6px;
  padding: 14px 16px;
  font-size: 16px;
  line-height: 1.6;
  box-sizing: border-box;
}

.ks-input {
  height: 52px;
}

.ks-textarea {
  min-height: 160px;
  resize: vertical;
}

.ks-input:focus,
.ks-textarea:focus {
  outline: none;
  border-color: #f0c400;
  box-shadow: 0 0 0 3px rgba(240,196,0,.18);
}

.ks-cf7-help {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: #444;
}

/* name grid */
.ks-cf7-name-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* model */
.ks-cf7-model-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 16px;
  align-items: start;
}

.ks-cf7-model-form .ks-textarea {
  min-height: 110px;
}

.ks-cf7-guide {
  border: 2px solid #1f3b8f;
  background: #fff;
}

.ks-cf7-guide__head {
  background: #1f3b8f;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 8px;
}

.ks-cf7-guide__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 12px;
}

.ks-cf7-guide__item {
  border: 1px solid #d4d4d4;
  background: #fafafa;
  min-height: 100px;
  display: grid;
  place-items: center;
  padding: 10px;
}

.ks-cf7-guide__thumb {
  width: 100%;
  min-height: 78px;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    linear-gradient(135deg, #fff8d6 0%, #eef4ff 100%);
  color: #1f3b8f;
  font-weight: 700;
  font-size: 14px;
  border-radius: 6px;
}

/* radio */
.ks-cf7-radio-grid .wpcf7-form-control,
.ks-cf7-gas-options .wpcf7-form-control {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}

.ks-cf7-radio-grid .wpcf7-list-item,
.ks-cf7-gas-options .wpcf7-list-item {
  margin: 0;
}

.ks-cf7-radio-grid .wpcf7-list-item label,
.ks-cf7-gas-options .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 1.7;
  cursor: pointer;
}

.ks-cf7-radio-grid input[type="radio"],
.ks-cf7-gas-options input[type="radio"] {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: #1f3b8f;
}

/* gas area */
.ks-cf7-gas-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
  align-items: start;
}

.ks-cf7-gas-note {
  text-align: left;
}

.ks-cf7-gas-note__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, #fff9dd 0%, #fff 100%);
  color: #1f3b8f;
  font-weight: 700;
  margin-bottom: 10px;
}

.ks-cf7-gas-note p {
  margin: 0;
  color: #e60033;
  font-size: 14px;
  line-height: 1.7;
}

/* privacy */
.ks-cf7-privacy {
  margin-top: 28px;
  text-align: center;
  font-size: 16px;
  line-height: 1.8;
}

.ks-cf7-privacy a {
  color: #1f3b8f;
  text-decoration: underline;
}

.ks-cf7-privacy .wpcf7-list-item {
  margin: 0;
}

.ks-cf7-privacy label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.ks-cf7-privacy input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #1f3b8f;
}

/* submit */
.ks-cf7-submit {
  margin-top: 28px;
  text-align: center;
}

.ks-submit-btn {
  appearance: none;
  border: none;
  background: linear-gradient(135deg, #ffd400 0%, #f2b700 100%);
  color: #1f3b8f;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  padding: 22px 64px;
  min-width: 320px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
}

.ks-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(0,0,0,.16);
  opacity: .96;
}

/* CF7 messages */
.wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 15px;
}

.wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 13px;
}

.wpcf7-spinner {
  display: block;
  margin: 14px auto 0;
}

/* responsive */
@media (max-width: 991px) {
  .ks-cf7-row {
    grid-template-columns: 1fr;
  }

  .ks-cf7-th {
    padding: 14px 16px;
    align-items: center;
  }

  .ks-cf7-label {
    font-size: 16px;
  }

  .ks-cf7-model-grid,
  .ks-cf7-gas-grid {
    grid-template-columns: 1fr;
  }

  .ks-cf7-model-grid {
    gap: 18px;
  }
}

@media (max-width: 767px) {
  .ks-contact-page {
    padding: 40px 0 70px;
  }

  .ks-contact-hero {
    min-height: 180px;
  }

  .ks-contact-breadcrumb {
    margin: 14px auto 28px;
    font-size: 12px;
  }

  .ks-cf7-head h2 {
    padding: 16px 14px;
    font-size: 22px;
  }

  .ks-cf7-note {
    font-size: 24px;
  }

  .ks-cf7-name-grid {
    grid-template-columns: 1fr;
  }

  .ks-cf7-th,
  .ks-cf7-td {
    padding: 14px 12px;
  }

  .ks-input {
    height: 48px;
    font-size: 15px;
  }

  .ks-textarea {
    font-size: 15px;
  }

  .ks-cf7-radio-grid .wpcf7-form-control,
  .ks-cf7-gas-options .wpcf7-form-control {
    display: grid;
    gap: 10px;
  }

  .ks-submit-btn {
    width: 100%;
    min-width: 0;
    font-size: 18px;
    padding: 20px 24px;
  }
}


.kk-reason {
  background: #f3f3f3;
  padding: 110px 20px 120px;
  color: #2f3340;
}

.kk-reason__inner {
  width: min(1200px, 100%);
  margin: 0 auto;
}

.kk-reason__head {
  text-align: center;
  margin-bottom: 90px;
}

.kk-reason__sub {
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: #b89b52;
  text-transform: uppercase;
}

.kk-reason__title {
  margin: 0;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #2b3140;
}

.kk-reason__line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 26px auto 34px;
}

.kk-reason__line .is-gold,
.kk-reason__line .is-blue {
  display: block;
  height: 4px;
}

.kk-reason__line .is-gold {
  width: 42px;
  background: #c7a75b;
}

.kk-reason__line .is-blue {
  width: 42px;
  background: #f6c400;
}

.kk-reason__lead {
  max-width: 900px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 2.2;
  letter-spacing: 0.06em;
  color: #3f4350;
}

.kk-reason__list {
  display: flex;
  flex-direction: column;
  gap: 90px;
}

.kk-reasonCard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
}

.kk-reasonCard.is-reverse .kk-reasonCard__image {
  order: 2;
}

.kk-reasonCard.is-reverse .kk-reasonCard__body {
  order: 1;
}

.kk-reasonCard__image {
  position: relative;
}

.kk-reasonCard__image img {
  width: 100%;
  height: 430px;
  object-fit: cover;
  display: block;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08);
}

.kk-reasonCard__body {
  padding: 10px 0;
}

.kk-reasonCard__label {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #2f80d1;
}

.kk-reasonCard__title {
  margin: 0;
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: 1.75;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #2d3140;
}

.kk-reasonCard__rule {
  display: flex;
  align-items: center;
  margin: 24px 0 28px;
}

.kk-reasonCard__rule .is-blue {
  width: 70px;
  height: 4px;
  background: #f6c400;
  flex: 0 0 auto;
}

.kk-reasonCard__rule .is-gold {
  height: 2px;
  background: #c8b898;
  flex: 1 1 auto;
}

.kk-reasonCard__text {
  margin: 0;
  font-size: 17px;
  line-height: 2.25;
  letter-spacing: 0.04em;
  color: #3f4350;
}

.sp-only {
  display: none;
}

@media (max-width: 1024px) {
  .kk-reason {
    padding: 90px 20px 100px;
  }

  .kk-reason__head {
    margin-bottom: 70px;
  }

  .kk-reasonCard {
    gap: 34px;
  }

  .kk-reasonCard__image img {
    height: 360px;
  }

  .kk-reasonCard__title {
    font-size: 30px;
  }

  .kk-reasonCard__text,
  .kk-reason__lead {
    font-size: 16px;
    line-height: 2;
  }
}

@media (max-width: 768px) {
  .kk-reason {
    padding: 70px 16px 80px;
  }

  .kk-reason__head {
    margin-bottom: 54px;
  }

  .kk-reason__title {
    font-size: 28px;
    line-height: 1.6;
  }

  .kk-reason__lead {
    font-size: 15px;
    line-height: 2;
  }

  .kk-reason__lead br {
    display: none;
  }

  .kk-reason__list {
    gap: 56px;
  }

  .kk-reasonCard {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .kk-reasonCard.is-reverse .kk-reasonCard__image,
  .kk-reasonCard.is-reverse .kk-reasonCard__body {
    order: initial;
  }

  .kk-reasonCard__image img {
    height: 250px;
  }

  .kk-reasonCard__label {
    margin-bottom: 10px;
    font-size: 14px;
  }

  .kk-reasonCard__title {
    font-size: 24px;
    line-height: 1.7;
  }

  .kk-reasonCard__rule {
    margin: 16px 0 18px;
  }

  .kk-reasonCard__rule .is-blue {
    width: 54px;
  }

  .kk-reasonCard__text {
    font-size: 15px;
    line-height: 2;
  }

  .sp-only {
    display: inline;
  }
}


.cat__innerm {
    width: min(1200px, 92%);
    margin-inline: auto;
}

.cat__gridm {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    align-items: start;
}
@media (max-width: 980px){
	.cat__gridm {

    grid-template-columns: repeat(3, 1fr);

}
}

@media (max-width: 900px){
	    .off2 {
        left: 245px;
    }
	.cat__gridm {

    grid-template-columns: repeat(2, 1fr);

}
}

@media (max-width: 720px){
	.cat__gridm{
		    grid-template-columns: 1fr;
	}
	.off2{
		    left: 305px;
    top: -8px;
    font-size: 13px;
	}
	
	.ks-fv__panelTop{
		    align-items: flex-end;
	}
	    .ks-fv__panelOff {
        font-size: 58px;
    }
	.ks-fv__panelOff2 {
        font-size: 33px;
    }
	
}