@charset "UTF-8";

:root {
  --lpSetSize: (100vw / 1400);
}
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: #ECF1F7;
}
.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%;
  display: flex;
  flex-direction: row-reverse;
}
.feature .f_main {
  width: 50%;
  display: flex;
}
.feature .f_left .f_left__box,
.feature .f_main .inner {
  width:calc(560 * var(--lpSetSize));
  background: #ffffff;  
}
.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(408.24 * var(--lpSetSize));
  left: calc(60.5 * var(--lpSetSize));
  z-index: 1;
}
.feature .f_left .f_left__box .f_left__title h2 .txt01 {
  display:block;
  width: calc(348.42 * var(--lpSetSize));
  margin-bottom: calc(5 * var(--lpSetSize));
}
.feature .f_left .f_left__box .f_left__title h2 .txt02 {
  display:block;
  width: calc(220.6 * var(--lpSetSize));
}
.feature .f_left .f_left__box .f_left__title figure img {
  width: 100%;
  /* height: calc(100vh - 80px); */
  object-fit: cover;
}


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

/* .hero
----------------------------- */
.feature .hero__title {
  position: relative;
}
.feature .hero__title h2 {
  position: absolute;
  top: calc(408.24 * var(--lpSetSize));
  left: calc(60.5 * var(--lpSetSize));
  z-index: 1;
}
.feature .hero__title h2 .txt01 {
  display:block;  
  width: calc(348.42 * var(--lpSetSize));
  margin-bottom: calc(5 * var(--lpSetSize));
}
.feature .hero__title h2 .txt02 {
  display:block;  
  width: calc(220.6 * var(--lpSetSize));
}
.feature .hero__lead {
  padding: calc(60 * var(--lpSetSize)) 0 calc(58 * var(--lpSetSize));
}
.feature .hero__lead p {
  font-size: calc(18 * var(--lpSetSize));
  line-height: 1.55;
  text-align: center;
}
.feature .hero__lead .lead {
  width: calc(321.32 * var(--lpSetSize));
  margin:0 auto calc(30.6 * var(--lpSetSize));
}


/* .sec
----------------------------- */
.feature .sec {
  position: relative;
}
.feature .sec h3,
.feature .sec .ttl {
  position: absolute;
  z-index: 2;
}
.feature .sec .bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.feature .sec figure {
  position:relative;
  z-index: 1;
}
.feature .sec .sec__slide figure {
  margin: 0 calc(10 * var(--lpSetSize));
}
.feature .sec01 h3 {
  width: calc(102.57 * var(--lpSetSize));
  top:calc(910 * var(--lpSetSize));
  left:calc(31 * var(--lpSetSize));
}
.feature .sec01 .ttl {
  width: calc(63.24 * var(--lpSetSize));
  top:calc(756.1 * var(--lpSetSize));
  left:calc(473.38 * var(--lpSetSize));
}
.feature .sec02 h3 {
  width: calc(115.05 * var(--lpSetSize));
  top:calc(-42.7 * var(--lpSetSize));
  left:calc(31 * var(--lpSetSize));
}
.feature .sec02 .ttl {
  width: calc(63.24 * var(--lpSetSize));
  top:calc(196 * var(--lpSetSize));
  left: calc(19 * var(--lpSetSize));
}
.feature .sec03 h3 {
  width: calc(112.77 * var(--lpSetSize));
  top: calc(162 * var(--lpSetSize));
  left:calc(27.41 * var(--lpSetSize));
}
.feature .sec03 .ttl {
  width: calc(63.24 * var(--lpSetSize));
  top: calc(296 * var(--lpSetSize));
  left:calc(473.38 * var(--lpSetSize));
}
.feature .sec04 h3 {
  width: calc(116.88 * var(--lpSetSize));
  top:calc(650 * var(--lpSetSize));
  left:calc(419.56 * var(--lpSetSize));
}
.feature .sec04 .ttl {
  width: calc(63.24 * var(--lpSetSize));
  top:calc(446 * var(--lpSetSize));
  left:calc(18.76 * var(--lpSetSize));
}
.feature .sec p {
  font-size:calc(18 * var(--lpSetSize));
  margin-bottom:calc(42 * var(--lpSetSize));
  text-align: center;
  line-height: 1.55;  
}
.feature .sec04 p {
  margin-bottom:calc(45 * var(--lpSetSize));
}
.feature .sec .sec__topics p {
  margin-bottom:calc(32 * var(--lpSetSize));
}
.feature .sec p.lead {
  font-size:calc(22 * var(--lpSetSize));
  margin-bottom:calc(19 * var(--lpSetSize));
  text-align: center;
  line-height: 1.38;
}
.feature .sec p.lead strong {
  font-weight:400;
}


/* .sec__credit */
.feature .sec__credit .credit{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap:calc(7 * var(--lpSetSize)) calc(8 * var(--lpSetSize));
}
.feature .sec__credit .credit li {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #8E8E8E;
  font-size: calc(16 * var(--lpSetSize));
  line-height: 1;
}
.feature .sec__credit .credit li {
  position: relative;
  display: flex;
}
.feature .sec__credit .credit a {
  border-bottom: 1px solid #8E8E8E;
}
.feature .sec01 .sec__credit {
  width: 70%;
  margin:0 auto calc(102 * var(--lpSetSize));
}
.feature .sec02 .sec__credit {
  width: 80%;
  margin: 0 auto calc(102 * var(--lpSetSize));
}
.feature .sec02 .sec__topics .sec__credit {
  width: 50%;
  margin:0 auto calc(2 * var(--lpSetSize));
}
.feature .sec03 .sec__credit {
  width: 80%;
  margin: 0 auto calc(102 * var(--lpSetSize));
}
.feature .sec03 .sec__credit .credit .item:nth-of-type(1) {
  margin-left: calc(60 * var(--lpSetSize));
}
.feature .sec03 .sec__credit .credit .item:nth-of-type(2) {
  margin-right: calc(60 * var(--lpSetSize));
}
.feature .sec04 .sec__credit {
  width: 65%;
  margin: 0 auto calc(102 * var(--lpSetSize));
}
.feature .sec04 .sec__topics .sec__credit {
  width: 65%;
  margin: 0 auto calc(2 * var(--lpSetSize));
}
.feature .sec .sec__topics .sec__credit .credit li {
  color: #000000;
}

/* .sec__topics */
.feature .sec .sec__topics {
  background: #D2DFEF;
  padding:calc(40 * var(--lpSetSize)) 0;
}

/* .sec01 */
.feature .sec01 {
  padding-top:calc(250 * var(--lpSetSize));
  position: relative;
}
.feature .sec01 .img01 {
  width:calc(450 * var(--lpSetSize));
  margin: 0 auto;
  background: #ffffff;
}
.feature .sec01 .img02 {
  width:calc(450 * var(--lpSetSize));
  margin: 0 auto calc(50 * var(--lpSetSize));
}

/* .sec02 */
.feature .sec02 .img03 {
  width:calc(450 * var(--lpSetSize));
  margin: 0 auto calc(20 * var(--lpSetSize));
}
.feature .sec02 .slide01 {
  margin-bottom:calc(51 * var(--lpSetSize));
}
.feature .sec02 .slide02 {
  margin-bottom:calc(41 * var(--lpSetSize));
}
.feature .sec02 .img04,
.feature .sec02 .img05,
.feature .sec02 .img06,
.feature .sec02 .img07 {
  width:calc(330 * var(--lpSetSize));
}
.feature .sec02 h4 {
  width:calc(269.91 * var(--lpSetSize));
  margin: 0 auto calc(12 * var(--lpSetSize));
}


/* .sec03 */
.feature .sec03 {
  padding-top:calc(100 * var(--lpSetSize));
}
.feature .sec03 .img08 {
  width:calc(450 * var(--lpSetSize));
  margin: 0 auto calc(20 * var(--lpSetSize));
}
.feature .sec03 .slide03 {
  margin-bottom:calc(51 * var(--lpSetSize));
}
.feature .sec03 .img09,
.feature .sec03 .img10 {
  width:calc(330 * var(--lpSetSize));
}

/* .sec04 */
.feature .sec04 {
  padding-top:calc(250 * var(--lpSetSize));
}
.feature .sec04 .img11 {
  width:calc(450 * var(--lpSetSize));
  margin: 0 auto calc(20 * var(--lpSetSize));
  background: #ffffff;
}
.feature .sec04 .slide04 {
  margin-bottom:calc(51 * var(--lpSetSize));
}
.feature .sec04 .img12,
.feature .sec04 .img13 {
  width:calc(330 * var(--lpSetSize));
}
.feature .sec04 .slide04 {
  margin-bottom: calc(51 * var(--lpSetSize));
}
.feature .sec04 .img14 {
  width:calc(330 * var(--lpSetSize));
}
.feature .sec04 .img15 {
  width:calc(450 * var(--lpSetSize));
}
.feature .sec04 .img15 img {
  margin:calc(60 * var(--lpSetSize)) 0;
}
.feature .sec04 h4 {
  width:calc(218.35 * var(--lpSetSize));
  margin: 0 auto calc(14 * var(--lpSetSize));
}
.feature .sec04 .slide05 {
  margin-bottom:calc(40 * var(--lpSetSize));
}


/* .sec_bottom
----------------------------- */
.feature .sec_bottom {
  padding: calc(51 * var(--lpSetSize)) 0 calc(60 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn {
  width: calc(260 * var(--lpSetSize));
  margin: 0 auto calc(21 * var(--lpSetSize));
}
.feature .sec_bottom .staff {
  color: #595757;
  font-family: "Bodoni Moda", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-size: calc(14 * var(--lpSetSize));
  text-align:center;
  line-height: 1.43;
  letter-spacing: 0.022em;
}


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

/* フェードアップ（下から上） */
.feature .js-fade-up {
  opacity: 0;
}
.feature .js-fade-up.is-show {
  opacity: 1;
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
 @keyframes fadeup {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* フェードダウン（上から下） */
.feature .js-fade-down {
  opacity: 0;
  visibility:hidden;
}
.feature .js-fade-down.is-show {
  opacity: 1;
  animation: fadedown 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  visibility:visible;
}
 @keyframes fadedown {
  0% {
    transform: translateY(-80px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* フェードイン（左から右） */
.feature .js-fade-left {
  transform: translateX(-10%);
  opacity: 0;
}
.feature .js-fade-left.is-show {
  transform: translateX(0);
  transition: all 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 1;
}

/* フェードイン（右から左） */
.feature .js-fade-right {
  transform: translateX(10%);
  opacity: 0;
}
.feature .js-fade-right.is-show {
  transform: translateX(0);
  transition: all 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 1;
}

/* シャッター（左から右） */
.feature .js-shutter-left {
  clip-path: inset(0 100% 0 0);
  transition: 1s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
.feature .js-shutter-left.is-show {
  clip-path: inset(0);
}

/* シャッター（右から左） */
.feature .js-shutter-right {
  clip-path: inset(0 0 0 100%);
  transition: 1s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
.feature .js-shutter-right.is-show {
  clip-path: inset(0);
}

/* 時差 */
.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: 1400px) {  
  :root {
    --lpSetSize: 1px;
  }
  .feature .f_left .f_left__box,
  .feature .f_main .inner {
    width: 560px;
  }

}