/* 建設業版LP（2026-10-28）。優しめの水色が基調。SES版（lp/）とは別の見た目。スマホ（375px）が先、768px・1024px で広げる */
:root{
  --sky-50:#F3FAFE; --sky-100:#E4F3FB; --sky-200:#C9E7F6; --sky-300:#9FD3EE;
  --sky-500:#4AA8D8; --sky-700:#1F6E9C; --sky-800:#185A80;
  --ink:#1E3443; --ink-2:#4B6373; --rule:#D5E7F1; --white:#fff;
  --line:#06C755; --line-dark:#05A84A;
  --radius:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--sky-50); color:var(--ink);
  font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans",sans-serif;
  font-size:16px; line-height:1.8; overflow-x:hidden; word-break:normal; overflow-wrap:anywhere; line-break:strict}
img,svg{max-width:100%; height:auto; display:block}
a{color:var(--sky-700)}
h1,h2,h3,p{margin:0}
.wrap{max-width:1080px; margin:0 auto; padding:0 16px}
section{padding:56px 0}
.label{font-size:13px; font-weight:700; letter-spacing:.12em; color:var(--sky-700); margin-bottom:8px}
.h2{font-size:24px; line-height:1.5; font-weight:700; margin-bottom:24px}
.t-sm{font-size:13px; line-height:1.7; color:var(--ink-2)}

/* ボタン */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:12px 24px;
  border-radius:999px; font-weight:700; font-size:16px; text-decoration:none; border:2px solid transparent; cursor:pointer;
  font-family:inherit; line-height:1.3; text-align:center}
.btn-line{background:var(--line); color:#fff; box-shadow:0 4px 0 var(--line-dark)}
.btn-line:hover{background:var(--line-dark)}
.btn-apply{background:#fff; color:var(--sky-800); border-color:var(--sky-500)}
.btn-apply:hover{background:var(--sky-100)}
.btn-line::before{content:""; width:20px; height:20px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 3C6.5 3 2 6.6 2 11c0 2.6 1.6 4.9 4 6.4-.2.9-.7 2.4-.8 2.8-.1.4.2.5.5.3.3-.2 2.9-1.9 3.9-2.6.8.1 1.6.2 2.4.2 5.5 0 10-3.6 10-8S17.5 3 12 3z'/%3E%3C/svg%3E") center/contain no-repeat}
.btns{display:flex; flex-direction:column; gap:12px}
.btns .btn{width:100%}

/* ヘッダー */
.hd{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.96); border-bottom:1px solid var(--rule)}
.hd .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px}
.logo{display:flex; flex-direction:column; line-height:1.3; text-decoration:none; color:var(--ink)}
.logo-a{font-weight:700; font-size:17px; letter-spacing:.02em}
.logo-sp{font-size:0}
.logo-b{font-size:11px; color:var(--ink-2)}
.hd .btn{min-height:40px; padding:8px 14px; font-size:13px; box-shadow:none}
.hd .btn-line::before{width:16px; height:16px}

/* ファーストビュー */
.fv{background:linear-gradient(180deg,#fff 0%,var(--sky-100) 100%); padding:32px 0 48px}
.fv .wrap{display:grid; gap:24px}
.fv-kicker{display:inline-block; font-size:13px; font-weight:700; color:var(--sky-800); background:var(--sky-200); padding:4px 12px; border-radius:999px; margin-bottom:12px}
.fv h1{font-size:28px; line-height:1.45; font-weight:900; margin-bottom:16px}
.fv-lead{font-size:15px; color:var(--ink-2); margin-bottom:20px}
.badges{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0 0 24px}
.badges li{font-size:13px; font-weight:700; background:#fff; color:var(--sky-800); border:1.5px solid var(--sky-300); border-radius:8px; padding:4px 10px}
.fv-art{max-width:420px; margin:0 auto; width:100%}

/* 悩み */
.pains{list-style:none; padding:0; margin:0 0 32px; display:grid; gap:16px}
.pain{background:#fff; border-radius:var(--radius); padding:16px; display:grid; grid-template-columns:88px 1fr; gap:16px; align-items:center; box-shadow:0 2px 0 var(--rule)}
.pain svg{width:88px; height:88px}
.pain-who{font-size:13px; font-weight:700; color:var(--sky-700); margin-bottom:2px}
.pain-what{font-size:16px; font-weight:700; line-height:1.6}
.pain .t-sm{margin-top:6px; font-weight:400}

/* 料金の比べ方の図 */
.cmp{background:#fff; border-radius:var(--radius); padding:20px 16px; margin-bottom:24px; position:relative}
.cmp-row{margin-bottom:16px}
.cmp-name{font-size:14px; font-weight:700; margin-bottom:4px}
.cmp-bar{height:36px; border-radius:8px; display:flex; align-items:center; padding:0 12px; font-weight:700; font-size:15px; white-space:nowrap}
.cmp-part .cmp-bar{background:#E6EBEF; color:var(--ink); width:100%}
.cmp-ry .cmp-bar{background:var(--sky-500); color:#fff; width:19.3%; min-width:12px; padding:0}
.cmp-ry .cmp-v{font-weight:700; font-size:15px; color:var(--sky-800); margin-left:10px; white-space:nowrap}
.cmp-ry .cmp-line{display:flex; align-items:center}
.cmp-badge{display:inline-block; margin-top:4px; background:var(--sky-800); color:#fff; font-weight:900; font-size:18px; padding:6px 16px; border-radius:999px}
.then{background:var(--sky-800); color:#fff; border-radius:var(--radius); padding:20px 16px; text-align:center}
.then-a{display:block; font-size:14px; color:var(--sky-200); font-weight:700}
.then-sp{display:none}
.then-b{display:block; font-size:18px; font-weight:700; line-height:1.6}

/* 毎月届くもの */
.gets{list-style:none; padding:0; margin:0; display:grid; gap:16px}
.get{background:#fff; border-radius:var(--radius); padding:20px 16px; border-top:4px solid var(--sky-500)}
.get-h{display:flex; align-items:center; gap:10px; font-size:17px; font-weight:700; line-height:1.5; margin-bottom:8px}
.get-n{flex:none; width:32px; height:32px; border-radius:50%; background:var(--sky-100); color:var(--sky-800); display:grid; place-items:center; font-weight:900; font-size:15px}
.get p{font-size:15px; color:var(--ink-2)}

/* 料金 */
.pricing{background:#fff}
.price-q{font-size:18px; font-weight:700; color:var(--sky-800); margin-bottom:8px}
.price-lead{margin-bottom:24px}
.price-big{background:var(--sky-100); border:2px solid var(--sky-300); border-radius:var(--radius); padding:24px 16px; text-align:center; margin-bottom:20px}
.price-big .p1{display:block; font-size:22px; font-weight:700; line-height:1.4}
.price-big .p2{display:block; line-height:1.1; font-weight:900; color:var(--sky-800); white-space:nowrap}
.price-big .num{font-size:60px; letter-spacing:-.01em}
.price-big .yen{font-size:28px}
.price-big .tax{display:block; font-size:15px; font-weight:700; color:var(--ink-2); margin-top:4px}
.pricing .badges{justify-content:center}
.ptable{width:100%; border-collapse:collapse; margin:8px 0 20px; font-size:15px; background:#fff}
.ptable th,.ptable td{border:1px solid var(--rule); padding:12px 10px; text-align:left; vertical-align:middle}
.ptable thead th{background:var(--sky-700); color:#fff; font-weight:700; font-size:14px}
.ptable td:last-child{font-weight:700; white-space:nowrap}
.ptable tbody tr:first-child{background:var(--sky-50)}
.notes{list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:14px; color:var(--ink-2)}
.notes li{padding-left:1em; text-indent:-1em}
.notes li::before{content:"・"}
.notes strong{color:var(--ink)}

/* 安全書類・CCUS */
.ccus{padding:32px 0}
.ccus p{background:#fff; border:1.5px dashed var(--sky-300); border-radius:var(--radius); padding:16px; font-size:15px; text-align:center}

/* 始めるまで */
.flow{list-style:none; padding:0; margin:0 0 20px; display:grid; gap:8px}
.flow li{display:flex; align-items:center; gap:12px; background:#fff; border-radius:12px; padding:12px 16px; font-weight:700}
.flow-n{flex:none; color:var(--sky-700); font-size:20px; font-weight:900; font-family:"Noto Sans JP",sans-serif}
.flow li.arrow{background:none; padding:0; justify-content:center; color:var(--sky-500); font-size:18px; line-height:1}
.docs{background:#fff; border-radius:12px; padding:16px; font-size:15px}

/* About */
.owner{display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:start; background:#fff; border-radius:var(--radius); padding:20px 16px}
.portrait{width:96px; height:96px; border-radius:50%; object-fit:cover; background:var(--sky-100)}
.owner-n{font-weight:700; font-size:16px; margin-bottom:6px}

/* よくある質問 */
.faq{margin:0; display:grid; gap:12px}
.faq-i{background:#fff; border-radius:12px; padding:16px}
.faq dt{font-weight:700; font-size:16px; line-height:1.6; margin-bottom:6px; color:var(--ink)}
.faq dd{margin:0; font-size:15px; color:var(--ink-2)}

/* 最後のボタン */
.last{background:linear-gradient(180deg,var(--sky-100),var(--sky-200)); text-align:center}
.last .h2{margin-bottom:12px}
.last p.lead{margin:0 auto 24px; max-width:640px}
.last .btns{max-width:520px; margin:0 auto}

/* フッター */
.ft{background:var(--ink); color:#C9D6DE; font-size:13px; padding:24px 0 96px}
.ft a{color:#fff}
.ft p{line-height:2}

/* スマホの下の固定ボタン */
.fixbar{position:fixed; left:0; right:0; bottom:0; z-index:30; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); border-top:1px solid var(--rule)}
.fixbar .btn{width:100%; min-height:48px}

/* 申し込みのページ */
.apply{padding:32px 0 56px; min-height:70vh}
.apply .wrap{max-width:640px}
.form{background:#fff; border-radius:var(--radius); padding:24px 16px; display:grid; gap:22px}
.fld label,.fld .fld-l{display:block; font-weight:700; font-size:15px; line-height:1.6; margin-bottom:6px}
.req,.opt{display:inline-block; font-size:11px; font-weight:700; border-radius:4px; padding:1px 6px; margin-left:6px; vertical-align:2px}
.req{background:#E2574C; color:#fff}
.opt{background:#E6EBEF; color:var(--ink-2)}
.fld input[type=text],.fld select{width:100%; min-height:48px; font:inherit; font-size:16px; padding:10px 12px; border:1.5px solid var(--sky-300); border-radius:10px; background:#fff; color:var(--ink)}
.fld input:focus,.fld select:focus{outline:3px solid var(--sky-200); border-color:var(--sky-500)}
.help{font-size:13px; color:var(--ink-2); margin-top:4px}
.fld label.agree{display:flex; gap:10px; align-items:flex-start; font-weight:700; font-size:15px}
.agree input{width:22px; height:22px; margin:3px 0 0; flex:none; accent-color:var(--sky-700)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form .btn{width:100%}
.done{background:#fff; border-radius:var(--radius); padding:28px 16px; text-align:center; display:grid; gap:20px}
.done-t{font-size:16px; font-weight:700; line-height:1.9; text-align:left}

@media (min-width:768px){
  section{padding:80px 0}
  .h2{font-size:30px}
  .fixbar{display:none}
  .ft{padding-bottom:32px}
  .logo{flex-direction:row; align-items:baseline}
  .logo-sp{font-size:inherit}
  .logo-b{font-size:13px}
  .hd .btn{font-size:14px; padding:8px 18px}
  .btns{flex-direction:row; flex-wrap:wrap}
  .btns .btn{width:auto; min-width:220px}
  .last .btns{justify-content:center; max-width:none}
  .pains{grid-template-columns:1fr 1fr}
  .gets{grid-template-columns:1fr 1fr}
  .then-b{font-size:22px}
  .price-big .p1{font-size:28px}
  .price-big .num{font-size:88px}
  .price-big .yen{font-size:36px}
  .flow{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:stretch}
  .flow li{flex-direction:column; justify-content:center; text-align:center; gap:4px}
  .flow li.arrow{flex-direction:row}
  .owner{grid-template-columns:140px 1fr; padding:28px}
  .portrait{width:140px; height:140px}
  .form{padding:32px}
}
@media (min-width:1024px){
  .fv{padding:56px 0 72px}
  .fv .wrap{grid-template-columns:1.1fr .9fr; align-items:center; gap:40px}
  .fv h1{font-size:42px}
  .fv-lead{font-size:16px}
  .fv-art{max-width:460px}
  .pains{grid-template-columns:repeat(4,1fr)}
  .pain{grid-template-columns:1fr; text-align:center; padding:24px 16px; align-content:start}
  .pain svg{width:112px; height:112px; margin:0 auto}
  .cmp{padding:28px 32px}
  .price-big{padding:32px}
  .price-big .num{font-size:104px}
}