/* トップページ（home.css）のヘッダー・フッターだけを、ブログなど別デザインのページで使うためのスタイル。
   本文には影響しないよう、セレクタはヘッダー・フッター内に限定している。値は home.css と揃えること。 */
:root{--red:#e64b35;--red-dark:#c63422;--ink:#292824;--muted:#69665f;--paper:#fffcf7;--line:#e6e2d9}
.site-header,.mobile-nav,.site-footer{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;color:var(--ink);line-height:1.8;-webkit-font-smoothing:antialiased;font-synthesis:none;box-sizing:border-box}
.site-header *,.mobile-nav *,.site-footer *{box-sizing:border-box}
.site-header a,.mobile-nav a,.site-footer a{color:inherit;text-decoration:none}
.site-header img,.site-footer img{max-width:100%;display:block}
.site-footer p{margin:0}
.site-header a:focus-visible,.site-header button:focus-visible,.mobile-nav a:focus-visible,.site-footer a:focus-visible{outline:3px solid #125f9d;outline-offset:5px}
.site-header [hidden],.mobile-nav[hidden]{display:none!important}
.site-header .button{display:inline-flex;align-items:center;justify-content:center;gap:17px;min-height:44px;background:var(--red);border:1px solid var(--red);padding:11px 20px;border-radius:9px;font-size:13px;font-weight:700;color:#fff;line-height:1.4;transition:background .2s,transform .2s,box-shadow .2s}
.site-header .button:hover{background:var(--red-dark);border-color:var(--red-dark);transform:translateY(-2px);box-shadow:0 6px 20px #76241415}
.wordmark{display:inline-flex;align-items:center;gap:9px;font-size:28px;letter-spacing:-1.8px;line-height:1;font-family:Arial,sans-serif}
.site-header{height:88px;padding:0 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1600px;margin:auto;background:var(--paper);position:relative;z-index:20}
.site-header-bar{background:var(--paper)}
.desktop-nav{display:flex;gap:26px;align-items:center;font-size:13px;font-weight:700}
.desktop-nav a:hover,.login-link:hover{color:var(--red)}
.header-actions{display:flex;align-items:center;gap:24px}
.login-link{font-size:13px;font-weight:700}
.login-link span{margin-left:6px}
.menu-toggle{display:none;border:1px solid var(--line);border-radius:8px;background:transparent;min-height:44px;width:44px;padding:12px;cursor:pointer}
.menu-toggle span{height:2px;background:var(--ink);display:block;margin:5px 0}
.mobile-nav{position:absolute;z-index:19;left:0;right:0;top:88px;padding:12px 24px 24px;background:var(--paper);box-shadow:0 16px 20px #29282410}
.mobile-nav a{display:block;padding:11px 4px;border-bottom:1px solid var(--line);font-size:15px}
.site-footer{padding:65px max(5vw,24px) 20px;background:var(--paper);max-width:1440px;margin:auto}
.site-footer-bar{background:var(--paper);border-top:1px solid var(--line)}
.footer-main{display:flex;justify-content:space-between;gap:40px;padding-bottom:52px}
.footer-main>div>p{font-size:12px;line-height:2.1;margin-top:22px;color:var(--muted)}
.footer-links{display:flex;gap:100px}
.footer-links>div{display:flex;flex-direction:column;gap:10px;font-size:11px}
.footer-links>div>span{font:700 10px Arial,sans-serif;letter-spacing:1.2px;margin-bottom:5px;color:var(--muted)}
.footer-links a:hover{color:var(--red)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;border-top:1px solid var(--line);padding-top:20px;font-size:9px;color:var(--muted)}
@media(max-width:1200px){.site-header{padding:0 26px;gap:18px}.desktop-nav{gap:16px;font-size:12px}.header-actions{gap:16px}.site-header .button{font-size:11px;padding:11px 14px}}
@media(max-width:980px){.desktop-nav{display:none}.header-actions{margin-left:auto}.site-header .menu-toggle{display:block}.footer-links{gap:50px}}
@media(max-width:700px){.site-header{height:76px;padding:0 20px;gap:14px}.wordmark{font-size:26px}.header-actions .button{display:none}.login-link{font-size:11px}.header-actions{gap:12px}.mobile-nav{top:76px}.site-footer{padding:46px 24px 32px}.footer-main{flex-direction:column;gap:35px;padding-bottom:34px}.footer-main>div>p{font-size:11px;margin-top:17px}.footer-links{gap:38px;justify-content:space-between}.footer-links>div{font-size:10px;gap:12px}.footer-links>div>span{font-size:8px}.footer-bottom{font-size:8px;gap:10px}}
@media(max-width:360px){.site-header{padding:0 15px}}
@media(prefers-reduced-motion:reduce){.site-header .button:hover{transform:none}}