/* Shared navigation and footer. Brand emphasis colours are intentionally fixed. */
:root{--bold:#d81b74;--aqua:#0b6d9e;--ink:#3f1a52;--ink-2:#7b4a88;--line:#f0e0f2;--site-header-offset:100px}
html{scroll-padding-top:var(--site-header-offset)}
:target{scroll-margin-top:var(--site-header-offset)}
.site-skip{position:fixed;top:8px;left:16px;z-index:1000;padding:12px 20px;background:#fff;color:var(--aqua);border:2px solid var(--aqua);transform:translateY(-160%)}
.site-skip:focus{transform:none}
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line);font-family:"Zen Maru Gothic","Zen Maru Gothic Fallback Arial","Zen Maru Gothic Fallback Roboto","Zen Maru Gothic Fallback","Hiragino Sans",sans-serif;line-height:1.5}
.site-header-inner{display:flex;align-items:center;gap:28px;max-width:1280px;min-height:88px;margin:auto;padding:16px 36px}
.site-logo{display:flex;flex-direction:column;gap:8px;flex:none;width:245px;text-decoration:none;color:var(--aqua)}
.site-logo picture{display:block}.site-logo img{display:block;width:100%;height:auto}
.site-logo span{font-size:11px;font-weight:500;letter-spacing:0}
.site-nav{display:flex;align-items:center;gap:24px;margin-left:auto}
.site-nav a{color:var(--aqua);text-decoration:none;font-size:14px;white-space:nowrap;font-weight:500;padding:8px 0;border-bottom:2px solid transparent}
.site-nav a:hover,.site-nav a[aria-current="page"]{border-color:var(--bold)}
.site-contact{flex:none;display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;min-height:44px;border:1px solid var(--bold);border-radius:999px;color:var(--bold);background:#fff;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap}
.site-contact:hover{box-shadow:0 3px 0 #fbe6f3}
.site-footer{border-top:1px solid var(--line);background:#fff;color:var(--ink-2);padding:48px 32px;font-family:"Zen Maru Gothic","Zen Maru Gothic Fallback Arial","Zen Maru Gothic Fallback Roboto","Zen Maru Gothic Fallback","Hiragino Sans",sans-serif;font-size:12px;line-height:1.9}
.site-footer-inner{max-width:1160px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:56px}
.site-footer-brand{color:var(--aqua);font-size:20px;font-weight:700;text-decoration:none}
.site-footer p{max-width:72em;margin:12px 0 0}
.site-footer-links{display:flex;align-items:flex-start;flex-direction:column;gap:4px}
.site-footer-links a{color:var(--aqua);padding:8px 0;min-height:40px;text-decoration:underline;text-underline-offset:4px}
.site-footer-address{margin-top:8px}
.site-header :focus-visible,.site-footer :focus-visible{outline:2px solid var(--aqua);outline-offset:5px;border-radius:3px}
.ph{max-width:100%;overflow-wrap:anywhere}
@media(max-width:1080px){.site-header-inner{gap:18px;padding-inline:24px}.site-logo{width:220px}.site-nav{gap:16px}.site-nav a{font-size:13px}.site-contact{padding-inline:14px}}
@media(max-width:900px){:root{--site-header-offset:144px}.site-header-inner{flex-wrap:wrap;gap:12px;padding:14px 20px 0}.site-logo{width:220px}.site-contact{margin-left:auto}.site-nav{order:3;flex-basis:100%;margin:0;gap:26px;overflow-x:auto;scrollbar-width:thin}.site-nav a{padding:8px 0 12px}.site-logo span{font-size:10px}.site-footer-inner{grid-template-columns:1fr;gap:24px}.site-footer-links{flex-direction:row;flex-wrap:wrap;gap:8px 24px}}
@media(max-width:400px){.site-logo{width:min(195px,calc(100vw - 190px))}.site-contact{font-size:12px;padding-inline:10px}.site-header-inner{padding-inline:14px;gap:8px}.site-nav{gap:20px}.site-footer{padding:36px 20px}}
@media(max-width:360px){.site-nav{gap:14px}.site-nav a{font-size:12px}}
/* Phones up to 520px (e.g. 414–440px): keep the logo and the contact button on one row. */
@media(max-width:520px){.site-header:not(.intl-header) .site-logo{width:min(195px,calc(100vw - 190px))}.site-header:not(.intl-header) .site-contact{font-size:12px;padding-inline:10px}.site-header:not(.intl-header) .site-header-inner{padding-inline:14px;gap:8px}}
/* Keep the language menu visible alongside every Japanese navigation link. */
@media(max-width:520px){.site-header:not(.intl-header) .site-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 8px;overflow:visible}.site-header:not(.intl-header) .site-nav a{display:flex;align-items:center;justify-content:center;min-height:36px;padding:7px 0;font-size:12px;white-space:normal;text-align:center}.site-header:not(.intl-header) .site-lang{grid-column:3;justify-self:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media print{.site-header,.site-skip,.site-contact{display:none}.site-footer{padding:20px 0}.site-footer-inner{display:block}}
/* Language menu: a separate control from the page links. Its <li> items are generated from LOCALES in tools/site_locales.py (the LANG_MENU token in each header partial). */
.site-lang{position:relative;flex:none}
.site-lang>summary{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 10px;border:1px solid #cfe3ee;border-radius:10px;background:#f3f9fd;color:var(--aqua);font-size:13px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
.site-lang>summary::-webkit-details-marker{display:none}
.site-lang>summary:hover,.site-lang[open]>summary{border-color:var(--aqua);background:#fff}
.site-lang svg{flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.site-lang-globe{width:16px;height:16px}.site-lang-caret{width:11px;height:11px;transition:transform .15s}
.site-lang[open] .site-lang-caret{transform:rotate(180deg)}
.site-lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:120;min-width:176px;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 28px rgba(63,26,82,.14)}
.site-header .site-nav .site-lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:10px 12px;border:0;border-radius:8px;color:var(--ink);font-size:14px;font-weight:500;white-space:nowrap;text-align:left}
.site-header .site-nav .site-lang-menu a:hover{background:#fdf0f7}
.site-header .site-nav .site-lang-menu a[aria-current]{color:var(--bold)}
.site-header .site-nav .site-lang-menu a[aria-current]::after{content:"✓";content:"✓"/"";font-size:13px}
/* Narrow headers: the nav row can scroll sideways, so the list is anchored to the sticky header instead of the button. */
@media(max-width:900px){.site-nav .site-lang{position:static;align-self:center}.site-lang-menu{top:100%;right:14px}}
@media(max-width:400px){.site-lang>summary{min-height:34px;padding:5px 9px;font-size:12px}}

/* ===== Fallback fonts for layout stability (CLS), 2026-09-27 (revised after review VP1) =====
   Zen Maru Gothic and Fredoka load with font-display:swap, so text is first drawn in a system font (and stays
   in it when Google Fonts is blocked). The families below map system fonts through local() and give them the
   web font's line metrics (ascent/descent/line-gap overrides). Each family has ONE size-adjust for all of its
   characters, so glyphs keep their natural shapes and relative sizes (the first version scaled each digit and
   Latin character separately, which made numbers look broken while the web fonts loaded).
   "… Fallback Arial" / "… Fallback Roboto": Latin and digits in Arial (macOS, iOS, Windows) / Roboto (Android),
   whose widths are close to Zen Maru Gothic's and Fredoka's; "Zen Maru Gothic Fallback": kana, kanji and
   full-width punctuation at 100 % in the platform's Japanese font.
   Each face covers only characters the web font has, so after loading every page looks exactly as before.
   Generated by review_fallback_fonts.py (mode: arial) and written here by review_apply_fallback.py
   (内部監査_20260908_SEO・サンプル・競合・メール/20260927_SEO・AIO改善実装/); regenerate instead of editing by hand.
   --font-jp / --font-en below are the site.css stacks with these families inserted after each web font:
   when site.css changes its stacks, update them here too. */
@font-face{font-family:"Fredoka Fallback Arial";src:local("Arial"),local("ArialMT");font-display:swap;size-adjust:100.5%;ascent-override:96.92%;descent-override:23.48%;line-gap-override:0%;unicode-range:U+20-7E,U+A0-AC,U+AE-FF}
@font-face{font-family:"Fredoka Fallback Roboto";src:local("Roboto"),local("Roboto-Regular"),local("Roboto Regular");font-display:swap;size-adjust:102%;ascent-override:95.49%;descent-override:23.14%;line-gap-override:0%;unicode-range:U+20-7E,U+A0-AC,U+AE-FF}
@font-face{font-family:"Zen Maru Gothic Fallback Arial";src:local("Arial"),local("ArialMT");font-display:swap;size-adjust:98.5%;ascent-override:117.77%;descent-override:29.24%;line-gap-override:0%;unicode-range:U+20-7E,U+A0-AC,U+AE-FF}
@font-face{font-family:"Zen Maru Gothic Fallback Roboto";src:local("Roboto"),local("Roboto-Regular"),local("Roboto Regular");font-display:swap;size-adjust:99.5%;ascent-override:116.58%;descent-override:28.94%;line-gap-override:0%;unicode-range:U+20-7E,U+A0-AC,U+AE-FF}
@font-face{font-family:"Zen Maru Gothic Fallback";src:local("Hiragino Maru Gothic ProN W4"),local("HiraMaruProN-W4"),local("Noto Sans CJK JP"),local("NotoSansCJKjp-Regular"),local("Noto Sans CJK JP Regular"),local("Yu Gothic Regular"),local("YuGothic-Regular"),local("Meiryo");font-display:swap;size-adjust:100%;ascent-override:116%;descent-override:28.8%;line-gap-override:0%;unicode-range:U+20-7E,U+A0-AC,U+AE-FF,U+131,U+152-153,U+174-178,U+2C6,U+2DA,U+2DC,U+300-303,U+307-308,U+30A,U+327,U+37E,U+384-38A,U+38C,U+38E-3A1,U+3A3-3CE,U+401,U+410-44F,U+451,U+1E80-1E85,U+1E9E,U+1EF2-1EF3,U+2010,U+2013-2014,U+2016,U+2018-201A,U+201C-201E,U+2020-2022,U+2025-2026,U+2030,U+2032-2033,U+2039-203B,U+2044,U+2074,U+20AC,U+20DD,U+2103,U+2109,U+2113,U+2116,U+2121-2122,U+2160-216B,U+2170-217B,U+2190-2193,U+21C4-21C6,U+21D2,U+21D4,U+21E6-21E9,U+2200,U+2202-2203,U+2207-2208,U+220B,U+2212,U+2215,U+221A,U+221D-2220,U+2227-222C,U+222E,U+2234-2235,U+223D,U+2252,U+2260-2261,U+2266-2267,U+226A-226B,U+2282-2283,U+2286-2287,U+22A5,U+22BF,U+2312,U+2460-2490,U+249C-24B5,U+2500-2503,U+250C,U+250F-2510,U+2513-2514,U+2517-2518,U+251B-251D,U+2520,U+2523-2525,U+2528,U+252B-252C,U+252F-2530,U+2533-2534,U+2537-2538,U+253B-253C,U+253F,U+2542,U+254B,U+25A0-25A1,U+25B2-25B3,U+25BC-25BD,U+25C6-25C7,U+25CB,U+25CE-25CF,U+25EF,U+2605-2606,U+260E,U+261C-261F,U+2640,U+2642,U+2660-2667,U+266A,U+266D,U+266F,U+2776-277E,U+3000-30FF,U+31F0-31FF,U+3200-33FF,U+4E00-9FFF,U+F900-FAFF,U+FE30-FE4F,U+FF00-FFEF}
:root{--font-jp:"Zen Maru Gothic","Zen Maru Gothic Fallback Arial","Zen Maru Gothic Fallback Roboto","Zen Maru Gothic Fallback","Hiragino Maru Gothic ProN","Yu Gothic","Hiragino Sans",sans-serif;--font-en:"Fredoka","Fredoka Fallback Arial","Fredoka Fallback Roboto","Zen Maru Gothic","Zen Maru Gothic Fallback Arial","Zen Maru Gothic Fallback Roboto","Zen Maru Gothic Fallback","Hiragino Maru Gothic ProN","Helvetica Neue",Helvetica,Arial,sans-serif}
/* Japanese pages without site.css (guide, privacy, tokushoho) declare the same body stack as --font-jp in their own CSS;
   use the token so their body text gets the fallbacks too. English/French pages keep .intl-page (international.css). */
body:not(.intl-page){font-family:var(--font-jp)}