/* =========================================================
   site.css — 全ページ共通スタイル
   （ヘッダー / ナビ / フッター / LINE CTA / お問い合わせ / ボタン）
   ========================================================= */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Noto Sans JP',sans-serif;color:#27313b;background:#fff;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
:root{--navy:#1c4e8a;--green:#1faa46}
html{scroll-behavior:smooth}

/* ===== Header ===== */
/* 注：backdrop-filter は使わない。
   filter/backdrop-filter/transform を持つ要素は、子孫の position:fixed の
   基準を画面ではなく自分自身に変えてしまい、モバイルのスライドメニュー
   （.main-nav は position:fixed）が開かなくなるため。 */
.site-header{border-bottom:1px solid #e9edf2;background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 1px 8px rgba(20,40,70,.06)}
.header-inner{max-width:1180px;margin:0 auto;padding:16px 28px 0;display:flex;align-items:center;gap:14px}
.logo-mark{width:42px;height:46px;border-radius:5px;background:linear-gradient(160deg,#2a6abf,#1c4e8a);display:flex;align-items:center;justify-content:center;color:#fff;flex:none;box-shadow:0 2px 6px rgba(28,78,138,.25)}
.logo-link{display:flex;align-items:center;gap:14px}
.logo-text{font-size:21px;font-weight:700;letter-spacing:.02em;color:#1c2a3a;white-space:nowrap}
.logo-text span{color:var(--navy)}
.main-nav{max-width:1180px;margin:0 auto;padding:0 28px;display:flex;gap:21px;align-items:flex-end;flex-wrap:nowrap;height:52px}
.main-nav a{font-size:14px;font-weight:400;padding:0 0 14px;border-bottom:3px solid transparent;color:#3d4954;white-space:nowrap;cursor:pointer;transition:color .25s ease,border-color .25s ease}
.main-nav a:hover{color:var(--navy)}
.main-nav a.active{color:var(--navy);border-bottom-color:var(--navy);font-weight:700}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px;color:#1c2a3a}

/* ===== Layout helpers ===== */
.container{max-width:1180px;margin:0 auto;padding:0 28px}
.section-title{font-size:28px;font-weight:700;color:#1c2a3a;display:flex;align-items:center;gap:12px}
.section-title .bar{width:5px;height:26px;background:var(--navy);border-radius:3px;display:inline-block}
.title-row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px}
.more-link{font-size:14px;color:var(--navy);font-weight:500;display:flex;align-items:center;gap:4px}
.more-link:hover{text-decoration:underline}

/* ===== Buttons ===== */
.btn-outline{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--navy);border:1.5px solid #b9cce4;border-radius:6px;padding:8px 16px;transition:background .2s}
.btn-outline:hover{background:#f5f9ff}
.btn-contact{flex:none;display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:#fff;font-size:16px;font-weight:700;padding:17px 38px;border-radius:8px;box-shadow:0 6px 16px rgba(28,78,138,.28);transition:filter .2s}
.btn-contact:hover{filter:brightness(1.08)}

/* ===== LINE CTA ===== */
#line{margin:48px auto 0;max-width:1180px;border-radius:14px;background:linear-gradient(135deg,#eaf7ee,#e0f2e6);border:1px solid #c9e7d2;padding:22px 28px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;position:relative;overflow:hidden}
.line-stripes{position:absolute;right:0;top:0;bottom:0;width:360px;background:repeating-linear-gradient(125deg,rgba(255,255,255,0) 0 14px,rgba(31,170,70,.07) 14px 16px);pointer-events:none}
.line-text{flex:1;min-width:260px;position:relative;z-index:1}
.line-head{font-size:19px;font-weight:700;color:#1c2a3a;display:flex;align-items:center;gap:10px;margin-bottom:6px}
.line-text>p{font-size:13px;color:#3f5447;line-height:1.7}
/* 特徴チップ（line-feats）はスリム化のため非表示。見出し＋登録ボタンに集約。 */
.line-feats{display:none}
.line-card-wrap{flex:none;display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end;position:relative;z-index:1}
.line-card{flex:none;display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 4px 14px rgba(20,40,70,.1)}
.line-card-top{display:flex;align-items:center;gap:10px}
.qr-box{width:64px;height:64px;border-radius:8px;background:#fff;border:1px solid #e7ecf2;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.qr-box #line-qr-slot{width:60px!important;height:60px!important;display:flex;align-items:center;justify-content:center;line-height:0}
.qr-box svg{width:60px;height:60px;display:block}
.line-card-top p{font-size:12px;line-height:1.6;color:#3f5447}
.line-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,#2ec457,#1faa46);color:#fff;font-size:14px;font-weight:700;padding:12px 40px 12px 16px;border-radius:8px;box-shadow:0 4px 10px rgba(31,170,70,.28);transition:filter .2s;white-space:nowrap}
.line-btn:hover{filter:brightness(1.05)}
.line-btn span{position:absolute;right:14px;font-size:15px}

/* ===== Contact ===== */
#contact{margin-top:56px;background:linear-gradient(180deg,#eef4fb,#e3edf8);position:relative;overflow:hidden;scroll-margin-top:80px}
.contact-bg{position:absolute;right:0;top:0;bottom:0;width:42%;background-size:cover;background-position:center}
.contact-fade{position:absolute;right:0;top:0;bottom:0;width:42%;background:linear-gradient(90deg,#e3edf8 0%,rgba(227,237,248,.55) 30%,rgba(227,237,248,0) 70%)}
.contact-inner{position:relative;max-width:1180px;margin:0 auto;padding:40px 28px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.contact-icon{width:74px;height:74px;border-radius:50%;background:#cfe0f4;display:flex;align-items:center;justify-content:center;flex:none}
.contact-text{flex:1;min-width:280px}
.contact-text h2{font-size:24px;font-weight:700;color:#1c2a3a;margin-bottom:8px}
.contact-text p{font-size:14px;color:#41526a;line-height:1.8}

/* ===== Footer ===== */
.site-footer{background:linear-gradient(180deg,#1c4e8a,#173f70);color:#dce6f2}
.footer-top{max-width:1180px;margin:0 auto;padding:40px 28px 0;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:14px}
.footer-mark{width:46px;height:50px;border-radius:6px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;flex:none;border:1px solid rgba(255,255,255,.25)}
.footer-brand .name{font-size:19px;font-weight:700;color:#fff}
.footer-links{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px 30px;font-size:13.5px}
.footer-links a{color:#cdddf0}
.footer-links a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:34px}
.footer-bottom .inner{max-width:1180px;margin:0 auto;padding:18px 28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:#a9c1de;font-family:'Roboto',sans-serif}

/* ===== Responsive (shared) ===== */
@media (max-width:900px){
  .line-card-wrap{width:100%;justify-content:center}
}
@media (max-width:768px){
  .nav-toggle{display:block;position:relative;z-index:70}
  .main-nav{position:fixed;top:0;right:0;width:264px;max-width:80vw;background:#fff;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;padding:80px 0 0;height:100dvh;box-shadow:-4px 0 24px rgba(20,40,70,.18);transform:translateX(100%);transition:transform .3s ease;z-index:60}
  .main-nav.open{transform:translateX(0)}
  .main-nav a{width:100%;padding:16px 24px;border-bottom:1px solid #eef2f6;border-left:3px solid transparent}
  .main-nav a.active{border-bottom-color:#eef2f6;border-left-color:var(--navy);background:#f7faff}
  /* 暗幕はヘッダー(z-index:50)より下に置く。メニューはヘッダー内にあるため、
     暗幕を上に置くとメニューまで暗くなる。下に置くことで「メニューは明るく・背景は暗く」。 */
  .nav-backdrop{display:none;position:fixed;inset:0;background:rgba(20,32,50,.5);z-index:45}
  .nav-backdrop.open{display:block}
  .header-inner{padding:14px 24px}
  .logo-text{font-size:17px;white-space:normal}
  .container,.contact-inner,.footer-top,.footer-bottom .inner{padding-left:24px;padding-right:24px}
  .section-title{font-size:23px}
  #line{padding:20px;margin-left:24px;margin-right:24px;gap:18px}
  .line-card{width:100%}
  .line-btn{flex:1 1 100%;padding:13px 16px}
  .line-text{min-width:0}
  .contact-bg,.contact-fade{display:none}
  .btn-contact{width:100%;justify-content:center}
  .footer-links{grid-template-columns:1fr 1fr}
}