@charset "UTF-8";
@-moz-document url-prefix() {}html {
  font-size: 10px;
}

body {
  overflow-x: hidden;
}

.l-container {
  width: 100%;
}
.l-container:after{
  content: none;
}

.l-footer {
  padding: 0;
}

.pc-footer {
  margin: 0;
}

#feature{
  background: #fcf2f4;
  box-sizing: border-box;
  color: #1f1f1f;
  font-family: "lato", "ryo-gothic-plusn", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-feature-settings: "palt";
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}

#feature * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#feature a {
  width: 100%;
  height: auto;
  display: block;
  color: #000;
  transition: 0.2s;
}
#feature a:hover {
  text-decoration: none;
}
#feature a:hover{
  cursor: pointer;
  opacity: .7;
  transition: 0.3s;
  text-decoration: none;
}

#feature .default-img {
  display: block;
  height: auto;
  width: 100%;
}

#feature #sp-only{
  display: none !important;
}

/* fade */

.feature .js-scale-m{
  opacity: 0;
  transform: scale(1.2);
  transition: all 2s ease;
}
.feature .js-scale-m.is-active{
  opacity: 1;
  transform: scale(1);
}
.feature .js-scale-z{
  opacity: 0;
  transform: scale(0.8);
  transition: all 2s ease;
}
.feature .js-scale-z.is-active{
  opacity: 1;
  transform: scale(1);
}

.feature .target[data-animation="fadeIn"]{
  opacity: 0;
  transition: opacity 1.8s ease;
}
.feature .target[data-animation="fadeIn"][data-is-active="true"]{
  opacity: 1;
}

.feature .target[data-animation="mask"] {
  animation: mask 1s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
  opacity: 0;
  -webkit-mask-image: linear-gradient(0deg, transparent, transparent 39.6666666667%,rgba(0, 0, 0, 0.02) 43.3333333333%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.18) 46.6666666667%, rgba(0, 0, 0, 0.32) 48.3333333333%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.68) 51.6666666667%, rgba(0, 0, 0, 0.82) 53.3333333333%, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.98) 56.6666666667%, #000 58.3333333333%, #000);
  mask-image: linear-gradient(0deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, 0.02) 43.3333333333%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.18) 46.6666666667%, rgba(0, 0, 0, 0.32) 48.3333333333%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.68) 51.6666666667%, rgba(0, 0, 0, 0.82) 53.3333333333%, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.98) 56.6666666667%, #000 58.3333333333%, #000);
  -webkit-mask-size: 100% max(300%, 100vh);
  mask-size: 100% max(300%, 100vh);
  -webkit-mask-position: center 100%;
  mask-position: center 100%;
  -webkit-mask-repeat: none;
  mask-repeat: none;
  transform: translateZ(0);
  transition: -webkit-mask-position 1.4s linear;
  transition: mask-position 1.4s linear;
  transition: mask-position 1.4s linear, -webkit-mask-position 1.4s linear;
}
.feature .target[data-animation="mask"][data-is-active="true"]{
  -webkit-mask-position: center 0;
  mask-position: center 0;
}

@keyframes mask{
  0% {opacity: 0; filter: blur(4px);}
  100% {opacity: 1; filter: blur(0);}
}

/* hero */

#feature .hero{
  position: relative;
}

#feature .hero .hero__mv{
  margin: 0 auto;
  position: relative;
  width: 100%;
  z-index: 2;
}
#feature .hero .hero__mv-img{
  position: relative;
  width: 100%;
  z-index: 1;
}
#feature .hero .hero__mv-ttl{
  top: 4.2vw;
  right: 24.3vw;
  width: 21.43vw;
  position: absolute;
  z-index: 2;
}

#feature .hero .hero__read{
  background: url("../img/bg01.png") center top / contain no-repeat;
  margin: 100px auto 0;
  padding: 70px 0 0;
  position: relative;
  height: 336px;
  width: 820px;
}

#feature .hero .hero__ttl{
  margin: 0 auto;
  width: 252px;
}

#feature .hero .hero__text{
  font-size: 16px;
  letter-spacing: 0.125em;
  line-height: 2.4;
  margin: 24px auto 0;
  text-align: center;
}

#feature .hero .hero__more{
  border-bottom: 1px solid #666;
  cursor: pointer;
  font-size: 18px;
  letter-spacing: 0.1em;
  line-height: 1;
  margin: 36px auto 0;
  padding: 0 0 5px;
  text-align: center;
  white-space: nowrap;
  width: 116px;
}

#feature .hero .hero__date{
  font-size: 15px;
  letter-spacing: 0.125em;
  line-height: 1;
  margin: 61px auto 0;
  position: relative;
  width: fit-content;
}
#feature .hero .hero__date p{
  margin: auto;
  width: fit-content;
}
#feature .hero .hero__date p:nth-of-type(1){
  margin: 0 0 6px;
}
#feature .hero .hero__date p span{
  color: #d399a6;
  margin: 0 10px 0 0;
}

#feature .hero .deco01{
  background: url("../img/deco01.png") center top / contain no-repeat;
  top: 50vw;
  right: 0;
  position: absolute;
  pointer-events: none;
  height: 404px;
  width: 260px;
  z-index: 1;
}
#feature .hero .deco02{
  background: url("../img/deco02.png") center top / contain no-repeat;
  top: 82.86vw;
  left: 0;
  position: absolute;
  pointer-events: none;
  height: 360px;
  width: 228px;
  z-index: 1;
}

#feature .hero .blur01{
  background: #ecd3d8;
  border-radius: 600px;
  display: block;
  filter: blur(250px);
  top: 37.14vw;
  left: -300px;
  position: absolute;
  pointer-events: none;
  height: 600px;
  width: 600px;
  z-index: 1;
}
#feature .hero .blur02{
  background: #f1dcd1;
  border-radius: 600px;
  display: block;
  filter: blur(250px);
  top: 94vw;
  right: -300px;
  position: absolute;
  pointer-events: none;
  height: 600px;
  width: 600px;
  z-index: 1;
}

#feature .hero .hero__modal{
  align-items: center;
  display: flex;
  background: #ffffff4D;
  justify-content: center;
  margin: auto;
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  position: fixed;
  pointer-events: none;
  transition: opacity .5s ease;
  height: 100vh;
  width: 100vw;
  z-index: 50;
}
#feature .hero .hero__modal.fixed{
  opacity: 1;
  pointer-events: all;
}

#feature .hero .hero__modal-area{
  background: #fff;
  margin: auto;
  top: 3%;
  position: relative;
  height: 484px;
  width: 720px;
}

#feature .hero .hero__modal-ttl{
  margin: 60px auto 0;
  width: 252px;
}
#feature .hero .hero__modal p{
  font-size: 13px;
  letter-spacing: 0.125em;
  line-height: 2.4;
  margin: 30px auto 0;
  text-align: center;
}
#feature .hero .hero__modal-area p:nth-of-type(2){
  margin: 25px auto 0;
}

#feature .hero .hero__modal-close{
  background: url("../img/close.svg") center top / contain no-repeat;
  top: 20px;
  right: 20px;
  position: absolute;
  cursor: pointer;
  height: 30px;
  width: 30px;
}

/* nav */

#feature .nav{
  align-items: center;
  background: #fcf2f4;
  border-top: 1px solid #d399a6;
  display: flex;
  margin: auto;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  transform: translateY(100%);
  transition: all .5s linear;
  height: 70px;
  width: 100%;
  z-index: 40;
}
#feature .nav.on{
  transform: translateY(0);
}

#feature .nav__list{
  display: flex;
  margin: 0 auto 0;
  height: 100%;
  width: fit-content;
}

#feature .nav__list .nav__list-tab{
  align-items: center;
  display: flex;
  font-family: "lato", sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 0 34px;
  position: relative;
  width: fit-content;
  white-space: nowrap;
}
#feature .nav__list .nav__list-tab:not(:last-of-type){
  border-right: 1px solid #d399a6;
}
#feature .nav__list .nav__list-tab:nth-of-type(3){
  padding: 0 36px;
}
#feature .nav__list .nav__list-tab span{
  margin: 0 0 0 16px;
}

#feature .nav__list .nav__list-tab:nth-of-type(1)::before{
  background: url("../img/icon01.png") center top / contain no-repeat;
  content: "";
  height: 50px;
  width: 40px;
}
#feature .nav__list .nav__list-tab:nth-of-type(2)::before{
  background: url("../img/icon02.png") center top / contain no-repeat;
  content: "";
  height: 50px;
  width: 34px;
}

/* 共通 */

#feature .main{
  margin: 102px auto 0;
  position: relative;
  z-index: 2;
}

#feature .sec{
  position: relative;
  width: 100%;
}

#feature .sec .inner{
  margin: 0 auto;
  position: relative;
  width: 100%;
}

#feature .sec .sec__flex{
  display: flex;
}

#feature .sec .sec__image{
  position: relative;
  width: 100%;
}
#feature .sec .sec__image-img{
  width: 100%;
}

#feature .sec .sec__detail{
  margin: 62px auto 0;
}
#feature .sec .sec__name{
  font-size: 19px;
  letter-spacing: 0.125em;
  line-height: 1;
  margin: 0 auto;
  text-align: center;
  width: fit-content;
}
#feature .sec .sec__price{
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1;
  margin: 22px auto 0;
  text-align: center;
  width: fit-content;
}

#feature .sec .sec__text{
  font-size: 15px;
  letter-spacing: 0.125em;
  line-height: 2.4;
}

#feature .sec .sec__btn{
  background: #d399a6;
  margin: 23px auto 0;
  position: relative;
  height: 46px;
  width: 260px;
}
#feature .sec .sec__btn a{
  align-items: center;
  color: #fff;
  display: flex;
  font-family: "lato", sans-serif;
  font-size: 16px;
  justify-content: center;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 0 9px 0 0;
  height: 100%;
  width: 100%;
}

#feature .sec .sec__btn span{
  animation: 2s line linear infinite;
  border-radius: 30px;
  background: #fff;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 228px;
  position: absolute;
  height: 1px;
  width: 21px;
}
#feature .sec .sec__btn::after{
  background: url(../img/arrow.svg) center center / contain no-repeat;
  content: "";
  display: block;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 11px;
  position: absolute;
  height: 9px;
  width: 6px;
}

@keyframes line{
  0%{clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);}
  35%{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
  50%{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
  85%{clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);}
  100%{clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);}
}

#feature .sec .sec__deco{
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

#feature .sec .sec__blur{
  border-radius: 600px;
  display: block;
  filter: blur(250px);
  position: absolute;
  pointer-events: none;
  height: 600px;
  width: 600px;
  z-index: 1;
}

/* sec01 */

#feature .sec01{
  width: 100%;
}

#feature .sec01 .flex01{
  justify-content: space-between;
  margin: 100px auto 0;
  position: relative;
  width: 1060px;
  z-index: 2;
}
#feature .sec01 .flex01 .sec__item,
#feature .sec01 .flex01 .sec__img{
  width: 180px;
}

#feature .sec01 .sec__item p{
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 1;
  margin: 24px auto 0;
  text-align: center;
  width: fit-content;
}

#feature .sec01 .flex01 .sec__item:nth-of-type(1) p{
  letter-spacing: 0.125em;
  margin: 25px auto 0;
}

#feature .sec01 .sec__text{
  margin: auto;
  top: 0;
  bottom: 0;
  left: 16.43vw;
  position: absolute;
  height: fit-content;
}

#feature .sec01 .deco01{
  background: url("../img/deco03.png") center top / contain no-repeat;
  top: 45.71vw;
  right: 0;
  height: 371px;
  width: 231px;
}

/* sec02 */

#feature .sec02{
  margin: 140px auto 0;
  width: 100%;
}

#feature .sec02 .sec__image{
  z-index: 2;
}

#feature .sec02 .flex01{
  align-items: center;
  flex-direction: row-reverse;
  width: 100%;
}

#feature .sec02 .sec__text{
  margin: auto;
  top: 0;
  bottom: 0;
  right: 18.64vw;
  position: absolute;
  height: fit-content;
}

#feature .sec02 .sec__slide{
  margin: 80px auto 0;
  width: 200px;
}

#feature .sec02 .sec__slide .slick-prev,
#feature .sec02 .sec__slide .slick-next{
  top: 130px;
  height: 40.5px;
  width: 12.85px;
}
#feature .sec02 .sec__slide .slick-next{
  right: -42px;
}
#feature .sec02 .sec__slide .slick-prev{
  left: -42px;
}

#feature .sec02 .sec__slide .slick-next::before{
  background: url("../img/arrow-next01.svg") center top / contain no-repeat;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
}
#feature .sec02 .sec__slide .slick-prev::before{
  background: url("../img/arrow-prev01.svg") center top / contain no-repeat;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
}

#feature .sec02 .sec__slideList{
  margin: 43px auto 0;
  width: 470px;
}

#feature .sec02 .sec__slideList .slick-track{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  justify-content: space-between;
  width: 470px !important;
}
#feature .sec02 .sec__slideList .slick-track::before,
#feature .sec02 .sec__slideList .slick-track::after{
  content: none;
}

#feature .sec02 .sec__slideList .sec__slideList-img{
  cursor: pointer;
  width: 110px !important;
}
#feature .sec02 .sec__slideList .sec__slideList-img.slick-current{
  background: #d399a633;
}

#feature .sec02 .sec__slideText{
  margin: 19px auto 0;
  text-align: center;
  position: relative;
  pointer-events: none;
  height: 14px;
  width: 300px;
}
#feature .sec02 .sec__slideText a{
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 1;
  margin: auto;
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  position: absolute;
  pointer-events: none;
  transition: opacity .5s ease;
}
#feature .sec02 .sec__slideText a.on{
  opacity: 1;
  pointer-events: all;
}

#feature .sec02 .sec__detail{
  margin: 40px auto 0;
}

#feature .sec02 .deco01{
  background: url("../img/deco04.png") center top / contain no-repeat;
  top: -18.93vw;
  left: 0;
  height: 420px;
  width: 364px;
}
#feature .sec02 .deco02{
  background: url("../img/deco05.png") center top / contain no-repeat;
  top: 48.7vw;
  right: 0;
  height: 416px;
  width: 351px;
}

#feature .sec02 .blur01{
  background: #f1dcd1;
  top: -240px;
  right: -105px;
}

/* sec03 */

#feature .sec03{
  margin: 116px auto 0;
  width: 100%;
}

#feature .sec03 .sec__loop{
  display: flex;
  gap: 0 23px;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 2;
}
#feature .sec03 .sec__loop-inner{
  color: #f0dbe0;
  display: flex;
  font-size: 80px;
  gap: 0 23px;
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
}

#feature .sec03 .sec__loop-inner{
  flex-shrink: 0;
  &:nth-child(odd) {
    animation: MoveLeft01 120s -60s infinite linear;
  }
  &:nth-child(even) {
    animation: MoveLeft02 120s infinite linear;
  }
}

@keyframes MoveLeft01 {
  from {transform: translateX(100%);}
  to {transform: translateX(-100%);}
}
@keyframes MoveLeft02 {
  from {transform: translateX(0%);}
  to {transform: translateX(-200%);}
}

#feature .sec03 .sec__box{
  padding: 0 0 1358.5px;
  transition: all .8s ease;
}
#feature .sec03 .sec__box[data-box="01"].on{
  padding: 0 0 1669.3px;
}
#feature .sec03 .sec__box[data-box="02"].on{
  padding: 0 0 1731.7px;
}
#feature .sec03 .sec__box[data-box="03"].on,
#feature .sec03 .sec__box[data-box="04"].on{
  padding: 0 0 1700.5px;
}

#feature .sec03 .sec__tab{
  display: flex;
  margin: 54px auto 0;
  height: 158px;
  width: 560px;
}

#feature .sec03 .sec__tab-btn{
  cursor: pointer;
  width: 140px;
}
#feature .sec03 .sec__tab-btn figure{
  margin: 21px auto 0;
  width: 100px;
}
#feature .sec03 .sec__tab-btn p{
  font-size: 18px;
  letter-spacing: 0.1em;
  line-height: 1;
  margin: 21px auto 0;
  text-align: center;
}
#feature .sec03 .sec__tab-btn.on{
  background: #d399a633;
}

#feature .sec03 .sec__look{
  margin: 40px auto 0;
  opacity: 0;
  left: 0;
  right: 0;
  position: absolute;
  pointer-events: none;
  transition: opacity .8s ease;
}
#feature .sec03 .sec__look.on{
  opacity: 1;
  pointer-events: all;
}

#feature .sec03 .sec__look .sec__text{
  margin: 0 auto;
  text-align: center;
}

#feature .sec03 .sec__look .sec__slide{
  display: flex;
  justify-content: space-between;
  margin: 42px auto 0;
  position: relative;
  width: 860px;
  z-index: 2;
}
#feature .sec03 .sec__look .sec__slide-img{
  width: 420px;
}

#feature .sec03 .sec__look .flex01{
  justify-content: space-between;
  margin: 60px auto 0;
  width: 720px;
}
#feature .sec03 .sec__look[data-look="02"] .flex01{
  width: 870px;
}

#feature .sec03 .sec__look .sec__item{
  width: 120px;
}
#feature .sec03 .sec__look .sec__item p{
  font-size: 12px;
  letter-spacing: 0.125em;
  line-height: 2;
  margin: 14px auto 0;
  text-align: center;
}

#feature .sec03 .sec__procedure{
  margin: 64.5px auto 0;
  overflow: hidden;
  transition: all .8s ease;
  height: 234px;
  position: relative;
}
#feature .sec03 .sec__procedure::before{
  background: linear-gradient(0deg, rgba(252,242,244,1) 35%, rgba(253,242,244,0) 100%);
  content: "";
  margin: auto;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  height: 180px;
  width: 860px;
}
#feature .sec03 .sec__procedure.on::before{
  content: none;
}

#feature .sec03 .sec__procedure h3{
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
}
#feature .sec03 .sec__procedure h3:not(:first-of-type){
  margin: 37px auto 0;
}

#feature .sec03 .sec__procedure p{
  font-size: 13px;
  letter-spacing: 0.125em;
  line-height: 2.4;
  margin: 22px auto 0;
  text-align: center;
}
#feature .sec03 .sec__procedure p a{
  color: #ce888e;
  display: inline-block;
  text-decoration: underline;
  width: fit-content;
}

#feature .sec03 .sec__view{
  border-bottom: 1px solid #666;
  margin: -19px auto 0;
  position: relative;
  height: 18px;
  width: 73px;
}
#feature .sec03 .sec__view::before{
  content: "view more";
  color: #1f1f1f;
  font-size: 13px;
  letter-spacing: 0.125em;
  line-height: 1;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  position: absolute;
  text-align: center;
  white-space: nowrap;
}

#feature .sec03 .sec__view.on{
  margin: 39px auto 0;
  width: 37px;
}
#feature .sec03 .sec__view.on::before{
  content: "close";
}

#feature .sec03 [data-look="01"] .sec__procedure.on{
  height: 486.8px;
}
#feature .sec03 [data-look="02"] .sec__procedure.on{
  height: 549.2px;
}
#feature .sec03 [data-look="03"] .sec__procedure.on,
#feature .sec03 [data-look="04"] .sec__procedure.on{
  height: 518px;
}

#feature .sec03 .sec__btn{
  margin: 60px auto 0;
  height: 50px;
  width: 330px;
}
#feature .sec03 .sec__btn a{
  letter-spacing: 0.09em;
  padding: 0 7px 2px 0;
}
#feature .sec03 .sec__btn span{
  left: 300px;
}
#feature .sec03 .sec__btn::after{
  right: 9px;
}

#feature .sec03 .deco01{
  background: url("../img/deco06.png") center top / contain no-repeat;
  top: -11.57vw;
  left: 0;
  height: 490px;
  width: 392px;
}
#feature .sec03 .deco02{
  background: url("../img/deco07.png") center top / contain no-repeat;
  top: 85.86vw;
  right: 0;
  height: 462px;
  width: 350px;
}

#feature .sec03 .blur01{
  background: #f1dcd1;
  top: 216px;
  right: -187.5px;
}
#feature .sec03 .blur02{
  background: #ecd3d8;
  top: 664px;
  left: -200px;
}

/* sec04 */

#feature .sec04{
  margin: 140px auto 0;
}

#feature .sec04 .inner{
  padding: 0 0 120px;
}

#feature .sec04 .sec__campaign{
  background: url(../img/bg02.png) center center / contain no-repeat;
  margin: 0 auto;
  padding: 58px 0 0;
  height: 688px;
  width: 740px;
}

#feature .sec04 .sec__campaign-ttl{
  font-weight: 300;
  font-size: 36px;
  letter-spacing: 0.075em;
  line-height: 1;
  text-align: center;
}
#feature .sec04 .sec__campaign-text{
  font-size: 15px;
  letter-spacing: 0.125em;
  line-height: 2.4;
  margin: 30px auto 0;
  text-align: center;
}
#feature .sec04 .sec__campaign-note{
  font-size: 12px;
  letter-spacing: 0.125em;
  line-height: 1;
  margin: 16px auto 0;
  text-align: center;
}

#feature .sec04 .sec__campaign-slide{
  margin: 42px auto 0;
  width: 270px;
}

#feature .sec04 .sec__all{
  align-items: center;
  background: #d399a6;
  color: #ffff;
  display: flex;
  font-size: 24px;
  letter-spacing: 0.075em;
  line-height: 1;
  justify-content: center;
  margin: 120px auto 0;
  position: relative;
  height: 74px;
  width: 1020px;
  z-index: 2;
}

#feature .sec04 .deco01{
  background: url("../img/deco08.png") center top / contain no-repeat;
  bottom: 0;
  left: 0;
  height: 420px;
  width: 420px;
}

@media screen and (max-width: 1400px) {
  html {
    font-size: calc(10 * (100vw / 1400));
  }
}