@charset "utf-8";
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
a:link, a:visited, a:hover, a:active {
  text-decoration: none;
  cursor: pointer;
}
html {
  font-size: 62.5%;
  line-height: 1.6;
}
body {
  margin:0 auto;
  background:#E5DECA;
  color: #333;
  font-size: 1.6rem;
  line-height: 1.7;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
h3{
    padding:0.2em 0.5em 0;
}
section{
    margin:1em 0;
    border-top:1px solid #0A3956;
    background:#fff;
}
code{
    display:block;
    font-family: "Gothic ProN";
    background:#0A3956;
    color:#fff;
    margin:0;
    padding:0.5em;
    width:100%;
    min-width:100px;
}
/*ID*/
.game_display{
    display:flex;
    flex-direction:row-reverse;
    margin:0 auto;
    width:480px;
}
#stage{
    width:240px;
    height:480px;
    position:relative;
    margin:1em auto 0;
    background:url("../img/puyo_4bg.png")no-repeat;
    background-position:left bottom;
    overflow:hidden;
}
#next{
    margin:1em auto 0;
    overflow:hidden;
    position:relative;
}
/*クラス*/
.header{
    display:flex;
    flex-direction:column;
    background:#0A3956;
    position:relative;
    min-height:160px;
}
.site_title{
    margin:0.5em;
    padding:0 1em;
    color:#fff;
    font-size:1.4rem;
    border-radius:10px;
    line-height:60px;
    position:absolute;
    left:0;
}
.sega_link{
    margin:0.5em;
    padding:0 1em;
    background:#fff;
    border-radius:10px;
    line-height:60px;
    position:absolute;
    right:0;
    bottom:0;
}
.sega_link:hover{
    background:#ccc;
}
/*ゲーム*/
.game_play{
    background:#000;
    color:#fff;
    padding:0.5em;
    min-height:600px;
}
.game_title{
    width:300px;
    margin:2em auto;
    text-align:center;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
}
#score{
    position:relative;
    margin:0 auto;
    overflow:hidden;
    text-align:right;
}
.section_title{
    margin:0;
    padding:0 0.5em;
    background:#7E9374;
    color:#E5DECA;
}
.keyword{
    margin:0 0.5em;
    padding:0;
}
.keyword dt{
    padding:0 0.5em;
    background:#4A7664;
    color:#E5DECA;
    font-size:2.0rem;
}
.keyword dd{
    padding:0.2em 1em;
}
/*フッター*/
footer{
    background:#0D3B2B;
    color:#E5DECA;
    margin:0;
    padding:0.5em;
}
.footer_list li a{
    display:block;
    color:#E5DECA;
    padding:0 0 0 1em;
    transition:0.2s;
}
.footer_list li a::before{
    content:'▼ ';
}
.footer_list li a:hover{
    background:#4A7664;
}
.footer_list li a:hover:before{
        content:'▶ ';
}
.current a{
    background:#3F5444;
}
/*コード入力*/
.code_title{
    border-left:40px solid #4A7664;
}
/*コード_テキストカラー*/
.gray{
    color:#ccc;
}
.red{
    color:#F29EA2;
}
.red_bold{
    font-weight:bold;
    color:#B2291C;
}
.red_marker{
    background:#C77665;
    border-radius:8px;
    color:#FFFCDB;
    padding:0 0.5em;
}
.green{
    color:#A5D4AD;
}
.blue{
    color:#84c0DA;
}
.site_menu{
    background:#7E9374;
    color:#E5DECA;
    padding:0.5em;
}
.site_menu li{
    list-style:none;
}