@charset "UTF-8";

html {
  font-size: 10px;
}
.l-container {
  width: 100%;
  margin: auto;
}
/* 1400px 以下 */
@media screen and (max-width: 1400px) {
  html {
    font-size: calc(10 * (100vw / 1400));
  }
}
/* 1401px 以上 */
@media screen and (min-width: 1401px) { 
  html {
    font-size: 10px;
  }
}

.l-footer {
  padding: 0;
}
.pc-footer {
  margin: 0;
}


/*-------------------------
 common
-------------------------*/
#feature {
  box-sizing: border-box;
  font-feature-settings: "palt";
  width: 100%;
  color: #000;
}
#feature img {
  width: 100%;
  height: auto;
  display: block;
}
#feature a {
  text-decoration: none;
}
#feature a:link, #feature a:visited {
  color: #000;
}
#feature .sp {
  display: none;
}
#feature * {
  box-sizing: border-box;
}


/*-------------------------
 slide
-------------------------*/
#feature .swiper {overflow: hidden;}
#feature .swiper02 .swiper-wrapper { transition-timing-function: linear; }



/*-------------------------
 fade
-------------------------*/
.fadeIn {
  opacity: 0;
  transition: opacity 0.5s ease-in 0.25s;
}
.fadeIn.is_show {
  opacity: 1;
}
.--1 {
  transition-delay: 0.6s;
}
.--2 {
  transition-delay: 1.0s;
}
.--3 {
  transition-delay: 1.4s;
}
.fadeRight {
  transform: translateX(-10%);
  opacity: 0;
}
.fadeRight.is_show {
  transform: translateX(0);
  transition: all 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 1;
}
.fadeLeft {
  transform: translateX(10%);
  opacity: 0;
}
.fadeLeft.is_show {
  transform: translateX(0);
  transition: all 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 1;
}
.fadeUp {
  transform: translateY(10%);
  opacity: 0;
}
.fadeUp.is_show {
  transform: translateY(0);
  transition: all 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 1;
}
.fadeBottom {
  transform: translateY(-10%);
  opacity: 0;
}
.fadeBottom.is_show {
  transform: translateY(0);
  transition: all 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 1;
}
.fadeBg {
  transform: translateX(-50%);
  opacity: 0;
}
.fadeBg.is_show {
  transform: translateX(0);
  transition: all 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 1;
}
.clipImgLeft {
  clip-path: inset(0 100% 0 0);
  transition: 0.5s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
  overflow: hidden;
}
.clipImgLeft.is_show {
  clip-path: inset(0);
}
.clipImgLeft img {
  transition: 1.5s;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: scale(1.2); 
}
.clipImgLeft.is_show img {
  transform: none;
}
.clipTxtLeft {
  clip-path: inset(0 100% 0 0);
  transition: 3.0s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
.clipTxtLeft.is_show {
  clip-path: inset(0);
}
.clipTxtRight {
  clip-path: inset(0 15% 0 0);
  transition: 2.0s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
.clipTxtRight.is_show {
  clip-path: inset(0);
}
.borderLeft {
  clip-path: inset(0 100% 0 0);
  transition: 1.0s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
.borderLeft.is_show {
  clip-path: inset(0);
}

/*-------------------------
 video
-------------------------*/
#feature .video-wrap {
  position: relative;
}
#feature .video-wrap video {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 100%;
  height: 100%;
  height: auto;
  transform: translate(-50%, -50%);
}
#feature .video-wrap .sound-button {
  position: absolute;
  bottom: 1.3rem;
  right: 1.6rem;
  z-index: 99999;
  cursor: pointer;
}
#feature .video-wrap .sound-on img {
  width: 2.0rem;
  height: 1.68rem;
}
#feature .video-wrap .sound-off img {
  width: 2.0rem;
  height: 1.66rem;
}
#feature .video-wrap .sound-button .sound-on {
  display: none;
}
#feature .video-wrap .sound-button .sound-off {
  display: block;
}
#feature .video-wrap .sound-button.off .sound-on {
  display: block;
}
#feature .video-wrap .sound-button.off .sound-off {
  display: none;
}
#feature .flex__item.right .sound-button {
  display: none !important;
}


/*-------------------------
 CONTENTS
-------------------------*/
/* sticky */
#feature {
  overflow: clip;
}
#feature .flex-wrapper {
  display: flex;
  align-items: flex-start;
  position: relative;
  overflow: clip;
  width: 100%;
}
#feature .flex__item.left {
  width: 50%;  
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding-bottom: 90px;
  overflow: hidden;
  background: #E5E8ED;  
}
#feature .flex__item.right {
  width: 50%;  
  padding: 12.0rem 10.0rem 0;
}
#feature .pcMv.video-wrap {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}
#feature .pcMv.video-wrap video {
  object-position: top center;
  display: block;
  max-width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
	min-height: 100%;
	object-fit: cover;
	height: 100%;
}
/* 1246px 以下 */
@media screen and (max-width: 1246px) { 
  #feature .pcMv.video-wrap .sound-button {
    bottom: 3.2rem;
    right: 1.6rem;
  }
}


/* 1400px 以下 */
@media screen and (max-width: 1400px) { 
  #feature .flex__item.right .inner {
  }
}
/* 1401px 以上 */
@media screen and (min-width: 1401px) { 
  #feature .flex__item.right .inner {
    width: 500px;
    margin: 0 auto;
  }
}



/* .hero */
#feature .hero {
  width: 100%;
  margin: 0 0 10.0rem 0;
  position: relative;
}
#feature .hero .img.fadeIn {
  transition: opacity 0.5s ease-in 0.05s;
}
#feature .hero .logo {
  position: absolute;
  top: 26.7rem;
  left: 21.5rem;  
  width: 6.8rem;
}
#feature .hero .logo.fadeUp {
  transform: translateY(30%);
  opacity: 0;
}
#feature .hero .logo.fadeUp.is_show {
  transform: translateY(0);
  transition: all 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s;
  opacity: 1;
}

/* .intro */
#feature .intro {
  width: 40.0rem;
  margin: 0 auto 13.3rem;
}
#feature .mv01 {
  width: 36.0rem;
  height: 64.0rem;
  margin: 0 auto 8.0rem;
}
#feature .intro p {
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 1.73rem;
  text-align: center;
  line-height: 2.0;
  letter-spacing: 0.05em;
  margin: 0 0 2.0em 0;
}


/* .style01-10 */
#feature .style01,
#feature .style02,
#feature .style03,
#feature .style04,
#feature .style05,
#feature .style06,
#feature .style07,
#feature .style08,
#feature .style09,
#feature .style10 {
  margin: 0 0 13.3rem 0;  
}
/* .style11 */
#feature .style11 {
  margin: 0 0 5.3rem 0;  
}
/* .img01 */
#feature .img01 {
  width: 46.0rem;
  margin: 0 auto 6.6rem;
}
/* .img02 */
#feature .img02 {
  width: 32.0rem;
  margin: 0 0 2.6rem 0;  
}
/* .mv02 */
#feature .mv02 {
  width: 30.0rem;
  height: 53.3rem;
  margin: 0 0 2.6rem 20.0rem;
}
/* .img04 */
#feature .img04 {
  margin: 0 0 2.6rem 0;
}
/* .img05 */
#feature .img05 {
  margin: 0 0 2.6rem 0;
}
/* .img06 */
#feature .img06 {
  width: 32.0rem;
  height: 48.0rem;
  margin: 0 auto 10.0rem;
}
/* .img07 */
#feature .img07 {
  margin: 0 0 2.6rem 0;
}
/* .img08 */
#feature .img08 {
  width: 30.0rem;
  margin: 0 0 2.6rem 2.6rem;
}
/* .img09 */
#feature .img09 {
  width: 33.3rem;
  margin: 0 0 5.3rem 16.7rem;
}
/* .img10 */
#feature .img10 {
  width: 44.6rem;
  margin: 0 0 2.6rem 0;
}
/* .img11 */
#feature .img11 {
  width: 100%;
  height: 45.0rem;
  margin: 0 0 6.6rem 0;
  overflow: hidden;  
}
#feature .img11 .swiper-slide{
  width: 30.0rem;
  height: 45.0rem;
}
/* .img12 */
#feature .img12 {
  width: 42.0rem;  
  margin: 0 auto 6.6rem;
}
/* .mv03 */
#feature .mv03 {
  width: 30.0rem;
  height: 53.3rem;
  margin: 0 auto 2.6rem;
}
/* .img14 */
#feature .img14 {
  margin: 0 0 6.6rem 0;
}
/* .img15 */
#feature .img15 {
  width: 33.3rem;  
  margin: 0 auto 2.6rem;
}
/* .img16 */
#feature .img16 {
  width: 43.3rem;
  height: 65.0rem;
  margin: 0 auto 2.6rem;
}
/* .img17 */
#feature .img17 {
  margin: 0 0 6.6rem 0;
}
/* .img18 */
#feature .img18 {
  width: 30.0rem;  
  margin: 0 auto 2.6rem;
}
/* .img19 */
#feature .img19 {
  width: 46.0rem;  
  margin: 0 auto 2.6rem;
}
/* .img20 */
#feature .img20 {
  width: 44.0rem;  
  margin: 0 0 2.6rem 0;
}
/* .img21 */
#feature .img21 {
  width: 32.0rem;  
  margin: 0 0 2.6rem 18.0rem;
}
/* .img22 */
#feature .img22 {
  margin: 0 0 6.6rem 0;
}
/* .img23 */
#feature .img23 {
  width: 33.3rem;
  height: 50.0rem;
  margin: 0 auto 2.6rem;
}
/* .img24 */
#feature .img24 {
  width: 46.0rem;  
  margin: 0 auto 5.3rem;
}


/* .credit */
#feature .credit {
  margin: 0 auto;
  display: flex;
  font-family: "acumin-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  flex-wrap: wrap;
  line-height: 1;
  justify-content: center;
}
#feature .credit li.item::after {
  content: '/';
  padding: 0 1rem;
}
#feature .credit li.item:last-child::after {
  content: '';
  padding: 0;
}


/* .btn */
#feature .btn a {
  display: block;
  width: 32.0rem;
  text-align: center;
  font-size: 1.6rem;
  font-family: "acumin-pro", sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height: 5.3rem;
  color: #FFF;
  background: #000;
  margin: 0 auto 13.0rem;
}
#feature .btn a::after {
  content: '';
  display: inline-block;
  width: 1.4rem;
  height: 0.97rem;
  background: url("../img/arrow.svg")right center no-repeat;
}