@charset "UTF-8";

:root {
  --lpSetSize: (100vw / 1200) * 0.5066666;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top: 80px;
}
.l-container {
  width:100%;
}
.feature {
  width:100%;
  font-feature-settings:"palt";
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-style: normal;
  color:#000000;
  background: #ffffff;
}
.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_main
----------------------------- */
.feature .f_left {
  width: 50%;
}
.feature .f_main {
  width: 50%;
}
.feature .f_main .inner {
  width:calc(380 * (100vw / 1200));
  margin: 0 auto;
}
.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 div {
  position: relative;
}
.feature .f_left .f_left__box .f_left__title h2 {
  position: absolute;
  top: calc(100% - 340 * (100vw / 1200));
  left: calc(24 * (100vw / 1200));
  z-index: 1;
  transition: top 0.3s ease;
}
.feature .f_left .f_left__box .f_left__title.is-fixed h2 {
  top: calc(100% - 154 * (100vw / 1200));
}
.feature .f_left .f_left__box .f_left__title h2 .txt02 {
  display:block;
  width: calc(420 * (100vw / 1200));
}
.feature .f_left .f_left__box .f_left__title figure img {
  width: 100%;
  height: calc(100vh - 80px);
  object-fit: cover;
}


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

/* .hero
----------------------------- */
.feature .hero {
  margin-bottom: calc(300 * var(--lpSetSize));
}
.feature .hero__title {
  position: relative;
  margin-bottom: calc(60 * var(--lpSetSize));
}
.feature .hero__title h2 {
  height: 100%;
}
.feature .hero__title h2 .txt01 {
  display: block;
  position: absolute;
  top: calc(34 * var(--lpSetSize));
  left: calc(40 * var(--lpSetSize));
  z-index: 1;
  width: calc(256.335 * var(--lpSetSize));
}
.feature .hero__title h2 .txt02 {
  display: block;
  position: absolute;
  bottom: calc(86 * var(--lpSetSize));
  left: calc(46 * var(--lpSetSize));
  z-index: 1;
  width: calc(605.6113 * var(--lpSetSize));
}

/* slide */
.feature .hero__slide {
  height: calc(937 * var(--lpSetSize));
}
.feature .hero__slide a {
  padding: calc(95 * var(--lpSetSize)) 0 0 0;
}
.feature .hero__slide .item_name {
  height: calc(380 * var(--lpSetSize));
  padding: 0 0 0 calc(12.5 * var(--lpSetSize));
  border-left: 1px solid #2f2e30;
}

.feature .slide01 {
  width: calc(648 * var(--lpSetSize));
}
.feature .slide01 .item_name {
  margin: 0 0 0 calc(198 * var(--lpSetSize));
}
.feature .slide01 .item_name img {
  width: calc(434.2632 * var(--lpSetSize));
}
.feature .slide01 figure {
  width: calc(447.19 * var(--lpSetSize));
  margin: 0 0 0 calc(19 * var(--lpSetSize));
}

.feature .slide02 {
  width: calc(546 * var(--lpSetSize));
}
.feature .slide02 .item_name {
  margin: 0 0 calc(22 * var(--lpSetSize)) calc(186 * var(--lpSetSize));
}
.feature .slide02 .item_name img {
  width: calc(317.5913 * var(--lpSetSize));
}
.feature .slide02 figure {
  width: calc(356.2 * var(--lpSetSize));
}

.feature .slide03 {
  width: calc(580  * var(--lpSetSize));
}
.feature .slide03 .item_name {
  margin: 0 0 calc(31 * var(--lpSetSize)) calc(166 * var(--lpSetSize));
}
.feature .slide03 .item_name img {
  width: calc(120.7319 * var(--lpSetSize));
}
.feature .slide03 figure {
  width: calc(461.8 * var(--lpSetSize));
}

.feature .slide04 {
  width: calc(690 * var(--lpSetSize));
}
.feature .slide04 .item_name {
  margin: 0 0 calc(30 * var(--lpSetSize))calc(171 * var(--lpSetSize));
}
.feature .slide04 .item_name img {
  width: calc(390.7703 * var(--lpSetSize));
}
.feature .slide04 figure {
  width: calc(416.4 * var(--lpSetSize));
}


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

/* .sec__credit */
.feature .sec__credit {
  margin: 0 0 calc(30 * var(--lpSetSize)) calc(42 * var(--lpSetSize));
  padding: 0 0 calc(30 * var(--lpSetSize)) 0;
}
.feature .sec__credit .credit {
  display: flex;
  gap: calc(8 * var(--lpSetSize)) 0;
  flex-direction: column;
}
.feature .sec__credit .credit li {
  font-family: "proxima-nova", sans-serif;
  font-weight: 300;
  font-style: normal;
  color: #000000;
  font-size: calc(23 * var(--lpSetSize));
  line-height: 1;
}
.feature .sec__credit .credit li {
  position: relative;
  display: flex;
}
.feature .sec01 .sec__credit {
  background: url('../img/color01.svg') left bottom no-repeat;
  background-size: calc(480 * var(--lpSetSize)) calc(3.5 * var(--lpSetSize));
}
.feature .sec02 .sec__credit {
  background: url('../img/color02.svg') left bottom no-repeat;
  background-size: calc(350 * var(--lpSetSize)) calc(3.5 * var(--lpSetSize));
}
.feature .sec03 .sec__credit {
  background: url('../img/color03.svg') left bottom no-repeat;
  background-size: calc(430 * var(--lpSetSize)) calc(3.5 * var(--lpSetSize));
}
.feature .sec04 .sec__credit {
  background: url('../img/color04.svg') left bottom no-repeat;
  background-size: calc(500 * var(--lpSetSize)) calc(3.5 * var(--lpSetSize));
}

/* .sec01 */
.feature .sec01 {
  padding: calc(10 * var(--lpSetSize)) 0 0 0;
  margin: 0 0 calc(210 * var(--lpSetSize)) 0;
}

/* .sec02 */
.feature .sec02 {
  padding: calc(10 * var(--lpSetSize)) 0 0 0;
  margin: 0 0 calc(240 * var(--lpSetSize)) 0;
}

/* .sec03 */
.feature .sec03 {
  padding: calc(10 * var(--lpSetSize)) 0 0 0;
  margin: 0 0 calc(270 * var(--lpSetSize)) 0;
}

/* .sec04 */
.feature .sec04 {
  padding: calc(10 * var(--lpSetSize)) 0 0 0;
  margin: 0 0 calc(100 * var(--lpSetSize)) 0;
}


/* .sec_bottom
----------------------------- */
.feature .sec_bottom .sec__btn {
  width: calc(500 * var(--lpSetSize));
  margin: 0 auto calc(83 * var(--lpSetSize));
  border-left: 1px solid #2f2e30;
}
.feature .sec_bottom .sec__btn a {
  height: calc(250 * var(--lpSetSize));
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
}
.feature .sec_bottom .sec__btn img {
  width: calc(270.0806 * var(--lpSetSize));
  margin-left: calc(15 * var(--lpSetSize));
}
.feature .sec_bottom figure {
  width: calc(500 * var(--lpSetSize));
  margin: 0 auto calc(150 * var(--lpSetSize));
}


/*****************************************************
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 .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;
}



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

@media screen and (min-width: 1200px) {  
  :root {
    --lpSetSize: 1px * 0.5066666;
  }
  .feature .f_main .inner {
    width: 380px;
  }
}