@import "./00.container-desktop.css";
@import "./01.sec-kv.css";
@import "./02.sec-nav.css";
@import "./03.sec-worry.css";
@import "./04.sec-carousel.css";
@import "./05.sec-pickup.css";
@import "./06.sec-lineup.css";

:root {
  --header-height: 90;

  @media (max-width: 740px) {
    --header-height: 60;
  }
}

html {
  scroll-behavior: smooth;
  scroll-padding: calc(var(--header-height) * 1px);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

#page-lee-kids-sunglass {
  --font-noto-sans: "Noto Sans JP", sans-serif;
  --font-lato: Avenir, "Lato", sans-serif;

  --color-blue: #0081cc;
  --color-blue-light: #2895d4;
  --mobile-container-width: 390;

  font-family: var(--font-noto-sans);
  -webkit-text-size-adjust: auto;
  visibility: hidden;
  /* スクロールがコンテンツの末尾に達した際、desktopコンテンツをコンテンツ下端に固定するために必要*/
  position: relative;

  &[data-init="true"] {
    visibility: visible;
  }

  [data-js-inview="fade-up"] {
    opacity: 0;

    &.is-viewed {
      animation: lee-kids-sunglass-fade-in-up 0.5s ease forwards;
    }
  }
}

#page-lee-kids-sunglass .container-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background:
    #c9d3dc url(/cms/contents/lp/lee-kids-sunglass/img/bg_desktop.svg) no-repeat
    center / cover;
}

#page-lee-kids-sunglass .container-mobile {
  position: relative;
  max-width: calc(var(--mobile-container-width) * 1px);
  margin: 0 auto;
  overflow: hidden;
  zoom: var(--zoom-scale-desktop);
  background-color: #fff;

  @media (width <= 740px) {
    max-width: none;
    zoom: var(--zoom-scale-mobile);
  }

  img {
    @media (width <= 740px) {
      width: auto;
    }
  }
}

.embla__viewport {
  overflow: hidden;
}

.embla__container {
  display: flex;
  column-gap: 20px;
  margin: 0 26px;
  touch-action: pan-y pinch-zoom;
}

.embla__slide {
  flex: 0 0 300px;
  min-width: 0;
}

.breadcrumb {
  position: relative;
  z-index: 1;

  .forcms_block:has(&) {
    padding-bottom: 10px;
    margin-bottom: 0 !important;
    background: #fff;
  }
}

@keyframes lee-kids-sunglass-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lee-kids-sunglass-sun {
  0% {
    transform: rotate(30deg);
  }
  50% {
    transform: rotate(30deg);
  }
  51% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes lee-kids-sunglass-swaying {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes lee-kids-sunglass-carousel-progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}