@charset "utf-8";
/* ============================================================
   株式会社 宮永塗装建設 リニューアル提案デモサイト
   配色は 13_Web構成.md の指定どおり（色相216°を維持）。独自の色相変更なし。
   ============================================================ */

/* ---------- 1. トークン ---------- */
:root{
  --navy:      #0F3266;
  --blue:      #1A64D4;
  --blue-dark: #0F4FAF;
  --bg:        #FFFFFF;
  --bg-alt:    #F4F6F9;
  --text:      #1A1A1A;
  --text-sub:  #595959;
  --gold:      #A8791A;   /* 承認バッジの縁と細い区切り線のみ。本文色には使わない */

  --line:      #DCE3EC;

  --font-sans: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-serif:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  /* 余白スケール */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --wrap: 1120px;
  --radius: 6px;
  --shadow-1: 0 1px 3px rgba(15,50,102,.10), 0 6px 16px rgba(15,50,102,.06);
  --shadow-2: 0 6px 14px rgba(15,50,102,.16), 0 18px 40px rgba(15,50,102,.14);

  --header-h: 92px;

  /* 速度：速い150-200ms／標準400-700ms／ゆっくり1000ms以上 */
  --t-fast: 180ms;
  --t-base: 400ms;
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-in:  cubic-bezier(.5,0,.9,.4);
}

/* ---------- 2. リセット ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:17px;            /* 読者が50〜70代。この数値を下げない */
  line-height:1.9;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--blue); text-decoration:underline; text-underline-offset:.2em; }
a:hover{ color:var(--blue-dark); }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-serif); font-weight:600; line-height:1.5; margin:0; color:var(--navy); }
p{ margin:0 0 1.2em; }
p:last-child{ margin-bottom:0; }
table{ border-collapse:collapse; width:100%; }

/* フォーカスリングは消さない（--blue の2px外枠） */
:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
  border-radius:2px;
}
/* 濃紺地の上では青の外枠が沈むため、外側に白のハローを足して視認性を確保する */
.site-header :focus-visible,
.cta-band :focus-visible,
.process :focus-visible,
.site-footer :focus-visible,
.mobile-bar :focus-visible{
  outline-color:#fff;
  box-shadow:0 0 0 4px rgba(26,100,212,.95);
}

/* スキップリンク */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:#fff; color:var(--navy); padding:12px 20px; font-weight:700;
}
.skip:focus{ left:8px; top:8px; }

/* ---------- 3. レイアウト部品 ---------- */
.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }
.section{ padding:var(--s-9) 0; }
.section--alt{ background:var(--bg-alt); }
.section--navy{ background:var(--navy); color:#fff; }
.section--navy h2,.section--navy h3{ color:#fff; }

.eyebrow{
  font-family:var(--font-sans);
  font-size:14px; font-weight:700; letter-spacing:.14em;
  color:var(--blue); margin:0 0 var(--s-3);
}
.section--navy .eyebrow,.process .eyebrow,.cta-band .eyebrow{ color:#9FC2F5; }

.h2{ font-size:clamp(26px,3.2vw,38px); letter-spacing:.01em; }
.h3{ font-size:clamp(20px,2.2vw,24px); }
.lead{ font-size:19px; line-height:1.9; max-width:44em; }
.note{ font-size:14px; line-height:1.8; color:var(--text-sub); }
.section--navy .note,.process .note,.cta-band .note{ color:#C6D6EE; }

.section-head{ margin-bottom:var(--s-7); }
.section-head .h2{ margin-bottom:var(--s-4); }

.rule-gold{
  width:56px; height:3px; border:0; margin:0 0 var(--s-4);
  background:var(--gold);      /* 差し色は細い区切り線のみ */
}

.h2-ico{ display:inline-block; width:38px; height:38px; vertical-align:-6px; margin-right:14px; }
.inline-ico{ display:inline-block; width:22px; height:22px; vertical-align:-4px; margin-right:8px; }

.stack-lg > * + *{ margin-top:var(--s-7); }
.stack-md > * + *{ margin-top:var(--s-5); }

/* ---------- 4. ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:14px 28px;
  font-family:var(--font-sans); font-size:17px; font-weight:700; line-height:1.4;
  text-decoration:none; border:2px solid transparent; border-radius:var(--radius);
  cursor:pointer; text-align:center;
  transition:background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.btn--primary{ background:var(--blue); color:#fff; }
.btn--primary:hover{ background:var(--blue-dark); color:#fff; }
.btn--ghost{ background:#fff; color:var(--navy); border-color:var(--navy); }
.btn--ghost:hover{ background:var(--bg-alt); color:var(--navy); }
.btn--onnavy{ background:#fff; color:var(--navy); }
.btn--onnavy:hover{ background:#E7EEF9; color:var(--navy); }
.btn--outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.75); }
.btn--outline-light:hover{ background:rgba(255,255,255,.14); color:#fff; }
.btn .ico{ width:22px; height:22px; flex:0 0 auto; }
.btn--block{ width:100%; }

/* テキストリンク型CTA */
.cta-text{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:17px; text-decoration:none;
  color:var(--blue); border-bottom:2px solid currentColor; padding-bottom:3px;
  min-height:44px;
}
.cta-text:hover{ color:var(--blue-dark); }
.cta-text .ico{ width:18px; height:18px; }
.section--navy .cta-text,.process .cta-text,.cta-band .cta-text{ color:#fff; }
.section-cta{ margin-top:var(--s-7); }

/* ---------- 5. ヘッダー ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:var(--navy);
  height:var(--header-h);
  display:flex; align-items:center;
  will-change:height, background-color;
}
.site-header.is-scrolled{ background:rgba(15,50,102,.93); backdrop-filter:blur(8px); }
/* ヘッダーは本文より広い幅を使う（ナビ6項目＋電話＋CTAが1行に収まるように） */
.site-header .wrap{ width:min(100% - 40px, 1360px); display:flex; align-items:center; gap:var(--s-4); }

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; flex:0 0 auto; }
.brand__mark{ width:38px; height:38px; flex:0 0 auto; }
.brand__name{ font-family:var(--font-serif); font-weight:600; font-size:19px; line-height:1.25; letter-spacing:.02em; }
.brand__sub{ display:block; font-family:var(--font-sans); font-size:11px; font-weight:400; letter-spacing:.08em; color:#AFC7EA; }

.gnav{ margin-left:auto; min-width:0; }
.gnav ul{ display:flex; flex-wrap:nowrap; gap:22px; }
.gnav li{ flex:0 0 auto; }
.gnav a{
  color:#fff; text-decoration:none; font-size:15px; font-weight:500; white-space:nowrap;
  padding:6px 2px; display:inline-block; border-bottom:2px solid transparent;
  transition:border-color var(--t-fast) ease;
}
.gnav a:hover{ color:#fff; border-bottom-color:#9FC2F5; }
.gnav a[aria-current="page"]{ border-bottom-color:#fff; }

.header-cta{ display:flex; align-items:center; gap:var(--s-3); flex:0 0 auto; }
.header-cta .btn{ min-height:48px; padding:10px 18px; font-size:15px; white-space:nowrap; }
.header-tel{
  display:inline-flex; align-items:center; gap:8px;
  color:#fff; text-decoration:none; font-weight:700; font-size:16px;
  border:2px solid rgba(255,255,255,.6); border-radius:var(--radius);
  min-height:48px; padding:10px 14px; white-space:nowrap;
  transition:background-color var(--t-fast) ease;
}
.header-tel:hover{ background:rgba(255,255,255,.14); color:#fff; }
.header-tel .ico{ width:20px; height:20px; }

.nav-toggle{ display:none; }

/* 固定ヘッダー分の逃げ */
main{ padding-top:var(--header-h); }

/* ---------- 6. ヒーロー ---------- */
.hero{ position:relative; overflow:hidden; background:var(--navy); }
.hero__media{ position:absolute; inset:-14% 0 -14% 0; z-index:0; will-change:transform; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(15,50,102,.92) 0%, rgba(15,50,102,.80) 44%, rgba(15,50,102,.34) 78%, rgba(15,50,102,.24) 100%);
}
.hero__inner{ position:relative; z-index:2; padding:var(--s-9) 0 var(--s-8); }
.hero__body{ max-width:36em; color:#fff; }
.hero h1{
  color:#fff; font-size:clamp(30px,4.2vw,50px); line-height:1.45;
  letter-spacing:.01em; margin-bottom:var(--s-5);
}
.hero__sub{ font-size:19px; line-height:1.9; color:#E4ECF8; margin-bottom:var(--s-6); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--s-4); }
.hero__credit{ margin-top:var(--s-6); font-size:13px; color:#B9CBE8; }

/* 下層ページの見出し帯 */
.page-hero{ position:relative; background:var(--navy); overflow:hidden; }
.page-hero__media{ position:absolute; inset:0; z-index:0; opacity:.30; }
.page-hero__media img{ width:100%; height:100%; object-fit:cover; }
.page-hero__inner{ position:relative; z-index:1; padding:var(--s-8) 0; }
.page-hero h1{ color:#fff; font-size:clamp(26px,3.6vw,40px); margin-bottom:var(--s-3); }
.page-hero p{ color:#DCE7F7; max-width:44em; margin:0; }
.page-hero__credit{ margin:var(--s-4) 0 0; font-size:13px; color:#B9CBE8; }
.breadcrumb{ font-size:14px; color:#B9CBE8; margin-bottom:var(--s-4); }
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:.5em; }
.breadcrumb a{ color:#DCE7F7; }
.breadcrumb li + li::before{ content:"›"; margin-right:.5em; color:#8FAAD2; }

/* ---------- 7. 信頼の3点（帯） ---------- */
.trust{ background:var(--bg-alt); border-bottom:1px solid var(--line); }
.trust__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); padding:var(--s-7) 0; }
.trust__item{
  display:flex; gap:var(--s-4); align-items:flex-start;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s-5);
}
.trust__item--badge{ border-color:var(--gold); border-width:2px; }  /* 承認バッジの縁のみ金茶 */
.trust__icon{ width:44px; height:44px; flex:0 0 auto; }
.trust__t{ font-family:var(--font-serif); font-weight:600; font-size:18px; color:var(--navy); margin:0 0 4px; line-height:1.5; }
.trust__d{ font-size:15px; line-height:1.8; color:var(--text-sub); margin:0; }

/* ---------- 8. カード ---------- */
.cards{ display:grid; gap:var(--s-5); }
.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;
  box-shadow:var(--shadow-1);
  will-change:transform;
}
.card__media{ overflow:hidden; aspect-ratio:4/3; background:var(--bg-alt); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.card:hover .card__media img{ transform:scale(1.05); }   /* 装飾層5：CSSのみ */
.card__body{ padding:var(--s-5); display:flex; flex-direction:column; flex:1; }
.card__title{ font-size:21px; margin-bottom:var(--s-3); }
.card__text{ font-size:16px; line-height:1.85; margin-bottom:var(--s-4); }
.card__link{ margin-top:auto; }
.img-credit{ font-size:13px; color:var(--text-sub); margin:8px 0 0; }

/* ---------- 9. 一覧・表 ---------- */
.taglist{ display:flex; flex-wrap:wrap; gap:var(--s-3); }
.taglist li{
  border:1px solid var(--blue); color:var(--navy); background:#fff;
  border-radius:999px; padding:8px 18px; font-size:16px; font-weight:500;
}
.checklist li{
  position:relative; padding-left:32px; margin-bottom:var(--s-3); font-size:17px; line-height:1.85;
}
.checklist li::before{
  content:""; position:absolute; left:0; top:.55em; width:18px; height:18px;
  background:var(--blue);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.6 5 12l1.4-1.4 3.2 3.2 8-8L19 7.2z'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.6 5 12l1.4-1.4 3.2 3.2 8-8L19 7.2z'/%3E%3C/svg%3E") no-repeat center/contain;
}

.table-info{ background:#fff; border:1px solid var(--line); }
.table-info th,.table-info td{
  border-bottom:1px solid var(--line); padding:16px 20px; text-align:left; font-size:16px; line-height:1.8;
  vertical-align:top;
}
.table-info th{
  width:13em; background:var(--bg-alt); color:var(--navy);
  font-family:var(--font-sans); font-weight:700;
}
.table-info tr:last-child th,.table-info tr:last-child td{ border-bottom:0; }

/* ---------- 10. 事例（施工前／施工後） ---------- */
.ba{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); align-items:start; }
.ba figure{ margin:0; }
.ba__tag{
  display:inline-block; font-size:14px; font-weight:700; letter-spacing:.08em;
  padding:5px 14px; border-radius:999px; margin-bottom:var(--s-3);
}
.ba__tag--before{ background:#E1E6EC; color:#33404F; }
.ba__tag--after{ background:var(--navy); color:#fff; }
.ba img{ width:100%; border-radius:var(--radius); border:1px solid var(--line); }

/* タブ */
.tabs{ display:flex; flex-wrap:wrap; gap:var(--s-5); margin-bottom:var(--s-6); border-bottom:1px solid var(--line); }
.tab{
  appearance:none; background:transparent; border:0; border-bottom:3px solid transparent;
  font-family:var(--font-sans); font-size:17px; font-weight:700; color:var(--text-sub);
  padding:12px 4px; margin-bottom:-1px; cursor:pointer; min-height:48px;
  transition:color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.tab:hover{ color:var(--navy); }
.tab[aria-selected="true"]{ color:var(--navy); border-bottom-color:var(--blue); }
.tabpanel[hidden]{ display:none; }

/* ---------- 11. 主役層：塗膜が積み上がる7工程 ---------- */
.process{ background:var(--navy); color:#fff; position:relative; }
.process__stage{
  min-height:100vh; display:flex; align-items:center;
  padding:var(--s-8) 0;
}
.process__grid{
  display:grid; grid-template-columns:64px 1fr 1fr; gap:var(--s-6);
  align-items:center; width:100%;
}

/* 進捗インジケーター（1/7＋縦バー） */
.pindic{ display:flex; flex-direction:column; align-items:center; gap:var(--s-4); align-self:stretch; }
.pindic__num{
  font-family:var(--font-serif); font-size:24px; font-weight:600; color:#fff;
  letter-spacing:.04em; white-space:nowrap;
}
.pindic__num small{ font-size:15px; color:#9FC2F5; font-family:var(--font-sans); }
.pindic__track{ position:relative; width:5px; flex:1; min-height:220px; background:rgba(255,255,255,.20); border-radius:2px; }
.pindic__bar{
  position:absolute; inset:0 0 auto 0; width:100%; height:0%;
  background:var(--blue); border-radius:2px;
  transition:height var(--t-base) var(--ease-out);
}

/* 左：工程テキスト */
.pstep{ position:relative; min-height:340px; }
.pstep__item{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity 300ms var(--ease-out), visibility 300ms;
}
.pstep__item.is-active{ opacity:1; visibility:visible; }
.pstep__no{
  font-family:var(--font-serif); font-size:15px; font-weight:600; letter-spacing:.18em;
  color:#9FC2F5; margin:0 0 var(--s-3);
}
.pstep__t{ color:#fff; font-size:clamp(24px,3vw,34px); margin:0 0 var(--s-4); }
.pstep__d{ color:#DCE7F7; font-size:18px; line-height:1.95; margin:0; max-width:26em; }

/* 右：断面SVG */
.pwall{ display:flex; justify-content:center; }
.pwall svg{ width:100%; max-width:520px; height:auto; }
/* 既定は完成状態（JS無効・非対応環境でも断面図が読める）。
   JSが有効なときだけ初期非表示にし、スクロールに合わせて積み上げる。 */
.js-on .pwall .layer,
.js-on .pwall .layer-label{ opacity:0; }
.pwall.is-complete .layer,
.pwall.is-complete .layer-label{ opacity:1 !important; transform:none !important; }

/* モバイル用の縦積みカード */
.process__stack{ display:none; }
.pcard{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.20);
  border-radius:var(--radius); padding:var(--s-5); margin-bottom:var(--s-4);
}
.pcard__no{ font-family:var(--font-serif); font-size:14px; letter-spacing:.16em; color:#9FC2F5; margin:0 0 6px; }
.pcard__t{ color:#fff; font-size:21px; margin:0 0 var(--s-2); }
.pcard__d{ color:#DCE7F7; font-size:16px; line-height:1.85; margin:0; }

.process__after{ padding:var(--s-8) 0 var(--s-9); }
.process__after .btn{ margin-bottom:var(--s-5); }

/* ---------- 12. CTA帯 ---------- */
.cta-band{ background:var(--navy); color:#fff; padding:var(--s-9) 0; position:relative; overflow:hidden; }
.cta-band h2{ color:#fff; font-size:clamp(24px,3vw,34px); margin-bottom:var(--s-4); }
.cta-band p{ color:#DCE7F7; max-width:42em; }
.cta-band__actions{ display:flex; flex-wrap:wrap; gap:var(--s-4); margin-top:var(--s-6); }
.cta-band__bg{ position:absolute; inset:0; z-index:0; }
.cta-band__bg img{ width:100%; height:100%; object-fit:cover; }
.cta-band__bg::after{ content:""; position:absolute; inset:0; background:rgba(15,50,102,.88); }
.cta-band .wrap{ position:relative; z-index:1; }

/* 連絡先ブロック */
.contact-block{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s-6); box-shadow:var(--shadow-1);
}
.contact-block--onnavy{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.24); box-shadow:none; }
.tel-big{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-serif); font-weight:600; font-size:clamp(28px,3.6vw,40px);
  color:var(--navy); text-decoration:none; letter-spacing:.01em; line-height:1.3;
}
.tel-big:hover{ color:var(--blue-dark); }
.tel-big .ico{ width:34px; height:34px; flex:0 0 auto; }
.contact-block--onnavy .tel-big{ color:#fff; }
.contact-block--onnavy .tel-big:hover{ color:#DCE7F7; }
.tel-label{ font-size:15px; font-weight:700; color:var(--blue); letter-spacing:.08em; margin:0 0 var(--s-2); }
.contact-block--onnavy .tel-label{ color:#9FC2F5; }
.fax-line{ font-size:16px; color:var(--text-sub); margin:var(--s-3) 0 0; }
.contact-block--onnavy .fax-line{ color:#C6D6EE; }
.mail-line{ font-size:18px; margin:var(--s-4) 0 0; }
.mail-line a{ font-weight:700; word-break:break-all; }
.contact-block--onnavy .mail-line{ color:#DCE7F7; }
.contact-block--onnavy .mail-line a{ color:#fff; }

/* エリア */
.area-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); }
.area-item{ background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.24); border-radius:var(--radius); padding:var(--s-5); }
.area-item h3{ color:#fff; font-size:20px; margin:0 0 var(--s-2); }
.area-item p{ color:#DCE7F7; font-size:15px; line-height:1.85; margin:0; }

/* ステップ3つ */
.steps3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); counter-reset:st; }
.steps3 li{
  counter-increment:st; background:#fff; border:1px solid var(--line);
  border-top:3px solid var(--blue); border-radius:var(--radius); padding:var(--s-5);
}
.steps3 li::before{
  content:"STEP " counter(st);
  display:block; font-family:var(--font-sans); font-size:13px; font-weight:700;
  letter-spacing:.14em; color:var(--blue); margin-bottom:var(--s-2);
}
.steps3 h3{ font-size:19px; margin:0 0 var(--s-2); }
.steps3 p{ font-size:16px; line-height:1.85; margin:0; }

/* ---------- 13. フォーム（見た目のみ） ---------- */
.form{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:var(--s-7); box-shadow:var(--shadow-1); }
.field{ margin-bottom:var(--s-6); }
.field > label,.field > .label{
  display:block; font-weight:700; font-size:16px; color:var(--navy); margin-bottom:var(--s-2);
}
.field .hint{ font-size:14px; color:var(--text-sub); margin:0 0 var(--s-2); line-height:1.7; }
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea{
  width:100%; font-family:var(--font-sans); font-size:17px; line-height:1.8; color:var(--text);
  background:#fff; border:1px solid #97A3B4; border-radius:var(--radius);
  padding:12px 14px; min-height:52px;
  transition:border-color var(--t-fast) ease;
}
.field textarea{ min-height:170px; resize:vertical; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--navy); }
.radios{ display:flex; flex-wrap:wrap; gap:var(--s-5); }
.radios label{ display:inline-flex; align-items:center; gap:8px; font-size:17px; min-height:44px; cursor:pointer; }
.radios input{ width:20px; height:20px; accent-color:var(--blue); }
.form__note{ margin-top:var(--s-4); }

/* ---------- 14. フッター ---------- */
.site-footer{ background:var(--navy); color:#DCE7F7; padding:var(--s-8) 0 var(--s-6); font-size:15px; }
.site-footer h2,.site-footer h3{ color:#fff; }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:var(--s-6); padding-bottom:var(--s-6); }
.footer__brand .brand{ margin-bottom:var(--s-4); }
.footer__addr{ font-style:normal; line-height:1.9; color:#C6D6EE; }
.footer__addr a{ color:#fff; font-weight:700; }
.footer__nav h3{ font-size:16px; margin:0 0 var(--s-3); }
.footer__nav li{ margin-bottom:10px; }
.footer__nav a{ color:#DCE7F7; text-decoration:none; }
.footer__nav a:hover{ color:#fff; text-decoration:underline; }
.footer__hr{ border:0; border-top:1px solid var(--gold); opacity:.65; margin:0 0 var(--s-5); }  /* 細い区切り線のみ金茶 */
.footer__disclaimer{ font-size:14px; line-height:1.9; color:#C6D6EE; max-width:64em; margin:0 0 var(--s-4); }
.footer__copy{ font-size:13px; color:#9FB6D8; margin:0; }

/* ---------- 15. モバイル固定バー（768px未満） ---------- */
.mobile-bar{ display:none; }

/* ---------- 16. 基礎層アニメーションの初期状態 ---------- */
/* 語句の途中で改行させない（例：「埼玉・千葉・茨城」が分断されないように） */
.nb{ display:inline-block; }

/* JSが有効なときだけ初期非表示にする（JS無効時は最初から読める） */
.reveal{ opacity:1; }
.js-on .reveal{ opacity:0; transform:translateY(28px); }

/* ---------- 17. レスポンシブ ---------- */
@media (max-width:1340px){
  .header-tel{ display:none; }   /* 電話はヒーロー内・各セクション・固定バーからも1タップで届く */
}
@media (max-width:1100px){
  .gnav ul{ gap:16px; }
  .gnav a{ font-size:14px; }
  .brand__name{ font-size:17px; }
  .header-cta .btn{ font-size:14px; padding:10px 14px; }
  .process__grid{ grid-template-columns:56px 1fr 1fr; gap:var(--s-5); }
}
@media (max-width:900px){
  :root{ --header-h:64px; }
  .brand__name{ font-size:17px; }
  .brand__sub{ display:none; }
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    margin-left:auto; min-height:44px; min-width:44px; padding:8px 12px;
    background:transparent; color:#fff; border:2px solid rgba(255,255,255,.6);
    border-radius:var(--radius); font-family:var(--font-sans); font-size:14px; font-weight:700;
    white-space:nowrap; cursor:pointer;
  }
  .nav-toggle .ico{ width:20px; height:20px; }
  .gnav{
    position:fixed; inset:var(--header-h) 0 auto 0; background:var(--navy);
    border-top:1px solid rgba(255,255,255,.18);
    max-height:calc(100vh - var(--header-h)); overflow:auto;
    padding:var(--s-4) 0 var(--s-6); margin:0;
  }
  .gnav[hidden]{ display:none; }
  .gnav ul{ flex-direction:column; gap:0; width:min(100% - 40px,var(--wrap)); margin-inline:auto; }
  .gnav a{ display:block; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.14); font-size:17px; }
  .gnav a:hover,.gnav a[aria-current="page"]{ border-bottom-color:rgba(255,255,255,.14); }
  .header-cta{ display:none; }
  .trust__list{ grid-template-columns:1fr; }
  .cards--3,.cards--2{ grid-template-columns:1fr 1fr; }
  .steps3,.area-list{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:768px){
  body{ padding-bottom:78px; }   /* 固定バー分 */
  .section{ padding:var(--s-8) 0; }
  .hero__inner{ padding:var(--s-8) 0 var(--s-7); }
  .hero__scrim{ background:linear-gradient(180deg,rgba(15,50,102,.86) 0%,rgba(15,50,102,.92) 100%); }
  .hero__actions .btn{ width:100%; }
  .cards--3,.cards--2{ grid-template-columns:1fr; }
  .ba{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .table-info th{ width:auto; display:block; border-bottom:0; padding:14px 16px 0; }
  .table-info td{ display:block; padding:4px 16px 14px; }
  .form{ padding:var(--s-5); }
  .lead{ font-size:18px; }

  /* 主役層：pin解除、7工程を縦積みカードで表示（断面図は完成状態で静止） */
  .process__stage{ display:none; }
  .process__stack{ display:block; padding:var(--s-8) 0 0; }

  /* 固定バー */
  .mobile-bar{
    display:grid; grid-template-columns:1fr 1fr;
    position:fixed; left:0; right:0; bottom:0; z-index:120;
    background:var(--navy); border-top:1px solid rgba(255,255,255,.22);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mobile-bar a{
    display:flex; align-items:center; justify-content:center; gap:8px;
    min-height:66px; color:#fff; text-decoration:none; font-weight:700; font-size:16px;
    padding:10px 8px; text-align:center; line-height:1.3;
  }
  .mobile-bar a + a{ background:var(--blue); border-left:1px solid rgba(255,255,255,.22); }
  .mobile-bar .ico{ width:22px; height:22px; flex:0 0 auto; }
}
@media (max-width:520px){
  .wrap{ width:calc(100% - 32px); }
  .tel-big{ font-size:26px; }
  .tabs{ gap:var(--s-4); }
  .tab{ font-size:16px; }
}

/* ---------- 18. prefers-reduced-motion：全アニメーション無効化 ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .card:hover .card__media img{ transform:none; }
  /* 主役層：5層すべて表示済みの状態で静止 */
  .pwall .layer,.pwall .layer-label{ opacity:1 !important; transform:none !important; }
  .process__stage{ display:none !important; }
  .process__stack{ display:block !important; padding:var(--s-8) 0 0; }
}

@media print{ .site-header,.mobile-bar,.cta-band{ display:none; } main{ padding-top:0; } }