@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800;900&display=swap");

:root {
  --site-font:"Noto Sans JP";
  --green:#13722d;
  --green-dark:#075321;
  --green-deep:#063b18;
  --green-light:#eaf5ee;
  --gold:#caa45a;
  --orange:#f39800;
  --text:#1f2923;
  --muted:#5f6c64;
  --line:#d8e4dc;
  --bg:#f7faf8;
}
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:#fff; font-family:var(--site-font); line-height:1.75; }
button,input,select,textarea { font-family:inherit; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
.site-header { background:linear-gradient(90deg,var(--green-deep),var(--green)); color:#fff; position:sticky; top:0; z-index:10; box-shadow:0 2px 10px rgba(0,0,0,.16); }
.header-inner { max-width:1180px; margin:0 auto; min-height:56px; padding:4px 22px; display:flex; align-items:center; gap:22px; }
.header-logo { display:flex; align-items:center; flex:0 0 auto; padding:0; background:transparent; box-shadow:none; }
.header-logo img { width:150px; height:auto; object-fit:contain; filter:drop-shadow(0 0 2px rgba(255,255,255,.85)); }
.global-nav { margin-left:auto; display:flex; align-items:center; gap:20px; font-size:13px; font-weight:700; letter-spacing:.02em; }
.global-nav a { opacity:.95; white-space:nowrap; }
.global-nav a:hover { opacity:1; text-decoration:underline; text-underline-offset:6px; }
.menu-button { display:none; }
.site-footer { background:linear-gradient(90deg,var(--green-deep),var(--green)); color:#fff; padding:22px 20px 20px; }
.footer-inner { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; }
.footer-logo { background:#fff; padding:5px 9px; border-radius:3px; width:176px; }
.footer-nav { display:flex; justify-content:center; flex-wrap:wrap; gap:16px; font-size:13px; font-weight:700; }
.copyright { grid-column:1 / -1; margin:0; text-align:center; font-size:12px; letter-spacing:.04em; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:10px 28px; border-radius:6px; font-weight:800; letter-spacing:.02em; transition:.2s; }
/* CTA arrows: all buttons use the same sharp CSS arrow */
.button::after,
.coolrevo-cta::after {
  content:"";
  width:6px;
  height:6px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:rotate(45deg);
  margin-left:10px;
  flex:0 0 auto;
}
.section-block { max-width:1120px; margin:0 auto; padding:48px 24px; }
.section-title-wrap { display:flex; align-items:center; justify-content:center; gap:22px; margin-bottom:32px; color:var(--green); }
.section-title-wrap::before,.section-title-wrap::after { content:""; height:1px; width:min(180px,20vw); background:var(--green); }
.section-title-wrap h2 { margin:0; font-size:25px; letter-spacing:.06em; text-align:center; }
@media (max-width: 980px) {
  .global-nav { gap:14px; font-size:12px; }
  .header-logo img { width:144px; }
}
@media (max-width: 820px) {
  .header-inner { min-height:54px; padding:7px 14px; gap:10px; }
  .header-logo { padding:0; }
  .header-logo img { width:134px; }
  .global-nav { display:none; }
  .menu-button { display:block; margin-left:auto; border:1px solid rgba(255,255,255,.7); border-radius:4px; background:transparent; color:#fff; padding:5px 10px; font-weight:700; }
  .section-block { padding:40px 18px; }
  .section-title-wrap { gap:12px; margin-bottom:24px; }
  .section-title-wrap h2 { font-size:21px; }
  .footer-inner { grid-template-columns:1fr; text-align:center; justify-items:center; }
}


/* v11: restrained V1 footer */
.site-footer {
  position:relative;
  padding:30px 20px 18px;
  background:linear-gradient(105deg,#073c20 0%,#0d542a 62%,#123f2b 100%);
}
.site-footer::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:rgba(255,255,255,.22);
}
.footer-inner {
  grid-template-columns:168px 1fr auto;
  gap:28px;
}
.footer-logo {
  width:168px;
  padding:0;
  border-radius:0;
  background:transparent;
}
.footer-logo img {
  filter:drop-shadow(0 0 2px rgba(255,255,255,.75));
}
.footer-nav {
  gap:0;
  font-size:12px;
  font-weight:600;
}
.footer-nav a {
  position:relative;
  padding:4px 15px;
  opacity:.9;
}
.footer-nav a + a::before {
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:12px;
  background:rgba(255,255,255,.36);
  transform:translateY(-50%);
}
.footer-nav a:hover { opacity:1; text-decoration:underline; text-underline-offset:5px; }
.copyright {
  margin-top:5px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.17);
  color:rgba(255,255,255,.74);
  font-size:10px;
  font-weight:500;
  letter-spacing:.08em;
}
@media (max-width:820px) {
  .footer-inner { grid-template-columns:1fr; gap:18px; }
  .footer-nav a { padding-inline:10px; }
}

/* FB: header readability */
@media (min-width:821px) {
  .v2 .header-inner {
    min-height:76px;
    padding:10px 28px;
    gap:34px;
  }
  .v2 .header-logo img {
    width:184px;
  }
  .v2 .global-nav {
    gap:clamp(14px,1.55vw,26px);
    font-size:14px;
    line-height:1.45;
  }
  .v2 .global-nav a {
    padding:8px 0;
  }
}

/* v12 footer navigation expansion */
.footer-menu-wrap {
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.footer-nav {
  row-gap:4px;
}
.footer-utility {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:0;
  color:rgba(255,255,255,.68);
  font-size:10px;
  font-weight:500;
}
.footer-utility a {
  position:relative;
  padding:2px 11px;
}
.footer-utility a + a::before {
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:10px;
  background:rgba(255,255,255,.25);
  transform:translateY(-50%);
}
.footer-utility a:hover { color:#fff; }
@media (max-width:820px) {
  .footer-menu-wrap { gap:12px; }
  .footer-nav { max-width:720px; }
}
@media (max-width:560px) {
  .footer-nav { flex-direction:column; gap:4px; }
  .footer-nav a { padding:4px 0; }
  .footer-nav a + a::before { display:none; }
  .footer-utility { row-gap:4px; }
}


/* v13 SP-only header and page-top adjustments */
.page-top { display:none; }

@media (max-width:820px) {
  .menu-button {
    display:flex;
    width:42px;
    height:42px;
    margin-left:auto;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    appearance:none;
    box-shadow:none;
  }
  .menu-button span {
    display:block;
    width:25px;
    height:2px;
    background:#fff;
    border-radius:0;
  }
  .page-top {
    position:fixed;
    right:10px;
    bottom:10px;
    z-index:20;
    display:flex;
    width:38px;
    height:38px;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.42);
    background:rgba(16,38,58,.62);
    color:#fff;
    box-shadow:0 3px 10px rgba(0,0,0,.16);
    font-weight:700;
    font-size:8px;
    line-height:1;
    letter-spacing:.12em;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transform:translateY(8px);
    transition:opacity .35s ease,transform .35s ease,visibility .35s;
  }
  .page-top.is-visible {
    visibility:visible;
    opacity:.82;
    pointer-events:auto;
    transform:translateY(0);
  }
  .page-top::before {
    content:"";
    position:absolute;
    top:8px;
    left:50%;
    width:7px;
    height:7px;
    border-top:1px solid currentColor;
    border-left:1px solid currentColor;
    transform:translateX(-50%) rotate(45deg);
  }
  .page-top span { padding-top:12px; }
}
