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

/* =======================================
	2025.SPRING  No.203
    p01/特集1　OPENING
======================================= */

/*---OPENING---*/

section#opening::after{
    content:"";
	position:fixed;
	top:0;
	left:0;
	z-index:-3;
	width:100%;
	height: 100vh;
	background:#EFEDE8;
    transition:5s;
}

section#opening img#icon_scrl{
    width:4%;
    height:auto;
    position:absolute;
    left:48%;
    bottom:-4em;
    opacity:0;
    animation-name: fadeIn;
    animation-delay: 1s;
    animation-duration: 2s;
    animation-fill-mode:forwards;
}

section#opening.active::after{
    opacity:0;
}

section#opening.active.hide{
    opacity:0;
}

/*mainVidual*/

.titleArea{
    width:88%;
    max-width:1200px;
    height:500px;
    text-align:center;
    position:fixed;
}

.titleArea.box{
    margin-left:10%;
    display:block;
}

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

.titleArea div.delay{
    display:none;
}

.titleArea div.delay.active{
    display:block;
}

.titleArea picture{
    animation-name: blurIn;
    animation-duration: 1.5s;
    animation-fill-mode:forwards;
    margin:0 auto;
}

.titleArea picture img{
    width:50%;
    margin:0 auto 20px;
    transition:3s;
}

.titleArea h2{
    font-family: "Shuei NijimiMin L";
    width:97%;
    margin-left:0.5%;
    font-size:50px;
    letter-spacing:0.2em;
    text-align: center;
    font-weight:normal;
    transition:2s;
    transform: translateZ(0);
}

.titleArea h2#oph2_1{
    position:absolute;
    left:3%;
    top:20%;
}

.titleArea h2#oph2_2{
    position:absolute;
    left:3%;
    top:40%;
}

#opening.active .titleArea.fo h2{
    color:#000;
    /*text-shadow: 1px 1px 30px #FFF;
    text-shadow: 1px 1px 30px #c9e6ef;*/
    text-shadow:0 0 5px #EFEDE8,0 0 5px #EFEDE8,0 0 40px #EFEDE8,0 0 40px #EFEDE8,0 0 40px #EFEDE8,0 0 40px #EFEDE8;
    opacity:1;
    transition:3s;
}

.titleArea span#opspan{
    font-size:18px;
    font-family: "Shuei NijimiMin L";
    width:97%;
    text-align:center;
    display:inline-block;
    position:absolute;
    left:0;
    top:8%;
    animation-name:fadeIn;
    transition:1.5s;
}

#opening.active .titleArea.fo span#opspan{
    transition:2s;
    color:#000;
    text-shadow:0 0 5px #FFF,0 0 5px #FFF,0 0 40px #FFF,0 0 40px #FFF,0 0 40px #FFF;
    /*text-shadow: 1px 1px 10px #c9e6ef;
    text-shadow: 1px 1px 20px #555;*/
}

section#opening.active .titleArea img#icon_scrl{
    opacity:0;
    animation-name: fadeIn;
    animation-delay: 22s;
    animation-duration: 5s;
    animation-fill-mode:forwards;
	-webkit-filter:drop-shadow(0 0 3px #FFF);
	-moz-filter:drop-shadow(0 0 3px #FFF);
	-ms-filter:drop-shadow(0 0 3px #FFF);
	filter: drop-shadow(0 0 3px #FFF);
    /*-webkit-filter:invert(100%);
    -moz-filter:invert(100%);
    -ms-filter:invert(100%);
    filter:invert(100%);*/
}

.titleArea hr{
    margin-bottom:60px;
    opacity:0;
    animation-name: fadeIn;
    animation-delay: 1s;
    animation-duration: 3s;
    animation-fill-mode:forwards;
    transition:2s;
}

.titleArea p{
    width:100%;
    font-size:16px;
    line-height:16px;
    text-align:center;
    opacity:0;
    animation-name: fadeIn;
    animation-delay: 1s;
    animation-duration: 6s;
    animation-fill-mode:forwards;
    transition:2s;
}

.titleArea p.hide{
    animation-name: fadeOut;
    animation-delay: 0;
    animation-duration: 0.5s;
    opacity:0;
    animation:none;
}

#opening .titleArea.active p{
    opacity:0 !important;
}

.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; }
@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);
  }
}


#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
}

/* =======================================
	DISPLAY LARGE
======================================= */

@media screen and  (min-width:1400px){
    .titleArea.box{
    margin-left:100px;
}   
}
/* =======================================
	TABLET
======================================= */
@media screen and  (min-width:641px) and ( max-width:1024px) {
    .titleArea.box{
    margin-left:1%;
} 
}

/* =======================================
	SMPH
======================================= */
@media screen and (max-width: 640px) {

            #mainArea{
                width:100%;
                min-width:auto;
                padding-top:80px;
                }
            #opening{
                margin-bottom:100vh;
                }

            section#opening img#icon_scrl{
                width:10%;
                height:auto;
                position:absolute;
                left:45%;
                bottom:-5em;
                opacity:0;
                animation-name: fadeIn;
                animation-delay: 1s;
                animation-duration: 2s;
                animation-fill-mode:forwards;
                }
    
                section#opening.active .titleArea.fo img#icon_scrl{
                    /*opacity:0;
                    animation-name: fadeIn;*/
                    /*animation-delay: 17s;
                    animation-delay: 25s;*/
                    /*animation-duration: 2s;
                    animation-fill-mode:forwards;*/
                    -webkit-filter:invert(100%) drop-shadow(0 0 3px #FFF);
                    -moz-filter:invert(100%) drop-shadow(0 0 3px #FFF);
                    -ms-filter:invert(100%) drop-shadow(0 0 3px #FFF);
                    filter:invert(100%) drop-shadow(0 0 3px #FFF);
                }

            .titleArea{
                width:90%;
                max-width:auto;
                height:60vh;
                text-align:center;
                position:fixed;
                }   

            .titleArea.box{
                margin-left:auto;
                margin-right:auto;
                margin-top:-1.5em;
                }

            .titleArea picture img{
                width:84%;
                margin:0 auto 15px;
                transition:3s;
                }

            .titleArea hr{
                margin-bottom:2em;
                }

            .titleArea p{
                width:100%;
                font-size:14px;
                line-height:1.6em;
                text-align:center;
                margin-bottom:0em;
                opacity:0;
                }

            .titleArea h2{
                width:1em;
                height:15em;
                margin-left:0;
                font-size:32px;
                line-height:1em;
                text-align:start;
                letter-spacing:0;
                font-weight:normal;
                writing-mode:vertical-rl;
                text-orientation:upright;
                vertical-align: top;
                font-feature-settings: initial;
                /*display:none;*/
                }

            .titleArea h2#oph2_1{
                position:absolute;
                left:50%;
                top:15%;
                margin-left:0.5em;
                }
            .titleArea h2#oph2_2{
                position:absolute;
                left:50%;
                top:15%;
                margin-left:-1.5em;
                }

            .titleArea span#opspan{
                width:100%;
                position:absolute;
                left:0;
                top:7%;
                }
    
    #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 top;
    background-size:cover;
    animation:Top_slide_last 20s 14s linear forwards;
}
    
            
    
/* =======================================
	For SE
======================================= */
@media screen and  ( max-height:600px) {
    .titleArea h2{
                font-size:26px;
                }
    .titleArea h2#oph2_1{
                top:28%;
                }
            .titleArea h2#oph2_2{
                top:28%;
                }
    .titleArea span#opspan{
                top:16%;
                }
    }

}