* { padding:0; margin:0; }

#container {
    display: flex;
    justify-content: center;
    align-items: center;
    position:relative;
    height:100%;
    min-height:100vh;
    /*background-color:#9d9e9a;*/
    background: -moz-linear-gradient(bottom, #9d9e9a 50%, #FFF);
    background: -webkit-linear-gradient(bottom, #9d9e9a 50%, #FFF);
    background: linear-gradient(to bottom, #9d9e9a 50%, #FFF);
}

/* header */
#header {
    position:fixed;
    top:20px;
    right:20px;
}

#header nav > ul {
    overflow:hidden;
}
#header nav > ul > li {
    float:left;
}
#header nav > ul > li + li {
    margin-left:15px;
}

/* game style override */
#container #spSiteHeaderContainer {
    display:none;
    position:fixed;
    z-index:9800;
}

#container #spSiteHeaderContainer nav {
    text-align:right;
}

#container #spSiteHeaderContainer nav > ul {
    display:inline-block;
    overflow:hidden;
    text-align:left;
    padding-top:10px;
    padding-right:10px;
}
#container #spSiteHeaderContainer nav > ul > li {
    float:left;
}
#container #spSiteHeaderContainer nav > ul > li + li {
    margin-left:15px;
}

#credit {
    padding-top:15px;
    border-top: solid 1px #ccc;
    margin-top:15px;
}
#credit .credit {
    font-size: 75%;
}
#credit ul {
    overflow: hidden;
}
#credit ul li {
    float: left;
}

#credit ul li + li {
    padding-left: 1em;
    border-left: solid 1px #ddd;
    margin-left: 1em;
}

/* icon button */
.iconBtn {
    width:50px;
    height:50px;
    border-radius:50%;
    background-color:#2b7795;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    transition:.2s;
}
a.iconBtn {
    display:inline-block;
    cursor:pointer;
}
.iconBtn:hover {
    opacity:.7;
}
.iconBtn.home {
    background-image:url(../img/site/icon-home.png);
    background-size: 56%;
}
.iconBtn.information {
    background-image:url(../img/site/icon-information.png);
    background-size: 26%;
}
.iconBtn.history {
    background-image:url(../img/site/icon-history.png);
    background-size: 42%;
}

/* media */
.media.sp {
    display:none;
}

.keyInformation {
    margin-top:10px;
    text-align:center;
    color:#FFF;
}


/**
 *    Modal [controle information]
 **/
.modal-controle-information .modaal-container {
    background-color: transparent;
}

/**
 *    Modal [version history]
 **/
.modal-version-history article {
    line-height:1.8em;
}

.modal-version-history .modal-body {
    max-height: 560px;
    overflow-y: scroll;
}

.modal-version-history .version-lavel {
    padding:2px 5px;
    border-radius:3px;
    line-height:1em;
    font-size:90%;
    font-weight:bold;
    background-color:#000;
    color:#FFF;
}

.modal-version-history article h1 {
    display:inline-block;
    margin:0 auto;
    font-size:160%;
    line-height:1em;
}

.modal-version-history .article-title-wrap {
    padding-bottom:5px;
    border-bottom:solid 1px #333;
    margin-bottom:20px;
}

.modal-version-history article h1 + .with {
    display:inline-block;
    margin-left:2px;
    font-size:90%;
}

.modal-version-history article h2 {
    margin:0 auto 20px;
    font-size:110%;
}

.modal-version-history article h2.mb0 {
    margin-bottom:0;
}

.modal-version-history article h2::before {
    display:inline;
    content:'â–¼';
}

.modal-version-history article .desc {
    margin-top: 5px;
    margin-bottom: 20px;
}

.modal-version-history article .note {
    display: block;
    font-size: 85%;
    line-height: 1.8em;
    color:#555;
    text-indent: -1em;
    margin-left: 1em;
}

.modal-version-history article section + section {
    padding-top:20px;
    border-top:solid 1px #eee;
    margin-top:20px;
}

.modal-version-history .version-list > li + li {
    margin-top:15px;
}

.modal-version-history .version-list > li > dl {
    overflow:hidden;
}

.modal-version-history .version-list > li > dl > dt {
    margin-bottom: 5px;
    font-weight:bold;
}

.modal-version-history .version-list > li > dl > dt .version-lavel {
    margin-right:.5em;
}

.modal-version-history .version-child-list > li {
    margin-left:1em;
    text-indent:-1em;
    line-height:1.6em;
}

.modal-version-history .version-child-list > li::before {
    display:inline;
    content:"・";
}

.modal-version-history .version-child-list > li + li {
    margin-top:5px;
}

.modal-version-history .version-archive-list > li {
    display: inline-block;
    margin: 0 5px 15px;
}

.modal-version-history .version-link {
    display: inline-block;
    border:solid 1px #ccc;
    border-radius: 3px;
    line-height: 1rem;
    font-weight: bold;
}

.modal-version-history .version-link a {
    display: block;
    padding:12px 15px 10px 10px;
    transition: .2s;
}

.modal-version-history .version-link a:hover {
    background-color: #eee;
}

.modal-version-history .version-link a::before {
    display: inline-block;
    content:"▶︎";
    padding-right:.5em;
    font-size: 90%;
}

#footer {
    width:100%;
    position:absolute;
    bottom:0;
    padding:40px 0;
    color:#eee;
}

#footer a {
    color:#eee;
}

#footer .copyright {
    text-align:center;
    font-size:85%;
}