@charset "utf-8";
/* CSS Document */


/***コンテンツ***/
.contents{
	display: flex;
	justify-content: space-between;
}
.sp{display: none;}
@media screen and (max-width: 900px){
	.contents{
		flex-direction: column;
		align-items: center;
	}
	.pc{display: none;}
	.sp{display: block;}
}


/***左側ロゴ***/
#howtouse .contents .logo{
	width: 24%;
	min-width: 24%;
	position: relative;
}
#howtouse .contents .logo img{
	position: sticky;
	top: 250px;
}
@media screen and (max-width: 900px){
	#howtouse .contents .logo{
		width: 100%;
		margin-bottom: 100px;
	}
	#howtouse .contents .logo img{
		position: static;
		width: 80%;
		margin: 0 auto;
	}
}
@media screen and (max-width: 750px){
	#howtouse .contents .logo{margin-bottom: 60px;}
	#howtouse .contents .logo img{width: 100%;}
}


/***右側内容***/
#howtouse .contents_right{width: 71%;}
#howtouse .list{margin-bottom: 113px;}
#howtouse .list:last-of-type{margin-bottom: 0px;}
@media screen and (max-width: 900px){
	#howtouse .contents_right{width: 100%;}
	#howtouse .list{margin-bottom: 120px;}
}
@media screen and (max-width: 750px){
	#howtouse .list{margin-bottom: 80px;}
}


/***白背景***/
.list_in{
	padding: 80px 45px 50px;
	margin-bottom: 50px;
	position: relative;
}
.list_in img{margin-bottom: 40px;}
.list_in p{
	text-align: left;
	font-weight: 400;
}
@media screen and (max-width: 900px){
	.list_in{
		padding: 60px 8% 25px;
		margin-bottom: 25px;
	}
	.list_in img{margin-bottom: 20px;}
}
@media screen and (max-width: 750px){
	.list_in{padding: 70px 8% 30px;}
}
@media screen and (max-width: 500px){
	.list_in{padding: 40px 8% 30px;}
}

/***オレンジのフキダシ***/
#howtouse .list_in .hukidashi{
	position: absolute;
	top: -5%;
    left: 5%;
}
@media screen and (max-width: 900px){
	#howtouse .list_in .hukidashi{
		top: -10%;
		left: 2%;
		width: 50%;
	}
	#howtouse .list_in .hukidasi_3{width: 75%}
}
@media screen and (max-width: 750px){
	#howtouse .list_in .hukidashi{
		top: -6%;
		left: 2%;
		width: 70%;
	}
	#howtouse .list_in .hukidasi_3{width: 85%}
}
@media screen and (max-width: 500px){
	#howtouse .list_in .hukidashi{width: 80%;}
	#howtouse .list_in .hukidasi_3{width: 95%}
}


/***ボタン***/
.list .btn{margin: 0 auto;}

/***2つ並んでいるボタン***/
#howtouse .btn_2{
	display: flex;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto;
}
#howtouse .btn_2 .btn{width: 280px;}
#howtouse .btn_2 .btn a{
	letter-spacing: -1px;
	padding: 1em 2em 1em 0;
}
@media screen and (max-width: 1100px){
	#howtouse .btn_2{width: 100%;}
}
@media screen and (max-width: 750px){
	#howtouse .btn_2{flex-direction: column;}
	#howtouse .btn_2 .btn:first-of-type{margin-bottom: 25px;}
	#howtouse .btn_2 .btn a{font-size: 14px;}
}