@charset "UTF-8";

:root {
  --lpSetSize: (100vw / 1400) * 0.6346666;
  --lpSetTxt01: #000000;
  --lpSetTxt02: #535655;
}
html {
  scroll-behavior: smooth;
}
.l-container {
  width: 100%;
}
.feature {
  width: 100%;
  font-feature-settings: "palt";
  font-family:"yu-gothic-pr6n",'游ゴシック体', 'YuGothic', '游ゴシック Medium', 'Yu Gothic', メイリオ, sans-serif;
  font-weight: normal;
  font-style: normal;
  color: var(--lpSetTxt01);
  background: #f0eeea;
}
.feature * {
  margin: 0;
  box-sizing: border-box;
}
.feature img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.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
----------------------------- */
.feature .f_left {
  width: 50%;
}
.feature .f_left .f_left__box {
  position: relative;
  height: 100%;
}
.feature .f_left .f_left__box .hero__img {
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  margin-inline: auto;
  width: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.feature .f_left .f_left__box .hero__img h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: calc(625 * (100vw / 1400));
}
.feature .f_left .f_left__box .hero__img h2 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* .f_right .f_main
----------------------------- */
.feature .f_right {
  width: 50%;
}
.feature .f_main {
  width: calc(476 * (100vw / 1400));
  margin: 0 auto;
}


/* credit
*******************************/
.sec__credit {
  padding: calc(30 * var(--lpSetSize)) 0 calc(70 * var(--lpSetSize));
}
.feature .sec__credit .credit {
  display: flex;
  flex-wrap: wrap;
  gap: calc(0 * var(--lpSetSize)) calc(20 * var(--lpSetSize));
  justify-content: center;
}
.feature .sec__credit .credit li {
  font-family: "pragmatica", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--lpSetTxt02);  
  font-size: calc(22 * var(--lpSetSize));
  letter-spacing: 0.03em;
  line-height: 2.0;
}
.feature .sec__credit .credit li .price {
  margin-left: calc(4 * var(--lpSetSize));
}

/* 以下、クレジット間に「/」を入れる場合 
.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-left: calc(8 * var(--lpSetSize));
}
.feature .sec__credit .credit li:last-of-type::after {
  content: none !important;
}
*/


/* svg .text
*******************************/
.feature .deco {
  position: relative;
  width: calc(750 var(--lpSetSize));
}


/* .sec__slide
*******************************/
.feature .sec__slide {
  margin-bottom: 0;
}
.feature .slick-dots {
  position: absolute;
  right: calc(12 * var(--lpSetSize));
  bottom: calc(20 * var(--lpSetSize));
  width: fit-content;
  z-index: 1;
}
.feature .slick-dots li {
    width: calc(14 * var(--lpSetSize));
    height: calc(14 * var(--lpSetSize));
    margin: 0 calc(8 * var(--lpSetSize));
}
.feature .slick-dots li button {
    width: calc(14 * var(--lpSetSize));
    height: calc(14 * var(--lpSetSize));
    padding: calc(6 * var(--lpSetSize));
}
.feature .slick-dots li button:before {
    content: '';
    width: calc(14 * var(--lpSetSize));
    height: calc(14 * var(--lpSetSize));
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
    background:var(--lpSetTxt02);
    border-radius: calc(10 * var(--lpSetSize));
}
.feature .slick-dots li.slick-active button:before {
    opacity: 1;
    background:var(--lpSetTxt02);
}


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

/* .hero
----------------------------- */
.feature .hero {
  margin: 0 0 calc(140 * var(--lpSetSize)) 0;
  overflow: hidden;
}
.feature .hero .video_wrap {
  background: #f0eeea;
  transform: scale(1.01);
  position:relative;
}
.feature .hero .video_wrap::after {
  content:'';
  width: 3px;
  height:100%;
  background: #f0eeea;
  position:absolute;
  top:0;
  right: 1px;
}
.feature .hero .video_wrap::before {
  content:'';
  width:100%;
  height: 3px;
  background: #f0eeea;
  position:absolute;
  bottom: -1px;
  left:0;
}
.feature .hero .video_wrap video {
  display: block;
  width: 100%;
  height: 100%;
  vertical-align: bottom;
  object-fit: cover;
}
.feature .hero__lead {
  font-size: calc(24 * var(--lpSetSize));
  line-height: 2.0;
  letter-spacing: 0.08em;
  text-align:center;
  padding: calc(80 * var(--lpSetSize)) 0 calc(70 * var(--lpSetSize));
}

/* .sec__btn
----------------------------- */
.feature .sec__btn {
  font-family: "pragmatica", sans-serif;
  font-weight: 400;
  font-style: normal;  
  font-size: calc(34 * var(--lpSetSize));
  line-height: 2.0;
  letter-spacing: 0.03em;
  text-align:center;
  color: var(--lpSetTxt02);
  border-bottom: calc(2 * var(--lpSetSize)) solid var(--lpSetTxt02);
  position: relative;
  width: fit-content;
  margin: 0 auto;
  padding: 0 calc(45 * var(--lpSetSize)) 0 0;
}
.feature .sec__btn::after {
  content: '';
  width: calc(15 * var(--lpSetSize));
  height: calc(26 * var(--lpSetSize));
  background: url(../img/arrow.svg) 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  top: calc(20 * var(--lpSetSize));
  right: 0;
}

/* .sec01
----------------------------- */
.feature .sec01 {
  margin: 0 0 calc(142 * var(--lpSetSize)) 0;
}
.feature .img01 {
  width: calc(670 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .img02 {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 calc(80 * var(--lpSetSize)) 0;
}
.feature .img02 img {
  width: calc(490 * var(--lpSetSize));
}
.feature .img03 {
  width: calc(570 * var(--lpSetSize));
}

/* .sec02
----------------------------- */
.feature .sec02 {
  margin: 0 0 calc(60 * var(--lpSetSize)) 0;
}
.feature .img04 {
}
.feature .img05 img {
  width: calc(450 * var(--lpSetSize));
}
.feature .sec02 .slide_wrap {
  width: calc(750 * var(--lpSetSize));
  overflow: hidden;
}
.feature .sec02 .sec__slide-center {
  width: calc(1350 * var(--lpSetSize));
  overflow: visible;
}
.feature .sec02 .credit {
  width: calc(650 * var(--lpSetSize));
  margin: 0 auto;
  justify-content: center;
}
.feature .sec02 .credit li:nth-of-type(2) {
  margin: 0 calc(50 * var(--lpSetSize));
}
.feature .img06 {
  width: calc(550 * var(--lpSetSize));
  margin: calc(-34 * var(--lpSetSize)) auto 0;
  z-index: 0;
  position: relative;
}
.feature .sec02 .text_hero {
  width: calc(460.3496 * var(--lpSetSize));
  margin: calc(152 * var(--lpSetSize)) auto 0;
  z-index: 1;
  position: relative;
}
.feature .sec02 .text {
  width: calc(26.3301 * var(--lpSetSize));
  position:absolute;
  top: calc(456 * var(--lpSetSize));
  right: calc(82 * var(--lpSetSize));
  z-index: 1;
}

/* .sec03
----------------------------- */
.feature .sec03 {
}
.feature .img07 {
  width: calc(690 * var(--lpSetSize));
  margin: 0 0 calc(60 * var(--lpSetSize)) 0;  
}
.feature .img08 {
  display: flex;
  justify-content: flex-end;
}
.feature .img08 img {
  width: calc(530 * var(--lpSetSize));
}
.feature .sec03 .credit {
  width: calc(650 * var(--lpSetSize));
  margin: 0 auto;
  justify-content: center;
}
.feature .img09 {
  width: calc(550 * var(--lpSetSize));
  margin: calc(-34 * var(--lpSetSize)) auto 0;
  position:relative;
  z-index:0;
}
.feature .sec03 .text_hero {
  width: calc(460.3496 * var(--lpSetSize));
  margin: 0 auto;
  padding: calc(72 * var(--lpSetSize)) 0 0 0; 
  position:relative;
  z-index:1;  
}
.feature .sec03 .text {
  width: calc(27.2803 * var(--lpSetSize));
  position:absolute;
  top: calc(800 * var(--lpSetSize));
  right: calc(84 * var(--lpSetSize));
  z-index:1;  
}

/* .sec04
----------------------------- */
.feature .sec04 {
  padding: 0 0 calc(60 * var(--lpSetSize)) 0;
}
.feature .img10 {
  display:flex;
  justify-content: flex-end;
  padding: calc(60 * var(--lpSetSize)) 0 0 0;
}
.feature .img10 img {
  width: calc(470 * var(--lpSetSize));
}
.feature .img11 {
  width: calc(350 * var(--lpSetSize));
  margin: calc(-304 * var(--lpSetSize)) 0 calc(80 * var(--lpSetSize))  0;
}
.feature .img12 {
  width: calc(750 * var(--lpSetSize));
}

/* .sec05
----------------------------- */
.feature .sec05 {
}
.feature .img13 {
  width: calc(630 * var(--lpSetSize));
  margin: 0 auto calc(80 * var(--lpSetSize));
}
.feature .img14 {
  width: calc(450 * var(--lpSetSize));
  margin: 0 0 calc(80 * var(--lpSetSize)) 0;  
}
.feature .img15 img {
  width: calc(450 * var(--lpSetSize));
}
.feature .sec05 .slide_wrap {
  width: calc(670 * var(--lpSetSize));
  margin: 0 0 0 calc(80 * var(--lpSetSize));
  overflow: hidden;
}
.feature .sec05 .sec__slide-center {
  width: calc(1350 * var(--lpSetSize));
  overflow: visible;
}
.feature .sec05 .credit {
  width: calc(600 * var(--lpSetSize));
  margin: 0 auto;
  justify-content: center;
}

/* .sec_bottom
----------------------------- */
.feature .sec_bottom {
  background: var(--lpSetBg01);
  padding: calc(118 * var(--lpSetSize)) 0 calc(120 * var(--lpSetSize));
}
.feature .sec_bottom .text_hero {
  width: calc(534.998 * var(--lpSetSize));
  margin: 0 auto calc(70 * var(--lpSetSize));
}
.feature .sec_bottom .date {
  text-align:center;
  font-size: calc(24 * var(--lpSetSize));
  line-height: 2.0;
  letter-spacing: 0.03em;
  margin: 0 0 calc(70 * var(--lpSetSize)) 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;
}