@charset "UTF-8";

:root {
  --lpSetSize: (100vw / 1400) * 0.6133333333;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top: 80px;
}
.l-container {
  width:100%;
}
.feature {
  width:100%;
  font-family:"hiragino-kaku-gothic-pron", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-feature-settings: "palt";
  color: #ff99cc;
}
.feature * {
  margin:0;
  box-sizing:border-box;
}
.feature img {
  width:100%;
  height:auto;
  vertical-align:top;
  display:block;
}
.feature a { 
  display: block;
  color: inherit;
  text-decoration: none;  
  transition: opacity 0.3s;
}
.feature a:hover {
  cursor: pointer;
  opacity: .7;
}

/* PC only */
.l-footer {
  padding-top: 0 !important;
}
.pc-footer {
  margin-top: 0 !important;
}

/* .feature wrap (PC ONLY)
*******************************/
.feature {
  display: flex;
}

/* .f_main
----------------------------- */
.feature .f_main {
  width: 50%;
}
.feature .f_main .inner {
  width: calc(460 * (100vw / 1400));
  margin: 0 auto;
  overflow: hidden;
}

/* .f_left
----------------------------- */
.feature .f_left {
  width: 50%;
}
.feature .f_left .f_left__box {
  position: relative;
  height: 100%;
}
.feature .f_left .f_left__box .f_left__title {
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
}
.feature .f_left .f_left__box .f_left__title .hero_img02 img {
  width: 100%;
  height: calc(100vh - 80px);
  object-fit: cover;
  object-position: center top;  
  position: absolute;
  top:0;
  left:0;
  z-index: 1;
}
.feature .f_left .f_left__box .f_left__title h1 {
  width: 100%;
  position: absolute;
  top:0;
  left:0;
  z-index: 0;
}
.feature .f_left .f_left__box .f_left__title .hero_img01 img {
  width: 100%;
  height: calc(100vh - 80px);
  object-fit: cover;
  object-position: center top;
}
.feature .f_left .f_left__box .f_left__title .motif {
  width: calc(615.846 * (100vw / 1400));
  position: absolute;
  top: calc(193.7284 * (100vw / 1400));
  left: calc(39.2887 * (100vw / 1400));
  z-index: 2;
}



/*****************************************************
container
*****************************************************/

/* .hero
----------------------------- */
.feature .hero {
  margin-bottom: calc(58 * var(--lpSetSize));
}
.feature .hero__lead {
  padding: calc(86 * var(--lpSetSize)) 0 0;
}
.feature .hero__lead p {
  font-size: calc(24 * var(--lpSetSize));
  letter-spacing: 0.05em;
  line-height: 2.2;
  text-align: center;
  color: #333333;
  margin-bottom: calc(32 * var(--lpSetSize));
}


/* .comingsoon
----------------------------- */
.feature .comingsoon {
  margin: 0 0 calc(58 * var(--lpSetSize));
}


/* .sec
----------------------------- */

/* .ttl_wrap */
.feature .sec .ttl_wrap {
  position:relative;  
}
.feature .sec h2 {
  font-family: "ambroise-francois-std", serif;
  font-weight: 600;
  font-style: normal;
  font-size: calc(116 * var(--lpSetSize));
  letter-spacing: 0.025em;
  line-height: 1;
  position:relative;
}
.feature .sec h2::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  color: rgba(0, 0, 0, 0.15);
  filter: blur(21.4583px);
  mix-blend-mode: multiply;
  transform: scale(1.05);
}

.feature .sec01 .ttl_wrap h2 {
  position:absolute;
  top: calc(152 * var(--lpSetSize));
  left: calc(20 * var(--lpSetSize));
  z-index: 1;
}
.feature .sec02 .ttl_wrap h2 {
  position:absolute;
  top: calc(395 * var(--lpSetSize));
  left: calc(93 * var(--lpSetSize));
  text-align:right;
  z-index: 1;
}
.feature .sec03 .ttl_wrap h2:nth-of-type(1) {
  position:absolute;
  top: calc(58 * var(--lpSetSize));
  left: calc(31 * var(--lpSetSize));
  z-index:1;
}
.feature .sec03 .ttl_wrap h2:nth-of-type(2) {
  position:absolute;
  top: calc(518 * var(--lpSetSize));
  right: calc(17 * var(--lpSetSize));
  z-index:1;
  writing-mode: vertical-rl;
}

/* .sec img */
.feature .sec01 {
  padding: calc(80 * var(--lpSetSize)) 0 calc(170 * var(--lpSetSize)) 0;
}
.feature .sec .img01 {
  width: calc(600 * var(--lpSetSize));
  margin: 0 auto calc(80 * var(--lpSetSize));
}
.feature .sec .img02 {
  width: 100%;
  margin-bottom: calc(28 * var(--lpSetSize));
}
.feature .sec .img03 {
  margin: 0 0 calc(26 * var(--lpSetSize)) calc(70 * var(--lpSetSize));
  padding: calc(332 * var(--lpSetSize)) 0 0 0;
  overflow: hidden;
}
.feature .sec .img03 img {
  width: calc(980 * var(--lpSetSize));  
}
.feature .sec02 {
  background:#d9edf4;
  padding: calc(120 * var(--lpSetSize)) 0 0 0;
}
.feature .sec .img04 {
  width: calc(675 * var(--lpSetSize));
  margin: 0 auto calc(80 * var(--lpSetSize));
}
.feature .sec .img05 {
  width: calc(600 * var(--lpSetSize));
  margin: 0 auto calc(26 * var(--lpSetSize));
}
.feature .sec .img06 {
  width: calc(480 * var(--lpSetSize));
  margin: calc(170* var(--lpSetSize)) 0 calc(26 * var(--lpSetSize)) calc(240* var(--lpSetSize));
}
.feature .sec .img07 {
  width: calc(570 * var(--lpSetSize));
  padding: calc(178 * var(--lpSetSize)) 0 0 0;
}
.feature .sec .img08 {
  width: calc(510 * var(--lpSetSize));
  margin: calc(-38 * var(--lpSetSize)) 0 0 calc(190 * var(--lpSetSize));
}
.feature .sec .img08 a {
  background:#ffffff;  
}
.feature .sec .img08 a:hover {
  opacity:1;
}
.feature .sec .img08 a img {
  transition: opacity 0.3s;
}
.feature .sec .img08 a:hover img {
  opacity:.7;
}
.feature .sec03 .sec__slide {
  padding: calc(120 * var(--lpSetSize)) 0 0 0;
  margin-bottom: calc(71 * var(--lpSetSize));
}
.feature .sec03 .sec__slide .splide__track {
  width: calc(630 * var(--lpSetSize));
  height:calc(840 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec03 .sec__slide .splide__pagination {
  width: calc(630 * var(--lpSetSize));
  margin: 0 auto;
  padding: 0;
  bottom: calc(-48 * var(--lpSetSize));
  justify-content: flex-start;
}
.feature .sec03 .sec__slide .splide__pagination__page {
  margin: 0 calc(14 * var(--lpSetSize)) 0 0 !important;
}
.feature .sec04 {
  background: #d9edf4;
  padding-bottom: calc(130 * var(--lpSetSize));
}
.feature .sec04 .sec__slide {
  margin-bottom: calc(124 * var(--lpSetSize));
}
.feature .sec04 .sec__slide .splide__track {
  width: calc(750 * var(--lpSetSize));
  height:calc(1000 * var(--lpSetSize));
  background:#ffffff;
}
.feature .sec04 .sec__slide .splide__pagination {
  padding: 0;
  bottom: calc(-48 * var(--lpSetSize));
}
.feature .sec .img13 {
  width: calc(600 * var(--lpSetSize));
  margin: 0 auto calc(26* var(--lpSetSize));
}
.feature .sec_bottom {
  padding: calc(164 * var(--lpSetSize)) 0 calc(176 * var(--lpSetSize)) 0;
}
.feature .sec_bottom .sec__btn {
  font-family: "ambroise-francois-std", serif;
  font-weight: 600;
  font-style: normal;
  font-size: calc(116 * var(--lpSetSize));
  line-height:1.0;
  letter-spacing: 0.026em;
  text-align:center;
  z-index:1;
  position:relative;
}
.feature .sec .img14 {
  width: calc(510 * var(--lpSetSize));
  margin: calc(-66 * var(--lpSetSize)) auto 0;
}
.feature .sec_bottom .motif_wrap {
  margin-bottom: calc(176 * var(--lpSetSize));
}

/* .motif_wrap */
.feature .sec .motif_wrap {
  position: relative;
}
.feature .sec .motif {
  position: absolute;
}
.feature .sec .motif02 {
  width: calc(210.2287 * var(--lpSetSize));
  top: calc(693 * var(--lpSetSize));
  right: calc(11 * var(--lpSetSize));
}
.feature .sec .motif03 {
  width: calc(193.8114 * var(--lpSetSize));
  top: calc(844 * var(--lpSetSize));
  left: calc(20 * var(--lpSetSize));
}
.feature .sec .motif04 {
  width: calc(220.2963 * var(--lpSetSize));
  top: calc(88 * var(--lpSetSize));
  right: calc(106 * var(--lpSetSize));
} 
.feature .sec .motif05 {
  width: calc(140.345 * var(--lpSetSize));
  top: calc(528 * var(--lpSetSize));
  left: calc(20 * var(--lpSetSize));
} 
.feature .sec .motif06 {
  width: calc(154.345 * var(--lpSetSize));
  top: calc(50 * var(--lpSetSize));
  right: calc(40 * var(--lpSetSize));
} 
.feature .sec .motif07 {
  width: calc(80.6021 * var(--lpSetSize));
  top: calc(4 * var(--lpSetSize));
  right: calc(89 * var(--lpSetSize));
}
.feature .sec .motif08 {
  width: calc(80.6021 * var(--lpSetSize));
  top: calc(312 * var(--lpSetSize));
  left: calc(60 * var(--lpSetSize));
}


/* slide */
.splide__pagination__page {
  background: #ffd6eb;
  width: calc(14 * var(--lpSetSize));
  height: calc(14 * var(--lpSetSize));
  margin: calc(7 * var(--lpSetSize));
  opacity: 1;
}
.splide__pagination__page.is-active {
  background: #ff99cc;
  transform:scale(1);
}


/* credit */
.feature .credit01 {
  width: calc(350 * var(--lpSetSize));
  margin: 0 0 0 calc(370 * var(--lpSetSize));
}
.feature .credit02 {
  margin: 0 0 0 calc(70 * var(--lpSetSize));
}
.feature .credit03 {
  width: calc(350 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .credit04 {
  margin: 0 calc(30 * var(--lpSetSize)) 0 0;
  padding: 0 0 calc(129 * var(--lpSetSize)) 0;
}
.feature .credit05 {
  width: calc(480 * var(--lpSetSize));
  margin: 0 0 0 calc(60 * var(--lpSetSize));
  padding: 0 0 calc(164 * var(--lpSetSize)) 0;
}
.feature .credit06 {
  width: calc(530 * var(--lpSetSize));
  margin: 0 auto;
}

.feature .sec__credit .credit {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(18 * var(--lpSetSize));

}
.feature .credit01 .credit {
  justify-content: flex-end;
}
.feature .credit03 .credit {
  justify-content: center;
}
.feature .credit04 .credit {
  justify-content: flex-end;
}
.feature .credit06 .credit {
  justify-content: center;
}

.feature .sec__credit .credit li {
  font-family: "univers-next-pro-compressed", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(26 * var(--lpSetSize));
  letter-spacing: 0.05em;
  line-height: 1.9;
}
.feature .sec__credit .credit li .price {
  margin-left: 0.2em;
}
.feature .sec__credit .credit li {
  position: relative;
}
.feature .sec__credit .credit li,
.feature .sec__credit .credit a {
  display: flex;
}


/* .sec_bottom
----------------------------- */
.feature .sec_bottom .staff {
  font-family: "univers-next-pro-compressed", sans-serif;
  font-weight: 500;
  font-style: normal;
  text-align: center;
}
.feature .sec_bottom .staff dt {
  font-size: calc(28 * var(--lpSetSize));
  letter-spacing: 0.04em;
  margin: 0 0 calc(4 * var(--lpSetSize)) 0;
}
.feature .sec_bottom .staff dd {
  font-size: calc(28 * var(--lpSetSize));
  letter-spacing: 0.05em;
  line-height: 1.9;
}


/*****************************************************
animation
*****************************************************/

/*　文字が下から上 */
.js-text-up {
  overflow: hidden;
}
.js-text-up span {
  transform: translateY(110%) rotate(0.0001deg);
  transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  display: inline-block;
}
.js-text-up.is-show span {
  transform: translateY(0) rotate(0.0001deg);
}

/* 時差 */
.feature .is-show.--1 span {
  transition-delay: 0.3s !important;
}
.feature .is-show.--2 span {
  transition-delay: 0.6s !important;
}



/* フェードイン */
.js-fade-in {
  opacity: 0;
  transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.js-fade-in.is-show {
  opacity: 1;
}


/* clip-path + scale版 */
/* 画像ラッパーの設定（拡大した画像がはみ出さないようにする） */
.feature .imgOuter {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden; 
}
.feature .imgOuter img {
  display: block;
  width: 100%;
  height: auto;
}

/* 基本のフェードイン（下から上へのフワッとした出現） */
.feature .fadeInBlock {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.85s cubic-bezier(0.33, 1, 0.68, 1), transform 1s cubic-bezier(0.33, 1, 0.68, 1);
}

/* シャッターエフェクト用のベース（要素自体は最初から定位置・透明度1にしておく） */
.feature .fadeInBlock.topIn,
.feature .fadeInBlock.bottomIn,
.feature .fadeInBlock.leftIn,
.feature .fadeInBlock.rightIn {
  transform: translateY(0);
  opacity: 1; 
}

/* clip-path の初期状態 */
.feature .fadeInBlock.topIn .imgOuter { clip-path: inset(0 0 100% 0); transition: clip-path 0.85s cubic-bezier(0.645, 0.045, 0.355, 1); }
.feature .fadeInBlock.bottomIn .imgOuter { clip-path: inset(100% 0 0 0); transition: clip-path 0.85s cubic-bezier(0.645, 0.045, 0.355, 1); }
.feature .fadeInBlock.leftIn .imgOuter { clip-path: inset(0 100% 0 0); transition: clip-path 0.85s cubic-bezier(0.645, 0.045, 0.355, 1); }
.feature .fadeInBlock.rightIn .imgOuter { clip-path: inset(0 0 0 100%); transition: clip-path 0.85s cubic-bezier(0.645, 0.045, 0.355, 1); }

/* 画像scale の初期状態（ズームしておく） */
.feature .fadeInBlock.topIn .imgOuter img,
.feature .fadeInBlock.bottomIn .imgOuter img,
.feature .fadeInBlock.leftIn .imgOuter img,
.feature .fadeInBlock.rightIn .imgOuter img {
  transform: scale(1.3);
  transition: transform 1.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* inviewで .view が付与された時の発火状態 */
.feature .fadeInBlock.view {
  opacity: 1;
  transform: translateY(0);
}

.feature .fadeInBlock.topIn.view .imgOuter,
.feature .fadeInBlock.bottomIn.view .imgOuter,
.feature .fadeInBlock.leftIn.view .imgOuter,
.feature .fadeInBlock.rightIn.view .imgOuter {
  clip-path: inset(0);
}

.feature .fadeInBlock.topIn.view .imgOuter img,
.feature .fadeInBlock.bottomIn.view .imgOuter img,
.feature .fadeInBlock.leftIn.view .imgOuter img,
.feature .fadeInBlock.rightIn.view .imgOuter img {
  transform: scale(1);
}


/* --------------------------------------------------- */

@media screen and (min-width: 1400px) {  
  :root {
    --lpSetSize: 1px * 0.6133333333;
  }
  .feature .f_main .inner {
    width: 460px;
  }
}