@charset "utf-8";

/* COMMON */
.content {
    margin: 0 auto;
    font-family: serif;
}
.mt2 { margin-top: 2em !important;}
.ml05 { margin-left: 0.5em !important;}
.pt1 { padding-top: 1em !important;}
.w72 { width: 72% !important;}
.error { color: #ff89ff !important;}
.wht { color: #fff !important;}
/* GAME */
/* #space {
	background-image: url(../img/bg_space.jpg);
	background-repeat: repeat;
	background-size: contain;
	font-family: "Noto Sans JP" !important;
}
#game {
	background-image: url(../img/bg_clowd.png);
	background-repeat: repeat;
	background-size: contain;
	background-position: center top;
	animation: animation-haniwaman 20s linear  infinite;
}
    @keyframes animation-haniwaman {
        0% {background-position: 0 0, 0 0;}
        100% {background-position: -1900px 0, 0 0;}
    } */
#prologue {
    background: #7dffee;
}
.tokiakase {
    display: block;
    width: 90%;
    font-size: 100%;
    font-weight: 900;
    color: #000;
    text-align: center;
    /* margin: 1.6em auto 0; */
    margin: 0 auto 0;
}
.tokiakase a {
    display: block;
    padding: 0.4em;
}
.btn_detail {
    width: 60%;
    margin: 0 auto;
    padding: 0;
}
.dragon {
    background: #000;
    border-radius: 6px;
    border: 5px solid #fff;
}
#total-score .list_score_graduate {
    font-size: 100%;
    text-align: left;
    margin: 0 auto 0;
    padding: 0.8em;
    list-style: none;
    position: relative;
    /* width: 90%; */
}
#total-score .list_score_graduate li {
    padding: 0.4em 0.4em 0.4em 1.0em;
    position: relative;
}
.outline_prologue {
    padding: 1em;
}
.floor_kusunoki {
    margin: 0 auto 0.2em;
    padding: 0 ;/* 
    background-image: url(../img/kusunoki_00.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain; */
}
.delay {
	/* じわっと画像が表示される */
 	animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
} 
    /* じわっと画像が表示される */
    @keyframes fadeIn { /*上のbody内で呼び出しているアニメーションと名前をそろえる*/
        0% {opacity: 0} /* 始め */
        100% {opacity: 1} /* 終わり */
    }
    /*古いブラウザ用　*/
    @-webkit-keyframes fadeIn {
        0% {opacity: 0}
        100% {opacity: 1}
    }
#graduate {
    /* width: 85%; */
    /* margin: 12em auto 0; */
    padding: 10.4em 0 6.4em;
    background: #000;
    background-image: url(../img/bg_graduate.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}
#graduate h1 {
    margin: 0;
    padding: 0;
}
.txt_graduate {
    font-size: 100%;
    font-weight: 100;
	color: #00ff00;
    text-align: center;
    margin: 0 auto;
}
.note {
    font-size: 92.9%;
    color: inherit;
    text-align: center;
    margin: 0.4em auto 3.2em;
}
.flex_graduate {
    list-style: none;
    padding: 0;
    width: 60%;
    margin: 0 auto;
}
.flex_graduate li {
    /* margin: 1.6em 0.4em; */
    font-size: 85.7%;
}
.btn_graduate {
    text-align: center;
    margin: 1.6em auto 0;
    cursor: pointer;
    display: block;
    width: 100%;
}
.btn_graduate a {
	color: #fff;
	display: block;
	position: relative;
    text-decoration: none;
}
.btn_graduate a::after {
    content: "\f0a4";
    font-family: FontAwesome;
    position: absolute;
    right: 0.1em;
    top: 0.16em;
}
.btn_graduate-txt {
	color: #fff;
    text-align: center;
    margin-top: 0.4em;
}
.btn_graduate img {
    outline: 3px solid #1200f4;
}
.outline_graduate {
	color: #fff;
	width: 90%;
	margin: 0 auto;
}
.outline_graduate h2 {
    font-size: 100%;
    font-weight: 100;
    color: #00ff00;
    margin: 0 auto 0.4em;
    text-align: center;
}
.outline_graduate strong {
    font-size: 121.4%;
    font-weight: 900;
    color: red;
}
.list_graduate {
    font-size: 92.9%;
    text-align: left;
    margin: 0 auto 3.2em;
    padding: 0 0 0 1.6em;
}
button#score_btn {
    padding: 0;
    background: transparent;
}
.score_graduate {
    color: #fff;
    font-size: 100%;
    /* background-color: rgba(0,206,206,0.3); */
    /* border: #00cece solid 1px; */
    /* border-radius: 4px; */
    text-align: center;
    /* width: 90%; */
    margin: 1.2em auto 0;
    padding: 1em;
}
.score_graduate:last-child {
    padding-bottom: 3.2em;
}
.score_graduate h2 {
    margin: 0.2em 0 0;
    padding: 0;
}
#grate-score .list_score_graduate {
    font-size: 100%;
	text-align: left;
    margin: 0.8em auto 0;
    padding: 0 0 0 0;
	list-style: none;
	position: relative;
	width: 90%;
}
#grate-score .list_score_graduate li {
    padding: 0.4em 0.4em 0.4em 1.0em;
    border-top: dotted 1px #fff ;
    position: relative;
}
#grate-score .list_score_graduate li:last-child {
    border-bottom: dotted 1px #fff ;
}
/* .list_score_graduate li::before {
    content: "\f087";
    font-family: FontAwesome;
    position: absolute;
    left: 0.4em;
    top: 0.6em;
} */
#best-score .list_score_mode {
    font-size: 100%;
    margin: 0.8em auto 4.0em;
    padding: 0 0 0 0;
	list-style: none;
	position: relative;
	width: 90%;
}
#best-score .list_score_mode li {
    margin: 0 auto 0.4em;
}
.player-score {
	float: right;
	font-weight: 700;
	color: #ffff00;
}
.score {
    color: #fff;
    font-size: 342.9%;
    font-weight: 900;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1em;
    margin: 0 auto 0.4em;
}
.score_sml {
    font-size: 100%;
    margin: 0 0 0 1em;
}
.oubo {
    background: #0000ff;
    border-radius: 6px;
    border: 5px solid #fff;
    color: #fff;
    width: 75%;
    margin: 3.6em auto 0;
    padding: 1.2em;
    display: flex;
    flex-direction: column;
}
.oubo_in h3 {
    margin: 0 auto;
    padding: 0;
    max-width: 60%;
}
.txt_oubo_in {
    margin: 0 auto;
    font-size: 93%;
}
.date_oubo {
    margin: 0.4em 0 3.2em;
}
.date_oubo dt {
    padding: 0.1em 0.5em;
    background-color: #00ff00;
    color: #000;
    width: 42%;
    text-align: center;
    font-size: 80%;
}
.date_oubo dd {
    margin: 0.2em 0 0;
    font-size: 80%;
}
.note_oubo {
    color: #000;
    padding: 1.6em;
    background: #fff;
    border-radius: 4px;
    font-size: 80%;
    margin: 0 auto 1em;
}
.note_oubo p {
    text-indent: -1em;
    padding-left: 1em;
    margin: 0;
}
.marker {
    background: linear-gradient(#fff338 60%, #fff338 60%);
    padding: 0 2px;
    font-weight: bold;
    color: #000;
}
.txt_score {
    margin-bottom: 0;
}
/* FOOTER */
.txt_footer {
    color: #fff;
    font-size: 71.4%;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    display: block;
    padding: 0 0 1.6em;
}

/* ==============================================================
 Less than TABLET
================================================================= */
@media screen and (max-width: 979px) {
}
/* ==============================================================
 TABLET
================================================================= */
@media screen and (min-width:768px) and (max-width:959px) {
    .detail_btn { max-width: 70%; }
}
/* ==============================================================
 Less than SP-LANDSCAPE
================================================================= */
@media screen and (max-width:568px) {
}
/* ==============================================================
 SP-LANDSCAPE
================================================================= */
@media screen and (min-width:480px) and (max-width:767px) {
}
/* ==============================================================
 Less than SP-PORTRAIT
================================================================= */
@media screen and (max-width:480px) {
}
/* ==============================================================
 SP-PORTRAIT
================================================================= */
@media screen and (min-width:0px) and (max-width:479px) {
}
/* ==============================================================
 Less than SP-PORTRAIT / iPhone5
================================================================= */
@media screen and (max-width:320px) {
}