@charset "utf-8";
/* CSS Document */

/* =======================================
	2025.SUMMER  No.204
    p01/特集1　OPENING
======================================= */



@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}

/*---opening---*/
#opening #pre01,
#opening #pre02{
    background:#FFF;
    display:block;
    width:100%;
	height: 100vh;
    right:0;
    top:0;
    position:absolute;
    animation-fill-mode:forwards; 
    z-index:10;
}

#opening #pre01{
    display:none;
}

#opening #pre01.active{
    display:block;
    animation-duration: 2s;
    animation-delay:2.8s;
}

#opening #pre02.active{
    animation:fadeOut 2s 4s;
    animation-fill-mode: forwards;
}

#opening #pre01 div.box{
    width:80%;
    max-width:500px;
}

#opening #pre01 div.box,
#opening #pre02 div.box{
        margin-top:-5vh;
    }

#opening #pre01 div.box span{
    width:100%;
    height:100%;
    position:relative;
    overflow: hidden;
    display:block;
}

#opening #pre01 div.box span::before{
  animation: img-wrap 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #fff;
filter: blur(10px);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
  height:300px;
    top:-20px;
}

#opening #pre01 img{
    width:100%;
    animation-duration: 2.8s;
    animation-delay: 1.5s;
}

#opening #pre02 div{
    text-align:center;
}

#opening #pre02 div h2{
    font-family: "Shuei NijimiMin L";
    font-size:40px;
    letter-spacing:0.2em;
    line-height:1.8em;
    font-weight:normal;
    color:#000;
    text-align:left;
    opacity:0;
}

#opening #pre02.active div h2{
    animation:fadeIn 2s;
    animation-fill-mode: forwards;
}

#opening #pre02 div h2:first-child{
    animation-delay:1s;
}
#opening #pre02 div h2:nth-child(2){
    animation-delay:2s;
}
#opening #pre02 div h2:last-child{
    animation-delay:2.8s;
}

/*---LAYOUT---*/

#a1-1 #slide01{
   filter: blur(10px);
    will-change: filter;
    transform: translateZ(0);
    transition: filter 4s;
}

#a1-1 #slide03{
    transform: scale(1.2);
}

#a1-1.active #slide01{
    background:url("../img/slide01.jpg?01") no-repeat center;
    background-size:cover;
    filter: blur(0px);
    animation:Top_slide 20s 0s linear forwards;
}
#a1-1.active #slide02{
    background:url("../img/slide02.jpg") no-repeat center;
    background-size:cover;
    animation:Top_slide2 22s 5s linear forwards;
}
#a1-1.active #slide03{
    background:url("../img/slide03.jpg") no-repeat center;
   	background-size:cover;
    animation:Top_slide_last 30s 12s linear forwards;
}

#mainArea.port section#area1 #a1-1.active #slide01{
    background:url("../img/slide01_h.jpg?01") no-repeat center;
    background-size:cover;
}
#mainArea.port section#area1 #a1-1.active #slide02{
    background:url("../img/slide02_h.jpg") no-repeat center;
    background-size:cover;
}
#mainArea.port section#area1 #a1-1.active #slide03{
    background:url("../img/slide03_h.jpg?02") no-repeat center;
    background-size:cover
}

.titleArea{
    width:80%;
    text-align:left;
    position:fixed;
    opacity:0;
}

.titleArea.box{
    margin-top:3%;
    margin-left:8%;
    display:block;
}

.titleArea.box.hide{
    display:none;
}

.active .titleArea{
    animation:fadeIn 2s 4s;
    animation-fill-mode: forwards;
}

/*---TEXT---*/

.titleArea h2{
    font-family: "Shuei NijimiMin L";
    font-size:50px;
    letter-spacing:0.2em;
    line-height:1.8em;
    font-weight:normal;
    color:#FFF;
    -webkit-filter:drop-shadow(0 0 3px #000);
	-moz-filter:drop-shadow(0 0 3px #000);
	-ms-filter:drop-shadow(0 0 3px #000);
	filter: drop-shadow(0 0 3px #000);
    text-align:left;
}

.titleArea h2#maincopy{
    overflow: hidden;
    width:550px;
    height:50px;
    margin:0.6em 0 0.4em;
    background: url("../img/maincopy.png") no-repeat left;
    background-size:500px auto;
}

.titleArea h2#maincopy img{
    width:500px;
}

.titleArea h2#oph2_1,
.titleArea h2#oph2_2,
.titleArea h2#oph2_3{
    font-size:30px;
}

.titleArea.an{
    animation:none !important;
    opacity:1;
}

img#icon_scrl{
    width:50px;
    height:auto;
    position:absolute;
    right:3em;
    bottom:2em;
    /*margin-left:-25px;*/
    opacity:0;
    animation-name: fadeIn;
    animation-delay: 25s;
    animation-duration: 5s;
    animation-fill-mode:forwards;
	/*-webkit-filter:drop-shadow(1px 1px 3px #000);
	-moz-filter:drop-shadow(1px 1px 3px #000);
	-ms-filter:drop-shadow(1px 1px 3px #000);
	filter: drop-shadow(1px 1px 3px #000);*/
    -webkit-filter:invert(100%) drop-shadow(1px 1px 3px #000);
    -moz-filter:invert(100%) drop-shadow(1px 1px 3px #000);
    -ms-filter:invert(100%) drop-shadow(1px 1px 3px #000);
    filter:invert(100%) drop-shadow(1px 1px 3px #000);
}

.titleArea span#opspan{
    font-size:18px;
    font-family: "Shuei NijimiMin L";
    width:97%;
    display:inline-block;
    animation-name:fadeIn;
    animation-delay:5s;
    color:#FFF;
    text-shadow:0 0 5px #000,0 0 5px #000,0 0 40px #000,0 0 40px #000,0 0 40px #000;
}



/*---ANIMATION---*/

.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
.eachTextAnime.appeartext2 span{ animation:2s text_anime_on 3s ease-out forwards; }
.eachTextAnime.appeartext3 span{ animation:3s text_anime_on 6s ease-out forwards; }
@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}

@keyframes slide_in {
	0% {filter: blur(10px);opacity:1;transform: translateZ(0);}
    75% {filter: blur(0px);opacity:1;transform: translateZ(0);}
	100% {filter: blur(0px);opacity:0;transform: translateZ(0);}
}

@keyframes Top_slide {
  0% {
    opacity: 1;
    transform: scale(1.2);
  }
  4.16% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}

@keyframes Top_slide2 {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  4.16% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale(1.25);
  }
  100% {
    opacity: 0;
  }
}

@keyframes Top_slide_last {
  0% {
    opacity: 1;
    transform: scale(1.2);
  }
  41.66% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* =======================================
	SMPH
======================================= */
@media screen and (max-width: 640px) {
            
                .titleArea.box{
                    margin-top:20vh;
                    margin-left:0;
                }

            #a1-1.active #slide01{
                background:url("../img/sp_slide01.jpg?01") no-repeat center;
                background-size:cover;
                animation:Top_slide 20s 0s linear forwards;
            }
            #a1-1.active #slide02{
                background:url("../img/sp_slide02.jpg") no-repeat center;
                background-size:cover;
                animation:Top_slide2 20s 7s linear forwards;
            }
            #a1-1.active #slide03{
                background:url("../img/sp_slide03.jpg?01") no-repeat center bottom;
                background-size:cover;
                animation:Top_slide_last 20s 14s linear forwards;
            }
    
        .titleArea h2{
            font-size:35px;
            letter-spacing:0.05em;
            }
            .titleArea h2#oph2_1,
            .titleArea h2#oph2_2,
            .titleArea h2#oph2_3{
                font-size:21px;
            }
    
            .titleArea h2#maincopy{
                margin:0.4em 0 0.2em;
                height:40px;
                background-size:280px auto;
            }

            .titleArea h2#maincopy.is-show{
                width:280px;
                height:40px;
            }
    
        img#icon_scrl{
            width:40px;
            height:auto;
            position:absolute;
            left:auto;
            right:2em;
            bottom:5em;
    }
    
    #opening #pre01 div.box,
    #opening #pre02 div.box{
        margin-top:-10vh;
    }
    
    #opening #pre01 div.box{
    width:75%;
    max-width:auto;
}
    
    #opening #pre02 div h2{
    font-size:25px;
    letter-spacing:0.2em;
    line-height:1.8em;
}
}          
/* =======================================
	For SE
======================================= */

    @media screen and  (max-width:321px) {
        
     #opening #pre02 div h2{
    font-size:22px;
        }
    }