@charset "UTF-8";

:root {
  --lpSetSize: (100vw / 1400) * 0.6;
} 
html {
  scroll-behavior:smooth;
  scroll-padding-top: 80px;
}
.l-container {
  width:100%;
}
.feature {
  width:100%;
  font-feature-settings:"palt";
  color:#000000;
  position: relative;
}
.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;
}


/* .feature wrap (PC ONLY)
*******************************/
.l-header {
  background: #ffffff;
}
#feature::after {
  content: '';
  width: 100%;
  height: 100%;
  background: url('../img/pc_bg.jpg') 0 0 no-repeat;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
.l-footer {
  padding-top: 0 !important;
}
.pc-footer {
  margin-top: 0 !important;
  background: #ffffff;
}

.feature {
  display: grid;
  grid-template-columns: 1fr calc(450 * (100vw / 1400)) 1fr;
  position: relative;
}

/* .f_left / .f_right
----------------------------- */
.feature .f_left {
  text-align: center;
  grid-column: 1;
}
.feature .f_main {
  grid-column: 2;
  width: calc(450 * (100vw / 1400));
  background: #ffffff;
}
.feature .f_right {
  text-align: center;
  grid-column: 3;
}
.feature .f_left,
.feature .f_right {
  position: sticky;
  height: calc(100vh - 80px);
  top: 80px;
}
.feature .f_left .f_left__box,
.feature .f_right .f_right__box {
  height: 100%;  
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.feature .f_left .f_left__title {
  width: calc(346.6667 * (100vw / 1400));
  margin: 0 auto;
}
.feature .f_right .f_right__btn {
  text-align: center;
  font-family: "lores-12", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(26 * (100vw / 1400));
  letter-spacing: 0.035em;
  width: calc(198 * (100vw / 1400));
  border-bottom: 1px solid #000000;
  margin: 0 auto;
}
.feature .f_right .f_right__btn img {
  width: calc(194.9224 * (100vw / 1400));
  margin-bottom: calc(10 * (100vw / 1400));
}



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

/* .fall-motif */
.feature .fall-motif {
  overflow: hidden;
  position: relative;
  background: #ffe6e5;
  margin-bottom: calc(60 * var(--lpSetSize));
}
.feature .fall-motif .motif-parts {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
  height: auto !important;
  max-width: none !important;
  will-change: transform;
  backface-visibility: visible;
  z-index: 10;
}
.feature .fall-motif .is-motif-01 {
  width: calc(24 * var(--lpSetSize));
}
.feature .fall-motif .is-motif-02 {
  width: calc(24 * var(--lpSetSize));
}
.feature .fall-motif .is-motif-03 {
  width: calc(40 * var(--lpSetSize));
}
.feature .fall-motif .is-motif-04 {
  width: calc(40 * var(--lpSetSize));
}
.feature .fall-motif .is-motif-05 {
  width: calc(42 * var(--lpSetSize));
}
.feature .fall-motif .is-motif-06 {
  width: calc(42 * var(--lpSetSize));
}
.feature .fall-motif .is-motif-07 {
  width: calc(30 * var(--lpSetSize));
}
.feature .fall-motif .is-motif-08 {
  width: calc(30 * var(--lpSetSize));
}
.feature .fall-motif .is-motif-09 {
  width: calc(50 * var(--lpSetSize));
}
.feature .fall-motif .is-motif-10 {
  width: calc(50 * var(--lpSetSize));
}
.feature .fall-motif .is-motif-11 {
  width: calc(30 * var(--lpSetSize));
}
.feature .fall-motif .is-motif-12 {
  width: calc(30 * var(--lpSetSize));
}

/* H1 */
.feature .sec h1 {
  width: calc(520 * var(--lpSetSize));
  margin: calc(120 * var(--lpSetSize)) auto calc(66 * var(--lpSetSize));
}

/* H2 */
.feature .sec h2.title01 {
  position:relative;
  height: calc(120 * var(--lpSetSize));
  margin-bottom: calc(80 * var(--lpSetSize));
}
.feature .sec h2.title01 span {
  display: block;
  position: absolute;
}
.feature .sec h2.title01 span:nth-of-type(1) {
  width: calc(52.0176 * var(--lpSetSize));
  top: calc(55.3965 * var(--lpSetSize));
  left: calc(179.9268 * var(--lpSetSize));
}
.feature .sec h2.title01 span:nth-of-type(2) {
  width: calc(44.9199 * var(--lpSetSize));
  top: calc(29.9302 * var(--lpSetSize));
  left: calc(219.0557 * var(--lpSetSize));
}
.feature .sec h2.title01 span:nth-of-type(3) {
  width: calc(67.8828 * var(--lpSetSize));
  top: calc(11.8809 * var(--lpSetSize));
  left: calc(265.834 * var(--lpSetSize));
}
.feature .sec h2.title01 span:nth-of-type(4) {
  width: calc(38.54 * var(--lpSetSize));
  top: calc(9.771 * var(--lpSetSize));
  left: calc(338.3857 * var(--lpSetSize));  
}
.feature .sec h2.title01 span:nth-of-type(5) {
  width: calc(48.9941 * var(--lpSetSize));
  top: calc(9.6699 * var(--lpSetSize));
  left: calc(378.9619 * var(--lpSetSize));
}
.feature .sec h2.title01 span:nth-of-type(6) {
  width: calc(44.0283 * var(--lpSetSize));
  top: calc(15.0654 * var(--lpSetSize));
  left: calc(433.2578 * var(--lpSetSize));  
}
.feature .sec h2.title01 span:nth-of-type(7) {
  width: calc(47.542 * var(--lpSetSize));
  top: calc(27.1772 * var(--lpSetSize));
  left: calc(480.332 * var(--lpSetSize));  
}
.feature .sec h2.title01 span:nth-of-type(8) {
  width: calc(59.0898 * var(--lpSetSize));
  top: calc(47.0469 * var(--lpSetSize));
  left: calc(528.9043 * var(--lpSetSize));  
}

.feature .sec h2.title02 {
  position:relative;
  height: calc(140 * var(--lpSetSize));
  margin-bottom: calc(80 * var(--lpSetSize));
}
.feature .sec h2.title02 span {
  display: block;
  position: absolute; 
}
.feature .sec h2.title02 span:nth-of-type(1) {
  width: calc(54.0625 * var(--lpSetSize));  
  top: calc(92.6367 * var(--lpSetSize));
  left: calc(143.4229 * var(--lpSetSize));  
}
.feature .sec h2.title02 span:nth-of-type(2) {
  width: calc(53.9854 * var(--lpSetSize));
  top: calc(55.7891 * var(--lpSetSize));
  left: calc(177.376 * var(--lpSetSize));  
}
.feature .sec h2.title02 span:nth-of-type(3) {
  width: calc(53.2354 * var(--lpSetSize));
  top: calc(30.6748 * var(--lpSetSize));
  left: calc(223.0791 * var(--lpSetSize));  
}
.feature .sec h2.title02 span:nth-of-type(4) {
  width: calc(50.459 * var(--lpSetSize));
  top: calc(17.2075 * var(--lpSetSize));
  left: calc(272.1221 * var(--lpSetSize));  
}
.feature .sec h2.title02 span:nth-of-type(5) {
  width: calc(43.4248 * var(--lpSetSize));
  top: calc(9.6206 * var(--lpSetSize));
  left: calc(338.8193 * var(--lpSetSize));  
}
.feature .sec h2.title02 span:nth-of-type(6) {
  width: calc(27.7725 * var(--lpSetSize));
  top: calc(28.127 * var(--lpSetSize));
  left: calc(378.8594 * var(--lpSetSize));
}
.feature .sec h2.title02 span:nth-of-type(7) {
  width: calc(44.7109 * var(--lpSetSize));
  top: calc(13.2676 * var(--lpSetSize));
  left: calc(407.7031 * var(--lpSetSize));  
}
.feature .sec h2.title02 span:nth-of-type(8) {
  width: calc(54.8164 * var(--lpSetSize));
  top: calc(20.6914 * var(--lpSetSize));
  left: calc(447.4883 * var(--lpSetSize));
}
.feature .sec h2.title02 span:nth-of-type(9) {
  width: calc(33.0771 * var(--lpSetSize));
  top: calc(37.6846 * var(--lpSetSize));
  left: calc(490.9756 * var(--lpSetSize));
}
.feature .sec h2.title02 span:nth-of-type(10) {
  width: calc(56.0557 * var(--lpSetSize));
  top: calc(47.6201 * var(--lpSetSize));
  left: calc(508.248 * var(--lpSetSize));
}
.feature .sec h2.title02 span:nth-of-type(11) {
  width: calc(52.1152 * var(--lpSetSize));
  top: calc(75.4883 * var(--lpSetSize));
  left: calc(555.7598 * var(--lpSetSize));
}

.feature .sec h2.title03 {
  position:relative;
  height: calc(120 * var(--lpSetSize));
  margin:calc(120 * var(--lpSetSize)) 0 calc(80 * var(--lpSetSize));  
}
.feature .sec h2.title03 span {
  display: block;
  position: absolute;
}
.feature .sec h2.title03 span:nth-of-type(1) {
  width: calc(51.2461 * var(--lpSetSize));
  top: calc(52.6479 * var(--lpSetSize));
  left: calc(183.1953 * var(--lpSetSize));
}
.feature .sec h2.title03 span:nth-of-type(2) {
  width: calc(50.8164 * var(--lpSetSize));
  top: calc(33.7651 * var(--lpSetSize));
  left: calc(229.1367 * var(--lpSetSize));
}
.feature .sec h2.title03 span:nth-of-type(3) {
  width: calc(47.2744 * var(--lpSetSize));
  top: calc(17.7266 * var(--lpSetSize));
  left: calc(269.8486 * var(--lpSetSize));
}
.feature .sec h2.title03 span:nth-of-type(4) {
  width: calc(44.1787 * var(--lpSetSize));
  top: calc(9.998 * var(--lpSetSize));
  left: calc(336.2617 * var(--lpSetSize));
}
.feature .sec h2.title03 span:nth-of-type(5) {
  width: calc(47.7246 * var(--lpSetSize));
  top: calc(10.6611 * var(--lpSetSize));
  left: calc(383.2285 * var(--lpSetSize));
}
.feature .sec h2.title03 span:nth-of-type(6) {
  width: calc(50.627 * var(--lpSetSize));
  top: calc(16.0337 * var(--lpSetSize));
  left: calc(431.7285 * var(--lpSetSize));
}
.feature .sec h2.title03 span:nth-of-type(7) {
  width: calc(48.6582 * var(--lpSetSize));
  top: calc(33.292 * var(--lpSetSize));
  left: calc(476.6465 * var(--lpSetSize));
}
.feature .sec h2.title03 span:nth-of-type(8) {
  width: calc(60.4854 * var(--lpSetSize));
  top: calc(48.9326 * var(--lpSetSize));
  left: calc(510.3662 * var(--lpSetSize));
}

/* .sec */
.feature .sec .lead {
  text-align: center;
}
.feature .sec .lead p {
  font-family: "nitalago-ruika", sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: calc(24 * var(--lpSetSize));
  line-height: 2.2;
  letter-spacing: 0.050em;
  margin-bottom: calc(34 * var(--lpSetSize));
}
.feature .sec .comingsoon {
  width:calc(530 * var(--lpSetSize));
  height:calc(266 * var(--lpSetSize));
  margin: 0 auto;
  position:relative;
}
/*.feature .sec .comingsoon .txt01 {
  position:absolute;
  top: calc(40 * var(--lpSetSize));
  left: calc(3 * var(--lpSetSize));
  width: calc(420 * var(--lpSetSize));
  transform: rotate(7deg);
}
.feature .sec .comingsoon .txt02 {
  position:absolute;
  top: calc(150 * var(--lpSetSize));
  right: calc(5 * var(--lpSetSize));
  transform: rotate(-12deg);
  width: calc(360 * var(--lpSetSize));
}*/

.feature .sec .deco01 {
  width: calc(600 * var(--lpSetSize));
  padding: calc(116 * var(--lpSetSize)) 0 0 0;
  margin: 0 auto calc(120 * var(--lpSetSize));
}
.feature .sec .img02 a {
  position:relative;
}
.feature .sec .img02 a::after {
  content:'';
  width: calc(600 * var(--lpSetSize));
  height: calc(880 * var(--lpSetSize));
  background:url('../img/bg01.svg') left top no-repeat;
  background-size: calc(600 * var(--lpSetSize)) auto;
  z-index:1;
  top:0;
  left:0;
  position:absolute;
}
.feature .sec .img03 a {
  position:relative;
  display: block;
}
.feature .sec .img03 a::after {
  content:'';
  width: calc(600 * var(--lpSetSize));
  height: calc(880 * var(--lpSetSize));
  background:url('../img/bg01.svg') left bottom no-repeat;
  background-size: calc(600 * var(--lpSetSize)) auto;
  z-index:1;
  top:0;
  left:0;
  position:absolute;
}

.feature .sec .img04 {
  margin-bottom: calc(60 * var(--lpSetSize));;
}

.feature .sec .collabo {
  width: calc(250 * var(--lpSetSize));
  margin: calc(180 * var(--lpSetSize)) auto;
}

.feature .sec .deco02 {
  width: calc(600 * var(--lpSetSize));
  margin: 0 auto calc(120 * var(--lpSetSize));
}
.feature .sec .img05 a {
  position:relative;
}
.feature .sec .img05 a::after {
  content:'';
  width: calc(600 * var(--lpSetSize));
  height: calc(880 * var(--lpSetSize));
  background:url('../img/bg01.svg') left top no-repeat;
  background-size: calc(600 * var(--lpSetSize)) auto;
  z-index:1;
  top:0;
  left:0;
  position:absolute;
}
.feature .sec .img06 a {
  position:relative;
  display: block;
}
.feature .sec .img06 a::after {
  content:'';
  width: calc(600 * var(--lpSetSize));
  height: calc(880 * var(--lpSetSize));
  background:url('../img/bg01.svg') left bottom no-repeat;
  background-size: calc(600 * var(--lpSetSize)) auto;
  z-index:1;
  top:0;
  left:0;
  position:absolute;
}


.feature .sec .sticky-content {
  position: relative;
}

.feature .sec .img08 {
  position: sticky;
  top: 120px;
  z-index: 1;
}
.feature .sec .img08 a {
  margin: 0 auto;
  border: #000 calc(8 * var(--lpSetSize)) solid;
  width: calc(570 * var(--lpSetSize));
  overflow: hidden;
  margin-bottom:calc(60 * var(--lpSetSize));
}
.feature .sec .img08 img {
  width: calc(570 * var(--lpSetSize));
  margin: calc(-7 * var(--lpSetSize)) 0 0 calc(-7 * var(--lpSetSize));
}

.feature .sec .img09 {
  position: sticky;
  top: 13.3333333333cqw;
  z-index: 2;
  padding-bottom: calc(88 * var(--lpSetSize));
}
.feature .sec .img09 a {
  margin: 0 auto;
  border: #000 calc(8 * var(--lpSetSize)) solid;
  width: calc(450 * var(--lpSetSize));
  overflow: hidden;
}
.feature .sec .img09 img {
  width: calc(450 * var(--lpSetSize));
  margin: calc(-7 * var(--lpSetSize)) 0 0 calc(-7 * var(--lpSetSize));
}

.feature .sec .img09 a {
  background: #fff;
  opacity: 1;
}
.feature .sec .img09 a img {
  transition: opacity 0.3s;
}
.feature .sec .img09 a:hover img {
  opacity: .7;
}


.feature .sec .img10 {
  margin-bottom: calc(60 * var(--lpSetSize));
}

.feature .sec .about {
  height: calc(850 * var(--lpSetSize));
  background: url(../img/img01.jpg) center center no-repeat;
  background-size: calc(1000 * var(--lpSetSize)) auto;
  margin-top:calc(182 * var(--lpSetSize));
  padding-top:calc(202 * var(--lpSetSize));
}
.feature .sec .about .title04 {
  width: calc(390 * var(--lpSetSize));
  margin: 0 auto calc(46 * var(--lpSetSize));
}
.feature .sec .about p {
  text-align:center;
  font-family: "nitalago-ruika", sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: calc(24 * var(--lpSetSize));
  line-height: 2.2;
  letter-spacing: 0.050em;
}

/* credit */
.feature .sec__credit {
  margin: 0 auto;
  width: 90%;
}
.feature .sec__credit .credit{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(16 * var(--lpSetSize)) calc(16 * var(--lpSetSize));
}
.feature .sec__credit .credit li {
  font-family: "sculpin-variable", sans-serif;
  font-variation-settings: "wght" 500;
  font-size: calc(22 * var(--lpSetSize));
  letter-spacing: 0.050em;
  line-height: 1;
}
.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 {
  text-align:center;
  background: #ffffff;
  padding: calc(144 * var(--lpSetSize)) 0 0;
  margin-bottom: calc(340 * var(--lpSetSize));
}
.feature .sec_bottom h2 {
  font-family: "gunter", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:calc(42 * var(--lpSetSize));
  margin-bottom: calc(40 * var(--lpSetSize));
}
.feature .sec_bottom p {
  font-family: "sculpin-variable", sans-serif;
  font-variation-settings: "wght" 500;
  font-size:calc(23 * var(--lpSetSize));
  letter-spacing:0.050em;
  line-height: 2.2;
}
.feature .sec_bottom .sec__btn {
  height: calc(300 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn a {
  width:calc(440 * var(--lpSetSize));
  display: block;
  margin: calc(26 * var(--lpSetSize)) 0 0 calc(148 * var(--lpSetSize));
  position: relative;
  z-index: 1;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.feature .sec_bottom .sec__btn a::after {
  content: '';
  width: calc(438 * var(--lpSetSize));
  height: calc(110 * var(--lpSetSize));
  border:calc(2 * var(--lpSetSize)) solid #ef0303;
  position: absolute;
  top: calc(16 * var(--lpSetSize));
  left: calc(14 * var(--lpSetSize));
  z-index: 0;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.feature .sec_bottom .sec__btn a:hover {
  transform: translate(
  calc(10 * var(--lpSetSize)), 
  calc(10 * var(--lpSetSize))
  );
  opacity:1;
}
.feature .sec_bottom .sec__btn a:hover::after {
  transform: translate(
  calc(-10 * var(--lpSetSize)), 
  calc(-10 * var(--lpSetSize))
  );
  border-color: transparent;
}

.feature .sec_bottom .staff {
  font-family: "arsenica-variable", sans-serif;
  font-variation-settings: "opsz" 100, "wght" 300;
  font-size: calc(30 * var(--lpSetSize));
  text-align:center;
  letter-spacing: 0.034em;
  line-height: 1.42;
  padding: 0 calc(12 * var(--lpSetSize)) 0 0;
}
.feature .sec_bottom figure {
  width:calc(660 * var(--lpSetSize));
  margin: 0 auto;
  padding: calc(110 * var(--lpSetSize)) 0 0 0;
}


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

/* typing */
#feature .sec .typing span {
  opacity: 0;
}
#feature .sec .typing.is-show span {
  animation: typingText 0s cubic-bezier(0.47, 0, 0.745, 0.715) both;
}
#feature .sec .typing.is-show span:nth-child(1) {
  animation-delay: 0.6s;
}
#feature .sec .typing.is-show span:nth-child(2) {
  animation-delay: 0.7s;
}
#feature .sec .typing.is-show span:nth-child(3) {
  animation-delay: 0.8s;
}
#feature .sec .typing.is-show span:nth-child(4) {
  animation-delay: 0.9s;
}
#feature .sec .typing.is-show span:nth-child(5) {
  animation-delay: 1s;
}
#feature .sec .typing.is-show span:nth-child(6) {
  animation-delay: 1.1s;
}
#feature .sec .typing.is-show span:nth-child(7) {
  animation-delay: 1.2s;
}
#feature .sec .typing.is-show span:nth-child(8) {
  animation-delay: 1.3s;
}
#feature .sec .typing.is-show span:nth-child(9) {
  animation-delay: 1.4s;
}
#feature .sec .typing.is-show span:nth-child(10) {
  animation-delay: 1.5s;
}
#feature .sec .typing.is-show span:nth-child(11) {
  animation-delay: 1.6s;
}
#feature .sec .typing.is-show span:nth-child(12) {
  animation-delay: 1.7s;
}
@keyframes typingText {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/* フェードイン */
.fade {
  opacity: 0;
  transition: all 1s ease-out;
}
.fade.is-show {
  transform: translate(0, 0);
  opacity: 1;
}


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

@media screen and (min-width: 1400px) {  
  :root {
    --lpSetSize: 1px * 0.6;
  }
  .feature {
    display: grid;
    grid-template-columns: 1fr 450px 1fr;
    position: relative;
  }
  .feature .f_main {
    width: 450px;
  }
  .feature .f_left .f_left__title {
    width: 346.6667px;
  }
  .feature .f_right .f_right__btn {
    font-size: 26px;
    letter-spacing: 0.035em;
    width: 198px;
  }
  .feature .f_right .f_right__btn img {
    width: 194.9224px;
    margin-bottom: 10px;
  }
}