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

#howtowalk h2 {
	text-align: center;
}

#howtowalk .ttl_bg {
	background: linear-gradient(-90deg, #369bcd, #f5cee0);
	padding: 80px 0 100px;
}

#howtowalk .intro .img_box {
	width: 1000px;
	margin: -50px auto 50px auto;
}
#howtowalk .intro .img_box img { width: 100%;}

#howtowalk p {
	margin-bottom: 1.5rem;
}
#howtowalk .bnr_box {
	text-align: center;
	margin: 100px auto;
}

#howtowalk .pj .img_box {
	width: 100%;
	margin: auto;
	text-align: center;
}

#howtowalk .pj ul {
	width: 100%;
	margin: 50px auto;
	display: flex;
	flex-wrap: wrap;
}

#howtowalk .pj li {
	width: calc( 88% / 6 );
	margin: 0 1%;
}
#howtowalk .pj li img {
	width: 100%;
}

#howtowalk .keyword {
	padding: 80px 0;
	text-align: center;
	margin: 50px auto 0;
}
#howtowalk .keyword .txt_ttl {
	font-size: 50px;
	letter-spacing: 10px;
}

#howtowalk .blue_box {
	padding: 3% 5%;
} 

#howtowalk .insta {
	margin:50px auto 100px;
}


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

#howtowalk img {width: 100%;}	
	
#howtowalk .ttl_bg {
	background: linear-gradient(-90deg, #369bcd, #f5cee0);
	padding: 80px 0 100px;
}
	#howtowalk h2 {
		width: 50%;
		margin: auto;
	}

#howtowalk .intro .img_box {
	width: 90%;
	margin: -50px auto 50px auto;
}

#howtowalk .bnr_box {
	width: 90%;
	text-align: center;
	margin: 50px auto;
}


#howtowalk .pj li {
	width: calc( 88% / 3 );
	margin: 0 1%;
}

#howtowalk .keyword {
	padding: 50px 0;
	text-align: center;
	margin: 50px auto 0;
}
#howtowalk .keyword .txt_ttl {
	font-size: 30px;
	width: 90%;
	margin: auto;
	letter-spacing: 10px;
}

#howtowalk .blue_box {
	padding: 5%;
} 

    
}