@charset "utf-8";
html{
	background-color: #231815;
}
.main.green{
	width: 100%;
	height: 100%;
	background-color: #231815;
	
}
.main.green div{
	margin-left: auto;
    margin-right: auto;
}
.main.green img{
	text-align: center;
	width: 100%;
}

.tutorial_title{
    /*width: 340px;*/
    width: 82.13vw;
	margin-top: 10px;
    /*padding-top: 70px;*/
    /*padding-top: 13.3vw;*/
    
}

.tutorial_main{
	/*width: 285px;*/
	width: 68.85vw;
	margin-top: 20px;
	padding-top: 7.25vw;
    /*padding-top: 30px;*/
	/*padding-top: 7.25vw;*/
}

.tutorial_text{
	/*width: 390px;*/
	/*width: 94.21vw;*/
	width: 87%;
    /*padding-top: 25px;*/
	/*padding-top: 6.05vw;*/
	padding-top: 10px;
}
.tutorial_text.first{
	padding-top: 35px;
}

.tutorial_icon{
	/*width: 370px;*/
	width: 89.38vw;
	/*margin-top: 10px;*/
	margin-top: 2.42vw;
}

.main.green .tutorial_icon img{
	/*width: 275px;*/
	width: 66.43vw;
	/*margin-left: 5px;*/
	margin-left: 1.21vw;
}

.tutorial_btn{
	font-family: "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro W6", sans-serif;
	display: block;
	width: 29vw;
	padding: 1vw 2vw;
	line-height: 7.3vw;
	text-align: center;
	background: #eb6000;
	color: #fff;
	font-size: 4vw;
	font-weight: bold;
	border-radius: 10px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 18.1vw;
}

.tutorial_btn:active{
	background: #ccc;
	border: 2px solid #ccc;
}

.tutorial_text ul{
    list-style:  none;
    margin:  0;
    padding: 0;
	/*padding-left: 5px;*/
	padding-left: 1.21vw;
}

.tutorial_text ul li{
	font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
	color: #fff;
    font-weight: bold;
	/*font-size: 14px;*/
	font-size: 3.38vw;
    /*line-height: 22px;*/
    /*line-height: 3vh;*/
    line-height: 5.32vw;
    letter-spacing: 0px;
}

.tutorial_text ul li:before {
    content:  "";
    /*width: 4px;*/
	width: 0.97vw;
    /*height:  4px;*/
    height: 0.55vh;
    display:  inline-block;
    background-color: #fff;
    border-radius:  50%;
	position: relative;
    /*margin-right: 4px;*/
    margin-right: 0.97vw;
    /*top: -2px;*/
    top: -0.28vh;
}

.tutorial_text ul li p{
	display: inline-block;
    margin-left: -7px;
}

.tutorial_text ul li p.second{
	margin-left: -5px;
}

.f_10{
	/*font-size: 10px;*/
	font-size: 2.43vw;
}

@media screen and (max-width: 1024px) {
	.tutorial_main{
		max-width: 400px;
	}
	.main.green .tutorial_icon img{
		max-width: 400px;
	}
}
@media screen and (max-width: 768px) {
	.main.green .tutorial_icon img{
		    max-width: 305px;
	}
}
@media screen and (max-width: 375px) {
	.tutorial_title{
    	width: 290px;
	}
	.tutorial_main{
		width: 240px;
	}
	.tutorial_text{
		width: 310px;
	}
	.tutorial_icon{
		width: 300px;
	}
	.main.green .tutorial_icon img{
		width: 245px;
		margin-left: 0px;
	}
	.tutorial_btn{
		width: 100px;
	}
	.tutorial_text ul li{
		font-size: 12.7px;
	}
	.tutorial_text.first{
		padding-top: 20px;
	}
	
}
@media screen and (max-width: 360px) {
	.tutorial_main {
		width: 200px;
	}
	.tutorial_text {
		width: 290px;
	}

}

@media screen and (max-width: 320px) {
	.tutorial_title{
    	width: 240px;
	}
	.tutorial_main{
		width: 200px;
	}
	.tutorial_text{
		width: 290px;
	}
	.tutorial_icon{
		width: 280px;
	}
	.main.green .tutorial_icon img{
		width: 225px;
	}
	.tutorial_btn{
		width: 100px;
	}
}