html {
  font-size: calc((10 * (100vw / 1400)));
}
body {
  overflow-x:hidden;
}
.l-container {
  width: 100%;
  overflow: hidden;
}
.l-footer {
  padding: 0;
}
.pc-footer {
  margin: 0;
}
*:focus {
  outline: none;
}
/* 共通 */
#feature {
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
  font-style: normal;
  font-weight: 300;
  color: #fff;
  margin: 0 auto;
  -webkit-font-feature-settings: 'palt' 1;
  font-feature-settings: 'palt' 1;
  background-color: #000;
}
#feature * {
  box-sizing: border-box;
}
#feature li {
  list-style: none;
}
#feature a {
  position: relative;
  display: block;
  transition: opacity 1s ease;
  text-decoration: none;
  color: #fff;
}
#feature a:hover {
  opacity: 0.7 !important;
  cursor: pointer;
}
#feature img {
  width: 100%;
  height: auto;
  display: block;
}
/* #feature .img{
  background: #fff;
  position: relative;
  z-index: 1;
} */
#feature .flex-wrap{
  display: flex;
}

/* hdr */
#feature .hdr {
  position: relative;
  width: 100%;
}
#feature .hdr .hdr__title {
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  z-index: 1;
  width: calc((350 / 1400) * 100%);
  margin: calc((516 / 1400) * 100%) 0 0 calc((528 / 1400) * 100%);
  /* transition-delay: .4s; */
  transform: translate(50px, 0);
  opacity: 0;
}
#feature .hdr .hdr__title.is-active {
  transform: none;
  transition: all .8s ease .8s;
  opacity: 1;
}
#feature .hdr .hdr__subtitle {
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  z-index: 1;
  width: calc((293 / 1400) * 100%);
  margin: calc((624 / 1400) * 100%) 0 0 calc((556 / 1400) * 100%);
  /* transition-delay: .4s; */
  transform: translate(-50px, 0);
  opacity: 0;
}
#feature .hdr .hdr__subtitle.is-active {
  transform: none;
  transition: all .8s ease .8s;
  opacity: 1;
}
#feature .hdr__img {
  opacity: 0;
  transition: opacity 0.8s ease;
}
#feature .hdr__img.is-active {
  opacity: 1;
}

/*------- credit -------*/
.l-container #feature .only-sp {
  display: none;
}
.l-container #feature .creditContainer {
  font: normal 400 1.2rem/2.6rem "nimbus-sans", sans-serif;
  letter-spacing: calc(50/ 1000 * 1em);
  color: #fff;
}
.l-container #feature .creditContainer * {
  color: #fff;
}
.l-container #feature .creditContainer * {
  font-style: normal;
}
.l-container #feature .creditContainer .credit {
  margin-inline: auto;
  width: 100%;
  column-gap: 1.3rem;
  row-gap: 0;
  display: flex;
  flex-wrap: wrap;
}
.l-container #feature .creditContainer.credit--right .credit {justify-content: right;}
.l-container #feature .creditContainer.credit--center .credit {justify-content: center;}
.l-container #feature .creditContainer.credit--left .credit {justify-content: left;}

.l-container #feature .creditContainer li {
  width: auto !important;
}
.l-container #feature .creditContainer li a {
  display: inline-block;
  width: fit-content;
  transition: 0.3s;
  text-decoration: none;
}
.l-container #feature .creditContainer li a:hover {
  opacity: 0.6;
  cursor: pointer;
  text-decoration: none;
}
.l-container #feature .creditContainer li a::after {
  display: none;
}
.l-container #feature .space {
  width: 100%;
}
.l-container #feature .creditContainer .link {
  display: block;
  position: relative;
  text-decoration-line: underline !important;
  text-decoration-thickness: 0.1rem !important;
  text-decoration-style: initial !important;
  text-decoration-color: rgb(255, 255, 255, 0.7) !important;
  text-underline-offset: 0.1rem;
  /* 下線が途切れないようにする */
  text-decoration-skip-ink: none;
}

.l-container #feature .creditContainer--01 {margin-top: calc((126 / 1400) * 100%);}
.l-container #feature .creditContainer--02 {margin-top: calc((126 / 1400) * 100%);}
.l-container #feature .creditContainer--03 {margin-top: calc((128 / 1400) * 100%);}
.l-container #feature .creditContainer--04 {margin: calc((32 / 1400) * 100%) 0 0 calc((214 / 1400) * 100%); width: calc((510 / 1400) * 100%);}
.l-container #feature .creditContainer--05 {margin-top: calc((131 / 1400) * 100%);}
.l-container #feature .creditContainer--06 {margin-top: calc((134 / 1400) * 100%);}
.l-container #feature .creditContainer--07 {margin-top: calc((104 / 1400) * 100%);}
.l-container #feature .creditContainer--08 {margin-top: calc((55 / 1400) * 100%);}
.l-container #feature .creditContainer--09 {margin-top: calc((129 / 1400) * 100%);}

/* main */
#feature .main{
  position: relative;
}
#feature .intro__txt {
  text-align: center;
  font: normal 300 1.4rem/3.3rem "hiragino-kaku-gothic-pron", sans-serif;
  letter-spacing: calc(160/ 1000 * 1em);
  -webkit-font-feature-settings: 'palt' 1;
  font-feature-settings: 'palt' 1;
  margin: calc((107 / 1400) * 100%) 0 0 0;
}
#feature .main__title {
  text-align: left;
  font: normal 300 1.6rem/1.6rem "hiragino-kaku-gothic-pron", sans-serif;
  letter-spacing: calc(88/ 1000 * 1em);
  -webkit-font-feature-settings: 'palt' 1;
  font-feature-settings: 'palt' 1;
}

#feature .main__title .fadeUp-box {
  overflow: hidden;
  display: inline-block;
  border-bottom: 1px solid #ffffff75;
  margin-bottom: calc((40 / 1400) * 100%);
}

#feature .main__title .js-fadeUp {
  display: block;
  -webkit-transition: -webkit-transform 1.2s cubic-bezier(0.215,0.61,0.355,1);
  transition: -webkit-transform 1.2s cubic-bezier(0.215,0.61,0.355,1);
  transition: transform 1.2s cubic-bezier(0.215,0.61,0.355,1);
  transition: transform 1.2s cubic-bezier(0.215,0.61,0.355,1),-webkit-transform 1.2s cubic-bezier(0.215,0.61,0.355,1);
  -webkit-transition-delay: 0.8s;
  transition-delay: 0.8s;
  -webkit-transform: translateY(110%);
  transform: translateY(110%);
}
#feature .main__title .js-fadeUp.is-active {
  -webkit-transform:translateY(0);
  transform:translateY(0);
}

#feature .main__title01 {
  margin: calc((142 / 1400) * 100%) 0 0 calc((815 / 1400) * 100%);
}
#feature .main__title02 {
  position: absolute;
  z-index: 10;
  margin: calc((97 / 1400) * 100%) 0 0 calc((644 / 1400) * 100%);
  letter-spacing: calc(97/ 1000 * 1em);
}
#feature .main__title02 .fadeUp-box {
  margin-bottom: calc((31 / 1400) * 100%);
}
#feature .main__title03 {
  position: absolute;
  z-index: 10;
  margin: calc((73 / 1400) * 100%) 0 0 calc((207 / 1400) * 100%);
  letter-spacing: calc(99/ 1000 * 1em);
}
#feature .main__title03 .fadeUp-box {
  margin-bottom: calc((34 / 1400) * 100%);
}

#feature .main__txt {
  text-align: left;
  font: normal 300 1.4rem/2.56rem "hiragino-kaku-gothic-pron", sans-serif;
  letter-spacing: calc(130/ 1000 * 1em);
  -webkit-font-feature-settings: 'palt' 1;
  font-feature-settings: 'palt' 1;
  text-align: justify;
}
#feature .main__txt01 {
  width: calc((445 / 1400) * 100%);
  margin: calc((464 / 1400) * 100%) 0 0 calc((313 / 1400) * 100%);
  letter-spacing: calc(66/ 1000 * 1em);
}
#feature .main__txt02 {
  width: calc((775 / 1400) * 100%);
  margin: calc((24 / 1400) * 100%) 0 0 calc((313 / 1400) * 100%);
  position: relative;
  z-index: 10;
  letter-spacing: calc(76/ 1000 * 1em);
  line-height: 2.6rem;
}
#feature .main__txt03 {
  margin: calc((102 / 1400) * 100%) 0 0 0;
  letter-spacing: calc(60/ 1000 * 1em);
  position: relative;
  z-index: 10;
}
#feature .main__txt04 {
  width: calc((400 / 1400) * 100%);
  margin: calc((87 / 1400) * 100%) 0 0 calc((287 / 1400) * 100%);
  letter-spacing: calc(100/ 1000 * 1em);
}
#feature .main__txt05 {
  margin: calc((101 / 1400) * 100%) 0 0 calc((-7 / 1400) * 100%);
  letter-spacing: calc(100/ 1000 * 1em);
  width: 105%;
}
#feature .main__txt06 {
  width: 101%;
  letter-spacing: calc(58/ 1000 * 1em);
  margin: calc((98 / 1400) * 100%) 0 0 0;
}
#feature .main__txt07 {
  letter-spacing: calc(90/ 1000 * 1em);
}
#feature .main__txt08 {
  width: 57.7rem;
  letter-spacing: calc(100/ 1000 * 1em);
  margin: calc((60 / 1400) * 100%) 0 0 calc((390 / 1400) * 100%);
}
#feature .main__txt09 {
  width: calc((392 / 1400) * 100%);
  letter-spacing: calc(94/ 1000 * 1em);
  margin: calc((-7 / 1400) * 100%) 0 0 calc((322 / 1400) * 100%);
}


#feature .bg01{
  position: absolute;
  z-index: 0;
  width: calc((430 / 1400) * 100%);
  margin: calc((-226 / 1400) * 100%) 0 0 calc((152 / 1400) * 100%);
}
#feature .bg02{
  position: absolute;
  z-index: 0;
  width: calc((310 / 1400) * 100%);
  margin: calc((-477 / 1400) * 100%) 0 0 calc((835 / 1400) * 100%);
}
#feature .bg03{
  z-index: 0;
  position: absolute;
  width: calc((1300 / 1400) * 100%);
  margin: calc((-482 / 1400) * 100%) 0 0 calc((51 / 1400) * 100%);
}
#feature .bg04{
  position: absolute;
  width: calc((440 / 1400) * 100%);
  margin: calc((227 / 1400) * 100%) 0 0 0;
  right: 0;
  z-index: 0;
}
#feature .bg05{
  position: absolute;
  z-index: 0;
  width: calc((1300 / 1400) * 100%);
  margin: calc((-32 / 1400) * 100%) 0 0 calc((50 / 1400) * 100%);
}

#feature .img{
  position: relative;
}
#feature .img01{
  position: absolute;
  top:0;
  left: 0;
  width: calc((760 / 1400) * 100%);
  margin: calc((245 / 1400) * 100%) 0 0 0;
}
#feature .img02{
  position: absolute;
  top:0;
  right: 0;
  width: calc((430 / 1400) * 100%);
  margin: calc((455 / 1400) * 100%) calc((151 / 1400) * 100%) 0 0;
}
#feature .img-block01 {
  position: relative;
  z-index: 10;
}
#feature .img03{
  width: calc((360 / 1400) * 100%);
  margin: calc((145 / 1400) * 100%) 0 0 calc((313 / 1400) * 100%);
}
#feature .img04{
  width: calc((360 / 1400) * 100%);
  margin: calc((145 / 1400) * 100%) 0 0 calc((55 / 1400) * 100%);
}
#feature .img05{
  width: calc((360 / 1400) * 100%);
  margin: calc((95 / 1400) * 100%) 0 0 calc((517 / 1400) * 100%);
  z-index: 10;
}

#feature .img-block02 {
  position: relative;
  z-index: 10;
  margin-top: calc((247 / 1400) * 100%);
}
#feature .img06{
  position: relative;
  z-index: 0;
  width: calc((1400 / 1400) * 100%);
}
#feature .img07{
  width: calc((560 / 1400) * 100%);
  margin: calc((-454 / 1400) * 100%) 0 0 calc((742 / 1400) * 100%);
  position: relative;
  z-index: 30;
}
#feature .img08 {
  width: calc((360 / 1400) * 100%);
  margin: calc((-1 / 1400) * 100%) 0 0 calc((287/ 1400) * 100%);
  z-index: 50;
}
#feature .img09 {
  width: calc((360 / 1400) * 100%);
  margin: calc((-525 / 1400) * 100%) 0 0 calc((765 / 1400) * 100%);
  z-index: 50;
}
#feature .img10 {
  width: calc((360 / 1400) * 100%);
  margin: calc((-149 / 1400) * 100%) 0 0 calc((287 / 1400) * 100%);
}
#feature .img10__block {
  width: calc((375 / 1400) * 100%);
  margin: calc((-227 / 1400) * 100%) 0 0 calc((690 / 1400) * 100%);
  position: relative;
  z-index: 50;
}
#feature .img11 {
  width: calc((450 / 1400) * 100%);
  margin: calc((333 / 1400) * 100%) 0 0 calc((130 / 1400) * 100%);
  position: relative;
  z-index: 20;
}
#feature .img-block03 {
  width: calc((800 / 1400) * 100%);
  position: relative;
  z-index: 10;
  margin: calc((-433 / 1400) * 100%) 0 0 calc((492 / 1400) * 100%);
}
#feature .img12 {
  width: 100%;
}
#feature .img13 {
  z-index: 20;
  width: calc((380 / 1400) * 100%);
  margin: calc((-542 / 1400) * 100%) 0 0 calc((240 / 1400) * 100%);
}
#feature .img14 {
  width: calc((360 / 1400) * 100%);
  margin: calc((184 / 1400) * 100%) 0 0 calc((323 / 1400) * 100%);
}
#feature .img15 {
  width: calc((360 / 1400) * 100%);
  margin: calc((-483 / 1400) * 100%) 0 0 calc((765 / 1400) * 100%);
}

#feature .view-all {
  margin: calc((159 / 1400) * 100%) 0 0 calc((656 / 1400) * 100%);
  width: calc((90 / 1400) * 100%);
  padding-bottom: calc((170 / 1400) * 100%);
}
#feature .view-all a {
  width: 100%;
  font: normal 400 1.8rem/2.6rem "nimbus-sans", sans-serif;
  letter-spacing: calc(40/ 1000 * 1em);
  border-bottom: 1px solid #fff;
  padding-bottom: calc((4 / 1400) * 100%);
  padding-left: 0.3rem;
}


/* アニメーション */
#feature .js-fade {
  -webkit-transition: opacity 0.8s cubic-bezier(0.55,0.085,0.68,0.53) 0s,-webkit-filter 0.8s cubic-bezier(0.55,0.085,0.68,0.53) 0s;
  transition: filter 0.8s cubic-bezier(0.55,0.085,0.68,0.53) 0s,opacity 0.8s cubic-bezier(0.55,0.085,0.68,0.53) 0s,-webkit-filter 0.8s cubic-bezier(0.55,0.085,0.68,0.53) 0s;
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
  will-change: filter,opacity;
}
#feature .js-fade.is-active {
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
}