@charset "UTF-8";
:root {
  --lpSetSize: (100vw / 1400) * 0.6666666;
}
html {
  scroll-behavior:smooth;
}
.l-container {
  width:100%;
}
.feature {
  width:100%;
  font-family: "ivyora-text", serif;
  font-weight: 300;
  font-style: normal;
  background: #ffffff;
  color: #000000;
}
.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: calc(750 *(100vw / 1400));
}
.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 a img {
  width: 100%;
  height: calc(100vh - 80px);
  object-fit: cover;
  object-position: center center;  
  position: absolute;
  top:0;
  left:0;
  z-index: 0;
}
.feature .f_left .f_left__box .f_left__title figure figcaption {
  width: calc(260 * (100vw / 1400));
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);  
  right: calc(40 * (100vw / 1400));
  z-index: 1;
}
.feature .f_left .f_left__box .f_left__title .btn {
  position: absolute;
  bottom: calc(70 * (100vw / 1400));
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: calc(260 * (100vw / 1400));
  background: #000000;
  color: #ffffff;
  text-align: center;
  font-size: calc(19.5 * (100vw / 1400));
  letter-spacing: 0.050em;
  font-weight: 400;
  line-height: calc(50 * (100vw / 1400));
}


/* .f_main
----------------------------- */
.feature .f_main {
  width: calc(650 * (100vw / 1400)); 
  background:#dddddd;
}
.feature .f_main > .inner {
  width: calc(500 * (100vw / 1400));
  margin: 0 auto;
}

/*****************************************************
.feature
*****************************************************/

.feature .f_main > .inner {
  position: relative;
  background:#dddddd;
}

/* .hero
----------------------------- */
.feature .hero figure {
  position: relative;
}
.feature .hero figure figcaption {
  position: absolute;
  width: calc(260 * var(--lpSetSize));
  top: calc(467.4 * var(--lpSetSize));
  left: calc(449.9 * var(--lpSetSize));
}
.feature .hero .text {
  text-align: center;
  padding: calc(76 * var(--lpSetSize)) 0 calc(82 * var(--lpSetSize));
}
.feature .hero h1 {
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--lpSetSize));
  align-items: center;
}
.feature .hero h1 span {
  font-size: calc(34 * var(--lpSetSize));
  letter-spacing: 0.07em;
  font-weight: 400;
  line-height: 1;
}
.feature .hero h1 strong {
  font-size: calc(80 * var(--lpSetSize));
  letter-spacing: 0.046em;
  font-weight: 400;
  line-height: 1;
}
.feature .hero p.text01 {
  font-size: calc(31 * var(--lpSetSize));
  letter-spacing: 0.09em;
  font-weight: 400;
  line-height: 1;
  padding: calc(34 * var(--lpSetSize)) 0 0 0;  
}
.feature .hero p.text01 span {
  font-size: calc(26 * var(--lpSetSize));
  letter-spacing: 0.09em;
  padding: 0 0 0 calc(6 * var(--lpSetSize));  
}
.feature .hero p.text02 {
  font-size: calc(31 * var(--lpSetSize));
  letter-spacing: 0.120em;
  font-weight: 400;
  line-height: 1;
  display: inline-block;
  padding: calc(68 * var(--lpSetSize)) calc(2 * var(--lpSetSize)) calc(6 * var(--lpSetSize)) calc(2 * var(--lpSetSize));
  border-bottom: calc(1 * var(--lpSetSize)) solid #000000;
}
.feature .hero p.text02 span {
  font-size: calc(26 * var(--lpSetSize));
  letter-spacing: 0.120em;
}

/* slide
---------------------------- */
.feature .slick-dots {
  position: absolute;
  width: fit-content;
  right: calc(20 * var(--lpSetSize));
  bottom: calc(20 * var(--lpSetSize));
  z-index: 10;
}
.feature .slick-dots li {
  display: inline-block;
  width: calc(18 * var(--lpSetSize));
  height: calc(18 * var(--lpSetSize));
  background: #8e8e8e;
  border: 1px solid #ffffff;
  margin: 0 0 0 calc(20 * var(--lpSetSize));
}
.feature .slick-dots li.slick-active {
  background: #ffffff;
  border: 1px solid #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;
}

/* .sec
----------------------------- */
.feature .sec {
  position: relative;
}

/* .sec01
----------------------------- */
.feature .img01 {
  width: calc(750 * var(--lpSetSize));
}
.feature .img02 {
  width: calc(750 * var(--lpSetSize));
}
.feature .deco01 {
  background: #ffffff;
}
.feature .deco01 .inner {
  padding: calc(62 * var(--lpSetSize)) 0 calc(60 * var(--lpSetSize));
  position: relative;
}
.feature .img03 {
  width: calc(500 * var(--lpSetSize));
  margin: 0 0 0 calc(250 * var(--lpSetSize));
  position: relative;
  z-index: 1;  
}
.feature .deco01 .inner::after {
  content: '';
  display: block;
  width: calc(450 * var(--lpSetSize));
  height: calc(672 * var(--lpSetSize));
  background: url(../img/bg01.jpg) 0 0 no-repeat;
  background-size: cover;  
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
}
.feature .img04 {
  width: calc(750 * var(--lpSetSize));
}
.feature .img06 {
  width: calc(750 * var(--lpSetSize));
}
.feature .deco02 {
  display: flex;
  flex-direction: row-reverse;
}
.feature .img07 {
  width: calc(450 * var(--lpSetSize));
}
.feature .deco02::after {
  content: '';
  display: block;
  width: calc(300 * var(--lpSetSize));
  height: calc(660 * var(--lpSetSize));
  background: url(../img/bg02.jpg) 0 0 no-repeat;
  background-size: cover;
}
.feature .deco03 {
  display: flex;
}
.feature .img08 {
  width: calc(500 * var(--lpSetSize));
}
.feature .deco03::after {
  content: '';
  display: block;
  width: calc(250 * var(--lpSetSize));
  height: calc(730 * var(--lpSetSize));
  background: url(../img/bg03.jpg) 0 0 no-repeat;
  background-size: cover;  
}
.feature .img09 {
  width: calc(750 * var(--lpSetSize));
}
.feature .deco04 {
  display: flex;
  flex-direction: row-reverse;
}
.feature .img10 {
  width: calc(600 * var(--lpSetSize));
}
.feature .deco04::after {
  content: '';
  display: block;
  width: calc(150 * var(--lpSetSize));
  height: calc(896 * var(--lpSetSize));
  background: url(../img/bg04.jpg) 0 0 no-repeat;
  background-size: cover;
}
.feature .deco05 {
  display: flex;
}
.feature .img11 {
  width: calc(600 * var(--lpSetSize));
}
.feature .deco05::after {
  content: '';
  display: block;
  width: calc(150 * var(--lpSetSize));
  height: calc(896 * var(--lpSetSize));
  background: url(../img/bg05.jpg) 0 0 no-repeat;
  background-size: cover;
}
.feature .deco06 {
  display: flex;
  flex-direction: row-reverse;
}
.feature .img12 {
  width: calc(500 * var(--lpSetSize));
}
.feature .deco06::after {
  content: '';
  display: block;
  width: calc(250 * var(--lpSetSize));
  height: calc(746 * var(--lpSetSize));
  background: url(../img/bg06.jpg) 0 0 no-repeat;
  background-size: cover;
}
.feature .img13 {
  width: calc(750 * var(--lpSetSize));
}
.feature .img14,
.feature .img15,
.feature .img16,
.feature .img17 {
  width: calc(600 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .img18 {
  width: calc(750 * var(--lpSetSize));
}

/* .sec_bottom
----------------------------- */
.feature .sec_bottom {
  padding: calc(160 * var(--lpSetSize)) 0;
  background: #ffffff;
}
.feature .sec_bottom p.sec__btn {
  width: calc(600 * var(--lpSetSize));
  background: #000000;
  color: #ffffff;
  text-align: center;
  font-size: calc(34 * var(--lpSetSize));
  letter-spacing: 0.070em;
  font-weight: 400;
  line-height: calc(100 * var(--lpSetSize));
  margin: 0 auto;
}

/* .btn_all (SP ONLY)
----------------------------- */
.feature .btn_all {
  position: fixed;
  right: calc(10 * var(--lpSetSize));
  bottom: calc(20 * var(--lpSetSize));
  z-index: 10;
  width: calc(160 * var(--lpSetSize));
  height: calc(160 * var(--lpSetSize));
  background: #000000;
  border-radius: 50%;
  color: #ffffff;
  text-align: center;
  font-size: calc(32 * var(--lpSetSize));
  letter-spacing: 0.050em;
  font-weight: 400;
  line-height: 1.2;
  opacity: 0;
  visibility: hidden;
  transition: all 0.8s ease;  
}
.feature .btn_all a {
  display: flex;
  align-items: center;
  height: 100%;  
}
.feature .btn_all.show {
  visibility: visible;
  opacity: 1;
}
.page-top-button {
  opacity: 1;
  visibility: visible;
}
.page-top-button.hide {
  opacity: 0;
  visibility: hidden;
  transition: all 0.8s ease;
}

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

/* .is_fade-up
----------------------------- */
.js_anime.is_fade-up {
  opacity: 0;
  -webkit-transform: translateY(6%);
  transform: translateY(6%);
  -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
  transition: opacity 0.8s, -webkit-transform 0.8s;
  transition: opacity 0.8s, transform 0.8s;
  transition: opacity 0.8s, transform 0.8s, -webkit-transform 0.8s;
}
.js_anime.is_show.is_fade-up {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}


/******************************************************/

@media screen and (min-width: 1400px) { 
  :root {
    --lpSetSize: 1px * 0.6666666;
  }
  .feature .f_main .inner {
    width: 500px;
  }
}