@charset "UTF-8";
/* ============================================================
   県外構サイト 共通スタイル
   配色・タイポは fukuoka-carport.com の実測値に準拠
   モバイルファースト
   ============================================================ */

:root{
  /* --- 配色（実測値） --- */
  --brand:#E25C15;          /* ブランド橙：ロゴ・CTA・見出しアクセント */
  --brand-dark:#C44C10;
  --brand-shadow:#A63C08;   /* 橙ボタンの立体影 */
  --accent:#FFD620;         /* 帯黄：ハイライト・セクション背景 */
  --accent-dark:#E8BE00;
  --accent-shadow:#C9A200;  /* 黄ボタンの立体影 */
  --link:#1176D4;
  --alert:#E44141;          /* 価格・注意喚起 */
  --alert-strong:#E22323;
  --ok:#059152;
  --hero:#0E48BC;           /* ヒーロー背景のブルー */
  --hero-dark:#0A3690;      /* バッジのグラデーション用 */

  --ink:#333333;
  --ink-soft:#666;
  --ink-faint:#888;
  --line:#e3e3e3;
  --bg:#ffffff;
  --bg-alt:#F7F7F7;
  --bg-cream:#FDF9EE;

  --max:1196px;
  /* 本文の可読カラム幅。17px × 42em ＝ 714px。
     画像セクションもこの幅に揃えると、本文と左端が一致する。
     値を変えるときは .sec-body と .gallery の両方に効くことに注意。 */
  --measure:714px;
  --radius:6px;
  --font:"游ゴシック体","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:18px;
  line-height:1.9;
  color:var(--ink);
  background:var(--bg);
}
img{max-width:100%;height:auto;vertical-align:bottom}
a{color:var(--link)}
h1,h2,h3,h4{line-height:1.5;margin:0 0 .6em;font-weight:700}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
.section{padding:48px 0}
.section--alt{background:var(--bg-alt)}
.section--cream{background:var(--bg-cream)}
.band{background:var(--accent);padding:40px 0}
.center{text-align:center}

/* --- セクション見出し --- */
.sec-head{text-align:center;margin-bottom:32px}
.sec-head h1,.sec-head h2{font-size:24px;margin:0}
.sec-head h1{font-size:27px;line-height:1.45}
.sec-head h2 .hl{
  background:linear-gradient(transparent 62%,var(--accent) 62%);
  padding:0 2px;
}
.sec-head__lead{margin:14px auto 0;max-width:var(--measure);color:var(--ink-soft);font-size:17px;text-align:left}
/* セクション見出しの外に置く本文段落 */
.sec-body{max-width:var(--measure);margin:0 auto 20px;font-size:17px;line-height:1.95;color:var(--ink-soft)}
.sec-body:last-child{margin-bottom:0}

/* ============================================================
   ヘッダー
   ============================================================ */
.head{background:#fff;border-bottom:1px solid var(--line)}
.head__inner{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;max-width:var(--max);margin:0 auto}
.head__logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.head__logo-mark{
  width:52px;height:52px;flex:none;border-radius:6px;display:block;
}
.head__logo-text{font-size:18px;font-weight:900;line-height:1.18;letter-spacing:-.02em;white-space:nowrap;color:var(--brand)}
.head__contact{display:flex;align-items:center;gap:12px}
.head__tel{display:none;text-decoration:none;color:var(--ink);text-align:right;line-height:1.3}
.head__tel-label{display:block;font-size:11px;color:var(--ink-soft)}
.head__tel-num{display:block;font-size:26px;font-weight:700;letter-spacing:.02em}
.head__tel-hours{display:block;font-size:11px;color:var(--ink-soft)}
.head__mail{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  height:50px;padding:0 11px;
  background:var(--accent);color:var(--ink);text-decoration:none;
  font-weight:700;border-radius:8px;white-space:nowrap;
  box-shadow:0 4px 0 var(--accent-shadow),0 7px 12px rgba(0,0,0,.18);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.head__mail:hover{filter:brightness(1.05)}
.head__mail:active{transform:translateY(4px);box-shadow:0 0 0 var(--accent-shadow),0 2px 5px rgba(0,0,0,.2)}
.head__mail .ico{width:1.15em;height:1.15em}
.head__mail-ico{display:none}
.head__mail-text{display:flex;flex-direction:column;align-items:center;line-height:1.3}
.head__mail-main{font-size:13px;font-weight:700;white-space:nowrap}
.head__mail-sub{font-size:10px;font-weight:700;white-space:nowrap}

/* --- バーガーメニュー --- */
.head__burger{
  flex:none;width:48px;height:50px;border:0;padding:0;cursor:pointer;
  background:var(--hero);color:#fff;border-radius:var(--radius);
  display:flex;flex-direction:column;align-items:center;gap:5px;
  /* 三本線の位置を padding-top で直接決める（center だと上に寄るため） */
  justify-content:flex-start;padding-top:10px;
  font-family:inherit;
}
/* 三本線は開いても×印に変形させない。ドロワー(z-index:60)がバーガーを完全に覆い、
   同じ位置にドロワー自身の閉じるボタンが乗るため、変形後の姿は画面に出ない。
   以前あった [aria-expanded="true"] の変形3ルールと transition は死にコードだったため削除。 */
.head__burger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px}
.head__burger small{font-size:10px;font-weight:700;letter-spacing:.04em;margin-top:3px;line-height:1.1}

.drawer{
  position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;
}
.drawer[data-open="true"]{opacity:1;visibility:visible}
.drawer__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(84%,340px);
  background:#fff;overflow-y:auto;padding:20px 20px 40px;
  transform:translateX(100%);transition:transform .22s;
}
.drawer[data-open="true"] .drawer__panel{transform:translateX(0)}
.drawer__close{
  display:block;margin:0 0 16px auto;width:44px;height:44px;border:0;cursor:pointer;
  background:var(--bg-alt);border-radius:var(--radius);font-size:22px;line-height:1;color:var(--ink);
}
.drawer__title{
  font-size:14px;font-weight:900;color:var(--ink);letter-spacing:.04em;
  margin:22px 0 4px;padding-left:9px;border-left:4px solid var(--brand);line-height:1.5;
}
.drawer__title:first-of-type{margin-top:18px}
.drawer__nav{list-style:none;margin:0;padding:0}
.drawer__nav li{border-bottom:1px solid var(--line)}
.drawer__nav a{
  display:block;padding:13px 26px 13px 4px;text-decoration:none;color:var(--ink);
  font-size:15px;font-weight:700;position:relative;
}
.drawer__nav a::after{content:"›";position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--brand);font-size:20px}
/* グループ配下の項目は、見出しより内側に字下げする */
.drawer__nav--sub{margin-left:14px}
.drawer__nav--sub a{padding:11px 26px 11px 8px;font-size:14px}
.drawer__cta{margin-top:24px;display:grid;gap:10px}

@media(min-width:900px){
  .head__burger,.drawer{display:none}
  .head__inner{gap:12px;padding:10px 20px}
  .head__contact{gap:18px}
  .head__tel{display:block}
  .head__mail{height:auto;padding:14px 24px}
  .head__mail-ico{display:inline-flex;align-items:center;font-size:16px}
  .head__mail-main{font-size:16px}
  .head__mail-sub{font-size:12px}
  .head__mail-full{display:inline}
  .head__mail-short{display:none}
  .head__logo-text{font-size:33px;letter-spacing:.01em;line-height:1.15}
  .head__logo-mark{width:88px;height:88px;border-radius:8px}
  .head__logo{gap:15px}
}

/* ============================================================
   ヒーロー（左＝紺青パネル／右＝写真＋CSSオーバーレイ）
   テキスト・バッジはすべてCSS。写真だけ差し替える
   ============================================================ */
.hero{display:grid;grid-template-columns:1fr}

/* --- 左：紺青パネル --- */
.hero__panel{
  background:var(--hero);
  color:#fff;padding:28px 20px 32px;text-align:center;position:relative;
}

/* 上部リボン（\ テキスト /） */
.hero__ribbon{
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:17px;font-weight:700;margin:0 0 8px;letter-spacing:.02em;
}
.hero__ribbon::before,.hero__ribbon::after{
  content:"";width:2px;height:1.1em;background:currentColor;border-radius:2px;
}
.hero__ribbon::before{transform:rotate(-22deg)}
.hero__ribbon::after{transform:rotate(22deg)}

.hero__area{font-size:26px;font-weight:900;margin:0 0 14px;letter-spacing:.02em;line-height:1.3}

/* 工種の白枠ボックス */
.hero__boxes{
  list-style:none;margin:0 0 12px;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}
.hero__boxes li{
  background:#fff;color:var(--ink);border-radius:6px;padding:4px 14px;
  font-size:20px;font-weight:900;line-height:1.4;letter-spacing:.02em;
}

.hero__catch{
  font-size:24px;font-weight:900;margin:0 0 18px;line-height:1.4;letter-spacing:.01em;
  text-shadow:0 2px 0 rgba(0,0,0,.22);
}
.hero__catch em{font-style:normal;color:var(--accent);font-size:1.5em;line-height:1}

/* 王冠つきの訴求 */
.hero__claim{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:0;font-size:18px;font-weight:900;line-height:1.45;text-align:left;
}
.hero__claim-crown{font-size:30px;line-height:1;color:var(--accent);flex:none}
.hero__claim strong{display:block;font-weight:900}
.hero__claim em{font-style:normal;color:var(--accent)}


/* --- 右：写真＋オーバーレイ --- */
.hero__photo{position:relative;min-height:260px;overflow:hidden}
.hero__photo img{width:100%;height:100%;object-fit:cover;display:block;object-position:50% 58%}

/* 吹き出し（モバイル：中央・青パネルと写真の境目にまたがる） */
.hero__bubble{
  position:absolute;left:50%;top:-22px;transform:translateX(-50%);
  margin:0;z-index:3;white-space:nowrap;
  background:var(--accent);color:var(--ink);
  font-size:21px;font-weight:900;line-height:1.25;text-align:center;
  padding:7px 26px;border-radius:8px;
  box-shadow:0 3px 10px rgba(0,0,0,.22);
}
.hero__bubble::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-11px;
  border-left:9px solid transparent;border-right:9px solid transparent;
  border-top:12px solid var(--accent);border-bottom:0;
}

/* ●バッジ（モバイル：写真の上部に重ねる） */
.hero__badges{
  position:absolute;left:0;right:0;top:26px;z-index:2;
  list-style:none;margin:0;padding:0 3%;
  display:flex;gap:2.5%;justify-content:center;
}
.hero__badges li{
  flex:0 0 29%;max-width:128px;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#2A66D0 0%,var(--hero) 55%,var(--hero-dark) 100%);
  border:3px solid var(--accent);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;text-align:center;line-height:1.2;padding:4px;
}
.hero__badges .t{font-size:min(3.1vw,15px);font-weight:700;letter-spacing:-.02em}
.hero__badges .m{font-size:min(6.2vw,26px);font-weight:900;color:var(--accent);letter-spacing:-.02em}
.hero__badges .s{font-size:min(4vw,19px);font-weight:900;color:var(--accent)}
.hero__badges .s--plain{color:#fff}
/* 〔〕で囲んだ単位（万円・日など）は数字より一段小さく */
.hero__badges .u{font-size:.62em;font-weight:900;letter-spacing:0}

@media(max-width:899px){
  /* 吹き出しが青パネル側にはみ出せるようにする */
  .hero__photo{overflow:visible;min-height:240px;z-index:1}
  .hero__panel{padding-bottom:40px}
}

@media(min-width:900px){
  /* PCではFVを全幅にせず、左右に余白を取る */
  .hero{grid-template-columns:47% 53%;align-items:stretch;
    max-width:var(--max);width:calc(100% - 40px);margin:0 auto}
  .hero__panel{padding:40px 28px 44px;display:flex;flex-direction:column;justify-content:center}
  .hero__ribbon{font-size:clamp(15px,1.75vw,21px)}
  .hero__area{font-size:clamp(26px,3.1vw,38px);margin-bottom:18px}
  .hero__boxes li{font-size:clamp(18px,2.2vw,27px);padding:5px clamp(12px,1.5vw,18px)}
  .hero__catch{font-size:clamp(21px,2.6vw,32px);margin-bottom:22px}
  .hero__claim{font-size:clamp(16px,1.85vw,23px);gap:clamp(9px,1.1vw,14px);justify-content:center}
  .hero__claim-crown{font-size:clamp(28px,3.5vw,44px)}
  .hero__photo{min-height:440px}
  /* PCも丸ボックスの真上に中央配置（バッジは bottom:6% ＋ 高さ128px） */
  .hero__bubble{
    top:auto;bottom:calc(6% + 140px);
    font-size:17px;padding:9px 22px;border-radius:10px;
  }
  .hero__badges{top:auto;bottom:6%}
  .hero__badges li{flex:0 0 26%}
  .hero__badges .t{font-size:15px}
  .hero__badges .m{font-size:26px}
  .hero__badges .s{font-size:19px}
}

/* ============================================================
   ボタン
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;font-weight:700;border-radius:var(--radius);
  padding:16px 26px;line-height:1.4;border:none;cursor:pointer;font-family:inherit;
}
.btn--tel{
  background:var(--accent);color:var(--ink);
  flex-direction:column;gap:1px;line-height:1.35;padding:12px 20px;
}
.btn__cta-main{
  display:inline-flex;align-items:center;gap:.34em;
  font-weight:700;letter-spacing:.01em;white-space:nowrap;
}
.btn--tel  .btn__cta-main{font-size:21px}
.btn--mail .btn__cta-main{font-size:18px}
/* アイコン共通：文字サイズに追従し、色は currentColor */
.ico{width:1em;height:1em;flex:none}
.btn__cta-sub{font-size:13px;font-weight:700;white-space:nowrap}
/* 画面下固定CTAは幅が狭いので一段小さく */
.fixed-cta .btn__cta-main{font-size:16px}
.fixed-cta .btn__cta-sub{font-size:10px}
.btn--mail{
  background:var(--brand);color:#fff;
  flex-direction:column;gap:1px;line-height:1.35;padding:12px 20px;
}
/* --- CTAボタンの立体表現 -------------------------------------
   下に濃い色のベタ影を敷いて「厚み」を作り、押すと沈むようにする。
   面はベタ塗り（グラデーションなし）。 */
.btn--tel,.btn--mail{
  border-radius:8px;
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.btn--tel{box-shadow:0 5px 0 var(--accent-shadow),0 9px 16px rgba(0,0,0,.20)}
.btn--mail{box-shadow:0 5px 0 var(--brand-shadow),0 9px 16px rgba(0,0,0,.20)}

.btn--tel:hover,.btn--mail:hover{filter:brightness(1.05)}

/* 押し込み：ボタンが影の分だけ沈む */
.btn--tel:active{transform:translateY(5px);box-shadow:0 0 0 var(--accent-shadow),0 2px 5px rgba(0,0,0,.22)}
.btn--mail:active{transform:translateY(5px);box-shadow:0 0 0 var(--brand-shadow),0 2px 5px rgba(0,0,0,.22)}

/* 画面下の固定CTAは高さに余裕がないので厚みを抑える */
.fixed-cta .btn--tel{box-shadow:0 3px 0 var(--accent-shadow),0 4px 8px rgba(0,0,0,.18)}
.fixed-cta .btn--mail{box-shadow:0 3px 0 var(--brand-shadow),0 4px 8px rgba(0,0,0,.18)}
.fixed-cta .btn--tel:active,.fixed-cta .btn--mail:active{transform:translateY(3px)}
.fixed-cta .btn--tel:active{box-shadow:0 0 0 var(--accent-shadow)}
.fixed-cta .btn--mail:active{box-shadow:0 0 0 var(--brand-shadow)}

@media(prefers-reduced-motion:reduce){
  .btn--tel,.btn--mail{transition:none}
}
.btn--wide{width:100%;max-width:420px}
.btn-row{display:flex;flex-direction:column;align-items:center;gap:12px}
@media(min-width:768px){
  .btn-row{flex-direction:row;justify-content:center;align-items:stretch}
  .btn--wide{width:auto;min-width:300px}
}

/* ============================================================
   導入文＋要点の定義リスト（FV直下）
   ============================================================ */
.intro-lead{
  max-width:44em;margin:0 auto 26px;font-size:17px;line-height:1.95;
}
.factlist{margin:0;padding:0;border-top:1px solid var(--line)}
.factlist__row{
  display:grid;grid-template-columns:1fr;gap:2px;
  padding:14px 4px;border-bottom:1px solid var(--line);
}
.factlist dt{
  font-size:15px;font-weight:900;color:var(--brand);margin:0;
}
.factlist dd{margin:0;font-size:17px;line-height:1.8}
@media(min-width:720px){
  .factlist__row{grid-template-columns:9em 1fr;gap:20px;align-items:baseline}
  .factlist dt{font-size:16px}
}

/* ============================================================
   悩みリスト
   ============================================================ */
.worries{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.worries li{
  background:#fff;border:2px solid var(--line);border-radius:var(--radius);
  padding:14px 16px 14px 46px;position:relative;font-weight:700;font-size:17px;
}
.worries li::before{
  content:"✓";position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--brand);font-size:20px;
}
@media(min-width:768px){.worries{grid-template-columns:1fr 1fr}}

/* ============================================================
   カード（サービス／理由）
   ============================================================ */
.cards{display:grid;gap:18px;margin:0;padding:0;list-style:none}
@media(min-width:768px){.cards--3{grid-template-columns:repeat(3,1fr)}.cards--2{grid-template-columns:repeat(2,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.card__label{background:var(--brand);color:#fff;font-size:16px;font-weight:700;padding:7px 14px;letter-spacing:.04em}
.card__body{padding:18px;flex:1}
.card__body h3{font-size:18px;margin:0 0 10px}
/* 独自集計データの出典表記 */
.data-source{
  max-width:44em;margin:22px auto 0;font-size:13px;line-height:1.75;
  color:var(--ink-faint);text-align:left;
}
/* 選ばれる理由：番号バッジ付き見出し */
.promise .card__body h3{display:flex;align-items:flex-start;gap:10px;font-size:18px;line-height:1.45}
.promise .promise__no{margin-top:1px}
.promise__no{
  flex:none;width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:17px;font-weight:900;line-height:1;
}
.promise .card__body p{font-size:16px;color:var(--ink-soft);line-height:1.9;margin:0}
.card__body p{margin:0 0 12px;font-size:17px;color:var(--ink-soft)}
.card__list{list-style:none;margin:0;padding:0;font-size:14px}
.card__list li{padding:5px 0 5px 20px;position:relative;border-top:1px dotted var(--line)}
.card__list li:first-child{border-top:none}
.card__list li::before{content:"▶";position:absolute;left:0;top:5px;color:var(--brand);font-size:10px}

/* ============================================================
   施工事例ギャラリー
   ============================================================ */
.cases{display:grid;gap:30px}
.case-group h3{
  font-size:19px;margin:0 0 14px;padding-left:12px;
  border-left:5px solid var(--brand);line-height:1.4;
}
.case-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.case-grid figure{margin:0}
.case-grid img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:6px;background:var(--bg-alt);
}
.case-grid figcaption{
  margin-top:7px;font-size:14px;line-height:1.5;color:var(--ink-soft);
}
@media(min-width:768px){
  .case-grid{grid-template-columns:repeat(4,1fr);gap:16px}
  .case-group h3{font-size:21px}

  /* サービスページの参考事例は1〜2枚のことが多い。
     4列のままだと右側が大きく空くため、枚数に応じて列数を絞る。
     :has() 非対応ブラウザでは従来どおり4列になるだけで崩れない。 */
  .case-grid:has(li:only-child){grid-template-columns:minmax(0,480px)}
  .case-grid:has(li:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-grid:has(li:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ============================================================
   注意ボックス（3大トラブル等）
   ============================================================ */
.note-box{
  background:#fff;border:2px solid var(--alert);border-radius:var(--radius);
  padding:0;margin:0 0 18px;overflow:hidden;
}
.note-box__title{
  background:var(--alert);color:#fff;font-size:17px;font-weight:700;
  margin:0;padding:10px 16px;display:flex;align-items:center;gap:10px;
}
.note-box__no{
  flex:none;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--alert);
  display:grid;place-items:center;font-size:15px;font-weight:900;line-height:1;
}
.note-box__body{padding:16px;font-size:17px}
.note-box__body p:last-child{margin-bottom:0}

/* 比較・強調 */
.price-swap{text-align:center;font-weight:900;line-height:1.4;margin:0}
.price-swap__before{font-size:26px;color:var(--ink-faint);text-decoration:line-through}
.price-swap__arrow{display:block;font-size:22px;color:var(--brand);margin:2px 0}
.price-swap__after{font-size:44px;color:var(--alert-strong)}
.price-swap__note{display:block;font-size:13px;font-weight:400;color:var(--ink-soft);margin-top:8px}

/* ============================================================
   料金表
   ============================================================ */
.price-table{width:100%;border-collapse:collapse;font-size:17px;background:#fff}
.price-table th,.price-table td{border:1px solid var(--line);padding:12px 14px;text-align:left}
.price-table th{background:var(--bg-alt);font-weight:700;width:58%}
.price-table td{text-align:right;white-space:nowrap;font-weight:700;color:var(--alert-strong)}
.table-scroll{overflow-x:auto}

/* ============================================================
   セット価格カード
   ============================================================ */
.pcards{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.pcard{
  background:#fff;border:3px solid var(--brand);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;
}
.pcard--green{border-color:var(--ok)}
.pcard__title{
  margin:0;background:var(--brand);color:#fff;
  font-size:17px;font-weight:700;line-height:1.45;padding:10px 14px;text-align:center;
}
.pcard--green .pcard__title{background:var(--ok)}
.pcard__body{padding:16px;text-align:center;display:flex;flex-direction:column;flex:1}
.pcard__catch{
  margin:0 0 14px;font-size:26px;font-weight:900;line-height:1.35;color:var(--brand);
}
.pcard--green .pcard__catch{color:var(--ok)}
.pcard__img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;display:block}
.pcard__note{margin:14px 0 2px;font-size:13px;color:var(--ink-soft)}
.pcard__price{
  margin:0;display:flex;align-items:baseline;justify-content:center;gap:4px;
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
.pcard__num{font-size:38px;font-weight:900;color:var(--alert-strong);letter-spacing:-.02em;line-height:1.1}
.pcard__unit{font-size:19px;font-weight:700;color:var(--alert-strong)}
.pcard__unit small{display:block;font-size:11px;font-weight:700;line-height:1}
.pcard__tax{margin:10px 0 14px;font-size:15px;color:var(--ink-soft)}
.pcard__tax strong{font-size:20px;font-weight:900;color:var(--ink)}
.pcard__size{
  margin:auto 0 0;font-size:15px;font-weight:700;color:var(--alert-strong);
  border:2px solid var(--alert-strong);border-radius:5px;padding:6px 10px;
}
@media(min-width:768px){
  .pcards{grid-template-columns:1fr 1fr;gap:24px}
  .pcard__catch{font-size:30px}
}
@media(min-width:1000px){
  .pcards{grid-template-columns:repeat(4,1fr)}
  .pcard__title{font-size:15px}
  .pcard__catch{font-size:22px}
  .pcard__num{font-size:32px}
}

/* 含まれるもの */
.included{
  margin-top:26px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;
}
.included__title{margin:0 0 12px;font-size:17px;font-weight:900;text-align:center}
.included__list{
  list-style:none;margin:0 0 14px;padding:0;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
.included__list li{
  background:var(--accent);color:var(--ink);border-radius:999px;
  padding:7px 20px;font-size:16px;font-weight:700;
}
.included__note{margin:0;font-size:15px;color:var(--ink-soft);line-height:1.8}

/* ============================================================
   コンクリート セット価格（青バナー）
   参考サイトは画像1枚だったものを、テキスト＋写真のCSSで再現
   ============================================================ */
.ccards{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.ccard{
  background:linear-gradient(100deg,var(--hero) 0%,#1B5AE0 100%);
  border-radius:14px;overflow:hidden;color:#fff;
  display:grid;grid-template-columns:1fr;gap:18px;padding:22px;
}
.ccard__title{
  margin:0 0 10px;font-size:26px;font-weight:900;line-height:1.35;color:#fff;
  letter-spacing:.01em;
}
/* 価格：斜体の太字＋黄色（参考バナーの見せ方に合わせる） */
.ccard__price{margin:0 0 18px;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px}
.ccard__num{
  font-size:52px;font-weight:900;font-style:italic;color:var(--accent);
  letter-spacing:-.02em;line-height:1;
  text-shadow:0 3px 0 rgba(0,0,0,.18);
}
.ccard__yen{font-size:26px;font-weight:900;font-style:italic;color:#fff}
.ccard__tax{font-size:13px;font-weight:700;color:#fff}
.ccard__from{font-size:20px;font-weight:900;color:#fff;margin-left:2px}

/* 含まれるもの */
.ccard__inc{position:relative}
.ccard__inc-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;
}
.ccard__inc-list{
  list-style:none;margin:0;padding:20px 16px 14px;
  background:#fff;border-radius:8px;color:var(--ink);
}
.ccard__inc-list li{font-size:15px;line-height:1.75}

.ccard__photo{margin:0}
.ccard__photo img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  border-radius:12px;
}

@media(min-width:820px){
  .ccard{grid-template-columns:1fr 46%;gap:26px;padding:28px;align-items:center}
  .ccard__title{font-size:32px}
  .ccard__num{font-size:64px}
  .ccard__yen{font-size:30px}
  .ccard__inc-list li{font-size:16px}
}

/* ============================================================
   工事の流れ
   ============================================================ */
.flow-step{list-style:none;margin:0;padding:0;counter-reset:step}
.flow-step li{
  position:relative;padding:0 0 24px 54px;counter-increment:step;
}
.flow-step li::before{
  content:"STEP" counter(step);position:absolute;left:0;top:0;
  width:42px;height:42px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:9px;font-weight:700;line-height:1.1;text-align:center;
}
.flow-step li::after{
  content:"";position:absolute;left:20px;top:42px;bottom:0;width:2px;background:var(--line);
}
.flow-step li:last-child{padding-bottom:0}
.flow-step li:last-child::after{display:none}
.flow-step h3{font-size:16px;margin:8px 0 4px}
.flow-step p{margin:0;font-size:14px;color:var(--ink-soft)}

/* ============================================================
   FAQ（折りたたまず常時表示）
   ============================================================ */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line);background:#fff;padding:18px 16px 18px 44px}
.faq__q{
  margin:0 0 8px;position:relative;font-weight:700;font-size:17px;line-height:1.6;
}
.faq__q::before{
  content:"Q";position:absolute;left:-30px;top:0;color:var(--brand);font-weight:700;font-size:20px;line-height:1.4;
}
.faq__a{
  margin:0;position:relative;font-size:17px;color:var(--ink-soft);line-height:1.85;
}
.faq__a::before{
  content:"A";position:absolute;left:-30px;top:0;color:var(--link);font-weight:700;font-size:20px;line-height:1.4;
}

/* ============================================================
   お客様の声
   ============================================================ */
.voice{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.voice__head{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.voice__avatar{
  flex:none;width:46px;height:46px;border-radius:50%;
  background:var(--brand);color:#fff;display:grid;place-items:center;
}
.voice__avatar .ico{width:28px;height:28px}
.voice__title{font-size:19px;color:var(--brand);margin:0;font-weight:900;line-height:1.45}
.voice__body{margin:0;font-size:17px}

/* ============================================================
   対応エリア
   ============================================================ */
.arealist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.arealist li a,.arealist li span{
  display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:8px 14px;font-size:14px;text-decoration:none;color:var(--ink);font-weight:700;
}
.arealist li a:hover{border-color:var(--brand);color:var(--brand)}

/* ============================================================
   CTA帯
   ============================================================ */
.cta{background:var(--hero);color:#fff;padding:40px 0;text-align:center}
.cta h2{font-size:22px;margin:0 0 8px;color:#fff}
.cta p{margin:0 0 20px;font-size:17px;opacity:.9}
/* ヒーロー直後用：紺青が連続しないよう明色にする */
.cta--light{background:var(--bg-cream);border-bottom:1px solid var(--line)}
.cta--light h2{color:var(--ink)}
.cta--light p{color:var(--ink-soft);opacity:1}

/* ============================================================
   下層ページのヘッダー
   ============================================================ */
.pagehero{background:var(--hero);color:#fff;padding:34px 0 38px;text-align:center}
.pagehero__h1{font-size:26px;font-weight:900;margin:0;line-height:1.45;color:#fff}
.pagehero__lead{margin:14px auto 0;max-width:40em;font-size:16px;line-height:1.85;opacity:.95}
.pagehero__cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:24px}
@media(min-width:768px){
  .pagehero{padding:44px 0 48px}
  .pagehero__h1{font-size:32px}
  .pagehero__cta{flex-direction:row;justify-content:center;align-items:stretch}
}

/* ============================================================
   お問い合わせフォーム
   → [[component-library]] Contact page layout (JP) Hard Rules
   ============================================================ */
/* 3. 営業お断りの注意書き（フォーム直前） */
.notice-sales{
  max-width:640px;margin:0 auto 20px;           /* 5. 幅を絞るだけでなく必ず中央寄せ */
  background:#FFFBEA;border-left:6px solid var(--accent);
  padding:14px 18px;font-size:15px;line-height:1.8;border-radius:0 6px 6px 0;
}
/* 4. フォームはカードとして独立させ、入力欄は白で浮かせる */
.cform{
  max-width:640px;margin:0 auto;                /* 5. 注意書きと同じ幅・同じ中央寄せ */
  background:var(--bg-alt);border-radius:10px;padding:24px 20px;
}
.hidden-field{position:absolute;left:-9999px}
.field{margin-bottom:18px}
.field label{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;margin-bottom:6px}
.field__req{
  background:var(--alert);color:#fff;font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:3px;letter-spacing:.04em;
}
.field input,.field select,.field textarea{
  width:100%;background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:12px 14px;font-size:16px;font-family:inherit;color:var(--ink);line-height:1.6;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--hero);outline-offset:1px;border-color:var(--hero);
}
.field textarea{resize:vertical}
.consent{display:flex;gap:10px;align-items:flex-start;margin:22px 0 18px;font-size:15px;line-height:1.7;cursor:pointer}
.consent input{flex:none;width:20px;height:20px;margin-top:3px;accent-color:var(--brand)}
.h-captcha{margin-bottom:18px}
/* 送信ボタンはCTAボタンの2行構成ではなく、アイコンと文字を横並びにする */
.cform__submit{
  width:100%;max-width:none;flex-direction:row;gap:.5em;
  font-size:18px;font-weight:700;padding:17px 20px;
}
.cform__submit .ico{width:1.1em;height:1.1em}
/* 6. 送信ボタン直後に貼りつかないよう余白を取り、中央寄せ */
.contact-privacy-note{
  max-width:640px;margin:20px auto 0;text-align:center;
  font-size:14px;line-height:1.8;color:var(--ink-soft);
}
.btn--ghost-line{
  background:transparent;color:var(--ink);border:2px solid var(--line);
  font-size:16px;padding:14px 26px;
}
.btn--ghost-line:hover{border-color:var(--brand);color:var(--brand)}

/* ============================================================
   法務ページ（条文・表）
   ============================================================ */
.legal{max-width:820px;margin:0 auto}
.legal__sec{margin-bottom:30px}
.legal__sec h2{
  font-size:19px;margin:0 0 10px;padding-left:12px;
  border-left:5px solid var(--brand);line-height:1.5;
}
.legal__sec p{margin:0 0 12px;font-size:16px;line-height:1.95;color:var(--ink-soft)}
.legal__sec p:last-child{margin-bottom:0}

.legal-table{width:100%;border-collapse:collapse;font-size:16px;background:#fff;max-width:820px;margin:0 auto}
.legal-table th,.legal-table td{border:1px solid var(--line);padding:14px 16px;text-align:left;line-height:1.85}
.legal-table th{background:var(--bg-alt);font-weight:700;width:32%;white-space:nowrap;vertical-align:top}
.legal-table td{color:var(--ink-soft)}
@media(max-width:600px){
  .legal-table th,.legal-table td{display:block;width:auto;white-space:normal;border-bottom:0}
  .legal-table td{border-top:0;padding-top:8px}
  .legal-table tr{display:block;border-bottom:1px solid var(--line)}
}

/* ============================================================
   サービスページ：補助金の申請ステップ
   ============================================================ */
.sub-steps__h{font-size:17px;margin:26px 0 10px;text-align:center}
.sub-steps{
  list-style:none;margin:0 0 20px;padding:0;counter-reset:sub;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}
.sub-steps li{
  counter-increment:sub;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:8px 16px 8px 34px;font-size:15px;font-weight:700;position:relative;
}
.sub-steps li::before{
  content:counter(sub);position:absolute;left:7px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:900;
}
/* ⚠️ かつてここに .section .case-grid{max-width:820px;margin:0 auto} があった。
   サービスページ向けの指定だったが、トップページの事例グリッドも同じセレクタに
   当たり、見出し（1,156px）に対してグリッドだけ820pxに縮んで中央寄せされていた。
   見出しと写真の左端が揃わず、写真も不必要に小さくなるため削除（2026-08-30）。
   枚数ごとの列数は .case-grid:has(...) 側で制御する。 */

/* ============================================================
   フッター
   ============================================================ */
.foot{background:#2B2F36;color:#cfd3d8;padding:36px 0 20px;font-size:14px}
.foot a{color:#cfd3d8;text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot__nav{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.foot__copy{margin:0;font-size:12px;color:#8b9199;border-top:1px solid #3c424a;padding-top:16px}

/* ============================================================
   固定フッターCTA（モバイル）
   ============================================================ */
.fixed-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;
  background:rgba(255,255,255,.96);border-top:1px solid var(--line);padding:5px 8px 7px;gap:8px;
}
.fixed-cta .btn{flex:1;padding:8px 8px;font-size:15px}
/* body の余白はバーの実高に合わせる。ズレるとコンテンツ末尾がバーに隠れる */
body{padding-bottom:66px}
@media(min-width:900px){.fixed-cta{display:none}body{padding-bottom:0}}


/* ============================================================
   対応エリア一覧（/service-areas）
   ============================================================ */
.areas{display:grid;grid-template-columns:1fr;gap:18px;margin-top:22px}
.area{border:1px solid var(--line);border-radius:8px;padding:18px 18px 14px;background:var(--bg)}
.area__h{margin:0 0 8px;font-size:19px;font-weight:700;color:var(--ink);
  border-left:5px solid var(--brand);padding-left:10px;line-height:1.3}
.area__b{margin:0;font-size:16px;line-height:1.85;color:var(--ink)}
.area__l{margin:10px 0 0;font-size:13px}
.area__l a{color:var(--link);text-decoration:underline}
.section--alt .area{background:var(--bg)}
@media(min-width:768px){
  .areas{grid-template-columns:1fr 1fr;gap:20px}
  .area__h{font-size:20px}
}

/* hCaptcha未入力時のエラー表示（送信ボタンの直前に出る） */
.cform__err{
  margin:10px 0 0;padding:10px 12px;border-radius:6px;
  background:#FDECEC;border:1px solid var(--alert);
  color:var(--alert-strong);font-size:15px;font-weight:700;line-height:1.6;
}
.cform__err[hidden]{display:none}

/* ============================================================
   施工工程（写真＋番号＋説明）
   参考事例のグリッドとは別。手順を追って読ませるため縦積みにする。
   ============================================================ */
.steps{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:22px}
.step{display:grid;gap:12px}
.step__fig{margin:0}
.step__fig img{width:100%;height:auto;display:block;border-radius:8px;background:var(--bg-alt)}
.step__h{
  margin:0 0 6px;font-size:19px;font-weight:700;color:var(--ink);line-height:1.4;
  display:flex;align-items:center;gap:10px;
}
.step__n{
  flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:15px;font-weight:900;
  display:grid;place-items:center;
}
.step__body p{margin:0;font-size:16px;line-height:1.85;color:var(--ink)}
@media(min-width:768px){
  .steps{gap:28px}
  /* 写真と説明を横並びにし、偶数番は左右を入れ替えて単調さを避ける */
  .step{grid-template-columns:1fr 1fr;align-items:center;gap:26px}
  .step:nth-child(even) .step__fig{order:2}
  .step__h{font-size:20px}
}

/* ============================================================
   参考イメージ（仕上がりの見え方を示す写真）
   ⚠️ .case-grid（参考事例＝実際の工事写真）とは別。
      ストック写真など施工写真でないものはこちらを使い、見出しも分ける。
   ============================================================ */
.gallery{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:18px}
.gallery figure{margin:0}
.gallery img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:8px;background:var(--bg-alt);
}
.gallery figcaption{
  margin-top:8px;font-size:15px;line-height:1.6;color:var(--ink);font-weight:700;
}
/* 1枚だけのときは切り取らず、元の縦横比のまま大きく見せる。
   Before/After合成のように上下に情報がある画像を4:3でcropすると
   ラベルや比較対象が欠けるため。 */
.gallery:has(li:only-child) img{aspect-ratio:auto;object-fit:contain}
@media(min-width:768px){
  .gallery{grid-template-columns:repeat(3,1fr);gap:20px}
  /* 1枚のときは本文カラム（--measure）に幅を揃え、中央に置く。
     左端が .sec-body と一致する。 */
  .gallery:has(li:only-child){grid-template-columns:minmax(0,var(--measure));justify-content:center}
}