/*
  site.css : 全ページ共通のヘッダー・メニュー・フッターの見た目。
  マークアップは functions/_middleware.js が配信時に差し込む（各ページには
  <div data-site="header"></div> / <div data-site="footer"></div> の目印だけを置く）。
  ページ側の <style> より後に読み込まれるため、ここに書いた指定が優先される。
*/
:root {
  --site-primary: #F08332;
  --site-primary-light: #FFB77A;
  --site-primary-deep: #BD531A;
  --site-text: #5C4D43;
  --site-yellow: #FADB5F;
  --site-blue: #70D6FF;
  --site-bg: #FFFBF7;
}

.skip-link { position: absolute; top: -60px; left: 12px; z-index: 2000; background: var(--site-text); color: #fff; font-weight: 900; padding: 10px 20px; border-radius: 8px; text-decoration: none; transition: top 0.2s ease; }
.skip-link:focus { top: 12px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--site-primary-deep); outline-offset: 2px; }

.site-header { position: sticky; top: 0; z-index: 500; background: rgba(255, 251, 247, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 2px solid rgba(92, 77, 67, 0.1); }
.site-header .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; max-width: 1080px; margin: 0 auto; }
.site-header .header-logo { font-size: 1.25rem; font-weight: 900; letter-spacing: 0.06em; color: var(--site-text); text-decoration: none; }
.site-header .hamburger-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; background: #fff; border: 2px solid var(--site-text); border-radius: 12px; cursor: pointer; padding: 0; flex-shrink: 0; }
.site-header .hamburger-btn span { display: block; width: 20px; height: 3px; background: var(--site-text); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; }
.site-header .hamburger-btn.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.site-header .hamburger-btn.is-open span:nth-child(2) { opacity: 0; }
.site-header .hamburger-btn.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-nav { position: fixed; inset: 0; z-index: 600; background: var(--site-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow-y: auto; padding: 70px 20px 30px; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); visibility: hidden; }
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }
.mobile-nav-close { position: absolute; top: 18px; right: 20px; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid var(--site-text); font-size: 1.4rem; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--site-text); line-height: 1; }
.mobile-nav-list { list-style: none; text-align: center; margin: auto 0; padding: 0; }
.mobile-nav-list li { margin: 14px 0; }
.mobile-nav-list a { font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif; font-size: 1.25rem; font-weight: 900; color: var(--site-text); text-decoration: none; padding-bottom: 4px; border-bottom: 3px solid transparent; transition: border-color 0.2s, color 0.2s; }
.mobile-nav-list a:hover, .mobile-nav-list a[aria-current="page"] { color: var(--site-primary-deep); border-color: var(--site-primary-deep); }
.mobile-nav-group { display: block; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.1em; color: #8a7b70; margin-top: 26px; }

.site-footer { position: relative; overflow: hidden; background-color: var(--site-text); color: #fff; padding: 56px 0 36px; margin-top: 0; text-align: center; border-top: 5px solid var(--site-primary); font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif; }
/* 名刺裏面と同じ幾何学ロゴパターンを、少し傾けて敷き詰める */
.site-footer::before { content: ''; position: absolute; top: -50%; left: -100%; width: 250%; height: 300%; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-150 -150 794.86 777.12'%3E%3Cpath fill='%23ffffff' opacity='0.08' d='M 494.86 65.29 L 494.86 411.83 L 428.85 476.6 L 66.83 105.51 L 67.25 375.84 L 104.48 339.63 L 131.91 312.92 L 132.12 251.66 L 303.43 422.87 L 275.9 449.68 L 247.74 477.12 L 192.87 421.32 L 158.11 385.94 L 63.95 476.6 L 0 411.42 L .21 62.09 L 64.15 0 L 220.61 160.9 L 255.47 196.58 L 292.6 234.74 L 399.87 345 L 427.3 372.85 L 427.3 102.62 L 360.98 163.58 L 360.78 226.7 L 240.73 105.92 L 191.12 55.69 L 245.06 .41 L 335.2 92.82 L 400.8 27.64 L 428.54 .21 L 462.58 33.42 Z'/%3E%3C/svg%3E"); background-size: 100px; transform: rotate(-15deg); z-index: 0; pointer-events: none; }
.site-footer .footer-inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; padding: 0 20px; }
.site-footer .footer-logo { font-size: 2.2rem; letter-spacing: 0.1em; margin-bottom: 15px; font-weight: 900; color: var(--site-yellow); transform: rotate(-2deg); display: inline-block; text-shadow: 2px 2px 0 #000; }
.site-footer .footer-desc { font-size: 0.95rem; font-weight: 700; color: rgba(255, 255, 255, 0.9); margin: 0 0 26px; }
.site-footer .footer-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; margin: 0 0 12px; padding: 0; font-size: 0.92rem; }
.site-footer .footer-links.is-legal { font-size: 0.82rem; margin-top: 18px; }
.site-footer .footer-links a { color: var(--site-blue); text-decoration: none; border-bottom: 2px solid var(--site-blue); padding-bottom: 2px; font-weight: 900; }
.site-footer .copyright { font-size: 0.85rem; font-weight: 700; color: rgba(255, 255, 255, 0.5); padding-top: 26px; margin-top: 30px; border-top: 2px dashed rgba(255, 255, 255, 0.2); }

@media (max-width: 600px) {
  .site-header .header-logo { font-size: 1.1rem; }
  .site-footer .footer-links { gap: 8px 14px; font-size: 0.85rem; }
}