@charset "utf-8";
/* JAHA static-content switch v5: exact colors / hover from logic/front/front_disp_logic.php .jahaLessonEmergencyAction.isApply. */
/* PC Blog position and all scroll-reveal functionality are unchanged. */
.header2 .jahaStaticViewButton {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  border: 2px solid #86ca38 !important;
  background: linear-gradient(135deg,#ffffff 0%,#f8fff0 52%,#effbdc 100%) !important;
  color: #5f8f1f !important;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  font: 500 12px/1.25 sans-serif;
  letter-spacing: .01em;
  border-radius: 999px;
  padding: 7px 9px;
  min-height: 32px;
  box-shadow: 0 8px 18px rgba(95,143,31,.12), inset 0 1px 0 rgba(255,255,255,.95) !important;
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
  overflow: hidden;
  transform: translateY(0);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
}
/* JAHA 2026-10-21 v7: normal navigation weight on every page.
   Page-specific styles load after this stylesheet on some templates. Scope this
   override only to the control text, never to navigation, hero, or animations. */
header.header2 .jahaStaticViewButton,
header.header2 .jahaStaticViewButton .jahaStaticViewButtonLabel {
  font-weight: 500 !important;
}
/* Reproduce the reference modal's passing highlight, not just its background. */
.header2 .jahaStaticViewButton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,rgba(255,255,255,.12),rgba(255,255,255,.62),rgba(255,255,255,.10));
  transform: translateX(-115%);
  transition: transform .38s ease;
  pointer-events: none;
}
.header2 .jahaStaticViewButton .jahaStaticViewIcon,
.header2 .jahaStaticViewButton .jahaStaticViewButtonLabel {
  position: relative;
  z-index: 1;
  color: inherit !important;
}
.header2 .jahaStaticViewIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 21px;
  height: 21px;
  min-width: 21px;
  flex: 0 0 21px;
  border-radius: 50%;
  background: rgba(134,202,56,.14);
  text-align: center;
  font-family: Arial, "Segoe UI Symbol", sans-serif;
  font-size: 12px;
  font-weight: 500;
  transition: background .22s ease, transform .22s ease;
}
@media (hover:hover) {
  .header2 .jahaStaticViewButton:hover {
    transform: translateY(-3px);
    border-color: #6fb629 !important;
    background: linear-gradient(135deg,#92d345 0%,#7bc62f 52%,#67ad21 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 26px rgba(111,182,41,.25) !important;
  }
  .header2 .jahaStaticViewButton:hover .jahaStaticViewIcon,
  .header2 .jahaStaticViewButton:hover .jahaStaticViewButtonLabel {color:#fff !important;}
  .header2 .jahaStaticViewButton:hover::before {transform:translateX(115%);}
  .header2 .jahaStaticViewButton:hover .jahaStaticViewIcon {
    background: rgba(255,255,255,.22);
    transform: translateX(2px);
  }
}
.header2 .jahaStaticViewButton:active { transform: translateY(-1px); }
.header2 .jahaStaticViewButton:focus-visible { outline:3px solid rgba(134,202,56,.28); outline-offset:3px; }
/* On/off changes only icon+wording, not colors. */
/* JAHA 2026-10-21 v6: invert BOTH background and text in the active "restore motion" state.
   Inactive: pale green / green text, hover: vibrant green / white text.
   Active: vibrant green / white text, hover: pale green / green text.
   The rest of the site, header placement, and motion controls are unchanged. */
html.jaha-static-mode .header2 .jahaStaticViewButton {
  background: linear-gradient(135deg,#92d345 0%,#7bc62f 52%,#67ad21 100%) !important;
  border-color: #6fb629 !important;
  color: #ffffff !important;
  box-shadow: 0 14px 26px rgba(111,182,41,.25) !important;
}
html.jaha-static-mode .header2 .jahaStaticViewButton .jahaStaticViewIcon,
html.jaha-static-mode .header2 .jahaStaticViewButton .jahaStaticViewButtonLabel {
  color: #ffffff !important;
}
html.jaha-static-mode .header2 .jahaStaticViewButton .jahaStaticViewIcon {
  background: rgba(255,255,255,.22);
}
@media (hover: hover) {
  html.jaha-static-mode .header2 .jahaStaticViewButton:hover {
    background: linear-gradient(135deg,#ffffff 0%,#f8fff0 52%,#effbdc 100%) !important;
    border-color: #86ca38 !important;
    color: #5f8f1f !important;
    box-shadow: 0 8px 18px rgba(95,143,31,.12), inset 0 1px 0 rgba(255,255,255,.95) !important;
  }
  html.jaha-static-mode .header2 .jahaStaticViewButton:hover .jahaStaticViewIcon,
  html.jaha-static-mode .header2 .jahaStaticViewButton:hover .jahaStaticViewButtonLabel {
    color: #5f8f1f !important;
  }
  html.jaha-static-mode .header2 .jahaStaticViewButton:hover .jahaStaticViewIcon {
    background: rgba(134,202,56,.14);
  }
}
/* Mobile: keep original button position between logo and hamburger. */
.header2 .jahaStaticViewMobile { margin: 0 13px 0 auto; }
.header2 .jahaDesktopStaticViewNav { display: none; }
@media (max-width: 359px) {
  .header2 .jahaStaticViewMobile { font-size: 10px; padding: 5px 6px; margin-right: 9px; gap: 3px; }
  .header2 .jahaStaticViewMobile .jahaStaticViewIcon { font-size: 10px; width: 16px; height: 16px; min-width:16px; flex-basis:16px; }
}
@media (min-width: 992px) {
  /* The original Blog item is marked spShow; expose it only on desktop too. */
  header.header2 .header2MenuArea > .header2MenuIn.spShow.jahaBlogNav {
    display: flex !important;
    align-items: center;
    flex: 0 0 auto;
  }
  header.header2 .header2MenuArea > .header2MenuIn.jahaDesktopStaticViewNav {
    display: flex !important;
    align-items: center;
    flex: 0 0 auto;
    padding-inline: 2px !important;
  }
  header.header2 .jahaStaticViewMobile { display: none !important; }
  header.header2 .jahaStaticViewDesktop {
    font-size: 11px;
    min-height: 30px;
    padding: 6px 8px;
    box-shadow: none;
    font-weight: 500;
  }
  header.header2 .jahaBlogNav { padding-right: 1px !important; }
  header.header2 .jahaDesktopStaticViewNav { padding-left: 1px !important; margin-left: clamp(16px, 1.7vw, 24px) !important; }
}
@media (min-width: 992px) and (max-width: 1150px) {
  header.header2 .jahaStaticViewDesktop { font-size: 10px; gap: 3px; padding: 6px 5px; }
  header.header2 .jahaBlogNav { padding-inline: 3px !important; }
  header.header2 .jahaStaticViewDesktop .jahaStaticViewIcon { font-size: 12px; min-width: 12px; }
}
/* JAHA v8: Only suppress *entrance* effects. Do not overwrite hover opacity,
   transitions, typography, layout, or the final decorative transform. */
/* Fallback for a not-yet-activated reveal (or if a controller is absent). */
html.jaha-static-mode body .sc-animate:not(.active):not(:is(header, header *, .header2, .header2 *, .i2mainVi, .i2mainVi *, .jahaTamarisFv, .jahaTamarisFv *, .lowerMainImgAreaWrap, .lowerMainImgAreaWrap *, .jahaVidHero, .jahaVidHero *, #jahaSlimHero2026, #jahaSlimHero2026 *, [data-jaha-static-exempt], [data-jaha-static-exempt] *)),
html.jaha-static-mode body .animateIn:not(.is-active):not(:is(header, header *, .header2, .header2 *, .i2mainVi, .i2mainVi *, .jahaTamarisFv, .jahaTamarisFv *, .lowerMainImgAreaWrap, .lowerMainImgAreaWrap *, .jahaVidHero, .jahaVidHero *, #jahaSlimHero2026, #jahaSlimHero2026 *, [data-jaha-static-exempt], [data-jaha-static-exempt] *)) {
  opacity: 1;
}
/* All reveal controllers add completion classes. Suppress only their animation. */
html.jaha-static-mode body .sc-animate.active:not(:is(header, header *, .header2, .header2 *, .i2mainVi, .i2mainVi *, .jahaTamarisFv, .jahaTamarisFv *, .lowerMainImgAreaWrap, .lowerMainImgAreaWrap *, .jahaVidHero, .jahaVidHero *, #jahaSlimHero2026, #jahaSlimHero2026 *, [data-jaha-static-exempt], [data-jaha-static-exempt] *)),
html.jaha-static-mode body .sc-animate-child.active:not(:is(header, header *, .header2, .header2 *, .i2mainVi, .i2mainVi *, .jahaTamarisFv, .jahaTamarisFv *, .lowerMainImgAreaWrap, .lowerMainImgAreaWrap *, .jahaVidHero, .jahaVidHero *, #jahaSlimHero2026, #jahaSlimHero2026 *, [data-jaha-static-exempt], [data-jaha-static-exempt] *)),
html.jaha-static-mode body .animateIn.is-active:not(:is(header, header *, .header2, .header2 *, .i2mainVi, .i2mainVi *, .jahaTamarisFv, .jahaTamarisFv *, .lowerMainImgAreaWrap, .lowerMainImgAreaWrap *, .jahaVidHero, .jahaVidHero *, #jahaSlimHero2026, #jahaSlimHero2026 *, [data-jaha-static-exempt], [data-jaha-static-exempt] *)),
html.jaha-static-mode body .animateInFade.is-active:not(:is(header, header *, .header2, .header2 *, .i2mainVi, .i2mainVi *, .jahaTamarisFv, .jahaTamarisFv *, .lowerMainImgAreaWrap, .lowerMainImgAreaWrap *, .jahaVidHero, .jahaVidHero *, #jahaSlimHero2026, #jahaSlimHero2026 *, [data-jaha-static-exempt], [data-jaha-static-exempt] *)) {
  animation-name: none !important;
  -webkit-animation-name: none !important;
}
/* The mask's children are revealed, without changing their transforms / hover. */
html.jaha-static-mode body .f-in:not(.active):not(:is(header, header *, .header2, .header2 *, .i2mainVi, .i2mainVi *, .jahaTamarisFv, .jahaTamarisFv *, .lowerMainImgAreaWrap, .lowerMainImgAreaWrap *, .jahaVidHero, .jahaVidHero *, #jahaSlimHero2026, #jahaSlimHero2026 *, [data-jaha-static-exempt], [data-jaha-static-exempt] *)) > *,
html.jaha-static-mode body .f-in-child:not(.active):not(:is(header, header *, .header2, .header2 *, .i2mainVi, .i2mainVi *, .jahaTamarisFv, .jahaTamarisFv *, .lowerMainImgAreaWrap, .lowerMainImgAreaWrap *, .jahaVidHero, .jahaVidHero *, #jahaSlimHero2026, #jahaSlimHero2026 *, [data-jaha-static-exempt], [data-jaha-static-exempt] *)) > * {
  opacity: 1;
}
html.jaha-static-mode body .f-in.active:not(:is(header, header *, .header2, .header2 *, .i2mainVi, .i2mainVi *, .jahaTamarisFv, .jahaTamarisFv *, .lowerMainImgAreaWrap, .lowerMainImgAreaWrap *, .jahaVidHero, .jahaVidHero *, #jahaSlimHero2026, #jahaSlimHero2026 *, [data-jaha-static-exempt], [data-jaha-static-exempt] *)) > *,
html.jaha-static-mode body .f-in-child.active:not(:is(header, header *, .header2, .header2 *, .i2mainVi, .i2mainVi *, .jahaTamarisFv, .jahaTamarisFv *, .lowerMainImgAreaWrap, .lowerMainImgAreaWrap *, .jahaVidHero, .jahaVidHero *, #jahaSlimHero2026, #jahaSlimHero2026 *, [data-jaha-static-exempt], [data-jaha-static-exempt] *)) > * {
  animation-name: none !important;
  -webkit-animation-name: none !important;
}
html.jaha-static-mode body .f-in:not(:is(header, header *, .header2, .header2 *, .i2mainVi, .i2mainVi *, .jahaTamarisFv, .jahaTamarisFv *, .lowerMainImgAreaWrap, .lowerMainImgAreaWrap *, .jahaVidHero, .jahaVidHero *, #jahaSlimHero2026, #jahaSlimHero2026 *, [data-jaha-static-exempt], [data-jaha-static-exempt] *))::after,
html.jaha-static-mode body .f-in-child:not(:is(header, header *, .header2, .header2 *, .i2mainVi, .i2mainVi *, .jahaTamarisFv, .jahaTamarisFv *, .lowerMainImgAreaWrap, .lowerMainImgAreaWrap *, .jahaVidHero, .jahaVidHero *, #jahaSlimHero2026, #jahaSlimHero2026 *, [data-jaha-static-exempt], [data-jaha-static-exempt] *))::after {
  display: none !important;
}
/* Mask text is normally transparent until .is-active is assigned.
   Preserve final text colors supplied by the existing .is-active rules. */
html.jaha-static-mode body .animateInFade:not(.is-active):not(:is(header, header *, .header2, .header2 *, .i2mainVi, .i2mainVi *, .jahaTamarisFv, .jahaTamarisFv *, .lowerMainImgAreaWrap, .lowerMainImgAreaWrap *, .jahaVidHero, .jahaVidHero *, #jahaSlimHero2026, #jahaSlimHero2026 *, [data-jaha-static-exempt], [data-jaha-static-exempt] *)) {
  color: var(--jaha-static-reveal-final-color, #444444);
}
html.jaha-static-mode body .animateInFade.fc-pink:not(.is-active):not(:is(header, header *, .header2, .header2 *, .i2mainVi, .i2mainVi *, .jahaTamarisFv, .jahaTamarisFv *, .lowerMainImgAreaWrap, .lowerMainImgAreaWrap *, .jahaVidHero, .jahaVidHero *, #jahaSlimHero2026, #jahaSlimHero2026 *, [data-jaha-static-exempt], [data-jaha-static-exempt] *)) {
  color: var(--jaha-static-reveal-final-color, #f07580);
}
html.jaha-static-mode body .animateInFade:not(:is(header, header *, .header2, .header2 *, .i2mainVi, .i2mainVi *, .jahaTamarisFv, .jahaTamarisFv *, .lowerMainImgAreaWrap, .lowerMainImgAreaWrap *, .jahaVidHero, .jahaVidHero *, #jahaSlimHero2026, #jahaSlimHero2026 *, [data-jaha-static-exempt], [data-jaha-static-exempt] *))::before {
  display: none !important;
}
/* 320px handsets: reserve room for logo, button and hamburger without clipping. */
@media (max-width: 359px) {
  html body header.header2 .header2Logo img.jahaHeaderStandardLogo {
    width: 138px !important;
    max-width: 138px !important;
  }
  html body.jahaSlimVideoNav header.header2 .header2Logo a {
    width: 138px !important;
    max-width: 138px !important;
  }
}

/* JAHA v10: consistent, compact control height on every template.
   Preserve inherited color, hover appearance and JS functionality. */
html body header.header2 button.jahaStaticViewButton {
  box-sizing: border-box !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 12px !important;
  line-height: 1 !important;
  vertical-align: middle;
  align-self: center;
  font-size: 12px;
  font-weight: 500 !important;
}
html body header.header2 button.jahaStaticViewButton .jahaStaticViewButtonLabel {
  line-height: 1.2 !important;
  font-weight: 500 !important;
}
html body header.header2 button.jahaStaticViewButton .jahaStaticViewIcon {
  width: 20px;
  min-width: 20px;
  height: 20px;
  flex-basis: 20px;
  line-height: 1;
}
@media (min-width: 992px) {
  html body header.header2 button.jahaStaticViewButton.jahaStaticViewDesktop {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 11px !important;
    font-size: 11px;
  }
}
@media (min-width: 992px) and (max-width: 1150px) {
  html body header.header2 button.jahaStaticViewButton.jahaStaticViewDesktop {padding: 0 8px !important; font-size: 10px;}
}
@media (max-width: 359px) {
  html body header.header2 button.jahaStaticViewButton.jahaStaticViewMobile {
    height: 36px !important; min-height:36px !important; max-height:36px !important;
    padding: 0 7px !important; font-size: 10px; gap: 3px;
  }
  html body header.header2 button.jahaStaticViewButton.jahaStaticViewMobile .jahaStaticViewIcon {
    width:16px;min-width:16px;height:16px;flex-basis:16px;
  }
}

/* v11: identical Japanese font metrics for the static-view button across templates.
   Icon fonts are intentionally excluded. */
html body header.header2 button.jahaStaticViewButton,
html body header.header2 button.jahaStaticViewButton .jahaStaticViewButtonLabel {
  font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-synthesis: none;
}