/* 3 page (public/index.html と public/news.html と public/privacypolicy.html) 共通の CSS です。
   CSS 変数と reset と、header と drawer と footer と mobile の固定 CTA を持ちます。
   ここを変えると 3 page すべてに反映されます。page 固有の CSS は各 page の <style> にあります。

   各 page は <style> より前でこの file を読み込みます。したがって同 specificity では
   page 側の <style> がこの file に勝ちます。page 側で共通の指定を上書きしないでください。

   public/404.html は header と footer を持たないため、この file を読み込みません */

:root{
/* brand */
--blue:#1F6FB2; --blue-mid:#4A90C8; --blue-light:#7FB0D6; --blue-pale:#9EC1DE; --cyan:#6BC6FD;
/* navy */
--navy:#1F2A33; --slate:#56626D; --slate-light:#8FA0AF; --steel:#9CA6AE;
--on-navy:#B7BEC5; --on-navy-2:#B9C3CC;
/* warm neutral */
--ink:#1A1916; --ink-soft:#44423C; --ink-mid:#54524C;
--gray:#7A776F; --gray-light:#9B978C; --sand:#B3AC9C;
--border-warm:#CDC7BA; --border-warm-light:#C7C1B4; --brown:#7A6A4F;
/* cool neutral */
--white:#FDFDFD; --bg:#F5F5F6; --bg-alt:#F8F8F9; --bg-dim:#E9E9EB; --surface:#EFEFF1;
--line:#E0E0E3; --line-mid:#D6D6D9; --line-light:#E7E7EA; --line-lighter:#E4E4E7; --line-cool:#ECECEF;
--bubble:#EDF3F9; --bubble-line:#D3E4F2;
/* font */
--f-zen:"Zen Kaku Gothic New",sans-serif;
--f-plex:"IBM Plex Sans",sans-serif;
--f-noto:"Noto Sans JP",sans-serif;
/* layout */
--pad:40px; --header-h:76px; --max:1280px; --cta-h:86px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink);
font-family:var(--f-noto);-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:inherit;text-decoration:none;transition:opacity .18s,background .18s,border-color .18s,color .18s}
a:hover{opacity:.7}
h1,h2,h3,p{margin:0}
img{display:block;max-width:100%}
[id]{scroll-margin-top:calc(var(--header-h) + 12px)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--white);color:var(--ink);
border-bottom:1px solid var(--line)}
.site-header .wrap{height:calc(var(--header-h) - 1px);display:flex;align-items:center;
justify-content:space-between;gap:24px}
.hd-left{display:flex;align-items:center;gap:32px;min-width:0}
.hd-logo{height:28px;width:auto;flex-shrink:0}
.gnav{display:flex;gap:20px;font-size:16px;font-weight:500;color:var(--ink-soft);white-space:nowrap}
.hd-cta{display:flex;gap:10px;align-items:center;flex-shrink:0}
.btn-outline-sm{font-size:16px;font-weight:500;color:var(--ink-soft);padding:9px 14px;
border:1px solid var(--border-warm-light);border-radius:10px;white-space:nowrap}
.btn-navy-sm{font-size:16px;font-weight:700;color:var(--white);background:var(--navy);
padding:11px 20px;border-radius:99px;white-space:nowrap}
/* keyboard で開閉できるようにします。checkbox を focus 可能な大きさで残し、
   focus ring は隣の label へ描きます */
.nav-toggle{display:none;position:absolute;top:8px;right:var(--pad);
width:44px;height:44px;margin:0;opacity:0;pointer-events:none}
.nav-toggle:focus-visible ~ .wrap .nav-btn{outline:2px solid var(--blue);
outline-offset:3px;border-radius:8px}
.nav-btn{display:none;flex-direction:column;gap:5px;padding:10px;margin:-10px;cursor:pointer;flex-shrink:0}
.nav-btn span{display:block;width:22px;height:2px;background:var(--ink)}
/* drawer は sticky header の中で開くため、link の数だけ縦に伸びます。
   画面が短いと下の link が画面の外に残るため、高さを画面に収めて自身で scroll させます。
   100dvh は address bar の伸縮を含んだ高さです。対応しない browser 向けに 100vh を先に書きます。
   下端の影は、まだ下に link があることを示します。scroll し切ると白い層が影を覆います */
.drawer{display:none;border-top:1px solid var(--line);padding:8px var(--pad) 20px;
max-height:calc(100vh - var(--header-h));max-height:calc(100dvh - var(--header-h));
overflow-y:auto;overscroll-behavior:contain;
background:linear-gradient(transparent,var(--white)) bottom/100% 24px no-repeat local,
radial-gradient(farthest-side at 50% 100%,rgba(26,25,22,.16),rgba(26,25,22,0)) bottom/100% 10px no-repeat,
var(--white)}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{display:block;min-height:44px;padding:14px 0;font-size:17px;font-weight:500;color:var(--ink-soft);
border-bottom:1px solid var(--line-light)}
.drawer-cta{display:flex;gap:10px;margin-top:18px}
.drawer-cta a{flex:1;text-align:center}

/* footer */
.site-footer{padding:44px 0;background:var(--white);border-top:1px solid var(--line)}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:flex-end}
.ft-logo{height:24px;width:auto;margin-bottom:16px}
.ft-addr{font-size:17px;line-height:2;color:var(--gray)}
/* 連絡先の link は本文と同じ見た目にして hover でのみ色を変える */
.ft-addr a,.co-addr{color:inherit}
.ft-addr a:hover,.co-addr:hover{opacity:1;color:var(--blue)}
.ft-nav{display:flex;gap:18px;font-size:16px;color:var(--gray);white-space:nowrap;flex-shrink:0}

/* mobile の固定 CTA */
.mobile-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:10px;
padding:14px 16px;background:var(--bg-alt);border-top:1px solid var(--line)}
.mobile-cta a{text-align:center;font-size:19px;font-weight:700;color:var(--white);
background:var(--navy);padding:17px 0;border-radius:99px;flex:1}
.mobile-cta a.sub{flex:0 0 120px;font-weight:500;color:var(--ink);background:none;border:1px solid var(--sand)}

/* section の内側の幅 */
.sec-in{max-width:1120px;margin:0 auto}

/* nav の下線 */
.gnav a,.ft-nav a{position:relative}
.gnav a::after,.ft-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;
height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;
transition:transform .22s ease}
.gnav a:hover,.ft-nav a:hover{opacity:1;color:var(--blue)}
.gnav a:hover::after,.ft-nav a:hover::after{transform:scaleX(1)}

/* 画面幅への対応です。break point は 1200px と 1024px と 768px を 3 page で共通に使います */
@media (max-width:1200px){
  .gnav,.hd-cta{display:none}
  /* 指で押せる大きさを確保します。負の margin で見た目の位置は変えません */
  .nav-btn{display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0;margin:0 -11px}
  .nav-toggle{display:block}
  .nav-toggle:checked ~ .drawer{display:block}
}
@media (max-width:1024px){
  .site-footer .wrap{flex-direction:column;align-items:flex-start;gap:24px}
  .ft-nav{flex-wrap:wrap;white-space:normal;gap:12px 18px}
}
@media (max-width:768px){
  :root{--pad:20px;--header-h:60px}
  body{padding-bottom:var(--cta-h)}
  /* 下部の固定 CTA が drawer の下端を覆うため、その高さも差し引きます */
  .drawer{max-height:calc(100vh - var(--header-h) - var(--cta-h));
  max-height:calc(100dvh - var(--header-h) - var(--cta-h))}
  .hd-logo{height:22px}
  .site-footer{padding:32px 0}
  .ft-addr{font-size:15px}
  .ft-nav{font-size:15px}
  .mobile-cta{display:flex}
}
/* animation を抑止する設定 */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;
  animation-iteration-count:1!important;transition-duration:.001ms!important;
  transition-delay:0s!important}
}