/*
 * Shared site header, footer and page-top button.
 * Loaded on every page, including the Cat Coin Pusher pages that do not load style.css,
 * so every component's rules are self-contained.
 */
:root {
  --site-header-height:82px;
  --site-wave-height:64px;
  --site-wave-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 45C240 0 480 0 720 45S1200 90 1440 45V100H0Z'/%3E%3C/svg%3E");
  --chrome-ink:#004d43;
  --chrome-blue:#0872b8;
  --chrome-green:#007d46;
  --chrome-yellow:#ffe25b;
  --chrome-font:"LINE Seed JP","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  --chrome-rounded:"Hiragino Maru Gothic ProN","LINE Seed JP","Yu Gothic",Meiryo,sans-serif;
}

.skip-link:not(:focus) { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link:focus { position:fixed !important; top:10px; left:10px; z-index:1000; padding:10px 16px; color:#fff; background:var(--chrome-ink); border-radius:6px; font-family:var(--chrome-font); font-weight:700; }

html { scroll-padding-top:calc(var(--site-header-height) + 20px); }
input, textarea, select, button { scroll-margin-top:calc(var(--site-header-height) + 20px); }

/* Header */
.site-header { position:fixed; inset:0 0 auto; z-index:100; font-family:var(--chrome-font); background:rgba(255,255,255,.96); border-bottom:0; box-shadow:0 4px 20px #244c5b0d; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.site-header ul { margin:0; padding:0; list-style:none; }
.site-header a { text-decoration:none; -webkit-tap-highlight-color:transparent; }
.site-header .site-header__inner { display:flex; align-items:center; width:100%; max-width:1560px; min-height:var(--site-header-height); margin-inline:auto; padding:10px clamp(24px,4.2vw,72px); gap:32px; box-sizing:border-box; }
.site-header .site-header__logo,.site-footer .site-footer__logo { --brand-mark-width:220px; --brand-mark-height:52px; display:inline-flex; flex:0 0 auto; align-items:center; gap:10px; width:max-content; height:auto; padding:0; overflow:visible; background:transparent; }
.site-header .site-brand__wordmark,.site-footer .site-brand__wordmark { position:relative; display:block; flex:none; width:var(--brand-mark-width); height:var(--brand-mark-height); overflow:hidden; }
.site-header .site-header__logo-image,.site-footer .site-footer__logo-image { position:absolute; top:50%; left:0; display:block; width:100%; max-width:100%; height:auto; transform:translateY(-50%); }
.site-header .site-brand__name,.site-footer .site-brand__name { color:#237c58; font-size:14px; font-weight:700; line-height:1.3; letter-spacing:.04em; white-space:nowrap; }
.site-header .site-header__nav { margin-left:auto; }
.site-header .site-header__nav-list { display:flex; align-items:center; gap:30px; }
.site-header .site-header__nav-link { position:relative; display:inline-block; color:var(--chrome-ink); font-size:15px; font-weight:700; line-height:1.6; }
.site-header .site-header__nav-link::after { content:""; position:absolute; right:100%; bottom:-6px; left:0; height:3px; border-radius:3px; background:var(--chrome-yellow); transition:right .2s ease; }
.site-header .site-header__nav-link:hover,.site-header .site-header__nav-link--current { color:var(--chrome-ink); }
.site-header .site-header__nav-link:hover::after,.site-header .site-header__nav-link--current::after { right:0; }
.site-header .site-header__nav-cta { display:none; }
.site-header .site-header__cta { flex:0 0 auto; }
.site-header .button--header-cta { display:inline-flex; align-items:center; justify-content:center; min-width:182px; min-height:58px; padding:16px 26px; color:#fff; background:linear-gradient(180deg,#35ca95 0%,#12a86e 45%,#0c945f 100%); border:0; border-radius:999px; box-shadow:inset 0 3px 6px #ffffff66,inset 0 -5px 8px #005d7b26,0 5px 10px #246b8e1a; font-size:14px; font-weight:700; line-height:1.4; letter-spacing:.02em; white-space:nowrap; transition:transform .2s,box-shadow .2s; }
.site-header .button--header-cta:hover { background:linear-gradient(180deg,#45d4a0 0%,#1bb378 45%,#0f9c64 100%); transform:translateY(-2px); box-shadow:inset 0 3px 6px #ffffff80,inset 0 -5px 8px #005d7b26,0 8px 16px #246b8e24; }
.site-header .button--header-cta:active { transform:translateY(1px); }
.site-header .site-header__cta-label--short { display:none; }
.site-header .site-header__toggle { display:none; }
.site-header a:focus-visible,.site-header button:focus-visible,.site-footer a:focus-visible { outline:3px solid var(--chrome-blue); outline-offset:4px; }

/* Footer */
.site-footer { position:relative; margin:0; padding:52px 0 26px; color:#3d5a4c; background:#fff; border:0; font-family:var(--chrome-rounded); font-weight:700; line-height:1.7; }
.site-footer::before { content:""; position:absolute; top:calc(1px - var(--site-wave-height)); left:0; width:100%; height:var(--site-wave-height); background:#fff; -webkit-mask:var(--site-wave-mask) center / 100% 100% no-repeat; mask:var(--site-wave-mask) center / 100% 100% no-repeat; pointer-events:none; }
body.single-post .site-footer { border-top:1px solid #cfe4d9; }
body.single-post .site-footer::before { content:none; }
.site-footer ul { margin:0; padding:0; list-style:none; }
.site-footer p { margin:0; }
.site-footer a { text-decoration:none; }
.site-footer .site-footer__container { width:100%; max-width:1180px; margin-inline:auto; padding-inline:clamp(24px,4.2vw,72px); box-sizing:border-box; }
.site-footer .site-footer__inner { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:40px 64px; }
.site-footer .site-footer__logo { display:flex; }
.site-footer .site-footer__description { margin-top:8px; color:#647256; font-size:13px; line-height:1.9; }
.site-footer .site-footer__description-line { display:block; }
.site-footer .site-footer__description-phrase { display:inline-block; max-width:100%; }
.site-footer .site-footer__sns { margin-top:16px; }
.site-footer .site-footer__sns-link { display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:8px 16px; color:#fff; background:#000; border:0; border-radius:999px; box-shadow:none; font-size:12px; }
.site-footer .site-footer__sns-link:hover { color:#fff; background:#222; }
.site-footer .site-footer__nav { display:grid; grid-template-columns:repeat(2,max-content); gap:10px 48px; padding-top:6px; }
.site-footer .site-footer__nav-list { display:grid; gap:10px; align-content:start; }
.site-footer .site-footer__nav-link { position:relative; display:inline-block; min-height:32px; padding:4px 0 4px 16px; color:var(--chrome-ink); font-size:14px; line-height:1.6; }
.site-footer .site-footer__nav-phrase { display:inline-block; max-width:100%; }
.site-footer .site-footer__nav-link::before { content:""; position:absolute; top:calc(4px + .62em); left:0; width:7px; height:7px; border-top:2px solid #3bb07c; border-right:2px solid #3bb07c; transform:rotate(45deg); }
.site-footer .site-footer__nav-link:hover { color:#0f7f55; text-decoration:underline; text-decoration-color:var(--chrome-yellow); text-decoration-thickness:3px; text-underline-offset:4px; }
.site-footer .site-footer__copy { margin-top:44px; padding-top:20px; color:#647256; border-top:1px solid #c9e6d4; font-size:11px; text-align:center; letter-spacing:.04em; }

/* Page top */
.site-back-to-top { position:fixed; right:calc(24px + env(safe-area-inset-right,0px)); bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:90; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; width:60px; height:60px; padding:6px; color:var(--chrome-ink); background:#e3f7ec; border:2px solid #fff; border-radius:50%; box-shadow:0 4px 16px #004d4326; font-family:var(--chrome-font); font-size:11px; font-weight:800; line-height:1.2; letter-spacing:.04em; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .2s,transform .2s,box-shadow .2s; }
.site-back-to-top[hidden] { display:none; }
.site-back-to-top svg { display:block; flex:none; width:22px; height:22px; }
@media (hover:hover) { .site-back-to-top:hover { background:#c8eedc; transform:translateY(-3px); box-shadow:0 7px 20px #004d4333; } }
.site-back-to-top:active { transform:translateY(1px); }
.site-back-to-top:focus-visible { outline:3px solid var(--chrome-blue); outline-offset:4px; }

@media (max-width:1200px) {
  .site-header .site-header__inner { gap:22px; }
  .site-header .site-header__logo { --brand-mark-width:190px; --brand-mark-height:47px; }
  .site-header .site-header__nav-list { gap:20px; }
  .site-header .site-header__nav-link { font-size:14px; }
  .site-header .button--header-cta { min-width:150px; padding-inline:18px; }
}

/* Collapsed navigation */
@media (max-width:1020px) {
  :root { --site-header-height:68px; }
  .site-header .site-header__inner { gap:12px; padding-block:8px; }
  .site-header .site-header__logo { --brand-mark-width:160px; --brand-mark-height:44px; }
  .site-header .site-header__nav { position:absolute; top:100%; right:0; left:0; display:none; max-height:calc(100dvh - var(--site-header-height)); margin:0; padding:12px clamp(22px,4.2vw,72px) 24px; overflow-y:auto; background:#fff; border-top:1px solid #e5f1ea; box-shadow:0 16px 24px #244c5b14; }
  .site-header.site-header--menu-open .site-header__nav { display:block; }
  .site-header .site-header__nav-list { flex-direction:column; align-items:stretch; gap:0; }
  .site-header .site-header__nav-item + .site-header__nav-item { border-top:1px solid #edf4ef; }
  .site-header .site-header__nav-link { display:flex; align-items:center; justify-content:space-between; padding:14px 4px; font-size:16px; }
  .site-header .site-header__nav-link::before { content:"→"; order:2; color:#3bb07c; font-weight:400; }
  .site-header .site-header__nav-link::after { display:none; }
  .site-header .site-header__nav-link--current { color:#0f7f55; }
  .site-header .site-header__nav-cta { display:block; margin-top:14px; }
  .site-header .site-header__nav-cta .button--header-cta { width:100%; min-height:52px; font-size:15px; }
  .site-header .site-header__cta { order:3; margin-left:auto; }
  .site-header .site-header__toggle { display:inline-flex; order:4; flex-direction:column; justify-content:center; flex-shrink:0; width:44px; height:44px; padding:11px 10px; gap:5px; background:#effaf4; border:0; border-radius:12px; cursor:pointer; }
  .site-header .site-header__toggle-line { display:block; width:100%; height:3px; background:var(--chrome-ink); border-radius:3px; transition:opacity .2s ease,transform .2s ease; }
  .site-header.site-header--menu-open .site-header__toggle-line--top { transform:translateY(8px) rotate(45deg); }
  .site-header.site-header--menu-open .site-header__toggle-line--middle { opacity:0; }
  .site-header.site-header--menu-open .site-header__toggle-line--bottom { transform:translateY(-8px) rotate(-45deg); }
}

@media (max-width:760px) {
  :root { --site-wave-height:42px; }
  .site-back-to-top { right:calc(16px + env(safe-area-inset-right,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); width:54px; height:54px; font-size:10px; }
  .site-header .site-header__inner { padding-inline:20px; }
  .site-header .site-header__logo { --brand-mark-width:118px; --brand-mark-height:40px; gap:8px; }
  .site-header .site-brand__name { font-size:12px; }
  .site-header .button--header-cta { min-width:0; min-height:46px; padding:12px 14px; font-size:12px; }
  .site-header .site-header__cta-label--full { display:none; }
  .site-header .site-header__cta-label--short { display:inline; }
  .site-header .site-header__nav-cta .site-header__cta-label--full { display:inline; }
  .site-header .site-header__nav-cta .site-header__cta-label--short { display:none; }
  .site-footer { padding:44px 0 22px; }
  .site-footer .site-footer__container { padding-inline:22px; }
  .site-footer .site-footer__inner { grid-template-columns:1fr; gap:30px; text-align:center; }
  .site-footer .site-footer__logo { --brand-mark-width:170px; --brand-mark-height:44px; margin-inline:auto; }
  .site-footer .site-footer__nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 18px; padding:22px 16px; background:#ffffffa6; border-radius:20px; text-align:left; }
  .site-footer .site-footer__nav-list { gap:8px; }
  .site-footer .site-footer__nav-link { min-height:40px; padding-left:14px; font-size:13px; white-space:normal; }
  .site-footer .site-footer__copy { margin-top:28px; }
}

@media (max-width:380px) {
  .site-header .site-header__inner { gap:6px; padding-inline:14px; }
  .site-header .site-header__logo { --brand-mark-width:90px; --brand-mark-height:34px; gap:6px; }
  .site-header .site-brand__name { font-size:11px; }
  .site-header .button--header-cta { padding-inline:10px; }
  .site-header .site-header__toggle { width:40px; height:40px; padding:10px 9px; }
  .site-footer .site-footer__nav { padding-inline:12px; column-gap:14px; }
}

@media (prefers-reduced-motion:reduce) {
  .site-header .button--header-cta,.site-header .site-header__nav-link::after,.site-header .site-header__toggle-line { transition:none; }
  .site-back-to-top { transition:none; }
}
