@charset "UTF-8";

* {
	margin:0;
	padding:0;
	box-sizing: border-box !important;
}


html, body {
	width:100%;
	height:100%;
}


body {
	font-size:62.5%;
	line-height:1.8rem;
	font-family: 'Noto Sans JP', sans-serif;
	letter-spacing:1px;
	font-feature-settings: "palt";
    background:url("../images/bg_common.gif") repeat top left;
}


.left {text-align:left !important;}
.center {text-align:center !important;}
.right {text-align:right !important;}


.mb-xxsmall {
  margin-bottom: 5px !important;
}
.mb-xsmall {
  margin-bottom: 10px !important;
}
.mb-small {
  margin-bottom: 15px !important;
}
.mb-medium {
  margin-bottom: 30px !important;
}
.mb-large {
  margin-bottom: 50px !important;
}
.mb-xlarge {
  margin-bottom: 80px !important;
}
.mb-xxlarge {
  margin-bottom: 100px !important;
}
.mb-exlarge {
  margin-bottom: 150px !important;
}


.pc {display:block !important;}
.sp {display:none !important;}

@media all and (max-width:560px) {
.pc {display:none !important;}
.sp {display:block !important;}	
}


img {
	vertical-align: bottom;
	width:100%;
}


ul, ol ,li {
	list-style: none;
}


a {
  text-decoration: none;
    transition:all .3s ease;
    opacity:1;
}


table, tr, th, td {
    border:none;
}



#wrapper {
	width:100%;
	height:100%;
	position:relative;
}


/* ページの縦スクロール許可の場合 */
#wrapper_sub {
	width:100%;
	position:relative;
}



/* ボタン設定 */
/* スマホの時に縦1つになる場合 */
.block_btn_group {
	width:100%;
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
}


/* スマホの時でも横並びをキープする場合 */
.block_btn_group2 {
	width:100%;
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
}


.block_btn_group a {
	display:block;
	width:45%;
	padding:1em;
	text-align:center;
	border-radius: 5px;
	margin:0 1.2% 10px;
}

/* ゲームに遷移するためのボタン */
.block_game li .block_btn_group a {
	display:block;
	width:80% !important;
	padding:1em;
	text-align:center;
	border-radius: 5px;
	margin:0 1.2% 10px;
}



.block_btn_group2 a {
	display:block;
	width:25%;
	padding:1em;
	text-align:center;
	border-radius: 5px;
	margin:0 1.2% 10px;
}



.block_btn_group a.checksheet {
    width:52.5% !important;
    font-size:1.1em;
	font-weight:500;
	color:#FFF;
	background: linear-gradient(rgba(0, 185, 250), rgba(1, 97, 234));
	box-shadow: 0 0 5px rgba(0,0,0,.4);
	text-shadow: 0 0 5px rgba(0,0,0,.8);
    border:2px solid #FFF;
}



.block_btn_group a.makecharacter,
.block_btn_group2 a.makecharacter {
	font-size:1.5em;
	font-weight:500;
	color:#FFF;
	background: linear-gradient(rgba(143, 195, 31), rgba(30, 217, 79));
	box-shadow: 0 0 5px rgba(0,0,0,.4);
	text-shadow: 0 0 5px rgba(0,0,0,.8);
}


.block_btn_group a.cancel,
.block_btn_group2 a.cancel {
	font-size:1.5em;
	font-weight:500;
	color:#FFF;
	background: linear-gradient(rgba(130, 139, 146), rgba(91, 99, 102));
	box-shadow: 0 0 5px rgba(0,0,0,.4);
	text-shadow: 0 0 5px rgba(0,0,0,.8);
}


.block_btn_group a.challenge,
.block_btn_group2 a.challenge {
	font-size:1.5em;
	font-weight:500;
	color:#FFF;
	background: linear-gradient(rgba(0, 185, 250), rgba(1, 97, 234));
	box-shadow: 0 0 5px rgba(0,0,0,.4);
	text-shadow: 0 0 5px rgba(0,0,0,.8);
}


.block_btn_group a.giveup,
.block_btn_group2 a.giveup {
	font-size:1.5em;
	font-weight:500;
	color:#FFF;
	background: linear-gradient(rgba(67, 210, 149), rgba(33, 138, 99));
	box-shadow: 0 0 5px rgba(0,0,0,.4);
	text-shadow: 0 0 5px rgba(0,0,0,.8);
}


.block_btn_group a.backToMap,
.block_btn_group2 a.backToMap {
	font-size:1.5em;
	font-weight:500;
	color:#FFF;
	background: linear-gradient(rgba(250, 203, 35), rgba(248, 56, 0));
	box-shadow: 0 0 5px rgba(0,0,0,.4);
	text-shadow: 0 0 5px rgba(0,0,0,.8);
}


.block_btn_group a.retry,
.block_btn_group2 a.retry {
	font-size:1.1em;
	font-weight:500;
	color:#FFF;
	background: linear-gradient(rgba(67, 210, 149), rgba(33, 138, 99));
	box-shadow: 0 0 5px rgba(0,0,0,.4);
	text-shadow: 0 0 5px rgba(0,0,0,.8);
}


@media all and (max-width:768px) {
.block_btn_group2 a {
	display:block;
	width:30%;
	padding:1em;
	text-align:center;
	border-radius: 5px;
	margin:0 1.2%;
}
}



@media all and (max-width:560px) {
.block_btn_group {
	width:100%;
	text-align:center;
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	margin:0;
}
    
    
.block_btn_group2 {
	width:100%;
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
}


.block_btn_group a {
	display:block;
	width:100%;
	padding:1em;
	text-align:center;
	border-radius: 5px;
	margin:0 0 10px;
}


.block_btn_group a:last-child {
	margin:0;
}
    
    
.block_btn_group2 a {
	display:block;
	width:49%;
	padding:1em;
	text-align:center;
	border-radius: 5px;
	margin:0 2% 0 0;
}


.block_btn_group2 a:last-child {
	margin:0;
}
    
    
.block_btn_group a.checksheet {
    width:100% !important;
    font-size:1.1em;
	font-weight:500;
	color:#FFF;
	background: linear-gradient(rgba(0, 185, 250), rgba(1, 97, 234));
	box-shadow: 0 0 5px rgba(0,0,0,.4);
	text-shadow: 0 0 5px rgba(0,0,0,.8);
    border:2px solid #FFF;
}
    
    
.block_btn_group2 a.makecharacter {
	font-size:1.1em;
	font-weight:500;
	color:#FFF;
	background: linear-gradient(rgba(143, 195, 31), rgba(30, 217, 79));
	box-shadow: 0 0 5px rgba(0,0,0,.4);
	text-shadow: 0 0 5px rgba(0,0,0,.8);
}



.block_btn_group2 a.cancel {
	font-size:1.1em;
	font-weight:500;
	color:#FFF;
	background: linear-gradient(rgba(130, 139, 146), rgba(91, 99, 102));
	box-shadow: 0 0 5px rgba(0,0,0,.4);
	text-shadow: 0 0 5px rgba(0,0,0,.8);
}



.block_btn_group2 a.challenge {
	font-size:1.1em;
	font-weight:500;
	color:#FFF;
	background: linear-gradient(rgba(250, 203, 35), rgba(248, 56, 0));
	box-shadow: 0 0 5px rgba(0,0,0,.4);
	text-shadow: 0 0 5px rgba(0,0,0,.8);
}



.block_btn_group2 a.giveup {
	font-size:1.1em;
	font-weight:500;
	color:#FFF;
	background: linear-gradient(rgba(67, 210, 149), rgba(33, 138, 99));
	box-shadow: 0 0 5px rgba(0,0,0,.4);
	text-shadow: 0 0 5px rgba(0,0,0,.8);
}
    

.block_btn_group2 a.backToMap {
	font-size:1.1em;
	font-weight:500;
	color:#FFF;
	background: linear-gradient(rgba(250, 203, 35), rgba(248, 56, 0));
	box-shadow: 0 0 5px rgba(0,0,0,.4);
	text-shadow: 0 0 5px rgba(0,0,0,.8);
}


.block_btn_group2 a.retry {
	font-size:1.1em;
	font-weight:500;
	color:#FFF;
	background: linear-gradient(rgba(67, 210, 149), rgba(33, 138, 99));
	box-shadow: 0 0 5px rgba(0,0,0,.4);
	text-shadow: 0 0 5px rgba(0,0,0,.8);
}
}