/* Formz 共通スタイル — 全ページ共通のルールをここに集約。
   ページ固有のスタイル（トップの大きいヘッダー等）は各htmlの<style>が後勝ちで上書きする。 */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--base);
  color:var(--ink);
  font-family:var(--body);
  font-size:18.5px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.sec--white{background:var(--card)}
.sec--pale{background:var(--pale)}
.sec--navy{background:var(--navy);color:#fff}
.sec-head--center{text-align:center}
h2 em{font-style:normal;color:var(--blue)}
.sec-lead{margin:0;color:var(--note);font-size:17.5px;line-height:1.9}
.eyebrow{
  font-family:var(--gothic);font-weight:700;font-size:13px;letter-spacing:.22em;
  color:var(--blue);margin:0 0 12px;
}
.head-in{display:flex;align-items:center;gap:26px;height:76px;max-width:1400px;margin-inline:auto;padding-inline:var(--pad)}
.logo{flex:none}
.logo img{height:34px;width:auto;max-width:none}
.head-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--gothic);font-weight:700;white-space:nowrap;flex:none;
  font-size:14.5px;color:#fff;background:var(--blue);border-radius:999px;height:46px;padding:0 22px}
.head-cta svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:1.8}
.foot{background:#061a38;color:#c3d0e4;padding:40px 0 28px;font-size:14px}
.sec{position:relative;isolation:isolate;padding-block:80px}
.sec-head{margin-bottom:38px}
h2{font-family:var(--gothic);font-weight:900;font-size:clamp(26px,3.4vw,38px);line-height:1.4;
  color:var(--head);margin:0 0 12px;letter-spacing:.01em;text-wrap:balance}
.btn-main{background:var(--blue);color:#fff}
.btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--gothic);font-weight:700;
  font-size:17px;height:56px;padding:0 34px;border-radius:999px;transition:transform .2s ease,background-color .2s ease}
@media (max-width:768px){
body{font-size:16px}
.head-in{height:64px;gap:10px}
.logo img{height:26px}
.head-cta{font-size:13px;height:40px;padding:0 13px;margin-left:auto}
.sec{padding-block:56px}
/* ボタンの文字は1行に収める（2026-08-30 田中さん指摘。折り返すくらいなら縮める） */
.btn{white-space:nowrap;font-size:14.5px;height:50px;padding:0 20px;gap:10px}
}
@media (max-width:380px){
.btn{font-size:13px;padding:0 15px;gap:8px}
}

/* スマホ用ハンバーガーメニュー（中身は js/common.js が .gnav から組み立てる） */
.menu-btn{display:none}
.m-menu{display:none}
@media (max-width:1080px){
.menu-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;background:none;border:none;cursor:pointer;padding:0 9px;flex:none}
.menu-btn span{display:block;height:2px;background:var(--head);border-radius:2px;
  transition:transform .25s ease,opacity .25s ease}
.m-menu{position:fixed;top:0;left:0;right:0;z-index:49;background:#fff;
  padding:80px 24px 24px;flex-direction:column;box-shadow:0 14px 30px rgba(5,32,70,.18);
  font-family:var(--gothic);font-weight:700;font-size:15.5px}
.m-menu a{display:block;padding:13px 4px;border-bottom:1px solid var(--line);color:var(--head)}
.m-menu .m-menu-cta{margin-top:16px;background:var(--blue);color:#fff;text-align:center;
  border-radius:999px;padding:13px;border-bottom:none}
body.menu-open .m-menu{display:flex}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .menu-btn span:nth-child(2){opacity:0}
body.menu-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
/* 狭いスマホでもヘッダー一式（ロゴ・ボタン・三本線）が収まるように詰める */
@media (max-width:768px){
.head-in{gap:8px;padding-inline:14px}
.head-cta{font-size:12.5px;height:38px;padding:0 12px}
.menu-btn{width:36px;padding:0 5px}
}
/* さらに狭い画面: ロゴを少し小さく・ボタンは短い文言（見積りを依頼）で収める */
@media (max-width:420px){
.logo img{height:22px}
.head-cta{font-size:12px;height:36px;padding:0 11px;gap:6px}
.head-cta svg{width:15px;height:15px}
}