/* footer-v2.css canonical common parts (2026-05-31) */

:root {
  --kl-charcoal: #2f3336;
  --kl-muted: #6f7579;
  --kl-blue: #21c2f1;
  --kl-drawer-bg: #e9fcfc;
  --kl-footer-bg: #f7f3ec;
}

html body header.wow.fadeIn,
.kl-v2 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: 81px !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}

html body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

[id] {
  scroll-margin-top: 81px;
}

html body div#wrapper.kidslabWrap,
html body .kidslabWrap > #scroll-content,
html body #Contents {
  max-width: 100% !important;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html body div#wrapper.kidslabWrap,
  html body .kidslabWrap > #scroll-content,
  html body #Contents {
    overflow-x: hidden !important;
  }
}

.kidslabWrap #breadcrumb,
body #breadcrumb.footer_type1,
body #breadcrumb {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body #breadcrumb + footer,
body #breadcrumb ~ footer {
  margin-top: 0 !important;
}

.kidslabWrap > #scroll-content > footer,
body footer[role="contentinfo"] {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  border-top: 0 !important;
  background: var(--kl-footer-bg) !important;
}

body footer[role="contentinfo"] > .clearfix:empty,
body footer[role="contentinfo"]::before,
body footer[role="contentinfo"]::after {
  display: none !important;
}

@media (min-width: 769px) {
  html body #contents {
    display: block !important;
  }

  html body #main-contents,
  html body main.main-contents {
    width: 100% !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }

  html body #side,
  html body .side,
  html body #sidebar-wrap,
  html body aside.sidebar {
    display: none !important;
  }
}

.cta-content .kl-role-card,
.cta-content .kl-role-card-v2,
section.cta-content [data-kl-rolecard] {
  display: none !important;
}

/* Header */
html body header.wow.fadeIn,
html body .kidslabWrap > #scroll-content > header.wow.fadeIn {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 65px !important;
  min-height: 65px !important;
  max-height: 65px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(228,238,243,.78) !important;
  z-index: 100000 !important;
  background: rgba(255,255,255,.86) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: none !important;
}

html body div#wrapper.kidslabWrap {
  padding-top: 65px !important;
}

html body .kidslabWrap > #scroll-content {
  padding-top: 0 !important;
}

html body header.wow.fadeIn .inner,
html body .kidslabWrap > #scroll-content > header.wow.fadeIn .inner {
  width: min(1200px, calc(100% - 48px)) !important;
  max-width: 1200px !important;
  height: 65px !important;
  min-height: 65px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
}

html body header.wow.fadeIn .logoArea {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  flex: 0 0 310px !important;
  width: 310px !important;
  max-width: 310px !important;
  min-width: 0 !important;
  gap: 7px !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body header.wow.fadeIn .logoSub {
  margin: 0 !important;
  color: #82878b !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

html body header.wow.fadeIn .logoMain img {
  display: block !important;
  width: 204px !important;
  max-width: 204px !important;
  height: auto !important;
  filter: grayscale(1) brightness(.28) !important;
}

html body header.wow.fadeIn #pcMenu {
  display: block !important;
  margin-left: auto !important;
}

html body header.wow.fadeIn #pcMenu > ul {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body header.wow.fadeIn #pcMenu > ul > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body header.wow.fadeIn #pcMenu > ul > li > span,
html body header.wow.fadeIn #pcMenu > ul > li > a,
html body header.wow.fadeIn #pcMenu > ul > li.kl-pc-account-menu summary {
  color: var(--kl-charcoal) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

html body header.wow.fadeIn #pcMenu > ul > li.kl-pc-account-menu details {
  position: relative !important;
}

html body header.wow.fadeIn #pcMenu > ul > li.kl-pc-account-menu summary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  list-style: none !important;
}

html body header.wow.fadeIn #pcMenu > ul > li.kl-pc-account-menu summary::-webkit-details-marker {
  display: none !important;
}

html body header.wow.fadeIn #pcMenu > ul > li.kl-pc-account-menu summary::after {
  content: none !important;
}

html body header.wow.fadeIn #pcMenu > ul > li.kl-pc-account-menu details[open] summary::after {
  content: none !important;
}

html body header.wow.fadeIn #pcMenu > ul > li.kl-pc-account-menu details > ul {
  position: absolute !important;
  top: calc(100% + 16px) !important;
  left: 50% !important;
  width: 220px !important;
  margin: 0 !important;
  padding: 10px !important;
  display: grid !important;
  gap: 2px !important;
  list-style: none !important;
  transform: translateX(-50%) !important;
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(47,51,54,.10) !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 34px rgba(47,51,54,.12) !important;
}

html body header.wow.fadeIn #pcMenu > ul > li.kl-pc-account-menu details > ul a {
  display: block !important;
  padding: 11px 12px !important;
  border-radius: 8px !important;
  color: var(--kl-charcoal) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}

html body header.wow.fadeIn #pcMenu > ul > li.kl-pc-account-menu details > ul a:hover,
html body header.wow.fadeIn #pcMenu > ul > li.kl-pc-account-menu details > ul a:focus {
  background: rgba(33,194,241,.10) !important;
}

html body header.wow.fadeIn #pcMenu > ul > li.kl-pc-plan-cta {
  display: flex !important;
  align-items: center !important;
}

html body header.wow.fadeIn #pcMenu > ul > li.kl-pc-plan-cta > a {
  min-width: 118px !important;
  min-height: 34px !important;
  padding: 1px 20px 2px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--kl-blue) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

html body header.wow.fadeIn #pcMenu > ul > li > ul,
html body header.wow.fadeIn #pcMenu > ul > li > ul.faqList {
  display: none !important;
}

html body header.wow.fadeIn .menuBtn {
  display: none !important;
}

/* Footer */
.kl-footer {
  background: var(--kl-footer-bg) !important;
  padding: 48px 20px 36px !important;
  color: #20262b !important;
}

.kl-footer-inner {
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.kl-footer-brand {
  display: flex !important;
  justify-content: center !important;
  margin: 0 0 30px !important;
}

.kl-footer-brand img {
  display: block !important;
  width: 210px !important;
  height: auto !important;
  filter: grayscale(1) brightness(.28) !important;
}

.kl-footer-tagline,
.kl-footer-nav--pc {
  display: none !important;
}

.kl-footer-nav--sp {
  display: block !important;
}

.kl-footer a {
  color: rgba(32,38,43,.72) !important;
  text-decoration: none !important;
}

.kl-footer ul,
.kl-footer li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.kl-footer .kl-acc {
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid rgba(32,38,43,.14) !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

.kl-footer .kl-acc:last-child {
  border-bottom: 1px solid rgba(32,38,43,.14) !important;
}

.kl-footer .kl-acc summary {
  width: 100% !important;
  min-height: 55px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #20262b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  list-style: none !important;
  cursor: pointer !important;
  border: 0 !important;
  background: transparent !important;
}

.kl-footer .kl-acc summary::-webkit-details-marker {
  display: none !important;
}

.kl-footer .kl-acc summary::after {
  content: "+" !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  transform: none !important;
  color: rgba(32,38,43,.62) !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
}

.kl-footer .kl-acc[open] summary::after {
  content: "-" !important;
}

.kl-footer .kl-acc ul {
  margin: 0 !important;
  padding: 0 2px 18px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px 28px !important;
}

.kl-footer .kl-acc a {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.kl-footer-sns {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 28px !important;
  margin: 26px 0 0 !important;
  padding: 0 0 26px !important;
  border-bottom: 1px solid rgba(32,38,43,.08) !important;
}

.kl-footer-sns a {
  width: 28px !important;
  height: 28px !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: rgba(32,38,43,.66) !important;
}

.kl-footer-sns svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

.kl-footer-sns svg,
.kl-footer-sns svg path,
.kl-footer-sns svg rect,
.kl-footer-sns svg circle:not(.ig-dot) {
  fill: none !important;
  stroke: currentColor !important;
}

.kl-footer-sns svg circle.ig-dot {
  fill: currentColor !important;
  stroke: none !important;
}

.kl-footer-legal {
  margin: 18px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px 22px !important;
  color: rgba(32,38,43,.58) !important;
  font-size: 11px !important;
}

.kl-footer-legal::after {
  content: "© Kids Laboratory Inc." !important;
  margin-left: auto !important;
  color: rgba(32,38,43,.5) !important;
  font-size: 11px !important;
}

/* SP drawer */
.kl-sp-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100001 !important;
  background: rgba(31,31,31,.32) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .22s ease !important;
}

.kl-sp-drawer {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: min(84vw, 360px) !important;
  max-width: calc(100vw - 28px) !important;
  height: var(--kl-sp-vvh, 100dvh) !important;
  max-height: var(--kl-sp-vvh, 100dvh) !important;
  z-index: 100002 !important;
  background: var(--kl-drawer-bg) !important;
  color: var(--kl-charcoal) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  transform: translate3d(102%,0,0) !important;
  transition: transform .28s ease !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.kl-sp-drawer[aria-hidden="true"]:not(.is-open) {
  visibility: hidden !important;
  pointer-events: none !important;
  box-shadow: none !important;
  width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  transform: none !important;
}

body.kl-sp-drawer-open .kl-sp-overlay {
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.kl-sp-drawer-open .kl-sp-drawer {
  transform: translate3d(0,0,0) !important;
  box-shadow: -12px 0 28px rgba(47,51,54,.14) !important;
}

#klSpDrawer.kl-v2,
#klSpDrawer.kl-v2 * {
  box-sizing: border-box !important;
}

#klSpDrawer.kl-v2 a {
  color: inherit !important;
  text-decoration: none !important;
}

#klSpDrawer.kl-v2 .kl-sp-drawer__header {
  height: 48px !important;
  padding: 12px 14px 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
}

#klSpDrawer.kl-v2 .kl-sp-drawer__close {
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

#klSpDrawer.kl-v2 .kl-sp-drawer__close-icon,
#klSpDrawer.kl-v2 .kl-sp-drawer__close-icon::before,
#klSpDrawer.kl-v2 .kl-sp-drawer__close-icon::after {
  display: block !important;
  position: relative !important;
  width: 18px !important;
  height: 18px !important;
}

#klSpDrawer.kl-v2 .kl-sp-drawer__close-icon::before,
#klSpDrawer.kl-v2 .kl-sp-drawer__close-icon::after {
  content: "" !important;
  position: absolute !important;
  left: 8px !important;
  top: 1px !important;
  width: 1.5px !important;
  height: 18px !important;
  background: rgba(47,51,54,.72) !important;
}

#klSpDrawer.kl-v2 .kl-sp-drawer__close-icon::before {
  transform: rotate(45deg) !important;
}

#klSpDrawer.kl-v2 .kl-sp-drawer__close-icon::after {
  transform: rotate(-45deg) !important;
}

#klSpDrawer.kl-v2 .kl-sp-drawer__scroll {
  height: calc(var(--kl-sp-vvh, 100dvh) - 48px - 66px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 18px 18px !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}

#klSpDrawer.kl-v2 .kl-v2__brand { margin: 0 0 10px !important; }
#klSpDrawer.kl-v2 .kl-v2__brand-name { display: block !important; color: var(--kl-charcoal) !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: 0 !important; }
#klSpDrawer.kl-v2 .kl-v2__brand-tag { display: block !important; color: var(--kl-muted) !important; font-size: 10px !important; font-weight: 500 !important; line-height: 1.65 !important; letter-spacing: .08em !important; margin: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
#klSpDrawer.kl-v2 .kl-v2__brand-desc { display: block !important; color: rgba(47,51,54,.72) !important; font-size: 10.5px !important; font-weight: 500 !important; line-height: 1.5 !important; margin: 5px 0 0 !important; letter-spacing: 0 !important; }
#klSpDrawer.kl-v2 .kl-v2__sep { display: block !important; height: 1px !important; margin: 9px 0 !important; background: rgba(47,51,54,.10) !important; }
#klSpDrawer.kl-v2 .kl-v2__entry-wrap,
#klSpDrawer.kl-v2 .kl-v2__section,
#klSpDrawer.kl-v2 .kl-v2__section--plans,
#klSpDrawer.kl-v2 .kl-v2__group { width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; }
#klSpDrawer.kl-v2 .kl-v2__entry-lead,
#klSpDrawer.kl-v2 .kl-v2__section-label { display: block !important; color: #188da7 !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.4 !important; margin: 0 0 6px !important; padding: 0 !important; letter-spacing: 0 !important; }
#klSpDrawer.kl-v2 .kl-v2__entry,
#klSpDrawer.kl-v2 .kl-v2__card,
#klSpDrawer.kl-v2 .kl-v2__accordion,
#klSpDrawer.kl-v2 .kl-v2__list-item { background: rgba(255,255,255,.92) !important; border: 0 !important; border-radius: 10px !important; box-shadow: 0 3px 12px rgba(47,51,54,.06) !important; color: var(--kl-charcoal) !important; }
#klSpDrawer.kl-v2 .kl-v2__entry,
#klSpDrawer.kl-v2 .kl-v2__list-item,
#klSpDrawer.kl-v2 .kl-v2__accordion-btn { min-height: 40px !important; height: 40px !important; max-height: 40px !important; margin: 0 !important; padding: 8px 11px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: 100% !important; border: 0 !important; background: rgba(255,255,255,.92) !important; color: var(--kl-charcoal) !important; text-decoration: none !important; font-family: inherit !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.45 !important; letter-spacing: .01em !important; text-align: left !important; appearance: none !important; }
#klSpDrawer.kl-v2 .kl-v2__entry-wrap--first { margin-top: 2px !important; }
#klSpDrawer.kl-v2 .kl-v2__entry--first { position: relative !important; min-height: 52px !important; padding: 11px 13px !important; overflow: hidden !important; border: 1px solid rgba(255,180,55,.55) !important; background: linear-gradient(180deg,#fffaf0 0%,#fff 74%) !important; box-shadow: 0 7px 18px rgba(188,122,24,.13) !important; }
#klSpDrawer.kl-v2 .kl-v2__entry--first::after { position: absolute !important; right: 12px !important; top: 50% !important; width: 7px !important; height: 7px !important; content: "" !important; border-top: 2px solid #d9821f !important; border-right: 2px solid #d9821f !important; transform: translateY(-50%) rotate(45deg) !important; }
#klSpDrawer.kl-v2 .kl-v2__entry-label,
#klSpDrawer.kl-v2 .kl-v2__card-label { display: block !important; margin: 0 !important; color: var(--kl-charcoal) !important; font-size: clamp(11px,3vw,12px) !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: 0 !important; }
#klSpDrawer.kl-v2 .kl-v2__entry--first .kl-v2__entry-label { display: flex !important; align-items: center !important; gap: 6px !important; padding-right: 18px !important; font-size: 14px !important; font-weight: 700 !important; }
#klSpDrawer.kl-v2 .kl-v2__entry-beginner { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 21px !important; height: 21px !important; font-size: 17px !important; line-height: 1 !important; }
#klSpDrawer.kl-v2 .kl-v2__entry-marker { display: inline !important; padding: 0 2px 1px !important; background: linear-gradient(transparent 58%,rgba(255,218,91,.82) 58%) !important; }
#klSpDrawer.kl-v2 .kl-v2__entry-sub,
#klSpDrawer.kl-v2 .kl-v2__card-sub,
#klSpDrawer.kl-v2 .kl-v2__card-badge { display: block !important; color: rgba(47,51,54,.70) !important; font-size: 10.5px !important; font-weight: 500 !important; line-height: 1.45 !important; margin: 3px 0 0 !important; letter-spacing: 0 !important; }
#klSpDrawer.kl-v2 .kl-v2__entry--first .kl-v2__entry-sub { padding-left: 27px !important; padding-right: 18px !important; color: rgba(47,51,54,.74) !important; font-size: 11px !important; }
#klSpDrawer.kl-v2 .kl-v2__card-badge { display: inline-block !important; width: max-content !important; padding: 2px 5px !important; border-radius: 999px !important; background: #fff1e6 !important; color: var(--kl-charcoal) !important; font-size: 10px !important; white-space: nowrap !important; }
#klSpDrawer.kl-v2 .kl-v2__cards { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; grid-auto-rows: auto !important; align-items: start !important; gap: 7px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
#klSpDrawer.kl-v2 .kl-v2__card { display: block !important; min-height: 54px !important; height: auto !important; max-height: 70px !important; overflow: hidden !important; padding: 9px 10px !important; text-decoration: none !important; font-size: 12px !important; line-height: 1.35 !important; }
#klSpDrawer.kl-v2 .kl-v2__group { display: grid !important; grid-auto-rows: min-content !important; align-items: start !important; align-content: start !important; gap: 7px !important; }
#klSpDrawer.kl-v2 .kl-v2__accordion { overflow: hidden !important; }
#klSpDrawer.kl-v2 .kl-v2__accordion-btn > span:first-child { text-align: left !important; }
#klSpDrawer.kl-v2 .kl-v2__accordion-icon { width: 14px !important; height: 14px !important; margin-left: 10px !important; position: relative !important; flex: 0 0 14px !important; color: transparent !important; font-size: 0 !important; }
#klSpDrawer.kl-v2 .kl-v2__accordion-icon::before,
#klSpDrawer.kl-v2 .kl-v2__accordion-icon::after { content: "" !important; position: absolute !important; left: 2px !important; right: 2px !important; top: 6px !important; height: 1.5px !important; background: rgba(47,51,54,.58) !important; }
#klSpDrawer.kl-v2 .kl-v2__accordion-icon::after { transform: rotate(90deg) !important; }
#klSpDrawer.kl-v2 .kl-v2__accordion-btn[aria-expanded="true"] .kl-v2__accordion-icon::after { opacity: 0 !important; }
#klSpDrawer.kl-v2 .kl-v2__accordion-body { display: grid !important; gap: 1px !important; padding: 4px 4px 2px !important; background: #fff !important; }
#klSpDrawer.kl-v2 .kl-v2__accordion-body[hidden] { display: none !important; }
#klSpDrawer.kl-v2 .kl-v2__accordion-link { display: block !important; padding: 7px 9px !important; color: rgba(47,51,54,.78) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.5 !important; text-decoration: none !important; border-top: 0 !important; }
#klSpDrawer.kl-v2 .kl-v2__sep--before-articles { margin-top: 16px !important; }
#klSpDrawer.kl-v2 .kl-v2__text-links { display: grid !important; grid-template-columns: 1fr !important; gap: 6px !important; margin: 0 0 14px !important; }
#klSpDrawer.kl-v2 .kl-v2__text-links a { color: rgba(47,51,54,.82) !important; font-size: 12.5px !important; line-height: 1.5 !important; text-decoration: none !important; }
#klSpDrawer.kl-v2 .kl-v2__age-block { position: relative !important; margin-top: 14px !important; }
#klSpDrawer.kl-v2 .kl-v2__age-block::after { content: "" !important; position: absolute !important; right: -1px !important; bottom: 0 !important; width: 34px !important; height: 33px !important; pointer-events: none !important; background: linear-gradient(90deg,rgba(233,252,252,0),var(--kl-drawer-bg) 86%) !important; }
#klSpDrawer.kl-v2 .kl-v2__age-scroll { display: flex !important; gap: 8px !important; overflow-x: auto !important; padding: 0 26px 2px 2px !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; }
#klSpDrawer.kl-v2 .kl-v2__age-scroll::-webkit-scrollbar { display: none !important; }
#klSpDrawer.kl-v2 .kl-v2__age-scroll a { flex: 0 0 auto !important; min-width: 42px !important; min-height: 30px !important; padding: 7px 12px !important; border-radius: 999px !important; background: rgba(255,255,255,.9) !important; color: rgba(47,51,54,.82) !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.2 !important; text-align: center !important; text-decoration: none !important; }
#klSpDrawer.kl-v2 .kl-v2__chips { display: none !important; }
#klSpDrawer.kl-v2 .kl-v2__cta { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 7px !important; padding: 8px 12px calc(8px + env(safe-area-inset-bottom,0px)) !important; background: rgba(233,252,252,.97) !important; border-top: 1px solid rgba(47,51,54,.08) !important; }
#klSpDrawer.kl-v2 .kl-v2__cta-line,
#klSpDrawer.kl-v2 .kl-v2__cta-phone { min-height: 38px !important; height: 38px !important; max-height: 38px !important; overflow: hidden !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; text-decoration: none !important; font-size: clamp(11px,3vw,12px) !important; font-weight: 600 !important; line-height: 1.2 !important; box-shadow: none !important; }
#klSpDrawer.kl-v2 .kl-v2__cta-line,
#klSpDrawer.kl-v2 .kl-v2__cta-line span,
#klSpDrawer.kl-v2 .kl-v2__cta-line * { background: #06c755 !important; color: #fff !important; fill: #fff !important; }
#klSpDrawer.kl-v2 .kl-v2__cta-phone { background: #fff !important; color: var(--kl-charcoal) !important; flex-direction: column !important; }
#klSpDrawer.kl-v2 .kl-v2__cta-note { display: none !important; }
#klSpDrawer.kl-v2 .kl-v2__cta-phone-note { display: block !important; color: rgba(47,51,54,.56) !important; font-size: 9.5px !important; font-weight: 600 !important; margin: 0 !important; }

@media (max-width: 768px) and (max-height: 760px) {
  #klSpDrawer.kl-v2 .kl-sp-drawer__header {
    height: 40px !important;
    padding-top: 8px !important;
  }

  #klSpDrawer.kl-v2 .kl-sp-drawer__scroll {
    height: calc(var(--kl-sp-vvh, 100dvh) - 40px - 58px) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 14px !important;
  }

  #klSpDrawer.kl-v2 .kl-v2__brand { margin-bottom: 8px !important; }
  #klSpDrawer.kl-v2 .kl-v2__brand-name { font-size: 17px !important; }
  #klSpDrawer.kl-v2 .kl-v2__brand-tag { line-height: 1.45 !important; }
  #klSpDrawer.kl-v2 .kl-v2__brand-desc { margin-top: 4px !important; line-height: 1.4 !important; }
  #klSpDrawer.kl-v2 .kl-v2__sep { margin: 8px 0 !important; }
  #klSpDrawer.kl-v2 .kl-v2__entry-lead,
  #klSpDrawer.kl-v2 .kl-v2__section-label { margin-bottom: 6px !important; }
  #klSpDrawer.kl-v2 .kl-v2__cards { gap: 7px !important; }
  #klSpDrawer.kl-v2 .kl-v2__card { min-height: 52px !important; max-height: 66px !important; padding: 8px 10px !important; }
  #klSpDrawer.kl-v2 .kl-v2__entry,
  #klSpDrawer.kl-v2 .kl-v2__list-item,
  #klSpDrawer.kl-v2 .kl-v2__accordion-btn { min-height: 38px !important; height: 38px !important; max-height: 38px !important; padding: 7px 11px !important; font-size: 13px !important; line-height: 1.4 !important; }
  #klSpDrawer.kl-v2 .kl-v2__group { gap: 7px !important; }
  #klSpDrawer.kl-v2 .kl-v2__sep--before-articles { margin-top: 12px !important; }
  #klSpDrawer.kl-v2 .kl-v2__text-links { gap: 5px !important; margin-bottom: 12px !important; }
  #klSpDrawer.kl-v2 .kl-v2__age-block { margin-top: 12px !important; }
  #klSpDrawer.kl-v2 .kl-v2__cta {
    padding-top: 8px !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #klSpDrawer.kl-v2 .kl-v2__cta-line,
  #klSpDrawer.kl-v2 .kl-v2__cta-phone {
    min-height: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
  }
}

@media (max-width: 768px) {
  html { scroll-padding-top: 76px !important; }
  [id] { scroll-margin-top: 76px; }

  html body div#wrapper.kidslabWrap { padding-top: 64px !important; }
  html body #Contents { padding-top: 76px !important; }

  html body header.wow.fadeIn,
  html body .kidslabWrap > #scroll-content > header.wow.fadeIn {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
  }

  html body header.wow.fadeIn #pcMenu,
  html body header.wow.fadeIn .spHide,
  html body .kidslabWrap > #scroll-content > header.wow.fadeIn #pcMenu,
  html body .kidslabWrap > #scroll-content > header.wow.fadeIn .spHide {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  html body header.wow.fadeIn .inner,
  html body .kidslabWrap > #scroll-content > header.wow.fadeIn .inner {
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 7px 14px 7px 20px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    overflow: visible !important;
  }

  html body header.wow.fadeIn .logoArea {
    align-items: flex-start !important;
    width: 184px !important;
    max-width: 184px !important;
    gap: 6px !important;
    margin: 0 !important;
    text-align: left !important;
  }

  html body header.wow.fadeIn .logoSub {
    max-width: 184px !important;
    font-size: 0 !important;
    letter-spacing: .06em !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }

  html body header.wow.fadeIn .logoSub::before {
    content: "おもちゃサブスク・知育玩具レンタル" !important;
    font-size: 9.5px !important;
  }

  html body header.wow.fadeIn .logoMain img {
    width: 184px !important;
    max-width: 184px !important;
  }

  html body header.wow.fadeIn .menuBtn,
  html body header.wow.fadeIn .inner .menuBtn.pcHide {
    display: block !important;
    position: absolute !important;
    left: auto !important;
    right: 15px !important;
    top: 50% !important;
    width: 36px !important;
    height: 36px !important;
    margin-top: -18px !important;
    transform: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html body header.wow.fadeIn .menuBtn::before,
  html body header.wow.fadeIn .menuBtn::after,
  html body header.wow.fadeIn .inner .menuBtn.pcHide::before,
  html body header.wow.fadeIn .inner .menuBtn.pcHide::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    width: 20px !important;
    height: 1.5px !important;
    background: var(--kl-charcoal) !important;
    left: 8px !important;
  }

  html body header.wow.fadeIn .menuBtn::before,
  html body header.wow.fadeIn .inner .menuBtn.pcHide::before {
    top: 11px !important;
    box-shadow: 0 6px 0 var(--kl-charcoal) !important;
  }

  html body header.wow.fadeIn .menuBtn::after,
  html body header.wow.fadeIn .inner .menuBtn.pcHide::after {
    top: 23px !important;
  }

  .kl-footer {
    padding: 38px 20px 82px !important;
  }

  .kl-footer-inner {
    max-width: 420px !important;
  }

  .kl-footer-brand {
    margin-bottom: 28px !important;
  }

  .kl-footer-brand img {
    width: 184px !important;
  }

  .kl-footer .kl-acc ul {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px 18px !important;
  }

  .kl-footer-legal {
    flex-direction: column !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
  }

  .kl-footer-legal::after {
    margin-left: 0 !important;
    margin-top: 4px !important;
  }
}

/* ============================================================
 * Header cart resume navigation
 * 2026-09-01: PC / narrow PC / SP common behavior
 * ============================================================ */
.kl-sp-cart {
  display: none !important;
}

.kl-cart-label--resume {
  display: none !important;
}

html.kl-has-cart-resume .kl-cart-label--default {
  display: none !important;
}

html.kl-has-cart-resume .kl-cart-label--resume {
  display: inline !important;
}

@media screen and (min-width: 769px) {
  html body header.wow.fadeIn #pcMenu > ul,
  html body .kidslabWrap > #scroll-content > header.wow.fadeIn #pcMenu > ul {
    gap: 20px !important;
  }

  html body header.wow.fadeIn #pcMenu > ul > li.kl-pc-cart-cta > a,
  html body .kidslabWrap > #scroll-content > header.wow.fadeIn #pcMenu > ul > li.kl-pc-cart-cta > a {
    gap: 6px !important;
    border: 1px solid #21c2f1 !important;
    background: #fff !important;
    color: #128eb5 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }

  html body header.wow.fadeIn #pcMenu > ul > li.kl-pc-cart-cta > a:hover,
  html body header.wow.fadeIn #pcMenu > ul > li.kl-pc-cart-cta > a:focus-visible,
  html body .kidslabWrap > #scroll-content > header.wow.fadeIn #pcMenu > ul > li.kl-pc-cart-cta > a:hover,
  html body .kidslabWrap > #scroll-content > header.wow.fadeIn #pcMenu > ul > li.kl-pc-cart-cta > a:focus-visible {
    background: #eefdff !important;
  }

  .kl-pc-cart-cta svg {
    display: block !important;
    flex: 0 0 17px !important;
    width: 17px !important;
    height: 17px !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
  html body header.wow.fadeIn .inner,
  html body .kidslabWrap > #scroll-content > header.wow.fadeIn .inner {
    width: calc(100% - 32px) !important;
    gap: 18px !important;
  }

  html body header.wow.fadeIn .logoArea,
  html body .kidslabWrap > #scroll-content > header.wow.fadeIn .logoArea {
    flex: 0 0 245px !important;
    width: 245px !important;
    max-width: 245px !important;
  }

  html body header.wow.fadeIn #pcMenu,
  html body .kidslabWrap > #scroll-content > header.wow.fadeIn #pcMenu {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    margin-left: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body header.wow.fadeIn #pcMenu > ul,
  html body .kidslabWrap > #scroll-content > header.wow.fadeIn #pcMenu > ul {
    gap: 0 !important;
  }

  html body header.wow.fadeIn #pcMenu > ul > li:not(.kl-pc-cart-cta),
  html body .kidslabWrap > #scroll-content > header.wow.fadeIn #pcMenu > ul > li:not(.kl-pc-cart-cta) {
    display: none !important;
  }

  html body header.wow.fadeIn .menuBtn,
  html body header.wow.fadeIn .inner .menuBtn.pcHide,
  html body .kidslabWrap > #scroll-content > header.wow.fadeIn .menuBtn,
  html body .kidslabWrap > #scroll-content > header.wow.fadeIn .inner .menuBtn.pcHide {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 0 0 -6px !important;
    transform: none !important;
    background: transparent !important;
  }

  html body header.wow.fadeIn .menuBtn::before,
  html body header.wow.fadeIn .inner .menuBtn.pcHide::before,
  html body .kidslabWrap > #scroll-content > header.wow.fadeIn .menuBtn::before,
  html body .kidslabWrap > #scroll-content > header.wow.fadeIn .inner .menuBtn.pcHide::before {
    content: "" !important;
    position: static !important;
    display: block !important;
    width: 20px !important;
    height: 1.5px !important;
    border-radius: 999px !important;
    background: #2f3336 !important;
    box-shadow: 0 -7px 0 #2f3336, 0 7px 0 #2f3336 !important;
  }

  html body header.wow.fadeIn .menuBtn::after,
  html body header.wow.fadeIn .inner .menuBtn.pcHide::after,
  html body .kidslabWrap > #scroll-content > header.wow.fadeIn .menuBtn::after,
  html body .kidslabWrap > #scroll-content > header.wow.fadeIn .inner .menuBtn.pcHide::after {
    content: none !important;
  }
}

@media screen and (max-width: 768px) {
  html body header.wow.fadeIn .kl-sp-cart,
  html body .kidslabWrap > #scroll-content > header.wow.fadeIn .kl-sp-cart {
    position: absolute !important;
    top: 50% !important;
    right: 62px !important;
    z-index: 10001 !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    color: #2f3336 !important;
    background: transparent !important;
    border-radius: 12px !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }

  html body header.wow.fadeIn .menuBtn,
  html body header.wow.fadeIn .inner .menuBtn.pcHide,
  html body .kidslabWrap > #scroll-content > header.wow.fadeIn .menuBtn,
  html body .kidslabWrap > #scroll-content > header.wow.fadeIn .inner .menuBtn.pcHide {
    right: 20px !important;
  }

  .kl-sp-cart svg {
    display: block !important;
    width: 23px !important;
    height: 23px !important;
    margin: 0 !important;
  }

  .kl-sp-cart-label {
    display: none !important;
  }

  .kl-cart-resume-badge {
    position: absolute !important;
    top: 2px !important;
    right: 4px !important;
    display: none !important;
    width: 8px !important;
    height: 8px !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    background: #ff7b00 !important;
  }

  html.kl-has-cart-resume .kl-cart-resume-badge {
    display: block !important;
  }
}