@charset "utf-8";
.topArea{
width: 100%;
height: 90vh;
}
@media screen and (max-width:980px){
.topArea{
height: 75vh;
}
}
.topArea .loading {
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 110px;
transition: all 0.3s ease 0.8s;
}
@media screen and (max-width:767px){
.topArea .loading {
font-size:1.6rem;
width: 100px;
}
}
.topArea.animation .loading {
opacity: 0;
}
.topArea .loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis steps(4, end) 800ms infinite;
content: "･･･"; /* 全部表示させた時の文字 */
width: 0px;
}
@keyframes ellipsis {
to {
width: 2em;
}
}
@-webkit-keyframes ellipsis {
to {
width: 2em;
}
}
.topArea .message{
top:50%;
left:50%;
transform: translate(-50%,-50%);
z-index:100;
opacity: 1;
transition:left 1.3s cubic-bezier(.43,.45,0,.92) 4.6s,opacity 1s ease 7s;
}
.topArea.animation  .message{
left:22.5%;
opacity: 0;
}
@media screen and (max-width:980px){
.topArea.animation  .message{
left:30%;
}
}
@media screen and (max-width:767px){
.topArea.animation  .message{
left:40%;
}
}
.topArea .message .msg{
position:relative;
line-height:1;
font-size:4.2rem;
width:544px;
white-space: nowrap;
}
@media screen and (max-width:980px){
.topArea .message .msg{
font-size:3rem;
width:405px;
}
}
@media screen and (max-width:767px){
.topArea .message .msg{
font-size:2rem;
width:290px;
}
}
.topArea .message .msg .msg-1{
position:absolute;
top:0;
left:-200px;
opacity:0;
transition:left 2s cubic-bezier(.43,.45,0,.92) 0.6s,opacity 2.3s ease 0.8s;
}
.topArea.animation .message .msg .msg-1{
left:0;
opacity:1;
}
.topArea .message .msg .msg-2{
position:absolute;
top:35px;
left:200px;
opacity:0;
transition:left 2s cubic-bezier(.43,.45,0,.92) 0.6s,opacity 2.3s ease 0.8s;
}
@media screen and (max-width:980px){
.topArea .message .msg .msg-2{
top:27px;
}
}
@media screen and (max-width:767px){
.topArea .message .msg .msg-2{
top:20px;
}
}
.topArea.animation .message .msg .msg-2{
left:0;
opacity:1;
}
.topArea .message .txt{
width:444px;
white-space: nowrap;
margin:100px 0 0 50px;
opacity:0;
-webkit-filter: blur(50px);
filter: blur(50px);
transform:scale(1.3,1.3);
transition:filter 2s ease 2.3s,opacity 2s ease 2s,transform 2s ease 2s,margin 1.3s cubic-bezier(.43,.45,0,.92) 4.6s;
}
@media screen and (max-width:980px){
.topArea .message .txt{
font-size: 1.4rem;
width:278px;
margin:80px 0 0 40px;
}
}
@media screen and (max-width:767px){
.topArea .message .txt{
font-size: 1.2rem;
margin:50px 0 0 5px;
}
}
.topArea.animation .message .txt{
opacity:0.7;
-webkit-filter: blur(0);
filter: blur(0);
transform:scale(1,1);
margin-left: 0;
}
.topArea .movieOuter{
width: 55%;
height: 0;
padding-top: 36.85%;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
@media screen and (max-width:980px){
.topArea .movieOuter{
width: 65%;
padding-top: 90%;
}
}
.topArea.animation .movieOuter{
width: 100%;
height: 90vh;
padding-top: 0;
transition: all 2s ease 6.8s;
}
@media screen and (max-width:980px){
.topArea.animation .movieOuter{
height: 75vh;
}
}
.topArea .movie{
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.topArea .movie video{
top:50%;
left:50%;
transform: translate(-50%, -50%) scale(1, 1);
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
opacity: 0;
background: url("../images/common/movie.jpg") center no-repeat;
background-size: cover;
filter: brightness(8000%);
-webkit-filter: brightness(8000%);
will-change: transform, opacity, filter;
transition: opacity 1s ease 5s,filter 1s cubic-bezier(.5,.2,.01,1) 5s,transform 2s cubic-bezier(.5,.2,.01,1) 6.8s;
}
.topArea.animation .movie video{
opacity: 1;
filter: brightness(100%);
-webkit-filter: brightness(100%);
}
.topArea .musicBtn{
z-index: 10;
bottom: 20px;
right: 25px;
width: 30px;
height: 30px;
opacity: 0;
transition: all 0.5s ease 8s;
}
@media screen and (max-width:767px){
.topArea .musicBtn{
right: 0;
bottom: 7px;
}
}
.topArea.animation .musicBtn{
opacity: 1;
}
.topArea .musicBtn.off:after{
content: "";
position: absolute;
top: 3px;
left: 14px;
width:2px;
height: 27px;
background:rgba(255,255,255,0.85);
transform: rotate(-45deg);
}
@media screen and (max-width:767px){
.topArea .musicBtn.off:after{
top: 9px;
left: 13px;
width:1px;
height: 17px;
}
}
.topArea .musicBtn img{
width: 20px;
margin: 5px 0 0 5px;
}
@media screen and (max-width:767px){
.topArea .musicBtn img{
width: 13px;
margin: 7px 0 0 7px;
}
}
.topArea .copy{
bottom: 20px;
left: 5%;
opacity: 0;
transition: all 0.5s ease 8s;
}
@media screen and (max-width:767px){
.topArea .copy{
font-size: 1rem;
left: 2%;
bottom: 10px;
}
}
.topArea.animation .copy{
opacity: 1;
}
.informationArea .grid{
padding: 100px 0 120px;
}
@media screen and (max-width:767px){
.informationArea .grid{
padding: 50px 0;
}
}
.informationArea .contentTtl{
width: 260px;
}
@media screen and (max-width:980px){
.informationArea .contentTtl{
width: 100%;
margin-bottom: 50px;
}
}
@media screen and (max-width:767px){
.informationArea .contentTtl{
margin-bottom: 30px;
}
}
.informationArea .infoBox{
width: calc(95% - 300px);
margin-right: 5%;
}
@media screen and (max-width:980px){
.informationArea .infoBox{
width: 90%;
margin-left: 5%;
margin-right: 5%;
}
}
.informationArea .infoBox .date{
width: 106px;
}
@media screen and (max-width:767px){
.informationArea .infoBox .date{
width: 100%;
}
}
.informationArea .infoBox .infoTtl{
width: calc(100% - 201px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media screen and (max-width:767px){
.informationArea .infoBox .infoTtl{
width: calc(100% - 55px);
font-size: 1.2rem;
}
}
.informationArea .infoBox .moreBtn{
width: 65px;
margin-left: 30px;
}
@media screen and (max-width:767px){
.informationArea .infoBox .moreBtn{
margin-left: 10px;
width: 45px;
}
}
.informationArea .infoBox .moreBtn a{
height: 25px;
border-radius: 25px;
line-height: 25px;
border: 1px solid #fff;
}
.informationArea .infoBox .moreBtn a:hover{
border: 1px solid #e5e5e5;
}
.informationArea .infoBox .moreBtn a .plus{
top: 1px;
margin-right: 5px;
}
.thinkArea .img{
width: 462px;
margin-right: 50px;
}
@media screen and (max-width:1240px){
.thinkArea .img{
width:40%;
}
}
@media screen and (max-width:767px){
.thinkArea .img{
width:80%;
margin-bottom: 30px;
}
}
.thinkArea .txtBox{
width: calc(100% - 512px + 5vw);
margin-right: -5vw;
}
@media screen and (max-width:1240px){
.thinkArea .txtBox{
width: calc(60% - 50px + 5vw);
}
}
@media screen and (max-width:980px){
.thinkArea .txtBox{
width: calc(60% - 50px);
margin-right: 0;
}
}
@media screen and (max-width:767px){
.thinkArea .txtBox{
width:100%;
}
}
@media screen and (max-width:767px){
.thinkArea .txtBox .jpTxt{
letter-spacing: normal;
font-size: 1.2rem;
}
}
.thinkArea .txtBox .enTxt{
max-width: 440px;
margin-right: 5vw;
}
@media screen and (max-width:980px){
.thinkArea .txtBox .enTxt{
margin-right: 0;
margin-left: 5vw;
font-size: 1rem;
}
}
.workArea{
transition: all 0.8s ease;
}
.workArea.darkArea{
background: #000;
color: #fff;
}
.workArea.darkArea .u-fcGray{
color: #fff;
}
.workArea .grid{
padding: 100px 0 150px;
}
@media screen and (max-width:767px){
.workArea .grid{
padding: 50px 0 80px;
}
}
.workArea .grid-bottom-light:first-child .grid{
padding: 30px 0 150px;
}
@media screen and (max-width:767px){
.workArea .grid-bottom-light:first-child .grid{
padding: 15px 0 80px;
}
}
.workArea .slideBox{
width: 426px;
}
@media screen and (max-width:980px){
.workArea .slideBox{
width: 90vw;
}
}
.workArea .swiper{
padding-bottom: 30px;
margin-bottom: -10px;
}









@keyframes slideInAnim {
0% { width: 0; }
100% { width: 100%; }
}
.workArea .swiper.next .swiper-slide-prev .slideIn{
animation: slideInAnim 1.5s ease forwards;
}
.workArea .swiper-slide-active .slideIn{
animation: slideInAnim 1.5s ease forwards;
}

.workArea .swiper.back .swiper-slide-active .slideIn{
animation:none;
width: 100%;
}


.workArea .swiper-slide img {
width: 426px;
max-width: 426px;
height: auto;
transition: transform 0.1s ease 3s;
}
@media screen and (max-width:980px){
.workArea .swiper-slide img {
width: 90vw;
max-width: 90vw;
}
}
.workArea .swiper-slide-active img {
transform: scale(1.05);
transition: transform 10s ease;
}










.workArea .swiper .prev{
position: absolute;
bottom:0;
right: 40px;
width: 16px;
}
.workArea .swiper .next{
position: absolute;
bottom:0;
right: 10px;
width: 16px;
}
.workArea .slideBox .txt{
margin: 0 5%;
}
@media screen and (max-width:767px){
.workArea .slideBox .enTtl{
font-size: 1.1rem;
}
.workArea .slideBox .jpTtl{
font-size: 1.2rem;
}
.workArea .slideBox .infomation{
font-size: 1.1rem;
}
}
.workArea .img{
width: calc(100% - 476px);
}
@media screen and (max-width:980px){
.workArea .img{
width: 100%;
margin-bottom: 20px;
}
}
.workArea .moreBox{
padding: 0 2%;
}
.workArea .workAreaafter{
padding: 15px 0 0;
height: 0;
}
@media screen and (max-width:767px){
.workArea .workAreaafter{
padding: 8px 0 0;
}
}
.instaArea .grid{
padding: 15px 0 150px;
}
@media screen and (max-width:767px){
.instaArea .grid{
padding: 7px 0 80px;
}
}
.instaArea .instagram{
position:relative;
padding-top:50%;
}
@media screen and (max-width:767px){
.instaArea .instagram{
padding-top:100%;
}
}
.instaArea .instImg:first-child,
.instaArea .instImg:nth-child(2),
.instaArea .instImg:nth-child(3),
.instaArea .instImg:nth-child(4),
.instaArea .instImg:nth-child(5){
top:0;
}
.instaArea .instImg:nth-child(6),
.instaArea .instImg:nth-child(7),
.instaArea .instImg:nth-child(8),
.instaArea .instImg:nth-child(9){
top:33.3333%;
}
.instaArea .instImg:nth-child(10),
.instaArea .instImg:nth-child(11),
.instaArea .instImg:nth-child(12),
.instaArea .instImg:nth-child(13),
.instaArea .instImg:nth-child(14),
.instaArea .instImg:nth-child(15){
top:66.666%;
}
@media screen and (max-width:767px){
.instaArea .instImg:first-child,
.instaArea .instImg:nth-child(2),
.instaArea .instImg:nth-child(3){
top:0;
}
.instaArea .instImg:nth-child(4),
.instaArea .instImg:nth-child(5){
top:25%;
}
.instaArea .instImg:nth-child(6),
.instaArea .instImg:nth-child(7),
.instaArea .instImg:nth-child(8),
.instaArea .instImg:nth-child(9){
top:50%;
}
.instaArea .instImg:nth-child(10),
.instaArea .instImg:nth-child(11),
.instaArea .instImg:nth-child(12),
.instaArea .instImg:nth-child(13){
top:75%;
}
}
.instaArea .instImg:first-child{
width:33.333%;
left:0;
}
@media screen and (max-width:767px){
.instaArea .instImg:first-child{
width:50%;
}
}
.instaArea .instImg:nth-child(2),
.instaArea .instImg:nth-child(6),
.instaArea .instImg:nth-child(12){
left:33.333%;
width: 16.666665%
}
.instaArea .instImg:nth-child(3),
.instaArea .instImg:nth-child(7),
.instaArea .instImg:nth-child(13){
left:50%;
width: 16.666665%
}
.instaArea .instImg:nth-child(4),
.instaArea .instImg:nth-child(8),
.instaArea .instImg:nth-child(14){
left:66.6666%;
width: 16.666665%
}
.instaArea .instImg:nth-child(5),
.instaArea .instImg:nth-child(9),
.instaArea .instImg:nth-child(15){
left:83.3333%;
width: 16.666665%
}
.instaArea .instImg:nth-child(10){
left:0;
width: 16.666665%
}
.instaArea .instImg:nth-child(11){
left:16.6666%;
width: 16.666665%
}
@media screen and (max-width:767px){
.instaArea .instImg:nth-child(2),
.instaArea .instImg:nth-child(4),
.instaArea .instImg:nth-child(8),
.instaArea .instImg:nth-child(12){
left:50%;
width: 25%;
}
.instaArea .instImg:nth-child(3),
.instaArea .instImg:nth-child(5),
.instaArea .instImg:nth-child(9),
.instaArea .instImg:nth-child(13){
left:75%;
width: 25%;
}
.instaArea .instImg:nth-child(6),
.instaArea .instImg:nth-child(10){
left:0;
width: 25%;
}
.instaArea .instImg:nth-child(7),
.instaArea .instImg:nth-child(11){
left:25%;
width: 25%;
}
.instaArea .instImg:nth-child(14),
.instaArea .instImg:nth-child(15){
display:none;
}
}
.instaArea .instImg img{
filter: grayscale(100%);
transition: all 0.8s ease;
}
.instaArea .instImg a:hover img{
filter: grayscale(0);
}
.instaArea .moreBox{
padding: 0 2%;
}