@charset "UTF-8";

:root {
  --lpSetSize: (100vw / 1400) * 0.7;
}
:target {
  scroll-margin-top: calc(80px + (-100 * var(--lpSetSize)));
}
html {
  scroll-behavior: smooth;
}
.l-container {
  width: 100%;
  opacity: 0;
}
.l-container.on {
  opacity: 1;
}
.l-container .feature {
  width: 100%;
  font-feature-settings: "palt";
}
.feature * {
  margin: 0;
  box-sizing: border-box;
}
.feature img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.feature a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s;
  display: block;
}
.feature a:hover {
  cursor: pointer;
  opacity: .7;
}

/* PC only */
.l-header {
  position: relative;
  z-index: 1;
  background: #FFF;  
}
.l-footer {
  padding-top: 0 !important;
  position: relative;
  z-index: 10;
  background: #FFF;
}
.pc-footer {
  margin-top: 0 !important;
}


/* .feature wrap
*******************************/
.feature .pc_main {
  display: flex;
  position: relative;
  background: #F7F7F7;
  z-index: 0;
}
.feature .f_left {
  width: 50%;
}
.feature .f_main {
  width: 50%;
  position: relative;  
}
.feature .f_main__box {
  width: calc(525 *(100vw / 1400));
}


/* PC背景
---------------------------- */
.pc_bg {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
}

/* footer表示時は追従 */
.pc_bg.is-footer {
  position: absolute;
  bottom: 0;
  top: auto;
}
/* 背景img共通 */
.pc_bg .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
  will-change: opacity;
}
/* 表示中 */
.pc_bg .bg.is-show {
  opacity: 1;
}


/* font-style
*******************************/
.l-container .feature {
  font-family: "dm-sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #000000;
}
.feature .text_jp {
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
  font-weight: 300;
}


/* credit
*******************************/
.feature .sec__credit {
  font-size: calc(20 * var(--lpSetSize));
  letter-spacing: 0.025em;
  line-height: 1;
  color: #b7b7b7;
}
.feature .sec__credit .credit {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--lpSetSize)) calc(8 * var(--lpSetSize));
}
.feature .sec__credit .credit li .price {
  letter-spacing: 0;
  margin-left: calc(8 * 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::after {
  content: "/";
  margin-left: calc(8 * var(--lpSetSize));
}
.feature .sec__credit .credit li:last-of-type::after {
  content: none !important;
}


/* layout
*******************************/
.feature .wrap__flex {
  display: flex;
}


/* sticky
*******************************/
.feature .sticky-block {
  position: -webkit-sticky;
  position: sticky;
}
.feature .sec {
  position: relative;
  z-index: 9;
}
.feature .sec00 {
  top: 0;
  z-index: 10;
}
.feature .sec03 .wrap__sticky {
  padding: calc(120 * var(--lpSetSize)) 0 calc(280 * var(--lpSetSize)) 0;
}
.feature .sec03 .img08 {
  top: calc(51px + (120 * var(--lpSetSize)));
  z-index: 11;
}
.feature .sec03 .img09 {
  top: calc(51px + (120 * var(--lpSetSize)));
  z-index: 12;
}
.feature .sec03 .img10 {
  top: calc(51px + (120 * var(--lpSetSize)));
  z-index: 13;
}
.feature .sec06 .wrap__sticky {
  padding: calc(100 * var(--lpSetSize)) 0 calc(267 * var(--lpSetSize)) 0;
}
.feature .sec06 .img16 {
  top: calc(51px + (120 * var(--lpSetSize)));
  z-index: 14;
}
.feature .sec06 .img17 {
  top: calc(51px + (120 * var(--lpSetSize)));
  z-index: 15;
}
.feature .sec06 .img18 {
  top: calc(51px + (120 * var(--lpSetSize)));
  z-index: 16;
}


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

/* .f_left
*******************************/
.feature .f_left {
  width: 50%;
  position:sticky;
  height: 100vh;
  top: 80px;
}
.feature .f_left .f_left__title {
  width: calc(283.5283 * (100vw / 1400));
  top: calc(40* (100vw / 1400));
  left:  calc(40 * (100vw / 1400));
  position:absolute;
}



/* .f_main
*******************************/

/* .hero
----------------------------- */
.feature .hero .hero__img {
  width: 100%;
}
.feature .hero nav figure {
  width: calc(138 * var(--lpSetSize));
}
.feature .hero .hero__title {
  width: calc(207.1367 * var(--lpSetSize));
  position: absolute;
  top: calc(30 * var(--lpSetSize));
  left: calc(30 * var(--lpSetSize));
  z-index: 10;
}


/* .sec image-size
----------------------------- */
.feature .img01 {
  width: 100%;
}
.feature .img02,
.feature .img03 {
  width: calc(370 * var(--lpSetSize));
}
.feature .img04 {
  width: 100%;
}
.feature .img05,
.feature .img06 {
  width: calc(590 * var(--lpSetSize));
}
.feature .img07 {
  width: 100%;
}
.feature .img08 {
  width: calc(550 * var(--lpSetSize));
}
.feature .img09 {
  width: calc(470 * var(--lpSetSize));
}
.feature .img10 {
  width: calc(510 * var(--lpSetSize));
}
.feature .img11,
.feature .img12 {
  width: calc(670 * var(--lpSetSize));
}
.feature .img13 {
  width: 100%;
}
.feature .img14,
.feature .img15 {
  width: calc(370 * var(--lpSetSize));
}
.feature .img16,
.feature .img17,
.feature .img18,
.feature .img19 {
  width: calc(530 * var(--lpSetSize));
}
.feature .img20,
.feature .img21 {
  width: calc(670 * var(--lpSetSize));
}
.feature .img22 {
  width: 100%;
}


/* .sec / title
----------------------------- */
.feature .sec {
  background: none;
}
.feature .sec__ttl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(10 * var(--lpSetSize)) 0;
  padding: 0 calc(24 * var(--lpSetSize));
  margin: 0 0 calc(18 * var(--lpSetSize)) 0;
}
.feature .sec__ttl span {
  width: 50%;
  font-size: calc(24 * var(--lpSetSize));
  letter-spacing: 0.04em;
  line-height: 1.4;
  font-weight: 400;
}
.feature .sec__ttl span:nth-of-type(even) {
  text-align: right;
}


/* .sec00
----------------------------- */
.feature .sec00 {
  text-align: center;
  padding-bottom: calc(96 * var(--lpSetSize));
}
.feature .sec00 .hero__lead {
  font-size: calc(24 * var(--lpSetSize));
  line-height: 1.75;
  letter-spacing: 0.04em;
  padding-top: calc(110 * var(--lpSetSize));
  margin-bottom: calc(110 * var(--lpSetSize));
}
.feature .sec00 nav ul {
  display: flex;
  gap: calc(40 * var(--lpSetSize));
  flex-wrap: wrap;
  justify-content: center;
}
.feature .sec00 nav li {
  width: calc(138 * var(--lpSetSize));
}
.feature .sec00 nav li figure {
  margin-bottom: calc(23 * var(--lpSetSize));
}
.feature .sec00 nav li figcaption {
  font-size: calc(20 * var(--lpSetSize));
  letter-spacing: 0.04em;
  line-height: 1;
  color: #b7b7b7;
  text-align: center;
}


/* .sec01
----------------------------- */
.feature .sec01 {
  padding-top: calc(100 * var(--lpSetSize));
}
.feature .img01 {
  margin: 0 0 calc(78 * var(--lpSetSize)) 0;
}
.feature .wrap__flex:has(.img02) {
  display: flex;
  justify-content: center;
  gap: 0 calc(10 * var(--lpSetSize));
}
.feature .sec__credit.credit01 {
  width: calc(600 * var(--lpSetSize));
  margin: calc(24 * var(--lpSetSize)) 0 0 calc(25 * var(--lpSetSize));
  padding: 0 0 calc(100 * var(--lpSetSize)) 0;
}


/* .sec02
----------------------------- */
.feature .sec02 {
  padding: calc(100 * var(--lpSetSize)) 0 calc(78 * var(--lpSetSize)) 0;
}
.feature .sec02 .sec__ttl {
  margin: 0 0 calc(18 * var(--lpSetSize)) calc(54 * var(--lpSetSize));
}
.feature .sec02 .img04 {
  margin: 0 0 calc(120 * var(--lpSetSize)) 0;
}
.feature .sec02 .img05,
.feature .sec02 .img06 {
  margin: 0 auto calc(22 * var(--lpSetSize));
}
.feature .sec__credit.credit02 {
  width: calc(600 * var(--lpSetSize));
  margin: calc(18 * var(--lpSetSize)) 0 0 calc(78 * var(--lpSetSize));
  padding: 0 0 calc(18 * var(--lpSetSize)) 0;
}


/* .sec03
----------------------------- */
.feature .sec03 {
  padding: calc(100 * var(--lpSetSize)) 0 0 0;
}
.feature .sec__credit.credit03 {
  width: calc(600 * var(--lpSetSize));
  margin: calc(24 * var(--lpSetSize)) 0 0 calc(25 * var(--lpSetSize));
}
.feature .sec03 .img09 {
  padding: calc(120 * var(--lpSetSize)) 0 0 0;
  margin: 0 0 0 calc(280 * var(--lpSetSize));
}
.feature .sec03 .img10 {
  padding: calc(120 * var(--lpSetSize)) 0 0 0;
  margin: 0 auto calc(-180 * var(--lpSetSize));
}


/* .sec04
----------------------------- */
.feature .sec04 {
  padding: calc(100 * var(--lpSetSize)) 0 0 0;
}
.feature .sec04 .img11 {
  margin: 0 0 calc(24 * var(--lpSetSize)) calc(80 * var(--lpSetSize));
}
.feature .sec04 .img12 {
  margin: 0 0 calc(20 * var(--lpSetSize)) calc(80 * var(--lpSetSize));
}
.feature .sec04 .sec__ttl {
  margin: 0 0 calc(18 * var(--lpSetSize)) calc(54 * var(--lpSetSize));
}
.feature .sec__credit.credit04 {
  width: calc(650 * var(--lpSetSize));
  margin: calc(20 * var(--lpSetSize)) 0 0 calc(80 * var(--lpSetSize));
  padding: 0 0 calc(100 * var(--lpSetSize)) 0;
}


/* .sec05
----------------------------- */
.feature .sec05 {
  padding: calc(100 * var(--lpSetSize)) 0 0 0;
}
.feature .sec05 .img13 {
  margin: 0 0 calc(22 * var(--lpSetSize)) 0;
}
.feature .wrap__flex:has(.img14) {
  display: flex;
  justify-content: center;
  gap: 0 calc(10 * var(--lpSetSize));
  padding: calc(94 * var(--lpSetSize)) 0 0 0;
  margin: 0 0 calc(24 * var(--lpSetSize)) 0;
}
.feature .sec__credit.credit05 {
  width: calc(700 * var(--lpSetSize));
  margin: 0 0 0 calc(25 * var(--lpSetSize));
}


/* .sec06
----------------------------- */
.feature .sec06 {
  padding: calc(100 * var(--lpSetSize)) 0 calc(100 * var(--lpSetSize)) 0;
}
.feature .sec06 .img17 {
  padding: calc(120 * var(--lpSetSize)) 0 0 0;
  margin: 0 0 calc(-120 * var(--lpSetSize)) calc(220 * var(--lpSetSize));
}
.feature .sec06 .img18 {
  padding: calc(120 * var(--lpSetSize)) 0 0 0;
  margin: 0 auto calc(-240 * var(--lpSetSize));
}
.feature .sec__credit.credit06 {
  width: calc(700 * var(--lpSetSize));
  margin: 0 0 calc(200 * var(--lpSetSize)) calc(25 * var(--lpSetSize));
}
.feature .sec06 .img19 {
  margin: 0 0 calc(24 * var(--lpSetSize)) calc(40 * var(--lpSetSize));
}
.feature .sec__credit.credit07 {
  width: calc(700 * var(--lpSetSize));
  margin: 0 0 0 calc(40 * var(--lpSetSize));
}



/* .sec07
----------------------------- */
.feature .sec07 {
  padding: calc(100 * var(--lpSetSize)) 0 calc(198 * var(--lpSetSize)) 0;
}
.feature .sec07 .img20 {
  margin: 0 auto calc(24 * var(--lpSetSize));
}
.feature .sec07 .img21 {
  margin: 0 auto calc(20 * var(--lpSetSize));
}
.feature .sec07 .sec__ttl {
  margin: 0 0 calc(18 * var(--lpSetSize)) calc(16 * var(--lpSetSize));
}
.feature .sec__credit.credit08 {
  width: calc(700 * var(--lpSetSize));
  margin: 0 0 0 calc(40 * var(--lpSetSize));
}


/* .sec sec_bottom
----------------------------- */
.feature .sec_bottom .img22 {
  position: relative;
}
.feature .sec_bottom figcaption.bottom_title {
  width: calc(70.2962 * var(--lpSetSize));
  position: absolute;
  top: calc(24 * var(--lpSetSize));
  right: calc(24 * var(--lpSetSize));
}
.feature .sec_bottom figcaption.staff {
  position: absolute;
  bottom: calc(22 * var(--lpSetSize));
  right: calc(24 * var(--lpSetSize));
  text-align: right;
  color: #FFFFFF;
  font-size: calc(20 * var(--lpSetSize));
  letter-spacing: 0.04em;
  line-height: 1.36;
  display:flex;
  flex-direction: column;
  gap: calc(36 * var(--lpSetSize));
}


/* .arrow - svg
-------------------------------*/
.feature .sec_bottom .sec__btn {
  width: calc(670 * var(--lpSetSize));
  margin: 0 auto calc(198 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn li {
  font-size: calc(24 * var(--lpSetSize));
  letter-spacing: 0.05em;
  line-height: 1.4;
  margin: 0 0 calc(22 * var(--lpSetSize)) 0;
}
.feature .sec_bottom .sec__btn li a {
  display: flex;
}
.feature .sec_bottom .sec__btn li span {
  margin: 0 0 0 calc(16 * var(--lpSetSize));
  padding: 0 0 calc(5 * var(--lpSetSize)) 0;
  border-bottom: calc(3 *var(--lpSetSize)) solid #d4d4d4;
}
.feature .sec_bottom .sec__btn .arrow {
  width: calc(21 * var(--lpSetSize));
  height: calc(19 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn .arrow svg {
  width: 100%;
  height: auto;
  margin-top: calc(5 * var(--lpSetSize));  
}
.feature .sec_bottom .sec__btn .arrow svg .cls-1 {
  fill: none;
  stroke: #b7b7b7;
  stroke-miterlimit: 10;
  stroke-width: calc(2 * var(--lpSetSize));
}
 

/* PC Only */
.feature .btn__all {
  position: fixed; /* 最初はウィンドウ下 */
  bottom: calc(20 *(100vw / 1400));
  left: calc(450 *(100vw / 1400));
  transition: bottom 0.2s;
  z-index: 100;
}
.feature .btn__all ul {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.feature .btn__all li {
  font-size: calc(14 *(100vw / 1400));
  letter-spacing: 0.04em;
  line-height: 1.4;
  margin: 0 0 calc(15 *(100vw / 1400)) 0;
}
.feature .btn__all li a {
  display: flex;
}
.feature .btn__all li span {
  margin: 0 0 0 calc(9.5 *(100vw / 1400));
  padding: 0 0 calc(2 *(100vw / 1400)) 0;
  border-bottom: calc(2 *var(--lpSetSize)) solid #d4d4d4;
}
.feature .btn__all .arrow {
  width: calc(13 *(100vw / 1400));
  height: calc(12 *(100vw / 1400));
}
.feature .btn__all .arrow svg {
  width: 100%;
  height: auto;
  margin-top:calc(2 *(100vw / 1400));  
}
.feature .btn__all .arrow svg .cls-1 {
  fill: none;
  stroke: #8d8d8d;
  stroke-miterlimit: 10;
  stroke-width: calc(1 * var(--lpSetSize));
}


/* ------------------------------------------ 
animation
--------------------------------------------- */

/* .fadeIn
-------------------------------*/
.feature .js-inview {
  opacity: 0;
}
.feature .js-inview.is-active {
  opacity: 1;
}
.feature .fadeIn {
  opacity: 0;
}
.feature .fadeIn.is-active {
  opacity: 1;
  transition: opacity 0.4s ease-in 0.2s;
}


/* .arrow - svg
-------------------------------*/
@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 32px;
    stroke-dasharray: 32px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 32px;
  }
}
.feature .arrow svg .svg-elem-1 {
    animation: animate-svg-stroke-1 3.5s ease-out 0s both infinite;
}

@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 17.62px;
    stroke-dasharray: 17.62px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 17.62px;
  }
}
.feature .arrow svg .svg-elem-2 {
  animation: animate-svg-stroke-2 3.5s ease-out 0.12s both infinite;
}

/* 2段目は全体を遅らせる */
.feature .arrow svg .svg-elem-1.delay {
  animation-delay: 1.1s !important;
}
.feature .arrow svg .svg-elem-2.delay {
  animation-delay: 1.7s !important;
}