@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;
}
main button {
  background: transparent;
}
main select {
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
}
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: #262626;
  image-rendering: -webkit-optimize-contrast;
  background-color: #999;
}
main ::-webkit-full-page-media,
main :future, :root main {
  image-rendering: auto;
}
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);
}
main [data-hover] {
  position: relative;
}
main [data-hover-after],
main [data-hover-before] {
  position: absolute;
  top: 0;
  left: 0;
}
main [data-hover-after] {
  visibility: hidden;
  opacity: 0;
}

@keyframes splide-loading {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
.splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.splide__track--fade > .splide__list > .splide__slide {
  margin: 0 !important;
  opacity: 0;
  z-index: 0;
}

.splide__track--fade > .splide__list > .splide__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.splide--rtl {
  direction: rtl;
}

.splide__track--ttb > .splide__list {
  display: block;
}

.splide__container {
  box-sizing: border-box;
  position: relative;
}

.splide__list {
  backface-visibility: hidden;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.splide.is-initialized:not(.is-active) .splide__list {
  display: block;
}

.splide__pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}

.splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  pointer-events: auto;
}

.splide:not(.is-overflow) .splide__pagination {
  display: none;
}

.splide__progress__bar {
  width: 0;
}

.splide {
  position: relative;
  visibility: hidden;
}

.splide.is-initialized, .splide.is-rendered {
  visibility: visible;
}

.splide__slide {
  backface-visibility: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative;
}

.splide__slide img {
  vertical-align: bottom;
}

.splide__spinner {
  animation: splide-loading 1s linear infinite;
  border: 2px solid #999;
  border-left-color: transparent;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
}

.splide__sr {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause {
  display: none;
}

.splide__toggle.is-active .splide__toggle__pause {
  display: inline;
}

.splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.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;
  display: block;
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  border-radius: 9999px;
}
.Button.Button--plus {
  padding: 17px 49px;
  color: #ffd940;
  box-shadow: inset 0 0 0 2px #685bc7;
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  transform: scale3d(1, 1, 1);
  will-change: transform;
}
@media (hover: hover) {
  .Button.Button--plus:where(:any-link, :enabled, summary):hover {
    color: #262626;
    box-shadow: inset 0 0 0 35px #685bc7;
    transform: scale3d(1.1, 1.1, 1);
  }
}
.Button.Button--plus::before, .Button.Button--plus::after {
  position: absolute;
  top: 50%;
  right: 12px;
  display: block;
  width: 13px;
  content: "";
  border-top: 1px solid currentColor;
}
.Button.Button--plus::before {
  transform: translateX(-50%) rotate(90deg);
}
.Button.Button--plus::after {
  transform: translateX(-50%);
}
.Button.Button--close {
  padding-right: 38px;
  color: #d9ffff;
  background-color: #262626;
}
.Button.Button--close::before, .Button.Button--close::after {
  position: absolute;
  top: 50%;
  right: 16px;
  display: block;
  width: 10px;
  content: "";
  border-top: 1px solid #d9ffff;
}
.Button.Button--close::before {
  transform: translateX(-50%) rotate(45deg);
}
.Button.Button--close::after {
  transform: translateX(-50%) rotate(-45deg);
}
.Button.Button--transparent {
  color: #685bc7;
  box-shadow: inset 0 0 0 2px #685bc7;
  transition: box-shadow 0.3s, transform 0.3s;
  transform: scale3d(1, 1, 1);
  will-change: transform;
}
@media (hover: hover) {
  .Button.Button--transparent:where(:any-link, :enabled, summary):hover {
    color: #ffd940;
    box-shadow: inset 0 0 0 35px #685bc7;
    transform: scale3d(1.1, 1.1, 1);
  }
}
.Button.Button--Arrow {
  padding: 17.5px 30px 17.5px 18px;
  color: #d9ffff;
  box-shadow: inset 0 0 0 2px #d9ffff;
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  transform: scale3d(1, 1, 1);
  will-change: transform;
}
@media (hover: hover) {
  .Button.Button--Arrow:where(:any-link, :enabled, summary):hover {
    color: #262626;
    box-shadow: inset 0 0 0 35px #d9ffff;
    transform: scale3d(1.1, 1.1, 1);
  }
}
.Button.Button--Arrow::after {
  position: absolute;
  top: 50%;
  right: 19px;
  display: block;
  width: 12px;
  height: 15px;
  content: "";
  background-color: currentColor;
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.39858 6.72739L4.44952 11.6765L5.86373 13.0907L10.8128 8.14161L10.8133 8.14214L12.2275 6.72792L12.227 6.72739L12.2277 6.72671L10.8135 5.3125L10.8128 5.31318L5.86358 0.363961L4.44936 1.77817L9.39858 6.72739Z"/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.39858 6.72739L4.44952 11.6765L5.86373 13.0907L10.8128 8.14161L10.8133 8.14214L12.2275 6.72792L12.227 6.72739L12.2277 6.72671L10.8135 5.3125L10.8128 5.31318L5.86358 0.363961L4.44936 1.77817L9.39858 6.72739Z"/></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  transform: translateY(-50%);
}

.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--wide {
    max-width: 1340px;
    max-width: clamp(1340px, 93.0555555556vw, 1608px);
  }
}
@media screen and (max-width: 768px) {
  .Width {
    width: 90%;
  }
}

.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 {
  object-fit: cover;
}
.VideoPlayer.VideoPlayer--tutorial {
  background-color: #262626;
  animation-name: mask-animation-tutorial;
}
@media screen and (min-width: 768.02px), print {
  .VideoPlayer.VideoPlayer--tutorial {
    --aspect-ratio: 0.328358209;
  }
  .VideoPlayer.VideoPlayer--tutorial:focus-within .VideoPlayer__Play::before {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@media screen and (max-width: 768px) {
  .VideoPlayer.VideoPlayer--tutorial {
    --aspect-ratio: 1.675;
    display: grid;
    height: auto;
    min-height: 200px;
    aspect-ratio: var(--aspect-ratio);
    padding-top: 0;
  }
}

@keyframes mask-animation-tutorial {
  0% {
    -webkit-clip-path: inset(0 100% 0 0 round 32px);
            clip-path: inset(0 100% 0 0 round 32px);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 round 32px);
            clip-path: inset(0 0 0 round 32px);
  }
}
.VideoPlayer__Thumbnail {
  position: absolute;
  height: calc(100% + 1px);
}
.VideoPlayer__Thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.VideoPlayer.VideoPlayer--tutorial .VideoPlayer__Thumbnail {
  top: 0;
  left: 0;
  width: 100%;
}
.VideoPlayer__Thumbnail::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.7;
}
@media screen and (min-width: 768.02px), print {
  .VideoPlayer__Thumbnail::after {
    background-image: linear-gradient(to right, #040000, rgba(0, 0, 0, 0));
  }
}
@media screen and (max-width: 768px) {
  .VideoPlayer__Thumbnail::after {
    background-image: linear-gradient(to top, #040000, rgba(0, 0, 0, 0));
  }
}

.VideoPlayer__Cover {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
}
@media screen and (min-width: 768.02px), print {
  .VideoPlayer__Cover {
    padding-right: 80px;
    padding-left: 56px;
  }
}
@media screen and (max-width: 768px) {
  .VideoPlayer__Cover {
    position: relative;
    display: grid;
  }
}

.VideoPlayer__Cover__Layout {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
}
@media screen and (min-width: 768.02px), print {
  .VideoPlayer__Cover__Layout {
    grid-auto-flow: column;
  }
}
@media screen and (max-width: 768px) {
  .VideoPlayer__Cover__Layout {
    row-gap: 18px;
    align-self: center;
    justify-self: center;
    transform: translateY(21px);
  }
}

.VideoPlayer__Play {
  display: block;
  justify-self: end;
}
.VideoPlayer.VideoPlayer--tutorial .VideoPlayer__Play {
  position: relative;
}
@media screen and (min-width: 768.02px), print {
  .VideoPlayer.VideoPlayer--tutorial .VideoPlayer__Play {
    width: 105px;
    height: 105px;
  }
}
@media screen and (max-width: 768px) {
  .VideoPlayer.VideoPlayer--tutorial .VideoPlayer__Play {
    justify-self: center;
    width: 60px;
    height: 60px;
  }
}
.VideoPlayer__Play::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  border-radius: 50%;
  transition: transform 0.3s;
  transform: scale3d(1, 1, 1);
}
.VideoPlayer.VideoPlayer--tutorial .VideoPlayer__Play::before {
  color: #d9ffff;
  background-color: #262626;
}
@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;
  -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;
  transform: translate(-50%, -50%) translateX(12%);
}
.VideoPlayer.VideoPlayer--tutorial .VideoPlayer__Play::after {
  color: #d9ffff;
}

.VideoPlayer__TextContent {
  color: #d9ffff;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .VideoPlayer__TextContent {
    order: 2;
  }
}

.VideoPlayer__Title {
  display: block;
  width: 100%;
  font-weight: 700;
  line-height: 1;
}
@media screen and (min-width: 768.02px), print {
  .VideoPlayer__Title {
    font-size: 32px;
  }
}
@media screen and (max-width: 768px) {
  .VideoPlayer__Title {
    font-size: 24px;
  }
}

.LocalNavPc {
  position: sticky;
  top: 0;
  z-index: 10000;
  color: #d9ffff;
  background-color: #262626;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
}
@media screen and (max-width: 768px) {
  .LocalNavPc {
    display: none;
  }
}

.LocalNavPc__Inner {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  min-height: 48px;
}
.LocalNavPc.LocalNavPc--sub .LocalNavPc__Inner {
  padding-right: clamp(0px, (1500px - 100vw) / 2, 120px);
}

.LocalNavPc__List {
  display: grid;
  grid-auto-flow: column;
  column-gap: 4px;
  align-items: center;
  justify-self: center;
  width: 100%;
  max-width: 860px;
  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: clamp(12px, 0.972vw, 14px);
  line-height: 1.25;
}
.LocalNavPc__List a {
  place-items: center;
  padding-right: 3%;
  transition: background-color 0.2s;
}
@media (hover: hover) {
  .LocalNavPc__List a:where(:any-link, :enabled, summary):hover {
    background-color: #191919;
  }
}
.LocalNavPc__List .LocalNavPc__List__HoverLink {
  padding-right: 24px;
}
@media screen and (min-width: 768.02px), print {
  .LocalNavPc__List .LocalNavPc__List__HoverLink {
    position: relative;
  }
}

.LocalNavPc__List__HoverMenu {
  position: absolute;
  top: 48px;
  z-index: 1;
  width: 100%;
  font-size: 14px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s;
  /* stylelint-disable-next-line no-descending-specificity */
}
.LocalNavPc__List__HoverMenu:lang(ja) {
  left: -6px;
}
.LocalNavPc__List__HoverMenu:lang(de) {
  width: 180px;
}
.LocalNavPc__List__HoverMenu a {
  z-index: 0;
  display: block;
  width: 140px;
  min-width: 100%;
  min-height: 56px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  line-height: 1.25;
  background-color: #262626;
  box-shadow: 0 13px 10px 0 rgba(0, 0, 0, 0.38);
}

.LocalNavPc__List__Hover span,
.LocalNavPc__List__Hover .LocalNavPc__List__HoverLink {
  grid-auto-flow: column;
  column-gap: 4px;
  align-items: center;
  justify-content: center;
}
.LocalNavPc__List__Hover span::before,
.LocalNavPc__List__Hover .LocalNavPc__List__HoverLink::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__Hover span:where(:any-link, :enabled, summary):hover::before,
  .LocalNavPc__List__Hover .LocalNavPc__List__HoverLink:where(:any-link, :enabled, summary):hover::before {
    opacity: 0.05;
  }
}
.LocalNavPc__List__Hover span::after,
.LocalNavPc__List__Hover .LocalNavPc__List__HoverLink::after {
  position: absolute;
  top: 50%;
  display: block;
  width: 12px;
  height: 8px;
  content: "";
  background-color: currentColor;
  -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>');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  transform: translateY(-50%);
  left: 85%;
}
.LocalNavPc__List__Hover:hover, .LocalNavPc__List__Hover:focus-within {
  background-color: #191919;
}
.LocalNavPc__List__Hover:hover span::after,
.LocalNavPc__List__Hover:hover .LocalNavPc__List__HoverLink::after, .LocalNavPc__List__Hover:focus-within span::after,
.LocalNavPc__List__Hover:focus-within .LocalNavPc__List__HoverLink::after {
  transform: translateY(-50%) rotate(180deg);
}

.LocalNavPc__List__Hover:hover .LocalNavPc__List__HoverMenu,
.LocalNavPc__List__Hover:focus-within .LocalNavPc__List__HoverMenu {
  visibility: visible;
  opacity: 1;
}

.LocalNavPc__Language {
  position: absolute;
  top: 50%;
  right: 20px;
  height: 100%;
  padding: 15px 40px 15px 24px;
  font-size: clamp(12px, 0.972vw, 14px);
  font-weight: 700;
  transition: background-color 0.2s;
  transform: translateY(-50%);
}
@media (hover: hover) {
  .LocalNavPc__Language:where(:any-link, :enabled, summary):hover {
    background-color: #191919;
  }
}
.LocalNavPc__Language::after {
  position: absolute;
  top: 50%;
  display: block;
  width: 12px;
  height: 8px;
  content: "";
  background-color: currentColor;
  -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>');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  transform: translateY(-50%);
  right: 18px;
}

.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: #d9ffff;
}
.LocalNavSp__MenuButton.LocalNavSp__MenuButton--close {
  background-color: #d9ffff;
}

.LocalNavSp__LineOpen {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 18px;
  height: 2px;
  background-color: #262626;
}
.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: #262626;
}
.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: #d9ffff;
}
.LocalNavSp__Modal:not(.is-open) {
  display: none;
}

.LocalNavSp__Dialog {
  width: 100%;
  height: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
  overflow-y: auto;
  background-color: #262626;
}
[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__Inner {
  width: calc(100% - 80px);
  margin-right: auto;
  margin-left: auto;
}

.LocalNavSp__TopLinks {
  display: grid;
}
.LocalNavSp__TopLinks > li {
  border-bottom: 1px solid #999999;
}
.LocalNavSp__TopLinks > li > a,
.LocalNavSp__TopLinks > li > button {
  position: relative;
  display: block;
  width: 100%;
  padding-block: 21px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: #d9ffff;
}
.LocalNavSp__TopLinks > li > a > span,
.LocalNavSp__TopLinks > li > button > span {
  display: inline-block;
  padding-top: 2px;
  padding-right: 5px;
  padding-left: 5px;
  margin-right: 8px;
  font-size: 14px;
  line-height: 1.2857142857;
  color: #685bc7;
  text-align: center;
  background-color: #d9ffff;
  transform: translateY(-1px);
}
.LocalNavSp__TopLinks > li > a::after {
  position: absolute;
  top: 50%;
  right: 0;
  display: block;
  width: 20px;
  height: 16px;
  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="%23d9ffff"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translateY(-50%);
}
.LocalNavSp__TopLinks > li > button {
  text-align: left;
}
.LocalNavSp__TopLinks > li > button::before, .LocalNavSp__TopLinks > li > button::after {
  position: absolute;
  top: 50%;
  right: 0;
  display: block;
  width: 20px;
  height: 2px;
  content: "";
  background-color: #d9ffff;
}
.LocalNavSp__TopLinks > li > button::before {
  transform: translateY(-50%);
}
.LocalNavSp__TopLinks > li > button::after {
  transition: transform 0.5s;
  transform: translateY(-50%) rotate(-90deg);
}
.LocalNavSp__TopLinks > li > button[aria-expanded=true]::after {
  transform: translateY(-50%);
}

.LocalNavSp__LanguageWrapper {
  display: grid;
  justify-content: end;
  margin-top: 28px;
}

.LocalNavSp__Language {
  position: relative;
  padding-block: 10px;
  padding-right: 20px;
  padding-left: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #d9ffff;
}
.LocalNavSp__Language::after {
  position: absolute;
  top: 50%;
  right: 0;
  display: block;
  width: 8px;
  height: 6px;
  content: "";
  background-color: currentColor;
  -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>');
  transform: translateY(-50%);
}

.LocalNavSp__TopLinks__DropdownContent {
  overflow: hidden;
}

.LocalNavSp__TopLinks__DropdownContentList {
  display: grid;
  row-gap: 14px;
  padding-bottom: 14px;
  padding-left: 20px;
}

.LocalNavSp__TopLinks__DropdownContentItem {
  display: block;
  padding-block: 8px;
  font-size: 13px;
  line-height: 1;
  color: #d9ffff;
}

.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[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;
}

.AppInfo {
  display: grid;
  justify-items: center;
}
@media screen and (min-width: 768.02px), print {
  .AppInfo {
    padding-bottom: 100px;
    margin-top: 100px;
  }
}
@media screen and (max-width: 768px) {
  .AppInfo {
    padding-bottom: 60px;
    margin-top: 60px;
  }
}

@media screen and (min-width: 768.02px), print {
  .AppInfo__Icon {
    width: 170px;
  }
}
@media screen and (max-width: 768px) {
  .AppInfo__Icon {
    width: 100px;
  }
}

.AppInfo__Title {
  font-weight: 700;
  color: #fff;
}
@media screen and (min-width: 768.02px), print {
  .AppInfo__Title {
    margin-top: 30px;
    font-size: 24px;
  }
}
@media screen and (max-width: 768px) {
  .AppInfo__Title {
    margin-top: 24px;
    font-size: 20px;
  }
}

.AppInfo__Links {
  display: grid;
  grid-auto-flow: column;
  margin-top: 28px;
}
@media screen and (min-width: 768.02px), print {
  .AppInfo__Links {
    column-gap: 20px;
  }
}
@media screen and (max-width: 768px) {
  .AppInfo__Links {
    column-gap: 16px;
  }
}
.AppInfo__Links img {
  width: auto;
  min-height: 40px;
}
@media screen and (min-width: 768.02px), print {
  .AppInfo__Links img {
    height: 62px;
  }
}
@media screen and (max-width: 768px) {
  .AppInfo__Links img {
    height: 50px;
  }
}

.AppInfo__Notes {
  justify-self: start;
  font-size: 11px;
  line-height: 1.6363636364;
  color: #fff;
}
@media screen and (min-width: 768.02px), print {
  .AppInfo__Notes {
    margin-top: 60px;
  }
}
@media screen and (max-width: 768px) {
  .AppInfo__Notes {
    margin-top: 49px;
  }
}
.AppInfo__Notes li {
  padding-left: 1em;
  text-indent: -1em;
}
.AppInfo__Notes li:not(:lang(ja)) {
  padding-left: 0.5em;
  text-indent: -0.5em;
}

.AppHeading {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-weight: 700;
  color: #d9ffff;
  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;
    font-size: 32px;
    line-height: 1.375;
  }
}
.AppHeading h2 {
  position: absolute;
  width: 10em;
}

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

@media screen and (min-width: 768.02px), print {
  .Information {
    margin-top: 25px;
  }
}
@media screen and (max-width: 768px) {
  .Information {
    margin-top: 30px;
  }
}

.Information__Inner {
  position: relative;
  display: grid;
}
@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 0;
  }
}
@media screen and (max-width: 768px) {
  .Information__Inner {
    row-gap: 4px;
  }
}

.Information__Content {
  padding-right: 70px;
}

.Information__Label {
  height: max-content;
  font-weight: 700;
  line-height: 1;
  color: #d9ffff;
  background-color: #262626;
  border-radius: 9999px;
}
@media screen and (min-width: 768.02px), print {
  .Information__Label {
    padding: 12px 20px;
    font-size: 20px;
  }
  :lang(fr) .Information__Label, :lang(de) .Information__Label, :lang(it-IT) .Information__Label {
    font-size: 16px;
  }
}
@media screen and (max-width: 768px) {
  .Information__Label {
    padding: 9px 20px;
    font-size: 18px;
    text-align: center;
  }
}

.Information__List {
  overflow: hidden;
}
.Information__List[aria-hidden=true] {
  height: 0;
}

.Information__Item {
  padding-block: 11px;
  color: #d9ffff;
}
.Information__Item a[href] {
  display: inline-block;
  transition: opacity 0.2s;
}
@media (hover: hover) {
  .Information__Item a[href]:where(:any-link, :enabled, summary):hover {
    opacity: 0.7;
  }
}
@media screen and (min-width: 768.02px), print {
  .Information__Item a[href] {
    border-bottom: 1px solid #d9ffff;
  }
  .Information__Item__Inner {
    display: flex;
  }
}

.Information__Item__Left {
  display: flex;
}
@media screen and (min-width: 768.02px), print {
  .Information__Item__Left {
    margin-right: 20px;
  }
}
@media screen and (max-width: 768px) {
  .Information__Item__Left {
    width: max-content;
  }
  a[href] .Information__Item__Left {
    border-bottom: 1px solid #d9ffff;
  }
}

.Information__New {
  display: inline-block;
  color: #262626;
}
@media screen and (min-width: 768.02px), print {
  .Information__New {
    margin-left: 20px;
    font-size: 16px;
    line-height: 1.4;
  }
}
@media screen and (max-width: 768px) {
  .Information__New {
    margin-left: 10px;
    font-size: 13px;
    line-height: 1;
  }
}

.Information__Date {
  display: inline-block;
}
@media screen and (min-width: 768.02px), print {
  .Information__Date {
    font-size: 16px;
    line-height: 1.4;
  }
}
@media screen and (max-width: 768px) {
  .Information__Date {
    font-size: 13px;
    line-height: 1;
  }
}

.Information__Text {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}
@media screen and (min-width: 768.02px), print {
  .Information__Text {
    -webkit-line-clamp: 1;
    font-size: 16px;
    line-height: 1.4;
  }
}
@media screen and (max-width: 768px) {
  .Information__Text {
    width: 100%;
    margin-top: 4px;
    font-size: 15px;
    -webkit-line-clamp: 2;
    line-height: 1.9;
  }
  a[href] .Information__Text {
    text-decoration: underline;
  }
}

.Information__Button {
  position: absolute;
  width: 40px;
  height: 40px;
  transform: translateY(50%);
}
@media screen and (min-width: 768.02px), print {
  .Information__Button {
    top: 4px;
    right: 30px;
  }
}
@media screen and (max-width: 768px) {
  .Information__Button {
    right: 0;
    bottom: 32px;
  }
}
.Information__Button::before, .Information__Button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 14px;
  height: 2px;
  content: "";
  background-color: #262626;
  transition: transform 0.3s;
}
.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: #d9ffff;
  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);
  }
}

@media screen and (max-width: 768px) {
  .PromotionalVideo .Width.Width--wide {
    width: 100%;
  }
}

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

.IntroVideo {
  background-color: #d9ffff;
}
@media screen and (min-width: 768.02px), print {
  .IntroVideo {
    margin-top: clamp(-500px, -20vw, -100px);
  }
}
@media screen and (max-width: 768px) {
  .IntroVideo {
    margin-top: clamp(-50px, -9vw, -10px);
  }
}

.IntroVideo__Content {
  display: grid;
  text-wrap: balance;
  background-color: #ffd940;
  animation-name: mask-animation-intro;
  animation-duration: 0.75s;
  animation-play-state: paused;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.IntroVideo__Content[data-scroll-video=show] {
  animation-play-state: running;
}
@media screen and (min-width: 768.02px), print {
  .IntroVideo__Content {
    grid-template-columns: 54.5% auto;
    grid-auto-flow: column;
    column-gap: clamp(20px, 2.8vw, 70px);
    align-items: center;
    height: 40vw;
    min-height: 400px;
    padding-right: clamp(20px, 3vw, 70px);
  }
}
@media screen and (max-width: 768px) {
  .IntroVideo__Content {
    row-gap: 24px;
  }
}

@keyframes mask-animation-intro {
  0% {
    -webkit-clip-path: inset(0 100% 0 0 round 32px);
            clip-path: inset(0 100% 0 0 round 32px);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 round 32px);
            clip-path: inset(0 0 0 round 32px);
  }
}
.IntroVideo__TextContent {
  color: #685bc7;
}
@media screen and (min-width: 768.02px), print {
  .IntroVideo__TextContent {
    order: 1;
  }
}
@media screen and (max-width: 768px) {
  .IntroVideo__TextContent {
    padding-top: 48px;
    padding-right: 19px;
    padding-left: 19px;
  }
}

.IntroVideo__Title {
  font-weight: 700;
}
@media screen and (min-width: 768.02px), print {
  .IntroVideo__Title {
    font-size: clamp(26px, 2.3vw, 34px);
    line-height: 1.4;
  }
  .IntroVideo__Title:lang(fr), .IntroVideo__Title:lang(pt), .IntroVideo__Title:lang(de), .IntroVideo__Title:lang(es) {
    font-size: clamp(24px, 2.3vw, 34px);
  }
}
@media screen and (max-width: 768px) {
  .IntroVideo__Title {
    font-size: 26px;
    line-height: 1.4615384615;
  }
}

@media screen and (min-width: 768.02px), print {
  .IntroVideo__Text {
    margin-top: 24px;
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.8;
  }
  .IntroVideo__Text:lang(fr), .IntroVideo__Text:lang(pt), .IntroVideo__Text:lang(de), .IntroVideo__Text:lang(es) {
    font-size: clamp(12px, 1.1vw, 16px);
  }
}
@media screen and (max-width: 768px) {
  .IntroVideo__Text {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.8666666667;
  }
}

.IntroVideo__Video {
  position: relative;
}
@media screen and (min-width: 768.02px), print {
  .IntroVideo__Video {
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 768px) {
  .IntroVideo__Video {
    height: 107vw;
  }
}
.IntroVideo__Video video {
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  object-fit: cover;
}
@media screen and (min-width: 768.02px), print {
  .IntroVideo__Video video {
    -webkit-clip-path: circle(clamp(200px, 47.6vw, 832px) at left);
            clip-path: circle(clamp(200px, 47.6vw, 832px) at left);
  }
}
@media screen and (max-width: 768px) {
  .IntroVideo__Video video {
    position: relative;
    -webkit-clip-path: circle(108% at bottom);
            clip-path: circle(108% at bottom);
  }
}

.IntroVideo__PlayPauseButton {
  position: absolute;
  background-color: #ffd940;
  border-radius: 50%;
}
@media screen and (min-width: 768.02px), print {
  .IntroVideo__PlayPauseButton {
    right: 24.5%;
    bottom: 3.5%;
    width: 38px;
    height: 38px;
  }
}
@media screen and (max-width: 768px) {
  .IntroVideo__PlayPauseButton {
    right: clamp(16px, 4.2vw, 40px);
    bottom: clamp(16px, 4.2vw, 40px);
    width: 43.5px;
    height: 43.5px;
  }
}
.IntroVideo__PlayPauseButton[data-video-pause=false]::before, .IntroVideo__PlayPauseButton[data-video-pause=false]::after {
  position: absolute;
  top: 50%;
  display: block;
  width: 3px;
  content: "";
  background-color: #685bc7;
  transform: translateY(-50%);
}
@media screen and (min-width: 768.02px), print {
  .IntroVideo__PlayPauseButton[data-video-pause=false]::before, .IntroVideo__PlayPauseButton[data-video-pause=false]::after {
    height: 14px;
  }
}
@media screen and (max-width: 768px) {
  .IntroVideo__PlayPauseButton[data-video-pause=false]::before, .IntroVideo__PlayPauseButton[data-video-pause=false]::after {
    height: 16px;
  }
}
@media screen and (min-width: 768.02px), print {
  .IntroVideo__PlayPauseButton[data-video-pause=false]::before {
    left: 14px;
  }
}
@media screen and (max-width: 768px) {
  .IntroVideo__PlayPauseButton[data-video-pause=false]::before {
    left: 16px;
  }
}
@media screen and (min-width: 768.02px), print {
  .IntroVideo__PlayPauseButton[data-video-pause=false]::after {
    right: 14px;
  }
}
@media screen and (max-width: 768px) {
  .IntroVideo__PlayPauseButton[data-video-pause=false]::after {
    right: 16px;
  }
}
.IntroVideo__PlayPauseButton[data-video-pause=true]::before {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  content: "";
  background-color: #685bc7;
  -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;
  transform: translate(-50%, -50%) translateX(12%);
}
@media screen and (min-width: 768.02px), print {
  .IntroVideo__PlayPauseButton[data-video-pause=true]::before {
    width: 15px;
    height: 15px;
  }
}
@media screen and (max-width: 768px) {
  .IntroVideo__PlayPauseButton[data-video-pause=true]::before {
    width: 17px;
    height: 17px;
  }
}

.HeadingBlock {
  position: relative;
  z-index: 1;
  display: grid;
  overflow: hidden;
}
@media screen and (min-width: 768.02px), print {
  .HeadingBlock {
    aspect-ratio: 1440/640;
    padding-bottom: 64px;
  }
}
@media screen and (max-width: 768px) {
  .HeadingBlock {
    aspect-ratio: 375/300;
    padding-bottom: 42px;
  }
}
.HeadingBlock::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(0deg, rgb(4, 0, 0) 0%, rgba(4, 0, 0, 0) 70%);
  opacity: 0.5;
}

.HeadingBlock__Image {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: -1;
  height: auto;
}
@media screen and (min-width: 768.02px), print {
  .HeadingBlock__Image {
    width: 120%;
    transform: translate(-5%, -45%);
  }
}
@media screen and (max-width: 768px) {
  .HeadingBlock__Image {
    width: 112%;
    transform: translateY(-45%);
  }
}
.HeadingBlock__Image img {
  width: 100%;
}

.HeadingBlock__Text {
  position: absolute;
  left: 50%;
  z-index: 1;
  font-weight: 700;
  color: #d9ffff;
  transform: translateX(-50%);
}
@media screen and (min-width: 768.02px), print {
  .HeadingBlock__Text {
    bottom: 64px;
    font-size: 100px;
  }
}
@media screen and (max-width: 768px) {
  .HeadingBlock__Text {
    bottom: 42px;
    font-size: 44px;
  }
}

.ModalSlide {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10030;
  overflow-x: hidden;
  color: #262626;
}
.ModalSlide:not(.is-open) {
  display: none;
}

.ModalSlide__Background {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
}

.ModalSlide__Dialog {
  position: absolute;
  z-index: 0;
  max-width: 1140px;
  max-height: 100%;
  overflow-y: auto;
  background-color: #d9ffff;
}
@media screen and (min-width: 768.02px), print {
  .ModalSlide__Dialog {
    top: 0;
    right: 0;
    width: 95%;
    height: 100%;
    padding: 100px 80px;
  }
}
@media screen and (max-width: 768px) {
  .ModalSlide__Dialog {
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    padding: 80px 5%;
  }
}
.ModalSlide[aria-hidden=false] .ModalSlide__Dialog {
  animation: dialog-show 0.3s ease-in;
}
.ModalSlide[aria-hidden=true] .ModalSlide__Dialog {
  animation: dialog-hide 0.3s ease-in;
}
@keyframes dialog-show {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes dialog-hide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
.ModalSlide__Dialog h2 {
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 34px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  border-bottom: 1px solid #262626;
}

.ModalSlide__Close {
  position: sticky;
  top: 0;
  z-index: 1;
  display: block;
  margin-left: auto;
  color: #d9ffff;
}
@media screen and (min-width: 768.02px), print {
  .ModalSlide__Close {
    width: 62px;
    height: 62px;
    margin-top: -62px;
    transform: translate(50%, -100%);
  }
}
@media screen and (max-width: 768px) {
  .ModalSlide__Close {
    width: 50px;
    height: 50px;
    margin-top: -50px;
    transform: translate(30%, -120%);
  }
}
.ModalSlide__Close::before, .ModalSlide__Close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 20px;
  height: 2px;
  content: "";
  background-color: currentColor;
}
.ModalSlide__Close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.ModalSlide__Close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.ModalSlide__Close__Circle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #262626;
  border-radius: 50%;
  box-shadow: -1.414px 1.414px 6px 0px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s;
  transform: scale3d(1, 1, 1);
}
@media (hover: hover) {
  :where(:any-link, :enabled, summary):hover .ModalSlide__Close__Circle {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@media screen and (min-width: 768.02px), print {
  .ModalSlide__BottomClose {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .ModalSlide__BottomClose {
    display: grid;
    max-width: 132px;
    margin-top: 70px;
    margin-right: auto;
    margin-left: auto;
  }
}

.ModalSlide__Text {
  margin-top: -16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
}

.ModalSlide__FrameList {
  display: grid;
  margin-top: 30px;
}
@media screen and (min-width: 768.02px), print {
  .ModalSlide__FrameList {
    grid-template-columns: repeat(8, 1fr);
    row-gap: 34px;
    column-gap: 24px;
  }
}
@media screen and (max-width: 768px) {
  .ModalSlide__FrameList {
    grid-template-columns: repeat(4, 1fr);
    row-gap: 24px;
    column-gap: 20px;
  }
}
.ModalSlide__FrameList + h2 {
  margin-top: 80px;
}
.ModalSlide__FrameList img {
  width: 100%;
}

.ModalSlide__FrameText {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.8;
}

@media screen and (min-width: 768.02px), print {
  .ProductDesign {
    margin-top: 108px;
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign {
    margin-top: 40px;
  }
}

@media screen and (min-width: 768.02px), print {
  .ProductDesign__Color {
    height: calc((100vh - 48px) * 4);
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Color {
    height: 400vh;
  }
}

.ProductDesign__Inner {
  position: sticky;
  left: 0;
  overflow: hidden;
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Inner {
    top: 48px;
    height: calc(100vh - 48px);
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Inner {
    top: 0;
    height: 100vh;
  }
}

.ProductDesign__Item {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 100%;
  opacity: 0;
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Item {
    height: calc(100vh - 48px);
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Item {
    height: 100vh;
  }
}
.ProductDesign__Item:nth-of-type(1) {
  color: #a0bba0;
  background-color: #788a77;
  opacity: 1;
}
.ProductDesign__Item:nth-of-type(2) {
  color: #b29b9b;
  background-color: #826e6e;
}
.ProductDesign__Item:nth-of-type(3) {
  color: #f1eee9;
  background-color: #cfccc7;
}

.ProductDesign__Content {
  position: relative;
  display: grid;
  place-items: center;
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Content {
    width: calc(100% - 60px);
    max-height: calc(100vh - 48px);
    padding-top: 60px;
    padding-bottom: 60px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1090px;
    max-width: clamp(1090px, 75.6944444444vw, 1308px);
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Content {
    width: 90%;
  }
}
.ProductDesign__Content > div:nth-of-type(1) {
  position: absolute;
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Content > div:nth-of-type(1) {
    top: 0;
    left: 0;
    width: 24.1379310345%;
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Content > div:nth-of-type(1) {
    top: -8px;
    left: -20px;
    width: 40%;
    transform: translateY(-50%);
  }
  .ProductDesign__Content > div:nth-of-type(1) img {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
  }
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Content > div:nth-of-type(2) {
    position: relative;
    z-index: 1;
    display: grid;
    align-items: center;
    width: 46.6379310345%;
    height: calc(100vh - 48px - 201px);
    max-height: 640px;
    transform: translateX(min(20%, 15vh));
  }
  .ProductDesign__Content > div:nth-of-type(2) img {
    width: 100%;
    height: calc(100vh - 48px - 201px);
    max-height: 640px;
    object-fit: contain;
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Content > div:nth-of-type(2) {
    position: relative;
    z-index: 1;
    width: 90.6666666667%;
    transform: translate(12%, -16%);
  }
}
.ProductDesign__Content > div:nth-of-type(3) {
  position: absolute;
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Content > div:nth-of-type(3) {
    right: 35px;
    bottom: 0;
    width: 18.9655172414%;
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Content > div:nth-of-type(3) {
    right: -20px;
    bottom: 66px;
    width: 34.6666666667%;
    transform: translateY(50%);
  }
  .ProductDesign__Content > div:nth-of-type(3) img {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
}
.ProductDesign__Content > div img {
  display: block;
  width: 100%;
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Content > div img {
    border-radius: 24px;
  }
}

.ProductDesign__Title {
  position: absolute;
  font-weight: 700;
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Title {
    top: 50%;
    font-size: clamp(40px, 6.53vw, 112.8px);
    transform: translateY(-50%);
  }
  .ProductDesign__Title:nth-of-type(1) {
    left: 0;
  }
  .ProductDesign__Title:nth-of-type(2) {
    right: 35px;
  }
  :lang(it-IT) .ProductDesign__Title, :lang(fr) .ProductDesign__Title {
    font-size: clamp(40px, 5.5vw, 88.8px);
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Title {
    font-size: 50px;
  }
  .ProductDesign__Title:nth-of-type(1) {
    top: 75%;
    left: 0;
  }
  .ProductDesign__Title:nth-of-type(2) {
    top: calc(75% + 50px);
    left: 0;
  }
  :lang(zh-cmn-Hans) .ProductDesign__Title {
    line-height: 1.2;
  }
  :lang(zh-cmn-Hans) .ProductDesign__Title + .ProductDesign__Title {
    margin-top: 10px;
  }
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Title span:nth-of-type(1) {
    text-align: right;
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Title span:nth-of-type(1) {
    text-align: left;
  }
}
.ProductDesign__Title span:nth-of-type(2) {
  text-align: left;
}

.ProductDesign__Frame {
  position: relative;
  height: 100%;
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Frame {
    width: calc(100% - 60px);
    margin-right: auto;
    margin-left: auto;
    max-width: 1090px;
    max-width: clamp(1090px, 75.6944444444vw, 1308px);
  }
}

.ProductDesign__Buttons {
  position: absolute;
  z-index: 2;
  display: grid;
  transform: translateY(-50%);
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Buttons {
    top: 74%;
    row-gap: 16px;
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Buttons {
    top: 7%;
    left: 50%;
    grid-auto-flow: column;
    column-gap: 25px;
    align-items: center;
    width: max-content;
    max-width: 90%;
    transform: translateX(-50%);
  }
}

.ProductDesign__Button {
  line-height: 1;
  color: rgba(255, 255, 255, 0.2);
  transition: color 0.3s;
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Button {
    font-size: 16px;
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Button {
    font-size: 11px;
  }
}
.ProductDesign__Button button {
  position: relative;
  display: block;
  text-align: left;
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Button button {
    padding-left: 34px;
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Button button {
    padding-left: 22px;
  }
}
.ProductDesign__Button button::before {
  position: absolute;
  top: 50%;
  content: "";
  border-radius: 50%;
  transition: scale 0.3s, transform 0.3s;
  transform: translateY(-50%);
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Button button::before {
    left: 8px;
    width: 15px;
    height: 15px;
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Button button::before {
    left: 0;
    width: 13px;
    height: 13px;
  }
}
.ProductDesign__Button:nth-of-type(1) button::before {
  background-color: #a0bba0;
}
.ProductDesign__Button:nth-of-type(2) button::before {
  background-color: #5e5555;
}
.ProductDesign__Button:nth-of-type(3) button::before {
  background-color: #f1eee9;
}
.ProductDesign__Button.is-active {
  color: white;
}
.ProductDesign__Button.is-active button::before {
  transform: translateY(calc(-50% + 2px));
  scale: 1.4;
}

@media screen and (min-width: 768.02px), print {
  .ProductDesign__Anchor {
    height: calc(100vh - 48px);
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Anchor {
    height: 100vh;
  }
}

.ProductDesign__Scroll {
  position: absolute;
  z-index: 2;
  color: #fff;
  writing-mode: vertical-lr;
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Scroll {
    top: 50%;
    right: 20px;
    padding-top: 110px;
    font-size: 12px;
    transform: translateY(-50%);
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Scroll {
    bottom: 35%;
    left: 0;
    padding-top: 60px;
    font-size: 10px;
  }
}
.ProductDesign__Scroll::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  content: "";
  background-color: #fff;
  opacity: 0.3;
  transform: translateX(-50%);
  animation-name: scrollAnimation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Scroll::before {
    height: 100px;
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Scroll::before {
    height: 50px;
  }
}
@keyframes scrollAnimation {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  45% {
    transform: scaleY(1);
    transform-origin: top;
  }
  55% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

.ProductDesign__Variations__Wrapper {
  background-color: #cfccc7;
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Variations__Wrapper {
    padding-top: 100px;
    padding-bottom: 114px;
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Variations__Wrapper {
    padding-top: 40px;
    padding-bottom: 60px;
  }
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Variations__Wrapper .Width {
    width: calc(100% - 100px);
  }
}

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

.ProductDesign__Variations__Title {
  font-weight: 700;
  color: #999999;
  text-align: center;
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Variations__Title {
    font-size: 34px;
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Variations__Title {
    font-size: 28px;
  }
}

.ProductDesign__Variations__Slides {
  display: grid;
  font-size: 14px;
  font-weight: 700;
  line-height: 2.1428571429;
  color: #999999;
  text-align: center;
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Variations__Slides {
    position: relative;
    margin-top: 24px;
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Variations__Slides {
    margin-top: 18px;
  }
}

.ProductDesign__Variations__Slide {
  position: relative;
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Variations__Slide {
    width: calc(20% - clamp(35px, 5%, 56px));
    margin-right: clamp(35px, 5%, 56px);
  }
  .ProductDesign__Variations__Slide:nth-of-type(3n + 2) {
    width: calc((20% - clamp(35px, 5%, 56px)) * 0.5167785235);
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Variations__Slide {
    width: calc(50% - 44px);
    margin-right: 44px;
  }
  .ProductDesign__Variations__Slide:nth-of-type(3n + 2) {
    width: calc((50% - 44px) * 0.5167785235);
  }
}

.ProductDesign__Variations__Slide__Text {
  display: block;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.5s;
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Variations__Slide__Text {
    margin-top: 12px;
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Variations__Slide__Text {
    margin-top: 6px;
  }
}
.ProductDesign__Variations__Slide.is-active .ProductDesign__Variations__Slide__Text {
  opacity: 1;
}

.ProductDesign__Variations__Buttons__Wrapper {
  display: grid;
  grid-auto-flow: column;
  column-gap: 28px;
  align-items: center;
  justify-content: center;
  order: 1;
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Variations__Buttons__Wrapper {
    margin-top: 22px;
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Variations__Buttons__Wrapper {
    margin-top: 24px;
  }
}

.ProductDesign__Variations__Next,
.ProductDesign__Variations__Prev {
  position: absolute;
  display: block;
  width: clamp(30px, 4.86vw, 50px);
  height: clamp(30px, 4.86vw, 50px);
  border-radius: 50%;
}
@media screen and (min-width: 768.02px), print {
  .ProductDesign__Variations__Next,
  .ProductDesign__Variations__Prev {
    top: 50%;
    z-index: 1;
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Variations__Next,
  .ProductDesign__Variations__Prev {
    display: none;
  }
}
.ProductDesign__Variations__Next::before,
.ProductDesign__Variations__Prev::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background-color: #999999;
  border-radius: 50%;
  transition: transform 0.3s;
}
.ProductDesign__Variations__Next::after,
.ProductDesign__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="%23e6e6e6"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: clamp(10px, 1.73vw, 25px);
}
@media (hover: hover) {
  .ProductDesign__Variations__Next:where(:any-link, :enabled, summary):hover::before,
  .ProductDesign__Variations__Prev:where(:any-link, :enabled, summary):hover::before {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@media screen and (min-width: 768.02px), print {
  .ProductDesign__Variations__Prev {
    left: 0;
    transform: translate(-50%, -50%) rotate(180deg);
  }
  .ProductDesign__Variations__Next {
    right: 0;
    transform: translate(50%, -50%);
  }
}

.ProductDesign__Variations__Buttons {
  display: grid;
  grid-auto-flow: column;
  column-gap: clamp(12px, 5.4vw, 20px);
  justify-content: center;
}

@media screen and (min-width: 768.02px), print {
  .ProductDesign__Variations__Button {
    width: 40px;
  }
}
@media screen and (max-width: 768px) {
  .ProductDesign__Variations__Button {
    width: 30px;
  }
}

.StepLayout {
  display: grid;
}
@media screen and (min-width: 768.02px), print {
  .StepLayout {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 34px;
    column-gap: 34px;
  }
}
@media screen and (max-width: 768px) {
  .StepLayout {
    grid-template-columns: 1fr;
    row-gap: 40px;
    column-gap: 20px;
  }
}
@media screen and (min-width: 768.02px), print {
  .StepLayout.StepLayout--col5 {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .StepLayout.StepLayout--col5 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.StepLayout + h2 {
  margin-top: 80px;
}

.StepLayout__Image {
  position: relative;
  text-align: center;
}
.StepLayout__Image img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .StepLayout--col5 .StepLayout__Item .StepLayout__Image {
    padding-right: 32px;
  }
}
.StepLayout__Item .StepLayout__Image::after {
  position: absolute;
  display: block;
  width: 16px;
  height: 16px;
  content: "";
  border-top: 2px solid #262626;
  border-right: 2px solid #262626;
}
@media screen and (min-width: 768.02px), print {
  .StepLayout__Item .StepLayout__Image::after {
    top: 50%;
    right: -20px;
    transform: translateY(-50%) rotate(45deg);
  }
}
@media screen and (max-width: 768px) {
  .StepLayout__Item .StepLayout__Image::after {
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
  .StepLayout--col5 .StepLayout__Item .StepLayout__Image::after {
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    transform: translateY(-50%) rotate(45deg);
  }
}
.StepLayout__Item:last-child .StepLayout__Image::after {
  display: none;
}

.StepLayout__Step {
  font-size: 18px;
  font-weight: 700;
}
@media screen and (min-width: 768.02px), print {
  .StepLayout__Step {
    margin-top: 24px;
  }
}
@media screen and (max-width: 768px) {
  .StepLayout__Step {
    margin-top: 20px;
  }
}

.StepLayout__Text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.8571428571;
  color: #262626;
}

@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: #d9ffff;
  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;
  }
}

.Support__List {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  row-gap: 64px;
  column-gap: 94px;
}

.Support__Link {
  display: grid;
  grid-auto-rows: auto 1fr auto;
  height: 100%;
}

.Support__Item {
  justify-self: center;
  width: 170px;
}

.Support__Title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
}
:lang(de) .Support__Title {
  font-size: 17px;
}

.Support__Icon {
  width: 100px;
  margin-inline: auto;
}
.Support__Icon img {
  width: 100%;
}

.Support__Button {
  position: relative;
  display: block;
  justify-self: center;
  width: 170px;
  padding: 11px 24px;
  padding: 17.5px 30px 17.5px 18px;
  margin-top: 32px;
  font-size: 14px;
  font-weight: 700;
  color: #d9ffff;
  text-align: center;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 2px #d9ffff;
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  transform: scale3d(1, 1, 1);
  will-change: transform;
}
@media (hover: hover) {
  :where(:any-link, :enabled, summary):hover .Support__Button {
    color: #262626;
    box-shadow: inset 0 0 0 35px #d9ffff;
    transform: scale3d(1.1, 1.1, 1);
  }
}
.Support__Button::after {
  position: absolute;
  top: 50%;
  right: 19px;
  display: block;
  width: 12px;
  height: 15px;
  content: "";
  background-color: currentColor;
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.39858 6.72739L4.44952 11.6765L5.86373 13.0907L10.8128 8.14161L10.8133 8.14214L12.2275 6.72792L12.227 6.72739L12.2277 6.72671L10.8135 5.3125L10.8128 5.31318L5.86358 0.363961L4.44936 1.77817L9.39858 6.72739Z" fill="%23D9FFFF"/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.39858 6.72739L4.44952 11.6765L5.86373 13.0907L10.8128 8.14161L10.8133 8.14214L12.2275 6.72792L12.227 6.72739L12.2277 6.72671L10.8135 5.3125L10.8128 5.31318L5.86358 0.363961L4.44936 1.77817L9.39858 6.72739Z" fill="%23D9FFFF"/></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  transform: translateY(-50%);
}

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

.Spec__Inner {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 768.02px), print {
  .Spec__Inner {
    padding-top: 80px;
    padding-bottom: 88px;
  }
}
@media screen and (max-width: 768px) {
  .Spec__Inner {
    padding-top: 60px;
    padding-bottom: 80px;
  }
}
.Spec__Inner h1 {
  font-weight: 700;
  line-height: 1.2;
  color: #d9ffff;
  text-align: center;
}
@media screen and (min-width: 768.02px), print {
  .Spec__Inner h1 {
    font-size: 44px;
  }
}
@media screen and (max-width: 768px) {
  .Spec__Inner h1 {
    font-size: 32px;
  }
}
.Spec__Inner h2 {
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
@media screen and (min-width: 768.02px), print {
  .Spec__Inner h2 {
    margin-top: 72px;
    font-size: 28px;
  }
}
@media screen and (max-width: 768px) {
  .Spec__Inner h2 {
    margin-top: 46px;
    font-size: 24px;
  }
}

.Spec__List {
  display: grid;
  line-height: 1.875;
  color: #262626;
}
@media screen and (min-width: 768.02px), print {
  .Spec__List {
    margin-top: 48px;
  }
}
@media screen and (max-width: 768px) {
  .Spec__List {
    margin-top: 34px;
  }
}
.Spec__List > li {
  display: grid;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.Spec__List > li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
@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__List a {
  text-decoration: underline;
  transition: opacity 0.2s;
}
@media (hover: hover) {
  .Spec__List a:where(:any-link, :enabled, summary):hover {
    opacity: 0.7;
  }
}

.Spec__Heading {
  font-weight: 700;
}

.Spec__Link {
  display: grid;
}
.Spec__Link a {
  width: -moz-fit-content;
  width: fit-content;
}

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

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

.Manuals__Inner {
  padding: 70px 96px;
  background: rgba(217, 217, 217, 0.4);
  border-radius: 10px;
}

.Manuals__Title {
  padding-bottom: 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: #262626;
  text-align: left;
  border-bottom: 1px solid #262626;
}
@media screen and (min-width: 768.02px), print {
  .Manuals__Title {
    display: grid;
    grid-template-columns: auto 1fr;
    padding-top: 48px;
    margin-top: -48px;
  }
}
.Manuals__Title span {
  display: inline-block;
}

.Manuals__Buttons {
  display: grid;
  margin-top: 28px;
}
@media screen and (min-width: 768.02px), print {
  .Manuals__Buttons {
    grid-template-columns: 1fr 1fr;
    column-gap: 42px;
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1000px) {
  :not(:lang(ja)) .Manuals__Buttons {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
}
@media screen and (max-width: 768px) {
  .Manuals__Buttons {
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
  }
  :not(:lang(ja)) .Manuals__Buttons {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
}

.Manuals__Button a {
  position: relative;
  display: block;
  height: 100%;
  color: #d9ffff;
  transition: color 0.3s;
  box-shadow: inset 0 0 0 2px #d9ffff;
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  transform: scale3d(1, 1, 1);
  will-change: transform;
}
@media screen and (min-width: 768.02px), print {
  .Manuals__Button a {
    padding: 20px 20px 36px;
    border-radius: 9999px;
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1000px) {
  :not(:lang(ja)) .Manuals__Button a {
    padding: 28px 10px;
    border-radius: 20px;
  }
}
@media screen and (max-width: 768px) {
  .Manuals__Button a {
    padding: 28px 10px;
    border-radius: 20px;
  }
}
.Manuals__Button a::after {
  position: absolute;
  left: 50%;
  content: "";
  transition: border-color 0.3s;
  transform: translateX(-50%);
  rotate: 45deg;
}
@media screen and (min-width: 768.02px), print {
  .Manuals__Button a::after {
    bottom: 15px;
    width: 12px;
    height: 12px;
    border-right: 2px solid #d9ffff;
    border-bottom: 2px solid #d9ffff;
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1000px) {
  :not(:lang(ja)) .Manuals__Button a::after {
    bottom: 12px;
    width: 7px;
    height: 7px;
    border-right: 1px solid #d9ffff;
    border-bottom: 1px solid #d9ffff;
  }
}
@media screen and (max-width: 768px) {
  .Manuals__Button a::after {
    bottom: 12px;
    width: 7px;
    height: 7px;
    border-right: 1px solid #d9ffff;
    border-bottom: 1px solid #d9ffff;
  }
}
@media (hover: hover) {
  .Manuals__Button a:where(:any-link, :enabled, summary):hover {
    color: #262626;
    box-shadow: inset 0 0 0 100px #d9ffff;
    transform: scale3d(1.1, 1.1, 1);
  }
  .Manuals__Button a:where(:any-link, :enabled, summary):hover::after {
    border-color: #262626;
  }
}

.Manuals__Button__Images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-inline: auto;
}
@media screen and (min-width: 768.02px), print {
  .Manuals__Button__Images {
    column-gap: 24px;
  }
  :not(:lang(ja)) .Manuals__Button__Images {
    max-width: 100%;
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1000px) {
  :not(:lang(ja)) .Manuals__Button__Images {
    column-gap: 14px;
  }
}
@media screen and (max-width: 768px) {
  .Manuals__Button__Images {
    column-gap: 14px;
  }
}
.Manuals__Button__Images img {
  width: 100%;
}
@media screen and (min-width: 768.02px), print {
  .Manuals__Button__Images img {
    max-width: 52px;
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1000px) {
  :not(:lang(ja)) .Manuals__Button__Images img {
    max-width: 32px;
  }
}
@media screen and (max-width: 768px) {
  .Manuals__Button__Images img {
    max-width: 32px;
  }
}

.Manuals__Button__Text {
  display: block;
  line-height: 1.3;
  text-align: center;
}
@media screen and (min-width: 768.02px), print {
  .Manuals__Button__Text {
    margin-top: 12px;
    font-size: 16px;
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1000px) {
  :not(:lang(ja)) .Manuals__Button__Text {
    margin-top: 8px;
    font-size: 12px;
  }
}
@media screen and (max-width: 768px) {
  .Manuals__Button__Text {
    margin-top: 8px;
    font-size: 12px;
  }
}
.Manuals__Button__Text span {
  display: inline-block;
}

.Manuals__Type {
  margin-top: 60px;
}
.Manuals__Type:nth-of-type(n + 2) {
  margin-top: 100px;
}

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

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

.Manuals__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="%23262626" 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;
}

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

.Hero {
  position: relative;
  display: grid;
  font-family: "Noto Sans JP" , Roboto, sans-serif !important;
}
@media screen and (min-width: 768.02px), print {
  .Hero {
    --app-width: min(420px,31vw);
    --app-height: calc(var(--app-width) * 0.18 + 2em);
    --app-right: 12vw;
    grid-template-columns: 1fr clamp(10px, 41.25vw, 712.8px);
    column-gap: clamp(10px, 3.75vw, 64.8px);
    justify-content: center;
    padding-inline: clamp(10px, 4.1666666667vw, 72px);
  }
  .Hero__Texts {
    margin-top: clamp(56px, 2.3vw, 34px);
    display: flex;
    flex-direction: column;
  }
  .Hero__Image {
    padding-bottom: var(--app-height);
  }
}
@media screen and (max-width: 768px) {
  .Hero {
    padding-top: 68px;
  }
}

.Hero__LanguageSwitcher {
  position: absolute;
  top: 15px;
  left: 0;
  padding: 10px 27px 9px 16px;
  font-size: 12px;
  line-height: 1;
  color: #d9ffff;
  text-align: center;
  background-color: #262626;
  border-radius: 9999px;
}
@media screen and (min-width: 768.02px), print {
  .Hero__LanguageSwitcher {
    display: none;
  }
}
.Hero__LanguageSwitcher::after {
  position: absolute;
  top: 50%;
  right: 11px;
  display: block;
  width: 10px;
  height: 7px;
  content: "";
  background-color: currentColor;
  -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>');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  transform: translateY(-50%);
}

.Hero__Main {
  font-weight: 700;
  font-feature-settings: "palt";
  color: #d9ffff;
  font-family: "Noto Sans JP" , Roboto, sans-serif !important;
}
:lang(en) .Hero__Main, :lang(fr) .Hero__Main, :lang(de) .Hero__Main, :lang(pt) .Hero__Main, :lang(es) .Hero__Main, :lang(it-IT) .Hero__Main {
  //font-family: Helvetica Neue, sans-serif;
}
:lang(de) .Hero__Main {
  letter-spacing: 0.02em;
}
@media screen and (min-width: 768.02px), print {
  .Hero__Main {
    font-size: clamp(10px, 3.75vw, 64.8px);
    line-height: 1.3;
  }
  :lang(ja) .Hero__Main {
    letter-spacing: 0.05em;
  }
  :lang(en) .Hero__Main, :lang(pt) .Hero__Main, :lang(it-IT) .Hero__Main {
    font-size: clamp(10px, 5.1388888889vw, 88.8px);
    line-height: 1;
  }
  :lang(de) .Hero__Main {
    max-width: clamp(10px, 27.7777777778vw, 480px);
    font-size: clamp(10px, 4.1666666667vw, 72px);
    line-height: 1.1;
  }
  :lang(es) .Hero__Main {
    max-width: clamp(10px, 27.7777777778vw, 480px);
    font-size: clamp(10px, 4.5833333333vw, 79.2px);
    line-height: 1.2;
  }
  :lang(ko) .Hero__Main {
    font-size: clamp(10px, 3.3333333333vw, 57.6px);
  }
  :lang(fr) .Hero__Main {
    font-size: clamp(10px, 4.1666666667vw, 72px);
    line-height: 1.2;
  }
}
@media screen and (max-width: 768px) {
  .Hero__Main {
    position: relative;
    z-index: 1;
    font-size: 36px;
    line-height: 1.1;
    text-align: center;
  }
  :lang(fr) .Hero__Main {
    max-width: 300px;
    margin-inline: auto;
  }
}
.Hero__Main span {
  display: inline;
}
.Hero__Main sup {
  display: inline-block;
  font-size: 0.3em;
  vertical-align: top;
  transform: translateX(-0.5em);
}

.Hero__Text {
  display: grid;
  margin-top: clamp(10px, 1.5277777778vw, 26.4px);
  font-family: "Noto Sans JP" , Roboto, sans-serif !important;
}
:lang(en) .Hero__Text, :lang(fr) .Hero__Text, :lang(de) .Hero__Text, :lang(pt) .Hero__Text, :lang(es) .Hero__Text, :lang(it-IT) .Hero__Text {
  //font-family: Helvetica Neue, sans-serif;
}
.Hero__Text li {
  display: flex;
  font-size: clamp(10px, 0.9722222222vw, 16.8px);
  line-height: 1.4285714286;
  color: #d9ffff;
}
.Hero__Text li::before {
  content: "・";
}
@media screen and (max-width: 768px) {
  .Hero__Text {
    display: none;
  }
}

@media screen and (min-width: 768.02px), print {
  .Hero__Image {
    position: relative;
  }
}
@media screen and (max-width: 768px) {
  .Hero__Image {
    width: 110%;
    margin-inline: -5%;
    margin-top: -35%;
  }
}
.Hero__Image img {
  width: 95%;
}

@media screen and (max-width: 768px) {
  .Hero__Image img {
    width: 100%;
  }
  .Hero__Image__Pc {
    display: none;
  }
}

@media screen and (min-width: 768.02px), print {
  .Hero__Image__Sp {
    display: none;
  }
}

.Hero__Image__Text {
  position: absolute;
  display: grid;
  align-items: center;
  font-size: clamp(6px, 1.0416666667vw, 18px);
  line-height: 1.2;
  color: #d9ffff;
  text-align: center;
}

.Hero__Image__Text.Hero__Image__Text--01 {
  top: clamp(1px, 0.3166666667vw, 7.2px);
  right: clamp(1px, 10vw, 168.2px);
  width: clamp(6px, 9.1666666667vw, 158.4px);
  height: clamp(6px, 9.1666666667vw, 158.4px);
  padding-inline: clamp(1px, 1.1805555556vw, 20.4px);
}

.Hero__Image__Text.Hero__Image__Text--01.Hero_long_text {
font-size: clamp(6px, .85vw, 18px);
}


.Hero__Image__Text.Hero__Image__Text--02 {
  top: clamp(1px, 33.1411111111vw, 0570.4px);
  left: clamp(1px, 0.5555555556vw, 9.6px);
  width: clamp(1px, 13.4722222222vw, 232.8px);
}
:lang(zh-cmn-Hant) .Hero__Image__Text.Hero__Image__Text--02 {
  font-size: clamp(6px, 0.9027777778vw, 15.6px);
}

:lang(en) .Hero__Logo, :lang(fr) .Hero__Logo, :lang(de) .Hero__Logo, :lang(pt) .Hero__Logo, :lang(es) .Hero__Logo, :lang(it-IT) .Hero__Logo {
  font-family: Helvetica Neue, sans-serif;
}
@media screen and (min-width: 768.02px), print {
  .Hero__Logo {
    width: clamp(10px, 19.4444444444vw, 336px);
    margin-top: 9.3150684932%;
  }
}
@media screen and (max-width: 768px) {
  .Hero__Logo {
    display: grid;
    justify-content: center;
    margin-inline: auto;
    margin-top: 14px;
  }
  .Hero__Logo img {
    width: 198px;
  }
}

.Hero__Logo__Head {
  display: block;
  line-height: 1;
  color: #d9ffff;
  text-align: left;
}
@media screen and (min-width: 768.02px), print {
  .Hero__Logo__Head {
    font-size: clamp(8px, 0.9722222222vw, 16.8px);
  }
}
@media screen and (max-width: 768px) {
  .Hero__Logo__Head {
    font-size: 12px;
    text-align: center;
  }
}
:lang(ja) .Hero__Logo__Head {
  margin-bottom: 4px;
}
:not(:lang(ja)) .Hero__Logo__Head {
  margin-top: 6px;
}
@media screen and (min-width: 768.02px), print {
  :not(:lang(ja)) .Hero__Logo__Head {
    font-size: clamp(8px, 1.5277777778vw, 26.4px);
    text-align: left;
  }
}
:lang(fr) .Hero__Logo__Head, :lang(de) .Hero__Logo__Head, :lang(zh-cmn-Hans) .Hero__Logo__Head, :lang(zh-cmn-Hant) .Hero__Logo__Head, :lang(ko) .Hero__Logo__Head, :lang(pt) .Hero__Logo__Head, :lang(es) .Hero__Logo__Head, :lang(it-IT) .Hero__Logo__Head {
  font-size: clamp(10px, 1.25vw, 21.6px);
  line-height: 1.2;
}

.Hero__Copy {
  display: grid;
  width: max-content;
  font-weight: 700;
  line-height: 1;
  color: #d9ffff;
  text-align: center;
}
@media screen and (min-width: 768.02px), print {
  .Hero__Copy {
    row-gap: 8px;
    margin-top: auto;
  }
}
@media screen and (max-width: 768px) {
  .Hero__Copy {
    row-gap: 4px;
    margin-inline: auto;
    margin-top: 10px;
  }
  :lang(ja) .Hero__Copy {
    margin-top: 10px;
  }
  :not(:lang(ja)) .Hero__Copy {
    margin-top: 16px;
  }
}

.Hero__Copy__Jp {
  text-align: center;
}
@media screen and (min-width: 768.02px), print {
  .Hero__Copy__Jp {
    font-size: clamp(10px, 0.9722222222vw, 16.8px);
  }
}
@media screen and (max-width: 768px) {
  .Hero__Copy__Jp {
    font-size: 10px;
  }
}

@media screen and (min-width: 768.02px), print {
  .Hero__Copy__En {
    font-size: clamp(10px, 1.875vw, 32.4px);
  }
}
@media screen and (max-width: 768px) {
  .Hero__Copy__En {
    font-size: 15px;
  }
}

.Hero_InstaxApp__Main {
  color: #d9ffff;
  display: flex;
  align-items: flex-end;
  column-gap: 6px;
  row-gap: 6px;
  width: 85%;
  margin: 0 auto 0 auto;
  z-index: 100;
}
.Hero_InstaxApp__Image {
  flex: 0 0 18%;
}
.Hero_InstaxApp__Cont {
  flex: 1 1 100%;
}
.Hero_InstaxApp__Title {
  font-size: clamp(14px, 2.2vw, 18px);
  margin-bottom: 6px;
}
.Hero_InstaxApp__Link {
  display: flex;
  column-gap: 6px;
  row-gap: 6px;
}
.Hero_InstaxApp__Link a {
  flex: 1 1 auto;
}
@media screen and (max-width: 768px) {
.Hero_InstaxApp__Link img {
  height: 38px;
}
}
@media screen and (min-width: 768.02px), print {
  .Hero_InstaxApp__Main {
    position: absolute;
    width: var(--app-width);
    height: var(--app-height);
    right: var(--app-right);
    bottom: 0;
  }
}

@media screen and (max-width: 768px) {
  .Hero_InstaxApp__Main {
    margin-block: 32px;
  }
}

.Emoji {
  position: relative;
  top: -0.1em;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
}

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

.Dropdown {
  display: grid;
}
@media screen and (min-width: 768.02px), print {
  .Dropdown {
    row-gap: 10px;
  }
}

@media screen and (max-width: 768px) {
  .Dropdown__Item:nth-of-type(n + 2) {
    border-top: #161616 1px solid;
  }
}

.Dropdown__Summary {
  width: 100%;
}

.Dropdown__Summary__Inner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  width: 100%;
  background-color: #262626;
}
@media screen and (min-width: 768.02px), print {
  .Dropdown__Summary__Inner {
    column-gap: 16px;
    padding: 30px 60px 30px 30px;
    border-radius: 12px;
  }
}
@media screen and (max-width: 768px) {
  .Dropdown__Summary__Inner {
    column-gap: 14px;
    padding: 20px 50px 20px 20px;
  }
}
.Dropdown__Summary__Inner::before, .Dropdown__Summary__Inner::after {
  position: absolute;
  top: 50%;
  display: block;
  width: 16px;
  height: 2px;
  content: "";
  background-color: #d9ffff;
}
@media screen and (min-width: 768.02px), print {
  .Dropdown__Summary__Inner::before, .Dropdown__Summary__Inner::after {
    right: 30px;
  }
}
@media screen and (max-width: 768px) {
  .Dropdown__Summary__Inner::before, .Dropdown__Summary__Inner::after {
    right: 20px;
  }
}
.Dropdown__Summary__Inner::before {
  transform: translateY(-50%);
}
.Dropdown__Summary__Inner::after {
  transition: transform 0.5s;
  transform: translateY(-50%) rotate(-90deg);
}
@media screen and (min-width: 768.02px), print {
  .Dropdown__Summary[aria-expanded=true] .Dropdown__Summary__Inner {
    border-radius: 12px 12px 0 0;
  }
}
.Dropdown__Summary[aria-expanded=true] .Dropdown__Summary__Inner::after {
  transform: translateY(-50%);
}

.Dropdown__Summary__Icon {
  font-weight: 700;
  color: #d9ffff;
}
@media screen and (min-width: 768.02px), print {
  .Dropdown__Summary__Icon {
    font-size: 26px;
  }
}
@media screen and (max-width: 768px) {
  .Dropdown__Summary__Icon {
    font-size: 22px;
  }
}

.Dropdown__Summary__Text {
  font-size: 16px;
  line-height: 1.875;
  color: #d9ffff;
  text-align: left;
}

.Dropdown__Content {
  overflow: hidden;
}

.Dropdown__Content__Inner {
  display: grid;
  color: #262626;
  background-color: #d9ffff;
}
@media screen and (min-width: 768.02px), print {
  .Dropdown__Content__Inner {
    padding: 40px 42px 58px;
    border-radius: 0 0 12px 12px;
  }
}
@media screen and (max-width: 768px) {
  .Dropdown__Content__Inner {
    padding: 24px 20px 30px;
  }
}
@media screen and (min-width: 768.02px), print {
  .Dropdown--Faq .Dropdown__Content__Inner {
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    padding: 28px 30px;
  }
}
@media screen and (max-width: 768px) {
  .Dropdown--Faq .Dropdown__Content__Inner {
    row-gap: 14px;
    padding: 24px 20px;
  }
}

.Dropdown__Content__Texts a {
  display: inline-block;
  transition: opacity 0.2s;
  text-decoration: underline;
}
@media (hover: hover) {
  .Dropdown__Content__Texts a:where(:any-link, :enabled, summary):hover {
    opacity: 0.7;
  }
}
.Dropdown__Content__Texts p {
  margin-top: 28px;
  font-size: 16px;
  line-height: 1.875;
}
.Dropdown__Content__Texts > :first-child {
  margin-top: 0;
}

.Dropdown__Content__Icon {
  font-weight: 700;
}
@media screen and (min-width: 768.02px), print {
  .Dropdown__Content__Icon {
    font-size: 26px;
  }
}
@media screen and (max-width: 768px) {
  .Dropdown__Content__Icon {
    font-size: 22px;
  }
}

.Dropdown__BulletList {
  display: grid;
  row-gap: 5px;
  font-size: 16px;
  line-height: 1.7;
}
.Dropdown__BulletList:not(:first-child) {
  margin-top: 20px;
}
.Dropdown__BulletList > li {
  position: relative;
  padding-left: 16px;
}
.Dropdown__BulletList > li::before {
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 6px;
  height: 6px;
  content: "";
  background-color: currentColor;
  border-radius: 100%;
}

.Dropdown__Image:not(:first-child) {
  margin-top: 26px;
}

.Dropdown__SubTitle {
  font-weight: 700;
  line-height: 1.3;
}
@media screen and (min-width: 768.02px), print {
  .Dropdown__SubTitle {
    font-size: 16px;
  }
}
@media screen and (max-width: 768px) {
  .Dropdown__SubTitle {
    font-size: 14px;
  }
}
@media screen and (min-width: 768.02px), print {
  .Dropdown__SubTitle:not(:first-child) {
    padding-top: 50px;
  }
}
@media screen and (max-width: 768px) {
  .Dropdown__SubTitle:not(:first-child) {
    padding-top: 20px;
  }
}

.Dropdown__Image__List {
  display: grid;
  padding-right: 20px;
}
@media screen and (min-width: 768.02px), print {
  .Dropdown__Image__List {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 32px;
    column-gap: 30px;
    margin-top: 20px;
  }
}
@media screen and (max-width: 768px) {
  .Dropdown__Image__List {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 21px;
    column-gap: 24px;
    margin-top: 16px;
  }
}
.Dropdown__Image__List li {
  position: relative;
}
.Dropdown__Image__List li::after {
  position: absolute;
  top: 50%;
  right: -14px;
  width: 11px;
  height: 11px;
  content: "";
  border-top: 2px solid #282728;
  border-right: 2px solid #282728;
  transform: translateY(-50%);
  rotate: 45deg;
}
.Dropdown__Image__List li:last-of-type::after {
  content: none;
}
.Dropdown__Image__List img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .HowToUse .Dropdown__Image__List {
    grid-template-columns: 1fr;
    padding-right: 0px;
  }
  .HowToUse .Dropdown__Image__List li::after {
    top: auto;
    right: auto;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    rotate: 135deg;
  }
}

.Dropdown__Table {
  width: 100%;
  border-top: solid 1px #001e62;
  border-right: solid 1px #001e62;
}
.Dropdown__Table:not(:first-child) {
  margin-top: 28px;
}
.Dropdown__Table:not(:lang(ja)) {
  text-align: center;
}
.Dropdown__Table caption {
  margin-bottom: 8px;
  font-weight: 700;
}
.Dropdown__Table caption:not(:lang(ja)) {
  text-align: left;
}
.Dropdown__Table thead {
  color: #fff;
  background: #685bc7;
}
.Dropdown__Table td,
.Dropdown__Table th {
  padding: 12px 10px;
  font-size: 14px;
  line-height: 1.5714285714;
  border-left: solid 1px #001e62;
}
.Dropdown__Table tbody th {
  background-color: rgba(104, 91, 199, 0.2);
}
@media screen and (min-width: 768.02px), print {
  .Dropdown__Table tbody th {
    width: 20%;
  }
}
@media screen and (max-width: 768px) {
  .Dropdown__Table tbody th {
    width: 20%;
  }
}
@media screen and (min-width: 768.02px), print {
  .Dropdown__Table tbody td {
    width: 20%;
  }
}
@media screen and (max-width: 768px) {
  .Dropdown__Table tbody td {
    width: 55%;
  }
}
.Dropdown__Table :not(thead) > tr > th,
.Dropdown__Table :not(thead) > tr > td {
  border-bottom: solid 1px #001e62;
}
@media screen and (max-width: 768px) {
  .Dropdown__Table.Dropdown__Table--pc {
    display: none;
  }
}
@media screen and (min-width: 768.02px), print {
  .Dropdown__Table.Dropdown__Table--sp {
    display: none;
  }
}
.Dropdown__Table.Dropdown__Table--sp + .Dropdown__Table.Dropdown__Table--sp {
  margin-top: 0;
  border-top: none;
}

.Dropdown__OrderedList {
  font-size: 16px;
  line-height: 1.875;
  counter-reset: item;
}
.Dropdown__OrderedList:not(:first-child) {
  margin-top: 28px;
}
.Dropdown__OrderedList li {
  position: relative;
  padding-left: 26px;
}
.Dropdown__OrderedList li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: counter(item) "）";
  counter-increment: item;
}
.Dropdown__OrderedList p {
  margin-top: 0;
}
.Dropdown__OrderedList.Dropdown__OrderedList--withImage {
  display: grid;
  row-gap: 20px;
}
.Dropdown__OrderedList.Dropdown__OrderedList--withImage li {
  display: grid;
  grid-template-rows: 1fr auto;
  row-gap: 10px;
}
.Dropdown__OrderedList.Dropdown__OrderedList--withImage img {
  width: revert-layer;
}
.Dropdown__OrderedList.Dropdown__OrderedList--fixedWidth img {
  max-width: 172px;
}
.Dropdown__OrderedList.Dropdown__OrderedList--col2 {
  display: grid;
  row-gap: 40px;
  column-gap: 20px;
}
@media screen and (min-width: 768.02px), print {
  .Dropdown__OrderedList.Dropdown__OrderedList--col2 {
    grid-template-columns: 1fr 1fr;
  }
}
.Dropdown__OrderedList.Dropdown__OrderedList--col2 li {
  display: grid;
  grid-template-rows: 1fr auto;
  row-gap: 10px;
}
.Dropdown__OrderedList.Dropdown__OrderedList--col2 li picture {
  width: 75%;
}

.Dropdown__Iframe {
  width: 100%;
  aspect-ratio: 16/9;
  margin-top: 20px;
}
.Dropdown__Iframe iframe {
  width: 100%;
  height: 100%;
}

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

.Firmware__Main {
  display: grid;
  column-gap: 60px;
  color: #d9ffff;
  border-top: 1px solid rgba(217, 255, 255, 0.3);
  border-bottom: 1px solid rgba(217, 255, 255, 0.3);
}
@media screen and (min-width: 768.02px), print {
  .Firmware__Main {
    grid-template-columns: auto 1fr;
    padding-top: 24px;
    padding-bottom: 20px;
  }
}
@media screen and (max-width: 768px) {
  .Firmware__Main {
    row-gap: 10px;
    padding-top: 24px;
    padding-bottom: 20px;
    font-size: 32px;
  }
}

.Firmware__Main__Title {
  font-size: 16px;
  line-height: 1.375;
}

.Firmware__Main__Content {
  display: grid;
  row-gap: 4px;
}

.Firmware__Main__Text {
  font-size: 16px;
  line-height: 1.375;
}
.Firmware__Main__Text.Firmware__Main__Text--Bold {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.Firmware__Main__List {
  display: grid;
  row-gap: 4px;
  margin-top: 10px;
}
.Firmware__Main__List .Firmware__Main__Text {
  display: flex;
}
.Firmware__Main__List .Firmware__Main__Text::before {
  margin-right: 4px;
  content: "・";
}

.Firmware__Text {
  margin-top: 38px;
  font-size: 16px;
  line-height: 1.375;
  color: #262626;
}

.Firmware__Title {
  display: grid;
  row-gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid #262626;
}
@media screen and (min-width: 768.02px), print {
  .Firmware__Title {
    padding-top: 76px;
  }
}
@media screen and (max-width: 768px) {
  .Firmware__Title {
    padding-top: 40px;
  }
}

.Firmware__Title__Sub {
  font-size: 16px;
  line-height: 1.375;
  color: #262626;
}

.Firmware__Title__Main {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.375;
  color: #262626;
}

.Firmware__SubText {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.5;
  color: #262626;
}

.Firmware__List {
  display: grid;
}
@media screen and (min-width: 768.02px), print {
  .Firmware__List {
    grid-template-columns: 1fr 1fr;
    row-gap: 60px;
    column-gap: 40px;
    margin-top: 32px;
  }
}
@media screen and (max-width: 768px) {
  .Firmware__List {
    row-gap: 30px;
    margin-top: 20px;
  }
}

.Firmware__Item {
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.Firmware__Item__Head {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  color: #d9ffff;
}

.Firmware__Item__Title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.375;
}

.Firmware__Item__Step {
  display: inline-block;
  padding: 6px 16px 6px 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  background-color: #262626;
  border-radius: 9999px;
}

.Firmware__Item__Text {
  font-size: 16px;
  line-height: 1.8;
}

.Firmware__Item__List {
  display: grid;
  row-gap: 4px;
}
.Firmware__Item__List li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 4px;
  font-size: 16px;
  line-height: 1.375;
}

.Firmware__Item__Image {
  align-self: flex-end;
  margin-top: 10px;
}
.Firmware__Item__Image img {
  width: 100%;
}

.Firmware__Download {
  position: relative;
  display: block;
  margin-inline: auto;
  margin-top: 60px;
  margin-bottom: 60px;
  font-size: 16px;
  line-height: 1.375;
  color: #d9ffff;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 2px #d9ffff;
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  transform: scale3d(1, 1, 1);
  will-change: transform;
}
@media (hover: hover) {
  .Firmware__Download:where(:any-link, :enabled, summary):hover {
    color: #262626;
    box-shadow: inset 0 0 0 35px #d9ffff;
    transform: scale3d(1.1, 1.1, 1);
  }
}
@media screen and (min-width: 768.02px), print {
  .Firmware__Download {
    width: max-content;
    padding: 16px 66px 16px 50px;
  }
}
@media screen and (max-width: 768px) {
  .Firmware__Download {
    display: none;
  }
}

.Firmware__Download__Icon {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 17px;
  transform: translateY(-50%);
}
@media screen and (min-width: 768.02px), print {
  .Firmware__Download__Icon {
    right: 25px;
  }
}
@media screen and (max-width: 768px) {
  .Firmware__Download__Icon {
    right: 15px;
  }
}
.Firmware__Download__Icon picture {
  display: block;
}
.Firmware__Download__Icon img {
  width: 100%;
  vertical-align: top;
}

.Firmware__Box {
  padding: 20px;
  margin-top: 20px;
  background-color: #262626;
}
@media screen and (min-width: 768.02px), print {
  .Firmware__Box {
    display: none;
  }
}

.Firmware__Box__Text {
  font-size: 16px;
  line-height: 1.375;
  color: #d9ffff;
  word-break: break-all;
}

.Firmware__Box__Button {
  position: relative;
  display: block;
  padding: 11px 50px 11px 50px;
  margin-inline: auto;
  margin-top: 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.375;
  color: #d9ffff;
  border: 2px solid #d9ffff;
  border-radius: 9999px;
}
.Firmware__Box__Button::after {
  position: absolute;
  top: 50%;
  right: 22px;
  display: block;
  width: 13px;
  height: 13px;
  content: "";
  background-color: currentColor;
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17.1 17" style="enable-background:new 0 0 17.1 17;" xml:space="preserve"><rect x="0.2" y="0.1" class="st0" width="13" height="13"/><path class="st0" d="M14.7,16.8h-11c-0.4,0-0.6-0.3-0.6-0.7c0-0.4,0.3-0.7,0.6-0.7h11c0.5,0,0.8-0.4,0.8-0.8v-12c0-0.4,0.3-0.6,0.7-0.6c0.4,0,0.7,0.3,0.7,0.6v12C16.9,15.8,15.9,16.8,14.7,16.8z"/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17.1 17" style="enable-background:new 0 0 17.1 17;" xml:space="preserve"><rect x="0.2" y="0.1" class="st0" width="13" height="13"/><path class="st0" d="M14.7,16.8h-11c-0.4,0-0.6-0.3-0.6-0.7c0-0.4,0.3-0.7,0.6-0.7h11c0.5,0,0.8-0.4,0.8-0.8v-12c0-0.4,0.3-0.6,0.7-0.6c0.4,0,0.7,0.3,0.7,0.6v12C16.9,15.8,15.9,16.8,14.7,16.8z"/></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  transform: translateY(-50%);
}

.Visuals {
  overflow: hidden;
}
@media screen and (min-width: 768.02px), print {
  .Visuals {
    margin-top: 80px;
  }
}
@media screen and (max-width: 768px) {
  .Visuals {
    margin-top: 40px;
  }
}

.Visuals__Track {
  overflow: visible;
}
@media screen and (min-width: 768.02px), print {
  .Visuals__Track {
    padding-block: min(5.1%, 72px);
  }
}
@media screen and (max-width: 768px) {
  .Visuals__Track {
    padding-block: 8.1%;
  }
}

@media screen and (min-width: 768.02px), print {
  .Visuals__Slide {
    width: 66.6666666667%;
    max-width: 780px;
    max-width: clamp(780px, 54.1666666667vw, 936px);
  }
}
@media screen and (max-width: 768px) {
  .Visuals__Slide {
    width: 69.3333333333%;
  }
}

.Visuals__Slide__Inner {
  position: relative;
  display: block;
  width: 100%;
  transition: 0.7s;
  transform: scale(1);
}
.Visuals__Slide__Inner::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background-color: #000;
  opacity: 0.5;
  transition: opacity 0.5s;
}
.Visuals__Slide__Inner img {
  border-radius: 25px;
}
.Visuals__Slide.is-active .Visuals__Slide__Inner {
  z-index: 2;
  opacity: 1;
}
@media screen and (min-width: 768.02px), print {
  .Visuals__Slide.is-active .Visuals__Slide__Inner {
    transform: scale(1.2307692308);
  }
}
@media screen and (max-width: 768px) {
  .Visuals__Slide.is-active .Visuals__Slide__Inner {
    transform: scale(1.3);
  }
}
.Visuals__Slide.is-active .Visuals__Slide__Inner::after {
  opacity: 0;
}

.Visuals__Controls {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 32px;
  column-gap: 14px;
  width: max-content;
  padding: 6px 6px 6px 25px;
  margin-inline: auto;
  margin-top: -22px;
  background-color: #d9ffff;
  border-radius: 9999px;
}

.Visuals__Pagination {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 9px;
  width: max-content;
}
.Visuals__Pagination li {
  display: grid;
  width: 6px;
  height: 6px;
}
.Visuals__Pagination .splide__pagination__page {
  width: 6px;
  height: 6px;
  background-color: #262626;
  border-radius: 50%;
  opacity: 0.2;
}
.Visuals__Pagination .splide__pagination__page.is-active {
  background-color: #262626;
  opacity: 1;
}

.Visuals__PlayPauseButton {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.Visuals__PlayPauseButton .splide__toggle__play,
.Visuals__PlayPauseButton .splide__toggle__pause {
  width: 100%;
  height: 100%;
}
.Visuals__PlayPauseButton .splide__toggle__play {
  display: block;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg id="_レイヤー_2" data-name="レイヤー 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g id="_レイヤー_1-2" data-name="レイヤー 1"><path class="cls-1" d="M16,0C7.16,0,0,7.16,0,16s7.16,16,16,16,16-7.16,16-16S24.84,0,16,0ZM12,22.35v-12.7l11,6.35-11,6.35Z"/></g></svg>');
  background-size: cover;
}
.Visuals__PlayPauseButton .splide__toggle__pause {
  display: none;
  background-image: url('data:image/svg+xml;charset=UTF-8,<?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_2" data-name="レイヤー 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><style>.cls-1 {fill: %23262626;stroke-width: 0px;}</style></defs><g id="_レイヤー_1-2" data-name="レイヤー 1"><path class="cls-1" d="M16,0C7.16,0,0,7.16,0,16s7.16,16,16,16,16-7.16,16-16S24.84,0,16,0ZM14,22h-3v-12h3v12ZM21,22h-3v-12h3v12Z"/></g></svg>');
}
.Visuals__PlayPauseButton.is-active .splide__toggle__play {
  display: none;
}
.Visuals__PlayPauseButton.is-active .splide__toggle__pause {
  display: block;
}

.Features {
  overflow: hidden;
}

@media screen and (min-width: 768.02px), print {
  .Features__Point {
    margin-top: 142px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point {
    margin-top: 52px;
  }
}

.Features__Point__List {
  display: grid;
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__List {
    row-gap: 200px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__List {
    row-gap: 112px;
  }
}

.Features__Point__Item {
  display: grid;
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__Item {
    grid-template-columns: 1fr 1.2fr;
    column-gap: 6.0344827586%;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__Item {
    row-gap: 22px;
  }
}

.Features__Point__Image {
  position: relative;
}
.Features__Point__Image img {
  animation-name: pointAnimation;
  animation-duration: 0.5s;
  animation-play-state: paused;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__Image img {
    border-radius: 48px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__Image img {
    border-radius: 32px;
  }
}
@keyframes pointAnimation {
  0% {
    -webkit-clip-path: inset(50% 50% round 32px);
            clip-path: inset(50% 50% round 32px);
  }
  100% {
    -webkit-clip-path: inset(0 0 round 32px);
            clip-path: inset(0 0 round 32px);
  }
}
.Features__Point__Image[data-scroll-image=show] img {
  animation-play-state: running;
}

.Features__Point__Circle {
  position: absolute;
  display: grid;
  place-items: center;
  background-color: #d9ffff;
  border-radius: 50%;
  opacity: 0;
  transition-delay: 0.5s;
  transition-duration: 1s;
  transition-property: transform opacity;
  transform: translateY(20px);
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__Circle {
    top: -40px;
    left: -40px;
    width: clamp(88px, 10vw, 132px);
    height: clamp(88px, 10vw, 132px);
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__Circle {
    top: -12px;
    left: -10px;
    width: 88px;
    height: 88px;
  }
}
[data-scroll-image=show] .Features__Point__Circle {
  opacity: 1;
  transform: translateY(0);
}

.Features__Point__Circle__Text {
  display: block;
  padding-top: 8px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__Circle__Text {
    font-size: clamp(14px, 2vw, 16px);
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__Circle__Text {
    font-size: 14px;
  }
}

.Features__Point__Circle__Number {
  display: block;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__Circle__Number {
    margin-top: 2px;
    font-size: clamp(32px, 4vw, 40px);
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__Circle__Number {
    font-size: 32px;
  }
  .Features__Point__Content {
    margin-top: -10px;
  }
}

.Features__Point__Head {
  position: relative;
  display: inline-block;
  color: #d9ffff;
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__Head {
    padding-top: 13px;
    font-size: 18px;
    line-height: 1.2;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__Head {
    padding-top: 8px;
    font-size: 14px;
  }
}
.Features__Point__Head::before {
  position: absolute;
  top: 0;
  content: "";
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14"><image id="ベクトルスマートオブジェクト.svg" width="14" height="14" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABCElEQVQokYXSvUpdQRQG0LX1IEQFW7tUQlBR4WAKO/MGQdDOykpLLWzFQvA1LCwEJVV6U1lMoqRLwJ/KVjBIrLaFV7kcz73u8mMWe75hwjtTMj9iGV8wiRGcRR8whV3M4RDfcVFH3PcCgyVzp2TelMzVklm1nasaaBhHeMRsHXHX60YDXajCMW6w1A81N+7hDht1RLZVwAJmMVp1ws9YwkwTdcA6NvEHP3D5snEfW3XEvwYa63R+wGIdcfXasWROYxwnDVThG37hazfi+XFWcNDSaw332G7rrGSelsz5RhYl87pkTrwBXRs/4Xcjr3FbR/ztB4fqiP+NfALnvdAL/NmSf/D8EXrOE2IuZcgehqWJAAAAAElFTkSuQmCC"/></svg>');
  background-size: cover;
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__Head::before {
    left: -14px;
    width: 14px;
    height: 14px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__Head::before {
    right: -8px;
    width: 8px;
    height: 8px;
    rotate: 90deg;
  }
}

.Features__Point__Title {
  font-weight: 700;
  line-height: 1.4;
  color: #d9ffff;
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__Title {
    max-width: 500px;
    margin-top: 14px;
    font-size: 34px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__Title {
    margin-top: 12px;
    font-size: 26px;
  }
}
.Features__Point__Title span {
  display: inline-block;
}

@media screen and (min-width: 768.02px), print {
  .Features__Point__Text {
    max-width: 500px;
    margin-top: 22px;
    font-size: 16px;
    line-height: 1.8;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__Text {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.9;
  }
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__Text span {
    display: inline-block;
  }
}

.Features__Point__Caption {
  font-size: 11px;
  line-height: 1.8;
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__Caption {
    margin-top: 4px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__Caption {
    margin-top: 4px;
  }
}

.Features__Point__Figure {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  background-color: #d9ffff;
  border-radius: 24px;
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__Figure {
    column-gap: 22.7272727273%;
    padding: 30px 40px 30px;
    margin-top: 56px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__Figure {
    column-gap: 6.5671641791%;
    padding: 16px 20px;
    margin-top: 30px;
  }
}
.Features__Point__Figure::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 3px;
  height: calc(100% - 90px);
  content: "";
  background-image: linear-gradient(to bottom, #262626 3px, transparent 3px);
  background-repeat: repeat-y;
  background-position: left bottom;
  background-size: 3px 7px;
  transform: translate(-50%, -50%) rotate(-8deg);
}

.Features__Point__FigureInner {
  position: relative;
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__FigureInner:nth-of-type(1) {
    padding-top: 70px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__FigureInner:nth-of-type(1) {
    padding-top: 46px;
    padding-right: 12px;
  }
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__FigureInner:nth-of-type(2) {
    padding-bottom: 70px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__FigureInner:nth-of-type(2) {
    padding-bottom: 46px;
    padding-left: 12px;
  }
}

.Features__Point__FigureText {
  position: absolute;
  z-index: 1;
  display: block;
  aspect-ratio: 271/135;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background-color: #262626;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__FigureText {
    width: 135px;
    padding-block: 24px;
    font-size: 22px;
    -webkit-mask-size: 135px;
            mask-size: 135px;
  }
  :lang(it-It) .Features__Point__FigureText {
    font-size: 18px;
  }
  :lang(fr) .Features__Point__FigureText {
    font-size: 16px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__FigureText {
    width: 90px;
    padding-block: 16px;
    font-size: 14px;
    -webkit-mask-size: 90px;
            mask-size: 90px;
  }
  :lang(it-It) .Features__Point__FigureText {
    font-size: 12px;
  }
  :lang(fr) .Features__Point__FigureText {
    font-size: 11px;
  }
}
.Features__Point__FigureText.Features__Point__FigureText--Left {
  bottom: 0;
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_2" data-name="レイヤー 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 82"><g id="_レイヤー_1-2" data-name="レイヤー 1"><polygon class="cls-1" points="148 41 115 0 115 18 0 18 6 64 115 64 115 82 148 41"/></g></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_2" data-name="レイヤー 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 82"><g id="_レイヤー_1-2" data-name="レイヤー 1"><polygon class="cls-1" points="148 41 115 0 115 18 0 18 6 64 115 64 115 82 148 41"/></g></svg>');
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__FigureText.Features__Point__FigureText--Left {
    left: -22.8%;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__FigureText.Features__Point__FigureText--Left {
    left: 0;
  }
}
.Features__Point__FigureText.Features__Point__FigureText--Right {
  top: 0;
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_2" data-name="レイヤー 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 82"><g id="_レイヤー_1-2" data-name="レイヤー 1"><polygon class="cls-1" points="142 18 33 18 33 0 0 41 33 82 33 64 148 64 142 18"/></g></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_2" data-name="レイヤー 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 82"><g id="_レイヤー_1-2" data-name="レイヤー 1"><polygon class="cls-1" points="142 18 33 18 33 0 0 41 33 82 33 64 148 64 142 18"/></g></svg>');
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__FigureText.Features__Point__FigureText--Right {
    right: -22.8%;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__FigureText.Features__Point__FigureText--Right {
    right: 0;
  }
}

.Features__Point__Figure__Arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 53.5353535354%;
  transform: translate(-50%, -50%);
}

.Features__Point__Step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  background-color: #d9ffff;
  border-radius: 24px;
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__Step {
    padding-block: 25px;
    margin-top: 60px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__Step {
    padding: 16px 0 30px;
    margin-top: 36px;
  }
}

.Features__Point__StepItem {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.Features__Point__StepItem img {
  width: 100%;
}

.Features__Point__StepHead {
  display: inline-block;
  width: max-content;
  font-weight: 700;
  color: #d9ffff;
  background-color: #262626;
  border-radius: 9999px;
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__StepHead {
    padding: 5px 22px 5px 20px;
    margin-left: 25px;
    font-size: 14px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__StepHead {
    padding: 4px 14px 4px 14px;
    margin-left: 20px;
    font-size: 12px;
  }
}
.Features__Point__StepItem:nth-of-type(2) .Features__Point__StepHead {
  margin-left: 0;
}

.Features__Point__StepTitle {
  display: block;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__StepTitle {
    padding-right: 20px;
    margin-top: 6px;
    margin-left: 25px;
    font-size: 18px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__StepTitle {
    padding-right: 12px;
    margin-top: 12px;
    margin-left: 20px;
    font-size: 14px;
  }
}
.Features__Point__StepItem:nth-of-type(2) .Features__Point__StepTitle {
  margin-left: 0;
}

.Features__Point__StepImage {
  position: relative;
  margin-top: 12px;
}

.Features__Point__More {
  position: relative;
  padding: 17px 56px 17px 48px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #d9ffff;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 2px #d9ffff;
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  transform: scale3d(1, 1, 1);
  will-change: transform;
}
@media (hover: hover) {
  .Features__Point__More:where(:any-link, :enabled, summary):hover {
    color: #262626;
    box-shadow: inset 0 0 0 35px #d9ffff;
    transform: scale3d(1.1, 1.1, 1);
  }
  .Features__Point__More:where(:any-link, :enabled, summary):hover::before, .Features__Point__More:where(:any-link, :enabled, summary):hover::after {
    background-color: #262626;
  }
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__More {
    margin-top: 34px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__More {
    margin-top: 26px;
  }
}
.Features__Point__More::before, .Features__Point__More::after {
  position: absolute;
  top: 50%;
  right: 19px;
  width: 13px;
  height: 2px;
  content: "";
  background-color: #d9ffff;
  transition: background-color 0.3s;
  transform: translateY(-50%);
}
.Features__Point__More::after {
  top: calc(50% - 1px);
  right: 20px;
  rotate: 90deg;
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__Frame + .Features__Point__More {
    margin-top: 20px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__Frame + .Features__Point__More {
    margin-top: 30px;
  }
}

.Features__Point__Frame {
  display: grid;
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__Frame {
    row-gap: 40px;
    margin-top: 30px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__Frame {
    row-gap: 30px;
    margin-top: 24px;
  }
}

.Features__Point__FrameItem {
  display: grid;
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__FrameItem {
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__FrameItem {
    row-gap: 15px;
  }
}

.Features__Point__FrameHead {
  display: inline-block;
  line-height: 1;
  color: #d9ffff;
  background-color: #262626;
  border-radius: 9999px;
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__FrameHead {
    padding: 7px 17px;
    font-size: 16px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__FrameHead {
    padding: 7px 18px;
    font-size: 14px;
  }
}

@media screen and (min-width: 768.02px), print {
  .Features__Point__FrameText {
    margin-top: 6px;
    font-size: 16px;
    line-height: 1.9;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__FrameText {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.8;
  }
}

.Features__Point__FrameOption {
  font-size: 11px;
  line-height: 1.2;
}
@media screen and (min-width: 768.02px), print {
  .Features__Point__FrameOption {
    margin-top: 6px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Point__FrameOption {
    margin-top: 2px;
  }
}

.Features__Point__FrameImages {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 7px;
}
.Features__Point__FrameImages img {
  width: 100%;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
}
.Features__Point__FrameImages span {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  text-align: center;
}

.Features__Additional {
  display: grid;
}
@media screen and (min-width: 768.02px), print {
  .Features__Additional {
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    margin-top: 62px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Additional {
    row-gap: 36px;
    margin-top: 36px;
  }
}

.Features__AdditionalItem {
  position: relative;
  overflow: hidden;
  background-color: #d9ffff;
}
@media screen and (min-width: 768.02px), print {
  .Features__AdditionalItem {
    padding: 52px 40px 60px;
    border-radius: 32px;
  }
}
@media screen and (max-width: 768px) {
  .Features__AdditionalItem {
    padding: 26px 40px 32px;
    border-radius: 20px;
  }
  .Features__AdditionalItem:nth-of-type(2) {
    padding: 32px 40px 35px;
  }
}

@media screen and (min-width: 768.02px), print {
  .Features__AdditionalContent {
    width: 66%;
    padding-right: 16px;
  }
}
@media screen and (max-width: 768px) {
  .Features__AdditionalContent {
    width: 100%;
    padding-right: 12px;
  }
  .Features__AdditionalItem:nth-of-type(1) .Features__AdditionalContent {
    text-align: center;
  }
  .Features__AdditionalItem:nth-of-type(2) .Features__AdditionalContent {
    width: 70%;
  }
}

.Features__AdditionalHead {
  font-weight: 700;
  line-height: 1.8;
}
@media screen and (min-width: 768.02px), print {
  .Features__AdditionalHead {
    font-size: 24px;
  }
}
@media screen and (max-width: 768px) {
  .Features__AdditionalHead {
    font-size: 18px;
    text-align: center;
  }
}

@media screen and (min-width: 768.02px), print {
  .Features__AdditionalText {
    font-size: 18px;
    line-height: 1.7;
  }
}
@media screen and (max-width: 768px) {
  .Features__AdditionalText {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
  }
}
.Features__AdditionalText span {
  display: inline-block;
}

.Features__AdditionalButton {
  position: relative;
  padding: 17px 56px 17px 48px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #262626;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 2px #262626;
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  transform: scale3d(1, 1, 1);
  will-change: transform;
}
@media (hover: hover) {
  .Features__AdditionalButton:where(:any-link, :enabled, summary):hover {
    color: #d9ffff;
    box-shadow: inset 0 0 0 35px #262626;
    transform: scale3d(1.1, 1.1, 1);
  }
  .Features__AdditionalButton:where(:any-link, :enabled, summary):hover::before, .Features__AdditionalButton:where(:any-link, :enabled, summary):hover::after {
    background-color: #d9ffff;
  }
}
@media screen and (min-width: 768.02px), print {
  .Features__AdditionalButton {
    margin-top: 14px;
  }
}
@media screen and (max-width: 768px) {
  .Features__AdditionalButton {
    margin-top: 20px;
  }
}
.Features__AdditionalButton::before, .Features__AdditionalButton::after {
  position: absolute;
  top: 50%;
  right: 19px;
  width: 13px;
  height: 2px;
  content: "";
  background-color: #262626;
  transition: background-color 0.3s;
  transform: translateY(-50%);
}
.Features__AdditionalButton::after {
  top: calc(50% - 1px);
  right: 20px;
  rotate: 90deg;
}

.Features__AdditionalItem:nth-of-type(1) .Features__AdditionalImage {
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.2));
}
@media screen and (min-width: 768.02px), print {
  .Features__AdditionalItem:nth-of-type(1) .Features__AdditionalImage {
    position: absolute;
    top: 50%;
    right: 5%;
    width: 31.4748201439%;
    max-width: 174px;
    transform: translateY(-50%);
  }
}
@media screen and (max-width: 768px) {
  .Features__AdditionalItem:nth-of-type(1) .Features__AdditionalImage {
    width: 240px;
    margin-inline: auto;
    margin-top: 20px;
  }
}
.Features__AdditionalItem:nth-of-type(2) .Features__AdditionalImage {
  position: absolute;
}
@media screen and (min-width: 768.02px), print {
  .Features__AdditionalItem:nth-of-type(2) .Features__AdditionalImage {
    top: 70%;
    right: 15%;
    width: 20.6834532374%;
    max-width: 120px;
    transform: translateY(-50%);
  }
}
@media screen and (max-width: 768px) {
  .Features__AdditionalItem:nth-of-type(2) .Features__AdditionalImage {
    top: 14%;
    right: 13%;
    width: 65px;
  }
}

.Features__Remote {
  display: grid;
  overflow: hidden;
  background-color: #262626;
  border-radius: 32px;
}
@media screen and (min-width: 768.02px), print {
  .Features__Remote {
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    margin-top: 60px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Remote {
    row-gap: 30px;
    margin-top: 60px;
  }
}

@media screen and (min-width: 768.02px), print {
  .Features__Remote__Content {
    padding-block: 70px;
    padding-left: 70px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Remote__Content {
    padding-inline: 20px;
    padding-top: 24px;
    text-align: center;
  }
}

.Features__Remote__Title {
  font-weight: 700;
  color: #d9ffff;
}
@media screen and (min-width: 768.02px), print {
  .Features__Remote__Title {
    font-size: 24px;
    line-height: 1.8;
  }
}
@media screen and (max-width: 768px) {
  .Features__Remote__Title {
    font-size: 18px;
    line-height: 1.8;
  }
}

.Features__Remote__Text {
  line-height: 1.6;
  color: #d9ffff;
}
@media screen and (min-width: 768.02px), print {
  .Features__Remote__Text {
    margin-top: 8px;
    font-size: 18px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Remote__Text {
    margin-top: 8px;
    font-size: 14px;
  }
}
.Features__Remote__Text span {
  display: inline-block;
}

.Features__Remote__Image .Features__Remote__ImageInner {
  width: 100%;
  height: 100%;
  /* stylelint-disable-next-line no-descending-specificity */
}
.Features__Remote__Image .Features__Remote__ImageInner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.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: #d9ffff;
  text-align: center;
}

.Features__Copy__Text {
  position: relative;
  z-index: 1;
  margin-inline: auto;
}
@media screen and (min-width: 768.02px), print {
  .Features__Copy__Text {
    font-size: 64px;
  }
  :lang(ja) .Features__Copy__Text {
    max-width: 400px;
    font-size: 52px;
  }
  :lang(fr) .Features__Copy__Text {
    max-width: 400px;
  }
  :lang(de) .Features__Copy__Text {
    max-width: 556px;
    font-size: 60px;
  }
}
@media screen and (max-width: 768px) {
  .Features__Copy__Text {
    max-width: 350px;
    font-size: 48px;
  }
  :lang(fr) .Features__Copy__Text, :lang(de) .Features__Copy__Text, :lang(es) .Features__Copy__Text {
    font-size: 34px;
  }
  :lang(fr) .Features__Copy__Text, :lang(de) .Features__Copy__Text {
    max-width: 250px;
  }
  :lang(es) .Features__Copy__Text {
    max-width: 250px;
  }
  :lang(zh-cmn-Hant) .Features__Copy__Text, :lang(zh-cmn-Hans) .Features__Copy__Text {
    font-size: 40px;
  }
  :lang(zh-cmn-Hant) .Features__Copy__Text {
    max-width: 250px;
  }
  :lang(en) .Features__Copy__Text, :lang(pt) .Features__Copy__Text {
    max-width: 300px;
    font-size: 44px;
  }
  :lang(ko) .Features__Copy__Text {
    font-size: 28px;
  }
  :lang(ja) .Features__Copy__Text {
    max-width: 190px;
    font-size: 32px;
  }
  :lang(it-It) .Features__Copy__Text {
    max-width: 250px;
  }
}
.Features__Copy__Text span {
  display: inline-block;
  line-height: 1.2;
}

.Features__Copy__Text__Tm {
  font-size: 0.5em;
  vertical-align: top;
}

.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(0, 0, 0, 0.2));
  transform: translate(-50%, -50%);
  transform-origin: center;
  will-change: transform;
  /* stylelint-disable-next-line no-descending-specificity */
}
@media screen and (min-width: 768.02px), print {
  .Features__Copy__Image {
    width: max(15.5%, 150px);
  }
}
@media screen and (max-width: 768px) {
  .Features__Copy__Image {
    width: 25%;
  }
}
.Features__Copy__Image img {
  width: 100%;
}

.Supplies {
  background-color: #262626;
}
@media screen and (min-width: 768.02px), print {
  .Supplies {
    padding-top: 98px;
    padding-bottom: 120px;
  }
}
@media screen and (max-width: 768px) {
  .Supplies {
    padding-block: 60px;
  }
}

.Supplies__Section {
  display: grid;
}
@media screen and (min-width: 768.02px), print {
  .Supplies__Section {
    grid-template-areas: "title images" "button images";
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr 2.15fr;
    column-gap: 40px;
  }
  .Supplies__Section + .Supplies__Section {
    margin-top: 72px;
  }
}
@media screen and (max-width: 768px) {
  .Supplies__Section {
    grid-template-areas: "title" "images" "button";
  }
  .Supplies__Section + .Supplies__Section {
    margin-top: 60px;
  }
}

.Supplies__Heading {
  grid-area: title;
  font-weight: 700;
  line-height: 1;
  color: #d9ffff;
}
@media screen and (min-width: 768.02px), print {
  .Supplies__Heading {
    font-size: 42px;
  }
}
@media screen and (max-width: 768px) {
  .Supplies__Heading {
    font-size: 36px;
    text-align: center;
  }
}

.Supplies__Lineup {
  position: relative;
  display: inline-block;
  grid-area: button;
  width: max-content;
  height: max-content;
  padding: 17px 65px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #d9ffff;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 2px #d9ffff;
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  transform: scale3d(1, 1, 1);
  will-change: transform;
}
@media (hover: hover) {
  .Supplies__Lineup:where(:any-link, :enabled, summary):hover {
    color: #262626;
    box-shadow: inset 0 0 0 35px #d9ffff;
    transform: scale3d(1.1, 1.1, 1);
  }
}
@media screen and (min-width: 768.02px), print {
  .Supplies__Lineup {
    margin-top: 20px;
  }
}
@media screen and (max-width: 768px) {
  .Supplies__Lineup {
    justify-self: center;
    margin-top: 18px;
  }
}

.Supplies__ImagesWrapper {
  grid-area: images;
}
@media screen and (max-width: 768px) {
  .Supplies__ImagesWrapper {
    margin-top: 24px;
    text-align: center;
  }
}

.Supplies__Images {
  display: grid;
}
@media screen and (min-width: 768.02px), print {
  .Supplies__Images {
    grid-template-columns: 2.19fr 1fr 1fr;
    column-gap: 30px;
    margin-top: 23px;
  }
}
@media screen and (max-width: 768px) {
  .Supplies__Images {
    grid-template-columns: 1fr 1fr;
    row-gap: 12px;
    column-gap: 12px;
    margin-top: 14px;
  }
}
@media screen and (min-width: 768.02px), print {
  .Supplies__Images.Supplies__Images--2col {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 768px) {
  .Supplies__Images.Supplies__Images--2col {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}

.Supplies__Text {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: #d9ffff;
}

.Supplies__Image {
  overflow: hidden;
  border-radius: 24px;
}
@media screen and (max-width: 768px) {
  .Supplies__Image:nth-of-type(1) {
    grid-column: 1/3;
  }
}
.Supplies__Image img {
  width: 100%;
}

@media screen and (min-width: 768.02px), print {
  .Supplies__Buttons {
    display: flex;
    flex-wrap: wrap;
    row-gap: 42px;
    column-gap: 28px;
    justify-content: center;
    margin-top: 80px;
  }
}
@media screen and (max-width: 768px) {
  .Supplies__Buttons {
    display: grid;
    row-gap: 16px;
    margin-top: 60px;
  }
}
@media screen and (min-width: 768.02px), print {
  .Supplies__Buttons li {
    width: max(265px, (100% - 56px) / 3);
  }
}

.Supplies__Button {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  font-weight: 700;
  line-height: 1;
  color: #d9ffff;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 2px #d9ffff;
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  transform: scale3d(1, 1, 1);
  will-change: transform;
}
@media (hover: hover) {
  .Supplies__Button:where(:any-link, :enabled, summary):hover {
    color: #262626;
    box-shadow: inset 0 0 0 60px #d9ffff;
    transform: scale3d(1.1, 1.1, 1);
  }
}
@media screen and (min-width: 768.02px), print {
  .Supplies__Button {
    column-gap: 22px;
    padding: 31px 60px 30px 34px;
    font-size: 20px;
  }
}
@media screen and (max-width: 768px) {
  .Supplies__Button {
    column-gap: 16px;
    padding: 20px 50px 20px 22px;
    font-size: 18px;
  }
}
.Supplies__Button::after {
  position: absolute;
  top: 50%;
  right: 30px;
  width: 22px;
  height: 18px;
  content: "";
  background-color: #d9ffff;
  -webkit-mask-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="%23cdffff"/></svg>');
          mask-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="%23cdffff"/></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: cover;
          mask-size: cover;
  transform: translateY(-50%);
}
@media (hover: hover) {
  .Supplies__Button:where(:any-link, :enabled, summary):hover::after {
    background-color: #262626;
  }
}

.Supplies__ButtonImage {
  width: 48px;
  height: 48px;
  background-color: #d9ffff;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: cover;
          mask-size: cover;
}
.Supplies__ButtonImage.Supplies__ButtonImage--Spec {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_2" data-name="レイヤー 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><g id="icon"><path class="cls-1" d="M40,2.6c20.62,0,37.4,16.78,37.4,37.4s-16.78,37.4-37.4,37.4S2.6,60.62,2.6,40,19.38,2.6,40,2.6M40,0C17.91,0,0,17.91,0,40s17.91,40,40,40,40-17.91,40-40S62.09,0,40,0h0Z"/><g><path class="cls-1" d="M51.16,17.26c2.51,0,4.55,2.04,4.55,4.55v36.78c0,2.51-2.04,4.55-4.55,4.55h-23.04c-2.51,0-4.55-2.04-4.55-4.55V21.81c0-2.51,2.04-4.55,4.55-4.55h23.04M51.16,15.27h-23.04c-3.6,0-6.54,2.94-6.54,6.54v36.78c0,3.6,2.94,6.54,6.54,6.54h23.04c3.6,0,6.54-2.94,6.54-6.54V21.81c0-3.6-2.94-6.54-6.54-6.54h0Z"/><path class="cls-1" d="M47.12,32.55c2.78,0,5.04,2.26,5.04,5.04v6.53c0,2.78-2.26,5.04-5.04,5.04h-6.53c-2.78,0-5.04-2.26-5.04-5.04v-6.53c0-2.78,2.26-5.04,5.04-5.04h6.53M47.12,30.56h-6.53c-3.87,0-7.04,3.17-7.04,7.04v6.53c0,3.87,3.17,7.04,7.04,7.04h6.53c3.87,0,7.04-3.17,7.04-7.04v-6.53c0-3.87-3.17-7.04-7.04-7.04h0Z"/><path class="cls-1" d="M39.53,40.86c0,2.38,1.94,4.32,4.32,4.32s4.32-1.94,4.32-4.32-1.94-4.32-4.32-4.32-4.32,1.94-4.32,4.32"/><path class="cls-1" d="M53.27,57.15c0,2.08-1.69,3.77-3.77,3.77s-3.77-1.69-3.77-3.77c0-2.08,1.69-3.77,3.77-3.77s3.77,1.69,3.77,3.77Z"/><path class="cls-1" d="M28.1,24.35h2.05c.9,0,1.64.73,1.64,1.64v2.04c0,.9-.73,1.64-1.64,1.64h-2.04c-.9,0-1.64-.73-1.64-1.64v-2.05c0-.9.73-1.64,1.64-1.64Z"/></g></g></svg>');
          mask-image: url('data:image/svg+xml;charset=utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_2" data-name="レイヤー 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><g id="icon"><path class="cls-1" d="M40,2.6c20.62,0,37.4,16.78,37.4,37.4s-16.78,37.4-37.4,37.4S2.6,60.62,2.6,40,19.38,2.6,40,2.6M40,0C17.91,0,0,17.91,0,40s17.91,40,40,40,40-17.91,40-40S62.09,0,40,0h0Z"/><g><path class="cls-1" d="M51.16,17.26c2.51,0,4.55,2.04,4.55,4.55v36.78c0,2.51-2.04,4.55-4.55,4.55h-23.04c-2.51,0-4.55-2.04-4.55-4.55V21.81c0-2.51,2.04-4.55,4.55-4.55h23.04M51.16,15.27h-23.04c-3.6,0-6.54,2.94-6.54,6.54v36.78c0,3.6,2.94,6.54,6.54,6.54h23.04c3.6,0,6.54-2.94,6.54-6.54V21.81c0-3.6-2.94-6.54-6.54-6.54h0Z"/><path class="cls-1" d="M47.12,32.55c2.78,0,5.04,2.26,5.04,5.04v6.53c0,2.78-2.26,5.04-5.04,5.04h-6.53c-2.78,0-5.04-2.26-5.04-5.04v-6.53c0-2.78,2.26-5.04,5.04-5.04h6.53M47.12,30.56h-6.53c-3.87,0-7.04,3.17-7.04,7.04v6.53c0,3.87,3.17,7.04,7.04,7.04h6.53c3.87,0,7.04-3.17,7.04-7.04v-6.53c0-3.87-3.17-7.04-7.04-7.04h0Z"/><path class="cls-1" d="M39.53,40.86c0,2.38,1.94,4.32,4.32,4.32s4.32-1.94,4.32-4.32-1.94-4.32-4.32-4.32-4.32,1.94-4.32,4.32"/><path class="cls-1" d="M53.27,57.15c0,2.08-1.69,3.77-3.77,3.77s-3.77-1.69-3.77-3.77c0-2.08,1.69-3.77,3.77-3.77s3.77,1.69,3.77,3.77Z"/><path class="cls-1" d="M28.1,24.35h2.05c.9,0,1.64.73,1.64,1.64v2.04c0,.9-.73,1.64-1.64,1.64h-2.04c-.9,0-1.64-.73-1.64-1.64v-2.05c0-.9.73-1.64,1.64-1.64Z"/></g></g></svg>');
}
.Supplies__ButtonImage.Supplies__ButtonImage--Manuals {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_2" data-name="レイヤー 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><g id="icon"><g><path class="cls-1" d="M40,2.6c20.62,0,37.4,16.78,37.4,37.4s-16.78,37.4-37.4,37.4S2.6,60.62,2.6,40,19.38,2.6,40,2.6M40,0C17.91,0,0,17.91,0,40s17.91,40,40,40,40-17.91,40-40S62.09,0,40,0h0Z"/><path class="cls-1" d="M61.23,26.85c-6.94-1.53-14.27-1.54-21.23-.05-6.95-1.49-14.28-1.47-21.23.05-.6.13-1.02.66-1.02,1.27v25.8c0,.39.18.77.49,1.01.31.25.71.34,1.09.26,6.66-1.47,13.71-1.47,20.37,0,0,0,0,0,0,0,0,0,0,0,.01,0,.03,0,.05,0,.08,0,.07.01.13.02.2.02,0,0,0,0,0,0,0,0,0,0,0,0,.09,0,.18,0,.28-.03,6.67-1.47,13.72-1.47,20.39,0,.09.02.19.03.28.03.29,0,.58-.1.81-.29.31-.25.49-.62.49-1.01v-25.8c0-.61-.42-1.14-1.02-1.27ZM20.35,52.33v-23.16c6.02-1.18,12.32-1.18,18.35,0v23.16c-3.02-.56-6.1-.84-9.17-.84s-6.16.28-9.17.84ZM59.65,52.33c-3.02-.56-6.1-.84-9.17-.84s-6.16.28-9.17.84v-23.16c6.02-1.18,12.32-1.18,18.35,0v23.16Z"/></g></g></svg>');
          mask-image: url('data:image/svg+xml;charset=utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_2" data-name="レイヤー 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><g id="icon"><g><path class="cls-1" d="M40,2.6c20.62,0,37.4,16.78,37.4,37.4s-16.78,37.4-37.4,37.4S2.6,60.62,2.6,40,19.38,2.6,40,2.6M40,0C17.91,0,0,17.91,0,40s17.91,40,40,40,40-17.91,40-40S62.09,0,40,0h0Z"/><path class="cls-1" d="M61.23,26.85c-6.94-1.53-14.27-1.54-21.23-.05-6.95-1.49-14.28-1.47-21.23.05-.6.13-1.02.66-1.02,1.27v25.8c0,.39.18.77.49,1.01.31.25.71.34,1.09.26,6.66-1.47,13.71-1.47,20.37,0,0,0,0,0,0,0,0,0,0,0,.01,0,.03,0,.05,0,.08,0,.07.01.13.02.2.02,0,0,0,0,0,0,0,0,0,0,0,0,.09,0,.18,0,.28-.03,6.67-1.47,13.72-1.47,20.39,0,.09.02.19.03.28.03.29,0,.58-.1.81-.29.31-.25.49-.62.49-1.01v-25.8c0-.61-.42-1.14-1.02-1.27ZM20.35,52.33v-23.16c6.02-1.18,12.32-1.18,18.35,0v23.16c-3.02-.56-6.1-.84-9.17-.84s-6.16.28-9.17.84ZM59.65,52.33c-3.02-.56-6.1-.84-9.17-.84s-6.16.28-9.17.84v-23.16c6.02-1.18,12.32-1.18,18.35,0v23.16Z"/></g></g></svg>');
}
.Supplies__ButtonImage.Supplies__ButtonImage--Howtouse {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_2" data-name="レイヤー 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><g id="icon"><path class="cls-1" d="M40,2.6c20.62,0,37.4,16.78,37.4,37.4s-16.78,37.4-37.4,37.4S2.6,60.62,2.6,40,19.38,2.6,40,2.6M40,0C17.91,0,0,17.91,0,40s17.91,40,40,40,40-17.91,40-40S62.09,0,40,0h0Z"/><path class="cls-1" d="M42.95,61.54c.11,0,.21.1.19.2-.13,1.25-1.48,2.22-3.13,2.22s-3-.98-3.13-2.22c-.01-.11.08-.2.19-.2h5.87Z"/><path class="cls-1" d="M39.28,16.04c-7.87.36-14.32,6.87-14.62,14.74-.2,5.21,2.21,9.87,6.02,12.79,1.36,1.04,2.14,2.66,2.02,4.37l-.05.66c-.04.58.42,1.07,1,1.07h12.7c.58,0,1.04-.49,1-1.07l-.05-.66c-.12-1.71.68-3.34,2.04-4.38,3.65-2.81,6.01-7.21,6.01-12.18,0-8.72-7.27-15.75-16.09-15.34ZM48.14,41.97c-1.82,1.39-2.86,3.5-2.83,5.7h-10.58c.02-2.2-1.01-4.31-2.82-5.69-3.44-2.64-5.4-6.79-5.24-11.12.26-6.87,5.84-12.5,12.71-12.82.21-.01.43-.02.64-.02,7.36,0,13.36,5.99,13.36,13.36,0,4.18-1.91,8.04-5.23,10.59Z"/><rect class="cls-1" x="32.86" y="51.68" width="14.29" height="2.93" rx="1.46" ry="1.46"/><rect class="cls-1" x="32.86" y="56.61" width="14.29" height="2.93" rx="1.46" ry="1.46"/></g></svg>');
          mask-image: url('data:image/svg+xml;charset=utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_2" data-name="レイヤー 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><g id="icon"><path class="cls-1" d="M40,2.6c20.62,0,37.4,16.78,37.4,37.4s-16.78,37.4-37.4,37.4S2.6,60.62,2.6,40,19.38,2.6,40,2.6M40,0C17.91,0,0,17.91,0,40s17.91,40,40,40,40-17.91,40-40S62.09,0,40,0h0Z"/><path class="cls-1" d="M42.95,61.54c.11,0,.21.1.19.2-.13,1.25-1.48,2.22-3.13,2.22s-3-.98-3.13-2.22c-.01-.11.08-.2.19-.2h5.87Z"/><path class="cls-1" d="M39.28,16.04c-7.87.36-14.32,6.87-14.62,14.74-.2,5.21,2.21,9.87,6.02,12.79,1.36,1.04,2.14,2.66,2.02,4.37l-.05.66c-.04.58.42,1.07,1,1.07h12.7c.58,0,1.04-.49,1-1.07l-.05-.66c-.12-1.71.68-3.34,2.04-4.38,3.65-2.81,6.01-7.21,6.01-12.18,0-8.72-7.27-15.75-16.09-15.34ZM48.14,41.97c-1.82,1.39-2.86,3.5-2.83,5.7h-10.58c.02-2.2-1.01-4.31-2.82-5.69-3.44-2.64-5.4-6.79-5.24-11.12.26-6.87,5.84-12.5,12.71-12.82.21-.01.43-.02.64-.02,7.36,0,13.36,5.99,13.36,13.36,0,4.18-1.91,8.04-5.23,10.59Z"/><rect class="cls-1" x="32.86" y="51.68" width="14.29" height="2.93" rx="1.46" ry="1.46"/><rect class="cls-1" x="32.86" y="56.61" width="14.29" height="2.93" rx="1.46" ry="1.46"/></g></svg>');
}
.Supplies__ButtonImage.Supplies__ButtonImage--Firmware {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_2" data-name="レイヤー 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><g id="icon"><path class="cls-2" d="M40,2.6c20.62,0,37.4,16.78,37.4,37.4s-16.78,37.4-37.4,37.4S2.6,60.62,2.6,40,19.38,2.6,40,2.6M40,0C17.91,0,0,17.91,0,40s17.91,40,40,40,40-17.91,40-40S62.09,0,40,0h0Z"/><g><polygon class="cls-1" points="44.58 50.23 44.58 35.47 35.42 35.47 35.42 50.23 30.18 50.23 40 63.51 49.82 50.23 44.58 50.23"/><path class="cls-2" d="M52.58,21.66h-25.17c-2.19,0-3.98,1.65-3.98,3.69v15.96c0,2.03,1.78,3.69,3.98,3.69h3.32v-1.91h-3.32c-1.06,0-1.92-.8-1.92-1.78v-15.96c0-.98.86-1.78,1.92-1.78h25.17c1.06,0,1.92.8,1.92,1.78v15.96c0,.98-.86,1.78-1.92,1.78h-3.32v1.91h3.32c2.19,0,3.98-1.65,3.98-3.69v-15.96c0-2.03-1.78-3.69-3.98-3.69Z"/></g></g></svg>');
          mask-image: url('data:image/svg+xml;charset=utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_2" data-name="レイヤー 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><g id="icon"><path class="cls-2" d="M40,2.6c20.62,0,37.4,16.78,37.4,37.4s-16.78,37.4-37.4,37.4S2.6,60.62,2.6,40,19.38,2.6,40,2.6M40,0C17.91,0,0,17.91,0,40s17.91,40,40,40,40-17.91,40-40S62.09,0,40,0h0Z"/><g><polygon class="cls-1" points="44.58 50.23 44.58 35.47 35.42 35.47 35.42 50.23 30.18 50.23 40 63.51 49.82 50.23 44.58 50.23"/><path class="cls-2" d="M52.58,21.66h-25.17c-2.19,0-3.98,1.65-3.98,3.69v15.96c0,2.03,1.78,3.69,3.98,3.69h3.32v-1.91h-3.32c-1.06,0-1.92-.8-1.92-1.78v-15.96c0-.98.86-1.78,1.92-1.78h25.17c1.06,0,1.92.8,1.92,1.78v15.96c0,.98-.86,1.78-1.92,1.78h-3.32v1.91h3.32c2.19,0,3.98-1.65,3.98-3.69v-15.96c0-2.03-1.78-3.69-3.98-3.69Z"/></g></g></svg>');
}
.Supplies__ButtonImage.Supplies__ButtonImage--Faq {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_2" data-name="レイヤー 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><g id="icon"><path class="cls-1" d="M40,2.6c20.62,0,37.4,16.78,37.4,37.4s-16.78,37.4-37.4,37.4S2.6,60.62,2.6,40,19.38,2.6,40,2.6M40,0C17.91,0,0,17.91,0,40s17.91,40,40,40,40-17.91,40-40S62.09,0,40,0h0Z"/><path class="cls-1" d="M37.67,47.8v-2.94c0-.87.06-1.59.19-2.17s.32-1.1.58-1.56c.26-.46.61-.91,1.04-1.35.44-.43.98-.95,1.63-1.56.52-.48,1.04-.97,1.55-1.47.52-.5.99-1.01,1.41-1.54.42-.53.77-1.09,1.04-1.68.27-.59.41-1.26.41-2s-.14-1.42-.41-2.05c-.28-.63-.64-1.16-1.09-1.61-.45-.45-1-.8-1.63-1.06-.63-.26-1.3-.38-2.02-.38-1.59,0-2.87.5-3.86,1.49-.99.99-1.58,2.29-1.77,3.9l-4.95-.48c.42-2.79,1.59-4.98,3.52-6.57,1.93-1.59,4.31-2.38,7.16-2.38,1.36,0,2.63.2,3.81.6,1.18.4,2.21.98,3.08,1.73.87.75,1.56,1.68,2.06,2.79.5,1.11.75,2.37.75,3.78,0,1.22-.18,2.29-.53,3.2-.36.91-.86,1.77-1.51,2.58l-2.91,2.98-.49.43c-.52.48-.93.89-1.24,1.23-.31.34-.55.69-.73,1.06-.18.37-.3.78-.36,1.23-.07.45-.1,1.01-.1,1.69v2.12h-4.66ZM36.75,54.44c0-.87.32-1.61.95-2.24.63-.63,1.38-.94,2.26-.94s1.63.31,2.26.94c.63.63.95,1.37.95,2.24s-.32,1.61-.95,2.24c-.63.63-1.38.94-2.26.94s-1.63-.31-2.26-.94c-.63-.63-.95-1.37-.95-2.24Z"/></g></svg>');
          mask-image: url('data:image/svg+xml;charset=utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_2" data-name="レイヤー 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><g id="icon"><path class="cls-1" d="M40,2.6c20.62,0,37.4,16.78,37.4,37.4s-16.78,37.4-37.4,37.4S2.6,60.62,2.6,40,19.38,2.6,40,2.6M40,0C17.91,0,0,17.91,0,40s17.91,40,40,40,40-17.91,40-40S62.09,0,40,0h0Z"/><path class="cls-1" d="M37.67,47.8v-2.94c0-.87.06-1.59.19-2.17s.32-1.1.58-1.56c.26-.46.61-.91,1.04-1.35.44-.43.98-.95,1.63-1.56.52-.48,1.04-.97,1.55-1.47.52-.5.99-1.01,1.41-1.54.42-.53.77-1.09,1.04-1.68.27-.59.41-1.26.41-2s-.14-1.42-.41-2.05c-.28-.63-.64-1.16-1.09-1.61-.45-.45-1-.8-1.63-1.06-.63-.26-1.3-.38-2.02-.38-1.59,0-2.87.5-3.86,1.49-.99.99-1.58,2.29-1.77,3.9l-4.95-.48c.42-2.79,1.59-4.98,3.52-6.57,1.93-1.59,4.31-2.38,7.16-2.38,1.36,0,2.63.2,3.81.6,1.18.4,2.21.98,3.08,1.73.87.75,1.56,1.68,2.06,2.79.5,1.11.75,2.37.75,3.78,0,1.22-.18,2.29-.53,3.2-.36.91-.86,1.77-1.51,2.58l-2.91,2.98-.49.43c-.52.48-.93.89-1.24,1.23-.31.34-.55.69-.73,1.06-.18.37-.3.78-.36,1.23-.07.45-.1,1.01-.1,1.69v2.12h-4.66ZM36.75,54.44c0-.87.32-1.61.95-2.24.63-.63,1.38-.94,2.26-.94s1.63.31,2.26.94c.63.63.95,1.37.95,2.24s-.32,1.61-.95,2.24c-.63.63-1.38.94-2.26.94s-1.63-.31-2.26-.94c-.63-.63-.95-1.37-.95-2.24Z"/></g></svg>');
}
@media (hover: hover) {
  :where(:any-link, :enabled, summary):hover .Supplies__ButtonImage {
    background-color: #262626;
  }
}

.InstaxApp {
  background-color: #d9ffff;
}

@media screen and (min-width: 768.02px), print {
  .InstaxApp__Inner {
    padding-top: 80px;
  }
}
@media screen and (max-width: 768px) {
  .InstaxApp__Inner {
    padding-top: 40px;
  }
}

.InstaxApp__Main {
  display: grid;
  justify-content: center;
}
@media screen and (min-width: 768.02px), print {
  .InstaxApp__Main {
    row-gap: 28px;
  }
}
@media screen and (max-width: 768px) {
  .InstaxApp__Main {
    row-gap: 24px;
  }
}

.InstaxApp__Image {
  justify-self: center;
}
@media screen and (min-width: 768.02px), print {
  .InstaxApp__Image {
    width: 170px;
  }
}
@media screen and (max-width: 768px) {
  .InstaxApp__Image {
    width: 100px;
  }
}

.InstaxApp__Title {
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 768.02px), print {
  .InstaxApp__Title {
    font-size: 24px;
  }
}
@media screen and (max-width: 768px) {
  .InstaxApp__Title {
    font-size: 20px;
  }
}

.InstaxApp__Link {
  display: flex;
  max-width: 410px;
}
.InstaxApp__Link a {
  display: block;
}
.InstaxApp__Link a:nth-of-type(2) {
  margin-left: 20px;
}
@media screen and (max-width: 768px) {
  .InstaxApp__Link img {
    height: 52px;
  }
  }
.InstaxApp__Annotations {
  display: grid;
  font-size: 11px;
  line-height: 1.63;
}
.InstaxApp__Annotations a {
  text-decoration: underline;
    transition: opacity 0.2s;
}
.InstaxApp__Annotations a:hover {
  opacity: 0.7;
}
@media screen and (min-width: 768.02px), print {
  .InstaxApp__Annotations {
    margin-top: 58px;
  }
}
@media screen and (max-width: 768px) {
  .InstaxApp__Annotations {
    margin-top: 46px;
  }
}
.InstaxApp__Annotations li {
  display: flex;
}
:lang(ja) .InstaxApp__Annotations li::before {
  content: "※";
}
:not(:lang(ja)) .InstaxApp__Annotations li::before {
  content: "*";
}

.InstaxApp__Product {
  border-top: 1px solid #999999;
}
@media screen and (min-width: 768.02px), print {
  .InstaxApp__Product {
    margin-top: 78px;
  }
}
@media screen and (max-width: 768px) {
  .InstaxApp__Product {
    margin-top: 34px;
  }
}

@media screen and (min-width: 768.02px), print {
  .InstaxApp__Product__Inner {
    display: flex;
    justify-content: center;
    padding-block: 100px;
  }
}
@media screen and (max-width: 768px) {
  .InstaxApp__Product__Inner {
    display: grid;
    padding-block: 60px;
  }
}

@media screen and (min-width: 768.02px), print {
  .InstaxApp__Product__Texts {
    padding-top: 18px;
    padding-right: 62px;
    border-right: 1px solid #999999;
  }
}

.InstaxApp__Product__TextsText {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
@media screen and (min-width: 768.02px), print {
  .InstaxApp__Product__TextsText {
    margin-top: 8px;
  }
}
@media screen and (max-width: 768px) {
  .InstaxApp__Product__TextsText {
    margin-top: 10px;
  }
}

.InstaxApp__Product__TextsHead {
  display: inline-block;
  padding: 5px 30px;
  font-size: 14px;
  line-height: 1;
  color: #d9ffff;
  background-color: #262626;
}

.InstaxApp__Product__Logo {
  width: 210px;
}
@media screen and (min-width: 768.02px), print {
  .InstaxApp__Product__Logo {
    margin-top: 8px;
  }
}
@media screen and (max-width: 768px) {
  .InstaxApp__Product__Logo {
    margin-top: 6px;
  }
}

.InstaxApp__Product__FrameTitle {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
@media screen and (min-width: 768.02px), print {
  .InstaxApp__Product__FrameTitle {
    margin-top: 20px;
  }
}

.InstaxApp__Product__FrameText {
  font-size: 12px;
  line-height: 1.5;
}
@media screen and (min-width: 768.02px), print {
  .InstaxApp__Product__FrameText {
    margin-top: 16px;
  }
}
@media screen and (max-width: 768px) {
  .InstaxApp__Product__FrameText {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}

@media screen and (min-width: 768.02px), print {
  .InstaxApp__Product__Images {
    display: flex;
    align-items: center;
    padding-left: 62px;
  }
}
@media screen and (max-width: 768px) {
  .InstaxApp__Product__Images {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    column-gap: 20px;
    margin-top: 24px;
  }
}

.InstaxApp__Product__Image {
  max-width: 248px;
}

.InstaxApp__Product__ImagesSize {
  font-size: 12px;
  line-height: 1.5;
}
@media screen and (min-width: 768.02px), print {
  .InstaxApp__Product__ImagesSize {
    margin-left: 40px;
  }
}
@media screen and (max-width: 768px) {
  .InstaxApp__Product__ImagesSize {
    align-self: center;
  }
}

.InstaxApp__Product__Lineup {
  position: relative;
  display: inline-block;
  padding: 17px 65px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #262626;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 2px #262626;
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  transform: scale3d(1, 1, 1);
  will-change: transform;
}
@media (hover: hover) {
  .InstaxApp__Product__Lineup:where(:any-link, :enabled, summary):hover {
    color: #d9ffff;
    box-shadow: inset 0 0 0 35px #262626;
    transform: scale3d(1.1, 1.1, 1);
  }
}
@media screen and (min-width: 768.02px), print {
  .InstaxApp__Product__Lineup {
    margin-top: 22px;
  }
}
@media screen and (max-width: 768px) {
  .InstaxApp__Product__Lineup {
    justify-self: center;
    margin-top: 32px;
  }
}

@media screen and (min-width: 768.02px), print {
  .InformationDetail {
    padding-top: 90px;
    padding-bottom: 100px;
  }
}
@media screen and (max-width: 768px) {
  .InformationDetail {
    padding-top: 60px;
    padding-bottom: 80px;
  }
}

.InformationDetail__Inner h1 {
  padding-bottom: 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: #262626;
  text-align: left;
  border-bottom: 1px solid #262626;
}
.InformationDetail__Inner p {
  margin-top: 28px;
  font-size: 16px;
  line-height: 1.875;
}
.InformationDetail__Inner img {
  display: block;
  margin-inline: auto;
  margin-top: 28px;
}
.InformationDetail__Inner ul {
  display: grid;
  row-gap: 20px;
  column-gap: 20px;
  margin-top: 28px;
}
@media screen and (min-width: 768.02px), print {
  .InformationDetail__Inner ul {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .InformationDetail__Inner ul {
    grid-template-columns: repeat(2, 1fr);
  }
}
.InformationDetail__Inner ul img {
  margin-top: 0;
}
.InformationDetail__Inner a {
  display: inline-block;
  text-decoration: underline;
  transition: opacity 0.3s;
}
@media (hover: hover) {
  .InformationDetail__Inner a:where(:any-link, :enabled, summary):hover {
    opacity: 0.5;
  }
}

.tw-sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

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

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