/* 土間コン施工センター北九州 — kitakyushu-domacon
   Design system adapted from the yane-shuri-funabashi / saga-benriya lineage,
   remapped to a concrete/exterior-construction palette (slate blue / charcoal / amber). */

:root{
  --brand:#2C6E8C;        /* slate blue — brand primary (logo, CTA) */
  --brand-dark:#1F4F63;
  --navy:#2B2F36;         /* concrete charcoal — header / trust elements */
  --navy-dark:#1c1f24;
  --gold:#D89A3E;--price-blue:#0E48BC;--price-yellow:#FFD620;         /* amber — CTA highlight */
  --gold-dark:#B87F2A;
  --teal:#3D7A6B;
  --teal-dark:#2E5D52;
  --ink:#1a1a1f;
  --ink-soft:#4a5460;
  --line:#e2e5e8;
  --bg:#fff;
  --bg-alt:#f5f6f4;
  --max:1160px;
  --radius:8px;
  --font-head: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  --font-body: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:18px;
  color:var(--ink);
  line-height:1.8;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.4;margin:0 0 .5em}
h1{font-size:clamp(1.6rem,4vw,2.5rem)}
h2{font-size:clamp(1.3rem,3vw,1.9rem)}
h3{font-size:clamp(1.05rem,2vw,1.3rem)}
h4{font-size:1rem}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Header ---------- */
.site-header{position:static}

/* pc-only catchphrase bar (mirrors domacon.jp's `.l-header__bar.pc_`) */
.header-bar{background:var(--brand);color:#fff}
.header-bar__text{margin:0;padding:7px 20px;font-size:.82rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* logo + phone/hours + mail CTA row */
.header-main{background:#fff;border-bottom:1px solid var(--line)}
.header-main__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 20px}
.nav__logo{display:inline-flex;align-items:center;flex-shrink:0}
.nav__logo img{height:66px;width:auto;display:block}

.header-contact-block{display:flex;align-items:center;gap:18px;margin-left:auto}
.contact-info{margin:0;text-align:right;line-height:1.5}
.contact-description{display:block;font-size:.82rem;color:var(--ink-soft)}
.contact-phone{display:block;font-size:1.5rem;font-weight:700;color:var(--gold-dark)}
.contact-hours{display:block;font-size:.78rem;color:var(--ink-soft)}
.contact-button{display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:var(--ink)!important;font-weight:700;padding:14px 22px;border-radius:6px;white-space:nowrap}
.contact-button:hover{background:var(--gold-dark);text-decoration:none}

/* mobile-only phone number + hours block (matches the desktop contact-info style, condensed) */
.header-main__mobile-right{display:none;align-items:center;gap:10px;flex-shrink:0}
.header-mobile-call{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.header-mobile-call__phone{display:inline-flex;align-items:center;gap:5px;font-size:1rem;font-weight:700;color:var(--ink)!important;background:var(--gold);padding:7px 14px;border-radius:999px;white-space:nowrap}
.header-mobile-call__phone:hover{background:var(--gold-dark);text-decoration:none}
.header-mobile-call__hours{font-size:.7rem;color:var(--ink-soft);white-space:nowrap}

.nav__toggle{display:none;align-items:center;justify-content:center;background:#fff;border:2px solid var(--line);border-radius:var(--radius);width:52px;height:52px;font-size:1.8rem;line-height:1;cursor:pointer;color:var(--navy);flex-shrink:0}
.nav__toggle:hover{border-color:var(--brand)}

/* page-links row */
.site-nav{position:relative;background:var(--bg-alt);border-bottom:3px solid var(--brand)}
.nav__links{list-style:none;display:flex;gap:16px;margin:0;padding:10px 20px;align-items:center;flex-wrap:wrap;max-width:var(--max);margin-left:auto;margin-right:auto}
.nav__links a{color:var(--navy);font-weight:600;font-size:.92rem}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(135deg,#eaf1f4,#f5f6f4);padding:40px 0}
.hero__inner{max-width:820px}
.hero__eyebrow{display:inline-block;background:var(--navy);color:#fff;padding:6px 14px;border-radius:999px;font-size:.85rem;font-weight:700;margin-bottom:12px}
.hero h1{color:var(--navy)}
.hero__lead{font-size:18px;color:var(--ink-soft)}
.hero__cta{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-top:16px}
.hero__phone-block{display:inline-flex;flex-direction:column;align-items:center;gap:6px;max-width:320px}
.hero__hours{margin:0;font-size:.9rem;color:var(--ink-soft);text-align:center}
.hero__checklist{list-style:none;margin:14px 0;padding:0}
.hero__checklist li{padding-left:1.6em;position:relative;margin-bottom:6px}
.hero__checklist li::before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:700}

/* ---------- Buttons ---------- */
.btn{display:inline-block;padding:12px 24px;border-radius:999px;font-weight:700;border:2px solid transparent;cursor:pointer;font-size:1rem;text-align:center}
.btn:hover{text-decoration:none}
.btn--lg{padding:16px 32px;font-size:1.08rem}
.btn--brand{background:var(--brand);color:#fff}
.btn--brand:hover{background:var(--brand-dark)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-dark)}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:var(--gold-dark)}
.btn--ghost{background:transparent;color:#fff;border-color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.15)}
.btn--outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--outline:hover{background:var(--navy);color:#fff}
.wc-phone{white-space:nowrap}

/* ---------- Content sections ---------- */
.section{padding:48px 0}
.section--alt{background:var(--bg-alt)}
.section__lead{max-width:68ch;color:var(--ink-soft);font-size:18px}
.section--center{text-align:center}
.section--center .section__lead{margin-left:auto;margin-right:auto}

/* ---------- Warning / highlight / solution callouts ---------- */
.warning-box{background:#FEFBE8;border-radius:var(--radius);overflow:hidden;margin:20px 0;max-width:68ch}
.warning-box__item{display:flex;align-items:center;gap:10px;margin:0;padding:14px 20px;font-weight:700;color:var(--ink)}
.warning-box__item + .warning-box__item{border-top:1px dashed #e6dfb8}
.warning-box__icon{color:#E0A526;font-size:1.1rem}
.highlight-text{color:#C0392B}
.solution-box{display:flex;gap:12px;align-items:flex-start;background:#FDF0E4;border-radius:var(--radius);padding:18px 20px;margin:20px 0;max-width:68ch}
.solution-box__icon{flex-shrink:0;font-size:1.3rem;line-height:1.6}
.solution-box p{margin:0;color:var(--ink-soft);font-size:18px}

/* ---------- Notice box (contact) ---------- */
.notice-box{background:#FBF3D9;border-left:6px solid var(--gold);padding:16px 20px;max-width:820px;margin:24px auto 32px}
.notice-box p{margin:0;font-size:.92rem;color:var(--ink-soft)}

/* ---------- Card grid ---------- */
.grid{display:grid;gap:20px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--brand);border-radius:var(--radius);padding:22px}
.card h3{margin-top:0}
.card a{font-weight:700}

/* ---------- Pricing table ---------- */
table.price-table{width:100%;border-collapse:collapse;margin:20px 0;background:#fff}
table.price-table th,table.price-table td{border:1px solid var(--line);padding:12px 14px;text-align:left}
table.price-table th{background:var(--navy);color:#fff}
table.price-table tr:nth-child(even){background:var(--bg-alt)}

/* ---------- Price scenario cards ---------- */
.price-scenarios{display:grid;gap:22px;margin:20px 0}
.price-scenario{display:grid;grid-template-columns:1fr;gap:18px;padding:22px;background:linear-gradient(100deg,var(--price-blue) 0%,#1B5AE0 100%);color:#fff;border-radius:14px;overflow:hidden}
.price-scenario__body h3{margin:0 0 10px;font-size:26px;font-weight:900;line-height:1.35;color:#fff;letter-spacing:.01em;text-wrap:balance}
/* 価格：斜体の太字＋黄色。数字と単位でサイズ差をつける */
.price-scenario__price{margin:0 0 18px;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px}
.price-scenario__num{font-size:52px;font-weight:900;font-style:italic;color:var(--price-yellow);letter-spacing:-.02em;line-height:1;text-shadow:0 3px 0 rgba(0,0,0,.18)}
.price-scenario__yen{font-size:26px;font-weight:900;font-style:italic;color:#fff}
.price-scenario__tax{font-size:13px;font-weight:700;color:#fff}
.price-scenario__from{font-size:20px;font-weight:900;color:#fff;margin-left:2px}
.price-scenario__includes{position:relative}
.price-scenario__includes-label{display:inline-block;margin:0 0 -12px 10px;position:relative;z-index:1;background:#2B3138;color:#fff;border-radius:999px;padding:6px 20px;font-size:15px;font-weight:700}
.price-scenario__includes ul{list-style:none;margin:0;padding:20px 16px 14px;background:#fff;border-radius:8px;color:var(--ink)}
.price-scenario__includes li{font-size:15px;line-height:1.75}
.price-scenario__photo{margin:0}
.price-scenario__photo img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:12px}
/* 狭い画面では価格1行に収める（（税込）〜 が折り返すと間延びするため） */
@media (max-width:420px){
  .price-scenario__num{font-size:38px}
  .price-scenario__yen{font-size:22px}
}
@media (min-width:820px){
  .price-scenario{grid-template-columns:1fr 46%;gap:26px;padding:28px;align-items:center}
  .price-scenario__body h3{font-size:32px}
  .price-scenario__num{font-size:64px}
  .price-scenario__yen{font-size:30px}
  .price-scenario__includes li{font-size:16px}
}

/* ---------- Link list ---------- */
.linklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.linklist a{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;background:#fff;font-weight:600;color:var(--navy)}
.linklist a:hover{border-color:var(--brand);text-decoration:none}
.linklist .tag{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;background:#fff;font-weight:600;color:var(--navy)}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:700;color:var(--navy);list-style:none;position:relative;padding-right:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:0;font-size:1.3rem;color:var(--brand)}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:10px;color:var(--ink-soft)}

/* ---------- CTA band / phone strip ---------- */
.cta-band{background:var(--navy);color:#fff;padding:40px 0;text-align:center}
.cta-band h2{color:#fff}
.cta-band__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.cta-band__note{margin:10px 0 0;font-size:.9rem;color:rgba(255,255,255,.75)}

/* ---------- Stats band ---------- */
.stats-band{background:var(--navy-dark);color:#fff;padding:20px 0}
.stats-band .grid--3{text-align:center}
.stats-band strong{display:block;font-size:1.3rem;color:var(--gold)}
.stats-band span{font-size:.85rem;color:#cfd6d3}

/* ---------- Company / spec table ---------- */
table.company-table{width:100%;border-collapse:collapse;margin:20px 0}
table.company-table th,table.company-table td{border:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top}
table.company-table th{background:var(--bg-alt);width:12em;white-space:nowrap}

/* ---------- Steps ---------- */
.steps{counter-reset:step;list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
.steps li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;position:relative}
.steps li::before{counter-increment:step;content:counter(step);display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;margin-bottom:10px}

/* ---------- Form ---------- */
form{display:grid;gap:14px;max-width:820px;margin:0 auto;background:var(--bg-alt);padding:28px;border-radius:var(--radius)}
.contact-privacy-note{max-width:820px;margin:20px auto 0;text-align:center}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:.92rem;color:var(--navy)}
.field input,.field select,.field textarea{padding:10px 12px;border:1px solid var(--line);border-radius:6px;font-size:1rem;font-family:inherit;background:#fff}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.required-badge{display:inline-block;background:#e0392b;color:#fff;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:4px;vertical-align:middle}
.contact-consent{display:flex;align-items:flex-start;gap:12px;font-size:.92rem;color:var(--ink-soft);cursor:pointer}
.contact-consent input{width:22px;height:22px;margin-top:2px;flex-shrink:0;accent-color:var(--brand);cursor:pointer}
.contact-consent a{color:var(--brand)}
/* honeypot spam-trap field — present in the DOM for bots to fill, invisible to real users */
.hidden-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Photo gallery / image band ---------- */
.gallery{list-style:none;margin:0;padding:0}
.gallery figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.gallery img{width:100%;height:220px;object-fit:cover;border-radius:0}
.gallery figcaption{padding:12px 14px;font-size:.92rem;color:var(--ink-soft)}
.image-band{border-radius:var(--radius);overflow:hidden;margin:20px 0}
.image-band img{width:100%;max-height:340px;object-fit:cover;border-radius:var(--radius)}
/* for infographics/illustrations that must not be cropped (unlike landscape photos above) */
.image-band--contain{background:none;text-align:left}
.image-band--contain img{max-height:480px;width:auto;max-width:100%;object-fit:contain;margin:0}
.hero__photo{border-radius:var(--radius);overflow:hidden}
.hero__photo img{width:100%;height:100%;object-fit:cover}
.hero__split{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
@media (max-width:900px){.hero__split{grid-template-columns:1fr}}

/* ---------- Representative greeting (homepage) ---------- */
.rep-greeting{display:flex;gap:32px;align-items:flex-start}
.rep-greeting__photo{flex-shrink:0;width:180px;text-align:center}
.rep-greeting__photo img{width:180px;height:180px;border-radius:50%;object-fit:cover}
.rep-greeting__name{margin:10px 0 0;font-weight:700;color:var(--navy)}
.rep-greeting__body h2{margin-top:0}
@media (max-width:700px){
  .rep-greeting{flex-direction:column;align-items:center}
  .rep-greeting__body{text-align:left}
}

/* ---------- Partner photo (company page) ---------- */
.partner-photo{margin-top:24px;max-width:320px}
.partner-photo img{width:100%;height:auto;border-radius:var(--radius);display:block}
.partner-photo__caption{margin:10px 0 0;font-size:.92rem;color:var(--ink-soft);font-style:italic}

/* ---------- Legal / long text pages ---------- */
.legal h3{margin-top:1.6em}
.legal ul{padding-left:1.3em}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-dark);color:#cbd0d3;padding:44px 0 20px;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
.footer-grid h4{color:#fff;font-size:1rem;margin:0 0 .5em}
.footer-grid h4 a{color:#fff}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin-bottom:8px}
.footer-grid a{color:#cbd0d3}
.footer-grid a:hover{color:#fff}
.footer-bottom{max-width:var(--max);margin:28px auto 0;padding:16px 20px 0;border-top:1px solid #33393f;font-size:.82rem;color:#8f979c}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  /* mirrors domacon.jp: catchphrase bar + full phone/hours/mail block are pc-only;
     mobile gets one compact call button + hamburger so the header doesn't eat first-view space */
  .header-bar{display:none}
  .header-contact-block{display:none}
  .header-main__mobile-right{display:flex}
  .header-main__inner{padding:10px 16px;gap:12px}
  .nav__logo img{height:52px}
  .nav__toggle{display:flex}
  .nav__links{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;padding:16px 20px;border-bottom:3px solid var(--brand)}
  .nav__links.is-open{display:flex}
  .grid--2,.grid--3,.grid--4,.steps{grid-template-columns:1fr 1fr}
  .linklist{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .stats-band .grid--3{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}
@media (max-width:600px){
  .linklist{grid-template-columns:1fr}
  .grid--2,.grid--3,.grid--4,.steps{grid-template-columns:1fr}
  .hero__cta{flex-direction:column;align-items:center}
  .footer-grid{grid-template-columns:1fr}
  /* long "call now + phone number" button labels must wrap on narrow screens —
     .wc-phone's nowrap is meant for the bare number elsewhere, not a full CTA label */
  .btn.wc-phone{white-space:normal}
  .nav__logo img{height:40px}
  .header-main__inner{gap:6px}
  .header-main__mobile-right{gap:6px}
  .header-mobile-call{flex-shrink:1;min-width:0}
  .header-mobile-call__phone{font-size:.85rem;padding:6px 10px}
  .header-mobile-call__hours{font-size:.6rem}
  .nav__toggle{width:46px;height:46px;font-size:1.6rem}
}