@charset "utf-8";

/* CSS Document */



/* =======================================

	2023.04  No.196

    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 img#icon_scrl{

    opacity:0;

    animation-name: fadeOut;

    animation-delay: 1s;

    animation-duration: 2s;

    animation-fill-mode:forwards;

}*/



div#aniv_logo{

    transition:2s;

}



section#opening.active::after{

    opacity:0;

}



section#opening.active.hide{

    opacity:0;

}

/*section#opening img#icon_scrl.hide{

    display:none;

}*/

div#aniv_logo.hide{

    animation-name: fadeOut;

    animation-duration: 0.3s;

    animation-fill-mode:forwards;

}



/*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;

    /*display:none;*/

}



.titleArea h2#oph2_1{

    position:absolute;

    left:3%;

    top:20%;

}



.titleArea h2#oph2_2{

    position:absolute;

    left:3%;

    top:40%;

}



#opening.active .titleArea h2{

    color:#FFF;

    /*text-shadow: 1px 1px 10px #fdeebc;*/

 text-shadow: 1px 1px 10px #FFFFFF;

}



.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;

    animation-delay: 2s;

    transition:1.5s;

    /*display:none;*/

}



#opening.active .titleArea span#opspan{

    color:#FFF;

    /*text-shadow: 1px 1px 10px #fdeebc;*/

 text-shadow: 1px 1px 10px #FFFFFF;

}



#opening.active .titleArea.fo h2,

#opening.active .titleArea.fo span#opspan{

    /*animation-name: fadeOut;

    animation-delay: 8s;

    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%);

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

}



/* =======================================

	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%);

                    -moz-filter:invert(100%);

                    -ms-filter:invert(100%);

                    filter:invert(100%);

                }



            .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%;

                }

    

/* =======================================

	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%;

                }

    }



}