#content {
    padding: 100px 0 200px;
    width: calc(100% - 125px); 
    background: #C6F0FF;
}
@media only screen and (max-width:768px){
    #content { width: 100%;}
}
@media only screen and (max-width:468px){
}


/* タイトル */
#game h1 {
    margin-bottom: 50px;
    font-family: "Righteous", sans-serif;
	font-weight: 600;
    text-align: center;
    color: #000;
}
#game h1 b,
#game h1 small { display: block;;}
#game h1 b img { margin: 0 auto 20px; width: auto; height: 100px;}
#game h1 small { font-size: 50px;}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
    #game h1 b img { height: 70px;}
    #game h1 small { font-size: 40px;}
}


/* 難易度選択ボタン */
#game .choice { display: flex; flex-direction: column; justify-content: center; gap:20px; text-align: center;}
#game .choice h2 { font-size: 125%;}
#game .choice ul { display: flex; justify-content: center; gap:20px; margin: auto; max-width: 600px; min-width: 400px;}
#game .choice ul li { width: calc(100% / 3);}
#game .choice ul a {
    display: block;
    padding: 20px 0;
    color: #000;
    background: #fff;
    border-radius: 15px;
}
#game .choice ul a.active { color: #fff; background: #4CACDC;}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
}


/* ゲームコンテンツ */
#game .game_box {
    display: flex; flex-direction: row-reverse; gap:40px;
    margin: auto; padding: 20px;
    max-width: 1000px;
}
#game .game_box .cont_l {
    position: relative; width: 600px;
}
#game .game_box .cont_r {
    display:flex; flex-direction: column; flex-wrap: wrap; gap:15px;
    margin:0 auto 20px;
    width: calc(100% - 600px - 40px);
}
#game .game_box .mihon {
    position: relative;
    display:flex; flex-direction: column; gap:15px;
    padding: 20px;
    background: #fff;
    border-radius: 20px;
}
#game .game_box .mihon img { width:100%; height: auto;}
#game .game_box .mihon::before {
    position: absolute; top: 0; left: 0; z-index: 9;
    display: block; clear: both; content:"";
    width: 70px; height: 70px;
    background: url("../image/mihon.png") no-repeat;
    background-size: 100% auto;

}
#game .game_box .btn_cont {
    display:flex; flex-direction: column; flex-wrap: wrap; gap:10px;
}
#game .game_box #shuffle {
    cursor: pointer;
    display: block;
    padding: 25px 0;
    text-indent: -9999px;
    background: url("../image/btn_shuffle.jpg") no-repeat center center;
    background-size: cover;
    border-radius: 20px;
    border: none;
}
#game .game_box #timer { font-size: 130%;}
#game .game_box #timer p { display: block;}
#game .game_box #shareBtn,
#game .game_box #restartBtn,
#game .game_box #nextBtn {
    border: none;
    border-radius: 8px;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}
#game .game_box #shareBtn {
    cursor: pointer; z-index: 99;
    padding: 10px 20px;
    font-family: 'Noto Sans JP', "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 87.5%;
    color:#000;
    background: #fff url("../image/icon_x.svg") no-repeat 10px center;
    background-size: 20px auto;
}
#game .game_box #restartBtn {
    padding: 10px 20px;
    font-family: 'Noto Sans JP', "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 87.5%;
    color: white;
    background:#777;
}
#game .game_box #nextBtn a {
    display: block;
    padding: 10px 20px;
    font-size: 87.5%;
    text-align: center;
    color: white;
    background: #c10000;
    box-sizing: border-box;
}
#game #startOverlay {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    padding:40px;
    font-size: 20px;
    background: orange;
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
}

@media (min-width: 768px) {
    #game .game_box #shuffle:hover { opacity: 0.7;}
    #game .game_box #nextBtn a:hover { opacity: 0.7; text-decoration: underline;}
}
@media (max-width: 950px) {
    #game .game_box { flex-direction: column;}
    #game .game_box .cont_l { margin: auto; width: 420px;}
    #game .game_box .cont_r { width:420px; flex-direction: row;}
    #game .game_box .mihon { width: 45%; padding: 10px; gap:10px;}
    #game .game_box .btn_cont { width: 50%; gap:5px;}
    #game .game_box #shuffle { width:100%; max-width: 300px; height: 70px; }
    #game .game_box #timer { font-size:100%;}
}
@media (max-width: 468px) {
    #game .game_box {gap:20px;}
    #game .game_box .cont_l { margin: auto; width: 400px;}
    #game .game_box .cont_r { margin-bottom: 0; width:400px; flex-direction: row; font-size: 87.5%;}
    #game .game_box .mihon { width:60%; padding: 5px;}
    #game .game_box .btn_cont { width: 35%; gap:5px;}
    #game .game_box #shuffle { height:60px; }
    #game .game_box #shareBtn,
    #game .game_box #restartBtn,
    #game .game_box #nextBtn a { padding: 5px 10px;}
    
    #game #startOverlay {
        padding:30px;
        font-size: 16px;
    }
}








/* クリアメッセージ */
#game #message {
    position: absolute; top: 0; left:0; right:0; bottom:0;
    display:flex; flex-direction: column; justify-content: center; align-content: center;
    margin: auto; padding:40px;
    width:100%; height:100%;
    background: rgba(255,255,255,0.90);
    z-index: 10;
    user-select: none;
}
#game #message .tit { position: relative; padding-top: 50px;}
#game #message .tit p:nth-child(1) { position: absolute; top: 0; left: 0;}
#game #message .tit p:nth-child(2) { position: relative; z-index: 999;}
#game .bounce { animation: bounce 0.4s ease;}
@keyframes bounce {
    0% { transform: scale(0.5, 0.5);}
    50% {transform: scale(1.3, 1.3);}
    100% {transform: scale(1.0, 1.0);}
}









/* パズル部分 */
#game #puzzle {
    position: relative;
    display: flex; flex-wrap: wrap;
    margin: auto;
    width: 600px; max-width: 600px;
    height: 600px;
}
#game #puzzle.complete_easy {
    background: url("../image/puzzle_level1.jpg") no-repeat center center !important;
    background-size: 100% auto !important;
}
#game #puzzle.complete_normal {
    background: url("../image/puzzle_level2.jpg") no-repeat center center !important;
    background-size: 100% auto !important;
}
#game #puzzle.complete_hard {
    background: url("../image/puzzle_level3.jpg") no-repeat center center !important;
    background-size: 100% auto !important;
}
#game #puzzle.complete_expert {
    background: url("../image/puzzle_level4.jpg") no-repeat center center !important;
    background-size: 100% auto !important;
}
#game #puzzle.complete_nightmare {
    background: url("../image/puzzle_level5.jpg") no-repeat center center !important;
    background-size: 100% auto !important;
}
#game .tile_easy {
    width: calc(600px / 2);
    height: calc(600px / 2);
    background-size: 600px 600px;
    background-image: url("../image/puzzle_level1.jpg");
}
#game .tile_normal {
    width: calc(600px / 3);
    height: calc(600px / 3);
    background-size: 600px 600px;
    background-image: url("../image/puzzle_level2.jpg");
}
#game .tile_hard {
    width: calc(600px / 4);
    height: calc(600px / 4);
    background-size: 600px 600px;
    background-image: url("../image/puzzle_level3.jpg");
}
#game .tile_expert {
    width: calc(600px / 5);
    height: calc(600px / 5);
    background-size: 600px 600px;
    background-image: url("../image/puzzle_level4.jpg");
}
#game .tile_nightmare {
    width: calc(600px / 6);
    height: calc(600px / 6);
    background-size: 600px 600px;
    background-image: url("../image/puzzle_level5.jpg");
}
#game .tile_easy,
#game .tile_normal,
#game .tile_hard,
#game .tile_expert,
#game .tile_nightmare {
    box-sizing: border-box;
    border: 1px solid #999;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: background 0.2s;
}
#game .tile:hover { background-color: #ccc;}
#game .empty {
    background:#fff;
    background-image: none;
    border: none;
    cursor: default;
}
#game #puzzle .empty.cleared { background: rgba(255,255,255,0);}
@media (max-width: 950px) {
    #game #puzzle {
      width: 420px;
      height: 420px;
    }
    #game .tile_easy {
        width: calc(420px / 2);
        height: calc(420px / 2);
        background-size: 420px 420px;
    }
    #game .tile_normal {
        width: calc(420px / 3);
        height: calc(420px / 3);
        background-size: 420px 420px;
    }
    #game .tile_hard {
        width: calc(420px / 4);
        height: calc(420px / 4);
        background-size: 420px 420px;
    }    
    #game .tile_expert {
        width: calc(420px / 5);
        height: calc(420px / 5);
        background-size: 420px 420px;
    }    
    #game .tile_nightmare {
        width: calc(420px / 6);
        height: calc(420px / 6);
        background-size: 420px 420px;
    }    
}
@media (max-width: 468px) {
    #game #puzzle {
      width: 400px;
      height:400px;
    }
    #game .tile_easy {
        width: calc(400px / 2);
        height: calc(400px / 2);
        background-size: 400px 400px;
    }
    #game .tile_normal {
        width: calc(400px / 3);
        height: calc(400px / 3);
        background-size: 400px 400px;
    }
    #game .tile_hard {
        width: calc(400px / 4);
        height: calc(400px / 4);
        background-size: 400px 400px;
    }
    #game .tile_expert {
        width: calc(400px / 5);
        height: calc(400px / 5);
        background-size: 400px 400px;
    }    
    #game .tile_nightmare {
        width: calc(400px / 6);
        height: calc(400px / 6);
        background-size: 400px 400px;
    }  }