/* 販売サイトの共通UI確認用。了承済みヒーローの構図・文字組みは変更しない。 */
html[data-scroll-header]{scroll-padding-top:112px}
body.sales-renewal .site-header[data-scroll-ready]{position:fixed;transition:transform .28s cubic-bezier(.22,1,.36,1)}
body.sales-renewal .site-header.is-scroll-hidden{transform:translateY(calc(-100% - 28px));pointer-events:none}
.skip-link{position:fixed;z-index:20;top:12px;left:20px;padding:10px 16px;border-radius:6px;background:var(--ink);color:#fff;transform:translateY(-180%)}
.skip-link:focus{transform:none}
.site-header .header-panel{display:flex;align-items:center;gap:clamp(22px,2.6vw,42px)}
.site-header .header-panel nav{display:flex;align-items:center;gap:clamp(22px,2.3vw,36px);font-size:14px;line-height:1.5;font-weight:500}
.primary-links{display:flex;align-items:center;gap:clamp(22px,2.3vw,36px)}
.site-header .primary-links>a{display:flex;align-items:center;min-height:44px;padding:8px 0;white-space:nowrap}
.site-header .primary-links>a::after{bottom:7px;height:1px;background:var(--blue);transform-origin:center}
.site-header .primary-links>a:is(:hover,:focus-visible){color:var(--blue)}
.site-header .primary-links>a:focus-visible::after{transform:scaleX(1)}
.support-menu{position:relative}
.support-toggle{display:flex;align-items:center;gap:7px;min-height:44px;padding:8px 0;background:transparent;border:0;font-size:14px;font-weight:500;line-height:1.5;white-space:nowrap}
.support-toggle svg{width:16px;height:16px;stroke-width:1.5;transition:transform .3s}
.support-toggle:is(:hover,:focus-visible),.support-toggle[aria-expanded="true"]{color:var(--blue)}
.support-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.support-panel{
  position:absolute;top:calc(100% + 20px);right:-22px;display:grid;grid-template-columns:1fr 1.15fr;gap:28px;
  width:510px;padding:28px;max-height:calc(100svh - 112px);overflow:auto;
  border:1px solid #ffffffdf;border-radius:16px;background:linear-gradient(130deg,#fffffffa,#f8fafff5);
  box-shadow:0 0 0 1px var(--glass-edge),0 20px 48px -22px #28364c40;
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  transition:opacity .2s,transform .2s,visibility .2s;
}
.site-header[data-menu-ready] .support-panel{visibility:hidden;opacity:0;transform:translateY(-5px);pointer-events:none}
.site-header[data-menu-ready] .is-support-open .support-panel{visibility:visible;opacity:1;transform:none;pointer-events:auto}
.support-group{min-width:0}
.support-group+ .support-group{padding-left:24px;border-left:1px solid #1b1e240d}
.support-group h2{margin:0 0 12px;color:#687487;font-size:13px;font-weight:500;line-height:1.7}
.site-header .support-panel a{display:flex;align-items:center;min-height:40px;padding:8px 0;border:0;font-size:14px;line-height:1.7;white-space:nowrap}
.site-header .support-panel a::after{display:none}
.site-header .support-panel a:is(:hover,:focus-visible){color:var(--blue);transform:translateX(3px)}

/* フッターの外側は全幅、内容はヒーローと共通の1400px内へ揃える。 */
.site-footer{background:#f5f6f8;border-top:1px solid #e9ecf1}
.footer-content{width:calc(100% - var(--gutter)*2);max-width:1400px;margin-inline:auto;padding:72px 0 26px}
.footer-main{display:grid;grid-template-columns:minmax(230px,1fr) minmax(580px,1.9fr);gap:56px;padding-bottom:64px}
.footer-brand>a{display:inline-block}
.footer-brand img{width:88px;height:auto}
.footer-brand p{margin-top:22px;font-size:17px;font-weight:500;line-height:1.9;color:#384253}
.footer-navigation{display:grid;grid-template-columns:1fr 1.2fr 1.2fr;gap:36px}
.footer-group{display:flex;flex-direction:column;align-items:flex-start}
.footer-group h2{margin:0 0 18px;color:#737e8d;font-size:14px;font-weight:500;line-height:1.5}
.footer-group a{display:flex;align-items:center;min-height:38px;font-size:14px;line-height:1.6}
.site-footer a:is(:hover,:focus-visible){color:var(--blue)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:24px;border-top:1px solid #e1e5eb}
.footer-policies{display:flex;flex-wrap:wrap;gap:8px 24px}
.footer-policies a{font-size:14px;line-height:1.8;color:#606a79}
.footer-bottom small{flex-shrink:0;font-size:13px;color:#738091}

/* 仮接続を実ページと誤認させないための、ローカル確認専用ダイアログ。 */
.route-dialog{width:min(480px,calc(100% - 40px));padding:32px;border:1px solid #fff;border-radius:18px;background:#fafbff;color:var(--ink);box-shadow:0 24px 70px #18263f26}
.route-dialog::backdrop{background:#202b434d;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.route-label{margin:0 0 12px;font-size:13px;color:#687487}
.route-dialog h2{font-size:23px;line-height:1.5;font-weight:600}
#route-path{margin-top:10px;font-size:14px;color:var(--blue);overflow-wrap:anywhere}
#route-description{margin-top:20px;font-size:14px;line-height:1.9;color:#4d596b}
.route-close{margin-top:26px;padding:11px 22px;border:0;border-radius:7px;background:var(--ink);color:white;font-size:14px}
.route-close:hover{background:#36404f}
body.route-dialog-open{overflow:hidden}

@media(max-width:1099px){
  body.menu-open{overflow:hidden}
  body.sales-renewal .site-header.is-menu-open{position:fixed}
  .site-header[data-menu-ready] .menu-toggle{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #1b1e2414;border-radius:9px;background:#ffffff55;flex-shrink:0}
  .menu-toggle span{position:relative;width:22px;height:2px}
  .menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;inset:0;background:var(--ink);transition:transform .3s}
  .menu-toggle span::before{transform:translateY(-4px)}
  .menu-toggle span::after{transform:translateY(4px)}
  .menu-toggle[aria-expanded="true"] span::before{transform:rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg)}
  .site-header .header-panel{
    position:absolute;inset:calc(100% + 10px) 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:28px;
    max-height:calc(100svh - 108px);padding:26px 32px 30px;overflow:auto;overscroll-behavior:contain;
    border:1px solid #ffffffed;border-radius:18px;background:#f9fbfff7;
    box-shadow:0 0 0 1px var(--glass-edge),0 20px 48px -22px #28364c40;
    -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
    transition:opacity .2s,transform .2s,visibility .2s;
  }
  .site-header[data-menu-ready] .header-panel{visibility:hidden;opacity:0;transform:translateY(-6px);pointer-events:none}
  .site-header[data-menu-ready].is-menu-open .header-panel{visibility:visible;opacity:1;transform:none;pointer-events:auto}
  .site-header .header-panel nav{display:contents}
  .primary-links{order:0;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
  .site-header .primary-links>a{min-height:52px;padding:12px 0;border-bottom:1px solid #1b1e2410;font-size:16px;font-weight:500}
  .site-header .primary-links>a::after{display:none}
  .site-header .header-panel .header-cta{order:2;align-self:stretch;justify-content:center;min-height:52px;padding:10px 22px;font-size:14px}
  .support-menu{order:1}
  .support-toggle{display:none}
  .site-header[data-menu-ready] .support-panel,.support-panel{
    position:static;display:grid;grid-template-columns:1fr 1fr;gap:24px;width:auto;max-height:none;padding:0;
    visibility:inherit;opacity:1;transform:none;pointer-events:inherit;overflow:visible;
    border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .support-group+ .support-group{padding-left:0;border-left:0}
  .support-group h2{font-size:13px;margin-bottom:8px}
  .site-header .support-panel a{min-height:42px;font-size:14px;white-space:normal}
  .footer-main{grid-template-columns:1fr;gap:40px;padding-bottom:44px}
  .footer-brand{display:flex;align-items:center;gap:40px}
  .footer-brand p{margin:0;font-size:16px}
  .footer-navigation{grid-template-columns:1fr 1fr 1fr}
  .footer-bottom{align-items:flex-start}
}
@media(max-width:639px){
  html[data-scroll-header]{scroll-padding-top:82px}
  body.sales-renewal .site-header[data-menu-ready] .menu-toggle{border-radius:5px}
  .site-header .header-panel{inset:100% 0 auto;max-height:calc(100svh - 58px);padding:22px 24px 28px;border:0;border-radius:0 0 18px 18px;gap:24px}
  .site-header .primary-links>a{font-size:15px}
  .support-panel{column-gap:20px}
  .site-header .support-panel a{font-size:13px;line-height:1.7}
  .support-group h2{font-size:12px}
  .footer-content{padding-top:44px;padding-bottom:24px}
  .footer-brand{display:block}
  .footer-brand p{margin-top:18px;font-size:16px}
  .footer-navigation{grid-template-columns:1fr 1fr;gap:32px 24px}
  .footer-group h2{margin-bottom:12px;font-size:13px}
  .footer-group a{min-height:40px;font-size:13px}
  .footer-bottom{display:block;padding-top:20px}
  .footer-policies{display:grid;grid-template-columns:1fr;gap:4px}
  .footer-policies a{padding-block:7px;font-size:12px}
  .footer-bottom small{display:block;margin-top:20px;font-size:12px}
}
/* SPの開いたメニューは、ロゴ・閉じるボタンの58px帯と一続きの全面表示にする。 */
@media(max-width:767px){
  body.sales-renewal .site-header.is-menu-open{inset:0 0 auto;height:58px;border:0;border-radius:0;background:#f8f9fb;box-shadow:none;transform:none;pointer-events:auto}
  body.sales-renewal .site-header .header-panel{inset:100% 0 auto;height:calc(100vh - 58px);height:calc(100dvh - 58px);max-height:none;padding:24px 24px calc(28px + env(safe-area-inset-bottom));border:0;border-radius:0;background:#f8f9fb;box-shadow:none;gap:24px}
  body.sales-renewal .site-header .header-panel :is(.primary-links,.support-menu,.header-cta){flex-shrink:0}
}
@media(max-width:359px){
  .site-header .header-panel{padding-inline:20px}
  .site-header[data-menu-ready] .support-panel{grid-template-columns:1fr;gap:22px}
}
@media(prefers-reduced-motion:reduce){
  body.sales-renewal .site-header[data-scroll-ready],.support-panel,.header-panel,.support-toggle svg,.menu-toggle span::before,.menu-toggle span::after{transition:none}
}