@charset "UTF-8";

.feature {
  --lpSetSize: (100vw / 1400) * 0.6533333;
}
html {
  scroll-behavior:smooth;
}
.l-container {
  width:100%;
}
.feature {
  width:100%;
  font-family: "yu-gothic-pr6n", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #000000;
}
.feature * {
  margin:0;
  box-sizing:border-box;
  font-weight: normal;
}
.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: #eae9e5;}
.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 img {
  width: 100%;
  height: calc(100vh - 80px);
  object-fit: cover;
  object-position: center top;
  /*object-position: center center;*/
  position: absolute;
  top:0;
  left:0;
  z-index: 0;
}
.feature .f_left .f_left__box .f_left__title h1 {
  width: calc(408* (100vw / 1400));
  position: absolute;
  bottom: calc(15 * (100vw / 1400));
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 1;
}

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

/*****************************************************
.feature (PC・SP共通)
*****************************************************/
.feature .f_main {
  background: #ffffff;
}
.feature .lead {
  font-size: calc(22 * var(--lpSetSize));
  line-height: 2.0;
  letter-spacing: 0;
}

/* .wrap_lead
----------------------------- */
.feature .wrap_lead {
  padding-bottom:calc(200 * var(--lpSetSize));
}
.feature .wrap_lead {
  padding: calc(110 * var(--lpSetSize)) 0 calc(130 * var(--lpSetSize));
}
.feature .wrap_lead .lead {
  text-align: center;
}

/* .sec
----------------------------- */
.feature .sec {
  background: #eae9e5;
  padding-top: calc(200 * var(--lpSetSize));
}
.feature .sec01 {
  padding-top: calc(160 * var(--lpSetSize));
}
.feature .sec07 {
  padding-bottom: calc(160 * var(--lpSetSize));
}
.feature h2 {
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
  margin-bottom: calc(92 * var(--lpSetSize));
}
.feature h2::after {
  content: '';
  width: 100%;
  height: calc(2 * var(--lpSetSize));
  background: #000000;
  opacity: 0.2;
}
.feature h2 span {
  display: block;
}
.feature .sec01 span.number {
  width: calc(108 * var(--lpSetSize));
  margin-bottom: calc(42 * var(--lpSetSize));
}
.feature .sec02  span.number, 
.feature .sec03  span.number, 
.feature .sec04  span.number, 
.feature .sec05  span.number, 
.feature .sec06  span.number, 
.feature .sec07  span.number {
  width: calc(132 * var(--lpSetSize));
  margin-bottom: calc(50 * var(--lpSetSize));
}
.feature .sec h2 span.en {
  font-family: "ivyora-display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(54 * var(--lpSetSize));
  letter-spacing: 0.050em;
  line-height: 1;
  margin-bottom: calc(20 * var(--lpSetSize));
}
.feature .sec h2 span.ja {
  font-size: calc(26 * var(--lpSetSize));
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: calc(30 * var(--lpSetSize));
}
.feature .sec .lead:first-of-type {
  text-align: center;
  margin: calc(90 * var(--lpSetSize)) 0 calc(46 * var(--lpSetSize));
}
.feature .sec .lead:last-of-type {
  text-align: left;
  margin: calc(96 * var(--lpSetSize)) calc(80 * var(--lpSetSize)) calc(90 * var(--lpSetSize));
  letter-spacing: -0.030em;
}
.feature .sec .img01,
.feature .sec .img03,
.feature .sec .img05,
.feature .sec .img07,
.feature .sec .img09,
.feature .sec .img11,
.feature .sec .img12,
.feature .sec .img13 {
  width: calc(640 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec01 .sec__slide {
  width: calc(560 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec02 .sec__slide {
  width: calc(600 * var(--lpSetSize));
  margin: 0 0 0 calc(40 * var(--lpSetSize));
}
.feature .sec03 .sec__slide {
  width: calc(640 * var(--lpSetSize));
}
.feature .sec .img08 {
  width: calc(600 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec05 .sec__slide {
  width: calc(640 * var(--lpSetSize));
  margin: 0 0 0 calc(110 * var(--lpSetSize));
}
.feature .sec .img12 {
  width: calc(560 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec07 .sec__slide {
  width: calc(640 * var(--lpSetSize));
  margin: 0 auto;
}

/* credit
----------------------------- */
.feature .sec__credit {
  padding-top: calc(28 * var(--lpSetSize));
}
.feature .sec .credit01,
.feature .sec .credit03,
.feature .sec .credit05,
.feature .sec .credit07,
.feature .sec .credit09,
.feature .sec .credit11,
.feature .sec .credit12,
.feature .sec .credit13 {
  width: calc(640 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec .credit02 {
  width: calc(600  * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec .credit04 {
  width: calc(600 * var(--lpSetSize));
  margin: 0 0 0 calc(40 * var(--lpSetSize));
}
.feature .sec .credit06 {
  width: calc(500 * var(--lpSetSize));
  margin: 0 0 0 calc(140 * var(--lpSetSize));
}
.feature .sec .credit08 {
  width: calc(400 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec .credit10 {
  width: calc(640 * var(--lpSetSize));
  margin: 0 0 0 calc(110 * var(--lpSetSize));
}
.feature .sec .credit12 {
  width: calc(560 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec .credit14 {
  width: calc(550 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec__credit .credit {
  display:flex;
  gap: calc(16 * var(--lpSetSize)) calc(12 * var(--lpSetSize));
  flex-wrap: wrap;
}
.feature .sec .credit01 .credit,
.feature .sec .credit03 .credit,
.feature .sec .credit05 .credit,
.feature .sec .credit07 .credit,
.feature .sec .credit09 .credit,
.feature .sec .credit11 .credit,
.feature .sec .credit13 .credit {
  justify-content: center;
}
.feature .sec .credit02 .credit {
  justify-content: center; 
}
.feature .sec .credit04 .credit {
}
.feature .sec .credit06 .credit {
  justify-content: flex-end; 
}
.feature .sec .credit08 .credit {
  justify-content: center;
}
.feature .sec .credit10 .credit {
}
.feature .sec .credit12 .credit {
  justify-content: center;
}
.feature .sec .credit14 .credit {
  justify-content: center;
}
.feature .sec__credit .credit li {
  font-family: "ivyora-display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(20 * var(--lpSetSize));
  letter-spacing: 0.050em;
  line-height: 1.0;
}
.feature .sec__credit .credit li {
  position: relative;
}
.feature .sec__credit .credit li,
.feature .sec__credit .credit a {
  display: flex;
  gap: 0.3em;
}

/* .sec_bottom
----------------------------- */
.feature .sec_bottom {
  background: #ffffff;
  padding: calc(140 * var(--lpSetSize)) 0 calc(200 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn {
  text-align: center;
}
.feature .sec_bottom .sec__btn a {
  width: calc(620 * var(--lpSetSize));
  margin:0 auto;
  font-family: "ivyora-display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(45 * var(--lpSetSize));
  letter-spacing: 0.050em;
  line-height: calc(110 * var(--lpSetSize));
  border: calc(1 * var(--lpSetSize)) solid #000000;
}

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


/*****************************************************
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: 1400px) { 
  .feature {
    --lpSetSize: 1px * 0.6533333;
  }
  .feature .f_main .inner {
    width: 490px;
  }
}