@charset "utf-8";


/*-- 以下PC --*/
@media screen and (min-width: 769px){
/* チュートリアル */
#tutorial .all_wrap{
	display:block;
	min-height:510px;
}
#tutorial .wrap{display:none;}
#tutorial .wrap.active{display:block;}
#tutorial .wrap h2{margin-bottom:15px;}
#tutorial .wrap p.read{
	line-height:150%;
	height:55px;
}
#tutorial .wrap .inner{display:block;}
#tutorial .wrap .inner ul li{
	display:block;
	width:429px;
	float:left;
	padding:9px 0 9px 9px;
	border:#999 solid 1px;
	box-shadow:1px 1px 2px #CCC;
	margin-bottom:10px;
}
#tutorial .wrap .inner ul li:nth-child(1),
#tutorial .wrap .inner ul li:nth-child(3){margin-right:10px;}
#tutorial .wrap .inner ul li img{
	display:inline-block;
	margin-right:15px;
	float:left;
}
#tutorial .wrap .inner ul li p{
	display:inline-block;
	float:left;
	width:220px;
	padding-top:20px;
	font-size:13px;
}
#tutorial .wrap .inner ul li p strong{
	display:block;
	margin-bottom:10px;
	font-size:16px;
}
#tutorial .wrap .btnArea{
	display:block;
	background:#F2F2F2;
	padding:10px 0;
	text-align:center;
}
#tutorial .wrap .btnArea a{
	display:inline-block;
	width:245px;
	text-align:center;
	border:#F36F0C solid 1px;
	border-radius:5px;
	box-shadow:1px 1px 2px #BBB;
	color:#FFF;
	padding:5px 0;
	font-size:14px;
	background: #faa31a;
	background: -moz-linear-gradient(top,  #faa31a 0%, #f47b20 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#faa31a), color-stop(100%,#f47b20));
	background: -webkit-linear-gradient(top,  #faa31a 0%,#f47b20 100%);
	background: -ms-linear-gradient(top,  #faa31a 0%,#f47b20 100%);
	background: linear-gradient(to bottom,  #faa31a 0%,#f47b20 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faa31a', endColorstr='#f47b20',GradientType=0 );
}
#tutorial .wrap .btnArea a:hover{opacity:0.7;}
#tutorial .wrap .btnArea a:nth-child(2){margin-left:10px;}

#tutorial #wrap1 p.read{margin-bottom:40px;}
#tutorial #wrap1 .top_btn{
	display:block;
	background:#F2F2F2;
	padding:50px 0 50px 0;
	text-align:center;
}
#tutorial #wrap1 .top_btn strong{
	display:block;
	margin-bottom:20px;
}
#tutorial #wrap1 .top_btn strong span{display:none;}
#tutorial #wrap1 .top_btn ul li{
	display:inline-block;
	float:left;
	margin-right:8px;
	cursor:pointer;
}
#tutorial #wrap1 .top_btn ul li:first-child{margin-left:60px;}
#tutorial #wrap1 .top_btn ul li:last-child{margin-right:0;}
#tutorial #wrap1 .top_btn ul li:hover img{opacity:0.7;}
#tutorial #wrap2 .inner ul li p strong{color:#056AB6;}
#tutorial #wrap3 .inner ul li p strong{color:#DA6C00;}
#tutorial #wrap4 .inner ul li p strong{color:#007D7D;}
#tutorial #wrap5 .inner ul li p strong{color:#E43232;}
#tutorial #wrap6 .inner ul li p strong{color:#3F7524;}
#tutorial #wrap7 .inner ul li p strong{color:#3F7524;}


#tutorial .footBox{display:block;}
#tutorial .footBox .btn_left{
	display:block;
	width:190px;
	height:50px;
	float:left;
}
#tutorial .footBox .select{
	display:block;
	width:170px;
	float:left;
	padding-top:9px;
	margin-left:206px;
}
#tutorial .footBox .select ul li{
	display:block;
	width:15px;
	height:15px;
	margin-left:10px;
	float:left;
	cursor:pointer;
	background:url(/tutorial/images/select_none.gif) no-repeat left top;
}
#tutorial .footBox .select ul li:first-child{margin-left:0;}
#tutorial .footBox .select ul li.active,
#tutorial .footBox .select ul li:hover{background:url(/tutorial/images/select_active.gif) no-repeat left top;}
#tutorial .footBox .btn_right{
	display:block;
	width:190px;
	height:50px;
	float:right;
}
#tutorial .footBox .btn_left ul li.btn2{
	border:#808393 solid 1px;
	text-shadow:1px 1px 0 #808393;
	background: #838696;
	background: -moz-linear-gradient(top,  #838696 0%, #636676 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#838696), color-stop(100%,#636676));
	background: -webkit-linear-gradient(top,  #838696 0%,#636676 100%); 
	background: -ms-linear-gradient(top,  #838696 0%,#636676 100%);
	background: linear-gradient(to bottom,  #838696 0%,#636676 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#838696', endColorstr='#636676',GradientType=0 );
}
#tutorial .footBox .btn_left ul li.btn3,
#tutorial .footBox .btn_right ul li.btn1{
	border:#0C94C7 solid 1px;
	text-shadow:1px 1px 0 #0C94C7;
	background: #0c97cc;
	background: -moz-linear-gradient(top,  #0c97cc 0%, #0c93c6 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0c97cc), color-stop(100%,#0c93c6));
	background: -webkit-linear-gradient(top,  #0c97cc 0%,#0c93c6 100%);
	background: -ms-linear-gradient(top,  #0c97cc 0%,#0c93c6 100%);
	background: linear-gradient(to bottom,  #0c97cc 0%,#0c93c6 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c97cc', endColorstr='#0c93c6',GradientType=0 );
}
#tutorial .footBox .btn_left ul li.btn4,
#tutorial .footBox .btn_right ul li.btn2{
	border:#FF870F solid 1px;
	text-shadow:1px 1px 0 #FF870F;
	background: #ff9933;
	background: -moz-linear-gradient(top,  #ff9933 0%, #ff870f 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9933), color-stop(100%,#ff870f));
	background: -webkit-linear-gradient(top,  #ff9933 0%,#ff870f 100%);
	background: -ms-linear-gradient(top,  #ff9933 0%,#ff870f 100%);
	background: linear-gradient(to bottom,  #ff9933 0%,#ff870f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9933', endColorstr='#ff870f',GradientType=0 );
}
#tutorial .footBox .btn_left ul li.btn5,
#tutorial .footBox .btn_right ul li.btn3{
	border:#037E7E solid 1px;
	text-shadow:1px 1px 0 #037E7E;
	background: #009797;
	background: -moz-linear-gradient(top,  #009797 0%, #037e7e 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#009797), color-stop(100%,#037e7e));
	background: -webkit-linear-gradient(top,  #009797 0%,#037e7e 100%);
	background: -ms-linear-gradient(top,  #009797 0%,#037e7e 100%);
	background: linear-gradient(to bottom,  #009797 0%,#037e7e 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009797', endColorstr='#037e7e',GradientType=0 );
}
#tutorial .footBox .btn_left ul li.btn6,
#tutorial .footBox .btn_right ul li.btn4{
	border:#FF7777 solid 1px;
	text-shadow:1px 1px 0 #FF7777;
	background: #ff9393;
	background: -moz-linear-gradient(top,  #ff9393 0%, #ff7979 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9393), color-stop(100%,#ff7979));
	background: -webkit-linear-gradient(top,  #ff9393 0%,#ff7979 100%);
	background: -ms-linear-gradient(top,  #ff9393 0%,#ff7979 100%);
	background: linear-gradient(to bottom,  #ff9393 0%,#ff7979 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9393', endColorstr='#ff7979',GradientType=0 );
}
#tutorial .footBox .btn_left ul li.btn7,
#tutorial .footBox .btn_right ul li.btn5{
	border:#A38B30 solid 1px;
	text-shadow:1px 1px 0 #90732C;
	background: #A38B30;
	background: -moz-linear-gradient(top,  #CBB14E 0%, #A38B30 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#CBB14E), color-stop(100%,#A38B30));
	background: -webkit-linear-gradient(top,  #CBB14E 0%,#A38B30 100%);
	background: -ms-linear-gradient(top,  #CBB14E 0%,#A38B30 100%);
	background: linear-gradient(to bottom,  #CBB14E 0%,#A38B30 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CBB14E', endColorstr='#A38B30',GradientType=0 );
}
#tutorial .footBox .btn_right ul li.btn6{
	border:#5CBA2F solid 1px;
	text-shadow:1px 1px 0 #5CBA2F;
	background: #6cc542;
	background: -moz-linear-gradient(top,  #6cc542 0%, #5eb534 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6cc542), color-stop(100%,#5eb534));
	background: -webkit-linear-gradient(top,  #6cc542 0%,#5eb534 100%);
	background: -ms-linear-gradient(top,  #6cc542 0%,#5eb534 100%);
	background: linear-gradient(to bottom,  #6cc542 0%,#5eb534 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6cc542', endColorstr='#5eb534',GradientType=0 );
}
#tutorial .footBox .btn_left ul li,
#tutorial .footBox .btn_right ul li{
	display:none;
	text-align:center;
	padding:5px 0;
	width:188px;
	border-radius:5px;
	color:#FFF;
	font-size:14px;
	box-shadow:1px 1px 2px #CCC;
	cursor:pointer;	
}
#tutorial .footBox .btn_left ul li.btn1,
#tutorial .footBox .btn_right ul li.btn6{
	box-shadow:none;
	cursor:default;
}
#tutorial .footBox .btn_left ul li.active,
#tutorial .footBox .btn_right ul li.active{display:inline-block;}
#tutorial .footBox .btn_left ul li:hover,
#tutorial .footBox .btn_right ul li:hover{opacity:0.5;}


}


/*-- 以下タブレット --*/
@media screen and (max-width: 768px){

/* チュートリアル */
#tutorial .all_wrap{
	display:block;
	height:80%;
}
#tutorial .wrap{display:none;}
#tutorial .wrap.active{display:block;}
#tutorial .wrap h2{margin-bottom:15px; text-align:center;}
#tutorial .wrap h2 img{height:22px;}
#tutorial .wrap p.read{
	line-height:150%;
	font-size:12px;
	margin-bottom:10px;
}
#tutorial .wrap .inner{
	display:block;
	margin-bottom:15px;
}
#tutorial .wrap .inner ul li{
	display:block;
	width:100%;
	border-bottom:#999 solid 1px;
	padding:5px;
	box-sizing:border-box;
}
#tutorial .wrap .inner ul li:last-Child{border-bottom:none;}
#tutorial .wrap .inner ul li img{
	display:inline-block;
	margin-right:2%;
	float:left;
}
#tutorial .wrap .inner ul li p{
	display:block;
	font-size:12px;
}
#tutorial .wrap .inner ul li p strong{
	display:block;
	font-size:12px;
}
#tutorial .wrap .btnArea{
	display:block;
	background:#F2F2F2;
	padding:10px 0;
	text-align:center;
}
#tutorial .wrap .btnArea a{
	display:block;
	width:90%;
	text-align:center;
	border:#F36F0C solid 1px;
	border-radius:5px;
	box-shadow:1px 1px 2px #BBB;
	color:#FFF;
	padding:5px 0;
	margin:0 auto;
	font-size:14px;
	background: #F47B20;
	background: -moz-linear-gradient(top, #FAA31A, #F47B20);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAA31A), to(#F47B20));
}
#tutorial .wrap .btnArea a:nth-child(2){margin-top:10px;}
#tutorial .wrap .inner ul li img{display:none;}
#tutorial #wrap1 p.read{margin-bottom:10px;}
#tutorial #wrap1 .top_btn{
	background:#F2F2F2;
	padding:20px 10px 20px 10px;
	margin-bottom:10px;
	text-align:center;
}
#tutorial #wrap1 .top_btn strong{
	display:block;
	margin-bottom:10px;
	text-align:center;
	font-size:15px;
	font-weight:bold;
}
#tutorial #wrap1 .top_btn strong img{display:none;}
#tutorial #wrap1 .top_btn ul{
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
	margin:0 auto;
}
#tutorial #wrap1 .top_btn ul li{
	display:inline-block;
	float:left;
	cursor:pointer;
	margin-bottom:10px;
	width:23%;
	margin-right:3%;
}
#tutorial #wrap1 .top_btn ul li:nth-child(3n){margin-right:0px;}
#tutorial #wrap1 .top_btn ul li img{width:100%;}

#tutorial #wrap1 .top_btn ul li:last-child{margin-right:0;}
#tutorial #wrap2 .inner ul li p strong{color:#056AB6;}
#tutorial #wrap3 .inner ul li p strong{color:#DA6C00;}
#tutorial #wrap4 .inner ul li p strong{color:#007D7D;}
#tutorial #wrap5 .inner ul li p strong{color:#E43232;}
#tutorial #wrap6 .inner ul li p strong{color:#3F7524;}


#tutorial .footBox{
	display:block;
	padding-top:15px;
}
#tutorial .footBox .btn_left{
	display:none;
	margin-bottom:10px;
}
#tutorial .footBox .btn_left ul{
	width:190px;
	margin:0 auto;
}
#tutorial .footBox .select{
	display:block;
	width:165px;
	text-align:center;
	margin:0 auto 10px auto;
}
#tutorial .footBox .select ul li{
	display:block;
	width:15px;
	height:15px;
	margin-left:10px;
	float:left;
	cursor:pointer;
	background:url(/tutorial/images/select_none.gif) no-repeat left top;
}
#tutorial .footBox .select ul li:first-child{margin-left:0;}
#tutorial .footBox .select ul li.active{background:url(/tutorial/images/select_active.gif) no-repeat left top;}
#tutorial .footBox .btn_right{display:block;}
#tutorial .footBox .btn_right{display:none;}
#tutorial .footBox .btn_right ul{
	width:190px;
	margin:0 auto;
}
#tutorial .footBox .btn_left ul li.btn2{
	border:#808393 solid 1px;
	text-shadow:1px 1px 0 #808393;
	background: #636676;
	background: -moz-linear-gradient(top, #838696, #636676);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#838696), to(#636676));
}
#tutorial .footBox .btn_left ul li.btn3,
#tutorial .footBox .btn_right ul li.btn1{
	border:#0C94C7 solid 1px;
	text-shadow:1px 1px 0 #0C94C7;
	background: #0C93C6;
	background: -moz-linear-gradient(top, #0C97CC, #0C93C6);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0C97CC), to(#0C93C6));
}
#tutorial .footBox .btn_left ul li.btn4,
#tutorial .footBox .btn_right ul li.btn2{
	border:#FF870F solid 1px;
	text-shadow:1px 1px 0 #FF870F;
	background: #FF870F;
	background: -moz-linear-gradient(top, #FF9933, #FF870F);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF9933), to(#FF870F));
}
#tutorial .footBox .btn_left ul li.btn5,
#tutorial .footBox .btn_right ul li.btn3{
	border:#037E7E solid 1px;
	text-shadow:1px 1px 0 #037E7E;
	background: #037E7E;
	background: -moz-linear-gradient(top, #009797, #037E7E);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#009797), to(#037E7E));
}
#tutorial .footBox .btn_left ul li.btn6,
#tutorial .footBox .btn_right ul li.btn4{
	border:#FF7777 solid 1px;
	text-shadow:1px 1px 0 #FF7777;
	background: #FF7979;
	background: -moz-linear-gradient(top, #FF9393, #FF7979);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF9393), to(#FF7979));
}
#tutorial .footBox .btn_right ul li.btn5{
	border:#5CBA2F solid 1px;
	text-shadow:1px 1px 0 #5CBA2F;
	background: #5EB534;
	background: -moz-linear-gradient(top, #6CC542, #5EB534);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6CC542), to(#5EB534));
}
#tutorial .footBox .btn_left ul li,
#tutorial .footBox .btn_right ul li{
	display:none;
	text-align:center;
	padding:5px 0;
	width:188px;
	border-radius:5px;
	color:#FFF;
	font-size:14px;
	box-shadow:1px 1px 2px #CCC;
	cursor:pointer;	
}
#tutorial .footBox .btn_left ul li.btn1,
#tutorial .footBox .btn_right ul li.btn6{
	box-shadow:none;
	cursor:default;
}
#tutorial .footBox .btn_left ul li.active,
#tutorial .footBox .btn_right ul li.active{display:inline-block;}


}

/*-- 以下スマートフォン --*/
@media screen and (min-width: 0px) and (max-width: 640px){

/* チュートリアル */
#tutorial .all_wrap{
	max-height:none;
	height:85%;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
}
#tutorial .all_wrap iframe{
	width:100%;
	height:100%;
	border:none;
}


}