@charset "utf-8";
/* MV */
.mv{position: relative; line-height: 0; overflow: hidden;}
.mv::after{content: ""; display: block;}
#mv-video{position: absolute; top: 0; left: 0; width: 100%;}

@media screen and (min-width: 769px){
    .mv::after{padding-bottom: 56.25%;}
}

@media screen and (max-width: 768px){
    .mv::after{padding-bottom: 129.444%;}
}

/* Top */
.title{font-size: min(6vw,6.2rem); line-height: 1.235; margin: 0 0 45px;}
.title span{display: inline-block; position: relative;}
.title span::before{content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: #fff; transition: .5s ease;}
.title span:nth-of-type(1)::before{transition-delay: .2s;}
.title span:nth-of-type(2)::before{transition-delay: .3s;}
.title span:nth-of-type(3)::before{transition-delay: .4s;}
.title span:nth-of-type(4)::before{transition-delay: .5s;}

.title.is-view span::before{width: 0;}

.title2{font-size: min(4vw,4rem); line-height: 1.255; margin: 0 0 20px;}
.title2 span{display: inline-block; position: relative;}
.title2 span::before{content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: #fff; transition: .5s ease;}
.title2 span:nth-of-type(1)::before{transition-delay: .2s;}
.title2 span:nth-of-type(2)::before{transition-delay: .3s;}
.title2 span:nth-of-type(3)::before{transition-delay: .4s;}
.title2 span:nth-of-type(4)::before{transition-delay: .5s;}
.title2.is-view span::before{width: 0;}

@media screen and (max-width: 768px){
    .title{font-size: 3.6rem; margin: 0 0 20px;}
    .title2{font-size: 3rem; margin: 0 0 20px;}
}

/* Circle */
.circle{position: absolute; z-index: -1; line-height: 1;}
.circle svg {overflow: visible;}

@media screen and (min-width: 769px){
    .circle{width: 1266px; height: 1266px;}
}

@media screen and (max-width: 768px){
    .circle,
    .circle svg{width: 945px; height: 945px;}
}

/* Intro */
.intro{position: relative; z-index: 1;}

@media screen and (min-width: 769px){
    .intro{margin: 190px auto 120px; display: flex; align-items: center; justify-content: space-between;}
    .intro .circle{top: 50%; left: calc(50% - 720px); transform: translateY(-50%);}

    .intro-img{width: 42.36%; height: 980px; border-radius: 0 0 50px 0; overflow: hidden;}
    .intro-img img{object-fit: cover; object-position: center; width: 100%; height: 100%;}
    
    .intro-outer{width: 50.64%; padding: 0 20px 0 0;}
    .intro-inner{max-width: 540px;}
}

@media screen and (max-width: 768px){
    .intro{margin: 70px 20px 100px;}
    .intro .circle{top: 20px; left: -400px;}
        
    .intro-img{border-radius: 0 0 28px 0; overflow: hidden; width: calc(100% + 20px); margin: 0 0 20px -20px;}
    .intro-img img{width: 100%;}
}

/* Line Up */
.lineup{max-width: 1300px; margin: 0 auto 90px; text-align: center;}
.lineup-tit{font-size: 3.2rem; line-height: 1.235; margin: 0 0 25px; letter-spacing: 0.4em; transition: 1s;}
.lineup-tit.is-view{letter-spacing: 0.1em;}

.lineupSwiper .swiper-slide{width: 284px; font-size: 2rem; line-height: 1.1; position: relative;}
.lineupSwiper .swiper-slide figure{margin: 0 0 20px;}
.lineupSwiper .swiper-slide p{margin: 0 -10px;}

.lineupSwiper .swiper-slide.animalfree::before{content: ""; position: absolute; top: 0; left: 0; width: 75px; height: 65px; background: url("../img/common/ic-animalfree.png") no-repeat top left/100% auto; display: block; z-index: 1; line-height: 1;}

.lineup-note{font-size: 1.2rem;}
.lineup-note sup{font-size: 1.6rem;}

@media screen and (min-width: 769px){
    .lineupSwiper .swiper-wrapper{display: flex; flex-wrap: wrap; justify-content: center;}
    .lineupSwiper .swiper-slide{margin: 0 20px 45px;}
}

@media screen and (max-width: 768px){    
    .lineupSwiper .swiper-wrapper{transition-timing-function: linear !important;}
    .lineup-note{margin: 40px 0 0 0;}
    
    .lineupSwiper .swiper-slide{opacity: 1 !important;}
    .lineupSwiper .swiper-slide figure{opacity: 1 !important; transform: scale(1) !important;}
}

/* Principle */
.principle{display: flex; justify-content: flex-end; margin: 0 0 200px; padding: 0 0 0 20px;}
.principle-wrap{width: calc(50% + 540px); position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}

.principle-main{border-radius: 0 0 0 50px; overflow: hidden; width: 100%;}

.principle-inner{width: min(60vw,650px); margin: min(9vw,140px) 0 0 0;}
.principle-txt{font-size: 2.2rem; line-height: 1.235; position: relative; padding: 0 0 0 min(8.875vw,142px); margin: 0 0 40px;}
.principle-txt::before{content: ""; width: min(8vw,128px); height: 1px; background: #fff; display: block; position: absolute; top: 0.65em; left: 0;}

.principle-img{width: min(32.5vw,468px); display: flex; justify-content: space-between; margin: -90px 24px 0 0;}
.principle-img .photo{width: 29.915%; position: relative; border-radius: 0 0 20px 0; overflow: hidden;}
.principle-img p{position: absolute; bottom: 0.5em; left: 0; width: 100%; text-align: center; color: #fff; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); font-size: min(2.6vw,3.5rem); line-height: 1.1;}

.principle-img .photo:nth-of-type(1) img{animation: zoomLoop 10s ease infinite; transform-origin: top;}
.principle-img .photo:nth-of-type(2) img{animation: zoomLoopR 10s ease infinite; transform-origin: bottom;}
.principle-img .photo:nth-of-type(3) img{animation: zoomLoop 10s ease infinite; transform-origin: center;}

@keyframes zoomLoop{
    0%{transform: scale(1);}
    50%{transform: scale(1.05);}
    100%{transform: scale(1);}
}

@keyframes zoomLoopR{
    0%{transform: scale(1.05);}
    50%{transform: scale(1);}
    100%{transform: scale(1.05);}
}

@media screen and (min-width: 1921px){
    .principle-img{margin-right: 10%;}
}

@media screen and (max-width: 768px){
    .principle{margin: 0 0 100px;}
    .principle-wrap{width: 100%;}
    .principle-inner{width: 100%; padding: 0 20px 0 0;}
    
    .principle-txt{padding: 0 0 0 62px; margin: 0 0 30px;}
    .principle-txt::before{width: 50px;}
    
    .principle-img{width: 100%; padding: 0 20px 0 0; margin: 50px 0 0 0;}
    .principle-img .photo{border-radius: 0 0 15px 0;}
    .principle-img p{font-size: min(6.4vw,2.5rem);}
}

@media screen and (min-width: 769px){
    .principle-wrap .circle{top: -60px; left: 176px;}
}

@media screen and (max-width: 768px){
    .principle-wrap .circle{top: 25vw; left: -140px;}
}

/* Voice */
.voice{margin: 0 0 160px;}
.voice-main{margin: 0 0 50px; border-radius: 0 0 50px 0; overflow: hidden; line-height: 1;}

@media screen and (min-width: 769px){
    .voice-main{width: 100%; height: 100vh; background: url("../img/top/voice-main.webp") no-repeat center center/cover; background-attachment: fixed;}
}

@media screen and (max-width: 768px){
    .voice{margin: 0 0 100px;}
    .voice-main{width: calc(100% - 20px); margin: 0 0 40px;}
}

.voice-wrap{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.voice-img{width: 44.385%;}
.voice-img picture{margin: 0 0 14px; overflow: hidden; width: 100%; display: block; line-height: 1;}
.voice-img picture:last-of-type{margin: 0;}
.voice-img picture:nth-of-type(2n+1){border-radius: 0 0 50px 0;}
.voice-img picture:nth-of-type(2n){border-radius: 0 0 0 30px;}

.voice-inner{width: 46.693%;}

@media screen and (max-width: 1000px){
    .voice-wrap{align-items: flex-start;}
}

@media screen and (max-width: 768px){
    .voice-img{width: 100%; display: flex; justify-content: space-between;}
    .voice-img picture{margin: 0 10px 0 0;}
    .voice-inner{width: 100%; order: -1; margin: 0 0 40px;}
}

.contents{position: relative; z-index: 1; padding: 0 0 40px;}
.contents .circle{top: -150px; right: -100px;}

@media screen and (max-width: 768px){
    .contents{padding: 0 0 20px;}
}

/* Block */
@media screen and (min-width: 769px){
    .block{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; margin: 0 0 160px}
    .block-inner{width: 33.847%;}
    .block-img{width: 62.693%; border-radius: 0 0 30px 0; overflow: hidden;}
    .block-txt{line-height: 1.635;}
    .block .btn-more{margin: 30px 0 0 0;}
}

@media screen and (max-width: 768px){
    .block{margin: 0 0 80px;}
    .block-img{width: calc(100% + 20px); border-radius: 0 0 30px 0; overflow: hidden; margin: 0 0 30px -20px;}
    .block-img img{width: 100%;}
}

/* Message */
.message{position: relative; z-index: 1;}
.message:after{content: ""; position: absolute; top: 0; left: 0; height: 100%; width: calc(50% + 540px); background: rgba(138, 138, 138, 0.37); z-index: -1;}
.message-wrap{max-width: 1200px; display: flex; justify-content: space-between; align-items: center; padding: 60px 0 30px;}
.message-inner{width: 680px; margin: 0 30px;}
.message-img{width: 331px;}
.message-name{font-size: 1.5rem; line-height: 1.3; text-align: center; letter-spacing: 0.15em; margin: 15px 0 0 0;}
.message-name span{font-size: 2.6rem; display: block;}

.message .btn-moreB{margin: 20px 0 0;}
.message .btn-moreB a{margin: 0 auto;}
.message .btn-moreB span{padding-right: 1em;}

@media screen and (max-width: 1200px){
    .message:after{width: calc(100% - 75px);}
}

@media screen and (max-width: 768px){
    .message:after{width: calc(100% - 50px);}
    .message-wrap{flex-wrap: wrap; padding: 50px 0;}
    .message h2{width: 100%; order: -1;}
    .message-img{width: 100%; max-width: 331px; margin: 0 auto 30px; order: 0;}
    .message-inner{width: 100%; order: 1; margin: 0;}
}