@import url('https://fonts.googleapis.com/css?family=Henny+Penny|IM+Fell+Great+Primer+SC|Lancelot');
/*
font-family: 'IM Fell Great Primer SC', serif;
font-family: 'Lancelot', cursive;
font-family: 'Henny Penny', cursive;
font-family: "Sawarabi Mincho"
*/
hr {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
html{
 overflow: hidden;
 height: 100%;
}
body {
    text-align: center;
    background-color: black;
    color: white;
    overflow: auto;
    height: 100%;
}
#container::-webkit-scrollbar {
    display: none;
}
a {
    color: white;
    text-decoration: none;
}

::-webkit-scrollbar {
    display: none;
}

.topback0 {
    transform: translateZ(-4.5px) scale(6);
    margin-top: 100px;
}
.topback1 {
    transform: translateZ(-4px) scale(5);
    margin-top: 100px;
}
.topback2 {
    transform: translateZ(-3px) scale(4);
    margin-top: 100px;
}
.topback3 {
    transform: translateZ(-2px) scale(3);
    margin-top: 100px;
}
.logo {
    transform: translateZ(-10px) scale(11);
}
.toparu {
    transform: translateZ(-1.2px) scale(2.5);
    margin-top: 150px;
}
.topback4 {
    transform: translateZ(-1px) scale(2.1);
    margin-top: 100px;
}

#container {
    perspective: 1px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.con {
    transform: translateZ(-1px) scale(2.1);
    margin: auto;
    width: 90%;
    top: 1750px;
    font-family: 'Henny Penny', cursive;
    position: relative;
}
ul.btn li {
    font-size: 1.3em;
    width: 165px;
    height: 35px;
    background-color: black;
    border: solid 1px #ffffff;
    margin:2px 3px;
    text-align: center;
    transform: skewX(15deg);
    display: inline-block;
}

ul.btn li:hover {
    background-image: -webkit-linear-gradient(270deg, #000000 0%, #890000 100%);
    animation-name: animated;
    letter-spacing: 5px;
}
ul.btn li,
ul.btn li::before,
ul.btn li::after {
    -webkit-transition: all .3s;
    transition: all .3s;
}

.btntxt {
    transform: skewX(-15deg);
    margin: 10px;
}
.box {
    margin: 10px auto;
    width: 90%;
    height: 70vh;
    overflow: scroll;
    border: solid 1px;
    padding: 10px;
    font-family: "Sawarabi Mincho";
}
.box::-webkit-scrollbar {
    display: none;
}
#footer {
    margin: 10px;
    font-size: 0.9em;
}
#footer2 {
    margin: 10px;
    font-size: 0.9em;
    font-family: "Sawarabi Mincho"
}

/* Top */

.title {
    font-family: 'IM Fell Great Primer SC', serif;
    font-size: 2em;
}
.txt {
    margin: 20px 0px;
}
.ttt {
    line-height: 40px;
}
/* About:準備中 */

/* Download:準備中 */

/* Chara */
.c-data {
    width: 50%;
    text-align: left;
    margin: auto;
    min-width: 300px;
}
.c-img {
    overflow: hidden;
}
.c-name {
    font-size: 1.5em;
}
.txt2 {
    margin-top: 10px;
    line-height: 1.5em;
    padding: 10px;
}
rb {
    font-family: 'Henny Penny',"Sawarabi Mincho";
    font-size: 1.3em;
}
rt rp {
    font-family: "Sawarabi Mincho";
}

.maho {
    height: 500px;
    margin-top: 590px;
     -webkit-animation: spin 50s linear infinite;
     -moz-animation: spin 50s linear infinite;
     -o-animation: spin 50s linear infinite;
     animation: spin 50s linear infinite;
}
@-webkit-keyframes spin {
    0% {-webkit-transform: rotate(0deg) translateZ(-1.6px) scale(3);}
    100% {-webkit-transform: rotate(360deg) translateZ(-1.6px) scale(3);}
}
@-moz-keyframes spin {
    0% {-moz-transform: rotate(0deg) translateZ(-1.6px) scale(3);}
    100% {-moz-transform: rotate(360deg) translateZ(-1.6px) scale(3);}
}@-ms-keyframes spin {
    0% {-ms-transform: rotate(0deg) translateZ(-1.6px) scale(3);}
    100% {-ms-transform: rotate(360deg) translateZ(-1.6px) scale(3);}
}@-o-keyframes spin {
    0% {-o-transform: rotate(0deg) translateZ(-1.6px) scale(3);}
    100% {-o-transform: rotate(360deg) translateZ(-1.6px) scale(3);}
}
@keyframes spin {
    0% {transform: rotate(0deg) translateZ(-1.6px) scale(3);}
    100% {transform: rotate(360deg) translateZ(-1.6px) scale(3);}
}

.txt3 {
    border: solid 1px;
    padding: 10px;
}
.sen {
    margin:10px;
    height: 1px;
    background: #000000;
    background-image: -webkit-linear-gradient(left, #000, #fff, #000);
    background-image: -moz-linear-gradient(left, #000, #fff, #000);
    background-image: -ms-linear-gradient(left, #000, #fff, #000);
    background-image: -o-linear-gradient(left, #000, #fff, #000);
}
.c-sen {
    margin-top: 10px;
    border-top: 1px dashed;
}
.stf {
    margin-top: 10px;
    font-size: 0.8em;
    text-align: right;
}
.zok {
    font-family: 'Henny Penny', cursive;
}
.sw {
    color: #ffc4e8;
}
.sa {
    color: #acecff;
}
.vi {
    color: #fffdc4;
}
.bi {
    color: #908e8e;
}
.um {
    color: #eaeaea;
}
.zokwak {
    border: solid 1px;
    padding: 10px;
    margin: 5px 0px;
}

.c-data2 {
    width: 70%;
    text-align: left;
    margin: auto;
    min-width: 300px;
}

ul.charaimg li {
    width: 150px;
    height: 41px;
    margin: 5px 1px 1px 5px;
    display: inline-block;
    background: #7b7b7b;
    transform: skewX(15deg);
    overflow: hidden;
    border: solid 1px #fff;
}
ul.charaimg li img {
    width: 100%;
    transform: skewX(-15deg) scale(1.4);
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}
ul.charaimg li img:hover {
    background: #910000;
    -webkit-filter: brightness(30%);
    filter: brightness(30%);
}
ul.charaimg li:hover {
    border: solid 1px #ff0000;
}
.data {
    padding: 10px;
}
.c-aru {
    text-align: center;
}
/* Gallary:準備中 */

/* staff */
.stfene1 {
    transform: translateZ(-1.0px) scale(2.5);
    margin-top: 80px;
    margin-left: -100%;
}
.stfene2 {
    transform: translateZ(-1.0px) scale(2.5);
    margin-top: 150px;
    margin-right: -90%;
}
.stfene3 {
    transform: translateZ(-1.0px) scale(2.5);
    margin-top: 150px;
    margin-left: -50%;
}

.stfimg {
    width: 200px;
    height: 70px;
    margin: 5px 1px 1px 5px;
    display: inline-block;
    background: #000000;
    transform: skewX(8deg);
    overflow: hidden;
    border: solid 1px #fff;
}
.stfimg img {
    width: 100%;
    transform: skewX(-8deg) scale(1.4);
}
.stf-name {
    font-family: 'Henny Penny',"Sawarabi Mincho";
    margin-top: 20px;
    margin-left: 20%;
    text-align: left;
}
.link {
    display: inline;
    -webkit-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
    margin: 20px;
}
.link:hover {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

/* all */
.pl {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}