.heroCollage {
  margin-left: calc(50% - 50vw);
  position: relative;
  width: 100vw;
}
.heroCollage::before {
  background: #fff;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: -1;
}
.heroCollage__items {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
}
.heroCollage__cell {
  display: block;
  overflow: hidden;
  position: absolute;
  z-index: 1;
}
.heroCollage .photo__image {
  transform-origin: center center;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .heroCollage .photo__image {
    transform: none !important;
    will-change: auto;
  }
}
.heroCollage--pc {
  padding-top: 83.761276891%;
}
.heroCollage--pc::before {
  -webkit-mask-composite: xor;
          mask-composite: xor;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);
          mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-position: 89.014084507% 40.1005025126%, 55.3590010406% 100%, 12.0707596254% 3.6076662909%, 0 0;
          mask-position: 89.014084507% 40.1005025126%, 55.3590010406% 100%, 12.0707596254% 3.6076662909%, 0 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 26.0929909785% 17.5642087821%, 33.3102012491% 22.4523612262%, 33.3102012491% 26.512013256%, 100% 100%;
          mask-size: 26.0929909785% 17.5642087821%, 33.3102012491% 22.4523612262%, 33.3102012491% 26.512013256%, 100% 100%;
}
.heroCollage--pc .heroCollage__photo--1 {
  height: 30.9030654515%;
  left: 19.7085357391%;
  top: 11.5161557581%;
  width: 38.8619014573%;
}
.heroCollage--pc .heroCollage__photo--1 .photo,
.heroCollage--pc .heroCollage__photo--1 .photo__pic {
  display: block;
  height: 100%;
  width: 100%;
}
.heroCollage--pc .heroCollage__photo--1 .photo__image {
  height: 152.5469168901%;
  left: -4.8214285714%;
  max-width: none;
  position: absolute;
  top: -40.7506702413%;
  width: 115%;
}
.heroCollage--pc .heroCollage__photo--2 {
  height: 46.6445733223%;
  left: 0%;
  top: 44.9047224524%;
  width: 58.5704371964%;
}
.heroCollage--pc .heroCollage__photo--2 .photo,
.heroCollage--pc .heroCollage__photo--2 .photo__pic {
  display: block;
  height: 100%;
  width: 100%;
}
.heroCollage--pc .heroCollage__photo--2 .photo__image {
  height: 146.5364120782%;
  left: -15.0473933649%;
  max-width: none;
  position: absolute;
  top: -12.9662522202%;
  width: 115.6398104265%;
}
.heroCollage--pc .heroCollage__photo--3 {
  height: 38.3595691798%;
  left: 60.6523247745%;
  top: 0%;
  width: 24.0111034004%;
}
.heroCollage--pc .heroCollage__photo--3 .photo,
.heroCollage--pc .heroCollage__photo--3 .photo__pic {
  display: block;
  height: 100%;
  width: 100%;
}
.heroCollage--pc .heroCollage__photo--3 .photo__image {
  height: 100%;
  left: -11.2716763006%;
  max-width: none;
  position: absolute;
  top: 0%;
  width: 126.8786127168%;
}
.heroCollage--pc .heroCollage__photo--4 {
  height: 17.9784589892%;
  left: 60.6523247745%;
  top: 44.9047224524%;
  width: 16.7938931298%;
}
.heroCollage--pc .heroCollage__photo--4 .photo,
.heroCollage--pc .heroCollage__photo--4 .photo__pic {
  display: block;
  height: 100%;
  width: 100%;
}
.heroCollage--pc .heroCollage__photo--4 .photo__image {
  height: 143.7788018433%;
  left: 0%;
  max-width: none;
  position: absolute;
  top: -0.9216589862%;
  width: 192.5619834711%;
}
.heroCollage--pc .heroCollage__photo--5 {
  height: 31.3173156587%;
  left: 60.6523247745%;
  top: 64.7058823529%;
  width: 39.3476752255%;
}
.heroCollage--pc .heroCollage__photo--5 .photo,
.heroCollage--pc .heroCollage__photo--5 .photo__pic {
  display: block;
  height: 100%;
  width: 100%;
}
.heroCollage--pc .heroCollage__photo--5 .photo__image {
  height: 101.0582010582%;
  left: -0.8818342152%;
  max-width: none;
  position: absolute;
  top: -1.0582010582%;
  width: 100.8818342152%;
}
.heroCollage--sp {
  padding-top: 247.1794871795%;
}
.heroCollage--sp::before {
  -webkit-mask-composite: xor;
          mask-composite: xor;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);
          mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-position: 43.0555555556% 100%, 100% 0.0525218622%, 78.5365853659% 34.4518348624%, 0 0;
          mask-position: 43.0555555556% 100%, 100% 0.0525218622%, 78.5365853659% 34.4518348624%, 0 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 63.0769230769% 14.3153526971%, 63.2051282051% 17.0469917012%, 47.4358974359% 9.5435684647%, 100% 100%;
          mask-size: 63.0769230769% 14.3153526971%, 63.2051282051% 17.0469917012%, 47.4358974359% 9.5435684647%, 100% 100%;
}
.heroCollage--sp .heroCollage__photo--1 {
  height: 24.1701244813%;
  left: 5.1282051282%;
  top: 3.3350622407%;
  width: 89.7435897436%;
}
.heroCollage--sp .heroCollage__photo--1 .photo,
.heroCollage--sp .heroCollage__photo--1 .photo__pic {
  display: block;
  height: 100%;
  width: 100%;
}
.heroCollage--sp .heroCollage__photo--1 .photo__image {
  height: 152.6180257511%;
  left: -4.8214285714%;
  max-width: none;
  position: absolute;
  top: -40.7725321888%;
  width: 115%;
}
.heroCollage--sp .heroCollage__photo--2 {
  height: 21.265560166%;
  left: 5.1282051282%;
  top: 57.0975103734%;
  width: 78.7994871795%;
}
.heroCollage--sp .heroCollage__photo--2 .photo,
.heroCollage--sp .heroCollage__photo--2 .photo__pic {
  display: block;
  height: 100%;
  width: 100%;
}
.heroCollage--sp .heroCollage__photo--2 .photo__image {
  height: 146.5365853659%;
  left: -15.0472800161%;
  max-width: none;
  position: absolute;
  top: -12.9663414634%;
  width: 115.6456829733%;
}
.heroCollage--sp .heroCollage__photo--3 {
  height: 25.622406639%;
  left: 5.1282051282%;
  top: 29.5425311203%;
  width: 47.4358974359%;
}
.heroCollage--sp .heroCollage__photo--3 .photo,
.heroCollage--sp .heroCollage__photo--3 .photo__pic {
  display: block;
  height: 100%;
  width: 100%;
}
.heroCollage--sp .heroCollage__photo--3 .photo__image {
  height: 100%;
  left: -11.2464864865%;
  max-width: none;
  position: absolute;
  top: -0.1518218623%;
  width: 126.5945945946%;
}
.heroCollage--sp .heroCollage__photo--4 {
  height: 13.4854771784%;
  left: 57.6923076923%;
  top: 35.5591286307%;
  width: 37.1794871795%;
}
.heroCollage--sp .heroCollage__photo--4 .photo,
.heroCollage--sp .heroCollage__photo--4 .photo__pic {
  display: block;
  height: 100%;
  width: 100%;
}
.heroCollage--sp .heroCollage__photo--4 .photo__image {
  height: 147%;
  left: -0.6896551724%;
  max-width: none;
  position: absolute;
  top: -1.2307692308%;
  width: 196.8275862069%;
}
.featureCard {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.featureCard__head {
  align-items: flex-start;
  display: flex;
  gap: 0.8rem;
}
.featureCard__badge {
  align-items: center;
  background: #00aec4;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font-family: "Bodoni Moda", serif;
  font-weight: 400;
  height: 2.4rem;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  width: 2.4rem;
}
@media print, screen and (min-width: 768px) {
  .featureCard__badge {
    font-size: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .featureCard__badge {
    font-size: 1.8rem;
  }
}
.featureCard__ttl {
  color: #231815;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.2;
}
@media print, screen and (min-width: 768px) {
  .featureCard__ttl {
    font-size: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .featureCard__ttl {
    font-size: 1.8rem;
  }
}
.featureCard__line {
  background: rgba(0, 0, 0, 0.2);
  height: 1px;
  margin-top: 1.8rem;
  width: 100%;
}
.featureCard__desc {
  line-height: 1.8;
}
.featureCard__desc:before {
  content: "";
  margin-top: calc((1 - 1.8) * 0.5em);
}
.featureCard__desc:after {
  margin-bottom: calc((1 - 1.8) * 0.5em);
}
.featureCard__desc:before, .featureCard__desc:after {
  content: "";
  display: block;
  height: 0;
  width: 0;
}
.featureCard__desc {
  color: #555;
  letter-spacing: 0.08em;
  margin-top: 1.8rem;
}
@media print, screen and (min-width: 768px) {
  .featureCard__desc {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 768px) {
  .featureCard__desc {
    font-size: 1.3rem;
  }
}
.featureCard__visual {
  margin-top: auto;
  padding-top: 2.4rem;
  position: relative;
}
.featureCard__frame {
  overflow: hidden;
  padding-top: 66.5441176471%;
  position: relative;
}
.featureCard__frame .photo,
.featureCard__frame .photo__pic {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.featureCard__frame .photo__image {
  height: calc(181 / 181 * 100%);
  height: calc(var(--bh, 181) / 181 * 100%);
  left: calc(0 / 272 * 100%);
  left: calc(var(--ox, 0) / 272 * 100%);
  max-width: none;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: calc(0 / 181 * 100%);
  top: calc(var(--oy, 0) / 181 * 100%);
  width: calc(272 / 272 * 100%);
  width: calc(var(--bw, 272) / 272 * 100%);
}
.featureCard__cap {
  bottom: 0.5rem;
  font-family: "YakuHanMP", "Noto Serif JP", serif;
  line-height: 1.8;
  position: absolute;
  right: 0.5rem;
}
.featureCard__note {
  color: #8a8a8a;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  left: 0;
  letter-spacing: 0.12em;
  line-height: 2;
  margin-top: 1rem;
  position: absolute;
  top: 100%;
  width: 100%;
}
.currentPage--design {
  background: transparent;
  font-family: "YakuHanMP", "Noto Serif JP", serif;
}
.design-wrap {
  margin: 0 auto;
}
@media print, screen and (min-width: 768px) {
  .design-wrap {
    width: 120.8rem;
  }
}
@media screen and (max-width: 768px) {
  .design-wrap {
    padding: 0 2.1rem;
  }
}
.design-rule {
  background-attachment: fixed;
  background-image: url("../../common/imgs/bg-movie-poster.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  height: 0.8rem;
  opacity: 0.5;
  width: 100%;
}
@media print, screen and (min-width: 768px) {
  .design-rule {
    width: 120.9rem;
  }
}
.designLead {
  background: #fff;
}
.designLead .design-wrap {
  align-items: center;
  display: flex;
  flex-direction: column;
}
@media print, screen and (min-width: 768px) {
  .designLead {
    padding: 18rem 0 7rem;
  }
}
@media screen and (max-width: 768px) {
  .designLead {
    padding: 8rem 0 3.2rem;
  }
}
.designLead__head {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  width: 100%;
}
.designLead__ttl {
  color: #231815;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.6;
  text-align: center;
}
@media print, screen and (min-width: 768px) {
  .designLead__ttl {
    font-size: 2.6rem;
    white-space: nowrap;
  }
}
@media screen and (max-width: 768px) {
  .designLead__ttl {
    font-size: 2rem;
    line-height: 1.6;
  }
}
.designLead__txt {
  line-height: 1.8;
}
.designLead__txt:before {
  content: "";
  margin-top: calc((1 - 1.8) * 0.5em);
}
.designLead__txt:after {
  margin-bottom: calc((1 - 1.8) * 0.5em);
}
.designLead__txt:before, .designLead__txt:after {
  content: "";
  display: block;
  height: 0;
  width: 0;
}
.designLead__txt {
  color: #555;
  letter-spacing: 0.08em;
  margin-top: 4rem;
  text-align: center;
  width: 100%;
}
@media print, screen and (min-width: 768px) {
  .designLead__txt {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 768px) {
  .designLead__txt {
    font-size: 1.3rem;
    margin-top: 2.4rem;
    text-align: left;
  }
}
.designHero {
  background: #fff;
}
.designHero__frame {
  overflow: hidden;
  position: relative;
}
@media print, screen and (min-width: 768px) {
  .designHero__frame {
    padding-top: 109.0277777778%;
  }
}
@media screen and (max-width: 768px) {
  .designHero__frame {
    padding-top: 109.0276923077%;
  }
}
.designHero__frame .photo {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
}
.designHero__frame .photo__pic {
  display: block;
  height: 100%;
  width: 100%;
}
.designHero__frame .photo__image {
  max-width: none;
  position: absolute;
}
@media print, screen and (min-width: 768px) {
  .designHero__frame .photo__image {
    height: 100.5732484076%;
    left: -12.5347222222%;
    top: 0;
    width: 117.3611111111%;
  }
}
@media screen and (max-width: 768px) {
  .designHero__frame .photo__image {
    height: 100.5733664465%;
    left: -12.5346153846%;
    top: 0;
    width: 117.361025641%;
  }
}
.designHero__frame .photo__capIn {
  font-family: "YakuHanMP", "Noto Serif JP", serif;
  font-size: 1rem;
  letter-spacing: 0.08em;
}
.designCollage {
  border-bottom: solid #fff;
  border-top: solid #fff;
}
@media print, screen and (min-width: 768px) {
  .designCollage {
    border-width: 16rem 0;
  }
}
@media screen and (max-width: 768px) {
  .designCollage {
    border-width: 6rem 0;
  }
}
.designPlan {
  background: #fff;
}
.designPlan__head {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  width: 100%;
}
.designPlan__ttl {
  color: #231815;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.6;
  text-align: center;
}
@media print, screen and (min-width: 768px) {
  .designPlan__ttl {
    font-size: 2.6rem;
    white-space: nowrap;
  }
}
@media screen and (max-width: 768px) {
  .designPlan__ttl {
    font-size: 2rem;
    line-height: 1.6;
  }
}
.designPlan__fig {
  margin: 0 auto;
}
@media print, screen and (min-width: 768px) {
  .designPlan__fig {
    margin-top: 7rem;
    width: 80rem;
  }
}
@media screen and (max-width: 768px) {
  .designPlan__fig {
    margin-top: 4rem;
  }
}
@media screen and (max-width: 768px) {
  .designPlan__fig .swipeFigure {
    height: 50rem;
  }
}
@media screen and (max-width: 768px) {
  .designPlan__fig .photo {
    height: 100%;
    width: auto;
  }
}
@media screen and (max-width: 768px) {
  .designPlan__fig .photo__pic {
    display: block;
    height: 100%;
  }
}
@media screen and (max-width: 768px) {
  .designPlan__fig .photo__image {
    height: 100%;
    max-width: none;
    -o-object-fit: contain;
       object-fit: contain;
    width: auto;
  }
}
.designPlan__cap {
  line-height: 2;
}
.designPlan__cap:before {
  content: "";
  margin-top: calc((1 - 2) * 0.5em);
}
.designPlan__cap:after {
  margin-bottom: calc((1 - 2) * 0.5em);
}
.designPlan__cap:before, .designPlan__cap:after {
  content: "";
  display: block;
  height: 0;
  width: 0;
}
.designPlan__cap {
  color: #8a8a8a;
  font-family: "YakuHanMP", "Noto Serif JP", serif;
  font-size: 1rem;
  letter-spacing: 0.12em;
  margin-top: 1rem;
  text-align: right;
}
@media print, screen and (min-width: 768px) {
  .designPlan__grid {
    margin-top: 6rem;
  }
}
@media screen and (max-width: 768px) {
  .designPlan__grid {
    margin-top: 4rem;
  }
}
@media print, screen and (min-width: 768px) {
  .designPlan--sub {
    padding-bottom: 3.7rem;
    padding-top: 15rem;
  }
}
@media screen and (max-width: 768px) {
  .designPlan--sub {
    padding-bottom: 3.7rem;
    padding-top: 6rem;
  }
}
@media print, screen and (min-width: 768px) {
  .designPlan--sub .designPlan__grid {
    margin-top: 12.1rem;
  }
}
.usableList--feature {
  display: grid;
  grid-gap: 4rem;
  gap: 4rem;
}
@media print, screen and (min-width: 768px) {
  .usableList--feature {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .usableList--feature {
    grid-template-columns: 1fr;
  }
}
.usableList--feature .usableList__item {
  display: flex;
}
/*# sourceMappingURL=style.css.map */