/* Site foundation shared by every page: responsive tokens, content container, header, footer.
   Sizes step with the viewport through clamp(), so laptops and large monitors get
   proportions designed for them instead of a scaled copy of the 1024px Figma frame. */
:root{
 /* Side margins are a share of the viewport, so content widens with the screen
    (about 1270px on a 1440 laptop, 1760px on a 2000 monitor) up to the cap. */
 --container:1760px;
 --gutter-x:clamp(20px,5.5vw,160px);
 /* Left/right inset that lines content up with the header at any width. */
 --edge:max(var(--gutter-x),calc((100vw - var(--scrollbar,0px) - var(--container)) / 2));
 --section-y:clamp(56px,6.5vw,120px);
 --fs-hero:clamp(34px,1.1rem + 3vw,68px);
 --fs-h1:clamp(32px,1rem + 2.4vw,58px);
 --fs-h2:clamp(24px,.9rem + 1.5vw,40px);
 --fs-h2s:clamp(21px,.85rem + 1vw,30px);
 --fs-h3:clamp(16px,.8rem + .4vw,20px);
 --fs-lead:clamp(15px,.84rem + .3vw,18px);
 --fs-body:clamp(15px,.84rem + .2vw,16px);
 --fs-sm:14px;
 --fs-xs:13px;
 --band:#f3f6f9;
}
.l-container{width:min(100% - var(--gutter-x) * 2,var(--container));margin-inline:auto}

#site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid rgba(223,229,235,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hm-header{display:flex;align-items:center;gap:32px;height:72px;width:min(100% - var(--gutter-x) * 2,var(--container));margin-inline:auto;color:var(--navy)}
.hm-brand{display:flex;align-items:center;gap:16px;flex-shrink:0}
.hm-brand img{width:132px;height:auto}
.hm-brand span{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.hm-nav{display:flex;align-items:center;gap:28px;margin-left:auto;font-size:14px;white-space:nowrap}
.hm-nav a{padding-block:8px}
/* Hover/focus underline, footer link underline, and current-page state live in interactions.css. */
.hm-header>.hm-button{min-height:40px;padding:0 22px;font-size:14px;line-height:1}
.hm-menu{display:none}

#site-footer{background:var(--surface);border-top:1px solid var(--border)}
.hm-footer{display:flex;flex-direction:column;gap:28px;padding-block:44px 28px;width:min(100% - var(--gutter-x) * 2,var(--container));margin-inline:auto;color:var(--navy)}
.hm-footer-main{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:24px 48px}
.hm-footer-company{display:flex;flex-direction:column;gap:4px;font-style:normal}
.hm-footer-company strong{font:700 15px/1.6 "Noto Sans JP",sans-serif}
.hm-footer-company span{font-size:13px;line-height:1.7;color:var(--muted)}
.hm-footer-nav{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:14px;padding-top:2px}
.hm-footer-meta{display:flex;align-items:center;justify-content:flex-start;gap:24px;padding-top:20px;border-top:1px solid var(--border);font-size:var(--fs-xs);color:var(--muted)}
.hm-footer-meta small{font-size:var(--fs-xs)}

@media(max-width:1180px){.hm-brand span{display:none}}
@media(max-width:959px){
 .hm-header{height:64px;gap:12px}
 .hm-brand img{width:112px}
 .hm-header>.hm-button{order:1;margin-left:auto;min-height:40px;padding:0 16px;font-size:13px}
 .hm-menu{display:block;order:2;min-height:40px;white-space:nowrap;background:white;border:1px solid var(--border);border-radius:6px;padding:0 12px;font-size:13px;color:var(--navy)}
 .hm-nav{display:none;position:absolute;top:100%;left:0;right:0;margin:0;padding:8px var(--gutter-x) 16px;background:white;border-bottom:1px solid var(--border);box-shadow:0 12px 24px rgba(3,40,76,.08);grid-template-columns:1fr 1fr;gap:0 16px}
 .hm-header.is-open .hm-nav{display:grid}
 .hm-nav a{padding:12px 0;font-size:15px;border-bottom:1px solid var(--border)}
 .hm-footer{padding-block:36px 24px;gap:20px}
 .hm-footer-main{flex-direction:column;gap:20px}
 .hm-footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;width:100%}
 .hm-footer-nav a{padding-block:8px}
 .hm-footer-meta{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px}
}
@media(max-width:420px){.hm-header>.hm-button{padding:0 12px;font-size:var(--fs-xs)}}

/* 389px以下の応急処置。ヘッダーは折り返さないので、ロゴ・余白・ボタンの寸法だけを詰めて
   枠に収める。320pxでは枠が280pxしかなく、ロゴ112＋メニュー78＋CTA132＋gap24=346で
   66pxはみ出し、ページごと横スクロールしていた（320で46px、360で6px）。
   文言とタップ領域（min-height:40px）は変えない。390px以上は元のままで、そこは収まっている。
   ロゴとヘッダーの作り直しが入ったらこのブロックは不要になる。 */
@media(max-width:389px){
 /* 左右の余白はヘッダーだけ詰める。--gutter-x を書き換えると全ページの本文幅に波及する。 */
 .hm-header{gap:8px;width:min(100% - 32px,var(--container))}
 .hm-brand img{width:80px}
 .hm-menu{padding:0 8px;font-size:12px}
 .hm-header>.hm-button{padding:0 8px;font-size:12px}
}

/* 指で押す領域。下線つきのテキストリンクは行の高さ（約25px）しか無かったので、
   見た目と並びを変えずに上下へ当たり判定だけ広げる（44px）。 */
:is(.hm-link,.f-link,.pg-link){padding-block:10px;margin-block:-10px}
/* 横並び（パソコン幅）では、見た目を変えずに当たり判定だけ上下に広げる。
   縦に並ぶ幅では行そのものを44pxにする。ここで負の余白を使うと行間が詰まる
   （2026-09-20 に一度そうしてしまい、約40pxの行間が28pxになっていた）。 */
@media(min-width:960px){.hm-footer-nav a{padding-block:10px;margin-block:-10px}}
@media(max-width:959px){.hm-footer-nav a{padding-block:11px}}
/* スマホでは補助テキストを一段大きく。13〜14pxは、画面との距離が近くても読みづらい。 */
@media(max-width:640px){:root{--fs-sm:15px;--fs-xs:14px}}