@charset "utf-8";
/**初期設定**/
*{
    margin:0;
    padding:0;
    font:1em "メイリオ", Meiryo, Verdana, YuGothic, "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN",sans-serif;
}
html{
    height:100%;
    -webkit-text-size-adjust:100%;
    -webkit-tap-highlight-color: transparent;
}
body {
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
#jsng {
    margin:0 auto;
    text-align: center;
}
a {
    text-decoration: none;
}
#contents {
    margin: 0 auto;
    padding-top:10px;
    width:320px;
    height:550px;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
    touch-action: none; /* ピンチイン・ピンチアウトを無効にする */
    -ms-touch-action: none; /* IEとEdgeのために追加 */
    zoom: reset; /* IEとEdgeのために追加 */
    -ms-content-zooming: none; /* IEとEdgeのために追加 */
    user-zoom: fixed; /* iOS Safari のために追加 */
    -ms-user-zoom: none; /* IEとEdgeのために追加 */
    -webkit-text-size-adjust: none; /* Safariのテキストサイズの自動調整を無効にする */
    -webkit-user-drag: none; /* iOS Safari でのドラッグを無効にする */
}
canvas {
    width:320px;
    height:540px;
    outline: none;
    border:solid 1px #fff;
}
#header {
    position: relative;
    top:-544px;
    display: none;
    justify-content:space-between;
    width: 310px;
    margin: 0 5px;
}
#panel-splash {
    position: relative;
    top:-400px;
    background: url("../img/splash.svg") no-repeat 0 0/323px 243px;
    width: 320px;
    height: 1080px;
}
#panel-ready,
#panel-play,
#panel-clear,
#panel-game-over {
    position: relative;
    display: none;
    text-align: center;
}
#panel-ready,
#panel-play {
    top:-102px;
}
#panel-game-over {
    top:-186px;
}
#panel-clear {
    top:-198px;
}
/*ボタン*/
a.button {
    display: block;
    text-align: center;
}
button,
.button {
    margin: 0 5px;
    padding: 10px;
    cursor: pointer;
    border-radius: 6px;
    border: solid 1px #ccc;
    font-weight: 500;
    letter-spacing: .2em;
}
.blueBtn {
    color: #fff !important;
    background-color: #337ab7;
}
.greenBtn {
    color: #fff !important;
    background-color: #3cb371;
}
.grayBtn {
    color: #000 !important;
    background-color: #f5f5f5;
}
.orangeBtn {
    color: #fff !important;
    background-color: #f0ad4e;
}
.redBtn {
    color: #B20000 !important;
    background-color: #F9EBEB;
}
.se-check input {
    display: none;
}
.se-check input + .se-text::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 26px;
    vertical-align: middle;
    background-size: auto, 100%;
    background-repeat: no-repeat, no-repeat;
    background-image: none, url("../img/ico_sound_off.svg");
}
.se-check input:checked + .se-text::before {
    background-image: none, url("../img/ico_sound_on.svg");
}
#start {
    background: url("../img/button_rady.svg") no-repeat 0 0/300px 80px;
    width: 300px;
    height: 80px;
    border: none;
}
#clear {
    background: url("../img/button_clear.svg") no-repeat 0 0/300px 80px;
    width: 300px;
    height: 80px;
    border: none;
    margin:0 auto;
    display: block;
}
#replay {
    background: url("../img/button_game_over.svg") no-repeat 0 0/300px 80px;
    width: 300px;
    height: 80px;
    border: none;
}
.leftBtn {
    background: url("../img/ico_left.svg") repeat-x 0 0/64px 64px;
    width: 64px;
    height: 64px;
    white-space: nowrap;
    overflow: hidden;
    border:none;
    user-select: none;
    display: inline-block;
    margin: 0 18px;
    opacity: 0.9;
}
.rightBtn {
    background: url("../img/ico_right.svg") repeat-x 0 0/64px 64px;
    width: 64px;
    height: 64px;
    white-space: nowrap;
    overflow: hidden;
    border:none;
    user-select: none;
    display: inline-block;
    margin: 0 18px;
    opacity: 0.9;
}
#itemHiScore,
#label-hi-score,
#itemScore,
#label-score,
#itemTimer,
#label-timer {
    color: #fff;
    user-select: none;
    font-size: 12px;
}
#label-hi-score,
#label-score,
#label-timer {
    display: inline-block;
    width: 60px;
}