/* base.css (generated) */
/* 目的：
   - includeヘッダー/フッター（assets/inc/header.html, footer.html）を意図どおり表示
   - cleaning.html のタブ（個人向け/法人向け）を正常に切替
   - 各ページ共通の最低限のレイアウト・ボタン・カードを提供
*/

:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --border:#e5e7eb;
  --text:#111827;
  --muted:#6b7280;
  --primary:#2563eb;
  --primary-ink:#ffffff;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --radius:16px;
  --radius-sm:12px;
  --container:1120px;
  --header-h:72px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
img{max-width:100%;height:auto}
a{color:inherit}
a:hover{opacity:.9}

main{
  display:block;
  padding: 0 16px 72px;
}
.section{
  max-width:var(--container);
  margin: 0 auto;
  padding: 28px 0;
}
.section .lead{color:var(--muted)}
.anchor{position:relative;top:calc(var(--header-h) * -1);display:block;height:0;visibility:hidden}

/* Card / grid */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:18px 18px;
}
.cards{
  display:grid;
  gap:16px;
}
@media (min-width: 860px){
  .cards.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cards.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.kicker{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}

h1,h2,h3{line-height:1.25;margin:0 0 12px}
h1{font-size:32px}
h2{font-size:24px}
h3{font-size:18px}
p{margin:0 0 10px}

/* Buttons */
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  text-decoration:none;
  background:#fff;
  color:var(--text);
  font-weight:650;
}
.btn.primary{
  background:var(--primary);
  border-color:var(--primary);
  color:var(--primary-ink);
}
.btn.secondary{background:#fff}
.btn:focus{outline:3px solid rgba(37,99,235,.25);outline-offset:2px}

/* =========================
   Header (site-header-v3)
   ========================= */
.site-header-v3{
  position: sticky;
  top:0;
  z-index: 999;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header-v3__inner{
  height: var(--header-h);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.site-header-v3__brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  min-width: 240px;
}
.site-header-v3__mark{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background-color: transparent;
  background-image: url('../img/brand/logo_mark.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: 0 10px 20px rgba(15,118,110,.14);
}
.site-header-v3__brandtext{display:flex;flex-direction:column;line-height:1.1}
.site-header-v3__brandname{font-size:15px;font-weight:800}
.site-header-v3__tagline{font-size:12px;color:var(--muted)}

.site-header-v3__nav{
  display:none;
  align-items:center;
  gap: 12px;
  /* 文字が縦割れしないように、PCナビは折り返さず横スクロールで逃がす */
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}
.site-header-v3__nav a{
  display:inline-flex;
  align-items:center;
  flex: 0 0 auto;
  white-space: nowrap;
  text-decoration:none;
  font-weight:650;
  color:var(--text);
  padding: 8px 6px;
  border-radius: 10px;
  border:0;
  background:transparent;
}
.site-header-v3__nav a:hover{background: rgba(17,24,39,.04)}

/* スクロールバーは基本的に見せない（必要ならOS設定に従って表示されます） */
.site-header-v3__nav::-webkit-scrollbar{height:0}

/* ナビが詰まりやすい幅では、ブランドの副文言を隠して横幅を確保 */
@media (max-width: 1400px){
  .site-header-v3__tagline{display:none}
  .site-header-v3__brand{min-width: 190px}
}

.site-header-v3__menu{margin-left:auto}
.site-header-v3__menu > summary{
  list-style:none;
  cursor:pointer;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid var(--border);
  background:#fff;
  user-select:none;
  font-weight:700;
}
.site-header-v3__menu > summary::-webkit-details-marker{display:none}
.site-header-v3__menu[open] > summary{box-shadow: var(--shadow)}

.site-header-v3__panel{
  position:absolute;
  right:16px;
  top: calc(var(--header-h) + 10px);
  width:min(420px, calc(100vw - 32px));
  background:#fff;
  border:1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 14px;
}
.site-header-v3__panelLinks{
  display:grid;
  gap: 8px;
}
.site-header-v3__panelLinks a{
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight:650;
}
.site-header-v3__panelLinks a:hover{background: rgba(17,24,39,.04)}
.site-header-v3__panelCta{
  display:flex;
  gap:10px;
  margin-top: 12px;
}
.site-header-v3__panelCta a{
  flex:1;
  text-align:center;
  padding:10px 12px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  border:1px solid var(--border);
}
.site-header-v3__panelCta a.is-phone{background:var(--primary);border-color:var(--primary);color:#fff}
.site-header-v3__panelCta a.is-mail{background:#fff;color:var(--text)}



/* --- Header v3 add-ons (CTA / mobile button) --- */
.site-header-v3__cta{
  display:flex;
  align-items:center;
  gap:10px;
}

.site-header-v3__ctaBtn{
  text-decoration:none;
  font-weight:800;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
}

.site-header-v3__ctaBtn.is-phone{
  background:var(--primary);
  border-color:var(--primary);
  color:var(--primary-ink);
}

.site-header-v3__ctaBtn.is-mail{
  background:#fff;
  color:var(--text);
}

/* モバイルメニュー（details/summary） */
.site-header-v3__mobile > summary{
  list-style:none;
  cursor:pointer;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  user-select:none;
}

.site-header-v3__mobile > summary::-webkit-details-marker{display:none}

.site-header-v3__mobile[open] > summary{box-shadow: var(--shadow)}

.site-header-v3__burger{
  display:inline-block;
  width:22px;
  height:14px;
  position:relative;
}

.site-header-v3__burger::before,
.site-header-v3__burger::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:var(--text);
  border-radius:2px;
}

.site-header-v3__burger::before{top:3px}
.site-header-v3__burger::after{bottom:3px}

@media (min-width: 1200px){
  .site-header-v3__nav{display:flex}
  .site-header-v3__menu{display:none}
}

/* =========================
   Footer (site-footer-v3)
   ========================= */
.site-footer-v3{
  margin-top: 56px;
  border-top: 1px solid var(--border);
  background: #fff;
}
.site-footer-v3__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px 16px;
  display:grid;
  gap: 18px;
}
.site-footer-v3__title{font-size:16px;font-weight:900}
.site-footer-v3__meta{font-size:12px;color:var(--muted);margin-top:4px}
.site-footer-v3__links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
}
.site-footer-v3__links a{
  text-decoration:none;
  color:var(--text);
  font-weight:650;
  padding:6px 8px;
  border-radius:10px;
}
.site-footer-v3__links a:hover{background: rgba(17,24,39,.04)}
.site-footer-v3__cta{display:flex;gap:10px;flex-wrap:wrap}
.site-footer-v3__bottom{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px 22px;
  color: var(--muted);
}

/* =========================
   Tabs (cleaning.html)
   ========================= */
.tabs{
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background:#fff;
}
.tab-input{position:absolute;opacity:0;pointer-events:none}
.tablist{
  display:flex;
  gap: 10px;
  padding: 14px 14px;
  border-bottom:1px solid var(--border);
  background: rgba(17,24,39,.02);
  flex-wrap:wrap;
}
.tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:800;
  cursor:pointer;
  user-select:none;
}
#tab-personal:checked ~ .tablist .tab-personal,
#tab-business:checked ~ .tablist .tab-business{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.tab-panels{padding: 18px 14px}
.tab-panel{display:none}
#tab-personal:checked ~ .tab-panels .panel-personal{display:block}
#tab-business:checked ~ .tab-panels .panel-business{display:block}

/* Page helpers */
.bullets{padding-left:18px;margin:0}
.bullets li{margin:6px 0}

/* =========================================================
   Step11: Organic Impact Theme (visual only / no behavior change)
   - 背景の白さを抑え、オーガニック訴求の色味に寄せる
   - 既存レイアウトは維持（CSS変数と装飾の上書き）
   ========================================================= */

:root{
  /* Organic palette */
  --primary:#0f766e;            /* deep teal (organic) */
  --primary-ink:#ffffff;
  --organic:#16a34a;            /* leaf green */
  --organic-ink:#052e16;
  --sand:#f6f3ea;
  --mint:#e8fbf4;
  --leaf:#d7fbe7;
  --shadow: 0 14px 40px rgba(24,33,47,.10);
}

/* Full-page background (subtle but "white-only" を脱却) */
body{
  background:
    radial-gradient(900px 520px at 12% 6%, rgba(22,163,74,.14), transparent 60%),
    radial-gradient(900px 520px at 88% 10%, rgba(15,118,110,.14), transparent 60%),
    linear-gradient(#ffffff, #ffffff);
}

/* Center helpers (他ページの左寄り/中央寄りブレ対策) */
.wrap{max-width:var(--container); margin:0 auto;}
.box{max-width:var(--container); margin:0 auto;}

/* Header tone */
.site-header-v3{
  background: rgba(255,255,255,.88);
}


/* Focus ring to match primary */
.btn:focus{outline:3px solid rgba(15,118,110,.28); outline-offset:2px}

/* Kicker -> organic pill */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,118,110,.20);
  background: rgba(232,251,244,.75);
  color: rgba(5,46,22,.85);
}

/* Section bands (full-bleed, but overflow しない方式) */
.section{position:relative; z-index:0;}
.section::before{
  content:"";
  position:absolute;
  top: 10px;
  bottom: 10px;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  border-radius: 26px;
  background: rgba(246,243,234,.70);
  z-index:-1;
  pointer-events:none;
}
main > section.section:nth-of-type(even)::before{
  background:
    radial-gradient(520px 220px at 15% 25%, rgba(22,163,74,.10), transparent 60%),
    radial-gradient(520px 220px at 85% 20%, rgba(15,118,110,.10), transparent 60%),
    rgba(232,251,244,.72);
}

/* Cards feel more "premium" on tinted background */
.card{
  border-color: rgba(17,24,39,.08);
  box-shadow: var(--shadow);
}

/* Buttons: stronger organic emphasis */
.btn.primary{
  box-shadow: 0 12px 24px rgba(15,118,110,.18);
}

/* Tabs: reduce flatness */
.tablist{
  background: rgba(232,251,244,.55);
}
.tab{
  background: rgba(255,255,255,.92);
}

/* Hero label: organic stamp */
.hero .service-label{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,118,110,.20);
  color: rgba(5,46,22,.85);
  box-shadow: 0 10px 22px rgba(15,118,110,.12);
}

/* Reduce the "text-only" impression: headings slightly heavier */
h1,h2{
  letter-spacing: .01em;
}

/* =========================================================
   V3 HEADER/FOOTER STABILIZATION PATCH (2026-01-22)
   目的:
   - PC幅で「電話/メール」が折り返して崩れる問題を防ぐ
   - 中間幅(900〜1200px)でもヘッダーのレイアウトを安定させる
   - site-v3.css の読み込み有無に依存せず、PC/SPの表示切替を成立させる
   - footer の nav(ul/li) を箇条書き表示にしない
   ========================================================= */

/* ---- Header: layout safety ---- */
.site-header-v3__inner{
  flex-wrap: nowrap;
}
.site-header-v3__brand{
  min-width: 0;          /* 伸縮を許可 */
  flex: 0 1 auto;
}
.site-header-v3__brandtext{
  min-width: 0;
}
.site-header-v3__brandname,
.site-header-v3__tagline{
  white-space: nowrap;
}
.site-header-v3__tagline{
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右側CTA（電話/メール）は折り返さない */
.site-header-v3__cta{
  flex: 0 0 auto;
  white-space: nowrap;
}
.site-header-v3__ctaBtn{
  flex: 0 0 auto;
  white-space: nowrap;
}

/* PCではモバイルメニューを隠す（site-v3.css が無い/壊れても安全） */
.site-header-v3__mobile{display:none;}
@media (max-width: 900px){
  .site-header-v3__mobile{display:block;}
}

/* 中間幅での詰まり対策（必要最小限） */
@media (max-width: 1200px){
  .site-header-v3__brand{min-width: 200px;}
  .site-header-v3__cta{gap:8px;}
  .site-header-v3__ctaBtn{padding:8px 10px;}
}

/* SPはモバイルメニューだけに寄せる（重複防止） */
@media (max-width: 900px){
  .site-header-v3__menu{display:none;}
}

/* ---- Footer: nav ul を既存デザインに寄せる ---- */
.site-footer-v3__nav ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
}
.site-footer-v3__nav li{margin:0;padding:0;}
.site-footer-v3__nav a{
  text-decoration:none;
  color:var(--text);
  font-weight:650;
  padding:6px 8px;
  border-radius:10px;
  display:inline-block;
}
.site-footer-v3__nav a:hover{background: rgba(17,24,39,.04);}

/* footer の2カラム */
@media (min-width: 900px){
  .site-footer-v3__inner{
    grid-template-columns: 1.2fr .8fr;
    align-items:start;
  }
}
.site-footer-v3__logo{font-size:16px;font-weight:900;}
.site-footer-v3__desc{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.6;}


/* =========================
   Header v3: two-row nav (PC) + clean markers
   ========================= */

/* PC/スマホ切替（中間幅で消えない / PCでモバイルが出ない） */
@media (min-width: 901px){
  .site-header-v3{ --header-h: 92px; }
  .site-header-v3__inner{ height:auto; padding-top:10px; padding-bottom:10px; align-items:flex-start; }
  .site-header-v3__nav{ display:flex; flex-direction:column; gap:8px; overflow:visible; }
  .site-header-v3__menu{ display:none; }
  .site-header-v3__mobile{ display:none; }
}
@media (max-width: 900px){
  .site-header-v3{ --header-h:72px; }
  .site-header-v3__inner{ height: var(--header-h); padding-top:0; padding-bottom:0; align-items:center; }
  .site-header-v3__nav{ display:none; }
  .site-header-v3__menu{ display:block; }
}

/* 二段ナビ（PC） */
.site-header-v3__navRow{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: nowrap;
}
.site-header-v3__navRow--top a{
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 750;
}
.site-header-v3__navLabel{
  padding: 0;
  border-radius: 0;
  font-weight: 900;
  color: rgba(16,24,40,.62);
  background: transparent;
}
.site-header-v3__navRow--sub{
  gap: 12px;
}
.site-header-v3__subGroup{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 6px 8px;
  border:1px solid var(--border);
  border-radius: 14px;
  background:#fff;
}
.site-header-v3__subGroup::before{
  content: attr(data-label);
  display:inline-flex;
  align-items:center;
  padding: 6px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(16,24,40,.72);
  background: rgba(16,24,40,.04);
}
.site-header-v3__subGroup a{
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 750;
  text-decoration:none;
  color: var(--text);
}
.site-header-v3__subGroup a:hover{ background: rgba(17,24,39,.04); }
.site-header-v3__subSep{
  width: 1px;
  height: 20px;
  background: rgba(16,24,40,.12);
  border-radius: 1px;
}

/* ︙（会社HP） */
.site-header-v3__more{ position: relative; }
.site-header-v3__more > summary{
  list-style:none;
  cursor:pointer;
  padding: 8px 10px;
  border-radius: 12px;
  user-select:none;
  font-weight: 900;
  line-height: 1;
}
.site-header-v3__more > summary::-webkit-details-marker{ display:none; }
.site-header-v3__more > summary::marker{ content:""; }
.site-header-v3__more > summary:hover{ background: rgba(17,24,39,.04); }

.site-header-v3__moreMenu{
  position:absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  background:#fff;
  border:1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap: 6px;
  z-index: 60;
}
.site-header-v3__more:not([open]) .site-header-v3__moreMenu{ display:none; }
.site-header-v3__moreMenu a{
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 750;
  color: var(--text);
}
.site-header-v3__moreMenu a:hover{ background: rgba(17,24,39,.04); }

/* モバイルパネル内：サービス/料金の見やすさ */
.site-header-v3__panelGroup{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 10px;
  background: rgba(16,24,40,.02);
}
.site-header-v3__panelLabel{
  font-weight: 900;
  color: rgba(16,24,40,.70);
  margin-bottom: 8px;
}
.site-header-v3__panelSubLinks{
  display:grid;
  gap: 8px;
}
.site-header-v3__panelSubLinks a{
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 750;
  background:#fff;
  border:1px solid var(--border);
  color: var(--text);
}
.site-header-v3__panelSubLinks a:hover{ background: rgba(17,24,39,.04); }

/* details の▼（標準マーカー）を完全に消す：Chrome/Edge/Firefox */
.site-header-v3 details > summary::-webkit-details-marker{ display:none; }
.site-header-v3 details > summary::marker{ content:""; }

/* Footer FAQ CTA (subtle) */
.footer-faq-cta-item{
  margin-top: 10px;
}

.footer-faq-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(8, 125, 110, .26);
  background: rgba(8, 125, 110, .08);
  color: #0b3a34;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.footer-faq-btn::after{
  content: "›";
  font-size: 18px;
  line-height: 1;
  opacity: .8;
  transform: translateY(-1px);
}

.footer-faq-btn:hover{
  background: rgba(8, 125, 110, .12);
  border-color: rgba(8, 125, 110, .36);
  transform: translateY(-1px);
}

.footer-faq-mini{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(11, 58, 52, .74);
  line-height: 1.45;
}

@media (max-width: 560px){
  .footer-faq-btn{
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
  }
}

/* === HERO title highlight (all pages) ============================ */
.hero-title{
  font-weight: 700;
  letter-spacing: .01em;
}
.hero-title .hl{
  background: linear-gradient(transparent 58%, rgba(63, 175, 124, .32) 58%);
  padding: 0 .14em;
  border-radius: .25em;
}

/* HERO lead: 読みやすさ＋要点だけ控えめに強調（all pages） */
.hero-title + .lead{
  line-height: 1.8;
}
.hero-title + .lead .hl2{
  background: linear-gradient(transparent 60%, rgba(63, 175, 124, .18) 60%);
  padding: 0 .10em;
  border-radius: .2em;
}



/* HERO (cleaning TOP): 3サービス案内文（追加のみ） */
.hero-services-note{
  margin-top: 10px;
  font-size: 14px;
  opacity: .85;
}

/* HERO note (organic policy) - quiet, consistent */
.hero-note{
  display:block;
  margin-top:8px;
  font-size:13px;
  opacity:.75;
}