*{
    margin:0 !important;
    padding:0 !important;
}
/*animation*/
@keyframes spin{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
@keyframes flash{
    0% {opacity:1;}
    100% {opacity:0;}
}
@keyframes fi{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes skew{
    0% {transform:none;}
    33% {transform:none;}
    33.3% {transform:skewX(30deg);}
    33.6% {transform:skewX(-30deg);}
    33.9% {transform:none;}
    66% {transform:none;}
    66.3% {transform:skewX(5deg);}
    66.6% {transform:skewX(-5deg);}
    66.9% {transform:none;}
    77% {transform:none;}
    77.3% {transform:skewX(15deg);}
    77.6% {transform:skewX(-15deg);}
    77.9% {transform:none;}
}
@keyframes skew2{
    0% {transform:none;}
    33% {transform:none;}
    33.3% {transform:skewY(30deg);}
    33.6% {transform:skewY(-30deg);}
    33.9% {transform:none;}
    66% {transform:none;}
    66.3% {transform:skewY(5deg);}
    66.6% {transform:skewY(-5deg);}
    66.9% {transform:none;}
    77% {transform:none;}
    77.3% {transform:skewY(15deg);}
    77.6% {transform:skewY(-15deg);}
    77.9% {transform:none;}
}
@keyframes glitch {
    0% {transform:translate(0);}
    12.5% {transform:translate(-1px, 1px);}
    37.5% {transform:translate(-1px, -1px);}
    62.5% {transform:translate(1px, 1px);}
    87.5% {transform:translate(1px, -1px);}
    100% {transform:translate(0);}
}
@keyframes flash2{
    0% {opacity:1;}
    100% {opacity:0.8;}
}
.skw{animation:skew 3s infinite !important;}
.skw2{animation:skew2 3s infinite !important;}
.fls{animation:flash2 .03s infinite !important;}
.glc{animation:glitch .3s both infinite !important;}
/*load page*/
#loading{
    position:fixed;
    z-index:999;
    top:0;
}
#loading,#top{
    display:block;
    text-align:center;
    align-items:center;
    font-family:'Hina Mincho',serif;
    color:#d7f5f5;
	text-shadow:0 0 10px #67b5b7,0 0 15px #67b5b7;
	background: #222525;
    height:100vw;
}
#loading i{
    display:block;
    width:100vw;
    text-align:center;
    align-items:center;
    color:#b3e6e6;
	text-shadow:0 0 10px #67b5b7,0 0 15px #67b5b7;
    font-size:150%;
    margin-top:300px !important;
    animation:spin 2s linear infinite;
}
.spin{
    animation:spin 2s linear infinite;
}
#top:before{
    content:url('ai.png');
    display:block;
    padding:150px 15px;
}
#top p{
    display:inline-block;
    color:#b3e6e6;
	text-shadow:0 0 10px #67b5b7,0 0 15px #67b5b7;
    margin-left:0.2em;
    animation:flash 0.8s linear infinite;
}
.fadein{
    animation:fi 1s;
}
.fadein2{
    animation:fi 2s;
}
.dark{
    background: #222525;
}
/*main page*/
#main{
    margin-top:50px !important;
    margin-left:40px !important;
    font-family:serif;
    color:#222525;
    background:#fff;
}
/*menu*/
#menu{
    position:fixed;
    top:0;
    right:0;
    width:30%;
    background:#222525;
    color:#ccc;
	text-shadow:0 0 10px #67b5b7,0 0 15px #67b5b7;
    height:100vw;
    font-family:'Hina Mincho',serif;
    z-index:2;
}
#menu p{
    font-size:100%;
    transition:0.2s;
    margin-left:80px;
    line-height:250%;
    letter-spacing:8px;
}
#menu p:before{
    content:'‣ ';
    margin-left:30px;
}
#menu p:hover{
    font-size:120%;
    color:#fff;
    animation:skew 3s infinite;
}
#menu p.sub{
    margin-left:50px !important;
    font-size:90%;
}
#menu p.sub:hover{
    font-size:110%;
}
#menu p.sub:before{
    content:'- ';
}
#menu p.sub2{
    margin-left:80px !important;
    font-size:80%;
}
#menu p.sub2:hover{
    font-size:100%;
}
#menu p.sub2:before{
    content:'◦ ';
}
#menu a:link,#menu a:visited,#menu a:hover{
    text-decoration:none;
    color:inherit;
}
#menu .credit{
    margin-left:30px !important;
    margin-right:15px !important;
    font-size:70%;
    line-height:150%;
    letter-spacing:0;
    color:#fff;
	text-shadow:0 0 10px #67b5b7,0 0 15px #67b5b7;
    word-break:keep-all;
    opacity:0.5;
}
#menu i{
    margin-left:25px !important;
    color:#fff;
}
#menu p.m{
    display:inline-block;
    font-size:150%;
    color:#fff;
    animation:skew 3s infinite;
}
#menu p.m:before{
    content:'';
    margin-left:8px;
}
#menu p.m:hover{
    color:#fff;
	text-shadow:0 0 10px #67b5b7,0 0 15px #67b5b7;
}
#glitch{
    position:fixed;
    top:0;
    right:29%;
    width:3%;
    height:100vw;
    background-image:url('glitch.png');
    background-repeat: repeat-y;
    background-size:120%;
    z-index:1;
}
.toggle,.subtoggle{
    display:none;
}
/*main text*/
#text{
    position:absolute;
    left:50px;
    margin-right:50px !important;
    width:60% !important;
    overflow-wrap:break-word !important;
    z-index:0;
}
#text a:link,a:visited{
    color:#888;
    transition:0.2s;
}
#text a:hover{
    color:#222525;
}
.inner{
    margin-top:-50px !important;
    padding-top:100px !important;
}
.inner2{
    margin-top:-20px !important;
    padding-top:50px !important;
}
h1{
    font-size:150%;
    font-family:'Hina Mincho',serif;
    margin-bottom:15px !important;
}
h1:before{
    content:'＿/＿/＿/';
    margin-right:1em;
}
h2{
    font-size:120%;
    font-family:'Hina Mincho',serif;
    margin-bottom:10px;
}
h3{
    font-size:110%;
    font-family:'Hina Mincho',serif;
    margin-bottom:10px;
}
h3:before{
    content:'▌';
    margin-right:0.5em;
}
h4{
    font-size:100%;
    font-family:'Hina Mincho',serif;
    margin-bottom:10px;
}
h4:before{
    content:'◤';
    margin-right:0.5em;
}
h4:after{
    content:'◢';
    margin-left:0.5em;
}
h5{
    font-size:100%;
    font-family:'Hina Mincho',serif;
    margin-bottom:10px;
}
h5:before{
    content:'❑';
    margin-right:0.5em;
}
/*p*/
p.q{
    color:#3cb37a;
}
p.q:before{
    content:'Q.';
}
p.w,p.get,p.g{
    display:block;
    margin:0 !important;
    padding:0 !important;
}
p.w{color:#ff4500;display:inline-block !important;}
p.get{color:#915da3;}
p.g{color:#37a34a;}
p.c,span.c{
    display:inline-block;
    margin:0 !important;
    padding:0 8px !important;
    background:#fff100;
}
p.inline{display:inline-block !important;}
.ho1,.ho2{
    margin:10px 0 !important;
    padding:12px !important;
    width:80%;
}
.ho1{
    color:#00afcc;
    background:rgba(0,175,204,0.1);
}
.ho2{
    color:#af0082;
    background:rgba(175,0,130,0.1);
}
.ho1 span,.ho2 span{
    display:block;
    font-size:larger;
    font-weight:bold;
    font-size:100%;
}
.ho1 span:before{content:'\f4ad　HO1秘匿';margin-right:1.5em;font-family:'Hina Mincho',serif,'Font Awesome 5 Free';}
.ho2 span:before{content:'\f4ad　HO2秘匿';margin-right:1.5em;font-family:'Hina Mincho',serif,'Font Awesome 5 Free';}
.ho1-c{color:#00afcc;}
.ho2-c{color:#af0082;}
/*span*/
span.name{
    padding:2px 5px !important;
    background:#222525;
    color:#fff;
}
span.name::after{
    content:'\A' !important;
    white-space: pre-wrap;
}
span.sanc,span.dmg{
    display:inline-block !important;
    margin:0!important;
    padding:0 0 0 8px !important;
    color:#fff;
    font-weight:normal !important;
    font-size:100% !important;
}
span.sanc:before,span.dmg:before{display:none !important;}
span.sanc{background:#001e43;}
span.dmg{background:#550000;}
/*div*/
.memo{
    color:#999;
    width:72%;
    padding-top:10px;
    padding-bottom:10px;
    border-top:#ccc 2px dotted;
    border-bottom:#ccc 2px dotted;
}
.status{
    background:#888;
    color:#fff;
    font-size:80%;
    padding:12px !important;
    width:70%;
}
.small{
    font-size:80%;
}
.kp{
    background:#efefef;
    color:#888;
    font-size:80%;
    padding:12px !important;
    width:80%;
}
.kp:before{
    content:'※KP向け情報※';
    font-weight:bold;
    font-size:larger;
    display:block;
}
.kp-none{
    background:#efefef;
    color:#888;
    font-size:80%;
    padding:12px !important;
    width:80%;
}
.bf-none{
    font-size:100% !important;
}
.bf-none:before{
    content:'' !important;
    display:inline-block !important;
}
.result,.say,.pl,.info{
    padding:12px !important;
    width:80%;
    margin:10px 0 !important;
}
.result{
    background:#feffd3;
}
.say{
    background:#dbebc4;
}
.pl{
    background:#dcd1e6;
}
.info{
    border:#222525 2px dashed;
}
/*priority*/
b{
    font-size:larger;
}
sup{
    color:#999;
}
li{
    line-height:200%;
    font-size:90%;
}
ul{
    margin-top:20px !important;
    margin-bottom:20px !important;
    margin-left:30px !important;
}
.indent{
    margin-left:20px !important;
    width:70% !important;
    font-size:90% !important;
}
.w90{
    width:90% !important;
}
@media only screen and (orientation: landscape){
    .forPortrait{ display:none; }
}
@media only screen and (orientation: portrait){
    .forPortrait{ display:block; }
    #menu,#glitch,.dark{ display:none; }
    #main{
        margin:0 0 0 0 !important;
        width:95vw !important;
    }
    #text{
        position:relative !important;
        left:15px !important;
        width:90vw !important;
        margin:0 0 0 0 !important;
        margin:15px !important;
        padding:5px !important;
    }
    .credit{
        position:fixed !important;
        bottom:0 !important;
        left:0 !important;
        width:100vw !important;
        margin:0 0 0 0 !important;
        padding:15px !important;
        font-size:10px !important;
        background:rgba(0,0,0,0.8);
        color:#fff;
        z-index:1;
    }
    .credit div{
        padding:5px !important;
    }
}
a.tw:link,a.tw:visited{text-decoration:none;color:#0077ff !important;}
a.tw:hover{text-decoration:none;color:#000 !important;}
.none{
    display:none !important;
}