* {
  -webkit-user-select: none;     /* テキスト選択無効（iOS Safari対応） */
  -webkit-touch-callout: none;   /* 長押しメニュー無効（iOS Safari対応） */
  user-select: none;             /* その他ブラウザ用 */
  touch-action: manipulation;    /* タップ時の余計な動作抑制 */
}

img, button, .game-area {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ******************チャッチゲーム装飾********************** */
.game-page-inner{
	max-width: 768px;
	width: 100%;
    height: 100%;
	margin: 0px auto;
}

.catch_game_score{
    padding-top: 10px;
	background-image: url(../img/catch/game-score-top.png);
    background-size: cover;
    background-repeat: no-repeat;
    border-bottom: 10px solid #8c6239;
}

.cg_total_record{
	display: flex;
    flex-direction: row;
    align-items: center;
	margin-left: -3px;
    padding: 10px 75px 10px 9px;
    background-image: url(../img/catch/game_score.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    max-width: 365px;
    height: 89px;
	position: relative;
}
	.ch_h_top{
		display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    align-items: flex-start;
	    justify-content: space-between;
	}
		.cg_total_record p,span{
			color: #ffb000;
			text-shadow    : 
		       2px  2px 1px #ffffff,
		      -2px  2px 1px #ffffff,
		       2px -2px 1px #ffffff,
		      -2px -2px 1px #ffffff,
		       2px  0px 1px #ffffff,
		       0px  2px 1px #ffffff,
		      -2px  0px 1px #ffffff,
		       0px -2px 1px #ffffff;
		}
		.cg_total_record p{
		    font-size: 18px;
			padding: 0px 1.64vw 0px 1.35vw;
			letter-spacing : 0px;
		    margin-top: 0.93vw;
		}
			.cg_total_record span{
			    display: inline-block;
			    text-align: center;
			    letter-spacing: 0px;
			    font-size: 60px;
			    min-width: 130px;
			}
		.cg_close_time{
			margin-top: 6px;
		    margin-left: -8px;
		    max-width: 115px;
		    
		}
			.cg_close_time img{
			    max-width: 30.2vw;
			}
			.cg_close_time p{
			    font-size: 51px;
			    font-family: 'digital';
			    line-height: normal;
			    letter-spacing: 6px;
			    text-align: center;
			}
		.cg_guide_btn{
		    max-width: 283px;
		    margin-top: 8px;
		    margin-left: 5px;
		}
		
	.ch_h_bottom{
		display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    align-items: flex-start;
	    justify-content: space-between;
	}
		.cg_page_back {
		    display: block;
		    max-width: 200px;
		    background: #f57f45;
		    padding: 16px 37px;
		    text-align: center;
		    border-top-left-radius: 0px;
		    border-top-right-radius: 40px;
		    border-bottom-right-radius: 40px;
		    border-bottom-left-radius: 0px;
		    border: 4px solid #fff;
		    box-shadow: 5px 6px 10px -5px #000;
		}
			.cg_page_back img{
				max-width: 100%;
			}
		.cg_level_contents{
		    display: flex;
		    flex-direction: row;
		    align-items: center;
		    flex-wrap: nowrap;
		}
			.cg_level_contents{
				
			}
				.cg_level_contents img{
				    max-width: 70px;
				    margin-top: 30px;
				}
				.cg_level_inner{
				    display: flex;
				    width: 121px;
				    height: 121px;
				    text-align: center;
				    border: 10px solid #8c6239;
				    border-radius: 50%;
				    background: #fff;
				    flex-direction: row;
				    flex-wrap: nowrap;
				    justify-content: center;
				    align-items: center;
				    position: relative;
				    z-index: 2;
					margin-top: 10px;
				    margin-bottom: -45px;
				}
					.cg_level_txt{
						width: 137px;
					    font-size: 69px;
						color: #0071bc;
						font-family: "Outfit", sans-serif;
						font-optical-sizing: auto;
						font-weight: 700;
						font-style: normal;
					}
			.cg_item_totals{
			    padding: 5px 2px;
			    margin: -5px 5px 5px 0px;
			    background: #fff;
			    max-width: 295px;
			}
				.cg_item_flex{
				    display: flex;
				    flex-direction: row;
				    flex-wrap: nowrap;
				    align-items: center;
				    justify-content: center;
				}
					.cg_item_score{
					    display: flex;
					    flex-direction: row;
					    align-items: center;
					    align-content: center;
					    flex-wrap: nowrap;
					}
						.cg_item_score img{
						    max-width: 44px;
						    margin-right: 2px;
						}
						.cg_item_score p{
						    min-width: 47px;
						    font-size: 23px;
						    text-align: left;
						    width: 100%;
						    font-family: "Outfit", sans-serif;
						    font-optical-sizing: auto;
						    font-weight: 700;
						    letter-spacing: 2px;
						}
	.game-area{
	    position: relative;
	    width: 100%;
        height: 84%;
	    overflow: hidden;
		z-index: 2;
	}
	.catch_game_canvas{
		height: calc(100vh - 30vw);
		background-image: url(../img/catch/catch_back.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;
	}
	
	.cg_hit_detection{
		width: 165px;
	    height: 165px;
	    position: absolute;
	    bottom: 10px;
	    left: 50%;
	}
		.cg_hit_detection img{
			width: 120%;
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%, -50%);
		}
.cg_move_btn{
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: calc(100% - 84%);
	/*position: absolute;
	left: 50%;
	transform: translate(-50%, 0px);
	bottom: 10px;*/
}

.cg_move_right,
.cg_move_left{
    background: #fff;
    border-radius: 22px;
    border: 6px solid #b3b3b3;
    padding: 10px 20px;
    width: 135px;
    margin: 0px 20px;
}

    .game-stop-btn {
        max-width: 65px;
        position: absolute;
        top: 5px;
        right: 6px;
        z-index: 3;
    }

.cg_move_right img,
.cg_move_left img{
	-webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
    touch-action: manipulation;
}

			.bonus_score_txt{
				opacity: 0;
			    transition: opacity 0.5s ease;
			    position: absolute;
			    /* background: #fff; */
			    background: #ffc100;
			    border-radius: 50px;
			    top: 77px;
			    left: 55px;
			    z-index: 3;
			    pointer-events: none;
			}
			.bonus_show {
				opacity: 1;
			}
				.bonus_score_txt p{
					font-size: 44px;
				    padding: 10px 20px;
				    text-shadow: unset;
				    color: #fff;
				    display: flex;
				    flex-direction: row;
				    align-items: center;
				    margin: 0px;
				}
					.bonus_score_txt span{
					    text-shadow: unset;
					    color: #fff;
					    font-size: 18px;
					    min-width: unset;
					    margin: 0px 10px 0px 0px;
					    line-height: 22px;
					}
	
@media screen and (max-width: 700px){
	.cg_total_record{
		padding: 10px 65px 10px 9px;
	}
		.cg_total_record p{
		    font-size: 19px;
		}
		.cg_total_record span{
		    font-size: 53px;
		    min-width: 100px;
		}
	.cg_guide_btn{
	    margin-top: 0px;
	}
	.cg_page_back{
		max-width: 155px;
        padding: 15px 19px;
	}
	.cg_item_totals{
	    margin-top: -15px;
	}
	.cg_level_contents img{
		max-width: 7vw;
	}
	.cg_level_inner{
        width: 100px;
        height: 100px;
        margin-top: 0px;
	}
	.cg_level_txt{
		width: unset;
	}
	
	.cg_item_score img{
        max-width: 37px;
	}
	.cg_item_score p{
        font-size: 21px;
	}
}
@media screen and (max-width: 600px){
	
	.catch_game_score{
	    padding-top: 1.14vw;
	    border-bottom: 1.5vw solid #8c6239;
        /*min-height: 14.5dvh;*/
        min-height: 14.1%;
        position: relative;
        z-index: 3;
	}
	
	.cg_total_record{
		min-width: 47.5vw;
        height: auto;
		margin-left: -0.7vw;
	    padding: 10px 0px 10px 9px;
	}
			.cg_total_record p{
			    font-size: 3.4vw;
				padding: 0px 1.64vw 0px 1.35vw;
			    margin-top: 0.93vw;
			}
				.cg_total_record span{
					font-size: 10.5vw;
				    min-width: 19.7vw;
				}
			
			/*.bonus_score_txt{
				opacity: 0;
				transition: opacity 0.5s ease;
			    position: absolute;
			    background: #fff;
			    border-radius: 10vw;
				top: 14.5vw;
		        left: 7vw;
			    z-index: 3;
				pointer-events: none;
			}
			.bonus_show {
				opacity: 1;
			}
				.bonus_score_txt p{
					font-size: 5.5vw;
				    padding: 1vw 3vw;
				    display: flex;
				    flex-direction: row;
				    align-items: center;
				    margin: 0px;
				}
					.bonus_score_txt span{
						font-size: 2.6vw;
					    min-width: unset;
					    margin: 0px 2vw 0px 0px;
					    line-height: 3vw;
					}*/
			.bonus_score_txt{
				opacity: 0;
				transition: opacity 0.5s ease;
			    position: absolute;
			    /*background: #fff;*/
			    background: #ffc100;
			    border-radius: 10vw;
				top: 14.5vw;
		        left: 7vw;
			    z-index: 3;
				pointer-events: none;
			}
			.bonus_show {
				opacity: 1;
			}
				.bonus_score_txt p{
					font-size: 6.5vw;
				    padding: 1vw 4vw;
					text-shadow: unset;
				    color: #fff;
				    display: flex;
				    flex-direction: row;
				    align-items: center;
				    margin: 0px;
				}
					.bonus_score_txt span{
					    text-shadow: unset;
					    color: #fff;
					    font-size: 3vw;
					    min-width: unset;
					    margin: 0px 2vw 0px 0px;
					    line-height: 3vw;
					}
			
			.cg_close_time{
				margin-top: 1.15vw;
			    margin-left: -1.85vw;
			    
			}
				.cg_close_time img{
				    max-width: 30.2vw;
				}
				.cg_close_time p{
					min-width: 16.4vw;
				    font-size: 8.8vw;
					letter-spacing: 0.6vw;
				    line-height: 8.14vw;
				}
			
			.cg_guide_btn{
			    margin-top: 1.15vw;
			    margin-left: 0.69vw;
			}
			
			.cg_page_back {
			    max-width: 28.8vw;
				padding: 2.6vw 4.9vw;
			    border-top-right-radius: 5vw;
			    border-bottom-right-radius: 5vw;
			    border: 0.6vw solid #fff;
			    box-shadow: 1vw 1.2vw 1.2vw -1.2vw #000;
			}
					.cg_level_contents img{
					    max-width: 9.5vw;
					    margin-left: 0.93vw;
				        margin-top: 3.3vw;
					}
					.cg_level_inner{
						width: 17.7vw;
					    height: 17.7vw;
					    border: 1.5vw solid #8c6239;
					    margin-bottom: -6.9vw;
					    margin-top: -1.7vw;
					}
						.cg_level_txt{
						    font-size: 11vw;
						}
				.cg_item_totals{
					padding: 0.68vw 1.15vw;
				    margin-left: 2.75vw;
					margin-top: -1.15vw;
				}
					.cg_item_score{
					    min-width: 12.05vw;
					}
					.cg_item_score img{
						max-width: 5.27vw;
					    margin-right: 0.46vw;
					}
					.cg_item_score p{
				        font-size: 3vw;
				        letter-spacing: 0.1vw;
				        min-width: 3vw;
					}
		
		.catch_game_canvas{
	        /*height: calc(100vh - 15.5vh);*/
	        /*height: calc(100vh - 14.4%);*/
			height: 85.3%;
			background-image: url(../img/catch/catch_back.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
		
		.game-area{
		    position: relative;
		    width: 100%;
		    /*height: 72vh;*/
	        height: 84%;
		    overflow: hidden;
			z-index: 2;
		}
		
		.cg_hit_detection{
			/*width: 130px;*/
			width: 29vw;
		    /*height: 130px;*/
		    height: 29vw;
		    /*border: 3px solid #ddd;*/
		    position: absolute;
	        bottom: 1vw;
		    left: 32%;
		    /*transform: translate(-50%, 0px);*/
		    /*overflow: hidden;*/
		}
			.cg_hit_detection img{
				width: 125%;
			    position: absolute;
			    top: 50%;
			    left: 50%;
			    /*transform: translate(-50%, -50%);*/
				-webkit-user-drag: none;
				user-select: none;
				pointer-events: none;
				touch-action: manipulation;
			}
		.game-stop-btn{
			/*max-width: 65px;*/
	        max-width: 14vw;
	        position: absolute;
	        /*top: 5px;*/
	        top: 1vw;
	        /*right: 6px;*/
	        right: 1.5vw;
	        z-index: 3;
		}
		.cg_move_right,
		.cg_move_left{
		    background: #fff;
		    border-radius: 5vw;
			border: 1.5vw solid #b3b3b3;
		    padding: 2.5vw 7vw;
			width: 31vw;
		    margin: 0px 2vw;
		}
	
}
@media screen and (max-width: 480px){
	.cg_item_score img{
        max-width: 6.27vw;
	}
	.cg_item_totals{
        margin-top: -3.15vw;
	}
	.cg_move_btn{
	    bottom: 2vw;
	}
}