@import url('https://use.fontawesome.com/releases/v5.13.1/css/all.css');

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');

@font-face{ 
font-family: 'BitOne';
src: url('https://dl.dropbox.com/scl/fi/2whxox819p827inusimho/IconBitOne.woff?rlkey=7fafdkjted5we851p6q7s7z6a&st=wtd7chu1') 
format("woff");
}

@font-face{ 
font-family: 'IconBitTwo'; 
src: url('https://dl.dropbox.com/scl/fi/6snpmtt0st7gukcg4q69x/IconBitTwo.woff?rlkey=vmqyz7falcx1x1jrm4ibhaqih&st=4l29q4k2') format("woff");
 }

@font-face{ 
font-family: 'Mm';
src: url('https://dl.dropbox.com/scl/fi/gk8ep9go2lpbaxvfjhv7s/x12y12pxMaruMinya.ttf?rlkey=9sbnjhh980kd0vsv7mt16roez&st=rxnrn1yj&') 
format("woff");
}

body{
        font-size: 75%;
        text-align: center;
        color: #2e2e2e;
	line-height: 1.5;
	letter-spacing: 1px;
background: rgb(175,206,235);
background: #020b14;
background: linear-gradient(130deg,rgba(2, 11, 20, 1) 0%, rgba(18, 33, 66, 1) 41%, rgba(97, 110, 132, 1) 81%, rgba(214, 159, 137, 1) 100%)fixed;
  font-size: 9px;
}

body { 	
transform-origin: top center; 
animation: loading 1s; 
text-align: center; 
} 

@keyframes loading { 
0% {opacity: 0;transform: scale(1.05);} 
100% {opacity: 1;transform: scale(1);} 
}

a{
  text-decoration:none;
   color: #fff;
  font-size: 9px;
}

* { 
  font-family: 'Mm';
 }

hr{  
   border: none;
 }

#wrp{
  max-width:700px;
  margin:0 auto;
  padding-top:20px;
}

html:before, html:after,
body:before, body:after {
content: "" ;
background: rgba(29,31,36,1);
position: fixed;
z-index: 1;
}

html:after {
width: 6px;
height: 100vh;
right: 0;
top: 0;
}

body:after {
width: 6px;
height: 100vh;
top: 0;
left: 0;
}

.ti { 
font-family: 'BitOne';
color: #fff;
 font-size: 40px; 
text-align: center; 
position: relative; 
line-height: 0em; 
}

.pypy {
  animation: pypy 3s ease-out infinite;
  opacity: 1;
}
@keyframes pypy {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}

.bks {
    color: transparent;
text-shadow: 0px 0px 7px #fff;
text-align: justify;
font-size: 9px;
letter-spacing: 1px;
}

.bxx {
  pposition: relative;
  padding: 20px 20px 20px 20px;
  margin: 40px 60px;
  border-radius: 15px;
  color: #fff;
  text-align: justify;
  font-size: 9px;
  letter-spacing: 1px;
}

.bxx a {
  color: #fff;
  text-align: justify;
  font-size: 9px;
  letter-spacing: 1px;
}



.bx {
  position: relative;
  padding: 20px 20px 20px 20px;
  margin: 40px 60px;
  border-radius: 15px;
  color: #fff;
  text-align: justify;
  font-size: 9px;
  letter-spacing: 1px;
}

.bx::before {
	content: '';
	width: 30px;
	height: 30px;
	position: absolute;
border-right: solid 1px #fff;
	border-bottom: solid 1px #fff;
	bottom: 0;
	right: 0;
}

.bx::after {
	content: '';
	width: 30px;
	height: 30px;
	position: absolute;
	border-left: solid 1px #fff;
	border-top: solid 1px #fff;
	top: 0;
	left: 0;
}


.gr{
  background: linear-gradient(transparent 70%, 
  rgba(140,255,0,0.4) 70%) ;
}
.rd{
  background: linear-gradient(transparent 70%, 
  rgba(255,0,13,0.4) 70%) ;
}
.bu{
  background: linear-gradient(transparent 70%, 
  rgba(0,89,255,0.4) 70%) ;
}
.ye{
  background: linear-gradient(transparent 70%, 
  rgba(255,217,0,0.4) 70%) ;
}
.og {
  background: linear-gradient(transparent 70%, 
  rgba(255,176,59,0.4) 70%) ;
}
.pl {
  background: linear-gradient(transparent 70%, 
  rgba(186,59,255,0.4) 70%) ;
}
.pk {
  background: linear-gradient(transparent 70%, 
  rgba(252,157,243,0.4) 70%) ;
}

dt {
font-family: 'BitOne';
}

bt { 
font-family: 'IconBitTwo';
 } 



details {
   display: block;
   margin: 2px;
   transition: .4s;
   texe-align: justify;
   border: none;
}

summary {
   cursor: pointer;
   outline: none;
   display: block;
}

details summary {
   list-styel: none;
   cursor: pointer;
   outline: none;
}

details summary::-webkit-details-marker {
   display: none;
}

details summary::before {
font-family: 'IconBitTwo';
content: 'o'; 
        font-weight: 600;
   font-size: 10px;
   margin: 0 .3em 0 0;
}

details[open] summary::before {
content: 'p';
font-family: 'IconBitTwo';
        font-weight: 600;
   font-size: 10px;
}

details[open]{
animation: fadeIn 0.9s ease-in-out;
}
@keyframes fadeIn {
0% {
opacity: 0; /* Transparent */
transform: translateY(-10px); 
  }
100% {
opacity: 1;
transform: none;
  }
}

.tm {
    padding: 0.5em 1em;
    margin: 0 auto;
    width: 280px;
    height: 200px;
    overflow: auto;
    color: cfc4ba;
    border: solid 1px #fff;
    text-align: left;
    font-size: 9px;
    letter-spacing: 1.5px;
}

.tl {
  pposition: relative;
  padding: 20px 20px 20px 20px;
  margin: 40px 60px;
  border-radius: 15px;
  color: #fff;
  text-align: justify;
  font-size: 9px;
  letter-spacing: 1px;
}

.tl details summary::before {
font-family: 'BitOne';
content: "q"; 
font-size: 11px;
margin: 0 .3em 0 0;
}

.tl details[open] summary::before {
font-family: 'BitOne';
content: "r";
font-size: 11px;
}

hr.st{ 
border-top: 1px solid #cfc4ba; 
}

.kw {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 10px 0;
    color: #333;
    line-height: 1.2;
    overflow: hidden;
}

.kw .fk {
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    font-size: 8px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    text-align: justify;
    box-sizing: content-box;
}

.kw .fk.nol {
    margin-bottom: 0;
}

.kw .fk::after {
    position: absolute;
    content: "";
    width: 17px;
    height: 17px;
    bottom: 0;
}

.kw .fk.lrl {
    float: left;
    background: #C10E49;
    color: #ffffff;
}

.kw .fk.lrl::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #C10E49 inset; 
}

.kw .fk.ktl {
    float: left;
    background: #FF6E1E;
    color: #ffffff;
}

.kw .fk.ktl::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #FF6E1E inset; 
}

.kw .fk.knl {
    float: left;
    background: #ABD3D8;
}

.kw .fk.knl::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #ABD3D8 inset; 
}

.kw .fk.kil {
    float: left;
    background: #0C6F72;
    color: #ffffff;
}

.kw .fk.kil::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #0C6F72 inset; 
}

.kw .fk.nsl {
    float: left;
    background: #C2AAE6;
    color: #ffffff;
}

.kw .fk.nsl::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #C2AAE6 inset; 
}

.kw .fk.mnl {
    float: left;
    background: #64C8F0;
    color: #ffffff;
}

.kw .fk.mnl::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #64C8F0 inset; 
}

.kw .fk.sekl {
    float: left;
    background: #8C4664;
    color: #ffffff;
}

.kw .fk.sekl::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #8C4664 inset; 
}

.kw .fk.rul {
    float: left;
    background: #5A5FAA;
    color: #ffffff;
}

.kw .fk.rul::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #5A5FAA inset; 
}

.kw .fk.rosl {
    float: left;
    background: #234A87;
    color: #ffffff;
}

.kw .fk.rosl::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #234A87 inset; 
}

.kw .fk.kidl {
    float: left;
    background: #4DD7E3;
}

.kw .fk.kidl::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #4DD7E3 inset; 
}

.kw .fk.rrml {
    float: left;
    background: #EF6F94;
    color: #ffffff;
}

.kw .fk.rrml::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #EF6F94 inset; 
}

.kw .fk.ymol {
    float: left;
    background: #AC324B;
    color: #ffffff;
}

.kw .fk.ymol::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #AC324B inset; 
}

.kw .fk.fwl {
    float: left;
    background: #BF69F4;
    color: #ffffff;
}

.kw .fk.fwl::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #BF69F4 inset; 
}

.kw .fk.aknl {
    float: left;
    background: #F03C32;
    color: #ffffff;
}

.kw .fk.aknl::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #F03C32 inset; 
}

.kw .fk.kgtl {
    float: left;
    background: #6EB487;
    color: #ffffff;
}

.kw .fk.kgtl::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #6EB487 inset; 
}

.kw .fk.inml {
    float: left;
    background: #DCFF50;
}

.kw .fk.inml::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #DCFF50 inset; 
}

.kw .fk.slpl {
    float: left;
    background: #534d91;
    color: #ffffff;
}

.kw .fk.slpl::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #534d91 inset; 
}

.kw .fk.kzl {
    float: left;
    background: #f19d5f;
    color: #ffffff;
}

.kw .fk.kzl::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #f19d5f inset; 
}

.kw .fk.ndl {
    float: left;
    background: #bc4d52;
    color: #ffffff;
}

.kw .fk.ndl::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #bc4d52 inset; 
}

.kw .fk.izml {
    float: left;
    background: #38365a;
    color: #ffffff;
}

.kw .fk.izml::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #38365a inset; 
}

.kw .fk.snbl {
    float: left;
    background: #5a416c;
    color: #ffffff;
}

.kw .fk.snbl::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #5a416c inset; 
}

.kw .fk.sryl {
    float: left;
    background: #dadada;
    color: #ffffff;
}

.kw .fk.sryl::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #dadada inset; 
}

/*右*/

.kw .fk.lrr {
    float: right;
    background: #C10E49;
    color: #ffffff;
}

.kw .fk.ktr {
    float: right;
    background: #FF6E1E;
    color: #ffffff;
}

.kw .fk.knr {
    float: right;
    background: #ABD3D8;
    color: #ffffff;
}

.kw .fk.rbr {
    float: right;
    background: #A58CDC;
    color: #ffffff;
}

.kw .fk.snr {
    float: right;
    background: #908989;
    color: #ffffff;
}

.kw .fk.lrr::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #C10E49 inset; 
}

.kw .fk.ktr::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #FF6E1E inset; 
}

.kw .fk.knr::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #ABD3D8 inset; 
}

.kw .fk.rbr::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #A58CDC inset; 
}

.kw .fk.snr::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #908989 inset; 
}

.kw .fk.no::after {
    content: none;
}

a[href*="/dt"] { /*  thread　*/
	font-size: 0;
}
a[href*="/dt"]::before{ 
	font-family: 'BitOne';
	font-size: 10px;
	content: '6'; 
	padding: 3px ;
	margin: auto;
} 

a[href*="/dm?"] { /*  article　*/
	font-size: 0;
}
a[href*="/dm?"]::before{ 
	font-family: 'BitOne';
	content: 'n'; 
	font-size: 10px;
	padding:3px;
	margin: auto;
} 

a[href*="/um?"] {  /*  edit　*/
	font-size: 0;
}
a[href*="/um?"]::before { 
	font-family: 'BitOne';
	content: 'd'; 
	font-size: 10px;
	padding:3px;
	margin: auto;
}

a[href*="/cp?"] { /*  copy　*/
	font-size: 0;
}
a[href*="/cp?"]::before { 
	font-family: 'BitOne';
	content: 'P'; 
	font-size: 10px;
	padding: 3px ;
} 

.msc { 
  width: 200px; 
  height: 15px; 
  padding: 4px; 
  margin-right: auto; 
  margin-left: auto;
  overflow: hidden;
  hidden; border: 1px solid #fff;
 }
 
.msc p { 
  animation: ugk 10s linear infinite; transform: 
  translateX(100%); 
  line-height: 10px; 
  margin: 4px; 
} 

@keyframes ugk { 
100% { 
transform: translateX(-100%); 
}

}

.rn {
color: rgba(255,255,255,0.5);
font-size: 18px;
position: fixed;
top: -5%;
text-shadow:
5vw   -100px 2px,
10vw  -400px 3px,
20vw  -500px 4px,
30vw  -580px 1px,
58vw  -250px 2px,
42vw  -340px 5px,
39vw  -150px 2px,
63vw  -180px 0,
78vw  -220px 4px,
89vw  -320px 1px,
94vw  -170px 2px;
animation: anim 6s linear infinite;

}

.ri {
color: rgba(255,255,255,0.5);
font-size: 12px;
position: fixed;
top: -5%;
text-shadow:
60vw   -100px 2px,
30vw  -400px 3px,
57vw  -500px 4px,
120vw  -580px 1px,
97vw  -250px 2px,
84vw  -340px 5px,
93vw  -150px 2px,
27vw  -180px 0,
15vw  -220px 4px,
5vw  -320px 3px,
1vw  -170px 2px;
animation: anim 4s linear infinite;
}

.ry {
color: rgba(255,255,255,0.5);
font-size: 12px;
position: fixed;
top: -5%;
text-shadow:
30vw   -100px 2px,
65vw  -400px 3px,
38vw  -500px 4px,
108vw  -580px 1px,
49vw  -250px 2px,
130vw  -340px 5px,
85vw  -150px 2px,
50vw  -180px 0,
25vw  -220px 4px,
15vw  -320px 3px,
9vw  -170px 2px;
animation: anim 5s linear infinite;
}

@keyframes anim {
100% {
color: transparent;
top: 150%; }
}

.bar { 
width:45px; 
height:40px; 
--c:linear-gradient(currentColor 0 0); 
background: var(--c) 0% 100%, var(--c) 50% 100%, var(--c) 100% 100%; 
background-size:9px 100%; 
background-repeat: no-repeat; 
animation:b2 1s infinite linear; 
margin-left: auto; 
margin-right: auto; 
}

 @keyframes b2 { 
20% {background-size:9px 60% ,9px 100%,9px 100%} 
40% {background-size:9px 80% ,9px 60% ,9px 100%} 
60% {background-size:9px 100%,9px 80% ,9px 60% } 
80% {background-size:9px 100%,9px 100%,9px 80% } 
}