@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: 2s;
    animation-duration: 3s;
    animation-fill-mode:forwards;
    transition:2s;
}

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

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

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

#opening.active .titleArea h2.glow{
    text-shadow: 1px 1px 10px #fdeebc;
}

.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:-3em;
                opacity:0;
                animation-name: fadeIn;
                animation-delay: 3s;
                animation-duration: 3s;
                animation-fill-mode:forwards;
                transition:2s;
                }

            .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:2em;
                height:15em;
                margin-left:0;
                font-size:32px;
                line-height:1.5em;
                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:48%;
                top:5%;
                }
            .titleArea h2#oph2_2{
                position:absolute;
                left:27%;
                top:5%;
                }

            .titleArea span#opspan{
                width:100%;
                position:absolute;
                margin-left:0;
                left:0;
                top:-7%;
                }

}