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

body  {
	background-color: rgba(211,180,115,1.00);
    background-image: linear-gradient(to bottom, rgb(171, 223, 205) 0%, rgba(211,180,115,1.00) 78vh, rgba(211,180,115,1.00) 225vh, rgb(49, 47, 45) 430vh);
    background-repeat: no-repeat;
    background-size: 100% 430vh;
    min-height: 340vh;
}
.anaLayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 340vh;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.anaLayer img {
    position: absolute;
    display: block;
    height: auto;
    user-select: none;
}
.hitFlash {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255,255,255,1);
    opacity: 0;
    pointer-events: none;
    z-index: 2147483647;
}
.holehole {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 1%;

	
}

.hole {
    padding-left: 0px;
    text-align: center;
    width: 74%;
    height: auto;
    margin-top: 1px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
	
	/*	animation: rotate-anime 3s linear infinite;
	*/
	
	
}
.mese {
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
    font-style: normal;
    color: rgba(96,70,71,1.00);
    margin-left: 78%;
    margin-top: 120%;
    position: absolute;
}
.mese2 {
    text-align: left;
    position: absolute;
    margin-top: 0%;
    right: 8%;
    margin-left: 79%;
    top: 235%;
    /* [disabled]background-color: rgba(225,251,229,1.00); */
}
.renraku {
    position: absolute;
    right: 13%;
    top: 309%;
}
.renraku a {
    color: rgb(19, 19, 68);
}



/*@keyframes rotate-anime {
		
		0%{transform:rotate(0);}
		100%{transform:rotate(360deg);}}*/
.hole .mons {
    position: absolute;
    margin-left: 10%;
    margin-top: 31%;
    width: 28%;
}
.hole .mons img {
    width: 22%;
    height: 0%;
    opacity: 0.77;
    /* filter: invert(50%) sepia(10%) saturate(9999%) hue-rotate(120deg);*/
    /*ilter: drop-shadow(0 0 0 #00ff00);*/
    mix-blend-mode: overlay;
}
.m1 {
	transform: rotateZ(45deg);
}
.white {
    top: 82%;
    position: absolute;
    left: 7%;
    font-size: 94%;
}
.mangaGate {
    position: absolute;
    top: 120%;
    left: 7%;
    font-size: 30px;
    font-weight: 700;
}
.mangaGate a {
    display: inline-block;
    text-decoration: none;
}
.mangaGate a:hover {
    opacity: 0.82;
}
.illustGate a:hover {
    opacity: 0.82;
}
.movieGate a:hover {
    opacity: 0.82;
}
.mangaGate img {
    display: block;
    width: 190px;
    height: auto;
}
.movieGate {
    position: absolute;
    top: 199%;
    left: 7%;
    font-size: 30px;
    font-weight: 700;
}
.illustGate {
    position: absolute;
    top: 149%;
    left: 19%;
    font-size: 30px;
    font-weight: 700;
}

.htxt {
    position: absolute;
    font-size: 16px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    left: 0px;
    right: 0px;
    top: 50%;
    margin-bottom: auto;
    margin-top: auto;
    top: 38%;
}
.whtxt {
    color: rgba(192,192,192,1.00);
    font-size: 87%;
}
.hole .astr  {
    position: absolute;
    color: rgba(210,230,150,1.00);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 248%;
    transform: translate(-50%, -50%);
    padding-top: 38%;
    padding-left: 75%;
}
.hole a .mdhole {
    width: 74%;
    height: auto;
}
.im1 {
    width: 60px;
    height: auto;
    float: left;
    margin-right: 0px;
    /* [disabled]clear: right; */
    /* [disabled]text-align: left; */


}
.im_d1 {
    display: inline-block;
}
.di1 {
    position: absolute;
    margin-top: 11%;
    margin-left: 10%;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: -180px;
    color: rgba(0,255,255,1.00);
}

.im2 {
    width: 124px;
    height: auto;
    margin-bottom: -87px;
}
.zen {
    margin-top: 3px;
    margin-left: 2px;
}
.zen .zu {
    margin-left: 280px;
    position: absolute;
    left: 20%;
    top: 18%;
    z-index: -8;
}


.im3 {
    margin-top: 56px;
    margin-left: 33px;
}
.modori {
    margin-top: 4%;
    text-align: center;
    font-size: 29px;
    width: 40%;
    margin-left: 196px;

}
.kokoha {
    color: rgba(29,50,54,1.00);
}

@media (max-width: 1000px) {
    html,
    body {
        overflow-x: hidden;
    }
    .hole {
        width: 100%;
    }
    .hole a .mdhole {
        width: 98%;
    }
    .hole .astr {
        font-size: 200%;
        padding-left: 100%;
         padding-top: 70%;
    }
    .hole .mons {
        width: 37%;
         padding-top: 30%;
    }
    .mangaGate img,
    .movieGate img,
    .illustGate img {
        width: 150%;
        height: auto;
    }
    .mese {
        font-size: 150%;
    }
}