@charset "UTF-8";
:root {
  --lpSetSize: (100vw / 2100) * 0.9;
}
html {
  scroll-behavior:smooth;
}
.l-container {
  width:100%;
}
.feature {
  width:100%;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-style: normal;
  color: #353535;
}
.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;  
}

/*****************************************************
.feature (PC)
*****************************************************/

/* 共通
----------------------------- */
html { scroll-padding-top: 80px;}
.feature a { transition: opacity 0.3s;}
.feature a:hover { cursor: pointer; opacity: .7;}
.feature .sec__img { background: #ffffff;}
.l-footer { padding-top: 0 !important;}
.pc-footer { margin-top: 0 !important;}

/* .feature（大枠）
----------------------------- */
.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 .f_left__title {
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  overflow: hidden;  
}
.feature .f_left .f_left__box .f_left__title figure {
  border: 1px solid #ffffff;
  display: block;
  height: 100%;
}
.feature .f_left .f_left__box .f_left__title figure img {
  width: calc(100% - (20 * (100vw / 2100)));
  height: calc(100vh - 80px - (22 * (100vw / 2100)));
  margin: calc(9 * (100vw / 2100));
  object-fit: cover;
  object-position: center top;  
  position: absolute;
  top:0;
  left:0;
  z-index: 0;
}
.feature .f_left .f_left__box .f_left__title h1 {
  border: 1px solid #e5e5e5;  
  display: block;
  height: 100%;
}
.feature .f_left .f_left__box .f_left__title h1 img {
  width: calc(100% - (20 * (100vw / 2100)));
  height: calc(100vh - 80px - (22 * (100vw / 2100)));
  margin: calc(9 * (100vw / 2100));
  object-fit: cover;
  object-position: center top;  
  position: absolute;
  top:0;
  left:0;
  z-index: 1;
}

/* .f_main
----------------------------- */
.feature .f_main {
  width: 50%;
}
.feature .f_main .inner {
  width: calc(675 * (100vw / 2100));
  margin: 0 auto;
}


/*****************************************************
.feature (PC・SP共通)
*****************************************************/
.feature .f_main {
  background: #ffffff;
  transition: 0.5s ease;
}
.feature:has(.sec01.on) .f_main { background: #ffffff;}
.feature:has(.sec02.on) .f_main { background: #eff9d7;}
.feature:has(.sec03.on) .f_main { background: #ffffff;}
.feature:has(.sec04.on) .f_main { background: #eff9d7;}
.feature:has(.sec05.on) .f_main { background: #ffffff;}
.feature:has(.sec06.on) .f_main { background: #eff9d7;}
.feature:has(.sec07.on) .f_main { background: #eff9d7;}
.feature:has(.sec08.on) .f_main { background: #ffffff;}

.feature .sec01 {
  padding: calc(120 * var(--lpSetSize)) 0 0 0;
}
.feature .sec02,
.feature .sec03,
.feature .sec04,
.feature .sec05,
.feature .sec06,
.feature .sec08 {
  padding: calc(160 * var(--lpSetSize)) 0 0 0;
} 


/* .sec
----------------------------- */
.feature .sec .img01 {
  position:relative;
  z-index:1;  
  width: calc(560 * var(--lpSetSize));
}
.feature .sec .img02 {
  width: calc(600 * var(--lpSetSize));
  margin: calc(-50 * var(--lpSetSize)) 0 calc(80 * var(--lpSetSize)) calc(150 * var(--lpSetSize));
}
.feature .sec01 .sec__slide,
.feature .sec01 .credit01 {
  width: calc(660 * var(--lpSetSize));
  margin: 0 auto;
} 
.feature .sec .img03,
.feature .sec .img04 {
  width: calc(660 * var(--lpSetSize));
}
.feature .sec .img05,
.feature .sec .credit01_item {
  width: calc(440 * var(--lpSetSize));
  margin: 0 0 0 calc(100 * var(--lpSetSize));
}
.feature .sec02 .sec__slide {
  margin: 0 0 calc(80 * var(--lpSetSize)) 0;
} 
.feature .sec .img06,
.feature .sec .img07 {
  width: calc(560 * var(--lpSetSize));
  margin: 0 calc(30 * var(--lpSetSize)) 0 0;
}
.feature .sec .img08 {
  width: calc(500 * var(--lpSetSize));
  margin: 0 0 calc(80 * var(--lpSetSize)) calc(50 * var(--lpSetSize));
}
.feature .sec .img09,
.feature .sec .credit02 {
  width: calc(600 * var(--lpSetSize));
  margin: 0 0 0 calc(150 * var(--lpSetSize));
}
.feature .sec .img10 {
  width: calc(750 * var(--lpSetSize));
}
.feature .sec .img11 {
  position:relative;
  z-index:1;  
  width: calc(540 * var(--lpSetSize));
  margin: calc(-50 * var(--lpSetSize)) 0 calc(30 * var(--lpSetSize)) calc(50 * var(--lpSetSize));  
}
.feature .sec .img12 {
  width: calc(540 * var(--lpSetSize));
  margin: 0 0 calc(80 * var(--lpSetSize)) calc(50 * var(--lpSetSize));
}
.feature .sec .img13,
.feature .sec .credit03 {
  width: calc(460 * var(--lpSetSize));
  margin: 0 0 0 calc(240 * var(--lpSetSize));
}
.feature .sec .img14,
.feature .sec .credit03_item {
  width: calc(500 * var(--lpSetSize));
  margin: 0 0 0 calc(100 * var(--lpSetSize));
}
.feature .sec04 .sec__slide {
  width: calc(660 * var(--lpSetSize));
  margin: 0 auto calc(80 * var(--lpSetSize));
}
.feature .sec .img15,
.feature .sec .img16 {
  width: calc(660 * var(--lpSetSize));
}
.feature .sec .img17 {
  width: calc(460 * var(--lpSetSize));
  margin: 0 0 calc(80 * var(--lpSetSize)) calc(290 * var(--lpSetSize));
}
.feature .sec .credit04 {
  width: calc(600 * var(--lpSetSize));
  margin: 0 0 0 calc(50 * var(--lpSetSize));
}
.feature .sec .img18 {
  width: calc(600 * var(--lpSetSize));
}
.feature .sec05 .sec__slide {
  margin: 0 0 calc(80 * var(--lpSetSize)) 0;
}
.feature .sec .img19,
.feature .sec .img20 {
  width: calc(500 * var(--lpSetSize));
  margin: 0 calc(30 * var(--lpSetSize)) 0 0;
}
.feature .sec .img21 {
  width: calc(750 * var(--lpSetSize));
}
.feature .sec .img22 {
  width: calc(520 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec06 .sec__slide {
  width: calc(600 * var(--lpSetSize));
  margin: 0 0 calc(80 * var(--lpSetSize)) calc(150 * var(--lpSetSize));
}
.feature .sec .img23,
.feature .sec .img24 {
  width: calc(600 * var(--lpSetSize));
}
.feature .sec .credit06 {
  margin: 0 0 0 calc(50 * var(--lpSetSize));
}
.feature .sec .img25 {
  width: calc(520 * var(--lpSetSize));
  margin: 0 0 0 calc(50 * var(--lpSetSize));
}
.feature .sec .img26 {
  width: calc(640 * var(--lpSetSize));
}
.feature .sec .img27 {
  position:relative;
  z-index:1;
  width: calc(440 * var(--lpSetSize));
  margin: calc(-40 * var(--lpSetSize)) 0 calc(30 * var(--lpSetSize)) calc(260 * var(--lpSetSize));
}
.feature .sec .img28,
.feature .sec .credit07 {
  width: calc(440 * var(--lpSetSize));
  margin: 0 0 0 calc(260 * var(--lpSetSize));
}
.feature .sec .img29 {
  width: calc(750 * var(--lpSetSize));
  margin: 0 0 calc(80 * var(--lpSetSize)) 0;
}
.feature .sec .img30 {
  width: calc(560 * var(--lpSetSize));
  margin: 0 0 calc(80 * var(--lpSetSize)) 0;
}
.feature .sec .img31 {
  width: calc(480 * var(--lpSetSize));
  margin: 0 0 calc(80 * var(--lpSetSize)) calc(270 * var(--lpSetSize));
}
.feature .sec .img32,
.feature .sec .credit08 {
  width: calc(640 * var(--lpSetSize));
  margin: 0 auto;
}


/* credit
----------------------------- */
.feature .sec__credit {
  padding: calc(32 * var(--lpSetSize)) 0 calc(158 * var(--lpSetSize)) 0;
}
.feature .sec__credit .credit{
  display: flex;
  flex-wrap: wrap;
  /* gap: calc(0 * var(--lpSetSize)) 0; */
  justify-content: center;
}
.feature .sec .credit01_item .credit,
.feature .sec .credit02 .credit,
.feature .sec .credit03 .credit,
.feature .sec .credit04 .credit,
.feature .sec .credit03_item .credit,
.feature .sec .credit06 .credit,
.feature .sec .credit07 .credit {
  justify-content: flex-start;
}
.feature .sec__credit .credit li {
  font-family: "helvetica-neue-lt-pro", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: calc(20 * var(--lpSetSize));
  letter-spacing: 0.040em;
  line-height: 1.5;
}
.feature .sec__credit .credit li .price {
  margin-left: calc(6 * 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: 0 calc(6 * var(--lpSetSize));
}
.feature .credit01 .credit li:nth-of-type(3)::after,
.feature .sec__credit .credit li:last-of-type::after {
  content: none !important;
}


/* slide
---------------------------- */
.feature .slick-dots {
  position: absolute;
  width: calc(60 * var(--lpSetSize));
  right: calc(10 * var(--lpSetSize));
  bottom: calc(20 * var(--lpSetSize));
  z-index: 10;
}
.feature .slick-dots li {
  /* position: relative; */
  display: inline-block;
  width: calc(10 * var(--lpSetSize));
  height: calc(10 * var(--lpSetSize));
  border: 1px solid #ffffff;
  border-radius: 50%;
  margin: 0 calc(10 * var(--lpSetSize));
}
.feature .slick-dots li.slick-active {
  border: 1px solid #ffffff;
  background: #ffffff;
  height: calc(10 * var(--lpSetSize));
}
.feature .slick-dots li button {
    width: calc(30 * var(--lpSetSize));
    height: calc(10 * var(--lpSetSize));
    padding: 0;
}
.feature .slick-dots li button:before {
    content: '';
}


/* .sec_bottom
----------------------------- */
.feature .sec_bottom {
  padding: calc(10 * var(--lpSetSize)) calc(34 * var(--lpSetSize)) calc(230 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn {
  font-family: "benton-modern-display", serif;
  font-weight: 300;
  font-style: normal;
  font-size: calc(31 * var(--lpSetSize));
  letter-spacing: 0.040em;
  line-height: 1.0;
  text-align: center;
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: calc(26 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn::after {
  content: "";
  display: block;
  width: calc(160 * var(--lpSetSize));
  height: 1px;
  background: #353535;
  position: absolute;
  bottom: calc(-26 * var(--lpSetSize));
  left: 0;
  right: 0;
  margin: auto;
  transition: transform 2s ease;
  transform: scale(0);
}
.feature .sec_bottom .sec__btn.is_show::after {
  content: "";
  transform: scale(1);
  transition: transform 2s ease;
}


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

/* .js_fadein
----------------------------- */
.feature .js_anime.js_fadein {
  opacity: 0;
  transition: opacity 1s ease-in;
}
.feature .js_anime.js_fadein.is_show {
  opacity: 1;
}
.feature .js_anime.js_fadein.--1.is_show {
  transition-delay: 0.6s;
}


/*****************************************************
レスポンシブ対応 (PC ONLY)
*****************************************************/
@media screen and (min-width: 2100px) { 
  :root {
    --lpSetSize: 1px * 0.9;
  }
  .feature .f_main .inner {
    width: 675px;
  }
}