/* Shared COTARU 3-row header for top, reserve LP, and spot pages:
   (1) news ticker .wxbar  (2) .site-header  (3) breadcrumb .crumb */

/* (1) News ticker bar */
.wxbar{background:var(--ink);color:#fff;overflow:hidden;white-space:nowrap;font-size:var(--fs-body);font-weight:600;letter-spacing:var(--ls-body);font-variant-numeric:tabular-nums}
.wx-track{display:inline-block;white-space:nowrap;padding:8px 0;will-change:transform;animation:wxscroll 34s linear infinite}
.wx-track:hover{animation-play-state:paused}
.wx-track span{display:inline-block;padding-right:40px}
@keyframes wxscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* (3) Breadcrumb bar */
.crumb{padding:10px 18px;font-size:var(--fs-caption);color:var(--muted)}
.crumb a{color:var(--brand);text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* (2) Site header */
.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:10px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
}
.site-logo{display:inline-flex;align-items:center;flex:0 0 auto;text-decoration:none}
.site-logo-img{height:20px;width:auto;display:block}
.site-nav{display:flex;align-items:center;gap:10px;margin-left:auto;min-width:0}
.site-nav .site-link{
  color:var(--muted);
  text-decoration:none;
  font-size:var(--fs-small);
  font-weight:600;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  padding:7px 0 6px;
}
.site-nav .site-link:hover,
.site-nav .site-link.is-current{color:var(--brand);border-bottom-color:var(--brand)}
.site-nav .site-book{white-space:nowrap;min-height:40px;padding:9px 16px;margin-left:2px}
/* 言語切替バー（全ページ共通の見た目をここで一元化） */
.site-langbar{flex:0 0 auto;margin-left:2px;display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.site-langbar button{border:0;background:#fff;color:var(--muted);font-size:var(--fs-label);font-weight:600;padding:5px 9px;cursor:pointer;border-left:1px solid var(--line);white-space:nowrap;font-family:inherit;line-height:1.4}
.site-langbar button:first-child{border-left:0}
.site-langbar button.on{background:var(--brand);color:#fff}
.site-navtoggle,.site-hamburger{display:none}
.site-hamburger{
  flex:0 0 40px;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px;
  height:40px;
  cursor:pointer;
  border-radius:var(--radius);
}

/* (4) Shared footer. Rendered by site-header.js so every page uses one footer layout. */
footer.site-footer{
  border-top:1px solid var(--line);
  padding:32px 20px 20px;
  margin:0;
  color:var(--muted);
  background:#fff;
  text-align:left;
  font-size:var(--fs-small);
}
.site-footer .ft-grid{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.3fr);
  gap:22px;
  align-items:start;
}
.site-footer .ft-logo{height:18px;width:auto;display:block;margin:0 0 10px}
.site-footer .ft-tag{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:1.7;max-width:22em}
.site-footer .ft-sns{display:inline-block;margin-top:10px;color:var(--brand);font-size:var(--fs-small);font-weight:600;text-decoration:none}
.site-footer .ft-col{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:8px;
  min-width:0;
  margin:0;
}
.site-footer .ft-col b{
  display:block;
  margin:0 0 2px;
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
}
.site-footer .ft-col a{
  color:var(--ink);
  text-decoration:none;
  font-size:var(--fs-small);
  line-height:1.6;
  max-width:100%;
  overflow-wrap:anywhere;
}
.site-footer .ft-col a:hover,
.site-footer .ft-sns:hover{color:var(--brand-d)}
.site-footer .ft-col span{color:var(--muted);font-size:var(--fs-small);line-height:1.6}
.site-footer .ft-btm{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  margin-top:26px;
  padding-top:14px;
  color:var(--muted);
  font-size:var(--fs-label);
  line-height:1.6;
}
.site-hamburger span{
  display:block;
  width:22px;
  height:2px;
  background:var(--ink);
  margin:0 auto;
  transition:transform .15s ease,opacity .15s ease;
}
@media(max-width:880px){
  .site-header{padding:8px 12px;gap:10px}
  .site-logo-img{height:18px}
  .site-langbar{margin-left:auto}
  .site-hamburger{display:inline-flex}
  .site-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:90;
    margin-left:0;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 8px 16px rgba(0,0,0,.06);
    flex-direction:column;
    align-items:stretch;
    padding:8px 18px 16px;
    gap:0;
  }
  .site-navtoggle:checked ~ .site-nav{display:flex}
  .site-navtoggle:checked ~ .site-hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-navtoggle:checked ~ .site-hamburger span:nth-child(2){opacity:0}
  .site-navtoggle:checked ~ .site-hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .site-nav .site-link{
    display:block;
    padding:12px 2px;
    border-bottom:1px solid var(--line);
    font-size:var(--fs-body);
  }
  .site-nav .site-link.is-current{border-bottom:1px solid var(--line);color:var(--brand)}
  .site-nav .site-book{
    display:flex;
    justify-content:center;
    margin:12px 0 0;
    border-bottom:0;
  }
}
@media(max-width:680px){
  footer.site-footer{padding:26px 14px 18px}
  .site-footer .ft-grid{grid-template-columns:1fr;gap:18px}
  .site-footer .ft-btm{display:block}
  .site-footer .ft-btm span{display:block}
  .site-footer .ft-btm span+span{margin-top:7px}
}
@media(max-width:560px){
  .site-langbar{
    flex:0 0 140px;
    width:140px;
    min-width:0;
    max-width:140px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
  }
  .site-langbar button{min-width:0;padding:4px 0;font-size:0;line-height:1}
  .site-langbar button::before{font-size:10px}
  .site-langbar button[data-lang="ja"]::before{content:"日"}
  .site-langbar button[data-lang="en"]::before{content:"EN"}
  .site-langbar button[data-lang="zh-Hans"]::before{content:"简"}
  .site-langbar button[data-lang="zh-Hant"]::before{content:"繁"}
  .site-langbar button[data-lang="ko"]::before{content:"한"}
}