@charset "UTF-8";
*, :before, :after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / .5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style:
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / .5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style:
}
*, :before, :after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor
}
:before, :after {
  --tw-content: ""
}
html, :host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent
}
body {
  margin: 0;
  line-height: inherit
}
hr {
  height: 0;
  color: inherit;
  border-top-width: 1px
}
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit
}
a {
  color: inherit;
  text-decoration: inherit
}
b, strong {
  font-weight: bolder
}
code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em
}
small {
  font-size: 80%
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}
sub {
  bottom: -.25em
}
sup {
  top: -.5em
}
table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse
}
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0
}
button, select {
  text-transform: none
}
button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none
}
:-moz-focusring {
  outline: auto
}
:-moz-ui-invalid {
  box-shadow: none
}
progress {
  vertical-align: baseline
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
  height: auto
}
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}
::-webkit-search-decoration {
  -webkit-appearance: none
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}
summary {
  display: list-item
}
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
  margin: 0
}
fieldset {
  margin: 0;
  padding: 0
}
legend {
  padding: 0
}
ol, ul, menu {
  list-style: none;
  margin: 0;
  padding: 0
}
dialog {
  padding: 0
}
textarea {
  resize: vertical
}
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  color: #9ca3af
}
input::placeholder, textarea::placeholder {
  opacity: 1;
  color: #9ca3af
}
button, [role=button] {
  cursor: pointer
}
:disabled {
  cursor: default
}
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle
}
img, video {
  max-width: 100%;
  height: auto
}
[hidden]:where(:not([hidden=until-found])) {
  display: none
}
.\!container {
  width: 100%!important
}
.container {
  width: 100%
}
@media (min-width: 640px) {
  .\!container {
    max-width: 640px!important
  }
  .container {
    max-width: 640px
  }
}
@media (min-width: 769px) {
  .\!container {
    max-width: 769px!important
  }
  .container {
    max-width: 769px
  }
}
@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px!important
  }
  .container {
    max-width: 1024px
  }
}
@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px!important
  }
  .container {
    max-width: 1280px
  }
}
@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px!important
  }
  .container {
    max-width: 1536px
  }
}
.visible {
  visibility: visible
}
.fixed {
  position: fixed
}
.absolute {
  position: absolute
}
.relative {
  position: relative
}
.bottom-\[80px\] {
  bottom: 80px
}
.left-0 {
  left: 0
}
.right-\[20px\] {
  right: 20px
}
.right-\[45\%\] {
  right: 45%
}
.top-0 {
  top: 0
}
.z-20 {
  z-index: 20
}
.m-auto {
  margin: auto
}
.mx-auto {
  margin-left: auto;
  margin-right: auto
}
.mb-0 {
  margin-bottom: 0
}
.mt-0 {
  margin-top: 0
}
.mt-px12rem {
  margin-top: .75rem
}
.mt-px16rem {
  margin-top: 1rem
}
.mt-px20rem {
  margin-top: 1.25rem
}
.mt-px24rem {
  margin-top: 1.5rem
}
.mt-px32rem {
  margin-top: 2rem
}
.mt-px4rem {
  margin-top: .25rem
}
.mt-px8rem {
  margin-top: .5rem
}
.mt-px9rem {
  margin-top: .5625rem
}
.block {
  display: block
}
.inline-block {
  display: inline-block
}
.inline {
  display: inline
}
.flex {
  display: flex
}
.hidden {
  display: none
}
.h-full {
  height: 100%
}
.h-px10rem {
  height: .625rem
}
.h-px12rem {
  height: .75rem
}
.h-px139rem {
  height: 8.6875rem
}
.h-px147rem {
  height: 9.1875rem
}
.h-px15rem {
  height: .9375rem
}
.h-px20rem {
  height: 1.25rem
}
.h-px24rem {
  height: 1.5rem
}
.h-px37rem {
  height: 2.3125rem
}
.h-px55rem {
  height: 3.4375rem
}
.h-px58rem {
  height: 3.625rem
}
.h-px60rem {
  height: 3.75rem
}
.h-px8rem {
  height: .5rem
}
.max-h-px147rem {
  max-height: 9.1875rem
}
.min-h-px781rem {
  min-height: 48.8125rem
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content
}
.w-full {
  width: 100%
}
.w-px104rem {
  width: 6.5rem
}
.w-px106rem {
  width: 6.625rem
}
.w-px10rem {
  width: .625rem
}
.w-px120rem {
  width: 7.5rem
}
.w-px12rem {
  width: .75rem
}
.w-px139rem {
  width: 8.6875rem
}
.w-px140rem {
  width: 8.75rem
}
.w-px14rem {
  width: .875rem
}
.w-px171rem {
  width: 10.6875rem
}
.w-px20rem {
  width: 1.25rem
}
.w-px24rem {
  width: 1.5rem
}
.w-px295rem {
  width: 18.4375rem
}
.w-px60rem {
  width: 3.75rem
}
.w-px8rem {
  width: .5rem
}
.max-w-full {
  max-width: 100%
}
.max-w-px200rem {
  max-width: 12.5rem
}
.max-w-px205rem {
  max-width: 12.8125rem
}
.basis-\[60px\] {
  flex-basis: 60px
}
.basis-\[calc\(100\%-76px\)\] {
  flex-basis: calc(100% - 76px)
}
.rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.resize {
  resize: both
}
.flex-wrap {
  flex-wrap: wrap
}
.items-center {
  align-items: center
}
.justify-between {
  justify-content: space-between
}
.gap-\[16px\] {
  gap: 16px
}
.overflow-hidden {
  overflow: hidden
}
.border {
  border-width: 1px
}
.border-solid {
  border-style: solid
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1))
}
.bg-beige {
  --tw-bg-opacity: 1;
  background-color: rgb(245 234 230 / var(--tw-bg-opacity, 1))
}
.bg-gray-border {
  --tw-bg-opacity: 1;
  background-color: rgb(233 233 233 / var(--tw-bg-opacity, 1))
}
.bg-white\/50 {
  background-color: #ffffff80
}
.fill-black {
  fill: #000
}
.\!p-0 {
  padding: 0!important
}
.px-px20rem {
  padding-left: 1.25rem;
  padding-right: 1.25rem
}
.px-px24rem {
  padding-left: 1.5rem;
  padding-right: 1.5rem
}
.pb-px200rem {
  padding-bottom: 12.5rem
}
.pr-px20rem {
  padding-right: 1.25rem
}
.pt-px100rem {
  padding-top: 6.25rem
}
.pt-px24rem {
  padding-top: 1.5rem
}
.pt-px40rem {
  padding-top: 2.5rem
}
.text-left {
  text-align: left
}
.text-center {
  text-align: center
}
.font-GothicEn {
  font-family: gotham, sans-serif
}
.\!text-px11rem {
  font-size: .6875rem!important
}
.\!text-px12rem {
  font-size: .75rem!important
}
.\!text-px14rem {
  font-size: .875rem!important
}
.\!text-px16rem {
  font-size: 1rem!important
}
.text-px11rem {
  font-size: .6875rem
}
.text-px12rem {
  font-size: .75rem
}
.text-px13rem {
  font-size: .8125rem
}
.text-px14rem {
  font-size: .875rem
}
.text-px15rem {
  font-size: .9375rem
}
.text-px21rem {
  font-size: 1.3125rem
}
.text-px30rem {
  font-size: 1.875rem
}
.\!font-bold {
  font-weight: 700!important
}
.\!font-semibold {
  font-weight: 600!important
}
.font-bold {
  font-weight: 700
}
.font-light {
  font-weight: 300
}
.font-normal {
  font-weight: 400
}
.uppercase {
  text-transform: uppercase
}
.leading-\[1\.2\] {
  line-height: 1.2
}
.leading-\[1\.6\] {
  line-height: 1.6
}
.leading-\[1\.75\] {
  line-height: 1.75
}
.leading-\[55px\] {
  line-height: 55px
}
.leading-\[60px\] {
  line-height: 60px
}
.leading-px37rem {
  line-height: 2.3125rem
}
.leading-px58rem {
  line-height: 3.625rem
}
.\!tracking-\[\.42px\] {
  letter-spacing: .42px!important
}
.tracking-\[\.33px\] {
  letter-spacing: .33px
}
.tracking-\[\.36px\] {
  letter-spacing: .36px
}
.tracking-\[\.39px\] {
  letter-spacing: .39px
}
.tracking-\[\.42px\] {
  letter-spacing: .42px
}
.tracking-\[\.45px\] {
  letter-spacing: .45px
}
.tracking-\[\.48px\] {
  letter-spacing: .48px
}
.tracking-\[\.63px\] {
  letter-spacing: .63px
}
.tracking-\[\.9px\] {
  letter-spacing: .9px
}
.\!text-brown {
  --tw-text-opacity: 1 !important;
  color: rgb(179 151 140 / var(--tw-text-opacity, 1))!important
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.text-brown {
  --tw-text-opacity: 1;
  color: rgb(179 151 140 / var(--tw-text-opacity, 1))
}
.text-navy {
  --tw-text-opacity: 1;
  color: rgb(57 80 119 / var(--tw-text-opacity, 1))
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s
}
.ease-in-out {
  transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
@media not all and (min-width: 769px) {
  .max-md\:bottom-\[20px\] {
    bottom: 20px
  }
  .max-md\:hidden {
    display: none
  }
}
@media (min-width: 769px) {
  .md\:hidden {
    display: none
  }
  .md\:h-px37rem {
    height: 2.3125rem
  }
  .md\:w-px140rem {
    width: 8.75rem
  }
  .md\:leading-\[37px\] {
    line-height: 37px
  }
}
.\[\&\>a\]\:mr-px10rem>a {
  margin-right: .625rem
}
.\[\&\>a\]\:min-w-px30rem>a {
  min-width: 1.875rem
}
.pc__container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%
}
@media not all and (min-width: 640px) {
  .pc__container {
    display: none
  }
}
.pc__container.is-loading {
  pointer-events: none
}
.pc__wrap {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  width: 100%
}
.pc__left, .pc__right {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  height: 100%;
  width: calc(50% - 187px)
}
@media not all and (min-width: 769px) {
  .pc__left, .pc__right {
    display: none
  }
}
.pc__left, .pc__right {
  place-content: center stretch
}
.pc__left {
  left: 0
}
.pc__left-logo {
  margin: auto;
  max-height: 5.3125rem;
  max-width: 13.5rem;
  filter: drop-shadow(0px 0px 40px rgba(181, 186, 234, .6))
}
.pc__right {
  right: 0;
  padding: 3.125rem 2.5rem;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr
}
.pc__right-bg {
  margin-left: auto;
  margin-right: auto;
  height: 28.4375rem;
  max-width: 16.3125rem;
  border-radius: 200px;
  background: linear-gradient(180deg, #bcc6df80, #efeefc80 50%, #f1ebf180, #d8deea80);
  grid-row: 2/5
}
.pc__right-inner {
  padding: 4.5rem 3.75rem
}
.pc__right-nav.menu-list .nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px
}
.pc__right-nav.menu-list .nav-list .nav-item a {
  position: relative;
  margin-left: -.875rem;
  display: block;
  height: 1.6875rem;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: .54px;
  --tw-text-opacity: 1;
  color: rgb(57 80 119 / var(--tw-text-opacity, 1));
  opacity: .5;
  transition: all .3s ease
}
.pc__right-nav.menu-list .nav-list .nav-item a .nav-item__name {
  display: flex;
  align-items: center
}
.pc__right-nav.menu-list .nav-list .nav-item a .nav-item__icon {
  margin-right: .5rem;
  height: .875rem;
  width: .875rem;
  opacity: 0;
  transition: opacity .3s ease
}
.pc__right-nav.menu-list .nav-list.concept .nav-item.concept a {
  margin-left: 0;
  opacity: 1;
  transform: scale(1.1) translate(.8em)
}
.pc__right-nav.menu-list .nav-list.concept .nav-item.concept a .nav-item__icon {
  opacity: 1
}
.pc__right-nav.menu-list .nav-list.feature .nav-item.feature a {
  margin-left: 0;
  opacity: 1;
  transform: scale(1.1) translate(.8em)
}
.pc__right-nav.menu-list .nav-list.feature .nav-item.feature a .nav-item__icon {
  opacity: 1
}
.pc__right-nav.menu-list .nav-list.product .nav-item.product a {
  margin-left: 0;
  opacity: 1;
  transform: scale(1.1) translate(.8em)
}
.pc__right-nav.menu-list .nav-list.product .nav-item.product a .nav-item__icon {
  opacity: 1
}
.pc__right-nav.menu-list .nav-list.news .nav-item.news a {
  margin-left: 0;
  opacity: 1;
  transform: scale(1.1) translate(.8em)
}
.pc__right-nav.menu-list .nav-list.news .nav-item.news a .nav-item__icon {
  opacity: 1
}
.pc__right-nav.menu-list .nav-list.faq .nav-item.faq a {
  margin-left: 0;
  opacity: 1;
  transform: scale(1.1) translate(.8em)
}
.pc__right-nav.menu-list .nav-list.faq .nav-item.faq a .nav-item__icon {
  opacity: 1
}
.pc__right-foot {
  grid-row: 5/5;
  align-self: end
}
.pc__right-insta {
  justify-content: flex-end;
  padding-top: 0;
  padding-bottom: 1rem;
  font-family: gotham, sans-serif;
  font-size: .9375rem;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.5;
  letter-spacing: .45px;
  --tw-text-opacity: 1;
  color: rgb(57 80 119 / var(--tw-text-opacity, 1))
}
.pc__right-external {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 24px
}
.pc__right-external>li {
  text-align: left
}
.pc__right-external>li>a {
  padding-top: .25rem;
  padding-bottom: .25rem;
  font-family: gotham, sans-serif;
  font-size: .6875rem;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.5;
  letter-spacing: .33px;
  --tw-text-opacity: 1;
  color: rgb(57 80 119 / var(--tw-text-opacity, 1))
}
.pc__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  height: 100%;
  width: 100%;
  background-image: url(../../assets/img/top/bg.jpg);
  background-size: cover;
  background-position: center
}
@media (any-hover: hover) {
  .pc__right-nav.menu-list .nav-list .nav-item a:hover {
    margin-left: 0;
    opacity: 1;
    transform: scale(1.1) translate(.8em)
  }
  .pc__right-nav.menu-list .nav-list .nav-item a:hover:before {
    background-image: url(/assets/img/common/icon-bubble.svg);
    opacity: 1
  }
  .pc__right-nav.menu-list .nav-list .nav-item a:hover .nav-item__icon {
    opacity: 1
  }
}
.page-404 .content {
  position: relative;
  margin-top: 3.125rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 3.125rem
}
.page-404 .content .title span {
  display: inline-block;
  text-align: center;
  font-family: noto-sans-cjk-jp, ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS PGothic, sans-serif;
  font-size: 2.5rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
@media (min-width: 769px) {
  .page-404 .content .title span {
    font-size: 3.125rem
  }
}
.page-404 .content .title span {
  font-weight: 275;
  line-height: normal;
  letter-spacing: -4px
}
@media (min-width: 769px) {
  .page-404 .content .title span {
    letter-spacing: -5px
  }
}
.video {
  position: relative;
  width: 100%;
  overflow: hidden
}
.video-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100vh;
  width: 100vw;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.video-wrapper iframe {
  height: 100%;
  width: 100%;
  border-style: none
}
.video__inner {
  position: absolute;
  left: 50%;
  top: 50%;
  --tw-translate-x: -50%;
  --tw-translate-y: -66.666667%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.video__inner .video__logo {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
  margin-top: 0;
  display: block;
  height: 10.3125rem;
  width: 14.375rem
}
@media not all and (min-width: 769px) {
  .video__inner .video__logo {
    display: none
  }
}
.video__inner .btn_overlay_video {
  margin: 0 auto;
  display: block;
  cursor: pointer
}
.overlay_video {
  visibility: hidden;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-color: #fffc;
  opacity: 0
}
@media not all and (min-width: 769px) {
  .overlay_video {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem
  }
}
.overlay_video {
  transition: opacity .2s ease 0s, visibility 0s ease .2s
}
.overlay_video__inner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3.75rem;
  width: 100%;
  max-width: calc(100% - 64px)
}
@media (min-width: 769px) {
  .overlay_video__inner {
    margin-top: 0;
    margin-bottom: 0;
    max-width: 61.5625rem
  }
}
.overlay_video__inner .iframe-wrapper {
  position: relative;
  height: auto;
  overflow: hidden;
  aspect-ratio: 9/16
}
@media (min-width: 769px) {
  .overlay_video__inner .iframe-wrapper {
    aspect-ratio: 16/9
  }
}
.overlay_video__inner .iframe-wrapper iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1))
}
.overlay_video__close-btn {
  position: absolute;
  right: 0;
  top: -56px;
  height: 3.25rem;
  width: 2.25rem;
  cursor: pointer
}
@media (min-width: 769px) {
  .overlay_video__close-btn {
    top: -60px
  }
}
.overlay_video__close-btn span {
  position: absolute;
  left: 0;
  top: 25%;
  display: block;
  height: .125rem;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}
.overlay_video__close-btn span:nth-of-type(1) {
  transform: rotate(45deg)
}
.overlay_video__close-btn span:nth-of-type(2) {
  transform: rotate(-45deg)
}
.overlay_video__close-btn p {
  position: absolute;
  bottom: 0;
  text-align: center;
  font-size: .625rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .3px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.overlay_video.open {
  visibility: visible;
  opacity: 1;
  transition: opacity .2s ease 0s, visibility 0s ease 0s
}
.overlay_video.open .overlay_video__close-btn span {
  --tw-bg-opacity: 1;
  background-color: rgb(57 80 119 / var(--tw-bg-opacity, 1))
}
.overlay_video.open .overlay_video__close-btn p {
  --tw-text-opacity: 1;
  color: rgb(57 80 119 / var(--tw-text-opacity, 1))
}
.sns {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  max-width: 17.5rem;
  align-items: center;
  gap: 24px
}
@media (min-width: 769px) {
  .sns {
    max-width: 19.5625rem;
    gap: 32px
  }
}
.sns__title {
  white-space: nowrap;
  text-align: center;
  font-family: gotham, noto-sans-cjk-jp, ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS PGothic, sans-serif;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
@media (min-width: 769px) {
  .sns__title {
    font-size: .8125rem
  }
}
.sns__title {
  letter-spacing: 2.4px
}
@media (min-width: 769px) {
  .sns__title {
    letter-spacing: 2.6px
  }
}
.sns__list {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 24px
}
@media (min-width: 769px) {
  .sns__list {
    gap: 32px
  }
}
.sns__list>a {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.btn {
  overflow: hidden;
  text-align: center
}
.btn path {
  height: 100%;
  width: 100%
}
.btn {
  margin-inline: auto
}
.btn a {
  height: 100%;
  width: 100%
}
.btn a.is-icon {
  display: flex;
  align-items: center;
  gap: 6px
}
.btn a .external-link {
  height: 1.25rem;
  width: 1.25rem
}
.btn a .download-link {
  height: 1.5rem;
  width: 1.5rem
}
.round-transparence {
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
  border-color: inherit;
  padding-left: 1.5625rem;
  padding-right: 1.5625rem
}
@media (min-width: 769px) {
  .round-transparence {
    padding-left: 1.875rem;
    padding-right: 1.875rem
  }
}
.round-transparence>a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit
}
.round-transparence svg {
  fill: inherit
}
.square-black {
  border-radius: .375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem
}
.square-black>a {
  display: flex;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.square-black svg {
  fill: #fff
}
.round-white {
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1.5625rem;
  padding-right: 1.5625rem
}
@media (min-width: 769px) {
  .round-white {
    padding-left: 1.875rem;
    padding-right: 1.875rem
  }
}
.round-white>a {
  display: flex;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.round-white svg {
  fill: #000
}
.round-black {
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
  padding-left: 1.5625rem;
  padding-right: 1.5625rem
}
@media (min-width: 769px) {
  .round-black {
    padding-left: 1.875rem;
    padding-right: 1.875rem
  }
}
.round-black>a {
  display: flex;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.round-black svg {
  fill: #fff
}
.btn-gradient {
  position: relative;
  overflow: hidden;
  border-radius: 9999px
}
.btn-gradient a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 9999px;
  border-width: 2px;
  border-color: transparent;
  font-family: noto-sans-cjk-jp, ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS PGothic, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  background: linear-gradient(90deg, #8eb4eb 28.85%, #e7d5e8);
  transition: color .5s ease-in-out, border .5s ease-in-out, background .5s ease-in-out
}
.btn-gradient a.is-icon {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between
}
@media (any-hover: hover) {
  .btn-gradient a:hover {
    border-width: 2px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(57 80 119 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(57 80 119 / var(--tw-text-opacity, 1));
    background: transparent
  }
  .btn-gradient a:hover.is-icon {
    fill: #395077;
    --tw-text-opacity: 1;
    color: rgb(57 80 119 / var(--tw-text-opacity, 1))
  }
}
.fade-in {
  opacity: 0
}
.fade-in.is-animated {
  animation-name: fade-in;
  animation-duration: .8s;
  animation-fill-mode: both
}
@keyframes fade-in {
  0% {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
.fade-in-up {
  opacity: 0;
  transform: translateY(30px)
}
.fade-in-up.is-animated {
  animation-name: fade-in-up;
  animation-duration: .8s;
  animation-fill-mode: both
}
@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(30px)
  }
  to {
    opacity: 1;
    transform: translate(0)
  }
}
.fade-in-left {
  opacity: 0;
  transform: translate(-30px)
}
.fade-in-left.is-animated {
  animation-name: fade-in-left;
  animation-duration: .8s;
  animation-fill-mode: both
}
@keyframes fade-in-left {
  0% {
    opacity: 0;
    transform: translate(30px)
  }
  to {
    opacity: 1;
    transform: translate(0)
  }
}
.fade-in-right {
  opacity: 0;
  transform: translate(30px)
}
.fade-in-right.is-animated {
  animation-name: fade-in-right;
  animation-duration: .8s;
  animation-fill-mode: both
}
@keyframes fade-in-right {
  0% {
    opacity: 0;
    transform: translate(30px)
  }
  to {
    opacity: 1;
    transform: translate(0)
  }
}
@keyframes floatAnime {
  0%, to {
    transform: translateY(max(3.33%, 13.33px))
  }
  50% {
    transform: translateY(min(-3.33%, -13.33px))
  }
}
.anim-slide-in>* {
  position: relative;
  display: inline-block
}
.anim-slide-in>*>* {
  display: inline-block;
  opacity: 0;
  position: relative;
  z-index: 1
}
.anim-slide-in>*:after {
  position: absolute;
  display: block;
  content: "";
  width: 0%;
  height: calc(100% - 1px);
  top: 0;
  left: 0
}
.anim-slide-in.is-animated>*>* {
  transition-property: opacity;
  transition-duration: .8s;
  transition-delay: .9s;
  opacity: 1
}
.anim-slide-in.is-animated>*:after {
  animation-name: display_effect;
  animation-delay: .5s;
  animation-duration: .8s;
  animation-timing-function: cubic-bezier(.2, 0, 0, 1)
}
@keyframes display_effect {
  0% {
    width: 0%;
    left: 0;
    right: auto
  }
  50% {
    width: 100%;
    left: 0;
    right: auto
  }
  to {
    width: 100%;
    left: 0;
    right: auto
  }
}
.scall-line {
  position: relative
}
.scall-line:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  width: 0px;
  border-top-width: 1px;
  border-style: solid;
  border-color: inherit;
  opacity: .7;
  --tw-content: "";
  content: var(--tw-content);
  transform: translate3d(-50%, 0, 0)
}
.scall-line.is-animated:after {
  width: 100%;
  transition: width 1.2s ease;
  animation-delay: 1s
}
.slide-in-up {
  opacity: 0;
  transform: translateY(4rem)
}
.slide-in-up.is-animated {
  opacity: 1;
  transform: translateY(0)
}
@keyframes radio-select {
  0% {
    transform: scale(0)
  }
  65% {
    transform: scale(1.1)
  }
  to {
    transform: scale(1)
  }
}
.radio-box {
  display: flex;
  justify-content: center;
  gap: 26px
}
.radio__label {
  position: relative;
  display: block;
  cursor: pointer;
  text-align: center;
  font-family: gotham, sans-serif;
  font-size: .75rem;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.5;
  letter-spacing: .36px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  padding-left: 20px
}
.radio__label.gray .radio__outside {
  --tw-border-opacity: 1;
  border-color: rgb(209 211 215 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(209 211 215 / var(--tw-bg-opacity, 1))
}
.radio__label.ivory .radio__outside {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(246 243 236 / var(--tw-bg-opacity, 1))
}
.radio__input {
  height: 1px;
  width: 1px;
  opacity: 0
}
.radio__input:checked+.radio__outside .radio__inside {
  animation: radio-select .1s linear;
  transform: scale(1)
}
.radio__input:checked+.radio__outside {
  --tw-border-opacity: 1;
  border-color: rgb(154 154 154 / var(--tw-border-opacity, 1))
}
.radio__outside {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  box-sizing: border-box;
  display: inline-block;
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
  width: 12px;
  height: 12px
}
.radio__inside {
  position: absolute;
  left: 3px;
  top: 3px;
  display: inline-block;
  border-radius: 9999px;
  width: 2px;
  height: 2px;
  transform: scale(0)
}
.modal {
  visibility: hidden;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  height: 100%;
  width: 100%;
  background-color: #fffc;
  opacity: 0;
  transition-duration: .2s
}
.modal.active {
  visibility: visible;
  opacity: 1
}
.modal__container {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0 auto;
  box-sizing: border-box;
  width: 100%;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  background-color: #dfe7f3f2;
  padding-top: 1.5rem;
  padding-bottom: 2rem
}
@media not all and (min-width: 1024px) {
  .modal__container {
    height: 27.5rem;
    overflow: visible
  }
}
@media (min-width: 1024px) {
  .modal__container {
    max-width: 43.75rem
  }
}
.modal__container .inner .title {
  font-size: 1.875rem;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.5;
  letter-spacing: .9px;
  --tw-text-opacity: 1;
  color: rgb(57 80 119 / var(--tw-text-opacity, 1))
}
@media (min-width: 1024px) {
  .modal__container .inner .inner_wrap {
    margin: 0 auto;
    max-width: 39.8125rem
  }
}
.modal__container .inner .close {
  position: absolute;
  right: 0;
  top: -60px;
  height: 3.25rem;
  width: 2.25rem;
  cursor: pointer
}
.modal__container .inner .close span {
  position: absolute;
  left: 0;
  top: 25%;
  display: block;
  height: .125rem;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(57 80 119 / var(--tw-bg-opacity, 1))
}
.modal__container .inner .close span:nth-of-type(1) {
  transform: rotate(45deg)
}
.modal__container .inner .close span:nth-of-type(2) {
  transform: rotate(-45deg)
}
.modal__container .inner .close p {
  position: absolute;
  bottom: 0;
  text-align: center;
  font-size: .625rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .3px;
  --tw-text-opacity: 1;
  color: rgb(57 80 119 / var(--tw-text-opacity, 1))
}
@media not all and (min-width: 1024px) {
  .modal.shop-modal .modal__container {
    background-color: transparent;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 1.5625rem;
    padding-right: .9375rem
  }
  .modal.shop-modal .modal__container .inner {
    background-color: #dfe7f3f2;
    padding-top: 1.5rem;
    padding-bottom: 2rem
  }
  .modal.shop-modal .modal__container .inner .close {
    right: 15px
  }
}
.gnav {
  z-index: 30;
  background: linear-gradient(180deg, #d8deea, #f1ebf1, #efeefc 50%, #bcc6df)
}
.gnav .modal__container {
  position: static;
  height: 67svh;
  width: 23.4375rem;
  transform: none;
  padding: 0;
  background: transparent
}
.gnav__inner {
  position: relative;
  height: auto;
  min-height: 100%;
  padding-left: 2.5rem;
  padding-right: 2.5rem
}
.gnav__inner .official-shop {
  margin-top: 2.1875rem
}
.gnav__wrapper {
  transition: opacity .2s ease 0s, visibility 0s ease .2s
}
.gnav__wrap {
  height: 100%;
  width: 100%;
  overflow-y: auto
}
.gnav__ul {
  margin-top: 4rem;
  display: flex;
  height: 100%;
  flex-wrap: wrap;
  row-gap: .5rem
}
.gnav.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .2s ease 0s, visibility 0s ease 0s
}
.gnav.open a {
  pointer-events: auto
}
.gnav .parent {
  margin-top: 5.125rem;
  padding-bottom: 5.5rem
}
.gnav .parent>a>svg {
  height: 1.5625rem
}
.gnav .parent>a {
  margin: auto;
  display: block;
  height: 1.5625rem;
  max-width: 6.875rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.gnav__insta {
  margin-top: 1.5rem;
  justify-content: flex-start;
  padding-top: 0;
  padding-bottom: 0;
  font-family: gotham, sans-serif;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(57 80 119 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  letter-spacing: .45px
}
.menu-list ul li {
  width: 100%;
  text-align: left
}
.menu-list ul li a {
  display: block;
  padding-top: .25rem;
  padding-bottom: .25rem;
  font-family: gotham, sans-serif;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .45px;
  --tw-text-opacity: 1;
  color: rgb(57 80 119 / var(--tw-text-opacity, 1));
  text-decoration-line: none
}
.loading {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 51;
  display: flex;
  height: 100svh;
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  background: linear-gradient(180deg, #bcc6df, #efeefc 50%, #f1ebf1, #d8deea);
  transition: opacity .8s ease
}
.loading__video {
  height: auto;
  min-height: 100%;
  width: auto;
  min-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: filter .8s ease
}
.loading__video-container {
  position: relative;
  z-index: 40;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center
}
@media (min-width: 769px) {
  .loading__video-container {
    padding-left: .0625rem;
    padding-right: .0625rem
  }
}
.loading.loading--hidden {
  opacity: 0;
  transition-delay: .3s
}
.loading.loading--hidden .loading__video {
  filter: brightness(100%) blur(20px)
}
.page__head {
  margin: auto;
  width: 100%;
  padding: 1.875rem 1.25rem 1.25rem
}
@media not all and (min-width: 1280px) {
  .page__head {
    width: 91.666667%
  }
}
@media not all and (min-width: 769px) {
  .page__head {
    width: 100%
  }
}
@media (min-width: 769px) {
  .page__head {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    padding-top: 6.25rem
  }
}
@media (min-width: 1280px) {
  .page__head {
    max-width: 75rem
  }
}
.container {
  position: relative;
  z-index: 20;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 100%;
  overflow: hidden
}
@media (min-width: 640px) {
  .container {
    max-width: 23.4375rem
  }
}
.container .btn {
  height: 3.625rem;
  width: 18.4375rem;
  line-height: 58px
}
.page__foot {
  margin: auto;
  padding: 9.375rem 2.5rem 7.5rem
}
@media not all and (min-width: 1280px) {
  .page__foot {
    width: 91.666667%
  }
}
@media not all and (min-width: 769px) {
  .page__foot {
    width: 100%
  }
}
@media (min-width: 769px) {
  .page__foot {
    max-width: 65rem;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 12.5rem;
    padding-top: 15.625rem
  }
}
.page__foot-link {
  display: flex;
  justify-content: space-between;
  gap: 20px
}
@media not all and (min-width: 769px) {
  .page__foot-link {
    flex-wrap: wrap
  }
}
@media (min-width: 769px) {
  .page__foot-link {
    gap: 120px
  }
}
@media (min-width: 1024px) {
  .page__foot-link {
    gap: 60px
  }
}
.page__foot-link>li {
  flex-basis: 100%
}
@media (min-width: 769px) {
  .page__foot-link>li {
    flex-basis: 50%
  }
}
.swiper-pagination {
  display: flex;
  justify-content: flex-end;
  gap: 11px
}
.swiper-pagination .swiper-pagination-bullet {
  border: solid 2px #6A5191;
  background: none;
  margin: 0!important;
  height: .8125rem;
  width: .8125rem
}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #6a5191
}
.foot-container {
  background: linear-gradient(180deg, #ff86ac, #ffcbf3 35%, #f2b0ff, #ffcbf3 65%, #ff86ac)
}
.main img {
  vertical-align: top
}
h1 {
  text-align: left;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  font-family: gotham, sans-serif;
  font-size: 1.4375rem;
  font-weight: 500;
  line-height: 1.5
}
@media (min-width: 769px) {
  h1 {
    font-size: 2.125rem
  }
}
h1 {
  letter-spacing: .69px
}
@media (min-width: 769px) {
  h1 {
    letter-spacing: 2.04px
  }
}
h1:after {
  display: block;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  --tw-content: attr(data-ja);
  content: var(--tw-content);
  font-family: noto-sans-cjk-jp, ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS PGothic, sans-serif;
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.5rem
}
@media (min-width: 769px) {
  h1:after {
    font-size: 1rem;
    line-height: 2rem
  }
}
h1:after {
  letter-spacing: .84px
}
@media (min-width: 769px) {
  h1:after {
    letter-spacing: 1.28px
  }
}
h2 {
  text-align: center;
  font-size: 1.4375rem
}
@media (min-width: 769px) {
  h2 {
    font-size: 2.8125rem
  }
}
h3 {
  text-align: center;
  font-size: 1.5625rem
}
@media (min-width: 769px) {
  h3 {
    font-size: 2.75rem
  }
}
svg {
  height: 100%;
  width: 100%
}
.error {
  height: 25rem;
  text-align: center;
  font-size: 1.125rem
}
@media (min-width: 769px) {
  .error {
    font-size: 1.5rem
  }
}
@media not all and (min-width: 769px) {
  .only_pc {
    display: none
  }
}
@media (min-width: 769px) {
  .only_pc {
    display: block
  }
}
@media not all and (min-width: 769px) {
  .only_sp {
    display: block
  }
}
@media (min-width: 769px) {
  .only_sp {
    display: none
  }
}
.transition {
  overflow: hidden
}
.transition a img {
  transition-property: all;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-delay: 0s;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(0, 0, .2, 1)
}
.transition a:hover img {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
sup {
  font-size: 60%
}
.text-blur {
  filter: blur(2px)
}
.title {
  font-family: gotham, sans-serif
}
@media (any-hover: hover) {
  .transparent:hover {
    opacity: .5
  }
}
.official-shop {
  padding: 1.5rem 1.25rem 2rem
}
.official-shop__inner {
  display: flex;
  gap: 1rem;
  padding-top: 1.5rem
}
@media not all and (min-width: 769px) {
  .official-shop__inner {
    flex-wrap: wrap
  }
}
.official-shop .title {
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .9px;
  --tw-text-opacity: 1;
  color: rgb(57 80 119 / var(--tw-text-opacity, 1))
}
.float-btn {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: -10;
  opacity: 0
}
@media not all and (min-width: 769px) {
  .float-btn {
    bottom: 20px
  }
}
@media (min-width: 769px) {
  .float-btn {
    display: none
  }
}
.float-btn {
  transform: translate(30px);
  transition: transform .5s cubic-bezier(.4, 0, .2, 1), opacity .3s cubic-bezier(.4, 0, .2, 1), z-index 0s .3s
}
.float-btn .btn {
  height: 2.1875rem;
  width: 6.75rem;
  line-height: 2.1875rem
}
.float-btn .btn a {
  pointer-events: none;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .33px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.float-btn.show {
  z-index: 20;
  opacity: .8;
  transform: translate(0);
  transition: transform .5s cubic-bezier(.4, 0, .2, 1), opacity .3s cubic-bezier(.4, 0, .2, 1), z-index 0s
}
.float-btn.show .btn a {
  pointer-events: auto
}
@media (any-hover: hover) {
  .float-btn .btn-gradient a:hover {
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(57 80 119 / var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(57 80 119 / var(--tw-text-opacity, 1))
  }
  .float-btn .btn-gradient a:hover.is-icon {
    fill: #395077;
    --tw-text-opacity: 1;
    color: rgb(57 80 119 / var(--tw-text-opacity, 1))
  }
  .float-btn .btn-gradient a:hover:before {
    transform: translate(-100%)
  }
}
.download-btn {
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(179 151 140 / var(--tw-border-opacity, 1));
  background-color: transparent;
  transition: color .5s ease-in-out, background-color .5s ease-in-out
}
.download-btn__icon {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin-top: auto;
  margin-bottom: auto;
  fill: #b3978c
}
@media (any-hover: hover) {
  .download-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(179 151 140 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
  }
  .download-btn:hover .download-btn__icon {
    fill: #fff
  }
}
.select-shop__itemname {
  margin-top: .5rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .48px;
  --tw-text-opacity: 1;
  color: rgb(57 80 119 / var(--tw-text-opacity, 1))
}
@media (min-width: 769px) {
  .select-shop__itemname {
    font-size: .875rem;
    letter-spacing: .42px
  }
}
.select-shop__itemprice {
  margin-top: .5rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .48px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
@media (min-width: 769px) {
  .select-shop__itemprice {
    margin-top: .25rem;
    font-size: .9375rem;
    line-height: 1.75;
    letter-spacing: .45px
  }
}
.select-shop__itemprice>span {
  font-size: .625rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .3px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
header {
  pointer-events: none;
  position: fixed;
  top: 0;
  z-index: 40;
  box-sizing: border-box;
  display: flex;
  height: 100%;
  max-height: 4.9375rem;
  width: 100%;
  align-items: center;
  padding: .9375rem 1.25rem
}
@media (min-width: 1280px) {
  header {
    max-height: 6.9375rem;
    justify-content: space-between;
    padding: 1.875rem 5rem
  }
}
header {
  transition: top .25s cubic-bezier(.5, 0, .5, 1)
}
header>a {
  pointer-events: auto
}
header .menu-trigger {
  position: absolute;
  right: 1.25rem;
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .625rem
}
@media (min-width: 769px) {
  header .menu-trigger {
    display: none
  }
}
header .menu-trigger {
  transition: opacity .2s ease
}
header .menu-trigger .icon {
  position: relative;
  display: inline-block;
  height: .5rem;
  width: 2.5rem;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2))
}
header .menu-trigger .icon:before, header .menu-trigger .icon:after {
  position: absolute;
  left: 0;
  box-sizing: border-box;
  display: inline-block;
  height: 1px;
  width: 100%;
  border-radius: .125rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-content: "";
  content: var(--tw-content)
}
header .menu-trigger .icon:before {
  top: -2px;
  transition: all .4s;
  animation: menu-bar01 .75s forwards
}
header .menu-trigger .icon:after {
  bottom: 0;
  transition: all .4s;
  animation: menu-bar02 .75s forwards
}
header .menu-trigger .text {
  position: absolute;
  top: 36px;
  text-align: center;
  font-family: gotham, sans-serif;
  font-size: .625rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .3px;
  --tw-text-opacity: 1;
  color: rgb(57 80 119 / var(--tw-text-opacity, 1));
  opacity: 0;
  transition: opacity .4s
}
header .menu-trigger.active {
  opacity: 1
}
header .menu-trigger.active .icon:before {
  --tw-bg-opacity: 1;
  background-color: rgb(57 80 119 / var(--tw-bg-opacity, 1));
  animation: active-menu-bar01 .75s forwards
}
header .menu-trigger.active .icon:after {
  --tw-bg-opacity: 1;
  background-color: rgb(57 80 119 / var(--tw-bg-opacity, 1));
  animation: active-menu-bar02 .75s forwards
}
header .menu-trigger.active .text {
  opacity: 1
}
@keyframes menu-bar01 {
  0% {
    transform: translateY(5px) rotate(45deg)
  }
  50% {
    transform: translateY(5px) rotate(0)
  }
  to {
    transform: translateY(0) rotate(0)
  }
}
@keyframes menu-bar02 {
  0% {
    transform: translateY(-5px) rotate(-45deg)
  }
  50% {
    transform: translateY(-5px) rotate(0)
  }
  to {
    transform: translateY(0) rotate(0)
  }
}
@keyframes active-menu-bar01 {
  0% {
    transform: translateY(0) rotate(0)
  }
  50% {
    transform: translateY(5px) rotate(0)
  }
  to {
    transform: translateY(5px) rotate(45deg)
  }
}
@keyframes active-menu-bar02 {
  0% {
    transform: translateY(0) rotate(0)
  }
  50% {
    transform: translateY(-5px) rotate(0)
  }
  to {
    transform: translateY(-5px) rotate(-45deg)
  }
}
.footer {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 3.25rem 1.25rem 1.5rem;
  text-align: center;
  background: linear-gradient(180deg, #d8deea, #f1ebf1, #efeefc 50%, #bcc6df)
}
.footer__contents {
  text-align: left
}
.footer__insta {
  justify-content: flex-start;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  font-family: gotham, sans-serif;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(57 80 119 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  letter-spacing: .45px
}
.footer__external>li {
  text-align: left
}
.footer__external>li>a {
  justify-content: flex-start;
  padding-top: .25rem;
  font-family: gotham, sans-serif;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(57 80 119 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  letter-spacing: .36px
}
.footer__under {
  padding-top: 3rem
}
.footer__logo {
  margin-left: auto;
  margin-right: auto;
  display: block;
  height: 6.4375rem;
  width: 16.5625rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.footer__copyright {
  margin-top: 2rem;
  text-align: center;
  font-family: montserrat, sans-serif;
  font-size: .625rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
@media (any-hover: hover) {
  .footer__nav a:hover, .footer__external a:hover, .footer__insta:hover {
    opacity: .5
  }
}
html, body {
  -webkit-overflow-scrolling: touch
}
body {
  padding: 0;
  font-family: noto-sans-cjk-jp, ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS PGothic, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%
}
body *, body :before, body :after {
  border-style: none;
  border-color: transparent
}
a {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  text-decoration-line: none
}
a:hover {
  text-decoration-line: none
}
a.is-icon {
  display: flex;
  align-items: center;
  gap: 6px
}
details summary {
  list-style: none
}
details summary::-webkit-details-marker {
  display: none
}
.breadcrumbs {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  margin-top: 1.875rem
}
@media not all and (min-width: 769px) {
  .breadcrumbs {
    width: 100%
  }
}
@media (min-width: 769px) {
  .breadcrumbs {
    margin-top: 5.3125rem
  }
}
.breadcrumbs__list {
  display: flex
}
.breadcrumbs__item {
  font-family: noto-sans-cjk-jp, ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS PGothic, sans-serif;
  font-size: .625rem;
  font-weight: 300;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(154 154 154 / var(--tw-text-opacity, 1))
}
@media (min-width: 769px) {
  .breadcrumbs__item {
    font-size: .875rem
  }
}
.breadcrumbs__item {
  letter-spacing: .3px
}
@media (min-width: 769px) {
  .breadcrumbs__item {
    letter-spacing: .84px
  }
}
.breadcrumbs__item:not(:last-of-type) {
  margin-right: .3125rem
}
.breadcrumbs__item:not(:last-of-type):after {
  content: " - "
}
.breadcrumbs__link span {
  font-family: noto-sans-cjk-jp, ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS PGothic, sans-serif;
  font-size: .625rem;
  font-weight: 300;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(154 154 154 / var(--tw-text-opacity, 1))
}
@media (min-width: 769px) {
  .breadcrumbs__link span {
    font-size: .875rem
  }
}
.breadcrumbs__link span {
  letter-spacing: .3px
}
@media (min-width: 769px) {
  .breadcrumbs__link span {
    letter-spacing: .84px
  }
}
.breadcrumbs__nolink span {
  font-family: noto-sans-cjk-jp, ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS PGothic, sans-serif;
  font-size: .625rem;
  font-weight: 300;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(154 154 154 / var(--tw-text-opacity, 1))
}
@media (min-width: 769px) {
  .breadcrumbs__nolink span {
    font-size: .875rem
  }
}
.breadcrumbs__nolink span {
  letter-spacing: .3px
}
@media (min-width: 769px) {
  .breadcrumbs__nolink span {
    letter-spacing: .84px
  }
}