@charset "UTF-8";

#indoor_comfort_glasses {
  --color-primary: #0056c4;
  --color-secondary: #ed7632;
  --color-background: #ffffff;
  --header-height: 74px;
  --breadcrumb-height: 42px;
  --header-height-sp: 66px;
  --breadcrumb-height-sp: 40px;
  --header-height-tb: 63px;
  --breadcrumb-height-tb: 42px;
  position: relative;
  @media screen and (max-width: 767px) {
  }
  @media screen and (min-width: 768px) {
    @media screen and (max-width: 1024px) {
    }
  }
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -2;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    transform: translate3d(-50%, -50%, 0);
  }
}

/*
keyframes
---------------------------------------------- */
@keyframes scrollArrowFade {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  28% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(18px);
  }
}

/*
keyvisual
---------------------------------------------- */
#kv {
  --border-color: var(--color-primary);
  position: sticky;
  max-width: 1360px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
  @media screen and (max-width: 767px) {
    --radius-sp: 21px;
    --border-size-sp: 4px;
    --inner-radius-sp: calc(var(--radius-sp) - var(--border-size-sp));
    --inner-concave-radius-sp: calc(var(--radius-sp) + var(--border-size-sp));
    --notch-x-sp: 120px;
    --notch-y-sp: 64px;
    top: var(--header-height-sp);
    height: calc((480 / 700) * 100vw);
    padding: 20px;
  }
  @media screen and (min-width: 768px) {
    --radius: 40px;
    --border-size: 6px;
    --inner-radius: calc(var(--radius) - var(--border-size));
    --inner-concave-radius: calc(var(--radius) + var(--border-size));
    --notch-x: 196px;
    --notch-y: 88px;
    top: var(--header-height);
    height: calc(100lvh - var(--header-height) - var(--breadcrumb-height));
    padding: 40px;
    @media screen and (max-width: 1024px) {
      top: var(--header-height-tb);
      height: calc(100lvh - var(--header-height-tb) - var(--breadcrumb-height-tb));
    }
  }
  &::before {
    content: 'HOYA';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    height: 1px;
    background-image: url(../img/logo.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: clip;
    @media screen and (max-width: 767px) {
      top: calc(24px - var(--border-size-sp) + var(--radius-sp));
      left: calc(24px + var(--radius-sp));
      width: 72px;
      padding-top: 17.5px;
    }
    @media screen and (min-width: 768px) {
      top: calc(32px - var(--border-size) + var(--radius));
      left: calc(32px + var(--radius));
      width: 130px;
      padding-top: 32px;
    }
  }
  .picture {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--border-color);
    @media screen and (max-width: 767px) {
      clip-path: shape(
        from calc(var(--notch-x-sp) + var(--radius-sp)) 0,
        hline to calc(100% - var(--radius-sp)),
        arc to 100% var(--radius-sp) of var(--radius-sp) cw,
        vline to calc(100% - var(--radius-sp)),
        arc to calc(100% - var(--radius-sp)) 100% of var(--radius-sp) cw,
        hline to var(--radius-sp),
        arc to 0 calc(100% - var(--radius-sp)) of var(--radius-sp) cw,
        vline to calc(var(--notch-y-sp) + var(--radius-sp)),
        arc to var(--radius-sp) var(--notch-y-sp) of var(--radius-sp) cw,
        hline to calc(var(--notch-x-sp) - var(--radius-sp)),
        arc to var(--notch-x-sp) calc(var(--notch-y-sp) - var(--radius-sp))
          of var(--radius-sp) ccw,
        vline to var(--radius-sp),
        arc to calc(var(--notch-x-sp) + var(--radius-sp)) 0
          of var(--radius-sp) cw,
        close
      );
    }
    @media screen and (min-width: 768px) {
      clip-path: shape(
        from calc(var(--notch-x) + var(--radius)) 0,
        hline to calc(100% - var(--radius)),
        arc to 100% var(--radius) of var(--radius) cw,
        vline to calc(100% - var(--radius)),
        arc to calc(100% - var(--radius)) 100% of var(--radius) cw,
        hline to var(--radius),
        arc to 0 calc(100% - var(--radius)) of var(--radius) cw,
        vline to calc(var(--notch-y) + var(--radius)),
        arc to var(--radius) var(--notch-y) of var(--radius) cw,
        hline to calc(var(--notch-x) - var(--radius)),
        arc to var(--notch-x) calc(var(--notch-y) - var(--radius))
          of var(--radius) ccw,
        vline to var(--radius),
        arc to calc(var(--notch-x) + var(--radius)) 0
          of var(--radius) cw,
        close
      );
    }
    > img {
      position: absolute;
      display: block;
      object-fit: cover;
      @media screen and (max-width: 767px) {
        inset: var(--border-size-sp);
        width: calc(100% - var(--border-size-sp) - var(--border-size-sp));
        height: calc(100% - var(--border-size-sp) - var(--border-size-sp));
        clip-path: shape(
          from calc(var(--notch-x-sp) + var(--inner-radius-sp)) 0,
          hline to calc(100% - var(--inner-radius-sp)),
          arc to 100% var(--inner-radius-sp)
            of var(--inner-radius-sp) cw,
          vline to calc(100% - var(--inner-radius-sp)),
          arc to calc(100% - var(--inner-radius-sp)) 100%
            of var(--inner-radius-sp) cw,
          hline to var(--inner-radius-sp),
          arc to 0 calc(100% - var(--inner-radius-sp))
            of var(--inner-radius-sp) cw,
          vline to calc(var(--notch-y-sp) + var(--inner-radius-sp)),
          arc to var(--inner-radius-sp) var(--notch-y-sp)
            of var(--inner-radius-sp) cw,
          hline to calc(var(--notch-x-sp) - var(--inner-concave-radius-sp)),
          arc to var(--notch-x-sp)
            calc(var(--notch-y-sp) - var(--inner-concave-radius-sp))
            of var(--inner-concave-radius-sp) ccw,
          vline to var(--inner-radius-sp),
          arc to calc(var(--notch-x-sp) + var(--inner-radius-sp)) 0
            of var(--inner-radius-sp) cw,
          close
        );
      }
      @media screen and (min-width: 768px) {
        inset: var(--border-size);
        width: calc(100% - var(--border-size) - var(--border-size));
        height: calc(100% - var(--border-size) - var(--border-size));
        clip-path: shape(
          from calc(var(--notch-x) + var(--inner-radius)) 0,
          hline to calc(100% - var(--inner-radius)),
          arc to 100% var(--inner-radius)
            of var(--inner-radius) cw,
          vline to calc(100% - var(--inner-radius)),
          arc to calc(100% - var(--inner-radius)) 100%
            of var(--inner-radius) cw,
          hline to var(--inner-radius),
          arc to 0 calc(100% - var(--inner-radius))
            of var(--inner-radius) cw,
          vline to calc(var(--notch-y) + var(--inner-radius)),
          arc to var(--inner-radius) var(--notch-y)
            of var(--inner-radius) cw,
          hline to calc(var(--notch-x) - var(--inner-concave-radius)),
          arc to var(--notch-x)
            calc(var(--notch-y) - var(--inner-concave-radius))
            of var(--inner-concave-radius) ccw,
          vline to var(--inner-radius),
          arc to calc(var(--notch-x) + var(--inner-radius)) 0
            of var(--inner-radius) cw,
          close
        );
      }
    }
  }
  .scroll-cue {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 1;
    display: grid;
    justify-items: center;
    transform: translate3d(0, -50%, 0);
    pointer-events: none;
    @media screen and (max-width: 767px) {
      display: none;
    }
    @media screen and (min-width: 768px) {
      gap: 14px;
      width: 11px;
      @media screen and (max-width: 1366px) {
        left: 15px;
      }
    }
  }
  .scroll-cue__text {
    @media screen and (max-width: 767px) {
    }
    @media screen and (min-width: 768px) {
      width: 11px;
      @media screen and (max-width: 1024px) {
      }
    }
  }
  .scroll-cue__arrow {
    margin-left: -2px;
    animation: scrollArrowFade 2s ease-in-out infinite;
    @media screen and (max-width: 767px) {
    }
    @media screen and (min-width: 768px) {
      max-width: 6px;
      margin-top: 8px;
      @media screen and (max-width: 1024px) {
      }
    }
  }
}

/*
typography
---------------------------------------------- */
#typography {
  position: sticky;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  align-items: end;
  margin-right: auto;
  margin-left: auto;
  @media screen and (max-width: 767px) {
    top: 30px;
    width: 100%;
    margin-bottom: calc((174 / 746) * -100vw);
    padding-left: 20px;
    transform: translate3d(0, calc(-100% - 40px), 0);
  }
  @media screen and (min-width: 768px) {
    top: 30px;
    bottom: 82px;
    width: 100%;
    max-width: 1360px;
    height: 90px;
    margin-bottom: clamp(-84lvh, -84lvh, -650px);
    padding-left: 40px;
    @media screen and (max-width: 1024px) {
      width: initial;
      height: 65px;
      top: 42px;
      bottom: 81px;
    }
  }
  .picture {
    .image {
      height: auto;
      @media screen and (max-width: 767px) {
      }
      @media screen and (min-width: 768px) {
        min-width: calc((1360 / 1440) * 100vw);
        @media screen and (max-width: 1280px) {
        }
      }
    }
  }
}

/*
core
---------------------------------------------- */
#core {
  max-width: 1360px;
  min-height: 3000px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
  overflow: clip;
  @media screen and (max-width: 767px) {
    margin-bottom: 20px;
    padding-right: 20px;
    padding-left: 20px;
  }
  @media screen and (min-width: 768px) {
    margin-bottom: 56px;
    padding-right: 40px;
    padding-left: 40px;
    @media screen and (max-width: 1280px) {
      margin-bottom: calc((56 / 1280) * 100vw);
    }
  }
  :where(.core-content) {
    position: relative;
    box-sizing: border-box;
    @media screen and (max-width: 767px) {
    }
    @media screen and (min-width: 768px) {
      max-width: 640px;
      margin-left: auto;
      margin-right: 56px;
      padding-right: 64px;
      padding-left: 64px;
      @media screen and (max-width: 1280px) {
        max-width: calc((640 / 1280) * 100vw);
        margin-right: calc((56 / 1280) * 100vw);
        padding-right: max(32px, min(calc((32 / 1280) * 100vw), 20px));
        padding-left: max(32px, min(calc((32 / 1280) * 100vw), 20px));
      }
    }
    &:last-child {
      border-radius: 0 0 21px 21px;
    }
  }
}

/*
floating
---------------------------------------------- */
#floating {
  box-sizing: border-box;
  position: fixed;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
  @media screen and (max-width: 767px) {
    bottom: 30px;
    left: -25px;
    z-index: 1000;
  }
  @media screen and (min-width: 768px) {
    bottom: 40px;
    left: 50%;
    z-index: 2;
    width: 100%;
    max-width: 1360px;
    padding-right: 40px;
    padding-left: 40px;
    transform: translate3d(-50%, 0, 0);
    @media screen and (max-width: 1024px) {
    }
  }
  &:where(.is-visible) {
    opacity: 1;
    pointer-events: auto;
  }
  &:where(.is-content5-reached) {
    z-index: -1;
    opacity: 0;
  }
  :where(.button) {
    margin: initial;
    @media screen and (max-width: 767px) {
    }
    @media screen and (min-width: 768px) {
      margin-left: -24px;
      transform: translate3d(-100%, 0, 0);
      @media screen and (max-width: 1280px) {
        margin-left: 8px;
      }
      @media screen and (max-width: 1024px) {
      }
    }
  }
}

/*
shop-list
---------------------------------------------- */
#shop {
  position: relative;
  z-index: 10;
  margin-top: 0;
  background-color: #ffffff;
  @media screen and (max-width: 767px) {
    padding-top: 50px;
    scroll-margin-top: var(--header-height-sp);
  }
  @media screen and (min-width: 768px) {
    padding-top: 100px;
    scroll-margin-top: var(--header-height);
    @media screen and (max-width: 1024px) {
      scroll-margin-top: var(--header-height-tb);
    }
  }
}

/*
post-list
---------------------------------------------- */
#post {
  position: relative;
  z-index: 10;
  margin-top: 0;
  background-color: #ffffff;
  @media screen and (max-width: 767px) {
    padding-top: 35px;
  }
  @media screen and (min-width: 768px) {
    padding-top: 70px;
    @media screen and (max-width: 1024px) {
    }
  }
}

/*
catch-text
---------------------------------------------- */
#catch-text {
  position: sticky;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc((80 / 1280) * 100%);
  background-color: #fff;
  @media screen and (max-width: 767px) {
    top: calc(var(--header-height-sp) + 20px);
    border-radius: 20px 20px;
    height: calc(((480 / 700) * 100vw) - 40px);
    margin-bottom: 20px;
  }
  @media screen and (min-width: 768px) {
    top: 22lvh;
    border-radius: 21px 21px;
    min-height: calc(84lvh);
    @media screen and (max-width: 1024px) {
      top: 19lvh;
    }
  }
  .picture {
    @media screen and (max-width: 767px) {
    }
    @media screen and (min-width: 768px) {
      margin-top: -30lvh;
      @media screen and (max-width: 1024px) {
      }
    }
    .image {
      max-width: initial;
    }
  }
}

/*
break
---------------------------------------------- */
:where(.br) {
  &[data-module="sp"] {
    @media screen and (max-width: 767px) {
    }
    @media screen and (min-width: 768px) {
      display: none;
      @media screen and (max-width: 1024px) {
      }
    }
  }
  &[data-module="pc"] {
    @media screen and (max-width: 767px) {
      display: none;
    }
    @media screen and (min-width: 768px) {
      @media screen and (max-width: 1024px) {
        display: none;
      }
    }
  }
  &[data-module="tb"] {
    @media screen and (max-width: 767px) {
    }
    @media screen and (min-width: 768px) {
      @media screen and (max-width: 1024px) {
        display: none;
      }
    }
  }
}

/*
picture
---------------------------------------------- */
:where(.picture) {
  display: block;
  width: 100%;
  .image {
    max-width: initial;
    width: 100%;
  }
}

/*
header group
---------------------------------------------- */
:where(.hgroup) {
  &[data-module="modal"] {
    @media screen and (max-width: 767px) {
      margin-bottom: 20px;
    }
    @media screen and (min-width: 768px) {
      margin-bottom: 40px;
      @media screen and (max-width: 1024px) {
      }
    }
    .hgroup-heading {
      font-weight: bold;
      color: inherit;
      line-height: 1.5;
      text-align: center;
      @media screen and (max-width: 767px) {
        font-size: max(28px, min(calc((28 / 767) * 100vw), 28px));
        margin-bottom: 20px;
      }
      @media screen and (min-width: 768px) {
        font-size: 44px;
        margin-bottom: 40px;
        @media screen and (max-width: 1024px) {
          font-size: max(44px, min(calc((44 / 1024) * 100vw), 28px));
        }
      }
      &::before {
        content: 'Room';
        display: block;
        margin: 0 auto;
        background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22770%22%20height%3D%22227%22%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22m769.975%20226.985-9.875-.885.843-164.324L385.279%209.6%209.174%2061.787%209%20226.1H0L-.013%2053.476%20385.241-.015l384.744%2053.466zM83.936%20200.7l-.092-101.529c-2.645-6.709-14.359-8.023-19.849-7.775-5.86-.008-8.989%202.483-7.246-6.262l117.109.3c67.642.557%2073.641%2057.249%201.036%2065.081l34.444%2044.392c12.27%2015.813%2032.417%209.803%2031.73%2015.396.259%205.546-51.365%201.901-54.361%202.991l-47.35-61.089c-7.609-.823-14.817-.812-23.074-.38l.371%2049.333c6.3%206.15%2017.485%206.76%2025.718%206.417%201.36-.011.971%204.27.633%205.491l-83.743.174c-12.412-10.744%2012.477-.01%2024.674-12.54m32.546-54.989c30.755-.953%2063.211%205.808%2074.204-20.34%2010.114-38.804-40.397-34.25-65.632-33.516-4.913%201.805-8.819%205.803-8.796%2010.385zm238.581%2051.322c-36.028%2044.821-142.957%205.982-96.735-51.676%2035.383-42.219%20141.021-6.181%2096.735%2051.676m-69.257%205.865c8.162%2011.546%2033.464%2012.419%2041.356-.622%2012.489-22.922%2012.373-72.354-21.663-70.284-14.264.099-23.792%207.602-25.36%2022.24-1.701%2015.874-4.515%2034.263%205.667%2048.666m192.755.793c-41.479%2036.714-137.72-9.441-86.207-61.473%2042.88-41.272%20146.281%207.746%2086.207%2061.473m-67.759-13.978c2.332%2026.924%2046.437%2030.693%2051.802%203.206%204.745-23.779%205.197-64.237-28.036-60.601-29.099.053-25.804%2036.738-23.766%2057.395m139.4-62.891%201.647%2011.015c21.386-14.465%2059.648-17.279%2074.447%204.593%2017.419-18.265%2067.179-26.521%2074.317%205.637-.003.002.999%2051.028.999%2051.028.104%205.287%208.964%208.441%2013.465%208.456%205.127.116%206.875-1.362%205.314%205.462l-46.84.252-.11-59.329c-.012-6.219-4.245-11.54-10.658-13.472-11.864-3.574-32.415%201.351-35.269%2015.629-2.932%2014.665-1.639%2046.45%201.617%2048.378%203.66%202.107%209.529%202.779%2013.661%203.105%201.35.141.833%204.842.064%205.554l-44.705.053-.377-63.517c-.099-16.706-40.159-14.136-44.725%201.342-4.378%2014.836-1.053%2031.973-1.523%2048.484-.112%203.958%208.53%207.922%2012.134%207.896%205.342-.108%208.114-.993%204.991%205.764l-63.328-.07-.974-4.585c-.371-1.749%2018.422-.545%2018.397-7.329l-.221-59.144c-.014-3.534-10.318-5.195-13.678-4.344-4.665%201.204-6.316%202.602-5.726-3.693z%22%2F%3E%3C%2Fsvg%3E');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        overflow: hidden;
        @media screen and (max-width: 767px) {
          width: 120px;
          height: 1px;
          margin-bottom: 16px;
          padding-top: 29px;
        }
        @media screen and (min-width: 768px) {
          width: 196px;
          height: 1px;
          margin-bottom: 32px;
          padding-top: 58px;
          @media screen and (max-width: 1024px) {
          }
        }
      }
      &::after {
        content: '';
        display: block;
        width: 1px;
        height: 0;
        margin-right: auto;
        margin-left: auto;
        background-color: var(--color-background);
        @media screen and (max-width: 767px) {
          margin-top: 20px;
          padding-top: 20px;
        }
        @media screen and (min-width: 768px) {
          margin-top: 40px;
          padding-top: 40px;
          @media screen and (max-width: 1024px) {
          }
        }
      }
    }
    .hgroup-paragraph {
      color: inherit;
      line-height: 2;
      text-align: center;
      @media screen and (max-width: 767px) {
        font-size: max(14px, min(calc((14 / 767) * 100vw), 14px));
      }
      @media screen and (min-width: 768px) {
        font-size: 16px;
        @media screen and (max-width: 1024px) {
          font-size: max(16px, min(calc((16 / 1024) * 100vw), 16px));
        }
      }
    }
  }
}

/*
heading title
---------------------------------------------- */
:where(.heading) {
  /* main */
  &[data-module="main"] {
    font-weight: bold;
    color: var(--color-primary);
    line-height: 1.5;
    @media screen and (max-width: 767px) {
      font-size: max(28px, min(calc((28 / 767) * 100vw), 28px));
      margin-bottom: 24px;
    }
    @media screen and (min-width: 768px) {
      font-size: 44px;
      margin-bottom: 40px;
      @media screen and (max-width: 1280px) {
        font-size: max(28px, min(calc((44 / 1280) * 100vw), 44px));
      }
    }
  }
  /* sub */
  &[data-module="sub"] {
    font-weight: bold;
    color: var(--color-background);
    line-height: 1.5;
    text-align: center;
    @media screen and (max-width: 767px) {
      font-size: max(28px, min(calc((28 / 767) * 100vw), 28px));
      margin-bottom: 24px;
    }
    @media screen and (min-width: 768px) {
      font-size: 44px;
      margin-bottom: 40px;
      @media screen and (max-width: 1280px) {
        font-size: max(28px, min(calc((44 / 1280) * 100vw), 44px));
      }
    }
    .small {
      font-size: 88%;
    }
  }
}

/*
paragraph
---------------------------------------------- */
:where(.paragraph) {
  color: inherit;
  line-height: 2.2;
  @media screen and (max-width: 767px) {
    font-size: max(14px, min(calc((14 / 767) * 100vw), 14px));
  }
  @media screen and (min-width: 768px) {
    font-size: 16px;
    @media screen and (max-width: 1280px) {
      font-size: max(14px, min(calc((16 / 1280) * 100vw), 16px));
    }
  }
  &[data-module="note"] {
    line-height: 1.5;
    &:nth-of-type(1) {
      @media screen and (max-width: 767px) {
        margin-top: 4px;
      }
      @media screen and (min-width: 768px) {
        margin-top: 8px;
        @media screen and (max-width: 1024px) {
        }
      }
    }
    .small {
      @media screen and (max-width: 767px) {
        font-size: max(12px, min(calc((12 / 767) * 100vw), 12px));
      }
      @media screen and (min-width: 768px) {
        font-size: 14px;
        @media screen and (max-width: 1280px) {
          font-size: max(12px, min(calc((14 / 1280) * 100vw), 14px));
        }
      }
    }
  }
  &[data-module="scene"] {
    box-sizing: border-box;
    width: 1em;
    height: 1px;
    padding-top: 1em;
    background-image: url(../img/icon-star.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: clip;
    @media screen and (max-width: 767px) {
      font-size: max(16px, min(calc((16 / 767) * 100vw), 16px));
    }
    @media screen and (min-width: 768px) {
      font-size: 28px;
      @media screen and (max-width: 1280px) {
        font-size: max(16px, min(calc((28 / 1024) * 100vw), 28px));
      }
    }
  }
}


/*
section
---------------------------------------------- */
:where(.section) {
  .section-inner {
    + .section-inner {
      margin-top: 48px;
    }
  }
  &[data-module="content-01"] {
    position: relative;
    z-index: 10;
    background-color: var(--color-background);
    @media screen and (max-width: 767px) {
      border-radius: 21px 21px 0 0;
      padding: 40px 20px;
    }
    @media screen and (min-width: 768px) {
      padding-top: 80px;
      padding-bottom: 80px;
      @media screen and (max-width: 1024px) {
        padding-right: max(64px, min(calc((64 / 1024) * 100vw), 40px));
        padding-left: max(64px, min(calc((64 / 1024) * 100vw), 40px));
      }
    }
    &.is-reached {
      border-radius: 21px 21px 0 0;
    }
  }
  &[data-module="content-02"] {
    position: relative;
    z-index: 10;
    background-color: var(--color-primary);
    * {
      color: var(--color-background);
    }
    @media screen and (max-width: 767px) {
      padding: 40px 20px;
    }
    @media screen and (min-width: 768px) {
      padding-top: 80px;
      padding-bottom: 80px;
      @media screen and (max-width: 1024px) {
        padding-right: max(64px, min(calc((64 / 1024) * 100vw), 40px));
        padding-left: max(64px, min(calc((64 / 1024) * 100vw), 40px));
      }
    }
  }
  &[data-module="content-03"] {
    position: relative;
    z-index: 10;
    background-color: var(--color-primary);
    * {
      color: var(--color-background);
    }
    @media screen and (max-width: 767px) {
      margin-top: -32px;
      padding: 40px 20px;
    }
    @media screen and (min-width: 768px) {
      margin-top: -64px;
      padding-top: 80px;
      padding-bottom: 80px;
      @media screen and (max-width: 1024px) {
        padding-right: max(64px, min(calc((64 / 1024) * 100vw), 40px));
        padding-left: max(64px, min(calc((64 / 1024) * 100vw), 40px));
      }
    }
  }
  &[data-module="content-04"] {
    position: relative;
    z-index: 10;
    background-color: var(--color-background);
    @media screen and (max-width: 767px) {
      padding: 40px 20px;
    }
    @media screen and (min-width: 768px) {
      padding-top: 80px;
      padding-bottom: 80px;
      @media screen and (max-width: 1024px) {
        padding-right: max(64px, min(calc((64 / 1024) * 100vw), 40px));
        padding-left: max(64px, min(calc((64 / 1024) * 100vw), 40px));
      }
    }
  }
  &[data-module="content-05"] {
    position: relative;
    z-index: 10;
    background-color: var(--color-primary);
    * {
      color: var(--color-background);
    }
    @media screen and (max-width: 767px) {
      padding: 40px 20px;
    }
    @media screen and (min-width: 768px) {
      padding-top: 80px;
      padding-bottom: 80px;
      @media screen and (max-width: 1024px) {
        padding-right: max(64px, min(calc((64 / 1024) * 100vw), 40px));
        padding-left: max(64px, min(calc((64 / 1024) * 100vw), 40px));
      }
    }
  }
  &[data-module="modal"] {
    color: var(--color-background)!important;
    box-sizing: border-box;
    border-radius: 21px;
    width: 100%;
    max-height: calc(100vh - 122px);
    background-color: var(--color-primary);
    overflow-y: scroll;
    @media screen and (max-width: 767px) {
      padding: 40px 20px;
    }
    @media screen and (min-width: 768px) {
      padding: 80px 64px;
      @media screen and (max-width: 1024px) {
      }
    }
    * {
      color: inherit;
    }
  }
}

/*
figure
---------------------------------------------- */
:where(.figure) {
  &[data-module="image"] {
    .figcaption {
      text-align: center;
    }
    .picture {
      display: block;
      @media screen and (max-width: 767px) {
        margin-top: 16px;
      }
      @media screen and (min-width: 768px) {
        margin-top: 24px;
        @media screen and (max-width: 1280px) {
        }
      }
    }
  }
  &[data-module="scene"] {
    color: #000;
    background-color: var(--color-background);
    @media screen and (max-width: 767px) {
      border-radius: 21px;
      padding: 20px;
    }
    @media screen and (min-width: 768px) {
      border-radius: 21px;
      padding: 48px;
      @media screen and (max-width: 1280px) {
        padding: max(32px, min(calc((32 / 1280) * 100vw), 20px));
      }
    }
    * {
      color: inherit;
    }
  }
  &[data-module="content-04"] {
    @media screen and (max-width: 767px) {
      margin-top: 24px;
    }
    @media screen and (min-width: 768px) {
      margin-top: 48px;
      @media screen and (max-width: 1024px) {
      }
    }
    .figcaption {
      @media screen and (max-width: 767px) {
        margin-top: 24px;
      }
      @media screen and (min-width: 768px) {
        margin-top: 48px;
        @media screen and (max-width: 1024px) {
        }
      }
    }
  }
  &[data-module="room"] {
    @media screen and (max-width: 767px) {
      margin-top: 24px;
    }
    @media screen and (min-width: 768px) {
      margin-top: 48px;
      @media screen and (max-width: 1024px) {
      }
    }
    .figcaption {
      @media screen and (max-width: 767px) {
        margin-top: 24px;
      }
      @media screen and (min-width: 768px) {
        margin-top: 48px;
        @media screen and (max-width: 1024px) {
        }
      }
    }
  }
}

/*
unordered-list
---------------------------------------------- */
:where(.unordered-list) {
  &[data-module="scene"] {
    display: flex;
    flex-wrap: wrap;
    @media screen and (max-width: 767px) {
      column-gap: 24px;
      row-gap: 16px;
    }
    @media screen and (min-width: 768px) {
      column-gap: 48px;
      row-gap: 32px;
      @media screen and (max-width: 1280px) {
        column-gap: 24px;
        row-gap: 16px;
      }
    }
    .unordered-item {
      @media screen and (max-width: 767px) {
        min-width: calc(50% - (24px / 2));
      }
      @media screen and (min-width: 768px) {
        min-width: calc(50% - (48px / 2));
        @media screen and (max-width: 1280px) {
          min-width: calc(50% - (24px / 2));
        }
      }
    }
  }
  &[data-module="floating"] {
    box-sizing: border-box;
    @media screen and (max-width: 767px) {
    }
    @media screen and (min-width: 768px) {
      max-width: 640px;
      margin-left: auto;
      margin-right: calc((80 / 1920) * 100%);
      padding-right: 64px;
      padding-left: 64px;
      @media screen and (max-width: 1280px) {
        max-width: calc((640 / 1280) * 100vw);
        padding-right: max(32px, min(calc((32 / 1280) * 100vw), 20px));
        padding-left: max(32px, min(calc((32 / 1280) * 100vw), 20px));
      }
    }
    .unordered-item {
      + .unordered-item {
        @media screen and (max-width: 767px) {
          margin-top: 8px;
        }
        @media screen and (min-width: 768px) {
          margin-top: 16px;
          @media screen and (max-width: 1024px) {
          }
        }
      }
    }
  }
}

/*
definition-list
---------------------------------------------- */
:where(.definition-list) {
  &[data-module="scene"] {
    display: flex;
    @media screen and (max-width: 767px) {
      font-size: max(12px, min(calc((12 / 767) * 100vw), 12px));
      gap: 12px;
    }
    @media screen and (min-width: 768px) {
      gap: 24px;
      @media screen and (max-width: 1024px) {
        font-size: max(24px, min(calc((24 / 1024) * 100vw), 12px));
      }
    }
    &::before {
      box-sizing: border-box;
      border-radius: 8px;
      display: block;
      width: 1em;
      height: 0px;
      padding-top: 1em;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: contain;
      overflow: hidden;
      @media screen and (max-width: 767px) {
        font-size: max(40px, min(calc((40 / 767) * 100vw), 40px));
      }
      @media screen and (min-width: 768px) {
        font-size: 64px;
        @media screen and (max-width: 1280px) {
          font-size: max(64px, min(calc((64 / 1280) * 100vw), 40px));
        }
      }
    }
    .definition-group {
      flex: 1;
    }
    .definition-term {
      font-weight: bold;
      line-height: 1.5;
      @media screen and (max-width: 767px) {
        font-size: max(14px, min(calc((14 / 767) * 100vw), 14px));
      }
      @media screen and (min-width: 768px) {
        font-size: 20px;
        @media screen and (max-width: 1280px) {
          font-size: max(18px, min(calc((18 / 1280) * 100vw), 14px));
        }
      }
    }
    .definition-description {
      display: flex;
      gap: 2px;
    }
    &.definition-list--shopping {
      &::before {
        content: '';
        background-image: url(../img/icon-shopping.png);
      }
    }
    &.definition-list--cooking {
      &::before {
        content: '';
        background-image: url(../img/icon-cooking.png);
      }
    }
    &.definition-list--tv {
      &::before {
        content: '';
        background-image: url(../img/icon-tv.png);
      }
    }
    &.definition-list--computer {
      &::before {
        content: '';
        background-image: url(../img/icon-computer.png);
      }
    }
    &.definition-list--smartphone {
      &::before {
        content: '';
        background-image: url(../img/icon-smartphone.png);
      }
    }
    &.definition-list--reading {
      &::before {
        content: '';
        background-image: url(../img/icon-reading.png);
      }
    }
  }
}

/*
player
---------------------------------------------- */
:where(.player) {
  &[data-module="room"] {
    position: relative;
    border-radius: 21px;
    margin-right: auto;
    margin-left: auto;
    overflow: clip;
    @media screen and (max-width: 767px) {
      max-width: 390px;
    }
    @media screen and (min-width: 768px) {
      max-width: 390px;
      @media screen and (max-width: 1024px) {
      }
    }
    &::before {
      content: '';
      display: block;
      width: 100%;
      height: 0;
      padding-top: calc((630 / 380) * 100%);
    }
    .video {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1;
      width: 100%;
      height: 100%;
      transform: translate3d(-50%, -50%, 0);
    }
  }
}

/*
nav
---------------------------------------------- */
:where(.nav) {
  &[data-module="closing"] {
    @media screen and (max-width: 767px) {
      margin-top: 24px;
    }
    @media screen and (min-width: 768px) {
      margin-top: 40px;
      @media screen and (max-width: 1024px) {
      }
    }
    .button {
      + .button {
        @media screen and (max-width: 767px) {
          margin-top: 16px;
        }
        @media screen and (min-width: 768px) {
          margin-top: 16px;
          @media screen and (max-width: 1024px) {
          }
        }
      }
    }
  }
}

/*
button
---------------------------------------------- */
:where(.button) {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: 1.5;
  box-sizing: border-box;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  &[data-module="room"] {
    font-weight: bold;
    color: var(--color-background);
    border-radius: 100vw;
    border: 1px solid var(--color-background);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    background-color: var(--color-primary);
    transition: background-color .2s;
    @media screen and (max-width: 767px) {
      font-size: max(14px, min(calc((14 / 767) * 100vw), 14px));
      max-width: 512px;
      min-width: 256px;
      min-height: 56px;
    }
    @media screen and (min-width: 768px) {
      font-size: 16px;
      max-width: 360px;
      min-height: 74px;
      @media screen and (max-width: 1024px) {
        font-size: max(16px, min(calc((16 / 1024) * 100vw), 14px));
      }
    }
    @media (hover: none) {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      &:active {
        color: var(--color-primary)!important;
        border-color: var(--color-primary)!important;
        background-color: var(--color-background)!important;
        * {
          color: var(--color-primary)!important;
        }
        .icon {
          background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22770%22%20height%3D%22227%22%3E%3Cpath%20fill%3D%22%230056c4%22%20fill-rule%3D%22evenodd%22%20d%3D%22m769.975%20226.985-9.875-.885.843-164.324L385.279%209.6%209.174%2061.787%209%20226.1H0L-.013%2053.476%20385.241-.015l384.744%2053.466zM83.936%20200.7l-.092-101.529c-2.645-6.709-14.359-8.023-19.849-7.775-5.86-.008-8.989%202.483-7.246-6.262l117.109.3c67.642.557%2073.641%2057.249%201.036%2065.081l34.444%2044.392c12.27%2015.813%2032.417%209.803%2031.73%2015.396.259%205.546-51.365%201.901-54.361%202.991l-47.35-61.089c-7.609-.823-14.817-.812-23.074-.38l.371%2049.333c6.3%206.15%2017.485%206.76%2025.718%206.417%201.36-.011.971%204.27.633%205.491l-83.743.174c-12.412-10.744%2012.477-.01%2024.674-12.54m32.546-54.989c30.755-.953%2063.211%205.808%2074.204-20.34%2010.114-38.804-40.397-34.25-65.632-33.516-4.913%201.805-8.819%205.803-8.796%2010.385zm238.581%2051.322c-36.028%2044.821-142.957%205.982-96.735-51.676%2035.383-42.219%20141.021-6.181%2096.735%2051.676m-69.257%205.865c8.162%2011.546%2033.464%2012.419%2041.356-.622%2012.489-22.922%2012.373-72.354-21.663-70.284-14.264.099-23.792%207.602-25.36%2022.24-1.701%2015.874-4.515%2034.263%205.667%2048.666m192.755.793c-41.479%2036.714-137.72-9.441-86.207-61.473%2042.88-41.272%20146.281%207.746%2086.207%2061.473m-67.759-13.978c2.332%2026.924%2046.437%2030.693%2051.802%203.206%204.745-23.779%205.197-64.237-28.036-60.601-29.099.053-25.804%2036.738-23.766%2057.395m139.4-62.891%201.647%2011.015c21.386-14.465%2059.648-17.279%2074.447%204.593%2017.419-18.265%2067.179-26.521%2074.317%205.637-.003.002.999%2051.028.999%2051.028.104%205.287%208.964%208.441%2013.465%208.456%205.127.116%206.875-1.362%205.314%205.462l-46.84.252-.11-59.329c-.012-6.219-4.245-11.54-10.658-13.472-11.864-3.574-32.415%201.351-35.269%2015.629-2.932%2014.665-1.639%2046.45%201.617%2048.378%203.66%202.107%209.529%202.779%2013.661%203.105%201.35.141.833%204.842.064%205.554l-44.705.053-.377-63.517c-.099-16.706-40.159-14.136-44.725%201.342-4.378%2014.836-1.053%2031.973-1.523%2048.484-.112%203.958%208.53%207.922%2012.134%207.896%205.342-.108%208.114-.993%204.991%205.764l-63.328-.07-.974-4.585c-.371-1.749%2018.422-.545%2018.397-7.329l-.221-59.144c-.014-3.534-10.318-5.195-13.678-4.344-4.665%201.204-6.316%202.602-5.726-3.693z%22%2F%3E%3C%2Fsvg%3E');
        }
      }
    }
    @media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
      &:hover {
        color: var(--color-primary)!important;
        border-color: var(--color-primary)!important;
        background-color: var(--color-background)!important;
        * {
          color: var(--color-primary)!important;
        }
        .icon {
          background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22770%22%20height%3D%22227%22%3E%3Cpath%20fill%3D%22%230056c4%22%20fill-rule%3D%22evenodd%22%20d%3D%22m769.975%20226.985-9.875-.885.843-164.324L385.279%209.6%209.174%2061.787%209%20226.1H0L-.013%2053.476%20385.241-.015l384.744%2053.466zM83.936%20200.7l-.092-101.529c-2.645-6.709-14.359-8.023-19.849-7.775-5.86-.008-8.989%202.483-7.246-6.262l117.109.3c67.642.557%2073.641%2057.249%201.036%2065.081l34.444%2044.392c12.27%2015.813%2032.417%209.803%2031.73%2015.396.259%205.546-51.365%201.901-54.361%202.991l-47.35-61.089c-7.609-.823-14.817-.812-23.074-.38l.371%2049.333c6.3%206.15%2017.485%206.76%2025.718%206.417%201.36-.011.971%204.27.633%205.491l-83.743.174c-12.412-10.744%2012.477-.01%2024.674-12.54m32.546-54.989c30.755-.953%2063.211%205.808%2074.204-20.34%2010.114-38.804-40.397-34.25-65.632-33.516-4.913%201.805-8.819%205.803-8.796%2010.385zm238.581%2051.322c-36.028%2044.821-142.957%205.982-96.735-51.676%2035.383-42.219%20141.021-6.181%2096.735%2051.676m-69.257%205.865c8.162%2011.546%2033.464%2012.419%2041.356-.622%2012.489-22.922%2012.373-72.354-21.663-70.284-14.264.099-23.792%207.602-25.36%2022.24-1.701%2015.874-4.515%2034.263%205.667%2048.666m192.755.793c-41.479%2036.714-137.72-9.441-86.207-61.473%2042.88-41.272%20146.281%207.746%2086.207%2061.473m-67.759-13.978c2.332%2026.924%2046.437%2030.693%2051.802%203.206%204.745-23.779%205.197-64.237-28.036-60.601-29.099.053-25.804%2036.738-23.766%2057.395m139.4-62.891%201.647%2011.015c21.386-14.465%2059.648-17.279%2074.447%204.593%2017.419-18.265%2067.179-26.521%2074.317%205.637-.003.002.999%2051.028.999%2051.028.104%205.287%208.964%208.441%2013.465%208.456%205.127.116%206.875-1.362%205.314%205.462l-46.84.252-.11-59.329c-.012-6.219-4.245-11.54-10.658-13.472-11.864-3.574-32.415%201.351-35.269%2015.629-2.932%2014.665-1.639%2046.45%201.617%2048.378%203.66%202.107%209.529%202.779%2013.661%203.105%201.35.141.833%204.842.064%205.554l-44.705.053-.377-63.517c-.099-16.706-40.159-14.136-44.725%201.342-4.378%2014.836-1.053%2031.973-1.523%2048.484-.112%203.958%208.53%207.922%2012.134%207.896%205.342-.108%208.114-.993%204.991%205.764l-63.328-.07-.974-4.585c-.371-1.749%2018.422-.545%2018.397-7.329l-.221-59.144c-.014-3.534-10.318-5.195-13.678-4.344-4.665%201.204-6.316%202.602-5.726-3.693z%22%2F%3E%3C%2Fsvg%3E');
        }
      }
    }
    .inner {
      flex: 1;
    }
    .icon {
      box-sizing: border-box;
      display: inline-block;
      height: 1px;
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22770%22%20height%3D%22227%22%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22m769.975%20226.985-9.875-.885.843-164.324L385.279%209.6%209.174%2061.787%209%20226.1H0L-.013%2053.476%20385.241-.015l384.744%2053.466zM83.936%20200.7l-.092-101.529c-2.645-6.709-14.359-8.023-19.849-7.775-5.86-.008-8.989%202.483-7.246-6.262l117.109.3c67.642.557%2073.641%2057.249%201.036%2065.081l34.444%2044.392c12.27%2015.813%2032.417%209.803%2031.73%2015.396.259%205.546-51.365%201.901-54.361%202.991l-47.35-61.089c-7.609-.823-14.817-.812-23.074-.38l.371%2049.333c6.3%206.15%2017.485%206.76%2025.718%206.417%201.36-.011.971%204.27.633%205.491l-83.743.174c-12.412-10.744%2012.477-.01%2024.674-12.54m32.546-54.989c30.755-.953%2063.211%205.808%2074.204-20.34%2010.114-38.804-40.397-34.25-65.632-33.516-4.913%201.805-8.819%205.803-8.796%2010.385zm238.581%2051.322c-36.028%2044.821-142.957%205.982-96.735-51.676%2035.383-42.219%20141.021-6.181%2096.735%2051.676m-69.257%205.865c8.162%2011.546%2033.464%2012.419%2041.356-.622%2012.489-22.922%2012.373-72.354-21.663-70.284-14.264.099-23.792%207.602-25.36%2022.24-1.701%2015.874-4.515%2034.263%205.667%2048.666m192.755.793c-41.479%2036.714-137.72-9.441-86.207-61.473%2042.88-41.272%20146.281%207.746%2086.207%2061.473m-67.759-13.978c2.332%2026.924%2046.437%2030.693%2051.802%203.206%204.745-23.779%205.197-64.237-28.036-60.601-29.099.053-25.804%2036.738-23.766%2057.395m139.4-62.891%201.647%2011.015c21.386-14.465%2059.648-17.279%2074.447%204.593%2017.419-18.265%2067.179-26.521%2074.317%205.637-.003.002.999%2051.028.999%2051.028.104%205.287%208.964%208.441%2013.465%208.456%205.127.116%206.875-1.362%205.314%205.462l-46.84.252-.11-59.329c-.012-6.219-4.245-11.54-10.658-13.472-11.864-3.574-32.415%201.351-35.269%2015.629-2.932%2014.665-1.639%2046.45%201.617%2048.378%203.66%202.107%209.529%202.779%2013.661%203.105%201.35.141.833%204.842.064%205.554l-44.705.053-.377-63.517c-.099-16.706-40.159-14.136-44.725%201.342-4.378%2014.836-1.053%2031.973-1.523%2048.484-.112%203.958%208.53%207.922%2012.134%207.896%205.342-.108%208.114-.993%204.991%205.764l-63.328-.07-.974-4.585c-.371-1.749%2018.422-.545%2018.397-7.329l-.221-59.144c-.014-3.534-10.318-5.195-13.678-4.344-4.665%201.204-6.316%202.602-5.726-3.693z%22%2F%3E%3C%2Fsvg%3E');
      background-position: center center;
      background-repeat: no-repeat;
      background-size: contain;
      overflow: hidden;
      @media screen and (max-width: 767px) {
        width: 56px;
        padding-top: 16.5px;
        margin: 0 6px;
      }
      @media screen and (min-width: 768px) {
        width: 68px;
        padding-top: 20px;
        margin: 0 8px;
        @media screen and (max-width: 1024px) {
        }
      }
    }
  }
  &[data-module="shop"] {
    font-weight: bold;
    color: var(--color-background);
    border-radius: 100vw;
    border: 1px solid var(--color-background);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    background-color: var(--color-secondary);
    transition: background-color .2s;
    @media screen and (max-width: 767px) {
      font-size: max(14px, min(calc((14 / 767) * 100vw), 14px));
      max-width: 512px;
      min-width: 256px;
      min-height: 56px;
    }
    @media screen and (min-width: 768px) {
      font-size: 16px;
      max-width: 360px;
      min-height: 74px;
      @media screen and (max-width: 1024px) {
        font-size: max(16px, min(calc((16 / 1024) * 100vw), 14px));
      }
    }
    @media (hover: none) {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      &:active {
        color: var(--color-secondary)!important;
        border-color: var(--color-secondary)!important;
        background-color: var(--color-background)!important;
        * {
          color: var(--color-secondary)!important;
        }
        .inner {
          &::after {
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256%22%20height%3D%22256%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h256v256H0z%22%2F%3E%3Cpath%20fill%3D%22%23ed7632%22%20fill-rule%3D%22evenodd%22%20d%3D%22m.004%2086.215%2024.773-24.681L128.02%20165.661%20231.228%2061.486l24.776%2024.692L128.03%20212.49z%22%2F%3E%3C%2Fsvg%3E');
          }
        }
      }
    }
    @media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
      &:hover {
        color: var(--color-secondary)!important;
        border-color: var(--color-secondary)!important;
        background-color: var(--color-background)!important;
        * {
          color: var(--color-secondary)!important;
        }
        .inner {
          &::after {
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256%22%20height%3D%22256%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h256v256H0z%22%2F%3E%3Cpath%20fill%3D%22%23ed7632%22%20fill-rule%3D%22evenodd%22%20d%3D%22m.004%2086.215%2024.773-24.681L128.02%20165.661%20231.228%2061.486l24.776%2024.692L128.03%20212.49z%22%2F%3E%3C%2Fsvg%3E');
          }
        }
      }
    }
    .inner {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      @media screen and (max-width: 767px) {
        gap: 8px;
      }
      @media screen and (min-width: 768px) {
        gap: 8px;
        @media screen and (max-width: 1024px) {
        }
      }
      &::after {
        content: '';
        display: block;
        width: 1em;
        height: 0px;
        padding-top: 1em;
        background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256%22%20height%3D%22256%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h256v256H0z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22m.004%2086.215%2024.773-24.681L128.02%20165.661%20231.228%2061.486l24.776%2024.692L128.03%20212.49z%22%2F%3E%3C%2Fsvg%3E');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        @media screen and (max-width: 767px) {
          font-size: max(14px, min(calc((14 / 767) * 100vw), 14px));
        }
        @media screen and (min-width: 768px) {
          font-size: 16px;
          @media screen and (max-width: 1024px) {
            font-size: max(16px, min(calc((16 / 1024) * 100vw), 14px));
          }
        }
      }
    }
  }
}

/*
modal
---------------------------------------------- */
:where(.modal) {
  position: fixed;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.48);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  @media screen and (max-width: 767px) {
    inset: 66px 0 0;
  }
  @media screen and (min-width: 768px) {
    inset: 74px 0 0;
    @media screen and (max-width: 1024px) {
      inset: 63px 0 0;
    }
  }
  &.is-open {
    opacity: 1;
    pointer-events: auto;
    .modal-content {
      transform: translateY(0) scale(1);
    }
  }
  .modal-content {
    position: relative;
    border-radius: 21px;
    overflow: hidden;
    transform: translateY(12px) scale(0.98);
    transition: transform 220ms ease;
    @media screen and (max-width: 767px) {
      width: min(780px, calc(100vw - 40px));
    }
    @media screen and (min-width: 768px) {
      width: min(780px, calc(100vw - 48px));
      @media screen and (max-width: 1024px) {
      }
    }
  }
  .modal-close {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: inherit;
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    border: none;
    padding: 0;
    background: transparent;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.2));
    transition: transform 180ms ease;
    cursor: pointer;
    @media screen and (max-width: 767px) {
      top: 20px;
      right: 20px;
      width: 32px;
    }
    @media screen and (min-width: 768px) {
      top: 40px;
      right: 40px;
      width: 60px;
      @media screen and (max-width: 1024px) {
      }
    }
  }
}

/*
anchor
---------------------------------------------- */
:where(.anchor) {
  &[data-module="hoya"] {
    font-weight: bold;
    color: #002bac;
    line-height: 1.5;
    text-align: center;
    position: relative;
    border-radius: 100vw;
    border: 1px solid var(--color-background);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
    background-color: var(--color-background);
    @media screen and (max-width: 767px) {
      font-size: max(14px, min(calc((14 / 767) * 100vw), 14px));
      min-width: 256px;
      min-height: 56px;
    }
    @media screen and (min-width: 768px) {
      font-size: 16px;
      width: 413px;
      min-height: 74px;
      @media screen and (max-width: 1024px) {
        font-size: max(16px, min(calc((16 / 1024) * 100vw), 14px));
      }
    }
    .anchor-inner {
      flex: 1;
      @media screen and (max-width: 767px) {
        gap: 8px;
      }
      @media screen and (min-width: 768px) {
        gap: 8px;
        @media screen and (max-width: 1024px) {
        }
      }
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 1em;
        height: 0px;
        padding-top: 1em;
        background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256%22%20height%3D%22256%22%3E%3Cpath%20fill%3D%22%23002bac%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200v255.1h255.1v-128h-28v100H28V28h100V0zm156%200v28h51L75%20160.1l20%2020%20132.1-132v51h28V0z%22%2F%3E%3C%2Fsvg%3E');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        transform: translate3d(0, -50%, 0);
        @media screen and (max-width: 767px) {
          font-size: max(14px, min(calc((14 / 767) * 100vw), 14px));
          right: 16px;
        }
        @media screen and (min-width: 768px) {
          font-size: 16px;
          right: 24px;
          @media screen and (max-width: 1024px) {
            font-size: max(16px, min(calc((16 / 1024) * 100vw), 14px));
          }
        }
      }
    }
  }
}