@charset "utf-8";
/* LP */
.lp-wrap{background: url("../img/lp/bg.jpg") no-repeat top center;}

@media screen and (min-width: 1921px){
    .lp-wrap{background-size: 100% auto;}
}

/* Bird */
.anime-bird{position: absolute; width: min(6vw,92px); height: min(6.848vw,105px); line-height: 1; display: none;}
.anime-bird > div{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}
.anime-bird > div:before{content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/anime/bird.png") no-repeat top left/500% 100%;}
.anime-bird > div:before{animation: animeBird 1.5s infinite steps(4);}

.anime-bird1{top: 70%; left: -5%;}
.anime-bird2{top: 63%; left: -10%;}
.anime-bird2 > div:before{animation-delay: .8s;}

.anime-bird1.is-show{animation: bird1Fly 11s linear forwards;}
.anime-bird2.is-show{animation: bird2Fly 11s linear forwards;}

@keyframes animeBird{
    100% {background-position: 100% 0;}
}

@keyframes bird1Fly{
	0% {top: 70%; left: -5%;}
    45% {top: 12%;}
    60% {top: 12%;}
	100% {top: 40%; left: 105%;}
}

@keyframes bird2Fly{
    0% {top: 63%; left: -10%;}
    45% {top: 5%;}
    60% {top: 5%;}
	100% {top: 33%; left: 100%;}
}

@media screen and (max-width: 767px){
    .anime-bird{width: min(10vw,92px); height: min(11.414vw,105px);}
}

/* Hero */
.hero{width: 100%; position: relative; text-align: center; overflow: hidden;}

.scence{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none;}
.scence-wrap{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.scence1{font-size: 2.8rem; font-weight: 400; line-height: 2.15; letter-spacing: 0.2em; font-family: "BIZ UDMincho", serif; color: #231F20; z-index: 5;}
.scence1 span{opacity: 0; filter: blur(5px); transition: 1s; display: inline-block;}
.scence1.is-show span{opacity: 1; filter: blur(0);}

.scence2{z-index: 4; line-height: 1;}
.scence2-logo{display: flex; justify-content: center; flex-wrap: wrap; align-items: center;}
.scence2-logo li{opacity: 0; filter: blur(5px); transform: scale(1.05); will-change: transform; transform-origin: center; transition: 1s; line-height: 0;}
.scence2.is-show .scence2-logo li{opacity: 1; filter: blur(0); transform: scale(1);}

.scence2-logo li.delay1{transition-delay: .1s;}
.scence2-logo li.delay2{transition-delay: .2s;}
.scence2-logo li.delay3{transition-delay: .3s;}
.scence2-logo li.delay4{transition-delay: .4s;}
.scence2-logo li.delay5{transition-delay: .5s;}
.scence2-logo li.delay6{transition-delay: .6s;}
.scence2-logo li.delay7{transition-delay: .7s;}
.scence2-logo li.delay8{transition-delay: .8s;}
.scence2-logo li.delay9{transition-delay: .9s;}
.scence2-logo li.delay10{transition-delay: 1s;}
.scence2-logo li.delay11{transition-delay: 1.1s;}
.scence2-logo li.delay12{transition-delay: 1.2s;}
.scence2-logo li.delay13{transition-delay: 1.3s;}
.scence2-logo li.delay14{transition-delay: 1.4s;}
.scence2-logo li.delay15{transition-delay: 1.5s;}
.scence2-logo li.delay16{transition-delay: 1.6s;}
.scence2-logo li.delay17{transition-delay: 1.7s;}
.scence2-logo li.delay18{transition-delay: 1.8s;}
.scence2-logo li.delay19{transition-delay: 1.9s;}
.scence2-logo li.delay20{transition-delay: 2s;}
.scence2-logo li.delay21{transition-delay: 2.1s;}
.scence2-logo li.delay22{transition-delay: 2.2s;}
.scence2-logo li.delay23{transition-delay: 2.3s;}
.scence2-logo li.delay24{transition-delay: 2.4s;}
.scence2-logo li.delay25{transition-delay: 2.5s;}
.scence2-logo li.delay26{transition-delay: 2.6s;}
.scence2-logo li.delay27{transition-delay: 2.7s;}

@media screen and (min-width: 768px){
    .hero{height: calc(100vh - 12rem) !important; min-height: 600px !important;}
    
    .scence2-logo{max-width: 1120px; width: 80%;}
    .scence2-logo li{margin: 0 1.6% 2.5%;}
    
    .scence2-logo li:nth-of-type(1){width: 11.1555%;}
    .scence2-logo li:nth-of-type(2){width: 11.1555%;}
    .scence2-logo li:nth-of-type(3){width: 14.0415%;}
    .scence2-logo li:nth-of-type(4){width: 12.062%;}
    .scence2-logo li:nth-of-type(5){width: 22.96775%;}
    .scence2-logo li:nth-of-type(6){width: 21.390625%; margin-left: 7%;}
    .scence2-logo li:nth-of-type(7){width: 20.15575%;}
    .scence2-logo li:nth-of-type(8){width: 11.31275%;}
    .scence2-logo li:nth-of-type(9){width: 16.0715%; margin-right: 7%;}
    .scence2-logo li:nth-of-type(10){width: 12.2285%; margin-left: 20%;}
    .scence2-logo li:nth-of-type(11){width: 29.4643%; margin-right: 20%;}
    .scence2-logo li:nth-of-type(12){width: 16.93675%; margin-left: 8%;}
    .scence2-logo li:nth-of-type(13){width: 28.5825%;}
    .scence2-logo li:nth-of-type(14){width: 25.5825%; margin-right: 8%;}
    .scence2-logo li:nth-of-type(15){width: 6.26025%;}
    .scence2-logo li:nth-of-type(16){width: 14.0415%;}
    .scence2-logo li:nth-of-type(17){width: 23.6245%;}
    .scence2-logo li:nth-of-type(18){width: 18.2595%;}
    .scence2-logo li:nth-of-type(19){width: 17.1865%;}
    .scence2-logo li:nth-of-type(20){width: 29.0179%; margin-left: 10%;}
    .scence2-logo li:nth-of-type(21){width: 19.7395%; margin-right: 10%;}
    .scence2-logo li:nth-of-type(22){width: 29.07275%;}
    .scence2-logo li:nth-of-type(23){width: 26.18675%;}
    .scence2-logo li:nth-of-type(24){width: 35.43675%;}
    .scence2-logo li:nth-of-type(25){width: 30.895%;}    
}

@media screen and (max-width: 767px){
    .hero{height: calc(100vh - 74px); min-height: 140vw;}
    
    .scence1{font-size: 3.6vw;}
    
    .scence2-logo{width: 90%;}
    .scence2-logo li{margin: 0 2% 5%;}
    .scence2-logo li:nth-of-type(1){width: 17.71%; margin-left: 15%;}
    .scence2-logo li:nth-of-type(2){width: 17.71%;}
    .scence2-logo li:nth-of-type(3){width: 22.3%; margin-right: 15%;}
    .scence2-logo li:nth-of-type(4){width: 19.15%;}
    .scence2-logo li:nth-of-type(5){width: 36.47%;}
    .scence2-logo li:nth-of-type(6){width: 33.96%;}
    .scence2-logo li:nth-of-type(7){width: 32%;}
    .scence2-logo li:nth-of-type(8){width: 17.97%;}
    .scence2-logo li:nth-of-type(9){width: 25.51%; margin-left: -4%;}
    .scence2-logo li:nth-of-type(10){width: 19.42%;}
    .scence2-logo li:nth-of-type(11){width: 46.77%; margin-right: -4%;}
    .scence2-logo li:nth-of-type(12){width: 22.89%; margin-left: -5%;}
    .scence2-logo li:nth-of-type(13){width: 38.605%;}
    .scence2-logo li:nth-of-type(14){width: 38.605%; margin-right: -5%;}
    .scence2-logo li:nth-of-type(15){width: 13.12%;}
    .scence2-logo li:nth-of-type(16){width: 22.3%;}
    .scence2-logo li:nth-of-type(17){width: 37.51%;}
    .scence2-logo li:nth-of-type(18){width: 28.99%;}
    .scence2-logo li:nth-of-type(19){width: 27.29%;}
    .scence2-logo li:nth-of-type(20){width: 46.07%;}
    .scence2-logo li:nth-of-type(21){width: 31.34%;}
    .scence2-logo li:nth-of-type(22){width: 46.16%;}
    .scence2-logo li:nth-of-type(23){width: 41.58%;}
    .scence2-logo li:nth-of-type(24){width: 55%; margin-left: -5%;}
    .scence2-logo li:nth-of-type(25){width: 48%; margin-right: -5%;}
}

/* Intro */
.intro{text-align: center;  padding: 11rem 0 16rem;}

@media screen and (min-width: 1200px){
    .intro{background-attachment: fixed;}
}

.intro-txt{font-size: 2rem; text-decoration: underline; text-underline-offset: 0.3em;}
.intro-tit{font-size: 5.2rem; line-height: 1.7; letter-spacing: 0.2em; margin: 0.5em 0 1.5em; font-weight: 400; font-family: "BIZ UDMincho", serif;}
.intro-tit span{opacity: 0; transition: 1s;}
.intro-tit.is-view span{opacity: 1;}

.intro-desc{height: 42rem; overflow: hidden; position: relative; transition: .5s;
background: -webkit-linear-gradient(#414042 0, #414042 27rem, #bacfd6 42rem); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.intro-desc > p{margin: 1.8em 0 0;}
.intro.is-show .intro-desc{height: auto; background: none;  -webkit-background-clip: inherit; -webkit-text-fill-color: inherit;}

.intro-btn{width: 44rem; border: 3px solid #414042; height: 7.6rem; text-align: center; border-radius: 4rem; margin: 8rem auto 0; line-height: 1.4; cursor: pointer; display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap;}
.intro-btn a{width: 100%; display: block;}
.intro-btn:after{content: ''; width: 2.6rem; height: 1.7rem; background: url("../img/common/ic-arrow_down.svg") no-repeat top center/100% auto; margin: 0.5rem auto 0; display: block;}
.intro-btn:hover{background: #fff;}
.intro.is-show .intro-btn:before{content: ''; width: 2.6rem; height: 1.7rem; background: url("../img/common/ic-arrow_down.svg") no-repeat top center/100% auto; margin: 0 auto 0.2rem; display: block; transform: rotateX(180deg);}
.intro.is-show .intro-btn:after{display: none;}

@media screen and (max-width: 767px){
    .intro{padding: 6rem 0 9rem;}    
    .intro-tit{font-size: 3rem; line-height: 1.5;}
    .intro-desc{height: 31rem; background: -webkit-linear-gradient(#414042 0, #414042 20rem, #bacfd6 31rem); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
    
    .intro-btn{width: 28rem; height: 6.4rem; border: 2px solid #414042;}
    .intro-btn:after{width: 2.2rem; height: 1.5rem;}
}

/* Our Vision */
.vision{padding: 16rem 0 12rem; text-align: center;}
.vision-tit{line-height: 1; margin: 0 0 5rem; overflow: hidden;}
.vision-tit span{display: inline-block; transform: translateY(100%); transition: .5s; will-change: transform; transform-origin: center;}
.vision-tit.is-view span{transform: translateY(0);}
.vision-desc{margin: 0 0 10rem; letter-spacing: 0.2em;}

@media screen and (max-width: 767px){
    .vision{padding: 9rem 0 3rem 0;}
    .vision-tit{margin: 0 0 3rem;}
    .vision-tit img{height: 2.6rem;}
    .vision-desc{margin: 0 0 5rem;}
}

.vision-nav{display: flex; justify-content: center;}
.vision-nav li{margin: 0 1.5rem;}
.vision-nav a{display: block; height: 29.1rem; padding: 8.4rem 0 0 0;}
.vision-nav .nav01{width: 34.4rem; background: url("../img/lp/bg-pink.svg") no-repeat center center/100% auto;}
.vision-nav .nav02{width: 30.4rem; background: url("../img/lp/bg-green.svg") no-repeat center center/100% auto;}
.vision-nav .nav03{width: 28rem; background: url("../img/lp/bg-yellow.svg") no-repeat center center/100% auto;}
.vision-nav .nav-titEn{line-height: 1;}
.vision-nav .nav-titEn img{height: 3.2rem; width: auto;}
.vision-nav .nav-titJp{font-size: 1.6rem; letter-spacing: 0.2em; margin: 0.3rem 0 1rem;}
.vision-nav .nav-txt{font-size: 2rem; line-height: 1.5; letter-spacing: 0.2em;}

.vision-nav .nav01:hover{background: url("../img/lp/bg-pink_over.svg") no-repeat center center/100% auto;}
.vision-nav .nav02:hover{background: url("../img/lp/bg-green_over.svg") no-repeat center center/100% auto;}
.vision-nav .nav03:hover{background: url("../img/lp/bg-yellow_over.svg") no-repeat center center/100% auto;}

@media screen and (max-width: 767px){
    .vision-nav{flex-wrap: wrap;}
    .vision-nav li{margin: 0 3vw;}
    .vision-nav a{height: 38vw; padding: 9vw 0 0 0;}
    .vision-nav .nav01{width: 44.85vw;}
    .vision-nav .nav02{width: 39.63vw;}
    .vision-nav .nav03{width: 36.5vw;}
    
    .vision-nav .nav-titEn img{height: 5.5vw;}
    .vision-nav .nav-titJp{font-size: 3vw;}
    .vision-nav .nav-txt{font-size: 3.75vw;}
}

/* Section */
.section{position: relative; padding: 26rem 0 0 0; margin: 0 auto 7rem; max-width: 1550px; width: 100%;}
.section:before,
.section:after{content: ''; position: absolute; display: block; z-index: 0;}
.sec-titEn{position: relative;}
.sec-titEn img{height: 12rem; width: auto;}
.sec-titJp{position: absolute; top: 3rem; z-index: 1;}
.sec-wrap{position: relative; padding: 6rem 0 0 0;}
.sec-outer{display: flex; position: relative; z-index: 5; width: 100%;}

.sec-txt{font-size: 3.2rem; font-weight: bold; margin: 0 0 3rem; letter-spacing: 0.2em;}
.sec-desc{letter-spacing: 0.2em;}
.sec-img_sp{display: none;}

.sec-btn{margin: 5rem 3rem 0;}
.sec-btn a{width: 44rem; border: 3px solid #414042; padding: 0.9rem 0 1rem; text-align: center; border-radius: 4rem; position: relative; display: block; background: #fff;}
.sec-btn a:after{content: ''; display: block; position: absolute; top: 50%;}
.sec-btn a.btn-more:after{width: 1.7rem; height: 2.6rem; background: #414042; right: 2.5rem; margin-top: -1.3rem;
mask: url("../img/common/ic-arrow.svg") no-repeat top center/100% auto; -webkit-mask: url("../img/common/ic-arrow.svg") no-repeat top center/100% auto;}
.sec-btn a.btn-play:after{width: 4.4rem; height: 4.4rem; background: url("../img/common/ic-play.svg") no-repeat top left/100% 100%; left: 1.3rem; margin-top: -2.2rem;}
.sec-btn a:hover{background: #414042; color: #fff;}
.sec-btn a.btn-more:hover:after{animation: animeArrow .5s; background: #fff;}

.sec-odd .sec-titEn{left: -1px;}
.sec-odd .sec-titJp{left: -1.3rem;}

.sec-even .sec-titEn{right: -1.1rem; text-align: right;}
.sec-even .sec-titJp{right: -2px;}
.sec-even .sec-outer{justify-content: flex-end;}

@media screen and (max-width: 1024px){
    .sec-outer{flex-wrap: wrap;}
    .sec-img_sp{display: block;}
    .sec-img_pc{display: none;}
}

@media screen and (max-width: 767px){
    .section{padding: 10rem 0 0 0; margin: 0 0 10rem;}
    
    .sec-wrap{padding: 4rem 0 0 0;}
   
    .sec-titEn img{height: min(17vw,10rem);}
    .sec-titJp{top: 2rem;}
    .sec-txt{font-size: 2.2rem; line-height: 1.7; margin: 0 0 2rem;}
    .sec-desc{letter-spacing: 0.1em;}
    .sec-desc br{display: none;}    
        
    .sec-odd .sec-titJp{left: -5px;}
    .sec-even .sec-titEn{right: -1px;}
    .sec-even .sec-titJp{right: -5px;}
    
    .sec-btn{margin: 3rem 4rem 0 0;}
    .sec-btn a{width: 100%; max-width: 44rem; margin: 0 auto; border: 2px solid #414042;}
    .sec-btn a.btn-more:after{width: 1.5rem; height: 2.2rem; margin-top: -1.1rem; right: 2rem;}
    .sec-btn a.btn-play:after{width: 3.8rem; height: 3.8rem; margin-top: -1.9rem; left: 1rem;}
}

/* Future */
#future:before,
#future:after{background: url("../img/lp/bg-pink.svg") no-repeat top left/100% auto; opacity: .6;}
#future:before{width: 122rem; height: 103.3rem; top: 0; left: -53rem;}
#future:after{width: 60.6rem; height: 51.3rem; top: 1.5rem; right: -45.6rem;}
#future .sec-titJp{width: 14rem;}
#future .sec-inner{width: 58%; min-width: 74rem; padding: 0 0 0 10rem;}
#future .sec-img{margin: 0 2rem 0 0;}

@media screen and (max-width: 1024px){
    #future .sec-inner{width: 100%;}
    #future .sec-img{margin: 5rem 0 0 0;}
    #future .sec-img img{width: 500px;}
}

@media screen and (max-width: 767px){
    #future:before{width: 200vw; height: 169.35vw; left: -120vw;}
    #future:after{width: 99.35vw; height: 84.1vw; top: auto; right: -80vw; bottom: -8rem;}
    
    #future .sec-titJp{width: 9rem;}
    #future .sec-inner{width: 100%; padding: 0 2rem 0 6rem; min-width: 1px;}
    #future .sec-img{width: 92%; margin: 5rem 0 0 -3vw;}
}

/* History */
#history:before,
#history:after{background: url("../img/lp/bg-green.svg") no-repeat top left/100% auto;}
#history:before{width: 108rem; height: 96rem; top: 0; right: -33.5rem;}
#history:after{width: 67.4rem; height: 59.9rem; top: 35.5rem; left: -49.4rem;}
#history .sec-titJp{width: 14.3rem;}
#history .sec-inner{width: 56%; min-width: 77.7rem; display: flex; justify-content: flex-end;}
#history .sec-inner2{width: 64.5rem;}
#history .sec-video{margin: 0 0 0 2rem; width: 100%; max-width: 636px; position: relative;}
#history .sec-video:after{content: ''; padding-bottom: 56.25%; display: block;}
#history .sec-video iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}

@media screen and (min-width: 1025px){
    #history{margin-bottom: 20rem;}
}

@media screen and (max-width: 1024px){
    #history .sec-inner{min-width: 1px; width: 100%; order: -1;}
    #history .sec-video{text-align: center; width: calc(100% - 6rem); margin: 5rem auto 0;}
}

@media screen and (max-width: 767px){
    #history:before{width: 177.05vw; height: 157.38vw; top: 0; right: -90vw;}
    #history:after{width: 110.5vw; height: 98.2vw; top: auto; left: -90vw; bottom: -11rem;}
    
    #history .sec-titJp{width: 9rem;}
    #history .sec-inner{ padding: 0 5rem 0 3rem;}
    #history .sec-inner2{width: 100%;}
    
    #history .sec-btn{margin: 3rem 1rem 0 3rem;}
    .fancybox-slide{padding: 20px !important;}
}

/* Now */
#now:before,
#now:after{background: url("../img/lp/bg-yellow.svg") no-repeat top left/100% auto; opacity: .7;}
#now:before{width: 99.5rem; height: 97.5rem; top: 0; left: -22.5rem;}
#now:after{width: 61.6rem; height: 60.3rem; top: 55.1rem; right: -46.9rem;}
#now .sec-titJp{width: 14rem;}
#now .sec-inner{padding: 0 0 0 10rem; width: 100%;}

@media screen and (max-width: 767px){
    #now:before{width: 163.12vw; height: 159.84vw; top: 0; left: -80vw;}
    #now:after{display: none;}
    #now .sec-titJp{width: 9rem;}    
    #now .sec-inner{padding: 0 2rem 0 6rem;}
}

/* Slider */
.slider{line-height: 1; background: #fff;}
.slider .slick-slide{width: 70rem !important;}
.slider .slick-arrow{width: 3.2rem; height: 4.8rem; position: absolute; border: none; top: 15.1rem; z-index: 10; text-indent: -9999px; cursor: pointer; background: #fff;}
.slider .slick-next{right: calc(50% - 37rem); mask: url("../img/lp/btn-next.svg") no-repeat top left/100% auto; -webkit-mask: url("../img/lp/btn-next.svg") no-repeat top left/100% auto;}
.slider .slick-prev{left: calc(50% - 37rem); mask: url("../img/lp/btn-prev.svg") no-repeat top left/100% auto; -webkit-mask: url("../img/lp/btn-prev.svg") no-repeat top left/100% auto;}
.slider .slick-arrow:hover{background: #000;}

.slide-img{line-height: 1; margin: 0 0 3rem; position: relative;}
.slide-img:before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.3);}
.slide-inner{text-align: center; opacity: 0; margin: 0 -100px;}
.slide-tit{font-weight: bold; margin: 0 0 1rem; letter-spacing: 0.1em; font-size: 3.2rem; line-height: 2;}
.slide-txt{letter-spacing: 0.1em; line-height: 2;}

.slide a:hover .slide-img{opacity: .8;}
.slide a:hover .slide-tit{color: #1eb9ee;}

.slider .slick-current .slide-img:before{display: none;}
.slider .slick-current .slide-inner{opacity: 1;}

@media screen and (max-width: 1023px){
    .slide-inner{margin: 0 -4vw;}
}

@media screen and (max-width: 767px){
    .slider .slick-slide{width: 86vw !important;}
    .slider .slick-arrow{width: 2.2rem; height: 3.3rem; top: calc(22vw - 1.7rem);}
    .slider .slick-next{right: calc(7vw - 1.5rem);}
    .slider .slick-prev{left: calc(7vw - 1.5rem);}
    .slide-img{margin: 0 0 2rem;}    
    .slide-tit{letter-spacing: 0; font-size: 2.2rem; line-height: 1.7;}
    .slide-txt{letter-spacing: 0;}
}

/* List Link*/
.list-link{max-width: 130rem; margin: 7rem auto 17rem; width: 100%; display: flex; justify-content: center; flex-wrap: wrap;}
.list-link li{margin: 0 1rem; font-size: 1.8rem;}
.list-link a{text-decoration: underline;}
.list-link a:hover{color: #1eb9ee;}

@media screen and (max-width: 767px){
    .list-link{margin: 5rem 0 10rem;}
    .list-link li{font-size: 1.4rem;}
}