@charset "UTF-8";

:root {
  --color-white: #fff;
  --color-accent: #f0616e;
  --color-txt: #222;
  --color-black: #211717;
  --color-black02: #333;
  --color-brown: #442627;
  --color-red: #f0616e;
  --color-gray: #f2f2f2;
  --color-gray02: #707070;
  --color-pink: #d19f9f
}

.ly-mv {
  padding: 97px 40px 80px;
  background: url("https://theemo.itembox.cloud/item/feature/lp01/img/mv-bg.webp") top center/cover no-repeat
}

.bl-mv-ttl {
  margin-bottom: 32px;
  font-size: 60px;
  font-weight: 700;
  line-height: calc(91 / 60);
  color: var(--color-white)
}

.bl-mv-logo {
  display: flex;
  width: 306px;
  margin-bottom: 375px
}

.bl-mv-subttl {
  display: grid;
  gap: 16px;
  place-content: center
}

.bl-mv-subttl-wrapper {
  position: relative;
  padding: 18px 0;
  margin: 0 auto
}

.bl-mv-subttl-wrapper:before,
.bl-mv-subttl-wrapper:after {
  position: absolute;
  left: 50%;
  width: 338px;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, #fff0, #fff 18% 83%, #fff0);
  transform: translate(-50%)
}

.bl-mv-subttl-wrapper:before {
  top: 0
}

.bl-mv-subttl-wrapper:after {
  bottom: 0
}

.bl-mv-subttl>img {
  margin: 0 auto
}

.bl-mv-subttl>img:first-of-type {
  width: 288px
}

.bl-mv-subttl>img:nth-of-type(2) {
  width: 390px
}

.bl-mv-btm {
  padding: 40px 0;
  font-size: 30px;
  line-height: calc(95 / 60);
  color: var(--color-white);
  text-align: center;
  background: var(--color-black02)
}

.ly-about {
  padding: 80px 0
}

.bl-about-ttl {
  margin-bottom: 40px
}

.bl-about-movie-wrapper {
  display: flex;
  width: 610px;
  margin: 0 auto
}

.bl-about-movie-wrapper>video {
  width: 100%;
  height: 1084px;
  object-fit: cover
}

.ly-cta {
  padding: 80px 0 82px;
  background: var(--color-black)
}

.ly-cta.--other .bl-cta-product .bl-product-figure,
.ly-cta.--purchase .bl-cta-ttl {
  margin-bottom: 56px
}

.bl-cta-hgroup {
  margin-bottom: 56px;
  text-align: center
}

.bl-cta-hgroup .bl-hgroup-txt {
  display: inline-grid;
  place-content: center;
  padding: 8px 16px 10px;
  margin-bottom: 40px;
  line-height: calc(40 / 28);
  color: var(--color-brown);
  background: var(--color-white)
}

.bl-cta-hgroup .bl-hgroup-ttl {
  font-size: 40px
}

.bl-cta-product .bl-product-ttl {
  padding: 14px 0 20px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.53125;
  color: var(--color-white);
  text-align: center;
  background: linear-gradient(180deg, #442627, #0e0808);
  border: 1px solid var(--color-white);
  border-bottom: none
}

.bl-cta-product .bl-product-ttl-deco {
  font-size: 36px;
  line-height: calc(49 / 36)
}

.bl-cta-product .bl-product-figure {
  margin-bottom: 40px
}

.bl-cta-product .bl-product-figure>img {
  height: 388px;
  object-fit: cover
}

.bl-cta-product .bl-product-btn-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 15px;
  margin-bottom: 56px
}

.bl-cta-product .bl-product-btn>img {
  height: 114px;
  object-fit: cover
}

.bl-cta-product .bl-product-price {
  margin-bottom: 56px;
  font-size: 56px;
  line-height: calc(80 / 56);
  color: var(--color-white);
  text-align: center
}

.bl-cta-product .bl-product-price-unit {
  font-size: 40px
}

.bl-cta-btn-wrapper {
  width: 500px;
  padding: 2px;
  margin: 0 auto;
  background: linear-gradient(100deg, #917209, #fbdb6f 54%, #85680b)
}

.ly-scene {
  padding: 80px 0;
  background: var(--color-brown)
}

.bl-scene-hgroup {
  margin-bottom: 24px;
  text-align: center
}

.bl-scene-hgroup .bl-hgroup-txt {
  display: inline-grid;
  place-content: center;
  padding: 8px 16px 10px;
  margin-bottom: 40px;
  line-height: calc(40 / 28);
  color: var(--color-brown);
  background: var(--color-white)
}

.bl-scene-hgroup .bl-hgroup-ttl {
  font-size: 40px
}

.bl-scene-intro {
  margin-bottom: 40px;
  line-height: calc(40 / 28);
  color: var(--color-white);
  text-align: center
}

.bl-scene-list {
  display: grid;
  gap: 80px
}

.bl-scene-item .bl-item-slider,
.bl-scene-item .bl-item-img,
.bl-scene-item .bl-item-img img,
.bl-scene-item .bl-item-handle {
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.bl-scene-item .bl-item-ttl {
  padding: 7px 0 9px;
  font-size: 36px;
  font-weight: 700;
  line-height: calc(52 / 36);
  color: var(--color-black);
  text-align: center;
  background: var(--color-white)
}

.bl-scene-item .bl-item-txt {
  line-height: calc(124 / 84);
  color: var(--color-white)
}

.bl-scene-item .bl-item-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 690/390;
  margin: 0 auto 8px;
  overflow: hidden
}

.bl-scene-item .bl-item-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden
}

.bl-scene-item .bl-item-img-wrapper {
  position: relative;
  width: 100%;
  height: 100%
}

.bl-scene-item .bl-item-img.--before {
  z-index: 2;
  clip-path: inset(0 50% 0 0)
}

.bl-scene-item .bl-item-img>img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none
}

.bl-scene-item .bl-item-handle {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 10;
  width: 1px;
  height: 100%;
  cursor: pointer;
  background: var(--color-white);
  transform: translate(-50%)
}

.bl-scene-item .bl-item-handle:before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 11;
  width: 56px;
  height: 56px;
  content: "";
  background: url("https://theemo.itembox.cloud/item/feature/lp01/img/scene-handle-ico.svg") top center/contain no-repeat;
  border-radius: 50%;
  transform: translate(-50%, -50%)
}

.bl-scene-item .bl-item-subtxt {
  font-size: 22px;
  font-weight: 700;
  line-height: calc(32 / 22);
  color: var(--color-white);
  text-align: center
}

.bl-scene-item .bl-item-subtxt-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 32px
}

.ly-connection {
  padding: 80px 0
}

.bl-connection-ttl {
  margin-bottom: 40px
}

.bl-connection-att {
  margin-bottom: 8px
}

.bl-connection-list {
  display: flex;
  gap: 32px;
  width: max-content;
  margin: 0 30px
}

.bl-connection-list-wrapper {
  width: 100%;
  overflow-x: scroll
}

.bl-connection-item {
  width: 320px
}

.bl-connection-item .bl-item-figure {
  margin-bottom: 9px
}

.bl-connection-item .bl-item-hgroup-txt {
  margin-bottom: 8px;
  font-weight: 400
}

.bl-connection-item .bl-item-hgroup-ttl {
  margin-bottom: 8px;
  font-size: 28px;
  font-weight: 700;
  line-height: calc(40 / 28)
}

.bl-connection-item .bl-item-btn {
  display: grid;
  place-content: center;
  width: 284px;
  padding: 10px 0 12px;
  margin-bottom: 16px;
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-black)
}

.bl-connection-item .bl-item-link {
  display: flex;
  gap: .25em;
  font-size: 20px;
  font-weight: 700;
  line-height: calc(29 / 20);
  color: var(--color-red)
}

.bl-connection-item .bl-item-link-wrapper {
  display: grid;
  place-content: center;
  margin-top: 24px
}

.bl-connection-item .bl-item-link-wrapper .bl-item-link {
  margin: 0 auto
}

.bl-connection-item .bl-item-link:after {
  content: "\25b6"
}

.ly-reason {
  padding: 80px 0
}

.bl-reason-ttl {
  margin-bottom: 40px
}

.bl-reason-list {
  display: grid;
  gap: 80px
}

.bl-reason-item .bl-item-ttl {
  margin-bottom: 56px;
  font-size: 36px;
  line-height: calc(51 / 36);
  color: var(--color-brown);
  text-align: center
}

.bl-reason-item .bl-item-figure,
.bl-reason-item .bl-item-img-outer {
  margin-bottom: 24px
}

.bl-reason-item .bl-item-img-wrapper {
  position: relative
}

.bl-reason-item .bl-item-img-wrapper img {
  position: absolute
}

.bl-reason-item:first-of-type .bl-item-img-outer {
  margin-bottom: 56px
}

.bl-reason-item:first-of-type .bl-item-img-wrapper {
  height: 583px
}

.bl-reason-item:first-of-type .bl-item-img-wrapper img:first-of-type {
  top: 0;
  left: -30px;
  width: 358px;
  height: 286px
}

.bl-reason-item:first-of-type .bl-item-img-wrapper img:nth-of-type(2) {
  top: 116px;
  right: -30px;
  z-index: 2;
  width: 360px;
  height: 324px
}

.bl-reason-item:first-of-type .bl-item-img-wrapper img:nth-of-type(3) {
  top: 365px;
  left: 0;
  width: 424px;
  height: 218px
}

.bl-reason-item:nth-of-type(3) .bl-item-ttl {
  margin-bottom: 32px
}

.bl-reason-item:nth-of-type(3) .bl-item-img-wrapper {
  height: 630px
}

.bl-reason-item:nth-of-type(3) .bl-item-img-wrapper img:first-of-type {
  top: 0;
  right: -30px;
  width: 550px;
  height: 310px
}

.bl-reason-item:nth-of-type(3) .bl-item-img-wrapper img:nth-of-type(2) {
  top: 342px;
  left: 0;
  width: 480px;
  height: 288px
}

.ly-feature {
  padding: 16px 0 80px;
  background: var(--color-black)
}

.bl-feature-ttl {
  margin-bottom: 40px
}

.bl-feature-list {
  display: grid;
  gap: 80px
}

.bl-feature-item .bl-item-figure,
.bl-feature-item .bl-item-img-outer {
  margin-bottom: 32px
}

.bl-feature-item .bl-item-img-wrapper {
  position: relative
}

.bl-feature-item .bl-item-img-wrapper img {
  position: absolute
}

.bl-feature-item .bl-item-ttl {
  position: relative;
  padding-bottom: 26px;
  margin-bottom: 16px;
  font-size: 34px;
  line-height: calc(49 / 34);
  color: var(--color-white);
  text-align: center
}

.bl-feature-item .bl-item-ttl:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 338px;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, #fff0, #fff 18% 83%, #fff0);
  transform: translate(-50%)
}

.bl-feature-item .bl-item-txt {
  color: var(--color-white)
}

.bl-feature-item:nth-of-type(3) .bl-item-img-wrapper {
  height: 686px
}

.bl-feature-item:nth-of-type(3) .bl-item-img-wrapper img:first-of-type {
  top: 0;
  left: 0;
  width: 538px;
  height: 250px
}

.bl-feature-item:nth-of-type(3) .bl-item-img-wrapper img:nth-of-type(2) {
  top: 288px;
  right: 0;
  width: 258px;
  height: 226px
}

.bl-feature-item:nth-of-type(3) .bl-item-img-wrapper img:nth-of-type(3) {
  top: 358px;
  left: 40px;
  width: 424px;
  height: 328px
}

.ly-voice {
  padding: 80px 0 56px
}

.bl-voice-ttl {
  margin-bottom: 56px
}

.bl-voice-list {
  display: grid;
  gap: 80px
}

.bl-voice-item {
  display: grid;
  grid-template: "figure figure""icon txt";
  grid-template-columns: 124px 1fr;
  gap: 24px 16px
}

.bl-voice-item .bl-item-figure {
  grid-area: figure
}

.bl-voice-item .bl-item-icon {
  grid-area: icon
}

.bl-voice-item .bl-item-txt {
  grid-area: txt
}

.ly-change {
  padding: 80px 0
}

.bl-change-ttl {
  margin-bottom: 56px
}

.bl-change-list {
  display: grid;
  gap: 80px
}

.bl-change-item .bl-item-ttl {
  margin-bottom: 32px;
  font-size: 36px;
  line-height: calc(51 / 36);
  text-align: center;
  color: var(--color-brown)
}

.bl-change-item .bl-item-figure,
.bl-change-item .bl-item-img-outer {
  margin-bottom: 32px
}

.bl-change-item .bl-item-img-wrapper {
  position: relative
}

.bl-change-item .bl-item-img-wrapper img {
  position: absolute
}

.bl-change-item .bl-item-txt+.bl-item-txt {
  margin-top: 1.5em
}

.bl-change-item:first-of-type .bl-item-img-wrapper {
  height: 406px
}

.bl-change-item:first-of-type .bl-item-img-wrapper img:first-of-type {
  top: 0;
  left: -30px;
  width: 376px;
  height: 272px
}

.bl-change-item:first-of-type .bl-item-img-wrapper img:nth-of-type(2) {
  top: 134px;
  right: 0;
  width: 444px;
  height: 272px
}

.ly-faq {
  padding: 80px 0;
  background: var(--color-black)
}

.bl-faq-ttl {
  margin-bottom: 56px
}

.bl-faq-details-wrapper {
  display: grid;
  gap: 56px;
  max-width: 690px;
  margin: 0 auto
}

.bl-faq-details[open] .bl-details-summary:after {
  border-color: transparent transparent var(--color-black) transparent;
  border-width: 0 9px 16px
}

.bl-faq-details .bl-details-summary {
  position: relative;
  padding: 9px 88px 8px 32px;
  color: var(--color-white);
  border: 1px solid
}

.bl-faq-details .bl-details-summary:before {
  position: absolute;
  top: 50%;
  right: 24px;
  width: 46px;
  height: 46px;
  content: "";
  background: var(--color-white);
  border-radius: 5px;
  transform: translateY(-50%)
}

.bl-faq-details .bl-details-summary:after {
  position: absolute;
  top: 50%;
  right: 38px;
  width: 0;
  height: 0;
  content: "";
  border-color: var(--color-black) transparent transparent transparent;
  border-style: solid;
  border-width: 16px 9px 0;
  transform: translateY(-50%)
}

.bl-faq-details .bl-details-summary-inner {
  position: relative;
  display: block;
  padding-left: 62px
}

.bl-faq-details .bl-details-summary-inner:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 46px;
  height: 46px;
  content: "";
  background: var(--color-pink);
  border-radius: 50%;
  transform: translateY(-50%)
}

.bl-faq-details .bl-details-summary-inner:after {
  position: absolute;
  top: 50%;
  left: 12px;
  font-family: noto-serif-jp, \6e38\660e\671d\4f53, Yu Mincho, YuMincho, \30d2\30e9\30ae\30ce\660e\671d Pro, Hiragino Mincho Pro, MS P\660e\671d, MS PMincho, serif;
  font-weight: 700;
  line-height: calc(40 / 28);
  color: var(--color-black);
  content: "Q";
  transform: translateY(calc(-50% - 5px))
}

.bl-faq-details .bl-details-content {
  color: var(--color-white)
}

.bl-faq-details .bl-details-content-inner {
  margin-top: 24px
}

.ly-detail {
  padding: 80px 0
}

.bl-detail-ttl {
  margin-bottom: 40px
}

.bl-detail-figure {
  position: relative;
  margin-bottom: 40px
}

.bl-detail-figure:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  content: "";
  border: 1px solid var(--color-black);
  transform: translate(-50%, -50%)
}

.bl-detail-figure>img {
  height: 388px;
  object-fit: cover
}

.bl-detail-btn {
  position: relative
}

.bl-detail-btn-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 15px;
  margin-bottom: 40px
}

.bl-detail-btn:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  content: "";
  border: 1px solid var(--color-gray02);
  transform: translate(-50%, -50%)
}

.bl-detail-btn>img {
  height: 114px;
  object-fit: cover
}

.bl-detail-subttl {
  margin-bottom: 24px;
  font-size: 36px;
  line-height: calc(52 / 36)
}

.bl-detail-price {
  padding-bottom: 25px;
  margin-bottom: 16px;
  font-size: 34px;
  font-weight: 700;
  line-height: calc(49 / 34);
  border-bottom: 1px solid var(--color-brown)
}

.bl-detail-price-unit {
  font-size: 28px;
  line-height: 1.75
}

.bl-detail-def {
  display: grid;
  gap: 16px
}

.bl-detail-dttl {
  margin-bottom: 8px;
  font-weight: 700
}

.bl-detail-ditem+.bl-detail-ditem {
  margin-top: 4px
}


.fs-preview-header,
.fs-l-main {
  display: none;
}