@charset "UTF-8";

:root {
  --lpSetSize: (100vw / 1440) * 0.53333333;
  --lpSetTxt01:#ffffff;
  --lpSetTxt02:#bda5e0;
  --lpSetBg01:#f5f2f9; /*薄い紫*/
  --lpSetBg02:#ede4f5; /*濃い紫*/
}
html {
  scroll-behavior:smooth;
  scroll-padding-top: 80px;
}
.l-container {
  width:100%;
}
.feature {
  width:100%;
  font-feature-settings:"palt";
  font-family:"hiragino-kaku-gothic-pron", "ryo-gothic-plusn", "yu-gothic-pr6n",'游ゴシック体', 'YuGothic', '游ゴシック Medium', 'Yu Gothic', メイリオ, sans-serif;
  font-weight:300;
  font-style:normal;
  color:var(--lpSetTxt01);
  background:var(--lpSetBg01);
}
.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_left / .f_right
----------------------------- */
.feature .f_left,
.feature .f_right {
  width: calc(50% - (200 * (100vw / 1440)));
  text-align: center;
}
.feature .f_left .f_left__box,
.feature .f_right .f_right__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 a {
  position: relative;
}
.feature .f_left .f_left__box .f_left__title h2 {
  position: absolute;
  width:calc(420.0896 * (100vw / 1440)); 
  top: calc(49 * (100vw / 1440));
  left: calc(42 * (100vw / 1440));
  z-index: 1;
}
.feature .f_left .f_left__box .f_left__title figure img {
  width: 100%;
  height: calc(100vh - 80px);
  object-fit: cover;
}
.feature .f_right .f_right__btn {
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  margin-inline: auto;
  width: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #595757;  
  font-family: "arsenica-variable", sans-serif;
  font-variation-settings: "opsz" 1000, "wght" 400;
  font-style: italic;
  font-size: calc(23.53 * (100vw / 1440));
  letter-spacing:0.010em;
  text-align:center;
}
.feature .f_right .f_right__btn a {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.feature .f_right .f_right__btn a::before {
  content:'';
  display:block;
  width: calc(70.1015 * (100vw / 1440));
  height: calc(91.6638 * (100vw / 1440));
  background:url("../img/btn_img.png") 0 0 no-repeat;
  background-size:cover;
  margin: calc(-4 * (100vw / 1440)) 0 calc(-4 * (100vw / 1440)) calc(-10 * (100vw / 1440));
}


/* .f_main
----------------------------- */
.feature .f_main {
  width: calc(400 * (100vw / 1440));
}


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

/* .hero
----------------------------- */
.feature .hero {
  top:80px !important;
}
.feature .hero__lead {
  background:var(--lpSetBg02);
  padding:calc(40 * var(--lpSetSize)) calc(35 * var(--lpSetSize));
  margin-bottom:calc(100 * var(--lpSetSize));
}
.feature .hero__lead .inner {
  border: var(--lpSetTxt02) calc(2 * var(--lpSetSize)) solid;
  padding: calc(226 * var(--lpSetSize)) 0 calc(244 * var(--lpSetSize));
}
.feature .hero__lead figure {
  width: calc(248 * var(--lpSetSize));
  margin: 0 0 calc(68 * var(--lpSetSize)) calc(178 * var(--lpSetSize));
}
.feature .hero__lead p {
  text-align: center;
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.1em;
  line-height:1.8;
  color: var(--lpSetTxt02);
  margin-bottom: 1.4em;
  font-size: calc(24 * var(--lpSetSize));
}


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

.feature .sec01 h3 {
  margin: 0 0 calc(128 * var(--lpSetSize)) 0;
  padding: calc(82 * var(--lpSetSize)) 0 0 0;
}
.feature .sec01 h3::before {
  content: '';
  width: calc(386 * var(--lpSetSize));
  height: calc(348 * var(--lpSetSize));
  background: url("../img/title.png") 0 0 no-repeat;
  background-size:contain;
  position: absolute;
  top: calc(0 * var(--lpSetSize));
  left: calc(-76 * var(--lpSetSize));
  opacity: 0.28;
  z-index: 0;
}
.feature .sec01 h3 img {
  position: relative;
  width:calc(584 * var(--lpSetSize));
  margin: 0 0 0 calc(90 * var(--lpSetSize));
  z-index: 1;
}

.feature .sec02 h3 {
  margin: 0 0 calc(110 * var(--lpSetSize));
  padding: calc(196 * var(--lpSetSize)) 0 0 0;
}
.feature .sec02 h3::before {
  content: '';
  width: calc(386 * var(--lpSetSize));
  height: calc(348 * var(--lpSetSize));
  background: url("../img/title.png") 0 0 no-repeat;
  background-size:contain;
  position: absolute;
  top: calc(20 * var(--lpSetSize));
  left: calc(-108 * var(--lpSetSize));
  opacity: 0.28;
  z-index: 0;
}
.feature .sec02 h3 img {
  position: relative;
  width: calc(587 * var(--lpSetSize));
  margin: 0 0 0 calc(82 * var(--lpSetSize));
  z-index: 1;
}


.feature .sec03 h3 {
  margin: 0 0 calc(116 * var(--lpSetSize)) 0;
  padding: calc(200 * var(--lpSetSize)) 0 0 0;
}
.feature .sec03 h3::before {
  content: '';
  width: calc(386 * var(--lpSetSize));
  height: calc(348 * var(--lpSetSize));
  background: url("../img/title.png") 0 0 no-repeat;
  background-size:contain;
  position: absolute;
  top: calc(30 * var(--lpSetSize));
  left: calc(-24 * var(--lpSetSize));
  opacity: 0.28;
  z-index: 0;
}
.feature .sec03 h3 img {
  position: relative;
  width:calc(366 * var(--lpSetSize));
  margin: 0 0 0 calc(196 * var(--lpSetSize));
  z-index: 1;
}


/* .sec01 */
.feature .sec01 {
  overflow: hidden;
  background: var(--lpSetBg01);
  padding: calc(100 * var(--lpSetSize)) 0 0 0;  
  margin-bottom:calc(100 * var(--lpSetSize));  
}
.feature .sec .slide01 {
  width:calc(644 * var(--lpSetSize));
  margin: 0 0 calc(180 * var(--lpSetSize)) 0;
  background: var(--lpSetBg01);
}
.feature .sec .img02,
.feature .sec .img03 {
  width:calc(644 * var(--lpSetSize));
  position: relative;
}
.feature .sec .img04 {
  width:calc(750 * var(--lpSetSize));
  margin: 0 0 calc(178 * var(--lpSetSize)) 0;
  position: relative;
  background: var(--lpSetBg01);
}
.feature .sec .img05 {
  width:calc(634 * var(--lpSetSize));
  margin: 0 0 calc(188 * var(--lpSetSize)) calc(116 * var(--lpSetSize));  
  position: relative;
  background: var(--lpSetBg01);  
}
.feature .sec .img06 {
  width:calc(750 * var(--lpSetSize));
  position: relative;
  background: var(--lpSetBg01);
}
.feature .sec .img06 .deco {
  position: absolute;
  width:calc(370.2352 * var(--lpSetSize));
  top:calc(180 * var(--lpSetSize));
  left:calc(130 * var(--lpSetSize));
}
.feature .sec .nolink_img02 {
  padding: calc(172 * var(--lpSetSize)) 0 0 0;
  background:var(--lpSetBg02);
}
.feature .sec .nolink_img02 figure {
  width: calc(560 * var(--lpSetSize));
  margin: 0 0 0 calc(60 * var(--lpSetSize));
}
.feature .sec .nolink_img02 .deco {
  width:calc(508.4002 * var(--lpSetSize));
  padding: calc(50 * var(--lpSetSize)) 0 0 0;
  margin:0 auto;
}
.feature .sec .nolink_img03 {
  padding: calc(140 * var(--lpSetSize)) 0 0 calc(432 * var(--lpSetSize));
  background:var(--lpSetBg02);
}
.feature .sec .nolink_img03 img {
   width:calc(260 * var(--lpSetSize)); 
}
.feature .sec .slide02 {
  background: var(--lpSetBg01);
}
.feature .sec .img07 ,
.feature .sec .img08 {
  width:calc(660 * var(--lpSetSize));
  position: relative;
}
.feature .sec .img09 {
  display:flex;
  justify-content: flex-end;
  padding: calc(90 * var(--lpSetSize)) 0 0 0; 
}
.feature .sec .img09 figure {
  width:calc(559 * var(--lpSetSize));
  background: var(--lpSetBg01);   
}
.feature .sec .img10 {
  width:calc(644 * var(--lpSetSize));
  position: relative;
  background: var(--lpSetBg01); 
}
.feature .sec .img11 {
  width:calc(750 * var(--lpSetSize));
  position: relative;
}
.feature .sec .nolink_img04 {
  z-index:1;
  position:relative;
  padding: calc(240 * var(--lpSetSize)) 0 0 calc(46 * var(--lpSetSize)); 
}
.feature .sec .nolink_img04 img {
  width:calc(495 * var(--lpSetSize));
}
.feature .sec .nolink_img05 {
  z-index:0;
  position:relative;
  margin: calc(-210 * var(--lpSetSize)) 0 calc(200 * var(--lpSetSize)) 0;
  display:flex;
  justify-content: flex-end;
}
.feature .sec .nolink_img05 img {
   width:calc(624 * var(--lpSetSize)); 
}
.feature .sec .nolink_img05 .deco {
  position:absolute;
  bottom:calc(54 * var(--lpSetSize));
  right:calc(40 * var(--lpSetSize));
  width:calc(400.1101 * var(--lpSetSize));
}
.feature .sec .nolink_img05 .deco img {
  width:100%;
}

/* .sec02 */
.feature .sec02 {
  overflow: hidden;
  background: var(--lpSetBg01);
  padding: calc(100 * var(--lpSetSize)) 0 0 0;  
  margin-bottom:calc(100 * var(--lpSetSize));
}
.feature .sec .img12 {
  width:calc(750 * var(--lpSetSize));
  position: relative;
}
.feature .sec .slide03 {
  margin: 0 0 0 calc(79 * var(--lpSetSize));
  background: var(--lpSetBg01);
}
.feature .sec .img13,
.feature .sec .img14 {
  width:calc(671 * var(--lpSetSize));
  position: relative;
}
.feature .sec .slide04 {
  width:calc(673 * var(--lpSetSize));  
  background: var(--lpSetBg01);
}
.feature .sec .img15 ,
.feature .sec .img16 {
  width:calc(673 * var(--lpSetSize));
  position: relative; 
}
.feature .sec .nolink_img06 {
  padding: calc(256 * var(--lpSetSize)) 0 0 calc(74 * var(--lpSetSize));
}
.feature .sec .nolink_img06 img {
  width:calc(277 * var(--lpSetSize)); 
}
.feature .sec .nolink_img07 {
  position: relative;
}
.feature .sec .nolink_img07 .deco {
  position: absolute;
  top:calc(30 * var(--lpSetSize));
  left:calc(30 * var(--lpSetSize));
  width:calc(696 * var(--lpSetSize));
  height: calc(100% - (60 * var(--lpSetSize)));
  border:var(--lpSetTxt01) calc(4 * var(--lpSetSize)) solid;
}
.feature .sec .nolink_img07 .deco img {
  width:calc(516.1529 * var(--lpSetSize));
  margin: calc(350 * var(--lpSetSize)) 0 0 calc(80 * var(--lpSetSize));
}
.feature .sec .img17 {
  position:relative;
  padding: calc(230 * var(--lpSetSize)) 0 calc(244 * var(--lpSetSize));
}
.feature .sec .img17 .sec__img {
  width:calc(624.5553 * var(--lpSetSize));
  margin: 0 auto;
  background: var(--lpSetBg01);
}
.feature .sec .img18 {
  width:calc(750 * var(--lpSetSize));
  padding: 0 0 calc(100 * var(--lpSetSize)) 0;
}

/* .sec03 */
.feature .sec03 {
  overflow: hidden;
  background: var(--lpSetBg01);
  padding: calc(100 * var(--lpSetSize)) 0 0 0;
}
.feature .sec .img19 {
  width:calc(642 * var(--lpSetSize));
  position: relative;
}
.feature .sec .img20 {
  width:calc(624 * var(--lpSetSize));
  margin: 0 0 0 calc(126 * var(--lpSetSize));
  padding: calc(90 * var(--lpSetSize)) 0 0 0; 
  position: relative;
  background: var(--lpSetBg01);
}
.feature .sec .img21 {
  padding: calc(426 * var(--lpSetSize)) 0 0 0;
  width:calc(590 * var(--lpSetSize));  
  position: relative;
}
.feature .sec .img21 figure {
  background: var(--lpSetBg01);
}
.feature .sec .nolink_img08 {
  padding: calc(200 * var(--lpSetSize)) 0 calc(160 * var(--lpSetSize)) 0;
}
.feature .sec .nolink_img08 figure {
  width:calc(387 * var(--lpSetSize));
  margin: 0 auto;
}

/* credit */
.feature .sec__credit {
  position: absolute;
  bottom: calc(28 * var(--lpSetSize));
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width:100%;
}
.feature .sec__credit .credit{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap:calc(8 * var(--lpSetSize)) 0;
}
.feature .sec__credit .credit li {
  font-family: "arsenica-variable", sans-serif;
  font-variation-settings: "opsz" 100, "wght" 400;
  color: var(--lpSetTxt01);
  font-size: calc(23 * var(--lpSetSize));
  letter-spacing: 0.030em;
  line-height: 1;
}
.feature .sec__credit .credit li .price {
  margin-left: 0.5em;
}
.feature .sec__credit .credit li {
  position: relative;
}
.feature .sec__credit .credit li,
.feature .sec__credit .credit a {
  display: flex;
}
.feature .sec__credit .credit li.separator::after {
  content: "/";
  margin: 0 0.5em;
}
.feature .sec__credit .credit li:last-of-type::after {
  content: none !important;
}

/* .img04 .sec__credit */
.feature .sec .img04 .sec__credit{
  bottom: calc(36 * var(--lpSetSize));
}
.feature .sec .img04 .sec__credit .credit li:nth-of-type(3)::after {
  content: none !important;
}
.feature .sec .img04 .sec__credit .credit li:nth-of-type(3) a {
  display: flex;
  justify-content: center;
  width: calc(600 * var(--lpSetSize));  
}
.feature .sec__credit .credit li:nth-of-type(4)::after {
  content: "/";
  margin: 0 0.5em;
}

/* .img11 .sec__credit */
/* .img12 .sec__credit */
.feature .sec .img11 .sec__credit,
.feature .sec .img12 .sec__credit{
  bottom: calc(36 * var(--lpSetSize));
}

/* .img17 .sec__credit */
.feature .sec .img17 .sec__credit{
  bottom: calc(274 * var(--lpSetSize));
}

/* .img19 .sec__credit */
.feature .sec .img19 .sec__credit{
  bottom: calc(18 * var(--lpSetSize));
}

/* .img21 .sec__credit */
.feature .sec .img21 .sec__credit{
  bottom: calc(24 * var(--lpSetSize));
}

/* .bg */
.feature .sec .bg01 {
  position: relative;
  background: var(--lpSetBg01);
}
.feature .sec .bg01 * {
  z-index:1;
}
.feature .sec .bg01::after {
  content: '';
  position: absolute;
  top: calc(334 * var(--lpSetSize));
  left: 0;
  z-index:0;
  width: 100%;
  height: 100%;
  background: url("../img/bg01.png") repeat-y;
  background-size: calc(750 * var(--lpSetSize)) auto;
}
.feature .sec .bg02 {
  background: url("../img/bg02.png") left top no-repeat;
  background-size: calc(750 * var(--lpSetSize)) auto;
  padding: calc(210 * var(--lpSetSize)) calc(45 * var(--lpSetSize)) calc(212 * var(--lpSetSize));
}
.feature .sec .bg03 {
  padding: 0 0 calc(168 * var(--lpSetSize)) 0;
  background: url("../img/bg03.jpg") left top no-repeat;
  background-size: calc(750 * var(--lpSetSize)) auto;
}
.feature .sec .bg04 {
  background: url("../img/bg04.png") left top no-repeat;
  background-size: calc(750 * var(--lpSetSize)) auto;
  padding: calc(230 * var(--lpSetSize)) 0 0 0;
}
.feature .sec .bg05 {
  background: url("../img/bg05.png") calc(72 * var(--lpSetSize)) calc(60 * var(--lpSetSize)) no-repeat;
  background-size: calc(660 * var(--lpSetSize)) auto;
}
.feature .sec .bg06 {
  background-image: url("../img/bg06.jpg"), url("../img/bg04.png");
  background-size: calc(750 * var(--lpSetSize)) auto , calc(750 * var(--lpSetSize)) auto;
  background-position: left calc(610 * var(--lpSetSize)), left bottom;
  background-color: var(--lpSetBg01);
  background-repeat: no-repeat, no-repeat;
}

.feature .sticky {
  position: sticky;
  top: 0;
}


/* .sec_bottom
----------------------------- */
.feature .sec_bottom {
  background: #ffffff;
  padding: calc(144 * var(--lpSetSize)) 0 calc(130 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn {
  color: #595757;  
  font-family: "arsenica-variable", sans-serif;
  font-variation-settings: "opsz" 1000, "wght" 400;
  font-style: italic;
  font-size: calc(51.21 * var(--lpSetSize));
  letter-spacing:0.010em;
  text-align:center;
  margin: 0 0 calc(80 * var(--lpSetSize)) 0;
}
.feature .sec_bottom .sec__btn a {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding:0 calc(24 * var(--lpSetSize)) 0 calc(16 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn a::before {
  content:'';
  display:block;
  width:calc(153 * var(--lpSetSize));
  height:calc(200 * var(--lpSetSize));
  background:url("../img/btn_img.png") 0 0 no-repeat;
  background-size:cover;
  margin: 0 0 calc(-10 * var(--lpSetSize)) calc(-18 * var(--lpSetSize));
}
.feature .sec_bottom .staff {
  color: #595757;  
  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;
}


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

/* フェードイン */
.js-fade-in {
  opacity:0;
  visibility:hidden;
  transition:opacity 2s ease, transform 0.8s ease;
  will-change:opacity;
}
.js-fade-in.is-show {
  opacity:1;
  transform:none;
  visibility:visible;
}

/* 下から上 */
.feature .js-slide-up {
  transition: transform 1s, opacity 1s;
  transform: translate(0px, calc(30 * var(--lpSetSize)));
  will-change: transform;
  opacity: 0;
}
.feature .js-slide-up.is-show {
  transform: translate(0px, 0px);
  opacity: 1;
}

/* 時差 */
.feature .is-show.--1 {
  transition-delay: 1.2s !important;
}
.feature .is-show.--2 {
  transition-delay: 1.4s !important;
}
.feature .is-show.--3 {
  transition-delay: 1.6s !important;
}
.feature .is-show.--4 {
  transition-delay: 1.8s !important;
}

/* mask */
.feature [data-fade="mask"]{
  overflow: hidden;
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, #000, #000 33%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000, #000 33%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-size: 100% 300%;
  mask-size: 100% 300%;
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
  transition: all 2s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  height: fit-content;
  width: fit-content;
}
.feature [data-fade="mask"] img{
  transform: scale(1.06);
  transition: transform 2s;
}
.feature [data-fade="mask"][data-is-active="true"]{
  opacity: 1;
  -webkit-mask-position: 0% 0%;
  mask-position: 0% 0%;
}
.feature [data-fade="mask"][data-is-active="true"] img{
  transform: scale(1);
}

/* mask(slide) */
.feature .js-clip-down  {
  opacity: 0;
  mask-image: linear-gradient(to bottom, #000, #000 33%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0) 100%);
  mask-size: 100% 300%;
  mask-position: 0 100%;
  display: block;
  will-change: mask-image;
  transform: scale(1.001) scale(1.035);
}
.feature .js-clip-down.is-show  {
  opacity: 1;
  mask-position: 0% 0%;
  transition: mask-position, transform;
  transition-duration: 3.5s; 
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: scale(1.006);
}


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

@media screen and (min-width: 1440px) {  
  :root {
    --lpSetSize: 1px * 0.53333333;
  }
  .feature .f_left,
  .feature .f_right {
    width: calc(50% - 200px);
  }
  .feature .f_right .f_right__btn {
    font-size: 23.53px;
  }
  .feature .f_right .f_right__btn a::before {
    FONT-WEIGHT: 200;
    width: 70.1015px;
    height: 91.6638px;
    margin: -4px 0 -4px -10px;
  }
  .feature .f_main {
    width: 400px;
  }

}