@charset "UTF-8";
/*
* 共通
*/
html {
  touch-action: manipulation;
}
body {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
	font-size:16px;
	color:#000;
	width:100%;
	height:100%;
	background:#333;
}
.mincho {
	font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
p,ul,li{
	margin:0;
	padding:0;
}
a{
	text-decoration:none;
}

a:hover{
	opacity:0.8;
	text-decoration:none;
}
.table th, .table td{
	padding:0.25rem;
}
.table thead th{
	font-size:0.75em;
	vertical-align:middle;
}
.sp_only{
	display:none !important;
}
.pc_only{
	display:block !important;
}
.top:after{
	background:none;
	height:0;
}
footer{
	width:100%;
	margin:40px 0;
	border-top:#0e357f solid 3px;
}
footer p{
	text-align:center;
	padding:10px;
	font-size:12px;
}
footer p img{
	max-width:130px;
}
.wrap{
	max-width:1800px;
	width:96%;
	margin:0 auto;
}
.wrap2{
	width:96%;
	margin:0 auto;
}
.wrap2 .container{
	max-width:100%;
}
.rs_img{
	width:100%;
}
.mobile-navigation, .pure-drawer{
	display:none;
}
input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px white inset;

}
.table1{
	max-width:615px;
	width:100%;
	border:none;
	margin:0 auto;
}
.table1 th{
	background:#efefef;
	width:9em;
	padding:1em;
	text-align:left;
	font-weight:normal;
	border:1px solid #9fa0a0;
	vertical-align:top
}
.table1 td{
	text-align:left;
	padding:1em;
	border:1px solid #9fa0a0;
}
.table2{
	max-width:510px;
	width:100%;
	border:none;
	margin:0 auto;
}
.table2 th{
	width:7em;
	padding:1em;
	text-align:left;
	font-weight:normal;
	white-space:nowrap;
}
.table2 td{
	text-align:left;
	padding:1em;
}
textarea.form-control{
	height:7.5em;
}

#wrapper {
    position: absolute;
    width:900px;
    height:auto;
    background:#fff;
    position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	aspect-ratio: 4 / 3;
}
#wrapper2 {
    position: absolute;
    width:900px;
    height:auto;
    background:#fff url("../images/bg02.png") ;
    background-size: cover;
    position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	aspect-ratio: 4 / 3;
}
#wrapper3 {
    position: absolute;
    width:900px;
    height:auto;
    background:#fff url("../images/bg04.png") ;
    background-size: cover;
    position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	aspect-ratio: 4 / 3;
}
#wrapper.tapping{
    background:#fff url("../images/bg05.png") ;
    background-size: cover;
    position:fixed;
}
.game #wrapper.tapping{
    background:#fff;
}
/*
* ここからサイト毎
*/
.flexcnt{
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.aligncenter{
	align-items:center;
}
.fit_contain{
	object-fit: contain;
	width:100%;
	height:100%;
}
header{
	background:#12266C;
	height:10%;
	padding:0.5rem 0;
	text-align:left;
	margin:0;
}
header img{
	object-fit: contain;
	width:100%;
	height:100%;
	padding-right:60%;
}

.btn01{
	display:block;
	width:90%;
	margin:1rem auto;
	height:50%;
	background:#1558A7;
}
.btn01 img{
	padding:1rem;
}
.btn02{
	display:block;
	width:90%;
	margin:1rem auto;
	height:25%;
	background:#E59C13;
}
.btn02 img{
	padding:2rem 5rem;
}
.menu_head{
	height:10%;
	width:100%;
	background:#fff;
	position:relative;
}
.btn_return{
	width:10%;
	height:100%;
	position:absolute;
	top:1%;
	left:2rem;
}
.ttl03{
	padding:1rem;
}
.bg_head{
	position:absolute;
	top:98%;
	left:0;
	width:100%;
	height:auto;
}
.menu_wrapper{
	margin:10% auto 0;
	width:90%;
}
.menu_wrapper > p{
	width:45%;
	text-align:center;
	margin-bottom:5%;
}
.menu_wrapper2{
	margin:2% auto 0;
	width:90%;
}
.menu_wrapper2 > p{
	width:22%;
	text-align:center;
	margin-bottom:1%;
	font-size:1rem;
	font-weight:bold;
	color:#312AB5;
}
.img01{
	padding:1rem;
}
.img02{
	padding:10%;
}
.tapping_head{
	height:10%;
	width:100%;
	position:relative;
    background:#fff url("../images/bg03.png") ;
    background-size: cover;
}
.menu_wrap{
	display:block;
    background:#fff url("../images/bg05.png") ;
    background-size: cover;
	aspect-ratio: 1 / 1;
}
.menu_wrap img{
    padding:2% 10%;
}
.tapping_head3{
	align-items:flex-start;
}
.game_ret, .game_rel{
	width:10%;
}
.board_point{
	width:40%;
	text-indent:20%;
}
.point_txt{
	height:1.5rem;
	display:block;
	margin:1rem 0 0.5rem 3rem;
}
.target_txt{
	height:1.5rem;
	display:block;
	margin:1rem 0 0.5rem 10%;
}
.point_board{
	width:100%;
	display:block;
}
.board_target{
	width:20%;
}
.game_level_wrap{
	width:20%;
}
.game_point{
	font-size:2rem;
	color:#fff;
	font-weight:bold;
	position:absolute;
	top:50%;
	display:block;
	width:100%;
	text-align:right;
    transform: translateY(-50%) translateX(0);
}
.game_point_txt{
	margin:0 1rem 0 3rem;
}
.game_board_wrap{
	position:relative;
	display:block;
}
.board_target{
	position:relative;
}
.game_target{
	background:#5F3606;
	border:#410000 solid 3px;
	display:block;
	width:90%;
	margin-left:10%;
	font-size:2rem;
	color:#fff;
	font-weight:bold;
	text-align:right;
	border-radius:1rem;
	padding:1rem 0;
}
.game_target_txt{
	margin:0 1rem 0 0.5rem;
}
.game_level_wrap{
	position:relative;
	margin-top:3rem;
}
.game_level{
	background:#5F3606;
	border:#410000 solid 3px;
	display:block;
	width:90%;
	margin-left:10%;
	font-size:2rem;
	border-radius:1rem;
	padding:1rem 0 1rem 0.5rem;
	color:#fff;
	font-weight:bold;
	position:relative;
	box-sizing:border-box;
	cursor:pointer;
}
.game_level::after{
	content:"";
	width:0;
	height:0;
	display:block;
	border-top: 1rem solid #fff;
	border-right: 1rem solid transparent;
	border-bottom: 1rem solid transparent;
	border-left: 1rem solid transparent;
	position:absolute;
	top:50%;
	right:0.5rem;
    transform: translateY(-25%) translateX(0);
}
.game_count{
	text-align:center;
	font-size:1.5rem;
	font-weight:bold;
	user-select: none;
}
.game_wrapper{
	padding:1rem 0;
	height:360px;
}
.game_desc{
	background:#fff;
	padding:1rem;
	width:90%;
	margin:1rem auto;
}
.circle_wrap img{
	position:absolute;
	top:50%;
	left:50%;
    transform: translateY(-50%) translateX(-50%);
}
.btn03{
	background:#FFF474;
	border:3px solid #410000;
	color:#410000;
	text-align:center;
	display:inline-block;
	padding:1rem 5rem;
	border-radius:1rem;
	position:absolute;
	top:50%;
	left:50%;
    transform: translateY(-50%) translateX(-50%);
}
#tapping_drawer{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
}
.circle_wrap{
	user-select: none;
}
.demo .tapping_head3, .game .tapping_head3{
	position:absolute;
	width:100%;
	top:0;
	left:0;
	z-index:10;
}
.demo #tapping_drawer, .game #tapping_drawer{
	z-index:2;
}
.demo .game_wrapper, .game .game_wrapper{
	margin-top:10%;
}
.game_start{
	display:none;
}
.result_wrap{
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.5);
	position:absolute;
	top:0;
	left:0;
	display:none;
}
.result1{
	position:absolute;
	top:50%;
	left:50%;
    transform: translateY(-50%) translateX(-50%);
}
.result1 img{
	width:100%;
}
.result2{
	position:absolute;
	top:50%;
	left:50%;
    transform: translateY(-50%) translateX(-50%);
}

.result2 .board_point{
	width:100%;
}

.result .result_wrap{
	display:block;	
}
.btn04{
	background:#FFF474;
	border:3px solid #410000;
	color:#410000;
	text-align:center;
	display:inline-block;
	padding:1rem 5rem;
	border-radius:1rem;
	width:100%;
}
.btn05{
	background:#CCC;
	border:3px solid #410000;
	color:#410000;
	text-align:center;
	display:inline-block;
	padding:1rem 5rem;
	border-radius:1rem;
	width:100%;
}
.result2 .game_point_num{
	font-size:3rem;
	color:#57CBDB;
}
.resultpage{
	background:#fff;
}
.resultpage header{
	padding:1rem 3rem;
}
.resultpage header h1{
	color:#fff;
}
.result_return a, .result_download a, .result_reset a{
	display:block;
	background:#fff;
	padding:1rem 2rem;
}
.resultpage_wrap{
	padding:2rem;
}
@media screen and (max-width: 960px){
}

@media screen and (max-width: 782px){
	
}

@media screen and (max-width: 600px){
}
/*
* 共通
*/
@media screen and (min-width: 576px){
	.col-sm-45 {
		-ms-flex: 0 0 45%;
		flex: 0 0 45%;
		max-width: 45%;
	}
	.col-sm-55 {
		-ms-flex: 0 0 55%;
		flex: 0 0 55%;
		max-width: 55%;
	}
	
}
@media screen and (min-width: 768px){
}

@media (min-width: 1200px){
}