/* ============================================================
   共通パーツ: ヘッダー / フッター (src/partials/*.html)
   - ヘッダーは最上部で「黒の半透明グラデ + 白文字」、
     スクロールが始まると .hdr--scrolled (白背景 + 黒文字)、
     下方向スクロール中は .hdr--compact (ロゴ/文字を縮小)
   - 明るい背景で始まるページは .hdr--solid で最初から白背景
   ============================================================ */
:root { --hdr-h: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* 固定ヘッダーの下にアンカー先の見出しが隠れないようにする */
[id] { scroll-margin-top: calc(var(--hdr-h) + 12px); }

/* ---------- Header: base (Studio 版と同じ見た目) ---------- */
.hdr,.ftr{font-family:'Noto Sans JP',sans-serif;box-sizing:border-box}
.hdr *,.ftr *{box-sizing:border-box}
.hdr a,.ftr a{text-decoration:none}  /* 色は各要素で明示 (.hdr a{color:inherit} だと .hdr__tel 等より強くなる) */
.hdr img,.ftr img{display:inline-block;vertical-align:middle;max-width:100%}
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:40px;padding:20px 30px;background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 100%);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  transition:background-color .4s ease,padding .4s cubic-bezier(.4,0,.2,1),box-shadow .4s ease,backdrop-filter .4s ease}
.hdr__left{display:flex;align-items:center;gap:20px;justify-content:space-between}
.hdr__brand{display:flex;align-items:center;gap:20px}
.hdr__brand:hover{opacity:.7;transition-duration:.4s}
.hdr__logo{width:130px;height:auto;margin-top:4px;transition:width .4s cubic-bezier(.4,0,.2,1),filter .4s ease}
.hdr__sub{color:#fff;display:flex;flex-direction:column;gap:2px;height:26px;justify-content:center;transition:color .4s ease}
.hdr__sub .t1{font-size:12px;font-weight:500;letter-spacing:0;line-height:1;text-align:left;font-feature-settings:'palt' 1;transition:font-size .4s cubic-bezier(.4,0,.2,1)}
.hdr__sub .t2{font-size:12px;font-weight:500;letter-spacing:.04em;line-height:1;text-align:center;font-feature-settings:'palt' 1;transition:font-size .4s cubic-bezier(.4,0,.2,1)}
.hdr__badge{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:4px 6px;color:#fff;font-size:13px;font-weight:500;letter-spacing:0;line-height:1.2;text-align:center;transition:background-color .4s,border-color .4s,color .4s,font-size .4s}
.hdr__badge:hover{background:rgba(0,0,0,.6)}
.hdr__nav{display:flex;align-items:center;gap:20px}
.hdr__nav .tx{color:#fff;font-size:14px;font-weight:500;letter-spacing:.05em;line-height:1;text-align:left;font-feature-settings:'palt' 1;transition:color .4s,font-size .4s cubic-bezier(.4,0,.2,1),opacity .4s}
.hdr__nav .tx:hover{opacity:.7}
.hdr__quote,.hdr__quote--sp{display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;font-size:14px;font-weight:500;letter-spacing:.05em;line-height:1;font-feature-settings:'palt' 1;background:linear-gradient(79.51deg,#00A9E0 0%,#00DB84 100%);border:1px solid rgba(255,255,255,.5);border-radius:4px;transition:padding .4s cubic-bezier(.4,0,.2,1),font-size .4s cubic-bezier(.4,0,.2,1),opacity .4s}
.hdr__quote{padding:13px 16px}
.hdr__quote:hover{opacity:.8}
.hdr__quote--sp{display:none;padding:12px 16px}
.hdr__div{width:1px;height:24px;background:rgba(255,255,255,.2);flex-shrink:0;transition:background-color .4s}
.hdr__tel{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:4px 6px;color:#fff;transition:background-color .4s,border-color .4s,color .4s}
.hdr__tel:hover{background:rgba(0,0,0,.6)}
.hdr__tel .lbl{font-size:13px;font-weight:500;letter-spacing:0;line-height:1.2;text-align:left;transition:font-size .4s cubic-bezier(.4,0,.2,1)}
.hdr__tel .vdiv{width:1px;height:24px;background:rgba(255,255,255,.2);transition:background-color .4s}
.hdr__tel .r{display:flex;flex-direction:column;align-items:flex-start;gap:2px;justify-content:center}
.hdr__tel .num{display:flex;align-items:center;gap:2px;font-size:18px;font-weight:500;letter-spacing:0;line-height:1;transition:font-size .4s cubic-bezier(.4,0,.2,1)}
.hdr__tel .num img{width:16px;height:auto;transition:filter .4s}
.hdr__tel .hrs{font-size:11px;font-weight:500;letter-spacing:0;opacity:.78;line-height:1;transition:font-size .4s cubic-bezier(.4,0,.2,1)}
.hdr__progress{position:absolute;left:0;bottom:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--scroll-progress,0));background:linear-gradient(90deg,#00A9E0 0%,#00DB84 100%);opacity:0;transition:opacity .4s;pointer-events:none}

/* ---------- Header: scrolled (白背景 + 黒文字) ---------- */
.hdr--scrolled,.hdr--solid{background:rgba(255,255,255,.96);box-shadow:0 1px 0 rgba(0,0,0,.06),0 8px 24px -16px rgba(0,0,0,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hdr--scrolled .hdr__logo,.hdr--solid .hdr__logo{filter:brightness(0)}
.hdr--scrolled .hdr__sub,.hdr--solid .hdr__sub,
.hdr--scrolled .hdr__nav .tx,.hdr--solid .hdr__nav .tx{color:#1A1A1A}
.hdr--scrolled .hdr__badge,.hdr--solid .hdr__badge{background:#F2F4F5;border-color:#E0E6E9;color:#1A1A1A}
.hdr--scrolled .hdr__badge:hover,.hdr--solid .hdr__badge:hover{background:#E4EAED}
.hdr--scrolled .hdr__tel,.hdr--solid .hdr__tel{background:#F2F4F5;border-color:#E0E6E9;color:#1A1A1A}
.hdr--scrolled .hdr__tel:hover,.hdr--solid .hdr__tel:hover{background:#E4EAED}
.hdr--scrolled .hdr__tel .num img,.hdr--solid .hdr__tel .num img{filter:brightness(0)}
.hdr--scrolled .hdr__tel .vdiv,.hdr--solid .hdr__tel .vdiv,
.hdr--scrolled .hdr__div,.hdr--solid .hdr__div{background:rgba(0,0,0,.12)}
.hdr--scrolled .hdr__quote,.hdr--solid .hdr__quote,
.hdr--scrolled .hdr__quote--sp,.hdr--solid .hdr__quote--sp{border-color:transparent}
.hdr--scrolled .hdr__progress{opacity:1}

/* ---------- Header: compact (下スクロール中にロゴ/文字を縮小) ---------- */
.hdr--compact{padding-top:10px;padding-bottom:10px}
.hdr--compact .hdr__logo{width:102px}
.hdr--compact .hdr__sub .t1,.hdr--compact .hdr__sub .t2{font-size:10.5px}
.hdr--compact .hdr__badge{font-size:11.5px}
.hdr--compact .hdr__nav .tx{font-size:12.5px}
.hdr--compact .hdr__quote{padding:10px 13px;font-size:13px}
.hdr--compact .hdr__tel .lbl{font-size:11.5px}
.hdr--compact .hdr__tel .num{font-size:15px}
.hdr--compact .hdr__tel .hrs{font-size:10px}

@media(max-width:990px){
  :root{--hdr-h:72px}
  .hdr{padding:15px 10px}
  .hdr__brand{flex-wrap:wrap;gap:6px}
  .hdr__logo{width:116px}
  .hdr__sub{display:none}
  .hdr__badge{display:none}
  .hdr__nav{flex-direction:row-reverse;gap:0;justify-content:flex-end}
  .hdr__nav .tx{display:none}
  .hdr__quote{display:none}
  .hdr__quote--sp{display:flex;padding:11px 4px;font-size:10px}
  .hdr__div{display:none}
  .hdr__tel{display:flex;gap:4px;margin:0 -10px 0 -44px;padding:4px 5px;scale:.85}
  .hdr__tel .lbl{font-size:10px}
  .hdr__tel .num{font-size:14px}
  .hdr__tel .hrs{font-size:10px}
  .hdr--compact{padding-top:8px;padding-bottom:8px}
  .hdr--compact .hdr__logo{width:96px}
  .hdr--compact .hdr__tel .num{font-size:13px}
}
@media(max-width:540px){
  .hdr{padding:14px 15px;gap:16px 0}
  .hdr__nav{gap:8px 0}
  .hdr__quote--sp{gap:4px;white-space:nowrap}
  .hdr__tel{margin-left:0}  /* サブ表記を消したぶん、負マージンだとロゴに被る */
  .hdr__tel .lbl{white-space:nowrap}
  .hdr__tel{gap:2px;padding:2px}
  .hdr__tel .lbl{font-size:13px}
  .hdr__tel .num{font-size:13px}
  .hdr__tel .hrs{font-size:13px}
  .hdr--compact .hdr__sub .t1,.hdr--compact .hdr__sub .t2{font-size:9px}
  .hdr--compact .hdr__tel .lbl,.hdr--compact .hdr__tel .num,.hdr--compact .hdr__tel .hrs{font-size:11.5px}
}

/* ---------- Footer ---------- */
.ftr{display:flex;flex-direction:column;align-items:center;margin:0 auto;width:90%;font-family:'Noto Sans JP',sans-serif}
.ftr__in{display:flex;align-items:flex-start;justify-content:flex-start;gap:30px;padding:80px 0;width:1560px;max-width:100%}
.ftr__l{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.ftr__brand{display:flex;align-items:center;gap:20px;width:100%}
.ftr__brand>img{flex:none;width:200px;height:auto}
.ftr__lead{margin:0;flex:none;color:#1A1A1A;font-size:24px;font-weight:700;line-height:1.2;text-align:left}
.ftr__solix{display:flex;align-items:center;gap:20px;width:100%}
.ftr__solix .lg{flex:none;display:flex;flex-direction:column;align-items:center;width:129px}
.ftr__solix .lg img{width:100%;height:auto}
.ftr__ser{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;width:137px}
.ftr__ser .a{margin:0;color:#1A1A1A;font-size:12px;font-weight:500;line-height:1.5}
.ftr__ser .row{display:flex;align-items:flex-end;gap:4px;width:100%}
.ftr__ser .b{margin:0;flex:none;color:#1A1A1A;font-family:Montserrat,sans-serif;font-size:12px;font-weight:600;line-height:1}
.ftr__ser .c{margin:0;flex:none;color:#1A1A1A;font-size:12px;font-weight:500;letter-spacing:.04em;line-height:1.25}
.ftr__copy{margin:0;color:#666;font-size:10px;font-weight:400;line-height:15px;text-align:left;width:100%}
.ftr__r{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:30px;overflow:hidden}
.ftr__contact{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}
.ftr__cbox{display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:#EDFBFF;border-radius:12px;padding:20px;width:100%;overflow:hidden;box-sizing:border-box}
.ftr__cttl{margin:0;color:#333;font-size:20px;font-weight:700;line-height:1.5;width:100%}
.ftr__crow{display:flex;align-items:stretch;justify-content:center;gap:10px;width:100%}
.ftr__tel{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff;border-radius:12px;padding:20px;overflow:hidden}
.ftr__telrow{display:flex;align-items:center;justify-content:center;gap:5px}
.ftr__telrow .ic{flex:none;display:flex;flex-direction:column;align-items:center;padding:5px 4px 4px;width:24px;box-sizing:border-box}
.ftr__telrow .ic img{width:100%;height:auto}
.ftr__telrow a{color:#333;font-size:25px;font-weight:700;line-height:1;text-align:left;text-decoration:none}
.ftr__hrs{margin:0;color:#888;font-size:10px;font-weight:700;line-height:1;text-align:center;width:333px;max-width:100%}
.ftr__mail{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;background:#fff;border-radius:12px;padding:20px;overflow:hidden}
.ftr__mail .ic{flex:none;display:flex;flex-direction:column;align-items:center;padding:6px 4px 5px 3px;width:24px;box-sizing:border-box}
.ftr__mail .ic img{width:100%;height:auto}
.ftr__mail a{color:#333;font-size:15px;font-weight:700;line-height:1;text-align:left;text-decoration:none}
.ftr__note1{margin:0;color:#333;font-size:12px;font-weight:500;line-height:1.5;text-align:left;width:100%}
.ftr__hojo{display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid #F2F4F5;border-radius:12px;padding:15px 20px;width:100%;box-sizing:border-box}
.ftr__hojo p{margin:0;flex:1;color:#333;font-size:14px;font-weight:500;line-height:1.5;text-align:left;overflow:hidden}
.ftr__menus{display:flex;align-items:flex-start;gap:30px;width:100%}
.ftr__m1{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:20px;overflow:hidden}
.ftr__m1 a{color:#1A1A1A;font-size:14px;font-weight:500;line-height:1.5;text-align:left;width:100%;text-decoration:none}
.ftr__m1 a+a{letter-spacing:.05em;line-height:1}
.ftr__m1 a:hover,.ftr__m2 a:hover{opacity:.7}
.ftr__m2{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;overflow:hidden}
.ftr__m2 a{color:#666;font-size:12px;font-weight:400;line-height:15px;text-align:left;width:100%;text-decoration:none;font-feature-settings:'palt' 1}
@media(max-width:990px){
  .ftr__in{flex-wrap:wrap;gap:30px 0;padding:50px 0}
  .ftr__l{width:100%}
  .ftr__brand{flex:none;flex-wrap:wrap;gap:20px 0;width:auto}
  .ftr__brand>img{width:120px}
  .ftr__lead{font-size:18px;font-feature-settings:'palt' 1}
  .ftr__ser .a,.ftr__ser .b,.ftr__ser .c{font-size:13px;text-align:left}
  .ftr__copy{font-size:13px}
  .ftr__r{flex:none;width:100%}
  .ftr__cttl{font-size:16px}
  .ftr__crow{flex-wrap:wrap;gap:10px 0}
  .ftr__tel,.ftr__mail{flex:none;width:100%;box-sizing:border-box}
  .ftr__telrow a{font-size:20px}
  .ftr__hrs{font-size:13px}
  .ftr__mail a{font-size:13px}
  .ftr__note1{font-size:13px}
  .ftr__hojo{border-color:#e4ebee}
  .ftr__hojo p{font-size:10px}
  .ftr__menus{flex-wrap:wrap;gap:30px 0}
  .ftr__m1,.ftr__m2{flex:none;width:100%}
  .ftr__m1 a{font-size:13px}
}
@media(max-width:540px){
  .ftr__in{gap:14px 0;padding:30px 0 40px}
  .ftr__l{gap:8px}
  .ftr__brand{gap:8px 0}
  .ftr__lead{font-size:15px}
  .ftr__copy{font-size:13px}
  .ftr__r{gap:14px}
  .ftr__cbox{gap:4px;padding:8px}
  .ftr__cttl{font-size:14px}
  .ftr__crow{gap:4px 0}
  .ftr__tel,.ftr__mail{gap:2px;padding:8px}
  .ftr__telrow a{font-size:16px}
  .ftr__hojo{gap:4px}
  .ftr__menus{gap:14px 0}
  .ftr__m1{gap:8px}
  .ftr__m2{gap:4px}
  .ftr__m2 a{font-size:13px}
}