/* Old head */

ul.a {  list-style-type: circle;line-height:20px;}
ul.b {  list-style-type: square;line-height:20px;}
img {vertical-align: middle;}

html.no-scroll,
body.no-scroll {
  overflow: hidden !important;
  height: 100%;
}

* {
  box-sizing: border-box;
}

.hidden {opacity: 0;
            transition: opacity 0.3s ease-out;}
.visible { opacity: 1; }

       #elementToToggle {opacity: 1; 
            transition: opacity 0.5s;}


.jtpl-navigation-borders {
  position: relative;
  width: 28px;
  height: 4px;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}

.jtpl-navigation-borders::before,
.jtpl-navigation-borders::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}

.jtpl-navigation-borders::before {
  top: -15px;
}

.jtpl-navigation-borders::after {
  top: 5px;
}

#jtpl-navigation-toggle-checkbox:checked + label .jtpl-navigation-borders {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(0,212,252,1) 60%, #000 61%);
  box-shadow: inset 0 -3px 0 #fff, inset 0 3px 0 #fff;
}

#jtpl-navigation-toggle-checkbox:checked + label .jtpl-navigation-borders::before,
#jtpl-navigation-toggle-checkbox:checked + label .jtpl-navigation-borders::after {
  height: 2px;
  top: 14px;
  background-color: #fff;
  transform: rotate(90deg);
}

#cc-m-header-16842723724 {
  font-size: 18px !important;
}

@media (max-width: 768px) {
  #cc-m-header-16842723724 {
    font-size: 16px !important;
  }
}


a {
  text-decoration: underline;
  text-underline-offset: 3px;
   text-decoration-color: #00ffe4;
}


::-webkit-scrollbar { width: 10px !important; }
::-webkit-scrollbar-thumb {background-color: rgba(0, 240, 255, 0.8) !important; }
::-webkit-scrollbar-thumb:hover { background: #00e56c;}


 @media (max-width: 768px) {
::-webkit-scrollbar {width: 8px !important; }
}

.Normal-img {width:100%; height: auto;}
.Normal-img2 {width:100%; height: 100%;}

        .imageA {
            display: block;
        }

        .imageB {
            display: none;
        }

 @media only screen and (max-width: 768px) {
            .imageA {
                display: none;
            }

            .imageB {
                display: block;
            }
        }


.winac2 { background-color: #1e1e1e; border-radius: 1px;    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    width: 98%; padding: 10px;   margin: 0 auto;   color: #ffffff; border: 2px solid rgba(0, 212, 252, 0.6);}
.winac2-header { display: flex; justify-content: space-between;
    align-items: center; cursor: pointer; padding: 10px;
    border-bottom: 1px solid #333333; }
.winac2-header h1 { font-size: 18px; font-weight: bold;color: #72e3ea;margin: 0; }
.winac2-content {height: 0; overflow: hidden; transition: height 0.3s ease;
    padding: 0 20px; }
.winac2-content.open { height: auto; padding: 20px;}
.winac2-buttons { display: flex; }
.winac2-button { width: 16px; height: 16px; margin-left: 8px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 1px; }
.minimize { background-color: #ffbd2e; }
.maximize { background-color: #27c93f; }
.winac2-button::before { content: ''; display: block; width: 8px; height: 2px; 
background-color: #000000; }
.maximize::before { width: 10px; height: 10px; border: 2px solid #000000; background-color: transparent; }


.winac { background-color: #1e1e1e; border-radius: 1px;    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.6);
    width: 98%; padding: 10px;   margin: 0 auto;   color: #ffffff; border: 2px solid rgba(0, 212, 252, 0.6);}
.winac-header { display: flex; justify-content: space-between;
    align-items: center; cursor: pointer; padding: 10px;
    border-bottom: 1px solid #333333; 
        animation: shine 3s infinite;
            text-shadow:
        -6px -6px 0 #00ff4e,  
         6px -6px 0 #00ff4e,
        -6px  6px 0 #00ff4e,
         6px  6px 0 #00ff4e;
          }
.winac-header h1 { font-size: 18px; font-weight: bold;color: #72e3ea;margin: 0; }
.winac-content {overflow: hidden; transition: height 0.3s ease;
    padding: 0 10px; height: 25px;}
.winac-content.open { height: auto; padding: 10px;}
.winac-buttons { display: flex; }
.winac-button { width: 16px; height: 16px; margin-left: 8px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 1px; }
.minimize { background-color: #ffbd2e; }
.maximize { background-color: #27c93f; }
.winac-button::before { content: ''; display: block; width: 8px; height: 2px; 
background-color: #000000; }
.maximize::before { width: 10px; height: 10px; border: 2px solid #000000; background-color: transparent; }

@media (max-width: 768px) {
    .winac-header h1 {
        font-size: 16px !important;
        margin: 0;
    }
    .winac-content.open {
        height: 350px; 
        overflow-y: auto; 
    }
}

.winac-arrow {
  font-size: 18px;
  margin-left: 8px;
  transition: transform 0.2s ease;
}


.winacN { background-color: #1e1e1e; border-radius: 1px;    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.6);
    width: 98%; padding: 10px;  margin: 0 auto;    color: #ffffff; border: 2px solid rgba(0, 212, 252, 0.6);}
.winacN-header { display: flex; justify-content: space-between;
    align-items: center; cursor: pointer; padding: 10px;
    border-bottom: 1px solid #333333; }
.winacN-header h1 { font-size: 18px !important; font-weight: bold;color: #72e3ea;margin: 0; }
      @media (max-width: 768px) {
        .winacN-header h1 { font-size: 16px !important; margin: 0; }
      }
.winacN-content {line-height: 1.6; padding: 5 9px; }
.winacN-buttons { display: flex; }
.winacN-button { width: 16px; height: 16px; margin-left: 8px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 1px; }
.minimize2 { background-color: #ffbd2e; }
.maximize2 { background-color: #27c93f; }
.winacN-button::before { content: ''; display: block; width: 8px; height: 2px; 
background-color: #000000; }
.maximize2::before { width: 10px; height: 10px; border: 2px solid #000000; background-color: transparent; }


.winacN2 { background-color: #1e1e1e; border-radius: 1px;    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.6);
    width: 98%; padding: 10px;   margin: 0 auto;   color: #ffffff; border: 2px solid rgba(0, 212, 252, 0.6);}
.winacN2-header { display: flex; justify-content: space-between;
    align-items: center; cursor: pointer; padding: 10px;
    border-bottom: 1px solid #333333; }
.winacN2-header h1 { font-size: 18px !important; font-weight: bold;color: #72e3ea;margin: 0; }
      @media (max-width: 768px) {
        .winacN2-header h1 { font-size: 16px !important; margin: 0; }
      }
.winacN2-content {line-height: 1.6; padding: 5 9px; }
.winacN2-buttons { display: flex; }
.winacN2-button { width: 16px; height: 16px; margin-left: 8px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 1px; }
.minimize3 { background-color: #ffbd2e; }
.maximize3 { background-color: #27c93f; }
.winacN2-button::before { content: ''; display: block; width: 8px; height: 2px; 
background-color: #000000; }
.maximize3::before { width: 10px; height: 10px; border: 2px solid #000000; background-color: transparent; }


@media (max-width: 768px) {
    .winacN2-content {
        height: 350px; 
        overflow-y: auto; 
    }
}



.win10P-box {  background-color: #1e1e1e;  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.6);
    width: 98%;   padding: 10px;     margin: 0 auto;   color: #ffffff; border: 2px solid rgba(0, 212, 252, 0.6);}
.win10P-header {display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #333333; padding-bottom: 10px; margin-bottom: 15px; }
.win10P-header h1 { font-size: 18px !important;  margin: 0; }
.win10P-header .buttons { display: flex; }
.win10P-header .button { width: 20px; height: 20px; margin-left: 8px; display: flex;
    align-items: center; justify-content: center; border-radius: 1px;  }
.win10P-content { line-height: 1.6; }
.win10P-header .button::before { content: '';display: block; width: 8px; height: 2px;
    background-color: #000000; }
.win10P-header .maximize::before { width: 10px; height: 10px; border: 2px solid #000000;
    background-color: transparent; }

      @media (max-width: 768px) {
        .win10P-header h1 { font-size: 16px !important; margin: 0; }
          .win10P-header .button { width: 8px; height: 10px; margin-left: 4px; display: flex;
    align-items: center; justify-content: center; border-radius: 1px;  }
          .win10P-header .button::before { content: '';display: block; width: 8px; height: 2px;
    background-color: #000000; }
          .win10P-header .maximize::before { width: 5px; height: 5px; border: 2px solid #000000;
    background-color: transparent; }
}


.win10-box {  background-color: #1e1e1e;  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.6);
    width: 98%;   padding: 10px;     margin: 0;  color: #ffffff; border: 2px solid rgba(0, 212, 252, 0.6);}
.win10-header {display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #333333; padding-bottom: 10px; margin-bottom: 15px; }
.win10-header h1 { font-size: 18px !important;  margin: 0; }
.win10-header .buttons { display: flex; }
.win10-header .button { width: 20px; height: 20px; margin-left: 8px; display: flex;
    align-items: center; justify-content: center; border-radius: 1px;  }
.win10-content { line-height: 1.6; }
.win10-header .button::before { content: '';display: block; width: 8px; height: 2px;
    background-color: #000000; }
.win10-header .maximize::before { width: 10px; height: 10px; border: 2px solid #000000;
    background-color: transparent; }

      @media (max-width: 768px) {
        .win10-header h1 { font-size: 16px !important; margin: 0; }
          .win10-header .button { width: 8px; height: 10px; margin-left: 4px; display: flex;
    align-items: center; justify-content: center; border-radius: 1px;  }
          .win10-header .button::before { content: '';display: block; width: 8px; height: 2px;
    background-color: #000000; }
          .win10-header .maximize::before { width: 5px; height: 5px; border: 2px solid #000000;
    background-color: transparent; }

@media (max-width: 768px) {
    .win10-content {
        height: 350px; 
        overflow-y: auto; 
    }
}


.ENGTXT {padding-left: 5px; color: #fbcd99;font-size: 16px;text-shadow: 1px 1px 1px #000000, -1px -1px 0px #000000;}
.ENGTXT-H {font-size: 18px;font-weight: bold;}

.JPNTXT {padding-left: 5px; color: #b6d8a7;  font-size: 16px; text-shadow: 1px 1px 1px #000000, -1px -1px 0px #000000;}
.JPNTXT-H {font-size: 18px; font-weight: bold; }

.CHSTXT {padding-left: 5px; color: #ec9998;font-size: 16px; text-shadow: 1px 1px 1px #000000, -1px -1px 0px #000000;}
.CHSTXT-H {font-size: 18px; font-weight: bold;}











.IMGtabs { width:100%;  overflow: hidden;    font-family: "Audiowide", sans-serif; background-color: rgba(0, 0, 0, 0.3);    display: flex; border: 1px solid rgba(0, 0, 0, 0.4);   }

.IMGtablinks { background-color: transparent;  width:100%;   color: white;
  font-family: "Audiowide", sans-serif; border: none; padding: 5px 5px;    cursor: pointer;
  transition: background-color 0.3s;}
.IMGtablinks:hover {  background-color: #4d595c; color: #ffffff;}
.IMGtablinks.active {  background-color: #ae0626; color: #ffffff;}


.IMGtabcontent { display: none; font-family:Aldrich; padding: 8px;
  justify-content: center;  background-color:rgba(0, 0, 0, 0.5);}

.subIMGtabs { display: flex; font-family:Aldrich; justify-content: center;   margin-bottom: 10px;}

.subIMGtablinks { background-color: transparent;    color: white;   border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 7px 7px;    cursor: pointer;    font-family:Aldrich;  transition: background-color 0.3s;}
.subIMGtablinks:hover {  background-color: #4d595c; color: #ffffff;}
.subIMGtablinks.active {  background-color: #ae0626; color: #ffffff;}

.subIMGtabcontent { display: none;   justify-content: center; }










.IMGtabs2 { width:100%;  overflow: hidden;    font-family: "Audiowide", sans-serif;  background-color: rgba(0, 0, 0, 0.1);    display: flex; border: 1px solid rgba(0, 0, 0, 0.4);   }

.subIMGtabs2 { display: flex;     font-family:Aldrich; justify-content: center;   margin-bottom: 10px;}

.IMGtablinks2 { background-color: transparent; 
    width:100%;   color: white;     font-family: "Audiowide", sans-serif; border: none; 
padding: 5px 5px;    cursor: pointer;    transition: background-color 0.3s;}
.IMGtablinks2:hover {  background-color: #4d595c; color: #ffffff;}
.IMGtablinks2.active {  background-color: #047a7c; color: #ffffff;}

.IMGtabcontent2 { display: none;     font-family:Aldrich;  justify-content: center;  background-color:rgba(6, 22, 37, 0.3);}

.subIMGtablinks2 { background-color: transparent;    color: white;   border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 7px 7px;    cursor: pointer;      font-family:Aldrich; transition: background-color 0.3s;}
.subIMGtablinks2:hover {  background-color: #4d595c; color: #ffffff;}
.subIMGtablinks2.active {  background-color: #ae0626; color: #ffffff;}

.subIMGtabcontent2 { display: none;   justify-content: center;    text-align: center;   -webkit-animation: fadeEffect 0.5s; animation: fadeEffect 0.5s;}
@-webkit-keyframes fadeEffect {  from {opacity: 0;}  to {opacity: 1;}}
        @keyframes fadeEffect {  from {opacity: 0;}  to {opacity: 1;}}









        .tababs { display: flex; flex-direction: column;  font-family:Aldrich;}
        .tababs > .tabab-buttons { font-family:Aldrich; display: flex; background-color: #393b3b;  color: #ffffff; float: left;  border: none;  outline: none;  cursor: pointer;  padding: 3px 5px;  transition: 0.3s;  font-size:15px;  border: 2px solid rgba(0, 0, 0, 0.4) }
        .tababs > .tabab-buttons button {background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);color: white;padding: 5px 10px;
            cursor: pointer; flex: 1; transition: background 0.3s ease;  font-family:Aldrich;}
        .tababs > .tabab-buttons button:hover {  background-color: #1a1a1a; color: #ffffff;}
        .tababs > .tabab-buttons button.active {  background-color: #ae0626; color: #ffffff;}
        .tabab-content { display: none; padding: 1px;  width:96%; margin-left:auto;margin-right:auto;margin-top:0%;margin-bottom:0%; }
        .tabab-content.active {display: block; }







    .browser { width: 100%; height: 600px; margin: 10px auto; background-color: #222;border-radius: 5px;
        overflow: hidden; }
    .browser iframe { width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, 0.3);    }






/* Button family */

/* Default Blue */
.Button-blueA { text-align: center; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19); font-size: 16px; color: #f4f4f4; background: #3c5166; display: block; letter-spacing: 0px; padding: 4px 8px; line-height: 1; }
.Button-blueA:hover { color: #000000; box-shadow: 0px 1px 13px 0 #e65e0c, 0 0px 0px 0 #e65e0c; background-color: #97afc6; transition: 0.0s;}

.Button-blueAO { text-align: center; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19); font-size: 16px; color: #f4f4f4; background: rgba(60, 81, 102, 0.8); display: block; letter-spacing: 0px; padding: 4px 8px; line-height: 1; }
.Button-blueAO:hover { color: #000000; box-shadow: 0px 1px 13px 0 #e65e0c, 0 0px 0px 0 #e65e0c; background-color: #97afc6; transition: 0.0s;}

.Button-blcakA { text-align: center; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19); font-size: 16px; color: #ffffff; background: #141414; display: block; letter-spacing: 0px; padding: 4px 8px; line-height: 1; }
.Button-blcakA:hover { color: #ef6b6b; box-shadow: 0px 1px 13px 0 #8f43af, 0 0px 0px 0 #8f43af; background-color: #2e0b58; transition: 0.0s;}

/* Blue to black */
.Button-blueBB { text-align: center; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19); font-size: 16px; color: #f4f4f4; background: #3c5166; display: block; letter-spacing: 0px; padding: 4px 8px; line-height: 1; }
.Button-blueBB:hover { color: #ffffff; box-shadow: 0px 1px 13px 0 #fcff00, 0 0px 0px 0 #fcff00; background-color: #000000; transition: 0.0s;}

/* Black to blue */
.Button-blackBB { text-align: center; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19); font-size: 16px; color: #ffffff; background: #000000; display: block; letter-spacing: 0px; padding: 4px 8px; line-height: 1; }
.Button-blackBB:hover { color: #f4f4f4; box-shadow: 0px 1px 13px 0 #1ef27d, 0 0px 0px 0 #1ef27d; background-color: #3c5166; transition: 0.0s;}


/* Black for contents */
.Button-BlackC { text-align: left; font-size: 16px; color: #ffffff; background: rgba(0, 0,0, 0.4); display: block; letter-spacing: 0px; padding: 4px 8px; line-height: 1; }
.Button-BlackC:hover { color: #000000; box-shadow: 0px 1px 13px 0 #f7f7f7, 0 0px 0px 0 #f7f7f7; background-color: #f17d7d; transition: 0.0s;}

/* Prev and Next */
.Button-bluePN { text-align: center; font-size: 16px; color: #f4f4f4; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19); background: #3c5166; text-decoration-line: none;display: block; letter-spacing: 0px;padding: 1px; line-height: 1.8; }
.Button-bluePN:hover { color: #000000; background-color: #97afc6; box-shadow: 0px 1px 13px 0 #3f99ff, 0 0px 0px 0 #3f99ff; transition: 0.0s;}

/* tiny red */
.Line-T-red { text-align: center; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.19); color: #000000; font-size: 13px;  background: #d78b8b; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.3; }
.Line-T-red:hover {background-color: #ba7878;}

.Line-T-red2 { text-align: center; color: #000000; font-size: 13px;  background: #d78b8b; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.3; }

.Line-T-red3 { color: #000000; font-size: 13px;  background: #d78b8b; display: block; letter-spacing: 0px; padding-left: 2px; line-height: 1.3; }

.Line-T-red4 { color: #000000; font-size: 20px; background: #d78b8b; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.5; text-indent: 5px; }

/* tiny red dark */
.Line-T-reddark { color: #000000; font-size: 16px; background: #9f6969; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.1; text-indent: 15px;}


/* tiny green */
.Line-T-green { text-align: center; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.19); color: #000000; font-size: 13px; background: #8bd7d3; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.3; }
.Line-T-green:hover {background-color: #72b3af;}

.Line-T-green2 { color: #000000; font-size: 13px; background: #8bd7d3; display: block; letter-spacing: 0px; padding-left: 2px; line-height: 1.3; }


.Line-T-black { text-align: center; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.19); color: #ffffff; font-size: 13px;  background: #000000; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.3; }
.Line-T-black:hover {background-color: #454545;}


/* Link: Ko-fi. Dark green */
.Button-Kofi { text-align: center; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.19); font-size: 17px; color: #ffffff; background: #375f70; display: block; text-decoration-line: none;  letter-spacing: 0px; padding: 4px 6px; line-height: 22px; }
.Button-Kofi:hover { box-shadow: 0px 1px 13px 0 #ffec15, 0 0px 0px 0 #ffec15; background-color: #25414d; transition: 0.0s;}

/* Link: Pixiv. Blue */
.Button-Pixiv { text-align: center; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.19); font-size: 17px; color: #ffffff; background: #0074aa; display: block; text-decoration-line: none;  letter-spacing: 0px; padding: 4px 6px; line-height: 22px; }
.Button-Pixiv:hover { box-shadow: 0px 1px 13px 0 #ffec15, 0 0px 0px 0 #ffec15; background-color: #005e8a; transition: 0.0s;}

/* Link: Facebook. Dark blue */
.Button-FB { text-align: center; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.19); font-size: 17px; color: #ffffff; background: #3c5a98; display: block; text-decoration-line: none;  letter-spacing: 0px; padding: 4px 6px; line-height: 22px; }
.Button-FB:hover { box-shadow: 0px 1px 13px 0 #ffec15, 0 0px 0px 0 #ffec15; background-color: #30497d; transition: 0.0s;}

/* Link: Patreon. Green */
.Button-Patreon { text-align: center; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.19); font-size: 17px; color: #ffffff; background: #077a68; display: block; text-decoration-line: none;  letter-spacing: 0px; padding: 4px 6px; line-height: 22px; }
.Button-Patreon:hover { box-shadow: 0px 1px 13px 0 #ffec15, 0 0px 0px 0 #ffec15; background-color: #06594c; transition: 0.0s;}

/* Link: Twitter. Baby blue */
.Button-Twitter { text-align: center; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.19); font-size: 17px; color: #ffffff; background: #1da1f2; display: block; text-decoration-line: none;  letter-spacing: -0.5px; padding: 4px 6px; line-height: 22px; }
.Button-Twitter:hover { box-shadow: 0px 1px 13px 0 #ffec15, 0 0px 0px 0 #ffec15; background-color: #1986c9; transition: 0.0s;}

/* Link: Youtube. Red */
.Button-Youtube { text-align: center; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.19); font-size: 17px; color: #ffffff; background: #c33636; display: block; text-decoration-line: none;  letter-spacing: 0px; padding: 4px 6px; line-height: 22px; }
.Button-Youtube:hover { box-shadow: 0px 1px 13px 0 #ffec15, 0 0px 0px 0 #ffec15; background-color: #972e2e; transition: 0.0s;}

.Button-Steam { text-align: center; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.19); font-size: 17px; color: #ffffff; background: #171a21; display: block; text-decoration-line: none;  letter-spacing: 0px; padding: 4px 6px; line-height: 22px; }
.Button-Steam:hover { box-shadow: 0px 1px 13px 0 #9be8d5, 0 0px 0px 0 #ffec15; background-color: #2a303d; transition: 0.0s;}


/* Link: Lets play some game. purple */
.Button-play { text-align: center; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.19); font-size: 17px; color: #ffffff; background: #615aa3; display: block; text-decoration-line: none;  letter-spacing: 0px; padding: 4px 6px; line-height: 22px; }
.Button-play:hover { box-shadow: 0px 1px 13px 0 #ffec15, 0 0px 0px 0 #ffec15; background-color: #4a457c; transition: 0.0s;}

/* Black button for team */
.Button-Black-tem { text-align: left; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19); color: #ffffff; font-size: 18px; background: #1e1e1e; display: block; letter-spacing: 2px; padding: 4px 10px; line-height: 1.5;}
.Button-Black-tem:hover { box-shadow: 0px 1px 13px 0 #ffec15, 0 0px 0px 0 #ffec15; background-color: #3c5166; box-shadow: 0px 1px 13px 0 #0ce6cf, 0 0px 0px 0 #0ce6cf; transition: 0.0s;}

.Button-Black-tem-NoS { text-align: left; color: #ffffff; font-size: 18px; background: #1e1e1e; display: block; letter-spacing: 2px; padding: 4px 10px; line-height: 1.5;}

/* Headline for Ultimate */
.Head-Ult {color: #ededed; font-size: 14px; background: #c4374b; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 5px;}










/* Headline family */

.BlackAndCyan { text-align: left; color: #89e8e8; font-size: 13px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 5px;}

/* Headline for Updates */
.BlackAndCyan-up { text-align: left; color: #89e8e8; font-size: 18px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; text-indent: 10px; line-height: 1.4}

.BlackAndGold { color: #f3c212; font-size: 18px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }

.BlackAndGold-M { color: #f3c212; font-size: 24px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 2; text-indent: 5px; }

.BlackAndGold-W { color: #f31212; font-size: 20px; background: #ffd800; display: block; letter-spacing: 0px; padding: 1px; line-height: 2; text-indent: 5px; text-align: center; margin: 0% auto 0% auto;}

/* Black button S */
.Button-Black-S { font-size: 16px; color: #ffffff; background: #1d1d1d; text-decoration-line: none; display: block; letter-spacing: 0px; padding: 4px 6px; line-height: 1.5;  padding: 4px 10px; text-indent: 5px; }

/* Black button M */
.Button-Black-M { font-size: 17px; color: #ffffff; background: #1d1d1d; text-decoration-line: none; display: block; letter-spacing: 0px; padding: 4px 6px; line-height: 25px;  padding: 4px 10px; text-indent: 5px; }

/* Black button L */
.Button-Black-L { font-size: 26px; color: #ffffff; background: #121212; text-decoration-line: none; display: block; letter-spacing: 0px; padding: 4px 6px; line-height: 1.4; padding: 4px 10px; text-indent: 5px; }

.Button-Black-L2 { color: #ededed; font-size: 24px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 2; text-indent: 5px;}

/* Black & white M */
.Black-W-M { color: #ededed; font-size: 26px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 5px;}

/* Headline for month */
.Black-jan { color: #ff7070; font-size: 18px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }
.Black-feb { color: #5ab5f2; font-size: 18px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }
.Black-mar { color: #db8400; font-size: 18px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }
.Black-apr { color: #80c6aa; font-size: 18px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }
.Black-may { color: #c492ad; font-size: 18px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }
.Black-jun { color: #ffe694; font-size: 18px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }
.Black-jul { color: #8c8ce3; font-size: 18px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }
.Black-aug { color: #93c57c; font-size: 18px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }
.Black-sep { color: #ec9998; font-size: 18px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }
.Black-oct { color: #dfb990; font-size: 18px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }
.Black-nov { color: #b59fef; font-size: 18px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }
.Black-dec { color: #8dcfd8; font-size: 18px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }

/* White tip */
.White-tip { color: #000000; font-size: 16px; background: #a5a5a5; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.2; text-indent: 17px;}

.White-tip2 { color: #000000; font-size: 16px; background: #a5a5a5; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.1; padding-left: 17px;}

.White-tip3 { color: #000000; font-size: 16px; background: #c1c1c1; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 10px;}

.White-tip4 { color: #000000; font-size: 18px; background: #c1c1c1; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 5px;}

/* Black grey brown */
.BlackT { font-size: 18px; color: #ffffff; display: block; letter-spacing: 0px; padding: 1px; background: #1e1e1e; letter-spacing: 0px; padding: 1px; line-height: 1.5; text-indent: 5px;}
.GreyT { font-size: 16px; color: #000000; background: #a5a5a5; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.5; text-indent: 10px;}
.BrownT { font-size: 16px; color: #ffffff; background: #463c3c; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.5; text-indent: 10px;}







/* Line family */

/* Transparent line */  
.lineA { font-size: 2px; background: rgba(0, 0, 0, 0.1); display: block; letter-spacing: 0px; padding: 1px; line-height: 0.5; }

.lineBL { font-size: 1px; background: rgba(39, 180, 180, 0.8); display: block; letter-spacing: 0px; padding: 1px; line-height: 0.5; }

/* White line */  
.line-W { color: #000000; font-size: 2px; background: #c5c8cb; display: block; letter-spacing: 0px; padding: 1px; line-height: 0.1; text-indent: 5px; }

/* Black line */  
.line-B { color: #000000; font-size: 2px; background: #000000; display: block; letter-spacing: 0px; padding: 1px; line-height: 0.1; text-indent: 5px; }

.line-B2 { color: #000000; font-size: 1px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 0.5;}









.IQAred-Ti {text-align: left; display: block; color: #eeeeee; font-size: 16px; background: #2b2a30; text-decoration-line: none;  letter-spacing: 0px; padding: 4px 10px; line-height: 1.5; margin: 0% auto 0% auto;}
.IQAred {text-align: left; display: block; color: #eeeeee; font-size: 16px; text-shadow: 2px 2px 2px #782127, -2px -2px 0px #782127; background: #a04d52; letter-spacing: 0px; padding: 4px; line-height: 1.4; text-indent: 10px; margin: 0% auto 0% auto;}


/* Headline for profile */
.Chara-infoTi::after {  content: " Information"; }
.Chara-infoTi { color: #ededed; font-size: 16px; background: #121212; display: block;
  letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }

/* Basic personality */
.Chara-personTi { background: rgba(0, 0, 0, 0.4); display: block;
  letter-spacing: 0px; padding: 1px; line-height: 1.4; text-align: center; }
.Chara-person::before { content: " Basic personality"; }
.Chara-personJpn::before { content: "基本的な性格"; }
.Chara-Faction::before { content: " Faction"; }
.Chara-FactionJpn::before { content: "派閥"; }
.Chara-Life::before { content: " Life style"; }
.Chara-LifeJpn::before { content: "生活スタイル"; }
.Chara-role::before { content: " Role in a team"; }
.Chara-roleJpn::before { content: "チームでの役割"; }
.Chara-Etype::before { content: " Evilslav type"; }
.Chara-EtypeJpn::before { content: "邪隷の種類"; }
.Chara-Evils1::before { content: "Evilslav's Name:"; }
.Chara-dataJpn::before { content: "戦いのティア"; }
.Chara-contJpn::before { content: "サブ属性"; }

.Chara-person1 { color: #b5d8a6; font-size: 17px; text-shadow: 0px 0px 4px #00b2ed;}
.Chara-Faction1 { color: #69c8ff; font-size: 17px; text-shadow: 0px 0px 4px #ff5757;}
.Chara-Life1 { color: #ecea38; font-size: 17px; text-shadow: 0px 0px 4px #ff5757;}
.Chara-role1 { color: #ff8585; font-size: 17px; text-shadow: 0px 0px 4px #ff5757;}
.Chara-Etype1 { color: #ef85ff; font-size: 17px; text-shadow: 0px 0px 4px #ff5757;}

.Chara-RelaJpn::before { content: "関係"; }
.Chara-AchiJpn::before { content: "トロフィー"; }
.Chara-HisJpn::before { content: "歴史"; }

/* Relationship */
.Chara-RelaTi::after { content: " Relations"; }
.Chara-RelaTi { color: #ededed; font-size: 16px; background: #121212; display: block;
  letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }

/* Career Stats */
.Chara-CareerTi::after { content: " Career"; }
.Chara-CareerTi { color: #ededed; font-size: 16px; background: #121212; display: block;
  letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }
.Chara-HistoryTi::after { content: " History"; }
.Chara-HistoryTi { color: #ededed; font-size: 16px; background: #121212; display: block;
  letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }
.Chara-CarJpn::before { content: "キャリア"; }
.Chara-NopTi::after { content: " Notable Opponent(s)"; }
.Chara-NopTi { color: #ededed; font-size: 16px; background: #121212; display: block;
  letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }
.Chara-NopJpn::before { content: "注目すべき対戦相手"; }

.FGTtext1::before { content: "Opponents' level: "; }
.FGTtext2::before { content: "Fights: "; }


.NoramlTi { color: #ededed; font-size: 16px; background: #121212; display: block;
  letter-spacing: 10px; padding: 1px; line-height: 1.4; text-indent: 6px; }

.TriviaTi::after { content: " Trivia"; }

.PersontreeTiA { color: #ededed; font-size: 16px; background: #121212; display: block;
  letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }
.PersontreeTiB::after { /* Personality Skill Tree */
   content: " Detailed Personality  "; }
.PersonJpn::after { /* Personality Skill Tree */
   content: "詳細な性格"; }
.InforJpn::after { content: "情報"; }

.PersontreeTiAM { color: #ededed; font-size: 16px; background: #121212; display: block; text-align: left;  width:90%; 
  letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px;  border-radius: 8px;}
.AchievementsAM {color: #ededed; font-size: 16px; background: #121212; display: block; text-align: left;  width:90%; 
  letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px;  border-radius: 8px;}
.Chara-RelaTiM {
  color: #ededed; font-size: 16px; background: #121212; display: block; text-align: left;  width:90%; 
  letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px;   border-radius: 8px;}
.Chara-RelaTiM::after {  content: " Relationship"; }
.Chara-HistoryTiM::after { content: " History"; }
.Chara-HistoryTiM { color: #ededed; font-size: 16px; background: #121212; display: block;
text-align: left;  width:90%; 
  letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px;   border-radius: 8px;}


.Chara-CareerTiM::after { content: " Career"; }
.Chara-CareerTiM {  color: #ededed; font-size: 16px; background: #121212; display: block;
  letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px;   border-radius: 8px;}
.Chara-NopTiM::after { content: " Notable Opponent(s)"; }
.Chara-NopTiM {  color: #ededed; font-size: 16px; background: #121212; display: block;
  letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px;   border-radius: 8px;}


.Ti-jpM { background: #c1c1c1;  display: block; text-align: left; color: #000000;  font-size: 16px; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 15px;  width: 80%; border-radius: 5px; margin-left: 15px; }







.Charati { color: #ededed; font-size: 16px; background: #121212; display: block;
  letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }

.Appearances::after { content: " Appearances"; }

.AchievementsA {color: #ededed; font-size: 16px; background: #121212; display: block;
  letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }
.AchievementsB::after { content: " Achievements "; }

.FightdataA { color: #ededed; font-size: 16px; background: #121212; display: block;
  letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }
.FightdataB::after { content: " Fighting Tier "; }

.GameplayA { color: #ededed; font-size: 16px; background: #121212; display: block;
  letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }
.GameplayB::after { content: " Sub-attribute "; }
.Graphics::after { content: " Graphics"; }

/* character's identity such as Mercenary, Citizen */
.IdentityT { color: #000000; font-size: 16px; background: #999999; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; padding-left: 30px;}

.accdSkill { width:100%; text-align: left; border: none;  outline: none;  cursor: pointer; font-family: Aldrich; transition: 0.4s; color: #ffffff; font-size: 16px; background: #111111; display: block; letter-spacing: -0.5px; padding: 5px 5px;line-height: 1.5; text-indent: 5px; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);}
.accdSkill:hover {background: #1a1a1a;}
.active1, .accdSkill:hover { background-color: #ae0626; box-shadow: 0 0px 4px 0 #ff354d, 0 2px 4px 0 #ff354d; }
.accdSkill:after {  content: '\002B'; color: #ff0000; font-weight: bold;  float: right;  margin-left: 5px;  margin-right: 3px; padding: 5px 10px;}
.active1:after {  content: "\2212"; color: #000000;}
.panel1 { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;}


.accdSkill2 { width:100%; text-align: left; border: none;  outline: none;  cursor: pointer; font-family: Aldrich; transition: 0.4s; color: #ffffff; font-size: 16px; background: #111111; display: block; letter-spacing: -0.5px; padding: 5px 5px;line-height: 1.5; text-indent: 5px; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);}
.accdSkill2:hover {background: #002c2c;}
.active2, .accdSkill2:hover { background-color: #00899a; box-shadow: 0 0px 4px 0 #35fdff, 0 2px 4px 0 #35fdff; }
.accdSkill2:after {  content: '\002B'; color: #ff0000; font-weight: bold;  float: right;  margin-left: 5px;  margin-right: 3px; padding: 5px 10px; }
.active2:after {  content: "\2212"; color: #000000;}
.panel2 { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;}


.accdSkillTi { width:100%; text-align: left; border: none;  outline: none;
        font-family: Aldrich; color: #ffffff; font-size: 16px; background: #111111;
        display: block; letter-spacing: -0.5px; padding: 1px; line-height: 1.5; text-indent: 5px; 
    text-shadow: 0px 0px 15px #ff0000;}

.accdSAA { width:100%; text-align: left; border: none;  outline: none;
 font-family: Bungee; color: #ffa352; text-shadow: 0px 0px 15px #ff0000;
 font-size: 16px; background: #111111; display: block; letter-spacing: -0.5px;
  padding: 1px; line-height: 1.2; text-indent: 5px; 
  box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);}



.accdDW { width:100%; text-align: center; border: none;  outline: none;  cursor: pointer; background: #393b3b;  font-family: Aldrich; transition: 0.4s; color: #ffffff; display: block; box-shadow: 0 0px 7px 0 rgba(0, 0, 0, 0.9), 0 0px 7px 0 rgba(0, 0, 0, 0.9);}
.active2, .accdDW:hover { background-color: #878787; box-shadow: 0 0px 4px 0 rgba(34, 216, 255, 0.9), 0 2px 4px 0 rgba(34, 216, 255, 0.9); }
.accdDW:hover {background: #161919; box-shadow: 0 0px 7px 0 rgba(34, 216, 255, 0.9), 0 2px 7px 0 rgba(34, 216, 255, 0.9); }
.panel2 { max-height: 0; width:100%; overflow: hidden; transition: max-height 0.2s ease-out;}
.panelimage {text-align: center; width:100%; }


.Overclocking { width:100%; text-align: left; font-family: Aldrich; color: #ffffff; font-size: 17px; background: #4e140f; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.5; text-indent: 5px; box-shadow: 0 0px 7px 0 #d22b4b, 0 2px 7px 0 #d22b4b; }
.Overclocking::after { content: " Overclocking"; }


.Ti-red-center { text-align: center; font-size: 16px; background: #990000; display: block; letter-spacing: 0px; line-height: 1.5; color: #ffffff;}
.Ti-red-left { text-align: left; font-size: 16px; background: #990000; display: block; letter-spacing: 0px; line-height: 1.5; color: #ffffff; text-indent: 5px; }


/* Character's name, Basic data */

.Ti-jp { background: #c1c1c1;  display: block; text-align: left; color: #000000;  font-size: 16px; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 15px; }

/* organisation above the name */ 
.Organi { text-align: left; font-size: 16px; background: #990000; display: block; letter-spacing: 0px; line-height: 1.5; color: #ffffff; text-indent: 5px; }
table.Chara-Name { border-spacing: 3px; width: 100%; height: 50px; }

.Chara-Name-L { width: 110px; background-color: #303031;}

.Chara-Name-L1text::before { content: "English name"; }
.Chara-Name-L1text { color: #bbb1b1; font-size: 12px; display: block; letter-spacing: 0px; padding: 1px; line-height: 1; }

.Chara-Name-R1 { background: #121212; }
.Chara-Name-R1text { color: #ffffff; font-size: 18px; display: block; letter-spacing: 0px; padding-left: 2px; line-height: 2; }

/* Other Character's Name */
.Chara-Name-R1OT { color: #ffffff; font-size: 16px; text-indent: 3px; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; }

/* Other Character's basic */
.Chara-OTbasic1 { color: #eeeeee; font-size: 16px; background: #303031; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 5px;}
.Chara-OTbasic2 { color: #eeeeee; font-size: 16px; background: #4c4e51; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 5px;}

/* Other Character's Appearances */
.chara-OTappear { color: #000000; font-size: 16px; background: #c5c8cb; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 5px;}


.Chara-Name-L2text::before { content: "Japanese name"; }
.Chara-Name-L2text { color: #bbb1b1; font-size: 12px; display: block; letter-spacing: 0px; padding: 1px; line-height: 1; }

.Chara-Name-R2 { background: #4c4e51; }
.Chara-Name-R2text { color: #ffffff; font-size: 16px; text-indent: 3px; }

.Chara-Name-L3text::before { content: "Chinese name"; }
.Chara-Name-L3text { color: #bbb1b1; font-size: 12px; display: block; letter-spacing: 0px;
   padding: 1px; line-height: 1; }


.Chara-Basic::before { content: "Character number: ";}
.Chara-Basic { text-align: center; color: #f3c212; font-size: 18px; background: #1e1e1e;text-decoration-line: none; display: block; letter-spacing: 2px; padding: 4px 10px; line-height: 1.5;}

.Chara-Basic2::before { content: "キャラクター番号: ";}
.Chara-Basic2 { text-align: center; color: #f3c212; font-size: 18px; background: #1e1e1e;text-decoration-line: none; display: block; letter-spacing: 2px; padding: 4px 10px; line-height: 1.5;}

.Chara-Basic3::before { content: "角色編號 : ";}
.Chara-Basic3 { text-align: center; color: #f3c212; font-size: 18px; background: #1e1e1e;text-decoration-line: none; display: block; letter-spacing: 2px; padding: 4px 10px; line-height: 1.5;}

table.Chara-BasicT { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4);}
.Chara-BasicT-Right {width:65%;}
.Chara-Basic-avatar {height:90%;}

table.Chara-BasicAHN { background: rgba(0, 0, 0, 0.2); width: 100%; height: 100%; }
.Chara-BasicAHN-L { height: 35px;   width: 20px;}
.Chara-BasicAHN-R { width: 170px;   font-size: 16px;}

/* Prev and Next */
table.Chara-BasicPN { border-collapse: collapse; width: 100%;}
.BasicFlag {height: 20px;}
.BasicFlagTXT {color: #ffffff; font-size: 16px; letter-spacing: -0.2px; }







/* Chracter Information */ 
#Chara-Info { width:100%;  height:100%; font-size: 16px; }
#Chara-Info td, #Chara-Info th {padding-left:5px; padding-left:2px;}

.Chara-InfoLeft {  width: 85px; color: #999999; background: rgba(0, 0, 0, 0.4); }
.Chara-InfoR-1 { color: #f3c212; }
.Chara-InfoR-2 { color: #48b2ef; }
.Chara-InfoR-3 { color: #b5d8a6; }
.Chara-InfoR-4 { color: #ffffff; }
.Chara-InfoR-5 { color: #ffffff; }
.Chara-InfoRight { font-size: 16px; color: #ffffff; background: rgba(0, 0, 0, 0.4); }


.Persona-InfoLeft {  width: 145px; color: #ffffff; background: rgba(0, 0, 0, 0.4); }


.Infor0::before { content: "情報"; }
.Infor1::before { content: "Address"; }
.Infor2::before { content: "Job"; }
.Infor3::before { content: "Nose type"; }
.Infor4::before { content: "Skin color"; }
.Infor5::before { content: "Species"; }
.Infor6::before { content: "住所"; }
.Infor7::before { content: "仕事"; }
.Infor8::before { content: "鼻のタイプ"; }
.Infor9::before { content: "肌の色"; }
.Infor10::before { content: "種族"; }
.Infor11::before { content: "地址"; }
.Infor12::before { content: "工作"; }
.Infor13::before { content: "鼻型"; }
.Infor14::before { content: "膚色"; }
.Infor15::before { content: "種類"; }
.Infor16::before { content: "Likes"; }
.Infor17::before { content: "好きなもの"; }
.Infor18::before { content: "喜歡"; }

/* Relationship */
.Chara-RelaTi::after {  content: " Relationship"; }
.Chara-RelaTi {
  color: #ededed; font-size: 16px; background: #121212; display: block;
  letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 6px; }

.Chara-Rela-F {color: #ffff00; font-size: 16px; background: #262626; display: block; letter-spacing: 0px; padding-left: 4px; line-height: 1.5;}

#Relationship { text-indent: 5px; width:100%; height:100; font-size: 16px; color: #ffffff; }
#Relationship td, #Relationship th { border: 1px solid rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.4); }

.RelationshipTEAM { background: #5d3737; }
.Relationship-td { width: 35%;}








/* Character's Career Stats and history */
#CareerTable { text-indent: 3px; width:100%;  height:100%; font-size: 16px; color: #ffffff; }
#CareerTable td, #CareerTable th { background: rgba(0, 0, 0, 0.4); }
.CareerTable-td1 { font-size: 16px; color: #bbb1b1; width:180px; }

.Career1::before { content: "Kills"; }
.Career2::before { content: "Hand was cut off"; }
.Career3::before { content: "Leg was cut off"; }
.Career4::before { content: "Got shots"; }
.Career5::before { content: "Used weapons"; }
.Career6::before { content: "Beginning service at"; }
.Career7::before { content: "Earnings (Basic)"; }
.Career8::before { content: "Mercenary points"; }
.Career9::before { content: "Mercenary type"; }

.His-Ti {color: #ffff00; font-size: 16px; background: #262626; display: block; letter-spacing: 0px; padding-left: 4px; line-height: 1.5;}
.His-td { font-size: 16px; color: #f3c212; width:130px; text-indent: 3px;}
.HisTi1::before { content: "In prison"; }
.HisTi2::before { content: "In army"; }







/* Character's Personality skill tree */
#skilltree { border-collapse: collapse; border-spacing: 0;border-padding 0; text-align: center; width:100%; }
#skilltree td, #skilltree th { width:70px; text-align: center; }

#Achieve { border-collapse: collapse; border-spacing: 0; border-padding 0; text-align: center; width:100%; }
#Achieve td {background: rgba(0, 0, 0, 0.4); text-align: center; }

#Achieve button {background: rgba(0, 0, 0, 0.0); border: none;  outline: none;  cursor: pointer;  transition: 0.3s;  font-family:Aldrich; }
#Achieve button:hover { background: rgba(75, 75, 75, 0.5);  box-shadow: 0px 1px 13px 0 #000000, 0 0px 0px 0 #000000;}
#Achieve button.active { background: rgba(174, 6, 38, 0.7);}
.tabcontentAchieveB {display: none; border:10px solid rgba(0, 0, 0, 0.1);  -webkit-animation: fadeEffect 0.3s; animation: fadeEffect 0.3s;}
@-webkit-keyframes fadeEffect {  from {opacity: 0;}  to {opacity: 1;}}
        @keyframes fadeEffect {  from {opacity: 0;}  to {opacity: 1;}}

.AchieveBX { float: right;  cursor: pointer;  font-size: 28px; color: #FFFFFF;}
.AchieveBX:hover {color: #ff0000; }

.AchievePT {text-align: center; color: #ededed; font-size: 18px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4;}
#AchieveTable { border:0; border-collapse: collapse; width: 100%;}
.AchieveTd1 { width: 27.9783%;}
.AchieveTd2 { width: 72.0217%;}

.AchieveP { text-shadow: 1px 1px 1px #000000, -1px -1px 0px #000000; font-size: 16px; padding-left: 10px;}



#AchieveC { border-collapse: collapse; border-spacing: 0; border-padding 0; text-align: center; width:100%; }
#AchieveC td {background: rgba(0, 0, 0, 0.4); text-align: center; }

#AchieveC button {background: rgba(0, 0, 0, 0.0); border: none;  outline: none;  cursor: pointer;  transition: 0.3s;  font-family:Aldrich; }
#AchieveC button:hover { background: rgba(16, 100, 148, 0.5);  box-shadow: 0px 1px 13px 0 #3acbae, 0 0px 0px 0 #3acbae; border: 3px solid rgba(0, 212, 252, 0.6);}
#AchieveC button.active { background: rgba(26, 152, 225, 0.7); border: 3px solid rgba(255, 255, 255, 0.6);}

.tabcontentAchieveC {display: none; border:10px solid rgba(0, 0, 0, 0.1);  -webkit-animation: fadeEffect 0.3s; animation: fadeEffect 0.3s;}
@-webkit-keyframes fadeEffect {  from {opacity: 0;}  to {opacity: 1;}}
        @keyframes fadeEffect {  from {opacity: 0;}  to {opacity: 1;}}

.tabcontentAchieveD {
  display: none; 
  border: 10px solid rgba(0, 0, 0, 0.1);
  -webkit-animation: openTVEffect 0.3s;
  animation: openTVEffect 0.3s;
}

@-webkit-keyframes openTVEffect {
  from { 
    opacity: 0; 
    -webkit-transform: scaleX(0); 
    transform: scaleX(0); 
  }
  to { 
    opacity: 1; 
    -webkit-transform: scaleX(1); 
    transform: scaleX(1); 
  }
}

@keyframes openTVEffect {
  from { 
    opacity: 0; 
    -webkit-transform: scaleX(0); 
    transform: scaleX(0); 
  }
  to { 
    opacity: 1; 
    -webkit-transform: scaleX(1); 
    transform: scaleX(1); 
  }
}


.AchieveCX { float: right;  cursor: pointer;  font-size: 28px; color: #FFFFFF;}
.AchieveCX:hover {color: #ff0000; }

.Achieve2PT {text-align: center; color: #ededed; font-size: 18px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4;}
#Achieve2Table { border:0; border-collapse: collapse; width: 100%;}
.Achieve2Td1 { width: 27.9783%;}
.Achieve2Td2 { width: 72.0217%;}



.skillA { color: #ededed; font-size: 14px; background: #121212; display: block; letter-spacing: -0.2px; line-height: 1.2; }

.skillB { color: #ededed; font-size: 14px; background: #4c4e51; display: block; letter-spacing: 0px; line-height: 1.2; }
.skillC { /* Skill tree image */  height:50%; }
.skillC2 { text-align: center; }
.skillD { color: #93c67c; font-size: 18px; background: #222222; display: block; letter-spacing: 0px; }

/* Row 1-EN text of skill tree */
.Kindness::before { content: "Kindness"; }
.Niceguy::before { content: "Goodness"; }
.Courtesy::before { content: "Courtesy"; }
.Villain::before { content: "Villain"; }
.Pride::before { content: "Pride"; }
.Violence::before { content: "Aggression"; }

/* Row 1-JP text of skill tree */
.Kindness2::before { content: "親切"; }
.Niceguy2::before { content: "善"; }
.Courtesy2::before { content: "礼儀"; }
.Villain2::before { content: "悪"; }
.Pride2::before { content: "自慢"; }
.Violence2::before { content: "攻撃性"; }

/* Row 2-EN text of skill tree */
.Patience::before { content: "Patience"; }
.Calm::before { content: "Calm"; }
.Anger::before { content: "Anger"; }
.Jealousy::before { content: "Jealousy"; }
.Greed::before { content: "Greed"; }

/* Row 2-JP text of skill tree */
.Patience2::before { content: "我慢"; }
.Calm2::before { content: "穏やか"; }
.Anger2::before { content: "怒り"; }
.Jealousy2::before { content: "嫉妬"; }
.Greed2::before { content: "貪欲"; }

/* Row 3-EN text of skill tree */
.Lively::before { content: "Lively"; }
.Madman::before { content: "Madness"; }
.Adventurer::before { content: "Adventure"; }
.Sloth::before { content: "Sloth"; }
.Malinger::before { content: "Malinger"; }
.Vigilance::before { content: "Vigilance"; }
.Bodyguard::before { content: "Bodyguard"; }

/* Row 3-JP text of skill tree */
.Lively2::before { content: "元気"; }
.Madman2::before { content: "狂気"; }
.Adventurer2::before { content: "冒険"; }
.Sloth2::before { content: "懶惰"; }
.Malinger2::before { content: "怠惰マスター"; }
.Vigilance2::before { content: "警戒"; }
.Bodyguard2::before { content: "用心棒"; }

/* Row 4-EN text of skill tree */
.Cooking::before { content: "Cooking"; }
.MadChef::before { content: "MadChef"; }
.Swimming::before { content: "Swimming"; }
.Diver::before { content: "Diver"; }
.Knowledge::before { content: "Knowledge"; }
.Intuition::before { content: "Intuition"; }
.Schemer::before { content: "Schemer"; }
.Scholar::before { content: "Scholar"; }
.Artist::before { content: "Artist"; }

/* Row 4-JP text of skill tree */
.Cooking2::before { content: "料理"; }
.MadChef2::before { content: "料理の狂人"; }
.Swimming2::before { content: "水泳"; }
.Diver2::before { content: "潜水夫"; }
.Knowledge2::before { content: "知識"; }
.Intuition2::before { content: "直感"; }
.Schemer2::before { content: "策士"; }
.Scholar2::before { content: "学者"; }
.Artist2::before { content: "芸術家"; }

/* Row 5-EN text of skill tree */
.Vision::before { content: "Vision"; }
.Hearing::before { content: "Hearing"; }
.SenseofBeast::before { content: "SenseOfBeast"; }
.Health::before { content: "Health"; }
.Weight::before { content: "Weight"; }
.Fame::before { content: "Fame"; }
.Income::before { content: "Income"; }
.Assets::before { content: "Assets"; }
.Appetite::before { content: "Appetite"; }
.Gluttony::before { content: "Gluttony"; }
.Drinking::before { content: "Drinking"; }
.Drunkenly::before { content: "Drunkenly"; }

/* Row 5-JP text of skill tree */
.Vision2::before { content: "視力"; }
.Hearing2::before { content: "聴覚"; }
.SenseofBeast2::before { content: "獣の感覚"; }
.Health2::before { content: "健康"; }
.Weight2::before { content: "重量"; }
.Fame2::before { content: "名声"; }
.Income2::before { content: "収入"; }
.Assets2::before { content: "財産"; }
.Appetite2::before { content: "食欲"; }
.Gluttony2::before { content: "暴食"; }
.Drinking2::before { content: "飲酒"; }







/* Weapons of Fight data */
#WeaponsT { width:100%;  height:100%; font-size: 16px; color: #ffffff;}
#WeaponsT td, #WeaponsT th { border: 1px solid rgba(0, 0, 0, 0.1);}

#WeaponsT button {background: rgba(0, 0, 0, 0.0); border: none;  outline: none;  cursor: pointer;  transition: 0.3s;  font-family:Aldrich; }
#WeaponsT button:hover { background: rgba(0, 0, 0, 0.0);  box-shadow: 0px 1px 13px 0 #ff354d, 0 0px 0px 0 #ff354d;}
#WeaponsT button.active { background: rgba(174, 6, 38, 0.7);}

.WeaponsTH1 { width: 60%; text-align: left; color: #cccccc;  background: #484848; letter-spacing: 0px; text-indent: 5px; }
.WeaponsTH2 { text-align: left; background: #6d6b6b; letter-spacing: -0.5px; text-indent: 5px; }
.WeaponsTD1 { background: rgba(0, 0, 0, 0.4); letter-spacing: -0.6px; text-indent: 5px; }
.WeaponsTD2 { width: 20%; background: rgba(43, 20, 20, 0.5); letter-spacing: -0.6px; text-indent: 5px; }
.WeaponsTH3 { background: #6d6b6b; text-indent: 5px;}
.WeaponsTDicon {height:32px; }

.Wpe-TDB1 { width: 5%; background: #000000; text-indent: 0px; }
.Wpe-image { text-align: center; width:55px; }
.Weapons1::before { content: "Weapons"; }
.Weapons2::before { content: "Type"; }
.Weapons3::before { content: "Img."; }

.Abi-Tier0 { font-size: 17px; color: #ffffff; text-shadow: 0px 0px 4px #00b2ed;}
.Abi-Tier1::before { content: "Tier "; }
.Abi-Tier2::before { content: " Main attribute"; }
.Abi-Tier3::before { content: "主な属性"; }

#Ability { width:100%;  height:100%; color: #ffffff; font-size: 16px;}
#Ability td, #Ability th { border: 1px solid rgba(0, 0, 0, 0.1);}

#Ability button {background: rgba(0, 0, 0, 0.0); border: none;  outline: none;  cursor: pointer;  transition: 0.3s;  font-family:Aldrich; }
#Ability button:hover { background: rgba(0, 0, 0, 0.0);  box-shadow: 0px 1px 13px 0 #ff354d, 0 0px 0px 0 #ff354d;}
#Ability button.active { background: rgba(174, 6, 38, 0.7);}
.tabcontentAbiliB {display: none; background: rgba(0, 0, 0, 0.2);  -webkit-animation: fadeEffect 0.3s; animation: fadeEffect 0.3s;}
.AbiliBX { float: right;  cursor: pointer;  font-size: 28px; color: #FFFFFF;}
.AbiliBX:hover {color: #ff0000; }

.Abi-TD1 { width: 7%; background: #303031;}
.Abi-TD2 { width: 60%; }
.Abi-TD2link { width: 60%; background: #484848;}
.Abi-TD3 { width: 20%; }
.Abi-TD3prof { width: 20%; background: #6d6b6b; }

.Abi-Link::before { content: "Abilities"; }
.Abi-Link { color: #ffffff; letter-spacing: -0.5px; }

.Proficiency::before { content: "Profic."; }
.Proficiency {color: #ffffff; letter-spacing: -0.5px;}

.Abi-TDB1 { background: rgba(255, 255, 255, 0.4);}
.Abi-image { text-align: center; height:52px; text-indent: 0px; }
.Abi-TDB2 { background: rgba(0, 0, 0, 0.4); text-indent: 5px; }
.Abi-TDB3 { background: rgba(43, 20, 20, 0.5); color: #a8a8a8; font-size: 18px; text-indent: 5px; }


/* Character's Value of Fight data */
#Chara-Value { width:100%;  height:100%; color: #ffffff; font-size: 14px; }
#Chara-Value td, #Chara-Value th { border: 1px solid rgba(0, 0, 0, 0.1);}

.Chara-Value-L { background: #1e1e1e; letter-spacing: -0.5px;}
.Strength::before { content: "Strength"; }
.Power::before { content: "Power"; }
.Speed::before { content: "Speed"; }
.Intellect::before { content: "Intellect"; }
.Robust::before { content: "Robust"; }
.Spiritual::before { content: "Spiritual"; }
.Lexibility::before { content: "Flexibility"; }
.Defence::before { content: "Defence"; }
.Summon::before { content: "Summon"; }
.Barehand::before { content: "Barehand"; }
.Weapon::before { content: "Weapon"; }
.Energy::before { content: "Energy"; }
.Chara-Value-R { text-align: center; background: rgba(43, 20, 20, 0.5); color: #93c57c; }


/* Character's Evilslav of Fight data */
.Evilslav1 { color: #ffffff; font-size: 16px; background: rgba(0, 0, 0, 0.5); display: block; text-decoration-line: none; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 10px;}
.Evilslav2 { text-align: center; color: #e8f2db; font-size: 27px; background: #2c2c2c; display: block; letter-spacing: 2px; padding: 1px; line-height: 1.4; }
.Evilslav3 { text-align: center; color: #000000; font-size: 22px; background: #c1c1c1; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4;}
.Evilslav4 { text-align: center; color: #000000; font-size: 14px; background: #9ba4af; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4;}
.EvilslavType::after { content: "-Type"; }

/* Gameplay Value */
#GameValueA { width:100%; height:100%; font-size: 16px; text-indent: 5px;  }
#GameValueA td, #GameValueA th { border: 2px solid rgba(0, 0, 0, 0.7);}

/* Synthesize */
.GameValueA-R { width: 130px; letter-spacing:-0.5px; background: #303031; color:#ffffff;}
.GameValueA-L1 { font-size: 20px; color: #ff0000; background: rgba(43, 20, 20, 0.5);}
.GameValueA-L2 { font-size: 20px; color: #00ffff; background: rgba(43, 20, 20, 0.5);}
.GameValueA-L3 { font-size: 20px; color: #00ff00; background: rgba(43, 20, 20, 0.5);}
.GameValueA-L4 { font-size: 20px; color: #ff9900; background: rgba(43, 20, 20, 0.5);}

/* Basic data for game */
#GameBasicT { border-collapse: collapse;border-spacing: 0;padding 0; width:100%; height:100%; font-size: 16px; color: #bbb1b1; text-indent: 1px; letter-spacing:-0.8px;}
#GameBasicT td, #GameBasicT th { border: 2px solid rgba(0, 0, 0, 0.3);}

.GameBasicT-td1 { width: 23%; background-color: #303031;}
.GameBasicT-td2 { width: 23%; background-color: #4c4e51;}

.GameBasicT-HP { width: 21%; color: #ec9998; background: rgba(43, 20, 20, 0.5);}
.GameBasicT-EP { color: #6ea8de; background: rgba(0, 0, 0, 0.4);}
.GameBasicT-PP { color: #ffe694; background: rgba(43, 20, 20, 0.5);}
.GameBasicT-SP { color: #b5a7d7; background: rgba(0, 0, 0, 0.4);}
.GameBasicT-Speed1 { color: #93c57c; background: rgba(43, 20, 20, 0.5);}
.GameBasicT-Speed2 { color: #93c57c; background: rgba(0, 0, 0, 0.4);}

.HealthP::before { content: "Health Points"; }
.HPR::before { content: "HP. Reversion"; }
.RapidR { letter-spacing:-0.8px}
.EnergyP::before { content: "Energy Points"; }
.EPR::before { content: "EP. Reversion"; }
.RapidR { letter-spacing:-0.8px}
.PowerP::before { content: "Power Points"; }
.PPR::before { content: "PP. Reversion"; }
.RapidR { letter-spacing:-0.8px}
.SpiritP::before { content: "Spirit Points"; }
.SPR::before { content: "SP. Reversion"; }
.RapidR { letter-spacing:-0.8px}
.WalkS::before { content: "Walk Speed"; }
.RunS::before { content: "Run Speed"; }
.RapidR::before { content: "R. Run Speed"; }
.RapidR { letter-spacing:-0.8px}
.JumpH::before { content: "Jump Height"; }


/* Basic Damage */
#GameDamageT { border-collapse: collapse;border-spacing: 0;padding 0; width:100%; height:100%; font-size: 16px; color: #bbb1b1; text-indent: 1px; letter-spacing:-0.8px}
#GameDamageT td, #GameDamageT th { border: 3px solid rgba(0, 0, 0, 0.3);}

.GameDamageTd1 { width: 220px; background-color: #303031;}
.GameDamageTd2 { background: rgba(43, 20, 20, 0.5); color: #ff9900;}

.BFTD::before { content: "BFT Damage Basic Numbers"; }
.WFTD::before { content: "WFT Damage Basic Numbers"; }
.EFTD::before { content: "EFT Damage Basic Numbers"; }
.BAED::before { content: "BAE Damage Basic Numbers"; }
.WAED::before { content: "WAE Damage Basic Numbers"; }







/* Character's skills */
.skillName { padding-left: 5px; font-size: 17px; color: #00ffff; background: #1e1e1e; display: block; letter-spacing: 0px; line-height: 2;  font-family: "Audiowide", sans-serif;}
.skillimageTD { padding-left: 1px; color: #f3c211; background: #1e1e1e; display: block; letter-spacing: 0px; }
.skillimage { height: 140px; }
.skillName-jpch { padding-left: 5px; font-size: 16px; color: #0cacac; background: #1e1e1e; display: block; letter-spacing: 0px; line-height: 1.5;}
/* Description of skill */
.skillDesc { background: rgba(0, 0, 0, 0.7); padding-left: 8px; color: #ffffff; font-size: 16px; display: block; letter-spacing: 0px; text-shadow:0px 0px 10px #ff0000;}
/* Rhombus */
.skillRho { background: rgba(24, 37, 60, 0.5); color: #ffffff; padding-left: 5px; font-size: 16px; line-height: 3;}
/* Materials of skill */
.skillMater { color: #e2e265;}
.skillMater2 { color: #00ffff; letter-spacing: -0.5px;}
/* Details of skill 2 */
.skillDetai { background: rgba(0, 0, 0, 0.4); padding-left: 5px; font-size: 16px; color: #ffffff; padding-right: 3px; }
.skillDetaiB { background: rgba(45, 47, 55, 1.0); padding-left: 5px; font-size: 16px; color: #ffffff; padding-right: 3px; }
.skillDetai2 { background: rgba(0, 0, 0, 0.4); padding-left: 30px; font-size: 16px; color: #ffffff; padding-right: 3px; }
.skillDetai2B { background: rgba(45, 47, 55, 1.0); padding-left: 30px; font-size: 16px; color: #ffffff; padding-right: 3px; }

.skillName-jp1::before { content: "Japanese: "; }
.skillName-ch1::before { content: "Chinese: "; }

.skillSPE { background: rgba(187, 52, 21, 0.1); color: #ffffff; padding-left: 5px; font-size: 16px; padding-right: 3px;}


.skillBlue { background: rgba(0, 0, 0, 0.7); padding-left: 8px; color: #ffffff; font-size: 16px; display: block; letter-spacing: 0px; text-shadow:0px 0px 7px #26b4b4; }

/* Check */
.skillCheck { background: rgba(38, 5, 49, 0.4); padding-left: 5px; font-size: 16px; color: #ffffff;}
.skillCheck2 { background: rgba(6, 38, 50, 0.5); padding-left: 5px; font-size: 16px; color: #ffffff;}
.skillCheck3 { background: rgba(4, 50, 11, 0.4); padding-left: 5px; font-size: 16px; color: #ffffff;}
.skillCheck4 { background: rgba(249, 246, 0, 0.4); padding-left: 5px; font-size: 16px; color: #ffffff;}
.skillCheck5 { background: rgba(60, 24, 24, 0.6); padding-left: 5px; font-size: 16px; color: #ffffff;}

/* Skill concatenate */
.Skill-conc { width: 660px; background: rgba(0, 0,0, 0.6); display: block; text-align: center;}
.Skill-conc2 { background: rgba(0, 0,0, 0.4); display: block; text-align: center;}

/* Image for Evilslav */
#Skill-Evilslav { border-collapse: collapse;border-spacing: 0;padding 0; width:100%; height:100%; font-size: 16px; color: #ffffff; text-indent: 5px; background: rgba(0, 0, 0, 0.3);}
.Skill-Evil-IMG { width: 200px;}
.Skill-Evil-R { width: 200px; padding-left: 5px;}
.Skill-Evil-R1 { color: #f3c212;}

/* Artwork for Skill */
.Skill-Art { background: rgba(0, 0,0, 0.4);}
.Skill-Art-text { width: 660px; background: rgba(0, 0, 0, 0.4); text-align: right; font-size: 14px; color: #6da8de; display: block; letter-spacing: 0px; padding: 1px; }

.Skill-ArtB { background: rgba(0, 0,0, 0.4); width: 660px;}








/* Combination of buttons */

/* Combination of buttons for external links */
#LinksComb { border-collapse: collapse; width:100%; height:100%; font-size: 16px; text-indent: 5px; }
#LinksComb td, #LinksComb th { padding: 5px;}


/* Table of contents */
#Black-Table { text-align: center; border-collapse: collapse;border-spacing: 0;border-padding 0; width:100%; height:100%; font-size: 16px; letter-spacing: 0.5px; line-height: 1; background: rgba(0, 0, 0, 0.4);}
#Black-Table td, #Black-Table th { width: 50%; padding: 3px;}

.Black-Table-TD-on { box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19); color: #000000; background: #6387ac; display: block; padding: 4px 8px;}

.Black-Table-TD-off { color: #ffffff; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19); background: rgba(60, 81, 102, 0.4); display: block; padding: 4px 8px;}

.Black-Table-TD-off:hover {background-color: #97afc6; color: #000000; box-shadow: 0px 1px 13px 0 #0ce6cf, 0 0px 0px 0 #0ce6cf; transition: 0.0s;}


#Comicpage { text-align: center; border-collapse: collapse;border-spacing: 0;border-padding 0; width:100%; height:100%; font-size: 16px; letter-spacing: 0.5px; line-height: 2; background: rgba(0, 0, 0, 0.4);}
#Comicpage td, #Comicpage th { width: 50%; padding: 3px;}

.Comicpage-TD-on { box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19); color: #000000; background: #ec9998; display: block; padding: 4px 8px; font-family: Bungee; }

.Comicpage-TD-off { color: #ffffff; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19); background: #a90b29; display: block; padding: 4px 8px; font-family: Bungee; }

.Comicpage-TD-off:hover {background-color: #ee0834; color: #ffffff; box-shadow: 0px 1px 13px 0 #ec9998, 0 0px 0px 0 #ec9998; transition: 0.5s; font-family: Bungee; text-shadow: 3px 3px 3px #000000, -3px -3px 3px #000000;}

.Comicpage-TD2-off { color: #ffffff; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19); background: rgba(60, 81, 102, 0.4); display: block; padding: 4px 8px; }

.Comicpage-TD2-off:hover {color: #000000; background-color: #97afc6; box-shadow: 0px 1px 13px 0 #ec9998, 0 0px 0px 0 #ec9998; transition: 0.6s; }


.Gift-off { color: #666666; text-decoration-line: none;}

.Gift-off:hover {color: #ffffff;  transition: 0.6s; }



/* Table of gallery */
#Gallery-Table-3 { border-collapse: collapse;border-spacing: 0;border-padding 0; width:100%; height:100%; font-size: 16px; color: #ffffff; background: rgba(0, 0, 0, 0.4); }
#Gallery-Table-3 td, #Gallery-Table-3 th { width: 33%;}

#Gallery-Table-2 { border-collapse: collapse;border-spacing: 0;border-padding 0; width:100%; height:100%; font-size: 16px; color: #ffffff; background: rgba(0, 0, 0, 0.4);}
#Gallery-Table-2 td, #Gallery-Table-2 th { width: 50%;}

.BlackAndCyan-G { font-size: 16px; color:#88e7e7; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4;}

.Gallery-TD-on { text-align: center; font-size: 16px; color: #000000; background: #6387ac; display: block; letter-spacing: 0.2px; padding: 4px 8px; line-height: 1; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);}

.Gallery-TD-off { text-align: center; font-size: 16px; color: #ffffff; background: rgba(60, 81, 102, 0.4); display: block; letter-spacing: 0.2px; padding: 4px 8px; line-height: 1; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);}
.Gallery-TD-off:hover {background-color: #97afc6; box-shadow: 0px 1px 13px 0 #0ce6cf, 0 0px 0px 0 #0ce6cf; color: #000000; transition: 0.0s;}

.line-Gallery { color: #000000; font-size: 16px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.5; text-align: right;}


/* Commonly text */
.Com-Weapon::before { content: "or View Weapon"; }
.Com-Evil::before { content: "or View Evilslav"; }
.Com-Abili::before { content: "or View Abilities"; }
.Com-Art::before { content: "or View Artworks"; }
.Com-Chara::before { content: "or View Characters"; }
.Com-Comic::before { content: "or View Comic"; }
.Com-manual::before { content: "Manual"; }

/* Commonly text: List of Characters */
.NumT-001-098::before { content: "001-098"; }
.NumT-100-176::before { content: "100-176"; }
.NumT-178-260::before { content: "178-260"; }
.NumT-261-324::before { content: "261-324"; }
.NumT-other::before { content: "Other characters"; }
.NumT-all::before { content: "List of Characters (all)"; }

/* Commonly text: List of Evilslavs */
.NumT-E001-051::before { content: "001-051"; }
.NumT-E052-099::before { content: "052-099"; }
.NumT-E100-150::before { content: "100-150"; }
.NumT-E151-198::before { content: "151-198"; }
.NumT-E199-252::before { content: "199-252"; }
.NumT-E253-297::before { content: "253-297"; }
.NumT-MinusE::before { content: "Additional Evilslavs 1"; }
.NumT-AntiE::before { content: "Antihuman Evilslav"; }
.NumT-OtherE::before { content: "Additional Evilslavs "; }








/* Common Text */
.Common-P { color: #ffffff; font-size: 16px; text-shadow: 1px 1px 1px #000000, -1px -1px 0px #000000;
      text-indent: 2em;
      word-break: keep-all;
      white-space: normal;
      hyphens: auto;}

#TriviaP { width:100%; height:100%; background: rgba(0, 0,0, 0.4); font-size: 16px; padding: 4px;}

/* Background Text */
#Text-Column { color: #ffffff; border-collapse: collapse; border-spacing: 0;border-padding 0; width:100%; height:100%; font-size: 16px; border: 1px solid #cacaca; padding: 3px;  }
#Text-Column td, #Text-Column th { background: rgba(0, 0,0, 0.4); padding-left:15px; 
      text-indent: 2em;
      word-break: keep-all;
      white-space: normal;
      hyphens: auto;}

#Text-Column2 { color: #ffffff; width:100%; height:100%; font-size: 16px; border: 1px solid #cacaca; background: rgba(0, 0,0, 0.4); padding: 3px; }
#Text-Column2 td, #Text-Column2 th { text-indent: 0px;}

#Text-Column3 { color: #ffffff; width:100%; height:100%; font-size: 16px; background: rgba(0, 0,0, 0.4); padding: 3px; }
#Text-Column3 td, #Text-Column2 th { text-indent: 0px;}


/* Background Text no border */
#Text-Column-no { background: rgba(0, 0,0, 0.4);  color: #ffffff; border-collapse: collapse; border-spacing: 0;border-padding 0; width:100%; height:100%; font-size: 16px;}
#Text-Column-no td, #Text-Column-no th { background: rgba(0, 0,0, 0.1); padding:10px;
      text-indent: 1em;
      white-space: normal;
      hyphens: auto;}

.Text-Column-no2 { background: rgba(0, 0,0, 0.4); }

#Text-Column-no3 {color: #ffffff; border-collapse: collapse; border-spacing: 0;border-padding 0; width:100%; height:100%; }
#Text-Column-no3 td, #Text-Column-no th { text-indent: 0.5em;
      white-space: normal;
      hyphens: auto;}

#NubersColumn { background: rgba(0, 0,0, 0.4);  color: #ffffff; border-collapse: collapse; border-spacing: 0;border-padding 0; width:100%; height:100%; font-size: 16px; text-indent: 5px; padding: 5px; }
#NubersColumn td, #NubersColumn th {  text-indent: 3px; padding-left:3px;}

#Text-Column-intro { color: #ffffff; border-collapse: collapse; border-spacing: 0; border-padding 0; width:100%; height:100%; font-size: 17px; letter-spacing: 1px;  }
#Text-Column-intro td, #Text-Column-no th { background: rgba(0, 0,0, 0.4); text-indent: 6px; padding-right:5px;  padding-left:12px; padding-top: 8px;  padding-bottom: 8px;}

/* Background Text P */
.Text-Column-P { color: #ffffff; background: rgba(0, 0,0, 0.4); font-size: 16px; padding-left:15px; padding-right:7px; padding-top:5px;}

/* QA-type Text */
#QAtext { color: #ffffff; border-collapse: collapse; border-spacing: 0;border-padding 0; width:100%; height:100%; font-size: 16px; background: rgba(10, 16, 37, 0.8);}
.QAtextTop { color: #ededed; font-size: 16px; line-height: 1.6;  background: #121212; display: block; letter-spacing: 0px; text-indent: 3px;}
.QAtextBot {  color: #ededed; display: block; letter-spacing: 0px;  line-height: 1.4; padding-top: 5px;  padding-bottom: 5px;}

/* Black Contents */
.Contents-Head { color: #ededed; font-size: 16px; display: block; letter-spacing: 0px; line-height: 1.4; text-indent: 5px; background: #121212; }

#Contents-Table { width:100%; height:100%; font-size: 16px; }
#Contents-Table td, #Contents-Table th { border: 1px solid rgba(255, 255, 255, 0.1);}

/* Blue Contents */
#Contents-Table2 { text-align: center; width:100%; height:100%; font-size: 16px; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.19);}
#Contents-Table2 td, #Contents-Table2 th { border: 1px solid rgba(255, 255, 255, 0.2);}

.Contents-TD::before { content: "▶ "; }
.Contents-TD2::before { content: "▼ "; }

#Contents-Table3 { width: 660px; height:100%; font-size: 16px; }
#Contents-Table3 td, #Contents-Table3 th { width: 9%; border: 1px solid rgba(255, 255, 255, 0.1);}








.Tran-container { position: relative; width: 100%;}
.image-over { display: block; width: 100%; height: auto; }
.overlay { position: absolute; bottom: 100%; left: 0; right: 0; background-color: #1e1e1e;  overflow: hidden; width: 100%; height:0; transition: .5s ease;  }
.Tran-container:hover .overlay { bottom: 0;  height: 100%; border: 3px solid rgba(0, 212, 252, 0.6);}

.text-tran { white-space: nowrap; color: white; font-size: 16px; position: absolute;  overflow: hidden; top: 50%;  left: 50%; transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);}
.comic-tranimage {  color: white;  font-size: 50px;  position: absolute; text-align: center;  top: 48%;  left: 4%; -webkit-transform: translate( -3%, -53%); }
.Tran-Link { color: #ffffff;}


.O-container {  position: relative;   height: 100%; }
.O-image {   display: block;   width: 100%;   height: auto;}
.O-overlay {  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  height: 100%;  width: 100%;
  opacity: 0;  transition: 0.5s ease;  background-color: #000000;}
.O-container:hover .O-overlay {  opacity: 1;}

.O-container2 {  position: relative;   height: 100%; }
.O-overlay2 {  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  height: 100%;  width: 100%;
  opacity: 0;  transition: 0.5s ease; }
.O-container2:hover .O-overlay2 {  opacity: 1;}









/* List of characters page */
#Chara-list-5 { border-collapse: collapse;border-spacing: 0;border-padding 0; width:100%; height:100%;}
#Chara-list-5 td, #Chara-list-5 th { width: 20%;}

#Chara-list-6 { border-collapse: collapse;border-spacing: 0;border-padding 0; width:100%; height:100%;}
#Chara-list-6 td, #Chara-list-6 th { width: 16.6%;}

/* Updates for blog */
#UpdateT { border-collapse: collapse;border-spacing: 0;border-padding 0; width:100%; height:100%; font-size: 16px;  color: #ffffff; }
#UpdateT td, #UpdateT th { border: 3px solid #5d5151; }

.UpdateT-td-L { text-align: center; width: 120px; color: #aaeecd; letter-spacing: -0.8px; background: #483a35;}
.UpdateT-td-R { text-indent: 3px; padding-left: 5px; background: rgba(0, 0, 0, 0.4); letter-spacing: 0px; }

/* Updates for comics */
#UpdateT-comic { width:100%; height:100%; font-size: 16px; color: #ffffff; border: 4px solid rgba(0, 0, 0, 0.2);}
#UpdateT-comic td, #UpdateT-comic th { padding: 3px; }
.UpdateT-comic-td-L { background: rgba(0, 0, 0, 0.4); text-align: center; width: 100px; color: #ffe694; letter-spacing: -0.8px;}
.UpdateT-comic-td-R { background: rgba(0, 0, 0, 0.4); padding-left: 5px;}

/* Updates for skills */
.Up-skillavatar { text-align: center; }
.Up-charaname { text-align: center; color: #f3c212; font-size: 16px; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.5; text-indent: 6px;}
.Up-skillname { color: #000000; font-size: 16px; background: #a5a5a5; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.2;}
.Up-skillBA { color: #f3c212; font-size: 16px; background: #302f2f; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.2; text-indent: 6px; padding-left: 15px;}
.Up-skilldet {color: #ffffff; font-size: 16px; padding-left:20px; }

.Up-skillB::before { content: "Before"; }
.Up-skillA::before { content: "After"; }


/* List of Evilslavs page */
.Evillist-chara { color: #000000; font-size: 16px; background: #c1c1c1; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 10px;}
.Evillist-name1 { text-align: center; color: #ffffff; font-size: 18px; background: #1e1e1e; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.3; }
.Evillist-name2 { text-align: center; color: #ffffff; font-size: 16px; background: #313131; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.2; }
.Evillist-name3 { text-align: center; font-size: 16px; background: #463c3c; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.1;}
.Evillist-type { text-align: center; color: #00ffff; font-size: 16px; background: rgba(0, 0, 0, 0.4); display: block; letter-spacing: -0.5px; padding: 1px; line-height: 1.2; }

.Animalmodel::before { content: "Animal model: "; }

/* Comic information */
.Comic-Head1 {color: #000000; font-size: 16px; background: #c1c1c1; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 7px; text-align: left;}
.Comic-Head2 { color: #ededed; font-size: 18px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.7; text-indent: 7px; text-align: left;}
.Comic-Head3 { color: #000000; font-size: 16px; background: #c1c1c1; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 17px; text-align: left;}
.Comic-Head4 { color: #000000; font-size: 16px; background: #a3a0a0; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 17px; text-align: left;}

#Comicinfo { width:100%; height:100%; font-size: 16px; text-indent: 5px; color: #ffffff; background-color: #2e2f31;}
#Comicinfo td, #Comicinfo th { padding: 3px; }

.Comicinfo-td-R1 { width: 115px; background-color: #303031; color: #f3c211;}
.Comicinfo-td-L1 { background-color: #4c4e51; text-align: left;}
.Comicinfo-td-R2 { width: 115px; background-color: #4c4e51; color: #f3c211;}
.Comicinfo-td-L2 { background-color: #303031; text-align: left;}

.C-Status::before { content: "Status / 状態"; }
.C-cover::before { content: "The cover"; }
.C-Posted::before { content: "Posted on"; }
.C-Lastup::before { content: "Last-Upload"; }
.C-Lastmo::before { content: "Last-modified"; }
.C-Page::before { content: "Page type"; }

/* List of Comics */
#Comiclist { width:100%; height:100%; font-size: 14px; color: #ffffff; background: rgba(0, 0, 0, 0.4);}
#Comiclist td, #Comiclist th { width: 20%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.Comicinfo-Text-TD { text-align: center; background: #1e1e1e; display: block;}
.C-Available::before { content: "Available"; }
.C-Available { color: #b5d8a6;}

.C-Unavailable::before { content: "Unavailable"; }
.C-Unavailable { color: #999999;}


/* Special button Red */

.SPButton1 {color: #000000; font-size: 2px; background: #d7384f; display: block; letter-spacing: 0px; padding: 1px; line-height: 0.1; text-indent: 5px; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19); }
.SPButton2 {text-align: center; color: #d6eaff; font-size: 20px; background: #663c3c; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.8; text-indent: 5px; text-shadow: 0px 0px 20px #f3f4ff; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19); }

.SPButton2:hover {background-color: #141414; transition: 0.0s;}


/* default button  */


.button { border-radius: 0px; width: 100%; text-align: center; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19); font-size: 16px; font-family:Aldrich; color: #f4f4f4; background: #393b3b; display: block; letter-spacing: 0px; padding: 4px 8px; line-height: 1.5; }
.button:hover { box-shadow: 0px 1px 13px 0 #e65e0c, 0 0px 0px 0 #e65e0c; background-color: #161919; transition: 0.0s;}



/* HOME COLUMN */
.HOMErow { display: -ms-flexbox; /* IE 10 */
display: flex; }

.HOMEcolumn {  -ms-flex: 50%; /* IE 10 */
  flex: 50%;  padding: 0 5px; }
.HOMEcolumn img {  margin-top: 14px;  vertical-align: middle;}

/* HOME COLUMN Overlay */
.HOMEoverlaycontainer { position: relative;}
.HOMEimage { display: block;  width: 100%;  height: auto; transition: 0.3s;}
.HOMEoverlay { position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;
  height: 100%;  width: 100%;  opacity: 0;  transition: 0.3s ease;  background-color: #262627;}

.HOMEoverlaycontainer:hover .HOMEoverlay { opacity: 1;  box-shadow: 0 8px 10px 0 rgba(0,0,0,0.6);}
.HOMEoverlaytext {  color: white;  font-size: 50px;  position: absolute;  top: 50%;  left: 50%;
  -webkit-transform: translate(-50%, -50%);   -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);  text-align: center;}

.HOMEoverlayimage1 {  color: white;  font-size: 50px;  position: absolute; text-align: center;  top: 49%;  left: 00%; -webkit-transform: translate(0%, -50%); }
.HOMEoverlayimage640 {  color: white;  font-size: 50px;  position: absolute; text-align: center;  top: 48%;  left: 00%; -webkit-transform: translate(0%, -50%); }
.HOMEoverlayimage340 {  color: white;  font-size: 50px;  position: absolute; text-align: center;  top: 48%;  left: 00%; -webkit-transform: translate(0%, -50%); }
.HOMEoverlayimage240 {  color: white;  font-size: 50px;  position: absolute; text-align: center;  top: 42%;  left: 00%; -webkit-transform: translate(0%, -50%); }

/* Skills Tabs */

.Skilltab {overflow: hidden;   background: rgba(0, 0, 0, 0.4);}
.Skilltab button {background-color: #393b3b;  color: #ffffff; float: left;  border: none;  outline: none;  cursor: pointer;  padding: 3px 5px;  transition: 0.3s;  font-size:15px;  border: 5px solid rgba(0, 0, 0, 0.4); font-family:Aldrich;}
.Skilltab button:hover {  background-color: #1a1a1a; color: #ffffff;}
.Skilltab button.active {  background-color: #ae0626; color: #ffffff;}
.Skilltabcontent {display: none; border-top: none;}



.MiniTAB { overflow: hidden;   background: rgba(0, 0, 0, 0.4);}

.MiniTAB button {background-color: #393b3b;  color: #ffffff; float: left;  border: none;  outline: none;  cursor: pointer;  transition: 0.3s;  font-family:Aldrich;}
.MiniTAB button:hover {  background-color: #000000; color: #ffffff;}
.MiniTAB button.active {  background-color: #ae0626; color: #DFDFDF;}

.Orga-Corp { color: #ededed; font-size: 20px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.5; text-indent: 6px; }
.Orga-2 {text-align: left; color: #000000; font-size: 16px; background: #c1c1c1; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 17px;}

#Orga-L { width:100%; height:100%; font-size: 16px; color: #ffffff; text-indent: 5px; background: rgba(0, 0, 0, 0.3);}
.Orga-Ltd1 {color: #00ff00; width: 60%; background: rgba(79, 62, 100, 0.8);}
.Orga-Ltd2 {background: rgba(79, 62, 100, 0.8);}
.Orga-Std1 {color: #00ff00; width: 40%; background: rgba(46, 71, 80, 0.8);}
.Orga-Std2 {background: rgba(46, 71, 80, 0.8);}
.Orga-Std3 {padding-left: 30px;color: #00ffff; background: rgba(55, 97, 85, 0.8);}
.Orga-StdC1 {width: 50%; background: #502e2e; color: #fb9d9d;}
.Orga-StdC2 {color: #00ffff; background: #502e2e;}
.Orga-Std4 {padding-left: 5px; color: #ffffff; background: rgba(55, 97, 85, 0.8);}

.BAcenter { background: rgba(0, 0, 0, 0.4); text-align: center;}
.BAcenter button {background-color: #393b3b;  color: #ffffff;
  float: center;  cursor: pointer;
  font-size:15px;  padding: 3px 5px;  font-family:Aldrich;
  border: 5px solid rgba(0, 0, 0, 0.4);
  display: inline-block; outline: none;
  transition: background-color 0.6s ease;}
.BAcenter button:hover {  background-color: #000000; color: #ffffff;}
.BAcenter button.active {  background-color: #ae0626; color: #DFDFDF;}

.ImageBox {  display: none;   position: fixed;
  z-index: 1; padding-top: 100px;   left: 0;  top: 0;
  width: 100%;   height: 100%;  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.8);  }

.ImageBox-Con { margin: auto; display: block; width: 80%; max-width: 700px; }

#ImageBox-caption { font-family: Aldrich;
  margin: auto;   display: block;   width: 80%;
  max-width: 700px;  text-align: center;
  color: #ffffff;  padding: 10px 0;  height: 150px;}

.ImageBox-Con, #ImageBox-caption {  
  -webkit-animation-name: zoom;   -webkit-animation-duration: 0.3s;
  animation-name: zoom;   animation-duration: 0.3s;  }

@-webkit-keyframes zoom {  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}   }

@keyframes zoom {  from {transform:scale(0)} 
  to {transform:scale(1)}   }

.ImageBox-close {  position: absolute;  top: 15px;  right: 35px;  color: #ffffff; 
  font-size: 50px;  font-weight: bold;  transition: 0.3s;  }

.ImageBox-close:hover, .ImageBox-close:focus { color: #ff0000; text-decoration: none;  cursor: pointer;}

@media only screen and (max-width: 700px)
{  .ImageBox-Con { width: 100%;  }}




.comicbar {  overflow: hidden;  background-color: #1e1e1e;  font-family: Aldrich; text-shadow:0px 0px 15px #00ffff;}

.comicbar a {  float: left;  font-size: 16px;
  color: #ffffff;  text-align: center;  padding: 14px 16px;
  text-decoration: none; }

.comicbar a:hover, .comidrop1:hover .dropbtn, .dropbtn:focus {
  background-color: #ae0626; text-shadow: 1px 1px 1px #000000, -1px -1px 0px #000000;}





.containerX2 {
            display: flex;            flex-direction: row;            color: #fff;
            height: 30vh;         }

.halfX2 {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 5px;
            transition: transform 0.3s ease-in-out;
        }

        .halfX2 img {
            cursor: pointer;
            max-width:100%;
            height: auto;
        }

        #iframeContainerX2 {
            display: none;
            width: 100%;
            height: 100%;
            overflow: hidden;
            transition: width 0.3s ease-in-out;  }

        #iframeX2 {
         width: 100%; height: 455px;
            border: 1px solid rgba(255, 255, 255, 0.3)
            transform-origin: top right; 
            transform: scaleX(0); 
            transition: transform 0.3s ease-in-out; 
        }



    .containerX3 {
        position: relative;
        display: flex;
        flex-direction: row;
        color: #fff;
        height: 26vh;
    }

    .halfX3 {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px;
        transition: transform 0.3s ease-in-out;
        position: relative;
    }

    .halfX3 img {
        cursor: pointer;
        max-width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
        transition: left 0.3s ease-in-out;
    }

    #myImageX3 {
        z-index: 1;
    }

    #newImageX3 {
        z-index: 0;
        left: 100%;
        display: none;
    }


        #iframeContainerX3 {
            display: none;
            width: 100%;
            height: 100%;
            overflow: hidden;
            transition: width 0.3s ease-in-out;  }

        #iframeX3 {
         width: 100%; height: 455px;
            border: 1px solid rgba(255, 255, 255, 0.3)
            transform-origin: top right; 
            transform: scaleX(0); 
            transition: transform 0.3s ease-in-out; 
        }
    
   .P2VB { color: #ededed; font-size: 16px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.2; text-indent: 5px; text-align: right;}
.imagelink:hover { box-shadow: 0 0 15px #1e78ff;  font-color: #0c90ff; }

      @media (max-width: 768px) {
     .P2VB { font-size: 12px;}
}








 
    .F1-slider {
      position: relative;
      width: 100%;
      height: auto;
      overflow: hidden;
      border: 2px solid #003cff;
        margin: 0 auto; }

    .F1-slides {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }
    .F1-slide {
      min-width: 100%;
      box-sizing: border-box;
    }
    .F1-slide img {
      object-fit: cover;
      cursor: pointer;
    }
    .F1-nav {
      position: absolute;
      top: 50%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      transform: translateY(-50%);
    }
    .F1-nav button {
      background-color: rgba(0, 0, 0, 0.6);
      border: none;
      color: #fff;
      padding: 10px;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    .F1-nav button:hover {
      background-color: rgba(0, 0, 0, 0.6);
    }







.modalR18 {font-family: "DotGothic16", sans-serif;
    display: none; 
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); 
}

.modal-contentR18 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #222;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    color: white;
}

.btnR18 {font-family: Aldrich;
    margin: 10px;
    padding: 10px 20px;
    border: none;
    color: white;
    background-color: red; 
    cursor: pointer;
    border-radius: 5px;
}

.btnR18:hover {
    background-color: darkred;
}






        .Mat2-container {
            position: relative;
            width: 50%;
            margin: 0 auto;
            perspective: 1000px;
        }
        .Mat2-inner-container {
            position: absolute;
            width: 100%;
            height: 100%;
            transition: transform 1s;
            transform-style: preserve-3d;
        }
        .Mat2-image1, .Mat2-image2 {
            position: absolute;
            width: 100%;
            height: auto;
            backface-visibility: hidden;
        }
        .Mat2-image2 {
            transform: rotateY(180deg);
        }
        .Mat2-container:hover .Mat2-inner-container {
            transform: rotateY(180deg);
        }



/* QA-type Text */
#TAtext { color: #ffffff; border-collapse: collapse; border-spacing: 0;border-padding 0; width:100%; height:100%; font-size: 16px; background: rgba(26, 26, 44, 0.6);}
.TAtextTop { color: #ededed; font-size: 16px; line-height: 1.6;  background: #121212; display: block; letter-spacing: 0px; text-indent: 5px;}
.TtextBot {  color: #ededed; display: block; letter-spacing: 0px; padding-left: 5px; line-height: 1.4; padding-top: 5px;  padding-bottom: 5px;}



.accdSkill3 { width:100%; text-align: left; border: none;  outline: none;  cursor: pointer; font-family: Aldrich; transition: 0.4s; color: #f31212; font-size: 16px; background: #ffd800; display: block; letter-spacing: -0.5px; padding: 5px 5px;line-height: 1.5; text-indent: 5px; box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);}
.accdSkill3:hover {background: #706026;}
.active3, .accdSkill3:hover { color: #000000; background-color: #ff2828; box-shadow: 0 0px 4px 0 #ff9435, 0 2px 4px 0 #ff9435; }
.accdSkill3:after {  content: '\002B'; color: #000000; font-weight: bold;  float: right;  margin-left: 5px;  margin-right: 3px; padding: 5px 10px;}
.active3:after {  content: "\2212"; color: #000000;}
.panel3 { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;}



.bluetable-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1px;
}

.bluetable-cell {
    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px;
    box-sizing: border-box;
}

.bluetable-cell img {
    width: 100%;
    height: auto;
    transition: box-shadow 0.3s ease;
}

.bluetable-cell img:hover {
    box-shadow: 0 0 15px #1e78ff;
}


        @font-face {
            font-family: 'DotGothic16';
        }
        @font-face {
            font-family: 'DotGothic16';
        }



.imagelink { color: #ededed; font-size: 16px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.2; text-indent: 5px; text-decoration-line: none; }
.imagelink:hover { box-shadow: 0 0 15px #1e78ff;  font-color: #0c90ff; }


.fade-in-out {
    animation: fadeInOut 5s infinite;
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }}











        .fuji-toc {
            position: fixed;
            top: 60px;
            right: 120px;
            width: 166px;
            height: 54px;
            background-color: #333;
            color: white;
            padding: 20px;
            box-sizing: border-box;
            overflow: hidden;
            transition: width 0.3s, height 0.3s, background-color 0.3s;
            z-index: 1000;
            cursor: pointer;
            border-radius: 5px;
            background-image: url('https://image.jimcdn.com/app/cms/image/transf/none/path/s8c4d6c675960f88d/image/i939509aa6f27af22/version/1719073636/image.png');
            background-size: cover;
            background-position: center;
        }

        .fuji-toc:hover {
            background-color: #444;
        }

        .fuji-toc.expanded {
            width: 560px;
            height: auto;
            background-image: url('https://image.jimcdn.com/app/cms/image/transf/none/path/s8c4d6c675960f88d/image/i5ab14c77cb7f5534/version/1717808841/image.png');
        }

        .fuji-toc h2 {
            color: #fff;
            margin: 0;
            display: none;
            font-family: Aldrich;
        }

        .fuji-toc.expanded h2 {
            display: block;
            margin-top: 80px;
        }

        .fuji-toc ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: none;
            font-family: Aldrich;
        }

        .fuji-toc.expanded ul {
            display: block;
        }

        .fuji-toc ul li {
            margin: 10px 0;
        }

        .fuji-toc ul li a {
            color: #bbb;
            text-decoration: none;
            transition: color 0.3s;
        }

        .fuji-toc ul li a:hover {
            color: #fff;
        }

        .fuji-toc ul li a.active {
            color: #fff;
            font-weight: bold;
        }

        .fuji-content {
            margin-left: 220px;
            padding: 20px;
            box-sizing: border-box;
            font-family: Aldrich;
        }

        .fuji-content h2 {
            margin-top: 100vh;
        }

        @media (max-width: 600px) {
            .fuji-toc {
                width: 90px;
                height: 30px;
                right: 20px;
                padding: 10px;
                background-size: contain;
            }

            .fuji-toc.expanded {
                width: 80%;
                background-size: contain;
            }

            .fuji-toc.expanded h2 {
                margin-top: 40px;
            }

            .fuji-content {
                margin-left: 0;
                padding: 10px;
            }
        }

















    .FJ-box {
        width: 868px;
        padding: 15px;
        margin-left:auto;margin-right:auto;margin-top:0%;margin-bottom:0%;
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
        background-image: url('https://image.jimcdn.com/app/cms/image/transf/dimension=920x10000:format=png/path/s8c4d6c675960f88d/image/ifd2f4094a5df7609/version/1717783234/image.png');
        background-size: cover;
    }

      @media (max-width: 700px) {
        .FJ-box {
         width: 300px; } 
          }


    .FJ-progress-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .FJ-progress-bar {
        width: 100%;
        height: 30px;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 5px;
        overflow: hidden;
        position: relative;
    }
    .FJ-progress-bar .FJ-progress {
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 5px;
    }






        .Base-container {
            display: flex;
            flex-wrap: wrap;
        }

        .Base-container2 {
            display: flex;
           flex-wrap: nowrap;
        }

        .Base-columnC {
            flex: 1 1 calc(33% - 20px);
            padding: 1px;
            box-sizing: border-box;
            margin: 10px;
        }

        .Base-columnB {
            flex: 1 1 calc(49% - 20px);
            padding: 1px;
            box-sizing: border-box;
            margin: 10px;

        }

        .Base-columnG {
            flex: 1 1 calc(12% - 20px);
            padding: 1px;
            box-sizing: border-box;
            margin: 3px;
        }

        .Base-column1 {
            background-color: rgba(44, 51, 62, 0.0);    }
        .Base-column2 {
            background-color: rgba(44, 51, 62, 0.6);    }


        @media (max-width: 768px) {
            .Base-columnB {
                flex: 1 1 100%;
                margin: 10px 0;
            }
             .Base-columnC {
                flex: 1 1 100%;
                margin: 10px 0;
            }
             .Base-columnG {
            flex: 1 1 calc(24% - 15px);
            padding: 1px;
            box-sizing: border-box;
            margin: 2px;
            }
          .Base-container2 {
            display: flex;
            flex-wrap: wrap;
        }
        }

.Base-column64-left {
    flex: 1 1 60%;
    padding: 1px;
    box-sizing: border-box;
    margin: 10px;
}

.Base-column64-right {
    flex: 1 1 40%;
    padding: 1px;
    box-sizing: border-box;
    margin: 10px;
}

.ColuC1 button {background: rgba(0, 0, 0, 0.4); text-align: center; border: none;  outline: none;  cursor: pointer;  transition: 0.3s;  font-family:Aldrich; }
.ColuC1 button:hover { background: rgba(16, 100, 148, 0.5);  box-shadow: 0px 1px 13px 0 #3acbae, 0 0px 0px 0 #3acbae; border: 3px solid rgba(0, 212, 252, 0.6);}
.ColuC1 button.active { background: rgba(26, 152, 225, 0.7); border: 3px solid rgba(255, 255, 255, 0.6);}



        .des-only {
            display: block;
        }

        .mob-only {
            display: none;
        }

        @media screen and (max-width: 768px) {
            .des-only {
                display: none;
            }

            .mob-only {
                display: block;
            }
        }

.XT1E {color: #ededed; font-size: 26px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 5px;}
.XT1J {color: #000000; font-size: 20px; background: #c1c1c1; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 5px;}
.XT1C { color: #ffffff; background: rgba(0, 0,0, 0.4); font-size: 20px; color: #fce5ca;  padding-right:7px; padding-top:5px; text-indent: 5px;}

.XT1E_Logo {
    color: #ededed;
    font-size: 26px;
    background: #121212;
    display: block;
    letter-spacing: 0px;
    padding: 1px;
    line-height: 1.4;
    text-indent: 5px;
    position: relative;
}

.XT1E_Logo::before {
    content: url('https://image.jimcdn.com/app/cms/image/transf/dimension=30x10000:format=png/path/s1a31727e513320c0/image/i3c948d7588dfeb89/version/1560144491/image.png');
    display: inline-block;
    vertical-align: middle;
    height: 30px;
    width: auto;
    margin-right: 5px; 
}

.XT1E_Logo span {
    vertical-align: middle; 
}


.XT2E {color: #ededed; font-size: 20px; background: #121212; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 5px; border-radius: 5px;    }
.XT2J {color: #000000; font-size: 20px; background: #c1c1c1; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 5px; border-radius: 5px;    }
.XT2BL {color: #ffffff; font-size: 18px; background: #143151; display: block; letter-spacing: 0px; padding: 1px; line-height: 1.4; text-indent: 5px; border-radius: 5px;    }


        @media (max-width: 768px) {
            .XT1E {
                font-size: 16px;
            }
            .XT1E_Logo {
                font-size: 16px;
            }
            .XT1J {
                font-size: 16px;
            }
            .XT1C {
                font-size: 16px;
            }

            .XT2E {
                font-size: 16px;
            }
            .XT2J {
                font-size: 16px;
            }

            .XT2BL {
                font-size: 16px;
            }
  }










        .cyber2-button {
            font-family: 'DotGothic16', sans-serif;
            color: #00ffcc;
            background-color: #005071;
            border: 2px solid #00ffcc;
            padding: 15px 30px;
            text-transform: uppercase;
            text-align: center;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            position: relative;
            overflow: hidden;
            transition: color 0.3s ease, background-color 0.3s ease, transform 0.1s ease;
        }

        .cyber2-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 4px solid transparent;
            box-sizing: border-box;
            transition: border-color 0.3s ease;
        }

        .cyber2-button::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 255, 204, 0.5);
            transform: scale(0);
            transition: transform 0.2s ease;
        }

        .cyber2-button:hover {
            background-color: #005071;
            color: #ffffff;
    box-shadow: 0 0 10px #1f4ed6, 0 0 10px #1f4ed6, 0 0 15px #1f4ed6;
        }

        .cyber2-button:hover::before {
            animation: glowing-border2 1s linear infinite;

        }

        .cyber2-button:active {
            background-color: #004050;
            transform: scale(0.95);
        }

        .cyber2-button:active::after {
            transform: scale(1);
        }

        @keyframes glowing-border2 {
            0% {
                border-top-color: #00ffcc;
                border-right-color: transparent;
                border-bottom-color: transparent;
                border-left-color: transparent;
            }
            25% {
                border-top-color: #00ffcc;
                border-right-color: #00ffcc;
                border-bottom-color: transparent;
                border-left-color: transparent;
            }
            50% {
                border-top-color: transparent;
                border-right-color: #00ffcc;
                border-bottom-color: #00ffcc;
                border-left-color: transparent;
            }
            75% {
                border-top-color: transparent;
                border-right-color: transparent;
                border-bottom-color: #00ffcc;
                border-left-color: #00ffcc;
            }
            100% {
                border-top-color: #00ffcc;
                border-right-color: transparent;
                border-bottom-color: transparent;
                border-left-color: #00ffcc;
            }
        }






        .cyber1-button {
            font-family: 'DotGothic16', sans-serif;
            color: #00ccff;
            background-color: #000;
            border: 2px solid #00ccff;
            padding: 15px 30px;
            text-transform: uppercase;
            text-align: center;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .cyber1-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(120deg, transparent, rgba(0,204,255,0.2), transparent);
            transition: all 0.5s ease;
        }

        .cyber1-button:hover::before {
            left: 100%;
        }

        .cyber1-button:hover {
            background-color: #00ccff;
            color: #000;
            box-shadow: 0 0 10px #00ccff, 0 0 20px #00ccff, 0 0 30px #00ccff;
        }

        .cyber1-button:active {
            box-shadow: 0 0 5px #00ccff, 0 0 10px #00ccff, 0 0 15px #00ccff;
            transform: scale(0.95);
        }






        .cyber3-button {
            font-family: 'DotGothic16', sans-serif;
            color: #00ffcc;
            background-color: #000;
            border: 2px solid #00ffcc;
            padding: 15px 30px;
            text-transform: uppercase;
            text-align: center;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            position: relative;
            overflow: hidden;
            transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
        }

        .cyber3-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 2px solid transparent;
            box-sizing: border-box;
            transition: border-color 0.3s ease;
        }

        .cyber3-button:hover {
            background-color: #00ffcc;
            color: #000;
            box-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffcc, 0 0 30px #00ffcc;
        }

        .cyber3-button:hover::before {
            animation: glowing-border1 2s linear infinite;
        }

        @keyframes glowing-border1 {
            0% {
                border-top-color: #00ffcc;
                border-right-color: transparent;
                border-bottom-color: transparent;
                border-left-color: transparent;
            }
            25% {
                border-top-color: #00ffcc;
                border-right-color: #00ffcc;
                border-bottom-color: transparent;
                border-left-color: transparent;
            }
            50% {
                border-top-color: transparent;
                border-right-color: #00ffcc;
                border-bottom-color: #00ffcc;
                border-left-color: transparent;
            }
            75% {
                border-top-color: transparent;
                border-right-color: transparent;
                border-bottom-color: #00ffcc;
                border-left-color: #00ffcc;
            }
            100% {
                border-top-color: #00ffcc;
                border-right-color: transparent;
                border-bottom-color: transparent;
                border-left-color: #00ffcc;
            }
        }






        .cyber4-button {
            font-family: 'DotGothic16', sans-serif;
            color: #00ffcc;
            background-color: #393b3b;  
            border: 4px solid rgba(0, 0, 0, 0.4);
            text-transform: uppercase;
            text-align: center;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            position: relative;
            overflow: hidden;
            padding: 2px 4px; 
            transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
        }

        .cyber4-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 2px solid transparent;
            box-sizing: border-box;
            transition: border-color 0.3s ease;
        }

        .cyber4-button:hover {
            color: #000;
            background-color: #4133ff;
        }

        .cyber4-button:hover::before {
            animation: glowing-border3 1s linear infinite;
        }

        @keyframes glowing-border3 {
            0% {
                border-top-color: #ec9998;
                border-right-color: transparent;
                border-bottom-color: transparent;
                border-left-color: transparent;
            }
            25% {
                border-top-color: #ec9998;
                border-right-color: #f53838;
                border-bottom-color: transparent;
                border-left-color: transparent;
            }
            50% {
                border-top-color: transparent;
                border-right-color: #ec9998;
                border-bottom-color: #f53838;
                border-left-color: transparent;
            }
            75% {
                border-top-color: transparent;
                border-right-color: transparent;
                border-bottom-color: #ec9998;
                border-left-color: #f53838;
            }
            100% {
                border-top-color: #ec9998;
                border-right-color: transparent;
                border-bottom-color: transparent;
                border-left-color: #ec9998;
            }
        }







    @keyframes shine {
        0% { text-shadow: 0 0 5px rgba(0, 255, 255, 0.8); }
        50% { text-shadow: 0 0 20px rgba(0, 255, 255, 0.9); }
        100% { text-shadow: 0 0 5px rgba(0, 255, 255, 0.8); }
    }

    .diamond-text {
        display: inline-block;
        font-weight: bold;
        color: #ffff00;
        animation: shine 3s infinite;
            text-shadow:
        -5px -5px 0 #00ffe4,  
         5px -5px 0 #00ffe4,
        -5px  5px 0 #00ffe4,
         5px  5px 0 #00ffe4;
        
    }

    .code-text { color: #cccccc; background-color: #1f1f1f; font-family: Consolas, 'Courier New', monospace; font-size: 22px; line-height: 1.5; padding-left: 5px;}








    
        .Boombutton {
            display: inline-block;
            padding: 15px 30px;
            font-size: 16px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            outline: none;
            color: #fff;
            background-color: #d45656;
            border: none;
            border-radius: 35px;
            box-shadow: 0 9px #350202;
            transition: background-color 0.3s, transform 0.3s;
        }

        .Boombutton:hover {background-color: #6e0707}

        .Boombutton:active {
            background-color: #700101da;
            box-shadow: 0 5px #350202;
            transform: translateY(4px);
        }
    



        .LD-loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease;
            opacity: 1;
            font-family: "Audiowide", sans-serif;
        }
        .LD-loading-screen.fade-out {
            opacity: 0;
            pointer-events: none;
        }
    .LD-skip-button {
      position: fixed;
      bottom: 60px;
      left: 50%;
      transform: translateX(-50%);
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      cursor: pointer;
      overflow: hidden;
      transition: background-color 0.3s, box-shadow 0.3s; 
      font-family: "Audiowide", sans-serif;
    }
    .LD-skip-button::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 300%;
      height: 300%;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity 0.3s, transform 0.3s;
    }
    .LD-skip-button:hover::after {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.2);
    }
    .LD-skip-button:active::after {
      opacity: 0; 
    }
        .LD-loading-screen p {
            color: #fff;
            text-shadow: 0 0 10px rgba(0, 123, 255, 0.8); 
            display: flex;
        }
        .LD-loading-screen p span {
            display: inline-block;
            animation: bounce 1s infinite;
        }
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-20px);
            }
            60% {
                transform: translateY(-10px);
            }
        }
        .LD-loading-screen p span:nth-child(1) { animation-delay: 0s; }
        .LD-loading-screen p span:nth-child(2) { animation-delay: 0.1s; }
        .LD-loading-screen p span:nth-child(3) { animation-delay: 0.2s; }
        .LD-loading-screen p span:nth-child(4) { animation-delay: 0.3s; }
        .LD-loading-screen p span:nth-child(5) { animation-delay: 0.4s; }
        .LD-loading-screen p span:nth-child(6) { animation-delay: 0.5s; }
        .LD-loading-screen p span:nth-child(7) { animation-delay: 0.6s; }


  


    
        .CB-gallery-container {
            padding: 20px;
            background-color: rgba(7, 32, 43, 0.6);
            border: 2px solid #00ffff;
            border-radius: 5px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .CB-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 10px;
        }

        .CB-gallery img {
            cursor: pointer;
            width: 100%;
            height: auto;
            border: 2px solid #00ffff;
            border-radius: 2px;
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }

        .CB-gallery img:hover {
            transform: scale(2);
            box-shadow: 0 4px 15px rgba(0, 255, 255, 0.4);
        }

        .CB-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            justify-content: center;
            align-items: center;
            z-index: 1000;
            flex-direction: column;
            overflow: auto;
        }

        .CB-modal img {
                max-width: 85%;
                max-height: 85%;
                width: auto; 
                height: auto;
                transition: transform 0.3s ease-in-out;
}


        .CB-controls {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            position: fixed;
            bottom: 20px;
            z-index: 10000; 
        }

        .CB-control-btn {
            font-size: 2rem;
            font-weight: bold;
            color: #00ffff;
            cursor: pointer;
            margin: 0 10px;
            width: 30px;
            height: 30px;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }

        .CB-control-btn:hover {
            background-color: rgba(0, 0, 0, 0.8);
            transform: scale(1.1);
        }

        .CB-close {
            margin-right: -160px;
            font-weight: bold;
            font-size: 2rem;
            color: #ff5252;
            cursor: pointer;
            margin-top: 20px;
            position: fixed;
            bottom: 20px;
            width: 30px;
            height: 30px;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 9px;
            transition: background-color 0.3s ease, transform 0.3s ease;
            z-index: 1100;
        }

        .CB-close:hover {
            background-color: rgba(0, 0, 0, 0.8);
            transform: scale(1.1);
        }


        .CB-nav-btn {
            font-size: 2rem;
            font-weight: bold;
            color: #00ffff;
            cursor: pointer;
            width: 30px;
            height: 30px;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            transition: background-color 0.3s ease, transform 0.3s ease;
            margin: 0 10px;
        }

        .CB-nav-btn:hover {
            background-color: rgba(0, 0, 0, 0.8);
            transform: scale(1.1);
        }

        .CB-prev {
            left: 10px;
        }

        .CB-next {
            right: 10px;
        }

        @media (max-width: 768px) {
            .CB-gallery {
                grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
            }

            .CB-modal img {
                max-width: 90%;
                max-height: 90%;
            }
    }


        .CB-download {position: absolute; top: 10px; right: 10px; background: rgba(0, 0, 0, 0.6); color: white;padding: 5px 10px; cursor: pointer; border-radius: 9px;
            transition: background-color 0.3s ease, transform 0.3s ease;
            z-index: 1100;
        }
        .CB-download:hover {
            background-color: rgba(0, 0, 0, 0.8);
            transform: scale(1.3);
        }


.CB-download::before {
    content: url('https://image.jimcdn.com/app/cms/image/transf/dimension=20x10000:format=png/path/s8c4d6c675960f88d/image/i05afd8dcf1cc71f6/version/1721314211/image.png');
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: auto;
}


    




    
        .mbr-container {
            display: flex;
            width: 100%;
        }

        .mbr-sidebar {
            width: 20%;
            height: 300px;
            background-color: #1e1e1e;
            color: white;
            padding: 10px;
            overflow-y: auto;
            word-wrap: break-word; 
            border: 2px solid #00ffff;
        }

        .mbr-team-list {
            list-style: none;
            padding: 0;
        }

        .mbr-team-list li {
            padding: 7px;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
            border: 1px solid #00f0ff;
            position: relative;
        }

        .mbr-team-list li:hover,
        .mbr-team-list li.mbr-active {
            background-color: #555;
            color: yellow;
        }

        .mbr-content {
            width: 80%;
            height: 657px;
            padding: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #000000;
            overflow: hidden;
            position: relative;
         overflow-y: auto; }

        .mbr-content::-webkit-scrollbar {
    width: 10px; }
       .mbr-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 240, 255, 0.8); }
        .mbr-sidebar { height: 320px; }
        }

      @media (max-width: 768px) {
        .mbr-content { height: 420px; 
         overflow-y: auto; }

        .mbr-content::-webkit-scrollbar {
    width: 8px; }
       .mbr-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 240, 255, 0.8); }
        .mbr-sidebar { height: 200px; }
        }


        .mbr-member-info,
        .mbr-cover {
            display: none;
            text-align: center;
            position: absolute;
            top: 0;
            left: 100%;
            width: 100%;
            transition: left 0.5s;
        }

        .mbr-member-info img,
        .mbr-cover img {
            max-width: 100%;
            height: auto;
        }

        .mbr-member-info.mbr-active,
        .mbr-cover.mbr-active {
            display: block;
            left: 0;
        }

        .mbr-info {
            max-height: 0;
            overflow: hidden;
            background: #444;
            color: white;
            padding: 0 10px;
            transition: max-height 0.5s ease-out, padding 0.5s ease-out;
            word-wrap: break-word; 
        }

        .mbr-info.mbr-active {
            max-height: 200px;
            padding: 10px;
        }

        .modal-open {
            overflow: hidden;
        }

    


   
    .pt24-book {
      position: relative;
      width: 100%;
      height: 660px;
      perspective: 1000px;
      margin-bottom: 5px;
    }

      @media (max-width: 768px) {
        .pt24-book { height: 320px; }
}

    .pt24-page {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #000000;
      border: 2px solid rgba(0, 212, 252, 0.6);
      backface-visibility: hidden;
      transform-origin: left;
      transition: transform 1s;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }

      @media (max-width: 768px) {
        .pt24-page { height: 90%; }
}

    .pt24-buttons {
      display: flex;
     align-items: center;
      justify-content: space-between;
      width: 300px;
    }

    .pt24-button {
      background-color: rgba(47, 88, 157, 0.6);
      border: 2px solid rgba(0, 212, 252, 0.6);
      border-radius: 2px;
      color: #00ff84;
      padding: 10px 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .pt24-button:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 300%;
      height: 300%;
      background: rgba(0, 188, 212, 0.2);
      transition: all 0.6s ease;
      transform: translate(-50%, -50%) scale(0);
      border-radius: 50%;
    }

      @media (max-width: 768px) {
        .pt24-button { font-size: 15px; }
}


    .pt24-button:hover:before {
      transform: translate(-50%, -50%) scale(1);
    }

    .pt24-button:active {
      background-color: #3e0f8d;
      border-color: #00ff48;
    }
    .pt24-page:nth-child(1) { background-color: rgba(0, 0, 0, 0.6); transform: rotateY(180deg);}
    .pt24-page:nth-child(2) { background-color: rgba(0, 0, 0, 0.6); transform: rotateY(180deg);}
    .pt24-page:nth-child(3) { background-color: rgba(0, 0, 0, 0.6); transform: rotateY(180deg);}
    .pt24-page:nth-child(4) { background-color: rgba(0, 0, 0, 0.6); transform: rotateY(180deg);}
    .pt24-page:nth-child(5) { background-color: rgba(0, 0, 0, 0.6); transform: rotateY(180deg);}



  


  

.board-notification {
  background-color: rgba(0, 31, 63, 0.9);
  border: 2px solid rgba(0, 212, 252, 0.9);
  padding: 20px;
  text-align: center;
  width: 80%;
  max-width: 600px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  box-shadow: 0 0 15px #39CCCC;
  animation: board-breathing 2s infinite;
  opacity: 1;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.board-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}

@keyframes board-breathing {
  0% { box-shadow: 0 0 15px #39CCCC; }
  50% { box-shadow: 0 0 30px #01FF70; }
  100% { box-shadow: 0 0 15px #39CCCC; }
}

#board-update-text {
  font-size: 1.5em;
  color: #39CCCC;
}

.board-language-toggle {
  margin-top: 15px;
}

.board-language-toggle button {
  background-color: #001f3f;
  border: 2px solid #39CCCC;
  color: #fff;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1em;
}

.board-language-toggle button:hover {
  background-color: #39CCCC;
  color: #001f3f;
}


.board-hide {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
}

  






.Bluetxt-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.Bluetxt-container {
  width: 95%;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  border: 2px solid #39CCCC;
  border-radius: 2px;
  padding: 18px;
  box-shadow: 0 0 10px #39CCCC;
  text-align: left;
}

.Bluetxt-language-switcher {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.Bluetxt-language-switcher button {
  background-color: #001f3f;
  border: 2px solid #39CCCC;
  color: #fff;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 15;
  margin: 0 5px;
  transition: all 0.3s ease;
}

.Bluetxt-language-switcher button:hover {
  background-color: #39CCCC;
  color: #001f3f;
}

.Bluetxt-script-text {
  font-size: 1.2em;
  line-height: 1.8;
}



.opentext-btn {
  display: block;
  margin: 0 auto;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline: none;
}

.opentext-btn img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.1s ease;
  animation: floatHint 2s ease-in-out infinite;
  transform: translateY(0);
  filter: brightness(1);
}

.opentext-btn:active img,
.opentext-btn.active img {
  transform: translateY(2px);
  filter: brightness(0.8);
}

.opentext-popup {
  display: none;
  background-color: #030407;
  border: 1px solid #00fee3;
  color: white;
  padding: 10px;
  margin: 10px auto 0 auto;
  border-radius: 8px;
  max-width: 500px;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.6);
}

.opentext-popup.show {
  display: block;
  animation: popupElastic 0.4s ease-out forwards, glowIn 0.4s ease-out forwards;
}

.opentext-close {
  position: absolute;
  top: 5px;
  right: 25px;
  font-size: 22px;
  color: white;
  cursor: pointer;
  line-height: 1;
  z-index: 2;
}

.opentext-content {
  max-height: 250px;
  overflow-y: auto;
  padding: 10px 14px 6px 6px;
}

.opentext-content::-webkit-scrollbar {
  width: 6px;
}

.opentext-content::-webkit-scrollbar-thumb {
  background: #00fee3;
  border-radius: 3px;
}

#opentextCollapsedImg {
  display: none;
  margin: 20px auto 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#opentextCollapsedImg.show {
  display: block;
  opacity: 1;
}

@keyframes floatHint {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes popupElastic {
  0% { opacity: 0; transform: scale(0.6); }
  60% { opacity: 1; transform: scale(1.1); }
  80% { transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes glowIn {
  0% { box-shadow: 0 0 0 rgba(0, 254, 227, 0); }
  100% { box-shadow: 0 0 20px rgba(0, 254, 227, 0.3); }
}

.opentext-popup.hide {
  animation: fadeOutBox 0.3s ease-out forwards;
}

@keyframes fadeOutBox {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.7); }
}

#opentextCollapsedImg.fadeInIcon {
  animation: fadeInIcon 0.4s ease forwards;
}

@keyframes fadeInIcon {
  0%   { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}









.lang2 {

 text-align: center;

}





#nameOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
}
.namePopupBox {
    background: #000c1a;
    border: 2px solid #00ffcc;
    width: 90vw;
    max-width: 420px;
    height: 110vw;
    max-height: 480px;
    text-align: center;
    color: #00ffcc;
    position: relative;
    box-shadow: 0 0 15px #00ffcc, inset 0 0 10px #003f4f;
    font-family: 'DotGothic16', sans-serif;
    text-shadow: 0 0 5px #00ffcc;
    animation: glowIn 1s ease-out forwards;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.closeBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    font-size: 24px;
    color: #00ffcc;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.1;
    z-index: 1;
}
.closeBtn:hover {
    opacity: 0.6;
}
#fujiImage {
    width: 160px;
    margin-bottom: 20px;
    transition: opacity 0.5s ease;
    opacity: 0;
}
.fadeIn {
    opacity: 1 !important;
}
@keyframes glowIn {
    0% { opacity: 0; filter: brightness(0.8) blur(0.5px); }
    100% { opacity: 1; filter: brightness(1) blur(0); }
}
.namePrompt {
    font-size: 14px;
    margin-bottom: 5px;
    color: #00ffee;
    opacity: 0.7;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #00ffee;
    animation: typing 2s steps(30, end), blink 0.5s step-end infinite alternate;
}
.namePrompt.jp {
    font-size: 18px;
    margin-bottom: 20px;
    opacity: 1;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #00ffee;
    animation: typing 2s steps(30, end) 0.5s forwards, blink 0.5s step-end infinite alternate;
}
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}
@keyframes blink {
    50% { border-color: transparent; }
}
#loadingText {
    margin-bottom: 20px;
    color: #00ffee;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    line-height: 1.4;
    text-align: center;
    max-width: 90%;
    word-break: keep-all;
    white-space: normal;
    animation: shakeFlash 3s ease-in-out infinite;
}

@keyframes shakeFlash {
  0% { transform: translateX(0); opacity: 1; filter: brightness(1); }
  10% { transform: translateX(-1px); opacity: 0.9; filter: brightness(1.2); }
  20% { transform: translateX(2px); opacity: 1; filter: brightness(0.9); }
  30% { transform: translateX(-3px); opacity: 0.85; filter: brightness(1.3); }
  40% { transform: translateX(2px); opacity: 1; filter: brightness(1); }
  50% { transform: translateX(-1px); opacity: 0.95; filter: brightness(1.1); }
  60% { transform: translateX(1px); opacity: 1; filter: brightness(0.95); }
  70% { transform: translateX(-2px); opacity: 0.8; filter: brightness(1.4); }
  80% { transform: translateX(2px); opacity: 1; filter: brightness(1); }
  90% { transform: translateX(-1px); opacity: 0.9; filter: brightness(1.1); }
  100% { transform: translateX(0); opacity: 1; filter: brightness(1); }
}
#loadingText span {
    display: inline-block;
    animation: waveBounce 1.2s infinite;
    animation-delay: calc(var(--i) * 0.1s);
}
@keyframes waveBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
#nameInput {
    padding: 12px;
    font-size: 1em;
    width: 80%;
    border: 2px solid #00ffcc;
    margin-bottom: 25px;
    background-color: #000;
    color: #00ffcc;
    font-family: 'DotGothic16', sans-serif;
    box-shadow: inset 0 0 5px #00ffcc;
}
.formButton {
    font-family: 'DotGothic16', sans-serif;
    color: #00ffcc;
    background-color: #005071;
    border: 2px solid #00ffcc;
    padding: 15px 30px;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.1s ease;
}
.formButton::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid transparent;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}
.formButton::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 255, 204, 0.3);
    transform: scale(0);
    transition: transform 0.2s ease;
}
.formButton:hover {
    background-color: #005071;
    color: #ffffff;
    box-shadow: 0 0 10px #1f4ed6, 0 0 10px #1f4ed6, 0 0 15px #1f4ed6;
}
.formButton:hover::before {
    animation: glowing-border2 1s linear infinite;
}
.formButton:active {
    background-color: #004050;
    transform: scale(0.95);
}
.formButton:active::after {
    transform: scale(1);
}
@keyframes glowing-border2 {
    0% {
        border-top-color: #00ffcc;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
    25% {
        border-top-color: #00ffcc;
        border-right-color: #00ffcc;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
    50% {
        border-top-color: transparent;
        border-right-color: #00ffcc;
        border-bottom-color: #00ffcc;
        border-left-color: transparent;
    }
    75% {
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: #00ffcc;
        border-left-color: #00ffcc;
    }
    100% {
        border-top-color: #00ffcc;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: #00ffcc;
    }
}


.fadeIn {
  opacity: 1 !important;
}








.accoHomeHeader {
  background: linear-gradient(to right, #002233, #003344);
  color: #00ffcc;
  padding: 12px 20px;
  font-family: 'DotGothic16', sans-serif;
  font-size: 16px;
  cursor: pointer;
  border: 2px solid #00ffcc;
  transition: background 0.4s ease, transform 0.2s ease;
  user-select: none;
  position: relative;
  box-shadow: 0 0 5px #00ffcc;
}
.accoHomeHeader:hover {
  background: #004466;
  transform: scale(1.02);
  box-shadow: 0 0 10px #00ffee, inset 0 0 5px #00ffee;
}
.accoHomeContent {
  background: #000c1a;
  color: #ffffff;
  font-size: 16px;
  padding: 0 16px;
  font-family: 'DotGothic16', sans-serif;
  border: 2px solid #00ffcc;
  border-top: none;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.8s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.6s ease;
  clip-path: inset(0 0 100% 0);
}
.accoHomeContent.open {
  padding: 16px;
  max-height: 800px;
  opacity: 1;
  clip-path: inset(0 0 0 0);
}



.CyberHomeHeader {
  background: linear-gradient(to right, #002233, #003344);
  color: #00ffcc;
  padding: 12px 20px;
  font-family: 'DotGothic16', sans-serif;
  font-size: 16px;
  cursor: pointer;
  border: 2px solid #00ffcc;
  position: relative;
  box-shadow: 0 0 5px #00ffcc;
}

.CyberHomeContent {
  background: #000c1a;
  color: #ffffff;
  font-size: 16px;
  padding: 20px 0 20px 16px;
  font-family: 'DotGothic16', sans-serif;
  border: 2px solid #00ffcc;
  max-height: 300px;
  overflow: auto;

}





.CyberNHomeContainer {
  position: relative;
  overflow: hidden;
}
.CyberNHomeHeader {
  background: linear-gradient(to right, #002233, #003344);
  color: #00ffcc;
  padding: 12px 20px;
  font-size: 16px;
  border: 2px solid #00ffcc;
  box-shadow: 0 0 5px #00ffcc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.CyberNArrow {
  font-size: 20px;
  cursor: pointer;
  user-select: none;
}
.CyberNHomeContentWrapper {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
  width: 100%; 
}
.CyberNHomeContent {
  background: #000c1a;
  color: #ffffff;
  font-size: 16px;
  padding: 10px 10px 10px 16px;
  border: 2px solid #00ffcc;
  width: 100%;
  max-height: 300px;
  overflow: auto;
  flex-shrink: 0;
  box-sizing: border-box;
}
.SwipeHintN1 {
  font-size: 12px;
  color: #00cccc;
  text-align: center;
  margin-top: 8px;
  opacity: 0.6;
}






.CyberS2Container {
  display: flex;
  flex-direction: row;
  border: 2px solid #00ffee;
  background: #000c1a;
  font-family: 'DotGothic16', sans-serif;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(0,255,255,0.3);
  position: relative;
  max-height: 300px;
overflow-y: auto;
overflow-x: hidden;

}

.CyberS2TopIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33.33%;
  background: #002233;
  padding: 8px 0;
  padding-left: 20px;
  cursor: pointer;
  border-bottom: 2px solid #00ffcc;
  transition: all 0.4s ease;
}


.CyberS2TopIcon.open {
  width: 24%;
  padding-left: 20px;
}

.CyberS2TopIcon img {
  height: 24px;
  vertical-align: middle;
  transition: transform 0.3s ease;
}
.CyberS2TopIcon.open img {
  transform: rotate(90deg);
}

@media (max-width: 768px) {
  .CyberS2TopIcon {
    animation: cyberGlow 2s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(0, 255, 204, 0.4);
  }
}

@keyframes cyberGlow {
  0%, 100% {
    box-shadow: 0 0 6px rgba(0, 255, 204, 0.4);
  }
  50% {
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.9);
  }
}


@media (min-width: 769px) {
.CyberS2TopIcon {
  width: 18%;
    margin: 0 auto; 
    text-align: center; 
    justify-content: center; 
    align-items: center;
    display: flex;
  }
    }


.CyberS2Nav {
  background-color: #001e2d;
  min-width: 150px;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  border-right: 2px solid #00ffee;
  border-top: 2px solid #00ffee;
  transition: transform 0.3s ease;
  z-index: 10;
 overflow-y: auto;
overflow-x: hidden;
}



.CyberS2TabBtn {
  background: transparent;
  border: none;
  color: #00ffee;
  padding: 12px;
  text-align: left;
  font-size: 15px;
  cursor: pointer;
  transition: 0.3s;
  border-left: 4px solid transparent;
}
.CyberS2TabBtn:hover,
.CyberS2TabBtn.active {
  background: rgba(0, 255, 255, 0.1);
  color: #ffffff;
  border-left: 4px solid #00ffee;
}

.CyberS2ContentArea {
  flex-grow: 1;
  padding: 20px;
  background-color: #000c1a;
  overflow-y: auto;
  max-height: 400px;
  border-left: 2px solid rgba(0,255,255,0.2);
}
.CyberS2TabContent {
  display: none;
  animation: fadeIn 0.4s ease-in-out;
}
.CyberS2TabContent.active {
  display: block;
}

@keyframes fadeIn {
  from {opacity: 0; transform: translateY(10px);}
  to {opacity: 1; transform: translateY(0);}
}

@media (max-width: 768px) {
  .CyberS2Container {
    flex-direction: column;
  }

  .CyberS2TopIcon {
  border: 2px solid rgba(0,255,255,0.2);
    display: block;
    width: 33.33%;
  }

  .CyberS2Nav {
    position: absolute;
    top: 44px;
    left: 0;
    width: 180px;
    height: 100%;
    transform: translateX(-100%);
    box-shadow: 3px 0 10px rgba(0,255,255,0.2);
  }

  .CyberS2Nav.show {
    transform: translateX(0%);
  }

  .CyberS2ContentArea {
    border-left: none;
    padding: 16px;
  }
}


.revealBox {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: scaleY(0.8) translateY(-20px);
  transition: all 0.6s ease-out;
}

.revealBox.show {
  max-height: 9999px;
  opacity: 1;
  transform: scaleY(1) translateY(0);
  animation: cyberGlow 1.2s ease-out forwards;
}

@keyframes cyberGlow {
  0% {
    box-shadow: 0 0 0px #00ffee00, 0 0 0px #00ffee00;
    border: 2px solid transparent;
  }
  30% {
    box-shadow: 0 0 5px #00ffee, 0 0 10px #00ffeeaa;
    border: 2px solid #00ffee;
  }
  60% {
    box-shadow: 0 0 6px #00ffeecc, 0 0 20px #00ffee99;
    border: 2px solid #00ffee;
  }
  100% {
    box-shadow: 0 0 10px #00ffeeaa, 0 0 30px #00ffee66;
    border: 2px solid #00ffee;
  }
}








.AccoSpon-container {
  font-family: 'DotGothic16', sans-serif;
}

.AccoSpon-header {
  width: 100%;
  background: linear-gradient(to right, #001122, #002233);
  color: #00ffee;
  padding: 12px 16px;
  cursor: pointer;
  border: 2px solid #00ffee;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: start;
  box-shadow: 0 0 8px #00ffee88;
  transition: background 0.3s;
}

.AccoSpon-header:hover {
  background: #003355;
}

.AccoSpon-icon {
  margin-right: 12px;
  animation: glow 1.5s infinite alternate;
}

@keyframes glow {
  from { text-shadow: 0 0 4px #00ffeeaa; }
  to   { text-shadow: 0 0 8px #00ffeeff; }
}

.AccoSpon-body {
  display: none;
  background-color: #000e16;
  padding: 12px 16px;
  border: 1px solid #005577;
  border-top: none;
}

.AccoSpon-body.open {
  display: block;
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.AccoSpon-body img {
  max-width: 100%;
  margin-bottom: 12px;
  border: 2px solid #004455;
}

.AccoSpon-player {
  text-align: center;
}

.AccoSpon-playbtn {
  background: none;
  color: #00ffee;
  border: none;
  font-size: 15px;
  font-family: 'DotGothic16', sans-serif;
  cursor: pointer;
  animation: pulse 1.2s infinite;
}

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





 


.sponsor-strip {
  overflow: hidden;
  position: relative;
  width: 100%;
  background: #000;
  padding: 5px 0;
  border-top: 2px solid rgba(0, 212, 252, 0.6);
  border-bottom: 2px solid rgba(0, 212, 252, 0.6);
}




    .sponsor-track {
      display: flex;
        align-items: center;
      width: max-content;
      will-change: transform;
      transition: none;
    }

    .sponsor-track a {
      display: block;
      margin: 0 60px;
      transition: transform 0.3s ease;
    }

    .sponsor-track img {
      height: 34px;
      filter: grayscale(100%) brightness(1.2);
      transition: transform 0.3s ease, filter 0.3s ease;
    }
    .sponsor-track a:hover img {
      transform: scale(1.4);
      filter: none;
    }

  







.Fujiclo-layout {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
  margin-top: 40px;
  position: relative;
}

.Fujiclo-menu {
  position: absolute;
  left: -220px;
  top: 20px;
  width: 200px;
  padding: 16px;
  background: rgba(0, 20, 30, 0.9);
  border: 2px solid #00ffff;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0,255,255,0.2);
  transition: transform 0.4s ease-in-out;
  z-index: 100;
  transform: translateX(0);
}

.Fujiclo-menu.open {
  transform: translateX(220px);
}

.Fujiclo-menu-toggle {
  position: absolute;
  left: 10px;
  top: 20px;
  width: 28px;
  height: 28px;
  background: #00ffff;
  color: #000;
  border-radius: 50%;
  text-align: center;
  line-height: 28px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 8px #00ffff;
  z-index: 101;
}



  
.Fujiclo-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  margin: 0 auto;
  max-width: 1000px;
  position: relative;
}
.Fujiclo-menu {
  position: absolute;
  left: -240px;
  top: 50px;
  width: 200px;
  max-height: 80vh;
  padding: 10px;
  background: rgba(0, 20, 30, 0.9);
  border: 2px solid #00ffff;
  border-radius: 10px;
  box-shadow: 0 0 16px rgba(0,255,255,0.2);
  transition: transform 0.4s ease-in-out;
  transform: translateX(0);
  overflow-y: auto;
  max-height: 80vh;
  z-index: 10;
}
.Fujiclo-menu.open { transform: translateX(240px); }
.Fujiclo-group-title {
  background: #00ffff;
  color: #000;
  font-weight: bold;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
}
.Fujiclo-group-items { display: none; padding-top: 6px; }
.Fujiclo-group-items button {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: #061e24;
  border: 2px solid #00ffff;
  color: #00ffff;
  font-family: 'Aldrich', monospace;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.Fujiclo-group-items button:hover {
  background-color: rgba(0, 255, 255, 0.1);
  transform: scale(1.02);
}
.Fujiclo-group-items button.active {
  background-color: #00ffff;
  color: #000;
  font-weight: bold;
  transform: scale(1.05);
  box-shadow: 0 0 12px #00ffff;
}
.Fujiclo-dna-button {
  position: absolute;
  left: 4px;
  top: 4px;
  padding: 10px 16px;
  background: #00ffff;
  color: #000;
  border: none;
  border-radius: 999px;
  font-size: 17px;
  font-weight: bold;
  font-family: 'Aldrich', monospace;
  cursor: pointer;
  box-shadow: 0 0 10px #00ffff, inset 0 0 4px #009999;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 20;
  transition: background 0.3s, transform 0.2s;
}
.Fujiclo-dna-button:hover {
  background: #33ffff;
  transform: scale(1.05);
}
.Fujiclo-frame {
  position: relative;
  display: inline-block;
  width: 80%;
  max-width: 600px;
}
.Fujiclo-img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 0 24px rgba(0,255,255,0.2);
  transition: opacity 0.3s ease-in-out;
}
.Fujiclo-scan {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 0, 0, 0) 0%,
    rgba(255, 30, 30, 0.3) 48%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 30, 30, 0.3) 52%,
    rgba(255, 0, 0, 0) 100%
  );
  opacity: 0;
  z-index: 5;
}
@keyframes Fujiclo-sweep {
  0%   { top: -100%; opacity: 0.2; }
  45%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@keyframes Fujiclo-shake {
  0%, 100% { transform: translate(0px, 0px); }
  25% { transform: translate(-4px, 3px); }
  50% { transform: translate(3px, -2px); }
  75% { transform: translate(-2px, 1px); }
}

.Fujiclo-alert {
  background: #ffcc00;
  color: #000;
  font-weight: bold;
  font-size: 15px;
  font-family: 'Share Tech Mono', monospace;
  text-align: center;
  padding: 10px 20px;
  border-bottom: 2px solid #000;
  letter-spacing: 0.5px;
  z-index: 999;
}






  
.Blueti-title {
  background: rgba(0, 255, 255, 0.08);
  color: #00ffff;
  font-weight: bold;
  font-size: 18px;
  text-align: left;
  padding: 12px 18px;
  margin-bottom: 14px;
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(0,255,255,0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  letter-spacing: 0.6px;
}

.wintitle-css {
  background: #000;
  border: 2px solid #00ffff;
  border-radius: 4px;
  padding: 8px 12px;
  margin: 0 auto 12px auto;
  box-shadow: 0 0 8px rgba(0,255,255,0.3);
}

.wintitle-text {
  position: relative;
  font-size: 16px;
  font-weight: bold;
  color: #00ffff;
  text-shadow: 0 0 6px #00ffff;
  line-height: 1.4;
  word-break: break-word;
  white-space: normal;
  padding-right: 80px;
}


.wintitle-btns {
  position: absolute;
  top: 4px;
  right: 8px;
  display: flex;
  gap: 6px;
}

@media (min-width: 521px) {
  .wintitle-css {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }

  .wintitle-text {
      font-size: 20px;
    flex: 1;
    padding-right: 0;
  }

  .wintitle-btns {
    position: static;
    margin-left: auto;
  }
}

@media (max-width: 520px) {
  .wintitle-btns {
    position: absolute;
    top: 0;
    right: 0;
  }
}


.wintitle-btns div {
  width: 16px;
  height: 16px;
  border: 2px solid #00ffff;
  box-sizing: border-box;
  position: relative;
}

.wintitle-min::before {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  height: 2px;
  background: #00ffff;
}

.wintitle-max::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border: 1px solid #00ffff;
}

.wintitle-close {
  border-color: #ff0033;
  position: relative;
}

.wintitle-close::before,
.wintitle-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 10px;
  height: 2px;
  background: #ff0033;
  transform-origin: center;
}

.wintitle-close::before {
  transform: translateY(-50%) rotate(45deg);
}
.wintitle-close::after {
  transform: translateY(-50%) rotate(-45deg);
}








  



.cc-imagewrapper {
  position: relative;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 24px rgba(0,255,255,0.05), inset 0 0 6px rgba(0,255,255,0.08);
  border: 1px solid rgba(0, 255, 255, 0.2);
  z-index: 0;
}


.cc-imagewrapper::before {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 255, 255, 0.1) 45%,
    rgba(0, 255, 255, 0.3) 50%,
    rgba(0, 255, 255, 0.1) 55%,
    transparent 100%
  );
  animation: cc-scan 6s linear infinite;
  z-index: 1;
  pointer-events: none;
}

.cc-imagewrapper::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  border-radius: 6px;
  pointer-events: none;
  z-index: 2;
  border-image: linear-gradient(
    to right,
    transparent 0%,
    #00ffff 50%,
    transparent 100%
  ) 1;
  animation: cc-trace 4s linear infinite;
}

@keyframes cc-scan {
  0% { top: -100%; }
  100% { top: 100%; }
}

@keyframes cc-trace {
  0%   { border-image-source: linear-gradient(to right,  transparent 0%, #00ffff 50%, transparent 100%); }
  25%  { border-image-source: linear-gradient(to bottom, transparent 0%, #00ffff 50%, transparent 100%); }
  50%  { border-image-source: linear-gradient(to left,   transparent 0%, #00ffff 50%, transparent 100%); }
  75%  { border-image-source: linear-gradient(to top,    transparent 0%, #00ffff 50%, transparent 100%); }
  100% { border-image-source: linear-gradient(to right,  transparent 0%, #00ffff 50%, transparent 100%); }
}


.jtpl-navigation
.jtpl-navigation__inner {
  background: rgba(0, 0, 0, 0.4); 
  color: #00ffff; 
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
  box-shadow: 0 0 12px rgba(0,255,255,0.1);
  transition: background 0.3s ease;
}


/* ======== wall ======== */

.jtpl-section-main__inner {
  max-width: 1360px !important;
  margin: 0 auto;

}


.jtpl-sidebar__inner {
  max-width: 1360px !important;
  margin: 0 auto;

}



.fuji-fullwidth {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  max-width: 100vw;
  box-sizing: border-box;
}


.fuji-widerblock {
  max-width: 1460px;
  margin: 0 auto;
}


@media (max-width: 768px) {
  .jtpl-content,
  .jtpl-section-main__inner {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}




.chapter-nav {
  display: flex;
  justify-content: space-between;
  max-width: 600px;
  margin: 5px auto;
  padding: 0 35px;
  box-sizing: border-box;
}


.chapter-btn {
  display: inline-block;
  padding: 10px 20px;
  font-family: 'DotGothic16', sans-serif;
  text-decoration: none;
  border: 1px solid #0ff;
  border-radius: 6px;
  color: #fff; 
  background: transparent;
  text-align: center;
  transition: all 0.2s ease;
}

.chapter-btn:hover,
.chapter-btn:active,
.chapter-btn:focus  {  background-color: #0ff;
    color: #000 !important; }
}