@charset "utf-8";

/* =========================================================
   ココクリーン（特殊清掃・原状回復）demo
   CrowdWorks 13451143 / kiiycoo
   静的HTML（本番はご要望のCMS/静的いずれにも対応想定）
   ========================================================= */

:root{
  --bg:        #F6F5F1;
  --surface:   #FFFFFF;
  --surface-2: #ECEAE3;
  --ink:       #262A30;
  --ink-soft:  #5B6068;
  --ink-faint: #868C93;
  --line:      #DEDCD3;
  --line-soft: #E7E5DC;

  --navy:      #3B4A5E;
  --navy-deep: #263140;
  --navy-pale: #EEF1F4;

  --gold:      #A6875E;

  --maxw: 1080px;
  --pad:  clamp(20px, 5vw, 56px);
  --radius: 6px;
  --radius-sm: 3px;

  --sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --shadow: 0 18px 44px -22px rgba(38,42,48,.35);
  --shadow-sm: 0 8px 22px -14px rgba(38,42,48,.3);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.9;
  font-size:15.5px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
li{ list-style:none; }
button{ font:inherit; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

section{ padding-block:clamp(56px, 9vw, 108px); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--serif);
  letter-spacing:.16em;
  color:var(--navy);
  font-size:.8rem;
}
.eyebrow::before{ content:""; width:24px; height:1px; background:var(--gold); }

.sec-head{ margin-bottom:2.6rem; max-width:40em; }
.sec-head h2{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.4rem, 3.2vw, 1.9rem);
  line-height:1.6;
  margin-top:.6rem;
  letter-spacing:.02em;
  color:var(--ink);
}
.sec-head p{ color:var(--ink-soft); font-size:.92rem; margin-top:.9rem; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-size:.9rem; letter-spacing:.04em;
  padding:.95em 1.9em;
  border:1px solid var(--navy);
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--navy);
  transition:.22s ease;
}
.btn:hover{ background:var(--navy); color:#fff; }
.btn-primary{ background:var(--navy); border-color:var(--navy); color:#fff; }
.btn-primary:hover{ background:var(--navy-deep); border-color:var(--navy-deep); }
.btn svg{ width:17px; height:17px; flex:none; }

/* =========================================================
   disclaimer strip
   ========================================================= */
.disclaimer{
  background:var(--navy-deep); color:#cfd7e0;
  font-size:.72rem; text-align:center;
  padding:.55rem var(--pad); letter-spacing:.02em; line-height:1.7;
}

/* =========================================================
   header
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem var(--pad);
  background:rgba(246,245,241,.9);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, padding .3s;
}
.site-header.is-scrolled{ border-bottom-color:var(--line); padding-block:.55rem; }

.brand{ display:flex; align-items:baseline; gap:.6rem; }
.brand b{
  font-family:var(--serif); font-weight:700; font-size:1.28rem;
  letter-spacing:.04em; color:var(--navy-deep);
}
.brand span{
  font-size:.64rem; letter-spacing:.14em; color:var(--ink-soft);
}

.nav{ display:flex; align-items:center; gap:1.7rem; }
.nav a:not(.btn){
  font-size:.82rem; letter-spacing:.03em; position:relative; padding-block:.3rem;
  color:var(--ink-soft);
}
.nav a:not(.btn):hover{ color:var(--navy-deep); }
.nav .btn{ padding:.68em 1.35em; font-size:.8rem; }
.nav-toggle{ display:none; }

/* =========================================================
   hero
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  color:#fff;
  padding-top:clamp(64px, 12vw, 108px);
  padding-bottom:clamp(56px, 10vw, 96px);
}
.hero__bg{ position:absolute; inset:0; z-index:-2; background:#465063; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.9; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(175deg, rgba(24,31,41,.86) 0%, rgba(29,37,49,.82) 45%, rgba(20,26,35,.92) 100%);
}
.hero__inner{ max-width:720px; }
.hero .kicker{
  display:inline-flex; align-items:center; gap:.7em;
  font-size:.78rem; letter-spacing:.14em; color:#cdd8e4;
}
.hero .kicker::before{ content:""; width:22px; height:1px; background:#b9a07a; }
.hero h1{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.55rem, 4.6vw, 2.5rem);
  line-height:1.6; margin-top:1.3rem; letter-spacing:.02em;
}
.hero h1 .soft{ font-size:.72em; display:block; margin-top:.5rem; color:#d8dee6; font-weight:500; }

.hero-points{
  margin-top:2.4rem; display:grid; gap:.85rem;
}
.hero-points li{
  display:flex; align-items:flex-start; gap:.7rem;
  font-size:.92rem; color:#e7eaee;
}
.hero-points svg{ width:19px; height:19px; flex:none; margin-top:.15rem; color:#c9ab7c; }

.hero-cta{
  margin-top:2.6rem; display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem;
}
.tel-btn{
  display:inline-flex; align-items:center; gap:.75em;
  background:#fff; color:var(--navy-deep);
  padding:1em 1.7em; border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
  font-size:1.02rem; letter-spacing:.02em;
  transition:transform .2s ease;
}
.tel-btn:hover{ transform:translateY(-2px); }
.tel-btn svg{ width:22px; height:22px; flex:none; color:var(--gold); }
.tel-btn .tel-num{ font-family:var(--serif); font-weight:700; font-size:1.2rem; letter-spacing:.02em; }
.tel-btn .tel-label{ display:block; font-size:.66rem; letter-spacing:.1em; color:var(--ink-soft); }
.hero-cta .note{ font-size:.78rem; color:#c7cfd8; }

/* =========================================================
   concern
   ========================================================= */
.concern{ background:var(--surface); }
.concern-list{
  display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem 2rem;
  margin-top:0;
}
.concern-list li{
  display:flex; align-items:flex-start; gap:.75rem;
  font-size:.93rem; color:var(--ink); padding:.6rem 0;
  border-bottom:1px solid var(--line-soft);
}
.concern-list svg{ width:18px; height:18px; flex:none; margin-top:.2rem; color:var(--navy); }

.concern-cta{
  margin-top:2.6rem; background:var(--navy-pale);
  border:1px solid #DCE3EA; border-radius:var(--radius);
  padding:1.7rem 1.9rem; text-align:center;
}
.concern-cta p{ font-size:.95rem; color:var(--navy-deep); font-weight:500; line-height:1.85; }

/* =========================================================
   service
   ========================================================= */
.service{ background:var(--surface-2); }
.service-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem;
}
.service-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.9rem 1.6rem;
}
.service-card .ic{
  width:44px; height:44px; border-radius:50%;
  background:var(--navy-pale); display:grid; place-items:center;
  color:var(--navy); margin-bottom:1.1rem;
}
.service-card .ic svg{ width:22px; height:22px; }
.service-card h3{ font-size:1.02rem; font-weight:700; margin-bottom:.6rem; color:var(--ink); }
.service-card p{ font-size:.85rem; color:var(--ink-soft); }

.service-media{
  margin-top:2.6rem; display:grid; grid-template-columns:1.3fr 1fr; gap:1.3rem;
}
.service-media img{
  border-radius:var(--radius); object-fit:cover; width:100%; height:100%;
  aspect-ratio:16/10; background:var(--surface-2);
}
.service-media figure{ position:relative; }
.service-media figcaption{
  position:absolute; left:1rem; bottom:1rem;
  background:rgba(20,26,35,.72); color:#fff;
  font-size:.72rem; letter-spacing:.04em;
  padding:.5em 1em; border-radius:999px;
}

/* =========================================================
   compare（最重要セクション）
   ========================================================= */
.compare{ background:var(--navy-deep); color:#fff; }
.compare .eyebrow{ color:#c9ab7c; }
.compare .eyebrow::before{ background:#c9ab7c; }
.compare .sec-head h2{ color:#fff; }
.compare .sec-head p{ color:#c3cbd5; }

.compare-badge{
  display:inline-block; font-size:.68rem; letter-spacing:.12em;
  color:#1c2733; background:#c9ab7c;
  padding:.4em 1em; border-radius:999px; margin-bottom:1rem;
}

.compare-table-wrap{
  overflow-x:auto; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.16);
  -webkit-overflow-scrolling:touch;
}
table.compare-table{
  width:100%; min-width:640px; border-collapse:collapse;
  font-size:.88rem; background:rgba(255,255,255,.03);
}
.compare-table th, .compare-table td{
  padding:1rem 1.1rem; text-align:center;
  border-bottom:1px solid rgba(255,255,255,.12);
  border-right:1px solid rgba(255,255,255,.08);
}
.compare-table th:last-child, .compare-table td:last-child{ border-right:none; }
.compare-table thead th{
  font-family:var(--serif); font-weight:700; font-size:.9rem;
  background:rgba(255,255,255,.05); letter-spacing:.03em;
}
.compare-table thead th.us{ background:#c9ab7c; color:#1c2733; }
.compare-table tbody th{
  text-align:left; font-weight:500; color:#dde3e9; white-space:nowrap;
}
.compare-table tbody td.us{ background:rgba(201,171,124,.14); font-weight:700; }
.mk-ok{ color:#8fd1a8; font-size:1.15rem; }
.mk-tri{ color:#e3c072; font-size:1.05rem; }
.mk-no{ color:#8b95a1; font-size:1.05rem; }

.compare-notes{ margin-top:2.2rem; display:grid; gap:.7rem; max-width:640px; }
.compare-notes p{ font-size:.86rem; color:#c3cbd5; }
.compare-notes p.strong{
  font-size:.98rem; color:#fff; font-weight:700; margin-top:.6rem;
  padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.16);
}

/* =========================================================
   flow
   ========================================================= */
.flow{ background:var(--surface); }
.flow-list{ display:grid; gap:0; margin-top:.5rem; }
.flow-item{
  display:grid; grid-template-columns:64px 1fr; gap:1.3rem;
  padding:1.5rem 0; border-bottom:1px solid var(--line-soft);
  position:relative;
}
.flow-item:last-child{ border-bottom:none; }
.flow-item .no{
  width:52px; height:52px; border-radius:50%;
  background:var(--navy-pale); color:var(--navy-deep);
  display:grid; place-items:center;
  font-family:var(--serif); font-weight:700; font-size:1.15rem;
}
.flow-item.is-followup .no{ background:var(--gold); color:#fff; }
.flow-item h3{ font-size:1rem; font-weight:700; margin-bottom:.4rem; }
.flow-item p{ font-size:.87rem; color:var(--ink-soft); }

/* =========================================================
   consideration
   ========================================================= */
.consider{ background:var(--surface-2); }
.consider-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.consider-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.8rem 1.6rem;
}
.consider-card .ic{
  width:40px; height:40px; border-radius:50%;
  background:var(--navy-pale); display:grid; place-items:center;
  color:var(--navy); margin-bottom:1rem;
}
.consider-card .ic svg{ width:20px; height:20px; }
.consider-card h3{ font-size:.98rem; font-weight:700; margin-bottom:.55rem; }
.consider-card p{ font-size:.85rem; color:var(--ink-soft); }

/* =========================================================
   price
   ========================================================= */
.price{ background:var(--navy-pale); }
.price-box{
  max-width:640px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(1.8rem, 4vw, 2.6rem);
}
.price-box p{ font-size:.96rem; color:var(--ink); padding:.9rem 0; border-bottom:1px solid var(--line-soft); }
.price-box p:last-child{ border-bottom:none; }
.price-box p b{ color:var(--navy-deep); }

/* =========================================================
   license
   ========================================================= */
.license{ background:var(--surface); }
.license-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem 2rem; }
.license-item{
  padding:1.1rem 0; border-bottom:1px solid var(--line-soft);
}
.license-item dt{ font-size:.78rem; color:var(--ink-faint); letter-spacing:.03em; margin-bottom:.35rem; }
.license-item dd{ font-size:.9rem; color:var(--ink); line-height:1.7; }

/* =========================================================
   corporate（B2B導線）
   ========================================================= */
.corporate{
  background:var(--navy); color:#fff; position:relative; overflow:hidden;
}
.corporate__grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,60px);
  align-items:center;
}
.corporate .tag{
  display:inline-block; font-size:.7rem; letter-spacing:.1em;
  background:rgba(255,255,255,.14); padding:.4em 1em; border-radius:999px;
  margin-bottom:1.1rem;
}
.corporate h2{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.35rem, 3vw, 1.85rem); line-height:1.65;
}
.corporate p{ font-size:.92rem; color:#dbe1e8; margin-top:1.2rem; max-width:34em; }
.corporate .btn{
  margin-top:2rem; border-color:#fff; color:#fff;
}
.corporate .btn:hover{ background:#fff; color:var(--navy-deep); }
.corporate__media img{
  border-radius:var(--radius); aspect-ratio:5/4; object-fit:cover; width:100%;
  box-shadow:var(--shadow);
}

/* =========================================================
   faq
   ========================================================= */
.faq{ background:var(--surface-2); }
.faq-list{ display:grid; gap:.7rem; }
.faq-item{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; gap:.9rem;
  padding:1.15rem 1.4rem; font-size:.93rem; font-weight:500;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .q-mark{
  font-family:var(--serif); font-weight:700; color:var(--navy); font-size:1rem; flex:none;
}
.faq-item summary .arrow{
  margin-left:auto; color:var(--ink-faint); transition:transform .25s ease; flex:none;
}
.faq-item[open] summary .arrow{ transform:rotate(180deg); }
.faq-item .a{
  display:flex; gap:.9rem;
  padding:0 1.4rem 1.3rem 1.4rem; font-size:.87rem; color:var(--ink-soft);
}
.faq-item .a .a-mark{ font-family:var(--serif); font-weight:700; color:var(--gold); flex:none; }

/* =========================================================
   contact
   ========================================================= */
.contact{ background:var(--navy-deep); color:#fff; }
.contact .eyebrow{ color:#c9ab7c; }
.contact .eyebrow::before{ background:#c9ab7c; }
.contact .sec-head h2{ color:#fff; }
.contact .sec-head p{ color:#c3cbd5; }

.contact-tel{
  display:inline-flex; align-items:center; gap:1rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius); padding:1.3rem 1.7rem; margin-bottom:2.4rem;
}
.contact-tel svg{ width:26px; height:26px; color:#c9ab7c; flex:none; }
.contact-tel .tel-num{ font-family:var(--serif); font-weight:700; font-size:1.5rem; letter-spacing:.02em; }
.contact-tel .tel-label{ font-size:.72rem; letter-spacing:.08em; color:#b9c2cc; }

.contact-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(28px,5vw,60px); }
.contact-info p{ font-size:.88rem; color:#c3cbd5; line-height:2; }
.contact-info p + p{ margin-top:1rem; }

.form-box{
  background:#fff; color:var(--ink); border-radius:var(--radius);
  padding:clamp(1.6rem,3.5vw,2.4rem);
}
.field{ margin-bottom:1.3rem; }
.field label{ display:block; font-size:.82rem; font-weight:500; margin-bottom:.5rem; color:var(--ink); }
.field label .req{ color:#c0563f; font-size:.72rem; margin-left:.4em; }
.field input, .field textarea{
  width:100%; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.85em 1em; font:inherit; color:var(--ink); background:var(--surface-2);
  transition:border-color .2s ease, background .2s ease;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--navy); background:#fff;
}
.field textarea{ resize:vertical; min-height:110px; }
.form-submit{ width:100%; margin-top:.3rem; padding-block:1em; font-size:.95rem; }
.form-demo-note{ margin-top:1rem; font-size:.72rem; color:var(--ink-faint); text-align:center; }

.form-done{
  display:none; text-align:center; padding:2.6rem 1rem;
}
.form-done.show{ display:block; }
.form-done .ic{
  width:56px; height:56px; border-radius:50%; background:var(--navy-pale);
  display:grid; place-items:center; margin:0 auto 1.2rem; color:var(--navy);
}
.form-done .ic svg{ width:28px; height:28px; }
.form-done h3{ font-size:1.05rem; margin-bottom:.7rem; color:var(--ink); }
.form-done p{ font-size:.85rem; color:var(--ink-soft); }

/* =========================================================
   footer
   ========================================================= */
.site-footer{
  background:#1B222C; color:#9aa3ae;
  padding-block:clamp(48px,7vw,72px);
  font-size:.82rem;
}
.site-footer__top{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem;
  padding-bottom:2.2rem; border-bottom:1px solid rgba(255,255,255,.1);
}
.site-footer .brand b{ color:#fff; }
.site-footer .brand span{ color:#8993a0; }
.site-footer address{ font-style:normal; line-height:2; margin-top:1rem; max-width:30em; }
.site-footer .flicense{ font-size:.74rem; line-height:2; margin-top:1.2rem; color:#7d8894; }
.fnav{ display:flex; flex-direction:column; gap:.65rem; }
.fnav a:hover{ color:#fff; }
.site-footer__bottom{
  padding-top:1.6rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  font-size:.72rem; color:#6d7580; letter-spacing:.02em;
}

/* =========================================================
   mobile fixed phone bar
   ========================================================= */
.mobile-tel-bar{ display:none; }

/* =========================================================
   reveal animation
   ========================================================= */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .75s ease, transform .75s ease; }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   responsive
   ========================================================= */
@media (max-width:920px){
  .concern-list{ grid-template-columns:1fr; }
  .service-grid{ grid-template-columns:repeat(2,1fr); }
  .service-media{ grid-template-columns:1fr; }
  .consider-grid{ grid-template-columns:1fr; }
  .license-grid{ grid-template-columns:1fr; }
  .corporate__grid{ grid-template-columns:1fr; }
  .corporate__media{ order:-1; max-width:420px; }
  .contact-grid{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(80vw,320px);
    background:var(--bg); flex-direction:column; align-items:flex-start;
    justify-content:center; gap:1.5rem; padding:var(--pad);
    transform:translateX(100%); transition:transform .35s ease;
    box-shadow:var(--shadow); z-index:70;
  }
  .nav.open{ transform:none; }
  .nav a:not(.btn){ font-size:1rem; }
  .nav-toggle{
    display:grid; place-items:center; width:38px; height:38px;
    background:transparent; border:0; cursor:pointer; z-index:80; position:relative;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    content:""; display:block; width:21px; height:1.5px; background:var(--ink);
    transition:.3s ease;
  }
  .nav-toggle span::before{ transform:translateY(-6.5px); }
  .nav-toggle span::after{ transform:translateY(6.5px); }
  .nav-toggle.open span{ background:transparent; }
  .nav-toggle.open span::before{ transform:rotate(45deg); }
  .nav-toggle.open span::after{ transform:rotate(-45deg); }

  .service-grid{ grid-template-columns:1fr; }
  .compare-notes p.strong{ font-size:.92rem; }

  body{ padding-bottom:72px; }
  .mobile-tel-bar{
    display:flex; align-items:center; justify-content:center; gap:.7em;
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    background:var(--navy-deep); color:#fff;
    padding:.95rem 1rem; font-size:1rem;
    box-shadow:0 -8px 24px rgba(0,0,0,.24);
  }
  .mobile-tel-bar svg{ width:20px; height:20px; color:#c9ab7c; }
  .mobile-tel-bar .tel-num{ font-family:var(--serif); font-weight:700; font-size:1.12rem; }
  .mobile-tel-bar .tel-label{ display:block; font-size:.6rem; color:#b9c2cc; letter-spacing:.06em; }
}

@media (max-width:520px){
  .hero-cta{ flex-direction:column; align-items:flex-start; }
}