.swiper-container {
  position: relative;
  margin: 0 auto;
  width: 100%
}
@media not all and (min-width: 769px) {
  .swiper-container {
    width: 100%
  }
}
.swiper-button-prev, .swiper-button-next {
  position: absolute;
  bottom: 0;
  top: 0;
  z-index: 10;
  margin: auto;
  width: 5%;
  background-position: center;
  background-repeat: no-repeat
}
.more-btn[data-astro-cid-eg54k3bi] {
  width: 36px;
  height: 40px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .3px;
  font-family: gotham, "sans-serif"
}
.more-btn[data-astro-cid-eg54k3bi] .icon[data-astro-cid-eg54k3bi] {
  display: flex;
  align-items: center;
  justify-content: center
}
.more-btn[data-astro-cid-eg54k3bi] .svg-icon[data-astro-cid-eg54k3bi] {
  transition: transform .5s ease;
  transform-origin: center
}
.more-btn[data-astro-cid-eg54k3bi] .hidden[data-astro-cid-eg54k3bi] {
  display: none
}
@media (any-hover: hover) {
  .more-btn[data-astro-cid-eg54k3bi]:hover {
    opacity: .5
  }
}
.top-fv {
  position: fixed;
  inset: 0;
  z-index: 30
}
.top-fv__inner {
  opacity: 1;
  transition: opacity .8s ease
}
.top-fv__logo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 11.805vw;
  z-index: 10;
  margin: auto;
  height: 8.8125rem;
  width: 22.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  opacity: 1;
  filter: drop-shadow(0px 0px 40px rgba(181, 186, 234, .6));
  transition: opacity .3s ease-out
}
.top-fv__img {
  background-image: url(../../assets/img/top/bg-pcfv.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: filter .8s ease
}
.top-fv__img img {
  margin: auto;
  height: 100%;
  min-height: 100svh;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  opacity: 0;
  -o-object-position: center top;
  object-position: center top
}
.top-fv.is-hide {
  pointer-events: none
}
.top-fv.is-hide .top-fv__logo {
  opacity: 0
}
.top-fv.is-hide .top-fv__inner {
  opacity: 0;
  transition-delay: .5s
}
.top-fv.is-hide .top-fv__img {
  filter: brightness(100%) blur(20px)
}
.top-concept {
  position: relative
}
.top-concept__bg {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(233 233 233 / var(--tw-bg-opacity, 1))
}
.top-concept__intro {
  position: relative
}
.top-concept__intro-logo {
  position: absolute;
  top: 53px;
  left: 0;
  right: 0;
  z-index: 10;
  margin: auto;
  height: auto;
  width: 13.0625rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  opacity: 1
}
@media (min-width: 769px) {
  .top-concept__intro-logo {
    display: none
  }
}
.top-concept__intro-logo {
  transition: opacity .5s ease-out
}
.top-concept__intro-logo.is-hide {
  opacity: 0
}
.top-concept__intro-bg {
  height: 100%;
  width: 100%;
  background-image: url(../../assets/img/top/bg_kv.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat
}
.top-concept__intro-bg img {
  margin: auto;
  height: 100%;
  min-height: 100svh;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  opacity: 0
}
.top-concept__intro-bg:before {
  position: absolute;
  left: 0;
  top: 0;
  margin: auto;
  height: 100%;
  min-height: 100svh;
  width: 100%;
  max-width: 100%;
  --tw-content: "";
  content: var(--tw-content);
  background-color: #0000;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  will-change: background-color, backdrop-filter, opacity;
  transition: background-color ease .95s, opacity ease .95s
}
.top-concept__intro-bg.is-dark {
  background-image: none
}
.top-concept__intro-bg.is-dark:before {
  background-color: #0000004d;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px)
}
.top-concept__intro-bg.is-dark img {
  opacity: 1
}
.top-concept__intro-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 0;
  margin-left: auto;
  margin-right: auto;
  height: 100%
}
@media (min-width: 769px) {
  .top-concept__intro-content {
    top: 150%;
    height: 85svh
  }
}
.top-concept__intro-textarea {
  margin-left: auto;
  margin-right: auto;
  max-width: 25rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem
}
.top-concept__intro-catch {
  margin-bottom: 1rem;
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .45px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.top-concept__intro-message {
  opacity: 0;
  transform: translateY(4rem)
}
.top-concept__intro-desc {
  margin-top: 1rem;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .45px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.top-concept__intro-desc span {
  display: inline-block
}
.top-concept__intro-movie {
  position: relative;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5rem;
  height: auto;
  overflow: auto;
  width: 90%!important;
  padding-top: 177.77%;
  transform: scale(.515);
  transition: all 1s cubic-bezier(.1, .7, .4, 1)
}
.top-concept__intro-movie.is-view {
  transform: scale(1)
}
.top-concept__intro-movie video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%
}
.top-concept__intro-movie-area {
  left: 0!important;
  top: 10%!important
}
.top-concept__intro-movie-wrap {
  position: relative
}
.top-concept__intro-movie-wrap .parallax-bubble {
  pointer-events: none;
  position: absolute;
  z-index: 0;
  transition: transform 5s ease
}
.top-concept__intro-movie-wrap .parallax-bubble.parallax-bubble1 {
  position: absolute;
  top: 66px;
  left: 0;
  height: auto;
  width: 10.125rem
}
.top-concept__intro-movie-wrap .parallax-bubble.parallax-bubble2 {
  position: absolute;
  top: 125px;
  left: -20px;
  height: auto;
  width: 14.25rem
}
.top-concept__intro-movie-wrap .parallax-bubble.parallax-bubble3 {
  position: absolute;
  bottom: -70px;
  right: -20px;
  height: auto;
  width: 13.6875rem
}
.top-concept__moisture {
  position: relative;
  padding-top: 165.067%;
  padding-bottom: 3.5rem
}
.top-concept__moisture-bg {
  position: absolute;
  top: 0
}
.top-concept__moisture-content {
  position: absolute;
  top: 48px;
  left: 0;
  width: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  aspect-ratio: 750/1252
}
.top-concept__moisture-minicatch {
  text-align: center;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .36px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-concept__moisture-catch {
  margin-top: .5rem;
  padding-bottom: .5rem;
  font-size: 1.875rem;
  font-weight: 200;
  line-height: 1.5;
  letter-spacing: .9px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-concept__moisture-catch span {
  letter-spacing: -8.1px
}
.top-concept__moisture-catch.scall-line:after {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
  opacity: .5
}
.top-concept__moisture-message {
  margin-top: .5rem;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .54px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-concept__moisture-desc {
  margin-top: 3.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: .42px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-concept__moisture-list {
  bottom: -38px
}
.top-concept__verification {
  padding: 3.625rem 1.25rem 4rem
}
.top-concept__verification-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px
}
.top-concept__verification-label {
  border-radius: 90px;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(154 154 154 / var(--tw-border-opacity, 1));
  padding: .25rem .5rem;
  text-align: center;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.625;
  letter-spacing: .42px;
  --tw-text-opacity: 1;
  color: rgb(154 154 154 / var(--tw-text-opacity, 1))
}
.top-concept__verification-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .54px;
  --tw-text-opacity: 1;
  color: rgb(154 154 154 / var(--tw-text-opacity, 1))
}
.top-concept__verification-lottie {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  width: 12.375rem
}
.top-concept__verification-image1 {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  height: auto;
  width: 12.375rem
}
.top-concept__verification-image2 {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5rem;
  height: auto;
  width: 8rem
}
.top-concept__verification-caption {
  margin-top: .875rem;
  text-align: center;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .42px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-concept__verification-description {
  margin-top: .125rem;
  font-size: .8125rem;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: .39px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-concept__verification-note {
  margin-top: 2rem;
  font-size: .625rem;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: .3px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-concept__commitment {
  position: relative;
  min-height: 57.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 3rem
}
.top-concept__commitment-inner {
  aspect-ratio: 750/1205
}
.top-concept__commitment-bg {
  position: absolute;
  top: 0
}
.top-concept__commitment-content {
  position: absolute;
  top: 48px;
  left: 0;
  min-height: 602px;
  width: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem
}
.top-concept__commitment-catch {
  text-align: center;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .36px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-concept__commitment-message {
  margin-top: .5rem;
  text-align: center;
  font-size: 1.6875rem;
  font-weight: 200;
  line-height: 1.4;
  letter-spacing: .9px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-concept__commitment-desc {
  margin-top: 1.5rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: .42px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-feature {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 4rem
}
.top-feature__toc {
  padding-left: 1.25rem;
  padding-right: 1.25rem
}
.top-feature__toc>.title {
  font-size: 1.875rem;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.5;
  letter-spacing: .9px
}
.top-feature__toc-list {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px
}
.top-feature__toc-link {
  display: block;
  padding: 1rem .5rem
}
.top-feature__toc-link.beige {
  --tw-bg-opacity: 1;
  background-color: rgb(245 234 230 / var(--tw-bg-opacity, 1))
}
.top-feature__toc-link.beige .top-feature__toc-title, .top-feature__toc-link.beige .top-feature__toc-arrow {
  --tw-text-opacity: 1;
  color: rgb(179 151 140 / var(--tw-text-opacity, 1))
}
.top-feature__toc-link.purple {
  --tw-bg-opacity: 1;
  background-color: rgb(223 231 243 / var(--tw-bg-opacity, 1))
}
.top-feature__toc-link.purple .top-feature__toc-title, .top-feature__toc-link.purple .top-feature__toc-arrow {
  --tw-text-opacity: 1;
  color: rgb(57 80 119 / var(--tw-text-opacity, 1))
}
.top-feature__toc-title {
  display: block;
  text-align: center;
  font-family: gotham, sans-serif;
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .33px
}
.top-feature__toc-figure {
  margin-top: .5rem
}
.top-feature__toc-image {
  margin-left: auto;
  margin-right: auto;
  height: 5rem;
  width: 5rem;
  fill: #fff
}
.top-feature__toc-figcaption {
  margin-top: .5rem;
  white-space: nowrap;
  text-align: center;
  font-size: .625rem;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: .3px
}
.top-feature__toc-arrow {
  margin-left: auto;
  margin-right: auto;
  margin-top: .5rem;
  height: .3125rem;
  width: .5rem;
  transition: transform .3s ease
}
.top-feature__toc-note {
  margin-top: 1.5rem;
  display: block;
  font-size: .625rem;
  font-weight: 300;
  line-height: 1.625;
  letter-spacing: .3px
}
.top-feature__contents {
  position: relative;
  padding: 3rem 1.25rem
}
.top-feature__contents .title {
  position: relative;
  z-index: 10;
  text-align: center;
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.6;
  letter-spacing: .36px
}
.top-feature__contents .subtitle {
  white-space: nowrap;
  font-weight: 200;
  line-height: 1.45;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-feature__contents .subtitle.odd {
  text-align: center;
  font-size: 1.4375rem;
  letter-spacing: .69px
}
.top-feature__contents .subtitle.even {
  text-align: left;
  font-size: 1.4375rem;
  letter-spacing: .69px
}
.top-feature-01__introduction {
  position: relative
}
.top-feature-01__introduction:not(:first-of-type) {
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(233 233 233 / var(--tw-border-opacity, 1))
}
.top-feature-01__introduction:not(:last-of-type) {
  padding-bottom: 1.5rem
}
.top-feature-01__num {
  font-family: gotham, sans-serif;
  font-weight: 500;
  line-height: 1.6;
  --tw-text-opacity: 1;
  color: rgb(179 151 140 / var(--tw-text-opacity, 1))
}
.top-feature-01__mode {
  height: 1.3125rem;
  width: 9rem;
  --tw-bg-opacity: 1;
  background-color: rgb(245 234 230 / var(--tw-bg-opacity, 1));
  padding-left: .25rem;
  padding-right: .25rem;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .36px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-feature-01__description {
  font-weight: 300;
  line-height: 1.75
}
.top-feature-02-inner {
  position: relative;
  margin-left: -1.25rem;
  width: calc(100% + 40px);
  aspect-ratio: 750/1152
}
.top-feature-02-list {
  bottom: 0
}
.top-feature-03__image {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.5rem;
  height: 8.6875rem;
  width: 8.6875rem
}
.top-feature-03__description {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: .42px
}
.top-feature-03__note {
  display: block;
  font-size: .625rem;
  font-weight: 300;
  line-height: 1.625;
  letter-spacing: .3px
}
.top-feature-03__ion-types {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}
.top-feature-03__ion-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-radius: .5rem;
  padding: 1rem;
  background: #ffffff80
}
.top-feature-03__ion-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .48px;
  --tw-text-opacity: 1;
  color: rgb(179 151 140 / var(--tw-text-opacity, 1))
}
.top-feature-03__ion-description {
  font-size: .75rem;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: .36px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-feature-03__plus-icon {
  margin-left: auto;
  margin-right: auto;
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(179 151 140 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(179 151 140 / var(--tw-text-opacity, 1))
}
.top-feature-03__verification {
  padding-top: 3rem
}
.top-feature-03__verification-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px
}
.top-feature-03__verification-label {
  border-radius: 90px;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(179 151 140 / var(--tw-border-opacity, 1));
  padding: .25rem .5rem;
  text-align: center;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.625;
  letter-spacing: .42px;
  --tw-text-opacity: 1;
  color: rgb(179 151 140 / var(--tw-text-opacity, 1))
}
.top-feature-03__verification-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .54px;
  --tw-text-opacity: 1;
  color: rgb(179 151 140 / var(--tw-text-opacity, 1))
}
.top-feature-03__verification-video {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.5rem;
  width: 14.375rem
}
.top-feature-03__verification-caption {
  margin-top: .625rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .42px;
  --tw-text-opacity: 1;
  color: rgb(179 151 140 / var(--tw-text-opacity, 1))
}
.top-feature-03__verification-description {
  margin-top: .0625rem;
  padding-bottom: 1rem;
  font-size: .75rem;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: .36px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-feature-03__verification-item {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 16px
}
.top-feature-03__verification-item-image-wrapper {
  height: 6.25rem;
  width: 6.25rem
}
.top-feature-03__verification-item-title {
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .45px;
  --tw-text-opacity: 1;
  color: rgb(179 151 140 / var(--tw-text-opacity, 1))
}
.top-feature-03__verification-item-description {
  margin-top: .25rem;
  font-size: .75rem;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: .36px
}
.top-feature-03__verification-text {
  width: 13.6875rem
}
.top-feature-05__item {
  display: flex
}
.top-feature-05__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}
@media (any-hover: hover) {
  .top-feature__toc-link:hover .top-feature__toc-arrow {
    transform: translateY(3px)
  }
}
.top-choice {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 3rem;
  padding-bottom: 3rem
}
.top-choice__inner {
  padding-left: 2.5rem;
  padding-right: 2.5rem
}
.top-choice__items {
  display: flex
}
.top-choice__itemname {
  margin-top: .5rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .48px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-choice__itemprice {
  margin-top: .5rem;
  text-align: center;
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .45px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-choice__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))
}
.top-interview {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(245 234 230 / var(--tw-bg-opacity, 1));
  padding-top: 4rem;
  padding-bottom: 4rem
}
.top-interview__inner {
  padding-left: 1.25rem;
  padding-right: 1.25rem
}
.top-interview__inner>.title {
  text-align: left;
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .9px
}
.top-interview__inner>.title:first-line {
  --tw-text-opacity: 1;
  color: rgb(179 151 140 / var(--tw-text-opacity, 1))
}
.top-interview__introduction {
  margin-top: 2rem;
  display: flex;
  gap: 24px
}
.top-interview__introduction .image {
  width: 6.25rem
}
.top-interview__introduction .belong {
  --tw-bg-opacity: 1;
  background-color: rgb(179 151 140 / var(--tw-bg-opacity, 1));
  padding-left: .5rem;
  padding-right: .5rem;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: .33px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.top-interview__introduction .name {
  margin-top: .75rem;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .42px;
  --tw-text-opacity: 1;
  color: rgb(179 151 140 / var(--tw-text-opacity, 1))
}
.top-interview__introduction .post {
  margin-top: .125rem;
  font-size: .625rem;
  font-weight: 400;
  line-height: 1.625;
  letter-spacing: .3px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-interview__text {
  margin-top: .5rem;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .36px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-interview__finishing {
  padding-top: 1.5rem
}
.top-interview__title {
  margin-top: 1.5rem;
  text-align: left;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .6px;
  --tw-text-opacity: 1;
  color: rgb(179 151 140 / var(--tw-text-opacity, 1))
}
.top-interview__description {
  margin-top: .5rem;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .42px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-howto {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 3.5rem;
  padding-bottom: 3.5rem
}
.top-howto__inner>.title {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  text-align: left;
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .9px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-howto__text {
  margin-top: .5rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .42px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-howto__slide {
  position: relative;
  margin-top: 1.5rem;
  padding-bottom: 3.75rem
}
.top-howto__slide .swiper-slide {
  position: relative;
  height: auto;
  padding: 2rem 1.25rem;
  background: #dfe7f380
}
.top-howto__slide .swiper-slide .swiper-slide-item {
  height: 100%
}
.top-howto__slide .swiper-slide .slidenum {
  position: absolute;
  left: 13px;
  top: 16px;
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .48px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  background: linear-gradient(270deg, #e7d5e8, #8eb4eb)
}
.top-howto__slide .swiper-slide .itemimage {
  padding-left: .5625rem;
  padding-right: .5625rem
}
.top-howto__slide .swiper-slide .title {
  margin-top: 1.5rem;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .45px
}
.top-howto__slide .swiper-slide .text {
  margin-top: .25rem;
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .39px
}
.top-howto__slide .swiper-pagination {
  bottom: 12px;
  justify-content: center;
  gap: 6px
}
.top-howto__slide .swiper-pagination .swiper-pagination-bullet {
  height: .375rem;
  width: .375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(57 80 119 / var(--tw-border-opacity, 1));
  opacity: 1
}
.top-howto__slide .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  --tw-bg-opacity: 1;
  background-color: rgb(57 80 119 / var(--tw-bg-opacity, 1))
}
.top-howto__slide .swiper-button-prev, .top-howto__slide .swiper-button-next {
  top: auto;
  bottom: 0;
  height: 2rem;
  width: 2rem;
  background-image: none;
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease-out, visibility .5s ease-out
}
.top-howto__slide .swiper-button-prev svg, .top-howto__slide .swiper-button-next svg {
  fill: transparent;
  stroke: #395077
}
.top-howto__slide .swiper-button-prev:after, .top-howto__slide .swiper-button-next:after {
  --tw-content: none;
  content: var(--tw-content)
}
.top-howto__slide .swiper-button-prev.swiper-button-disabled, .top-howto__slide .swiper-button-next.swiper-button-disabled {
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-out, visibility .5s ease-out
}
.top-howto__slide .swiper-button-prev svg {
  --tw-rotate: 180deg;
  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))
}
@media (any-hover: hover) {
  .top-howto__slide .swiper-button-prev:hover svg, .top-howto__slide .swiper-button-next:hover svg {
    fill: #395077;
    stroke: #fff
  }
}
.top-howto__finishing {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 2rem
}
.top-howto__ba {
  display: flex;
  align-items: center;
  justify-content: space-between
}
.top-howto__before, .top-howto__arrow, .top-howto__after {
  opacity: 0;
  transform: translateY(50px);
  transition: transform 2.4s cubic-bezier(.215, .61, .355, 1), opacity 1.2s
}
.top-howto__before.is-animated, .top-howto__arrow.is-animated, .top-howto__after.is-animated {
  transform: translateY(0);
  opacity: 1
}
.top-howto__before {
  width: 8.875rem
}
.top-howto__arrow {
  width: 1.875rem;
  height: 1.875rem;
  --tw-text-opacity: 1;
  color: rgb(223 231 243 / var(--tw-text-opacity, 1))
}
.top-howto__after {
  width: 8.875rem
}
.top-howto__title {
  margin-top: 1.5rem;
  text-align: left;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .6px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-howto__description {
  margin-top: .5rem;
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: .42px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-howto__note {
  margin-top: 1rem;
  display: inline-block;
  font-size: .625rem;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: .3px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-spec {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(245 234 230 / var(--tw-bg-opacity, 1));
  padding-top: 4rem;
  padding-bottom: 4rem
}
.top-spec__gift .title {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.375;
  letter-spacing: .72px
}
.top-spec__gift .text {
  margin-top: .25rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.625;
  letter-spacing: .48px;
  --tw-text-opacity: 1;
  color: rgb(179 151 140 / var(--tw-text-opacity, 1))
}
.top-spec__gift-images {
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  height: 100%;
  min-height: 14.5rem;
  width: 100%
}
.top-spec__gift .image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: auto;
  width: 100%;
  opacity: 0;
  animation: change-img-anim 6s infinite
}
.top-spec__gift .image:nth-of-type(1) {
  animation-delay: 0s
}
.top-spec__gift .image:nth-of-type(2) {
  animation-delay: 3s
}
@keyframes change-img-anim {
  0% {
    opacity: 0;
    z-index: 2
  }
  17% {
    opacity: 1
  }
  50% {
    opacity: 1
  }
  65% {
    opacity: 0;
    z-index: 1
  }
  to {
    opacity: 0
  }
}
.top-spec__inner {
  padding: 1.5rem 1.25rem
}
.top-spec__inner .title {
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .9px;
  --tw-text-opacity: 1;
  color: rgb(179 151 140 / var(--tw-text-opacity, 1))
}
.top-spec__item {
  position: relative;
  padding-top: .5rem;
  padding-bottom: .5rem
}
.top-spec__hiddenitem {
  max-height: 0px;
  overflow: hidden;
  opacity: 0;
  transition: opacity .4s ease, max-height .4s ease-out
}
.top-spec__hiddenitem.show {
  opacity: 1
}
.top-spec__title {
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: .39px
}
.top-spec__text {
  font-size: .6875rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .33px
}
.top-spec__model {
  display: flex;
  width: 5.4375rem;
  justify-content: space-between
}
.top-spec__model-wrap {
  display: flex;
  justify-content: space-between;
  gap: .25rem
}
.top-news {
  position: relative;
  padding: 4rem 1.25rem;
  background: linear-gradient(180deg, #bcc6df, #efeefc 50%, #f1ebf1, #d8deea)
}
.top-news__inner {
  padding-top: 4rem
}
.top-news__inner .title {
  text-align: left;
  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))
}
.top-news__item {
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  padding-top: 1.25rem;
  padding-bottom: 1.25rem
}
.top-news__item>dt, .top-news__item dd {
  --tw-text-opacity: 1;
  color: rgb(57 80 119 / var(--tw-text-opacity, 1))
}
.top-news__item dt {
  font-size: .625rem;
  font-weight: 500;
  line-height: 1.625;
  letter-spacing: .3px
}
.top-news__item dd {
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.625;
  letter-spacing: .39px
}
@media (any-hover: hover) {
  .top-news__link:hover {
    opacity: .5
  }
}
.top-faq {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(245 234 230 / var(--tw-bg-opacity, 1));
  padding-bottom: 5rem
}
.top-faq__inner {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 3rem
}
.top-faq__inner .title {
  text-align: left;
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 3.6px;
  --tw-text-opacity: 1;
  color: rgb(179 151 140 / var(--tw-text-opacity, 1))
}
.top-faq__item {
  overflow: hidden;
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s
}
.top-faq__item.is-open .top-faq__question .icon:after {
  transform: rotate(90deg)
}
.top-faq__question {
  position: relative;
  display: flex;
  cursor: pointer;
  align-items: center
}
.top-faq__question dt {
  margin-right: .625rem;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.625;
  letter-spacing: .66px;
  --tw-text-opacity: 1;
  color: rgb(179 151 140 / var(--tw-text-opacity, 1))
}
.top-faq__question dd {
  padding-right: 1.25rem;
  font-family: gotham, sans-serif;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.625;
  letter-spacing: .42px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.top-faq__question .icon {
  position: absolute;
  right: 0;
  top: 50%;
  height: 1.25rem;
  width: 1.25rem;
  --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))
}
.top-faq__question .icon:before, .top-faq__question .icon:after {
  position: absolute;
  --tw-bg-opacity: 1;
  background-color: rgb(179 151 140 / var(--tw-bg-opacity, 1));
  transition: transform .3s ease;
  content: ""
}
.top-faq__question .icon:before {
  left: 0;
  top: 50%;
  height: .125rem;
  width: 100%;
  --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))
}
.top-faq__question .icon:after {
  top: 0;
  left: 50%;
  height: 100%;
  width: .125rem;
  --tw-translate-x: -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))
}
.top-faq__answer {
  max-height: 0px;
  overflow: hidden;
  padding-top: .6875rem;
  padding-left: 1.875rem;
  font-size: .75rem;
  line-height: 1.625;
  transition: max-height .4s ease-in-out
}
.top-faq__answer>a {
  text-decoration-line: underline
}
.top .footer-product {
  padding-top: 11.25rem;
  padding-bottom: 5rem
}
@media (min-width: 769px) {
  .top .footer-product {
    padding-top: 11.1875rem
  }
}
@media (max-height: 900px) and (min-width: 768px) {
  .top .footer-product {
    padding-top: calc(6vh + 139px)
  }
}
.top .footer-product .title {
  margin-top: 3.75rem
}
@media (min-width: 769px) {
  .top .footer-product .title {
    margin-top: 5rem
  }
}
.top .footer-product__content {
  margin-top: 2.5rem
}
@media (min-width: 769px) {
  .top .footer-product__content {
    margin-top: 3.3125rem
  }
  .top .footer-product__item--stick .footer-product__link {
    left: 10px
  }
  .top .footer-product__item--water .footer-product__link {
    left: auto;
    right: 10px
  }
  .top .footer-product__item--fixer .footer-product__link {
    left: 8px
  }
}
.top .circular-list {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  padding-left: 1.25rem;
  padding-right: 1.25rem
}
.top .circular-item .circle {
  display: flex;
  height: 9.0625rem;
  width: 9.0625rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  opacity: .7
}
.top .circular-item .circle .text {
  text-align: center;
  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.6;
  letter-spacing: .42px;
  --tw-text-opacity: 1;
  color: rgb(154 154 154 / var(--tw-text-opacity, 1))
}
.top .circular-item .circle .text .hyphen-adjust {
  display: inline-block;
  vertical-align: .06em
}
.top .circular-item .circle .text .percentage {
  line-height: 1.2
}
.top .circular-item .icon {
  --tw-text-opacity: 1;
  color: rgb(154 154 154 / var(--tw-text-opacity, 1))
}
html.lenis, html.lenis body {
  height: auto
}
.lenis[data-astro-cid-3v375jyc].lenis-smooth {
  scroll-behavior: auto!important
}
.lenis[data-astro-cid-3v375jyc].lenis-smooth [data-astro-cid-3v375jyc][data-lenis-prevent] {
  overscroll-behavior: contain
}
.lenis[data-astro-cid-3v375jyc].lenis-stopped {
  overflow: hidden
}
.lenis[data-astro-cid-3v375jyc].lenis-smooth iframe[data-astro-cid-3v375jyc] {
  pointer-events: none
}
/* 202511 Araki Add */
.top-howto__comment__title{
  margin-top: 2.5rem;
  text-align: left;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .6px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  text-align: center;
}
.top-howto__commentslide{
  position: relative;
  margin-top: 1.5rem;
  padding-bottom: 3.75rem;
}
.top-howto__commentslide .swiper-slide,
.top-howto__movieslide .swiper-slide {
  position: relative;
  height: auto;
  padding: 0;
}
.top-howto__commentslide .swiper-slide .swiper-comment-item,
.top-howto__movieslide .swiper-slide .swiper-movie-item {
  height: 100%;
  position: relative; /* 20251119 Add */
}
.top-howto__commentslide .commentswiper-pagination,
.top-howto__movieslide .movieswiper-pagination {
  position: absolute;
  display: flex;
  bottom: 12px;
  justify-content: center;
  gap: 6px
}
.top-howto__commentslide .commentswiper-pagination .swiper-pagination-bullet,
.top-howto__movieslide .movieswiper-pagination .swiper-pagination-bullet {
  border: solid 2px #6a5191;
  background: 0 0;
  margin: 0 !important;
  height: .375rem;
  width: .375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(57 80 119 / var(--tw-border-opacity, 1));
  opacity: 1
}
.top-howto__commentslide .commentswiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active,
.top-howto__movieslide .movieswiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  --tw-bg-opacity: 1;
  background-color: rgb(57 80 119 / var(--tw-bg-opacity, 1))
}
.top-howto__commentslide .commentswiper-button-prev, .top-howto__commentslide .commentswiper-button-next,
.top-howto__movieslide .movieswiper-button-prev, .top-howto__movieslide .movieswiper-button-next  {
  position: absolute;
  bottom: 0;
  top: 0;
  z-index: 10;
  margin: auto;
  width: 5%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.top-howto__commentslide .commentswiper-button-prev, .top-howto__commentslide .commentswiper-button-next,
.top-howto__movieslide .movieswiper-button-prev, .top-howto__movieslide .movieswiper-button-next {
  top: auto;
  bottom: 0;
  height: 2rem;
  width: 2rem;
  background-image: none;
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease-out, visibility .5s ease-out
}
.top-howto__commentslide .commentswiper-button-prev.swiper-button-disabled,.top-howto__commentslide .commentswiper-button-next.swiper-button-disabled,
.top-howto__movieslide .movieswiper-button-prev.swiper-button-disabled,.top-howto__movieslide .movieswiper-button-next.swiper-button-disabled{
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-out, visibility .5s ease-out;
}
.top-howto__commentslide .commentswiper-button-prev,
.top-howto__movieslide .movieswiper-button-prev{
  left: var(--swiper-navigation-sides-offset, 10px);
}
.top-howto__commentslide .commentswiper-button-next,
.top-howto__movieslide .movieswiper-button-next{
  right: var(--swiper-navigation-sides-offset, 10px);
}
.top-howto__commentslide .commentswiper-button-prev svg, .top-howto__commentslide .commentswiper-button-next svg,
.top-howto__movieslide .movieswiper-button-prev svg, .top-howto__movieslide .movieswiper-button-next svg {
  fill: transparent;
  stroke: #395077
}
.top-howto__commentslide .commentswiper-button-prev:after, .top-howto__commentslide .commentswiper-button-next:after,
.top-howto__movieslide .movieswiper-button-prev:after, .top-howto__movieslide .movieswiper-button-next:after {
  --tw-content: none;
  content: var(--tw-content)
}
.top-howto__commentslide .commentswiper-button-prev svg,
.top-howto__movieslide .movieswiper-button-prev svg {
  --tw-rotate: 180deg;
  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))
}
@media (any-hover: hover) {
  .top-howto__commentslide .commentswiper-button-prev:hover svg, .top-howto__commentslide .commentswiper-button-next:hover svg,
  .top-howto__movieslide .moviewiper-button-prev:hover svg, .top-howto__movieslide .movieswiper-button-next:hover svg {
    fill: #395077;
    stroke: #fff
  }
}
.comment-item__wrap{
  width: 100%;
  height: 100%; /* 20251119 Add */
  padding: 0.75rem;
  border-radius: 1.15rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.comment-item__wrap.item-red{
  background-color: #f7efec;
}
.top-howto__commentslide .swiper-slide .comment-item__wrap.item-red .comment-item__meta{
  border-color: #9e7b72;
}
.top-howto__commentslide .swiper-slide .comment-item__wrap.item-red .comment-item__meta__dt,
.top-howto__commentslide .swiper-slide .comment-item__wrap.item-red .comment-item__meta__dd{
  color: #9e7b72;
}
.comment-item__wrap.item-blue{
  background-color: #eaf1fa;
}
.top-howto__commentslide .swiper-slide .comment-item__wrap.item-blue .comment-item__meta{
  border-color: #41648c;
}
.top-howto__commentslide .swiper-slide .comment-item__wrap.item-blue .comment-item__meta__dt,
.top-howto__commentslide .swiper-slide .comment-item__wrap.item-blue .comment-item__meta__dd{
  color: #41648c;
}
.top-howto__commentslide .swiper-slide .comment-item__image {
  padding-right: .5625rem;
  width: calc(6.43rem + .5625rem);
  float: left;
  position: relative;
}
.top-howto__commentslide .swiper-slide .comment-item__image .comment-item__image__wrap{
  display: block;
  width: 6.43rem;
  overflow: hidden;
  position: relative;
  z-index: 1;
  border-radius: 50%;
}
.top-howto__commentslide .swiper-slide .comment-item__image::before{
  position: absolute;
  left: 0.32rem;
  top: 0.32rem;
  display: block;
  width: 6.43rem;
  height: 6.43rem;
  content: "";
  border-radius: 50%;
  background-color: #ccc;
}
.top-howto__commentslide .swiper-slide .comment-item__wrap.item-red .comment-item__image::before{
  background-color: #eedbd4;
}
.top-howto__commentslide .swiper-slide .comment-item__wrap.item-blue .comment-item__image::before{
  background-color: #cad9ef;
}
.top-howto__commentslide .swiper-slide .comment-item__image img{
}
.top-howto__commentslide .swiper-slide .comment-item__text {
  margin-top: .25rem;
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .39px
}
.top-howto__commentslide .swiper-slide .comment-item__meta{
  display: flex;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 0.15rem;
  font-size: .8125rem;
  border-top-style: solid;
  border-width: 2px;
}
.top-howto__commentslide .swiper-slide .comment-item__meta__dt,.top-howto__commentslide .swiper-slide .comment-item__meta__dd {
  font-size: 100%;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .39px
}
.top-howto__commentslide .swiper-slide .comment-item__meta__dd .comment-item__meta__star{
  letter-spacing: -0.075em;
}
.top-howto__commentslide .swiper-slide .comment-item__meta__dt::after{
  content: ':';
  margin: auto 0.2em;
}
.top-howto__commentslide .swiper-slide .comment-item__meta__dd + .comment-item__meta__dt{
  margin-left: 0.75em;
}
.top-howto__commentslide_caution{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: .625rem;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: .3px;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.top-howto__movieslide {
  position: relative;
  margin-top: 3.75rem;
  padding-bottom: 3.75rem;
}
.top-howto__movieslide .movie-item__wrap{
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 177.5%;
  background-color: #ccc;
}
.top-howto__movieslide .movie-item__wrap video{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}