@charset "UTF-8";
main {
  line-height: 1;
}
main * {
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  color: inherit;
  border: 0;
  font-variant-ligatures: none;
}

main button {
  background: transparent;
}
main select {
  background: transparent;
  -webkit-appearance: none;
          appearance: none;
}
main a,
main button,
main input,
main optgroup,
main select,
main textarea {
  outline: revert;
}
main a:focus {
  outline: revert;
}
main button,
main [type=button],
main [type=reset],
main [type=submit] {
  cursor: pointer;
}
main button:disabled,
main [type=button]:disabled,
main [type=reset]:disabled,
main [type=submit]:disabled {
  cursor: default;
}
main label[for] {
  cursor: pointer;
}
main td,
main th {
  height: auto;
}

footer {
  margin-top: 0;
}

header {
  position: relative !important;
}

body {
  padding-top: 0 !important;
}

html {
  overflow-y: initial;
}

main {
  font-family: "Roboto", "Noto Sans", sans-serif;
  color: #fff;
}
main:lang(ja) {
  font-family: YakuHanJP, "Roboto", "Noto Sans JP", sans-serif;
}
main:lang(zh-cmn-Hans) {
  font-family: "Roboto", "Noto Sans SC", sans-serif;
}
main:lang(zh-cmn-Hant) {
  font-family: "Roboto", "Noto Sans TC", sans-serif;
}
main:lang(ko) {
  font-family: "Roboto", "Noto Sans KR", sans-serif;
}
main img {
  height: auto;
  vertical-align: bottom;
}
main svg {
  width: auto;
  height: 1em;
  fill: currentColor;
}
[data-whatinput=mouse] main a, [data-whatinput=touch] main a,
[data-whatinput=mouse] main button,
[data-whatinput=touch] main button {
  outline: none;
}
main [data-scroll-fade] {
  opacity: 0;
  transition-duration: 0.5s;
  transition-property: transform, opacity;
  transform: translate3d(0, 20px, 0);
}
main [data-scroll-fade][data-scroll-fade=show] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/**
 * Swiper 8.4.5
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2022 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: November 21, 2022
 */
@font-face {
  font-family: "swiper-icons";
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color: #007aff;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-pointer-events {
  touch-action: pan-y;
}

.swiper-pointer-events.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* 3D Effects */
.swiper-3d,
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-wrapper,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}

.swiper-vertical.swiper-css-mode > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}

.swiper-centered > .swiper-wrapper::before {
  content: "";
  flex-shrink: 0;
  order: 9999;
}

.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  -webkit-margin-start: var(--swiper-centered-offset-before);
          margin-inline-start: var(--swiper-centered-offset-before);
}

.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}

.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  -webkit-margin-before: var(--swiper-centered-offset-before);
          margin-block-start: var(--swiper-centered-offset-before);
}

.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}

.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
}

.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
  height: 1px;
  width: var(--swiper-virtual-size);
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
  width: 1px;
  height: var(--swiper-virtual-size);
}

:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev.swiper-button-hidden,
.swiper-button-next.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}

.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next {
  display: none !important;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: 10px;
  right: auto;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: "prev";
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: 10px;
  left: auto;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: "next";
}

.swiper-button-lock {
  display: none;
}

:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}

/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 10px;
  left: 0;
  width: 100%;
}

/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: 50%;
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet:only-child {
  display: none !important;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}

.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}

.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}

.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform, 200ms top;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms left;
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms right;
}

/* Progress */
.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}

.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}

.swiper-vertical > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-lock {
  display: none;
}

/* Scrollbar */
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}

.swiper-scrollbar-disabled > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important;
}

.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}

.swiper-vertical > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-vertical {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.swiper-slide-zoomed {
  cursor: move;
}

/* Preloader */
:root {
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  */
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* a11y */
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}

.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}

.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}

.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube {
  overflow: visible;
}

.swiper-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev,
.swiper-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}

.swiper-cube .swiper-slide-shadow-top,
.swiper-cube .swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}

.swiper-cube .swiper-cube-shadow:before {
  content: "";
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}

.swiper-flip {
  overflow: visible;
}

.swiper-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}

.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-flip .swiper-slide-shadow-top,
.swiper-flip .swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-creative .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}

.swiper-cards {
  overflow: visible;
}

.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}

.AnchorPoint {
  --offset: 0px;
  position: absolute;
  margin-top: calc((var(--local-nav-height) - var(--common-header-height) + var(--offset)) * -1);
  visibility: hidden;
}
.AnchorPoint.AnchorPoint--long {
  --offset: 50px;
}
[data-scroll-lock-locked=true] .AnchorPoint {
  --common-header-height: 0px;
}

.Button {
  position: relative;
  padding: 15px 24px;
  font-size: 14px;
  font-weight: 700;
  color: #c0f2ea;
  text-align: center;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 35px #830065;
  transition: box-shadow 0.3s, transform 0.3s;
  transform: scale3d(1, 1, 1);
  will-change: transform;
}
@media (hover: hover) {
  .Button:where(:any-link, :enabled, summary):hover {
    color: #830065;
    box-shadow: inset 0 0 0 2px #830065;
    transform: scale3d(1.1, 1.1, 1);
  }
}
.Button.Button--triangle {
  padding-right: 40px;
}
.Button.Button--triangle::after {
  position: absolute;
  top: 50%;
  right: 18px;
  display: block;
  content: "";
  transform: translateY(-50%);
}
@media screen and (min-width: 768.02px), print {
  .Button.Button--triangle::after {
    border-top: 8px solid currentColor;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
  }
}
@media screen and (max-width: 768px) {
  .Button.Button--triangle::after {
    border-top: 6px solid currentColor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
  }
  .Hero .Button.Button--triangle {
    padding: 10px 24px 10px 16px;
    font-size: 12px;
  }
  .Hero .Button.Button--triangle::after {
    right: 12px;
  }
}

.Support {
  background-color: #c75e86;
}
@media screen and (min-width: 768.02px), print {
  .Support {
    padding-top: 90px;
    padding-bottom: 100px;
  }
}
@media screen and (max-width: 768px) {
  .Support {
    padding-top: 60px;
    padding-bottom: 80px;
  }
}
.Support h1 {
  margin-bottom: 60px;
  font-weight: 700;
  color: #c0f2ea;
  text-align: center;
}
@media screen and (min-width: 768.02px), print {
  .Support h1 {
    font-size: 44px;
  }
}
@media screen and (max-width: 768px) {
  .Support h1 {
    font-size: 32px;
  }
}

.Width {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 768.02px), print {
  .Width {
    width: calc(100% - 60px);
    max-width: 1160px;
    max-width: clamp(1160px, 80.5555555556vw, 1392px);
  }
  .Width.Width--narrow {
    max-width: 962px;
    max-width: clamp(962px, 66.8055555556vw, 1154.4px);
  }
  .Width.Width--x-narrow {
    max-width: 764px;
    max-width: clamp(764px, 53.0555555556vw, 916.8px);
  }
}
@media screen and (max-width: 768px) {
  .Width {
    width: 90%;
  }
  .Product__Variations__Wrapper .Width {
    width: 100%;
  }
}

.Hero {
  position: relative;
  height: calc(100vh - (var(--local-nav-height) + var(--common-header-height)));
  overflow: hidden;
  background-color: #c75e86;
  /* Safariで1px空きが出る場合に対応 */
}
.Hero [data-hero],
.Hero [data-hero-picture-pc],
.Hero [data-hero-picture-sp] {
  opacity: 0;
}
@media screen and (min-width: 768.02px), print {
  .Hero {
    min-height: 500px;
  }
}
@media screen and (max-width: 768px) {
  .Hero {
    min-height: 660px;
    max-height: 720px;
  }
}
.Hero::after {
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 4px;
  content: "";
  background-color: #c75e86;
}

.Hero__Inner {
  position: relative;
  display: grid;
  height: 100%;
}
@media screen and (min-width: 768.02px), print {
  .Hero__Inner {
    align-items: center;
  }
}
@media screen and (max-width: 768px) {
  .Hero__Inner {
    justify-content: center;
    max-height: 720px;
    padding-top: 64px;
  }
}

@media screen and (min-width: 768.02px), print {
  .Hero__Image {
    position: absolute;
    top: 53%;
    left: 18%;
    width: 36%;
    transform: translateY(-50%);
  }
  .Hero__Image img {
    display: block;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
}
@media screen and (max-width: 768px) {
  .Hero__Image {
    justify-self: center;
    order: 2;
    width: 80%;
    max-width: 375px;
//    transform: translateY(-12px);
  }
  .Hero__Image img {
    width: auto;
    max-height: 392px;
  }
}

@media screen and (min-width: 768.02px), print {
  .Hero__Text {
    position: relative;
    z-index: 1;
    padding-left: 57%;
  }
}
@media screen and (max-width: 768px) {
  .Hero__Text {
    display: grid;
    justify-content: center;
    justify-self: center;
    width: 100%;
    max-width: 300px;
  }
}

.Hero__Copy {
  font-weight: 700;
  font-variant-ligatures: none;
  line-height: 1.03;
  color: #c0f2ea;
}
@media screen and (min-width: 768.02px), print {
  .Hero__Copy {
    max-width: 9em;
    font-size: min(6vh, 100px);
  }
}
@media screen and (max-width: 768px) {
  .Hero__Copy {
    font-size: 32px;
    text-align: center;
  }
  .Hero__Copy__Punctuation {
    padding-left: 16px;
  }
}

@media screen and (min-width: 768.02px), print {
  .Hero__Logo {
    width: min(30vh, 210px);
    padding-left: 5px;
    margin-top: min(4vh, 200px);
  }
}
@media screen and (max-width: 768px) {
  .Hero__Logo {
    justify-self: center;
    order: 4;
    max-width: 156px;
    transform: translateY(-20px);
  }
}
.Hero__Logo img {
  width: 100%;
}

@media screen and (min-width: 768.02px), print {
  .Hero__List {
    max-width: 430px;
    padding-left: 4px;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: #c0f2ea;
  }
  .Hero__List > li {
    position: relative;
    padding-left: 10px;
  }
  .Hero__List > li:not(:first-child) {
    margin-top: 2px;
  }
  .Hero__List > li::before {
    position: absolute;
    top: 6px;
    left: 0;
    display: block;
    width: 4px;
    height: 4px;
    content: "";
    background-color: #c0f2ea;
    border-radius: 50%;
  }
}
@media screen and (max-width: 768px) {
  .Hero__List {
    display: none;
  }
}

.Hero__Picture {
  display: grid;
  column-gap: 8px;
}
@media screen and (min-width: 768.02px), print {
  .Hero__Picture {
    grid-template-columns: repeat(3, 80px);
    padding-left: 3px;
    margin-top: 16px;
  }
}
@media screen and (max-width: 768px) {
  .Hero__Picture {
    grid-template-columns: repeat(3, 48px);
    justify-content: center;
    order: 3;
    transform: translateY(-20px);
  }
}

.Hero__Addition {
  display: inline-block;
  font-weight: 700;
  color: #c0f2ea;
}
@media screen and (min-width: 768.02px), print {
  .Hero__Addition {
    padding-left: 3px;
    margin-top: 30px;
    font-size: 29px;
  }
}
@media screen and (max-width: 768px) {
  .Hero__Addition {
    text-align: center;
    order: 5;
    font-size: 15px;
  }
}

.Hero__Addition__Jp {
  margin-top: 5px;
  text-align: center;
}
@media screen and (min-width: 768.02px), print {
  .Hero__Addition__Jp {
    font-size: 14px;
  }
}
@media screen and (max-width: 768px) {
  .Hero__Addition__Jp {
    font-size: 10px;
  }
}

@media screen and (min-width: 768.02px), print {
  .Hero__LanguageSwitcher {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .Hero__LanguageSwitcher {
    position: absolute;
    top: 16px;
    left: 5%;
  }
}

.Hero__Scroll {
  position: absolute;
  bottom: 30px;
  left: 40px;
  font-family: "Noto Sans", sans-serif;
  line-height: 1;
  color: #c0f2ea;
  writing-mode: vertical-rl;
}
@media screen and (max-width: 768px) {
  .Hero__Scroll {
    display: none;
  }
}

.Hero__Scroll__Inner {
  position: relative;
  padding-bottom: 65px;
}
.Hero__Scroll__Inner::before, .Hero__Scroll__Inner::after {
  position: absolute;
  bottom: 0;
  left: calc(50% - 2px);
  width: 2px;
  content: "";
  background-color: #c0f2ea;
}
.Hero__Scroll__Inner::before {
  height: 12px;
  transform: translateX(-50%) rotate(45deg);
  transform-origin: bottom;
}
.Hero__Scroll__Inner::after {
  height: 55px;
  transform: translateX(-50%);
}

.LocalNavPc {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 76px 1fr 137px;
  padding-right: 20px;
  padding-left: 20px;
  color: #830065;
  background-color: #c0f2ea;
  filter: drop-shadow(0 10px 4px rgba(65, 19, 48, 0.14));
}
@media screen and (max-width: 768px) {
  .LocalNavPc {
    display: none;
  }
}
.LocalNavPc::before {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  width: 200px;
  height: 200px;
  content: "";
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><defs></defs><path id="icon_parts_corner.svg" class="cls-1" d="M0,309V109H200C89.543,109,0,198.543,0,309Z" transform="translate(0 -109)" fill="%23c0f2ea"/></svg>');
  background-size: cover;
}

.LocalNavPc__Inner {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  min-height: 50px;
  padding-right: 30px;
  padding-left: 30px;
}

.LocalNavPc__Logo {
  transform: translateY(17px);
}

.LocalNavPc__List {
  display: grid;
  grid-auto-flow: column;
  column-gap: 4px;
  align-items: center;
  justify-self: center;
  width: 100%;
  max-width: 790px;
  height: 100%;
}
.LocalNavPc__List li {
  position: relative;
  height: 100%;
}
.LocalNavPc__List a,
.LocalNavPc__List span {
  position: relative;
  display: grid;
  height: 100%;
  padding-right: 3%;
  padding-left: 3%;
  font-size: 15px;
  line-height: 1.25;
}
.LocalNavPc__List a {
  place-items: center;
  padding-right: 3%;
}
.LocalNavPc__List a::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background-color: #000;
  opacity: 0;
  transition: opacity 0.2s;
}
@media (hover: hover) {
  .LocalNavPc__List a:where(:any-link, :enabled, summary):hover::before {
    opacity: 0.05;
  }
}
.LocalNavPc__List span {
  grid-auto-flow: column;
  column-gap: 4px;
  align-items: center;
  justify-content: center;
}
.LocalNavPc__List span::after {
  content: "＋";
}

.LocalNavPc__Cover[aria-hidden=false] {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.LocalNavPc__Language {
  position: relative;
  height: 100%;
  padding: 15px 40px 15px 24px;
  font-size: 14px;
  font-weight: 700;
  /* フォント読み込み前だと改行され、ヘッダーの高さが変わるため設定 */
  white-space: nowrap;
}
.LocalNavPc__Language::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background-color: #000;
  opacity: 0;
  transition: opacity 0.2s;
}
@media (hover: hover) {
  .LocalNavPc__Language:where(:any-link, :enabled, summary):hover::before {
    opacity: 0.05;
  }
}
.LocalNavPc__Language::after {
  position: absolute;
  top: 50%;
  right: 18px;
  display: block;
  width: 12px;
  height: 8px;
  content: "";
  background-color: currentColor;
  transform: translateY(-50%);
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 2 1" preserveAspectRatio="none"><path d="M0,0 L1,1 L2,0 Z"/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 2 1" preserveAspectRatio="none"><path d="M0,0 L1,1 L2,0 Z"/></svg>');
}

.LocalNavSp {
  position: relative;
  z-index: 10010;
}
@media screen and (min-width: 768.02px), print {
  .LocalNavSp {
    display: none;
  }
}

[data-menu-button] {
  opacity: 0;
}

.LocalNavSp__MenuButton {
  position: fixed;
  bottom: 40px;
  left: -8px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: -1.414px 1.414px 6px 0px rgba(0, 0, 0, 0.3);
  transition: opacity 0.2s;
}
@media (hover: hover) {
  .LocalNavSp__MenuButton:where(:any-link, :enabled, summary):hover {
    opacity: 0.7;
  }
}
.LocalNavSp__MenuButton.LocalNavSp__MenuButton--open {
  background-color: #830065;
}
.LocalNavSp__MenuButton.LocalNavSp__MenuButton--close {
  background-color: rgba(0, 0, 0, 0.3);
}

.LocalNavSp__LineOpen {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 18px;
  height: 2px;
  background-color: #c0f2ea;
}
.LocalNavSp__LineOpen:nth-child(1) {
  transform: translate(-50%, -50%) translateY(6px);
}
.LocalNavSp__LineOpen:nth-child(2) {
  transform: translate(-50%, -50%);
}
.LocalNavSp__LineOpen:nth-child(3) {
  transform: translate(-50%, -50%) translateY(-6px);
}

.LocalNavSp__LineClose {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 20px;
  height: 1px;
  background-color: #fff;
}
.LocalNavSp__LineClose:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.LocalNavSp__LineClose:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.LocalNavSp__Modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #830065;
}
.LocalNavSp__Modal:not(.is-open) {
  display: none;
}

.LocalNavSp__Dialog {
  display: grid;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: #c0f2ea;
}
[aria-hidden=false] .LocalNavSp__Dialog {
  animation: nav-dialog-show 0.3s ease-in;
}
[aria-hidden=true] .LocalNavSp__Dialog {
  animation: nav-dialog-hide 0.3s ease-in;
}
@keyframes nav-dialog-show {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes nav-dialog-hide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.LocalNavSp__List {
  display: grid;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
.LocalNavSp__List button {
  margin-bottom: 62px;
}
.LocalNavSp__List a {
  display: block;
  padding: 24px;
  font-size: 16px;
  transition: opacity 0.2s;
}
@media (hover: hover) {
  .LocalNavSp__List a:where(:any-link, :enabled, summary):hover {
    opacity: 0.7;
  }
}

.LanguageList {
  min-width: 185px;
  padding-top: 16px;
  padding-bottom: 16px;
  overflow-y: auto;
  font-size: 14px;
  background-color: #fff;
}
.LanguageList > li > a {
  position: relative;
  display: block;
  padding: 13px 30px;
}
.LanguageList > li > a::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background-color: #000;
  opacity: 0;
  transition: opacity 0.2s;
}
@media (hover: hover) {
  .LanguageList > li > a:where(:any-link, :enabled, summary):hover::before {
    opacity: 0.05;
  }
}
.LanguageList > li > a::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background-color: #000;
  opacity: 0;
}
.LanguageList > li > a[aria-current] {
  background-color: #cdd6dd;
}

.ModalSimple {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: scroll;
}
.ModalSimple[aria-hidden=true] {
  display: none;
}

.ModalSimple__Background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: #000;
  opacity: 0.5;
}
.ModalSimple.ModalSimple--video .ModalSimple__Background {
  opacity: 1;
}

.ModalSimple__Dialog {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  max-height: 100%;
  color: #001e62;
}
.ModalSimple.ModalSimple--video .ModalSimple__Dialog {
  width: 100%;
  max-width: 900px;
}

.ModalSimple__Close {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  margin-left: auto;
  transition: opacity 0.2s;
}
@media (hover: hover) {
  .ModalSimple__Close:where(:any-link, :enabled, summary):hover {
    opacity: 0.7;
  }
}
@media screen and (min-width: 768.02px), print {
  .ModalSimple__Close {
    margin-bottom: 12px;
  }
}
@media screen and (max-width: 768px) {
  .ModalSimple__Close {
    margin-bottom: 6px;
  }
}
.ModalSimple__Close::before, .ModalSimple__Close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 36px;
  height: 2px;
  content: "";
  background-color: #fff;
}
.ModalSimple__Close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.ModalSimple__Close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.ModalSimple__Content {
  overflow-y: auto;
}

.VideoPlayer {
  --aspect-ratio: 0.5625;
  position: relative;
  width: 100%;
  height: 0;
  padding-top: calc(var(--aspect-ratio) * 100%);
  overflow: hidden;
  animation-duration: 0.75s;
  animation-play-state: paused;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.VideoPlayer[data-scroll-video=show] {
  animation-play-state: running;
}
.VideoPlayer > iframe,
.VideoPlayer > video {
position: absolute;
top: 0;
left: 50%;
width: 100%;
height: 100%;
transform: translateX(-50%);
}

.VideoPlayer > video {
-o-object-fit: cover;
object-fit: cover;
}
.VideoPlayer > iframe[data-iframe-hidden=true] {
  visibility: hidden;
}
.VideoPlayer.VideoPlayer--promotional {
  background-color: #000;
}
@media screen and (min-width: 768.02px), print {
  .VideoPlayer.VideoPlayer--promotional {
    --aspect-ratio: 0.4724137931;
    animation-name: mask-animation-promotional-pc;
  }
}
@media screen and (max-width: 768px) {
  .VideoPlayer.VideoPlayer--promotional {
    --aspect-ratio: 1;
    animation-name: mask-animation-promotional-sp;
  }
}
.VideoPlayer.VideoPlayer--promotional > video {
  opacity: 0.6;
}
.VideoPlayer.VideoPlayer--tutorial {
  --aspect-ratio: 0.5625;
  animation-name: mask-animation-tutorial;
}

@keyframes mask-animation-promotional-pc {
  0% {
    -webkit-clip-path: inset(50% 50% 50% round 100px);
            clip-path: inset(50% 50% 50% round 100px);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 round 100px);
            clip-path: inset(0 0 0 round 100px);
  }
}
@keyframes mask-animation-promotional-sp {
  0% {
    -webkit-clip-path: inset(50% 50% 50% round 60px);
            clip-path: inset(50% 50% 50% round 60px);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 round 60px);
            clip-path: inset(0 0 0 round 60px);
  }
}
@keyframes mask-animation-tutorial {
  0% {
    -webkit-clip-path: inset(50% 50% 50% round 15px);
            clip-path: inset(50% 50% 50% round 15px);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 round 15px);
            clip-path: inset(0 0 0 round 15px);
  }
}
.VideoPlayer__Thumbnail {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: calc(100% + 1px);
  transform: translateX(-50%);
}
.VideoPlayer__Thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.VideoPlayer__Cover {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
}

.VideoPlayer__Cover__Layout {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  justify-items: center;
  height: 100%;
}

.VideoPlayer__Play {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: #c0f2ea;
}
@media screen and (min-width: 768.02px), print {
  .VideoPlayer__Play {
    width: 140px;
    height: 140px;
  }
}
@media screen and (max-width: 768px) {
  .VideoPlayer.VideoPlayer--promotional .VideoPlayer__Play {
    width: 80px;
    height: 80px;
  }
  .VideoPlayer.VideoPlayer--tutorial .VideoPlayer__Play {
    width: 63px;
    height: 63px;
  }
}
.VideoPlayer__Play::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  border: 2px solid currentColor;
  border-radius: 50%;
  transition: transform 0.3s;
  transform: scale3d(1, 1, 1);
}
.VideoPlayer.VideoPlayer--promotional .VideoPlayer__Play::before {
  background-color: #c0f2ea;
}
@media (hover: hover) {
  :where(:any-link, :enabled, summary):hover .VideoPlayer__Play::before {
    transform: scale3d(1.1, 1.1, 1);
  }
}
.VideoPlayer__Play::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 26%;
  height: 26%;
  content: "";
  background-color: currentColor;
  transform: translate(-50%, -50%) translateX(12%);
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 26 30"><path fill="%23000000" d="M25.133,14.100 L2.472,0.915 C1.673,0.450 0.675,1.031 0.675,1.961 L0.675,28.330 C0.675,29.260 1.673,29.841 2.472,29.376 L25.133,16.191 C25.932,15.727 25.932,14.564 25.133,14.100 Z" /></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 26 30"><path fill="%23000000" d="M25.133,14.100 L2.472,0.915 C1.673,0.450 0.675,1.031 0.675,1.961 L0.675,28.330 C0.675,29.260 1.673,29.841 2.472,29.376 L25.133,16.191 C25.932,15.727 25.932,14.564 25.133,14.100 Z" /></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.VideoPlayer.VideoPlayer--promotional .VideoPlayer__Play::after {
  background-color: #830065;
}

.VideoPlayer__Title {
  position: absolute;
  left: 50%;
  width: 100%;
  font-weight: 700;
  line-height: 1;
  color: #c0f2ea;
  transform: translateX(-50%);
}
@media screen and (min-width: 768.02px), print {
  .VideoPlayer__Title {
    bottom: 60px;
    font-size: 44px;
  }
}
@media screen and (max-width: 768px) {
  .VideoPlayer__Title {
    bottom: 48px;
    font-size: 24px;
  }
}

.VideoPlayer__Text {
  position: absolute;
  left: 50%;
  width: 100%;
  font-weight: 400;
  line-height: 1;
  color: #c0f2ea;
  transform: translateX(-50%);
}
@media screen and (min-width: 768.02px), print {
  .VideoPlayer__Text {
    font-size: 16px;
  }
}
@media screen and (max-width: 768px) {
  .VideoPlayer__Text {
    font-size: 14px;
  }
}
@media screen and (min-width: 768.02px), print {
  .VideoPlayer.VideoPlayer--promotional .VideoPlayer__Text {
    bottom: 108px;
  }
}
@media screen and (max-width: 768px) {
  .VideoPlayer.VideoPlayer--promotional .VideoPlayer__Text {
    bottom: 80px;
  }
}
@media screen and (min-width: 768.02px), print {
  .VideoPlayer.VideoPlayer--tutorial .VideoPlayer__Text {
    top: calc(50% + 100px);
  }
}
@media screen and (max-width: 768px) {
  .VideoPlayer.VideoPlayer--tutorial .VideoPlayer__Text {
    top: calc(50% + 45px);
  }
}

.Product {
  position: relative;
  background-color: #c0f2ea;
}
@media screen and (min-width: 768.02px), print {
  .Product {
    padding-top: 100px;
    border-radius: 120px 0 0 0;
  }
}
@media screen and (max-width: 768px) {
  .Product {
    padding-top: 78px;
    border-radius: 50px 0 0 0;
  }
}
.Product::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: "";
  background-color: #c75e86;
}

.Product__Heading {
  position: relative;
}
@media screen and (min-width: 768.02px), print {
  .Product__Heading {
    padding-top: 90px;
    padding-bottom: 54%;
  }
}
@media screen and (max-width: 768px) {
  .Product__Heading {
    min-height: 510px;
  }
}

.Product__Title {
  width: 6em;
  font-weight: 700;
  line-height: 1;
  color: #830065;
}
@media screen and (min-width: 768.02px), print {
  .Product__Title {
    padding-left: 100px;
    font-size: 80px;
  }
}
@media screen and (max-width: 768px) {
  .Product__Title {
    margin-right: auto;
    margin-left: auto;
    font-size: 50px;
    text-align: center;
  }
}

.Product__Images {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@media screen and (min-width: 768.02px), print {
  .Product__Images {
    top: 0;
  }
}
@media screen and (max-width: 768px) {
  .Product__Images {
    top: 100px;
  }
}

.Product__Layout {
  position: relative;
  width: 100%;
  height: 100%;
}

.Product__Image {
  position: absolute;
}
@media screen and (min-width: 768.02px), print {
  .Product__Image:nth-of-type(1) {
    top: 417px;
    left: -7%;
    width: 14.5%;
  }
}
@media screen and (max-width: 768px) {
  .Product__Image:nth-of-type(1) {
    top: 120px;
    left: calc(50% - 100px);
    width: 70px;
  }
}
@media screen and (min-width: 768.02px), print {
  .Product__Image:nth-of-type(2) {
    top: 563px;
    left: 28%;
    width: 20%;
  }
}
@media screen and (max-width: 768px) {
  .Product__Image:nth-of-type(2) {
    top: 330px;
    left: calc(50% - 130px);
    width: 83px;
  }
}
@media screen and (min-width: 768.02px), print {
  .Product__Image:nth-of-type(3) {
    top: 317px;
    left: 50%;
    width: 22%;
  }
}
@media screen and (max-width: 768px) {
  .Product__Image:nth-of-type(3) {
    top: 240px;
    left: calc(50% - 40px);
    width: 83px;
  }
}
@media screen and (min-width: 768.02px), print {
  .Product__Image:nth-of-type(4) {
    top: 432px;
    left: calc(50% - 510px);
    left: 10%;
    width: 345px;
    width: 26%;
  }
}
@media screen and (max-width: 768px) {
  .Product__Image:nth-of-type(4) {
    top: 211px;
    left: calc(50% - 192px);
    width: 133px;
  }
}
@media screen and (min-width: 768.02px), print {
  .Product__Image:nth-of-type(5) {
    top: 295px;
    left: 61%;
    width: 44%;
  }
}
@media screen and (max-width: 768px) {
  .Product__Image:nth-of-type(5) {
    top: 275px;
    left: calc(50% - 30px);
    width: 208px;
  }
}

.Product__Image__Inner {
  position: relative;
}

.Product__Image__Picture {
  position: absolute;
  -webkit-mask-image: linear-gradient(211deg, #000 67%, transparent 68%);
          mask-image: linear-gradient(211deg, #000 67%, transparent 68%);
}
@media screen and (min-width: 768.02px), print {
  .Product__Image__Picture {
    top: -33.5%;
    left: 49.5%;
    width: 65%;
  }
}
@media screen and (max-width: 768px) {
  .Product__Image__Picture {
    top: -89px;
    left: 96px;
    width: 150px;
  }
}
.Product__Image__Picture img {
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.Product__Image[data-scroll-fade=show] .Product__Image__Picture img {
  animation-name: picture-animation;
}
@keyframes picture-animation {
  0% {
    transform: translate3d(-40%, 60%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.Product__Variations {
  position: relative;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: rgba(255, 255, 255, 0.5);
}
@media screen and (min-width: 768.02px), print {
  .Product__Variations {
    border-radius: 16px;
  }
}
@media screen and (max-width: 768px) {
  .Product__Variations {
    margin-top: 60px;
  }
}

.Product__Variations__Title {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2941176471;
  color: #830065;
  text-align: center;
}

.Product__Variations__Slides {
  margin-top: 38px;
  font-size: 14px;
  font-weight: 700;
  line-height: 2.1428571429;
  color: #830065;
  text-align: center;
}
.Product__Variations__Slides > .swiper-wrapper {
  align-items: stretch;
}

.Product__Variations__Slide {
  position: relative;
}
@media screen and (min-width: 768.02px), print {
  .Product__Variations__Slide {
    width: 20%;
    margin-right: 20px;
    margin-left: 20px;
  }
}
@media screen and (max-width: 768px) {
  .Product__Variations__Slide {
    width: 33.3333333333%;
    margin-right: 24px;
    margin-left: 24px;
  }
}
.Product__Variations__Slide span {
  display: block;
  margin-top: 18px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.5s;
}
.Product__Variations__Slide.swiper-slide-active span {
  opacity: 1;
}

.Product__Variations__Buttons__Wrapper {
  display: grid;
  grid-auto-flow: column;
  column-gap: 28px;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}

.Product__Variations__Next,
.Product__Variations__Prev {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
@media screen and (max-width: 768px) {
  .Product__Variations__Next,
  .Product__Variations__Prev {
    display: none;
  }
}
.Product__Variations__Next::before,
.Product__Variations__Prev::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background-color: #830065;
  border-radius: 50%;
  transition: transform 0.3s;
}
.Product__Variations__Next::after,
.Product__Variations__Prev::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 40.33 33.69"><polygon points="23.82 0 21.7 2.12 34.92 15.35 0 15.35 0 18.34 34.26 18.34 21.04 31.57 23.16 33.69 40.33 16.52 23.82 0" fill="%23c0f2ea"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}
@media (hover: hover) {
  .Product__Variations__Next:where(:any-link, :enabled, summary):hover::before,
  .Product__Variations__Prev:where(:any-link, :enabled, summary):hover::before {
    transform: scale3d(1.1, 1.1, 1);
  }
}

.Product__Variations__Prev {
  transform: rotate(180deg);
}

.Product__Variations__Buttons {
  display: grid;
  grid-auto-flow: column;
  column-gap: 25px;
  justify-content: center;
}

.Product__Variations__Button {
  width: 40px;
}

[data-float] {
  opacity: 0;
  transition-duration: 0.5s;
  transition-property: transform, opacity;
  transform: translate3d(0, 20px, 0);
}
[data-float][data-float=show] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.AppHeading {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-weight: 700;
  color: #c0f2ea;
  text-align: center;
}
@media screen and (min-width: 768.02px), print {
  .AppHeading {
    height: 400px;
    font-size: 44px;
    line-height: 1.2727272727;
  }
}
@media screen and (max-width: 768px) {
  .AppHeading {
    height: 310px;
    line-height: 1.375;
  }
  .AppHeading:not(:lang(de)),
  .AppHeading:not(:lang(es)),
  .AppHeading:not(:lang(fr)) {
    font-size: 32px;
  }
  .AppHeading:lang(de),
  .AppHeading:lang(es),
  .AppHeading:lang(fr) {
    font-size: 28px;
  }
}
.AppHeading h2 {
  position: absolute;
  width: 12em;
}

.AppHeading__Image {
  position: absolute;
  width: 100%;
  height: 100%;
}
.AppHeading__Image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.FeaturesHeading {
  position: relative;
  z-index: 0;
  overflow: hidden;
  color: #c0f2ea;
  background-color: #c0f2ea;
}
.FeaturesHeading::before {
  position: absolute;
  right: 0;
  z-index: 1;
  width: 100%;
  content: "";
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><defs></defs><path id="icon_parts_corner.svg" class="cls-1" d="M0,309V109H200C89.543,109,0,198.543,0,309Z" transform="translate(0 -109)" fill="%23c0f2ea"/></svg>');
  background-size: cover;
  transform: rotate(90deg);
}
@media screen and (min-width: 768.02px), print {
  .FeaturesHeading::before {
    top: 119px;
    width: 120px;
    height: 120px;
  }
}
@media screen and (max-width: 768px) {
  .FeaturesHeading::before {
    top: 60px;
    width: 60px;
    height: 60px;
  }
}
.FeaturesHeading::after {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  content: "";
  background-color: #c0f2ea;
}
@media screen and (min-width: 768.02px), print {
  .FeaturesHeading::after {
    height: 120px;
    border-radius: 0 0 0 120px;
  }
}
@media screen and (max-width: 768px) {
  .FeaturesHeading::after {
    height: 60px;
    border-radius: 0 0 0 60px;
  }
}

.FeaturesHeading__Inner {
  position: relative;
  z-index: 0;
  font-weight: 700;
  line-height: 1;
}
@media screen and (min-width: 768.02px), print {
  .FeaturesHeading__Inner {
    padding-top: 37.4%;
    padding-bottom: 6.6%;
    font-size: 100px;
    background-color: #3f403c;
  }
}
@media screen and (max-width: 768px) {
  .FeaturesHeading__Inner {
    padding-top: 87.7%;
    padding-bottom: 10.6%;
    text-align: center;
    background-color: #333431;
  }
  .FeaturesHeading__Inner:not(:lang(es)) {
    font-size: 50px;
  }
  .FeaturesHeading__Inner:lang(es) {
    font-size: 46px;
  }
}
.FeaturesHeading__Inner::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background-image: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%);
  opacity: 0.6;
}
.FeaturesHeading__Inner h2 {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 419px) {
  .FeaturesHeading__Inner h2:lang(fr) {
    font-size: 11.9vw;
  }
}

.FeaturesHeading__Image {
  position: absolute;
  top: 68%;
  left: 50%;
  width: 100%;
  height: auto;
  box-shadow: 6px 10px 14px rgba(65, 19, 48, 0.3);
  transform: translate(-50%, -50%);
}
.FeaturesHeading__Image img {
  width: 100%;
}

.Features {
  overflow: hidden;
  background-color: #c75e86;
}

@media screen and (min-width: 768.02px), print {
  .Features__List {
    padding-top: 10vh;
  }
}
@media screen and (max-width: 768px) {
  .Features__List {
    padding-top: 60px;
  }
}

.Features__Item {
  position: relative;
}
@media screen and (max-width: 768px) {
  .Features__Item + .Features__Item {
    margin-top: 80px;
  }
}

.Features__Point {
  position: relative;
  font-family: "Noto Sans", sans-serif;
  color: #830065;
}
@media screen and (max-width: 768px) {
  .Features__Point {
    text-align: center;
  }
}

.Features__Point__Text {
  position: absolute;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__Text {
    top: 15px;
    left: -24px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__Text {
    top: 12px;
    left: calc(50% - 56px);
  }
}

.Features__Point__Number {
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
}

.Features__Main {
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768.02px), print {
  .Features__Main {
    max-width: 320px;
    padding-top: 16vh;
    padding-bottom: 16vh;
  }
}

.Features__Main__Title {
  font-weight: 700;
  color: #c0f2ea;
}
@media screen and (min-width: 768.02px), print {
  .Features__Main__Title {
    margin-top: 56px;
    font-size: 34px;
    line-height: 1.2941176471;
  }
}
@media screen and (max-width: 768px) {
  .Features__Main__Title {
    margin-top: 36px;
    font-size: 26px;
    line-height: 1.4615384615;
  }
}

.Features__Main__Text {
  margin-top: 14px;
}
@media screen and (min-width: 768.02px), print {
  .Features__Main__Text {
    font-size: 16px;
    line-height: 1.875;
  }
}
@media screen and (max-width: 768px) {
  .Features__Main__Text {
    font-size: 15px;
    line-height: 1.8666666667;
  }
}
.Features__Main__Text.Features__Main__Text--bold {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.Features__Main__Label {
  display: inline-block;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #830065;
  text-align: center;
  background-color: #c0f2ea;
  border-radius: 13.4px;
}
@media screen and (min-width: 768.02px), print {
  .Features__Main__Label {
    margin-top: 50px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Main__Label {
    margin-top: 44px;
  }
}
.Features__Main__Text + .Features__Main__Label {
  margin-top: 32px;
}

.Features__Box {
  background-color: #db86a6;
  border-radius: 16px;
}
@media screen and (min-width: 768.02px), print {
  .Features__Box {
    width: 300px;
    padding: 20px;
    margin-top: 25px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Box {
    padding: 20px 24px;
    margin-top: 30px;
  }
}

.Features__Box__Images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 6px;
}
@media screen and (min-width: 768.02px), print {
  .Features__Box__Images {
    column-gap: 18px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Box__Images {
    column-gap: 24px;
  }
}
.Features__Box__Images img {
  width: 100%;
  filter: drop-shadow(6px 8px 6px rgba(65, 19, 48, 0.25));
}

.Features__Box__Text {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.375;
  color: #830065;
  text-align: center;
}

.Features__Box__Caption {
  position: relative;
  z-index: 0;
  display: block;
  padding-top: 10px;
  padding-bottom: 6px;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #830065;
  text-align: center;
  background-color: #fff;
  border: 2px solid #830065;
  border-radius: 9999px;
}
.Features__Box__Caption strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
}
.Features__Box__Caption::before {
  position: absolute;
  top: -4px;
  left: 50%;
  z-index: -1;
  width: 14px;
  height: 14px;
  content: "";
  background-color: #fff;
  border-top: 2px solid #830065;
  border-left: 2px solid #830065;
  transform: translateX(-50%) rotate(45deg) skew(15deg, 15deg);
}

.Features__Image {
  z-index: 0;
}
@media screen and (min-width: 768.02px), print {
  .Features__Image {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
    transform: translateX(-50%);
  }
  [data-features=show] .Features__Image {
    visibility: visible;
    opacity: 1;
  }
}
@media screen and (max-width: 768px) {
  .Features__Image {
    position: relative;
    display: grid;
    justify-content: center;
    padding-bottom: 330px;
    margin-top: 40px;
  }
  .Features__Main__Text + .Features__Image {
    padding-bottom: 0;
  }
  .Features__Image.Features__Image--mt0 {
    margin-top: 0;
  }
}

.Features__Background {
  overflow: hidden;
  border-radius: 9999px;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@media screen and (min-width: 768.02px), print {
  .Features__Background {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 705px;
    height: 372px;
    transform: translate(-50%, -50%);
  }
  .Features__Background[data-features-image=show] {
    animation-name: mask-animation-background;
  }
}
@media screen and (max-width: 768px) {
  .Features__Background {
    position: relative;
    top: 50%;
    left: 50%;
    width: 520px;
    height: 312px;
  }
  .Features__Background[data-features-image] {
    transition-duration: 0s;
  }
  [data-features-fade=show] .Features__Background {
    animation-name: mask-animation-background;
  }
}
@keyframes mask-animation-background {
  0% {
    -webkit-clip-path: inset(50% 50% 50% round 0px);
            clip-path: inset(50% 50% 50% round 0px);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 round 200px);
            clip-path: inset(0 0 0 round 200px);
  }
}

.Features__Background__Main {
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 60px 0 rgba(220, 0, 82, 0.1);
}
.Features__Background.Features__Background--half .Features__Background__Main {
  background: linear-gradient(110deg, #830065 0%, #830065 50%, #db86a6 50%, #db86a6 100%);
}
.Features__Background.Features__Background--purple .Features__Background__Main {
  background-color: #830065;
}
.Features__Background.Features__Background--pink .Features__Background__Main {
  background-color: #db86a6;
}

.Features__Background__Icon {
  position: absolute;
  top: 50%;
  width: 72px;
  transform: translateY(-50%);
}
.Features__Background__Icon.Features__Background__Icon--left {
  left: 80px;
}
.Features__Background__Icon.Features__Background__Icon--right {
  right: 90px;
}
.Features__Background__Icon img {
  width: 100%;
}

.Features__Image__Camera {
  position: absolute;
  overflow: hidden;
}
@media screen and (min-width: 768.02px), print {
  .Features__Image__Camera {
    top: calc(50% - 46px);
    left: 50%;
    width: 705px;
    /* 背景の楕円と同じに切り抜く */
    border-radius: 0 0 187px 187px;
    transform: translate(-50%, -50%);
  }
}
@media screen and (max-width: 768px) {
  .Features__Image__Camera {
    left: 50%;
    /* 背景の楕円と同じに切り抜く */
    border-radius: 0 0 128px 128px;
    transform: translateX(-50%);
  }
  .Features__Item:nth-of-type(1) .Features__Image__Camera {
    top: calc(50% - 176px);
    width: 513px;
  }
  .Features__Item:nth-of-type(2) .Features__Image__Camera {
    top: calc(50% + 1px);
    width: 473px;
  }
  .Features__Item:nth-of-type(3) .Features__Image__Camera {
    top: calc(50% - 164px);
    width: 473px;
  }
}

.Features__Image__Operation {
  position: absolute;
}
@media screen and (min-width: 768.02px), print {
  .Features__Image__Operation {
    top: calc(50% - 70px);
    left: calc(50% + 50px);
    width: 310px;
    transform: translate(-50%, -50%);
  }
}
@media screen and (max-width: 768px) {
  .Features__Image__Operation {
    top: calc(50% - 18px);
    left: calc(50% + 34px);
    width: 190px;
    transform: translateX(-50%);
  }
}

.Features__Image__EnlargedView {
  position: absolute;
}
@media screen and (min-width: 768.02px), print {
  .Features__Image__EnlargedView {
    top: calc(50% - 90px);
    left: calc(50% + 108px);
    width: 420px;
    transform: translate(-50%, -50%);
  }
}
@media screen and (max-width: 768px) {
  .Features__Image__EnlargedView {
    top: calc(50% - 190px);
    left: calc(50% + 68px);
    width: 270px;
    transform: translateX(-50%);
  }
}

.Features__Image__Picture {
  position: absolute;
  filter: drop-shadow(6px 8px 6px rgba(65, 19, 48, 0.25));
  transform: translate(-50%, -50%);
}
.Features__Image__Picture.Features__Image__Picture--first {
  z-index: 1;
}
@media screen and (min-width: 768.02px), print {
  .Features__Image__Picture.Features__Image__Picture--first {
    top: calc(50% + 140px);
    left: calc(50% + 404px);
    width: 251px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Image__Picture.Features__Image__Picture--first {
    top: calc(50% + 196px);
    left: calc(50% - 40px);
    width: 200px;
  }
  .Features__Item:nth-of-type(2) .Features__Image__Picture.Features__Image__Picture--first {
    top: calc(50% + 40px);
  }
}
@media screen and (min-width: 768.02px), print {
  .Features__Image__Picture.Features__Image__Picture--second {
    top: calc(50% + 60px);
    left: calc(50% + 522px);
    width: 218px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Image__Picture.Features__Image__Picture--second {
    top: calc(50% + 150px);
    left: calc(50% + 54px);
    width: 175px;
  }
  .Features__Item:nth-of-type(2) .Features__Image__Picture.Features__Image__Picture--second {
    top: calc(50% - 10px);
  }
}

.Features__Links {
  position: relative;
  z-index: 1;
  display: grid;
  line-height: 1.3;
  color: #c0f2ea;
  /* 子要素が2つだけだった場合 */
}
@media screen and (min-width: 768.02px), print {
  .Features__Links {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    row-gap: 24px;
    column-gap: 2.5%;
    margin-top: 4vh;
    font-size: 20px;
  }
  .Features__Links:lang(de) {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    font-size: 18px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Links {
    gap: 16px;
    margin-top: 60px;
    font-size: 18px;
  }
  .Features__Links:lang(de) {
    font-size: 16px;
  }
}
.Features__Links > li > a {
  position: relative;
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
  font-weight: 700;
  border-radius: 55.5px;
  box-shadow: inset 0 0 0 60px #830065;
  transition: box-shadow 0.3s, transform 0.3s;
  transform: scale3d(1, 1, 1);
  will-change: transform;
}
@media (hover: hover) {
  .Features__Links > li > a:where(:any-link, :enabled, summary):hover {
    color: #830065;
    box-shadow: inset 0 0 0 2px #830065;
    transform: scale3d(1.1, 1.1, 1);
  }
}
@media screen and (min-width: 768.02px), print {
  .Features__Links > li > a {
    column-gap: 20px;
    padding: 30px 56px 30px 31px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Links > li > a {
    column-gap: 14px;
    padding: 21px 48px 21px 22px;
  }
}
.Features__Links > li > a::after {
  position: absolute;
  top: 52%;
  display: block;
  width: 24px;
  height: 24px;
  content: "";
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 40.33 33.69"><polygon points="23.82 0 21.7 2.12 34.92 15.35 0 15.35 0 18.34 34.26 18.34 21.04 31.57 23.16 33.69 40.33 16.52 23.82 0" fill="%23c0f2ea"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translate(50%, -50%);
}
@media screen and (min-width: 768.02px), print {
  .Features__Links > li > a::after {
    right: 40px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Links > li > a::after {
    right: 32px;
  }
}
@media (hover: hover) {
  .Features__Links > li > a:where(:any-link, :enabled, summary):hover::after {
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 40.33 33.69"><polygon points="23.82 0 21.7 2.12 34.92 15.35 0 15.35 0 18.34 34.26 18.34 21.04 31.57 23.16 33.69 40.33 16.52 23.82 0" fill="%23830065"/></svg>');
  }
}
.Features__Links > li > a img {
  width: 100%;
  height: auto;
}
@media screen and (min-width: 768.02px), print {
  .Features__Links.Features__Links--2item {
    display: flex;
    justify-content: center;
  }
  .Features__Links.Features__Links--2item > li {
    width: 50%;
    max-width: 440px;
  }
}

.Features__Links__Icon {
  width: 50px;
  height: 50px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: cover;
          mask-size: cover;
  background-color: currentColor;
}
.Features__Links__Icon.Features__Links__Icon--shopping {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><path d="m40,2.6c20.622,0,37.4,16.778,37.4,37.4s-16.778,37.4-37.4,37.4S2.6,60.622,2.6,40,19.378,2.6,40,2.6m0-2.6C17.909,0,0,17.909,0,40s17.909,40,40,40,40-17.909,40-40S62.091,0,40,0h0Z" fill="%23c0f2ea"/><path d="m52.078,47.121h-26.127c-.493,0-.912-.359-.988-.846l-2.484-15.892c-.19-1.213.748-2.309,1.976-2.309h30.599" fill="none" stroke="%23c0f2ea" stroke-miterlimit="10" stroke-width="2.6"/><path d="m26.203,53.746h23.13c.985,0,1.824-.718,1.976-1.691l5.014-32.084c.152-.974.991-1.691,1.976-1.691h4.828" fill="none" stroke="%23c0f2ea" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.6"/><g><circle cx="29.419" cy="61.287" r="3.269" fill="none" stroke="%23c0f2ea" stroke-miterlimit="10" stroke-width="2.6"/><circle cx="48.091" cy="61.287" r="3.269" fill="none" stroke="%23c0f2ea" stroke-miterlimit="10" stroke-width="2.6"/></g><line x1="23.607" y1="37.598" x2="53.137" y2="37.598" fill="none" stroke="%23c0f2ea" stroke-miterlimit="10" stroke-width="2.6"/><g><g><line x1="33.711" y1="28.075" x2="33.711" y2="46.826" fill="none" stroke="%23fff" stroke-miterlimit="10" stroke-width="1.411"/><line x1="43.462" y1="28.075" x2="43.462" y2="46.826" fill="none" stroke="%23fff" stroke-miterlimit="10" stroke-width="1.411"/></g><g><line x1="33.711" y1="28.075" x2="33.711" y2="46.826" fill="none" stroke="%23c0f2ea" stroke-miterlimit="10" stroke-width="2.6"/><line x1="43.462" y1="28.075" x2="43.462" y2="46.826" fill="none" stroke="%23c0f2ea" stroke-miterlimit="10" stroke-width="2.6"/></g></g></svg>');
          mask-image: url('data:image/svg+xml;charset=utf8,<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><path d="m40,2.6c20.622,0,37.4,16.778,37.4,37.4s-16.778,37.4-37.4,37.4S2.6,60.622,2.6,40,19.378,2.6,40,2.6m0-2.6C17.909,0,0,17.909,0,40s17.909,40,40,40,40-17.909,40-40S62.091,0,40,0h0Z" fill="%23c0f2ea"/><path d="m52.078,47.121h-26.127c-.493,0-.912-.359-.988-.846l-2.484-15.892c-.19-1.213.748-2.309,1.976-2.309h30.599" fill="none" stroke="%23c0f2ea" stroke-miterlimit="10" stroke-width="2.6"/><path d="m26.203,53.746h23.13c.985,0,1.824-.718,1.976-1.691l5.014-32.084c.152-.974.991-1.691,1.976-1.691h4.828" fill="none" stroke="%23c0f2ea" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.6"/><g><circle cx="29.419" cy="61.287" r="3.269" fill="none" stroke="%23c0f2ea" stroke-miterlimit="10" stroke-width="2.6"/><circle cx="48.091" cy="61.287" r="3.269" fill="none" stroke="%23c0f2ea" stroke-miterlimit="10" stroke-width="2.6"/></g><line x1="23.607" y1="37.598" x2="53.137" y2="37.598" fill="none" stroke="%23c0f2ea" stroke-miterlimit="10" stroke-width="2.6"/><g><g><line x1="33.711" y1="28.075" x2="33.711" y2="46.826" fill="none" stroke="%23fff" stroke-miterlimit="10" stroke-width="1.411"/><line x1="43.462" y1="28.075" x2="43.462" y2="46.826" fill="none" stroke="%23fff" stroke-miterlimit="10" stroke-width="1.411"/></g><g><line x1="33.711" y1="28.075" x2="33.711" y2="46.826" fill="none" stroke="%23c0f2ea" stroke-miterlimit="10" stroke-width="2.6"/><line x1="43.462" y1="28.075" x2="43.462" y2="46.826" fill="none" stroke="%23c0f2ea" stroke-miterlimit="10" stroke-width="2.6"/></g></g></svg>');
}
.Features__Links__Icon.Features__Links__Icon--spec {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><path d="m40,2.6c20.622,0,37.4,16.778,37.4,37.4s-16.778,37.4-37.4,37.4S2.6,60.622,2.6,40,19.378,2.6,40,2.6m0-2.6C17.909,0,0,17.909,0,40s17.909,40,40,40,40-17.909,40-40S62.091,0,40,0h0Z" fill="%23c0f2ea"/><g><path d="m32.172,17.879h21.238c3.258,0,5.903,2.645,5.903,5.903v33.846c0,2.925-2.375,5.3-5.3,5.3h-27.356c-2.925,0-5.3-2.375-5.3-5.3v-28.933c0-5.969,4.846-10.816,10.816-10.816Z" fill="none" stroke="%23c0f2ea" stroke-miterlimit="10" stroke-width="2.6"/><circle cx="45.81" cy="45.334" r="12.713" fill="none" stroke="%23c0f2ea" stroke-miterlimit="10" stroke-width="2.6"/><circle cx="45.81" cy="45.334" r="4.285" fill="%23c0f2ea"/><rect x="24.975" y="25.167" width="3.13" height="4.5" rx="1.565" ry="1.565" fill="%23c0f2ea"/><rect x="31.688" y="20.79" width="5.002" height="9.982" rx="2.501" ry="2.501" fill="none" stroke="%23c0f2ea" stroke-miterlimit="10" stroke-width="2.6"/></g></svg>');
          mask-image: url('data:image/svg+xml;charset=utf8,<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><path d="m40,2.6c20.622,0,37.4,16.778,37.4,37.4s-16.778,37.4-37.4,37.4S2.6,60.622,2.6,40,19.378,2.6,40,2.6m0-2.6C17.909,0,0,17.909,0,40s17.909,40,40,40,40-17.909,40-40S62.091,0,40,0h0Z" fill="%23c0f2ea"/><g><path d="m32.172,17.879h21.238c3.258,0,5.903,2.645,5.903,5.903v33.846c0,2.925-2.375,5.3-5.3,5.3h-27.356c-2.925,0-5.3-2.375-5.3-5.3v-28.933c0-5.969,4.846-10.816,10.816-10.816Z" fill="none" stroke="%23c0f2ea" stroke-miterlimit="10" stroke-width="2.6"/><circle cx="45.81" cy="45.334" r="12.713" fill="none" stroke="%23c0f2ea" stroke-miterlimit="10" stroke-width="2.6"/><circle cx="45.81" cy="45.334" r="4.285" fill="%23c0f2ea"/><rect x="24.975" y="25.167" width="3.13" height="4.5" rx="1.565" ry="1.565" fill="%23c0f2ea"/><rect x="31.688" y="20.79" width="5.002" height="9.982" rx="2.501" ry="2.501" fill="none" stroke="%23c0f2ea" stroke-miterlimit="10" stroke-width="2.6"/></g></svg>');
}
.Features__Links__Icon.Features__Links__Icon--manual {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><path d="m40,2.6c20.622,0,37.4,16.778,37.4,37.4s-16.778,37.4-37.4,37.4S2.6,60.622,2.6,40,19.378,2.6,40,2.6m0-2.6C17.909,0,0,17.909,0,40s17.909,40,40,40,40-17.909,40-40S62.091,0,40,0h0Z" fill="%23c0f2ea"/><path d="m61.228,26.845c-6.943-1.528-14.275-1.541-21.228-.053-6.953-1.487-14.285-1.474-21.228.053-.596.131-1.021.659-1.021,1.27v25.803c0,.394.178.767.485,1.013.307.248.709.343,1.094.256,6.662-1.465,13.707-1.466,20.37-.004.003,0,.005,0,.008.002.004,0,.008.001.012.002.026.006.052.004.078.008.066.01.132.022.2.022,0,0,0,0,.001,0,.001,0,.003,0,.004,0,.092,0,.184-.009.275-.03,6.669-1.467,13.721-1.467,20.39,0,.093.021.186.03.279.03.293,0,.582-.099.814-.287.307-.247.485-.619.485-1.013v-25.803c0-.61-.424-1.139-1.021-1.27Zm-40.876,25.483v-23.156c6.024-1.184,12.324-1.184,18.349,0v23.156c-3.017-.56-6.096-.84-9.174-.84s-6.157.28-9.174.84Zm39.297,0c-3.017-.56-6.096-.84-9.174-.84s-6.157.28-9.174.84v-23.156c6.024-1.184,12.324-1.184,18.349,0v23.156Z" fill="%23c0f2ea"/></svg>');
          mask-image: url('data:image/svg+xml;charset=utf8,<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><path d="m40,2.6c20.622,0,37.4,16.778,37.4,37.4s-16.778,37.4-37.4,37.4S2.6,60.622,2.6,40,19.378,2.6,40,2.6m0-2.6C17.909,0,0,17.909,0,40s17.909,40,40,40,40-17.909,40-40S62.091,0,40,0h0Z" fill="%23c0f2ea"/><path d="m61.228,26.845c-6.943-1.528-14.275-1.541-21.228-.053-6.953-1.487-14.285-1.474-21.228.053-.596.131-1.021.659-1.021,1.27v25.803c0,.394.178.767.485,1.013.307.248.709.343,1.094.256,6.662-1.465,13.707-1.466,20.37-.004.003,0,.005,0,.008.002.004,0,.008.001.012.002.026.006.052.004.078.008.066.01.132.022.2.022,0,0,0,0,.001,0,.001,0,.003,0,.004,0,.092,0,.184-.009.275-.03,6.669-1.467,13.721-1.467,20.39,0,.093.021.186.03.279.03.293,0,.582-.099.814-.287.307-.247.485-.619.485-1.013v-25.803c0-.61-.424-1.139-1.021-1.27Zm-40.876,25.483v-23.156c6.024-1.184,12.324-1.184,18.349,0v23.156c-3.017-.56-6.096-.84-9.174-.84s-6.157.28-9.174.84Zm39.297,0c-3.017-.56-6.096-.84-9.174-.84s-6.157.28-9.174.84v-23.156c6.024-1.184,12.324-1.184,18.349,0v23.156Z" fill="%23c0f2ea"/></svg>');
}

.Features__Copy {
  height: 400vh;
}

.Features__Copy__Inner {
  position: relative;
  display: grid;
  align-items: center;
  height: calc(100vh - (var(--local-nav-height)));
  font-weight: 700;
  color: #c0f2ea;
  text-align: center;
}
@media screen and (min-width: 768.02px), print {
  .Features__Copy__Inner {
    font-size: 64px;
    line-height: 1.09375;
  }
}
@media screen and (max-width: 768px) {
  .Features__Copy__Inner {
    font-size: 36px;
    line-height: 1.3888888889;
  }
}

.Features__Copy__Images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.Features__Copy__Layout {
  position: relative;
  width: 100%;
  height: 100%;
}

.Features__Copy__Image {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 240px;
  filter: drop-shadow(6px 8px 6px rgba(65, 19, 48, 0.25));
  transform-origin: center;
  will-change: transform;
}
@media screen and (min-width: 768.02px), print {
  .Features__Copy__Image {
    width: 15.5%;
  }
}
@media screen and (max-width: 768px) {
  .Features__Copy__Image {
    width: 25%;
  }
}

[data-features-image] {
  opacity: 0;
  transition-duration: 0.5s;
  transition-property: transform, opacity;
  transform: translate(-50%, -50%) translate3d(0, 20px, 0);
}
@media screen and (min-width: 768.02px), print {
  [data-features-image][data-features-image=show] {
    opacity: 1;
    transform: translate(-50%, -50%) translate3d(0, 0, 0);
  }
  [data-features-image][data-features-image=show]:nth-of-type(n + 2) {
    transition-delay: 0.5s;
  }
}
@media screen and (max-width: 768px) {
  [data-features-fade=show] [data-features-image] {
    opacity: 1;
    transform: translate(-50%, -50%) translate3d(0, 0, 0);
  }
  [data-features-image]:nth-of-type(2) {
    transition-delay: 0.5s;
  }
  [data-features-image]:nth-of-type(3) {
    transition-delay: 1s;
  }
  [data-features-image]:nth-of-type(4) {
    transition-delay: 1.5s;
  }
  [data-features-image]:nth-of-type(5) {
    transition-delay: 2s;
  }
  [data-features-image]:nth-of-type(6) {
    transition-delay: 2.5s;
  }
  [data-features-image]:nth-of-type(7) {
    transition-delay: 3s;
  }
  [data-features-image]:nth-of-type(8) {
    transition-delay: 3.5s;
  }
  [data-features-image]:nth-of-type(9) {
    transition-delay: 4s;
  }
  [data-features-image]:nth-of-type(10) {
    transition-delay: 4.5s;
  }
  [data-features-image]:nth-of-type(11) {
    transition-delay: 5s;
  }
}
[data-features-image].Features__Image__Camera {
  transform: translate(-50%, -50%) translate3d(0, 0, 0);
}

@media screen and (max-width: 768px) {
  [data-features-fade] {
    opacity: 0;
    transition-duration: 0.5s;
    transition-property: transform, opacity;
    transform: translate3d(0, 20px, 0);
  }
  [data-features-fade][data-features-fade=show] {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.Supplies {
  overflow: hidden;
  background-color: #830065;
}
@media screen and (min-width: 768.02px), print {
  .Supplies {
    padding-top: 120px;
    padding-bottom: 92px;
  }
}
@media screen and (max-width: 768px) {
  .Supplies {
    padding-top: 60px;
    padding-bottom: 50px;
  }
}

@media screen and (min-width: 768.02px), print {
  .Supplies__Section {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: 98px;
    column-gap: 14%;
  }
}

.Supplies__Heading {
  position: relative;
  font-weight: 700;
  color: #c0f2ea;
}
.Supplies__Heading span {
  display: block;
}
@media screen and (min-width: 768.02px), print {
  .Supplies__Heading {
    align-self: start;
    justify-self: start;
    font-size: 42px;
  }
}
@media screen and (max-width: 768px) {
  .Supplies__Heading {
    margin-bottom: 40px;
    font-size: 36px;
    text-align: center;
  }
  .Supplies__Heading:not(:first-child) {
    margin-top: 70px;
  }
}

.Supplies__Button {
  display: block;
  width: 100%;
  max-width: 136px;
  margin-top: 28px;
  font-size: 14px;
  font-weight: 700;
  color: #830065;
  text-align: center;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 35px #c0f2ea;
  transition: box-shadow 0.3s, transform 0.3s;
  transform: scale3d(1, 1, 1);
  will-change: transform;
}
.Supplies__Button:not(:lang(fr)) {
  padding: 15px 24px;
}
.Supplies__Button:lang(fr) {
  padding: 15px 12px;
}

@media (hover: hover) {
  .Supplies__Button:where(:any-link, :enabled, summary):hover {
    color: #c0f2ea;
    box-shadow: inset 0 0 0 2px #c0f2ea;
    transform: scale3d(1.1, 1.1, 1);
  }
}
@media screen and (max-width: 768px) {
  .Supplies__Button {
    margin-right: auto;
    margin-left: auto;
  }
}

.Supplies__Film {
  position: relative;
  z-index: 0;
  display: grid;
}
@media screen and (min-width: 768.02px), print {
  .Supplies__Film {
    grid-template-columns: 2.4fr 5fr;
    row-gap: 40px;
    column-gap: 20px;
  }
}
@media screen and (max-width: 768px) {
  .Supplies__Film {
    row-gap: 20px;
  }
}
.Supplies__Film img {
  width: 100%;
}

@media screen and (min-width: 768.02px), print {
  .Supplies__Film__Head {
    display: flex;
    grid-column: span 2;
    align-items: center;
    justify-content: space-between;
  }
}
@media screen and (max-width: 768px) {
  .Supplies__Film__Head {
    display: grid;
    align-self: center;
  }
}

.Supplies__Film__Package img,
.Supplies__Film__Example img {
  filter: drop-shadow(6px 10px 6px rgba(0, 0, 0, 0.2));
}

.Supplies__Film__Package {
  justify-self: center;
}
@media screen and (min-width: 768.02px), print {
  .Supplies__Film__Package {
    grid-row-start: 2;
    grid-column-start: 1;
    width: 71%;
  }
}
@media screen and (max-width: 768px) {
  .Supplies__Film__Package {
    width: 40%;
  }
}

@media screen and (min-width: 768.02px), print {
  .Supplies__Film__Example {
    grid-row-start: 2;
    grid-column-start: 2;
    padding-right: 4.5%;
  }
}

.Supplies__Label {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: #c0f2ea;
}
@media screen and (min-width: 768.02px), print {
  .Supplies__Label {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 768px) {
  .Supplies__Label {
    margin-bottom: 0;
    text-align: center;
  }
}
.Supplies__Film__Head .Supplies__Label {
  margin-top: 0;
  margin-bottom: 0;
}

.Supplies__Row {
  display: grid;
}
@media screen and (min-width: 768.02px), print {
  .Supplies__Row {
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    column-gap: 28px;
  }
}
@media screen and (max-width: 768px) {
  .Supplies__Row {
    row-gap: 40px;
  }
  .Supplies__Row__Image {
    margin-top: 12px;
  }
}
.Supplies__Row__Image img {
  width: 100%;
}

.Supplies__Notes {
  font-size: 11px;
  line-height: 1.6363636364;
  color: #fff;
}
@media screen and (min-width: 768.02px), print {
  .Supplies__Notes {
    margin-top: 52px;
  }
}
@media screen and (max-width: 768px) {
  .Supplies__Notes {
    margin-top: 40px;
  }
}
.Supplies__Notes li {
  display: flex;
  opacity: 0.6;
}
.Supplies__Notes li span {
  display: inline-block;
  margin-right: 5px;
}

.Tutorial {
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768.02px), print {
  .Tutorial {
    margin-top: 100px;
  }
}
@media screen and (max-width: 768px) {
  .Tutorial {
    margin-top: 40px;
  }
}
.Tutorial::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: -1;
  height: 2px;
  content: "";
  background-color: #c0f2ea;
}

.ManualList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
  grid-auto-rows: minmax(120px, 1fr);
  row-gap: 44px;
  column-gap: 5%;
  color: #fff;
}
@media screen and (min-width: 768.02px), print {
  .ManualList {
    margin-top: 76px;
  }
}
@media screen and (max-width: 768px) {
  .ManualList {
    margin-top: 40px;
  }
}

.ManualList__Link {
  display: grid;
  grid-auto-flow: row;
  row-gap: 12px;
  text-align: center;
  transition: opacity 0.2s;
}
@media (hover: hover) {
  .ManualList__Link:where(:any-link, :enabled, summary):hover {
    opacity: 0.7;
  }
}

.ManualList__Icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 58px;
  font-weight: 700;
  background-image: url('data:image/svg+xml;charset=utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 45 57"><path fill="%23FFFFFF" d="M38.1,6.6L31.3,0H0v57h45V13.2L38.1,6.6z M41.8,12.9H31.6V3.1l5.2,5L41.8,12.9z M2,55V2h27.6v12.9H43V55H2z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ManualList__Text {
  font-size: 16px;
  line-height: 1.5;
}

.Spec {
  margin-right: auto;
  margin-left: auto;
  background-color: #c75e86;
}
@media screen and (min-width: 768.02px), print {
  .Spec {
    padding-top: 80px;
    padding-bottom: 88px;
  }
}
@media screen and (max-width: 768px) {
  .Spec {
    padding-top: 60px;
    padding-bottom: 80px;
  }
}
.Spec h1 {
  font-weight: 700;
  line-height: 1.2;
  color: #c0f2ea;
  text-align: center;
}
@media screen and (min-width: 768.02px), print {
  .Spec h1 {
    font-size: 44px;
  }
}
@media screen and (max-width: 768px) {
  .Spec h1 {
    font-size: 32px;
  }
}

.Spec__List {
  display: grid;
  line-height: 1.875;
  color: #fff;
}
@media screen and (min-width: 768.02px), print {
  .Spec__List {
    margin-top: 72px;
  }
}
@media screen and (max-width: 768px) {
  .Spec__List {
    margin-top: 50px;
  }
}
.Spec__List > li {
  display: grid;
  background-image: linear-gradient(to right, #c0f2ea 0 28%, rgba(255, 255, 255, 0.2) 28% 100%);
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% 1px;
}
.Spec__List > li:last-child {
  background-image: linear-gradient(to right, #c0f2ea 0 28%, rgba(255, 255, 255, 0.2) 28% 100%), linear-gradient(to right, #c0f2ea 0 28%, rgba(255, 255, 255, 0.2) 28% 100%);
  background-position: top, bottom;
}
@media screen and (min-width: 768.02px), print {
  .Spec__List > li {
    grid-template-columns: 28% 1fr;
    column-gap: 28px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}
@media screen and (max-width: 768px) {
  .Spec__List > li {
    row-gap: 8px;
    padding-top: 18px;
    padding-bottom: 18px;
  }
}

.Spec__Heading {
  font-weight: 700;
}

.Spec__Notes {
  margin-top: 40px;
  font-size: 13px;
  line-height: 1.8461538462;
  color: #fff;
  opacity: 0.6;
}
.Spec__Notes > li {
  position: relative;
  padding-left: 20px;
}
.Spec__Notes > li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "●";
}

.PromotionalVideo {
  position: relative;
  z-index: 0;
}
@media screen and (min-width: 768.02px), print {
  .PromotionalVideo {
    padding-bottom: 100px;
  }
}
@media screen and (max-width: 768px) {
  .PromotionalVideo {
    padding-top: 30px;
    padding-bottom: 60px;
  }
}
.PromotionalVideo::before {
  position: absolute;
  right: 0;
  bottom: -2px;
  z-index: -1;
  width: 50%;
  height: 50%;
  content: "";
  background-color: #c0f2ea;
}
.PromotionalVideo::after {
  position: absolute;
  top: -2px;
  right: 0;
  bottom: -2px;
  left: 0;
  z-index: -1;
  content: "";
  background-color: #c75e86;
}
@media screen and (min-width: 768.02px), print {
  .PromotionalVideo::after {
    border-radius: 0 0 120px 0;
  }
}
@media screen and (max-width: 768px) {
  .PromotionalVideo::after {
    border-radius: 0 0 50px 0;
  }
}

.tw-relative{
  position: relative;
}

.tw-inline-block{
  display: inline-block;
}

@media screen and (min-width: 768.02px), print{
  .pc\:tw-inline-block{
    display: inline-block;
  }
  .pc\:tw-hidden{
    display: none;
  }
}

@media screen and (max-width: 768px){
  .sp\:tw-hidden{
    display: none;
  }
}

.Information {
  background-color: #c75e86;
}
@media screen and (max-width: 768px) {
  .Information {
    margin-top: clamp(-55px, -13.3vw, -35px);
  }
  .Information:lang(en), .Information:lang(fr), .Information:lang(de), .Information:lang(pt), .Information:lang(es) {
    margin-top: clamp(-50px, -9vw, -20px);
  }
}

.Information__Inner {
  position: relative;
  display: grid;
  color: #830065;
  background-color: #c0f2ea;
  border-radius: 32px;
}
@media screen and (min-width: 768.02px), print {
  .Information__Inner {
    grid-template-columns: auto 1fr;
    grid-auto-flow: column;
    column-gap: 34px;
    padding: 22px 115px 22px 41px;
  }
}
@media screen and (max-width: 768px) {
  .Information__Inner {
    row-gap: 10px;
    padding: 28px 64px 26px 19px;
  }
}

.Information__Label {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.Information__List {
  overflow: hidden;
}
.Information__List[aria-hidden=true] {
  height: 0;
}
.Information__List > li {
  display: grid;
}
@media screen and (min-width: 768.02px), print {
  .Information__List > li {
    //grid-template-columns: auto 1fr;
    justify-content: start;
    grid-auto-flow: column;
    column-gap: 18px;
    align-items: baseline;
  }
}
@media screen and (max-width: 768px) {
  .Information__List > li {
    row-gap: 4px;
    justify-items: start;
    display: inline-block;
  }
}
.Information__List > li:not(:first-child), .Information__List + .Information__List > li:first-child {
  margin-top: 20px;
}

.Information__Date {
  padding: 4px 12px;
  font-size: 13px;
  line-height: 1;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 10.5px;
}

.Information__Text {
  line-height: 1.875;
}
@media screen and (min-width: 768.02px), print {
  .Information__Text {
    font-size: 16px;
  }
}
@media screen and (max-width: 768px) {
  .Information__Text {
    display: block;
    font-size: 15px;
    margin-top: 9px;
  }
}
.Information__Text[data-text-show=false] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
@media screen and (min-width: 768.02px), print {
  .Information__Text[data-text-show=false] {
    -webkit-line-clamp: 1;
  }
}
@media screen and (max-width: 768px) {
  .Information__Text[data-text-show=false] {
    -webkit-line-clamp: 2;
  }
}
.Information__Text a[href] {
  background-image: linear-gradient(to top, #830065 0 1px, transparent 1px 100%);
  transition: opacity 0.2s;
}
@media (hover: hover) {
  .Information__Text a[href]:where(:any-link, :enabled, summary):hover {
    opacity: 0.7;
  }
}

.Information__New {
    color: #f266bf;
}

@media screen and (min-width: 768.02px),
print {
    .Information__New {
        // margin-right: 16px;
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) {
    .Information__New {
        margin-left: 16px;
        font-size: 14px;
    }
}

.Information__Button {
  position: absolute;
  width: 40px;
  height: 40px;
  transform: translateY(50%);
}
@media screen and (min-width: 768.02px), print {
  .Information__Button {
    top: -3px;
    right: 30px;
  }
}
@media screen and (max-width: 768px) {
  .Information__Button {
    right: 12px;
    bottom: 32px;
  }
}
.Information__Button::before, .Information__Button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 14px;
  height: 2px;
  content: "";
  background-color: #ffd940;
}
.Information__Button::before {
  transform: translate(-50%, -50%);
}
.Information__Button::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.Information__Button[aria-expanded=true]::after {
  transform: translate(-50%, -50%);
}

.Information__Button__Circle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #685bc7;
  border-radius: 50%;
  transition: transform 0.3s;
  transform: translate(-50%, -50%) scale3d(1, 1, 1);
}
@media (hover: hover) {
  :where(:any-link, :enabled, summary):hover .Information__Button__Circle {
    transform: translate(-50%, -50%) scale3d(1.1, 1.1, 1);
  }
}