.d-flex {display: flex!important}

.s-pc { display: none}

#headerBlk { margin: 0; align-items: flex-start;}
#headerBlk .s-ttl { width: 35%;  }
#headerBlk .s-txt { width: 65%}

.numBlk > img { margin: 0 auto}

.txtBlk h2 { font-size:13pt; font-weight: bold; color:white; background: #347379; margin-top: 0; padding: 10px 5px; text-align: center}
.txtBlk p { line-height: 1.44; background-color: rgba(255,255,255, 0.8);}

#step4 { margin-bottom: 85px}

#step1 .mb,
#step2 .mb,
#step3 .mb,
#step4 .mb { position: relative}

#step1 .mb > img,
#step3 .mb > img { position:absolute; right: 0; bottom: 0}

#step1 { 
	background-image: url("../images/ohana/step1/line.png"); background-repeat: no-repeat; background-size: contain; background-position: center;
	padding:30px 0 85px;
}
#step1 .numBlk,
#step2 .numBlk .imgNum,
#step3 .numBlk .imgNum,
#step4 .numBlk .imgNum { width: 14%}

#step1 .txtBlk { width: calc(56% - 15px); margin-left: 15px;}
#step1 .mb { width: 30%}

#step2,
#step4 { flex-direction: row-reverse}

#step2,
#step3,
#step4 { flex-wrap: wrap}

#step2 .numBlk,
#step3 .numBlk,
#step4 .numBlk { position: relative; width: 100%; margin-bottom: 15px; justify-content: space-between}

#step3 .numBlk { flex-wrap: nowrap; justify-content: space-between}

#step2 .txtBlk,
#step3 .txtBlk,
#step4 .txtBlk { width: 66%}

#step2 .mb,
#step3 .mb,
#step4 .mb { width: 34%}


#step2 .numBlk .imgNum,
#step4 .numBlk .imgNum { position: absolute; top: 0; right: 0;}

/*#step3 .numBlk .imgNum { position: absolute; top: 0; left: 0;}*/
#step3 .numBlk .imgMain { width: 80%;}



#step2 { 
	background-image: url("../images/ohana/step2/line.png"); background-repeat: no-repeat; background-size: contain; background-position: center;
	padding:0 0 50px;
}
#step2 .mb > img { margin: 0 auto}


#step3 { 
	background-image: url("../images/ohana/step3/line.png"); background-repeat: no-repeat; background-size: contain; background-position: 80% 60%;
	padding:0 0 90px;
}
#step3 .numBlk .s-comment { position: absolute; top: auto;left: 5%; bottom: 0%; width: 147px; }
#step3 .txtBlk h2 { text-align: left; background-color: transparent; padding: 0}
#step3 .txtBlk h2 span { background: #347379; display: inline-block; padding: 10px 15px; margin-bottom: 5px}

#step4 .s-abouts { flex-direction: row-reverse }
#step4 .mb > img { width: 70% }

#exp {padding: 25px 15px 20px; background-color: #347379;}
#exp.d-flex {justify-content: space-around;}
#exp.d-flex > div { width: calc(50% - 15px)}
#exp > div { position: relative}
#exp > div > img.voice { position: absolute; width: 60%}
#exp > div > img.voice.voice1{ top: -10%; left: -10%;}
#exp > div > img.voice.voice2 { bottom: 19%; right: -17%; }
#exp p {color: white; margin-top: 15px; margin-bottom: 0}

@media (min-width:576px) {
	.s-pc { display: inherit}
	.s-mb { display: none}	
	.txtBlk h2 { font-size: 3rem}
	.numBlk .imgNum > img { margin: 0 auto}
	#step1 .mb > img,
	#step2 .mb > img,
	#step3 .mb > img { width: 78%; }

	#step2 .numBlk .imgNum,
	#step3 .numBlk .imgNum { position: relative;}
	
	#step2 .numBlk .imgNum,
	#step7 .numBlk .imgNum{ margin-left: 15px}
	
	#step2 .numBlk .s-comment { position: absolute; bottom: 10%; right: 15px; width: 30%}
	#step3 .numBlk .s-comment { width: 188px; }
	
	#step4 .s-abouts { justify-content: space-between}
	#step4 .txtBlk { width: calc(86% - 15px);}
	
	#exp > div > img.voice.voice2 { bottom: 4%;}
}


@media (min-width:768px) {
	body {font-size: 15.5px;}
	#step3 .numBlk .s-comment { position: absolute; top: auto;left: 5%;bottom: 15%;}
	
	#step4 .s-abouts {flex-direction: row-reverse}
	#step4 .mb > img { width: 50%; margin: 0 auto;}
	
	#exp > div > img.voice {width: auto;}
	#exp > div > img.voice.voice1{ top: -20%;}
}


@media (min-width:992px) {
	
	#step1 { padding-bottom: 110px}
	#step1 .numBlk { width: 14%}
	#step1 .mb { width: 36%}
	#step1 .mb > img { width: 100%; }

	#step1,
	#step3 .numBlk,
	#step4 .numBlk {flex-direction: row-reverse}
	
	#step1 .mb > img {top: 0; left: 0; width: 90%;}

	#step2,
	#step4 { flex-direction: row}
	
	#step2 .numBlk .imgNum,
	#step4 .numBlk .imgNum {position: relative; margin-left: 0; margin-right: 15px}

	#step2 { position: relative; padding-bottom: 110px}
	#step2 .numBlk.d-flex {width: 100%; flex-direction: row-reverse; justify-content: flex-end;}
	#step2 .numBlk .imgMain { width: 70%;}
	#step2 .numBlk .s-comment { width: auto; top: 10%;right: -10%; bottom:auto;}
	#step2 .txtBlk{ margin-left: calc(14% + 15px); width: 70%}
	#step2 .mb {width: 35%;position: absolute;right: -20%;bottom: 20%;}

	
	#step3 { padding-bottom: 110px}
	/* #step3 .numBlk {width:83%; margin-left: 10%; margin-right: 7%} */
	#step3 .numBlk .imgNum img { width: 75%;  margin: 0 0 0 auto;}
	#step3 .numBlk .imgMain {width: calc(86% - 15px);}
	#step3 .numBlk .s-comment { width: auto; top: -15%;bottom: auto;}
	#step3 .txtBlk > p { display: inline-block}
	#step3 .mb { width: 42%;}
	
	#step4 .numBlk {justify-content: flex-end; margin-left: 10.5%}
	#step4 .s-abouts{justify-content: flex-end;}
	#step4 .mb { width:calc(30.5% - 15px)}
	#step4 .mb img { width: 69%; position: absolute; top: -100%; left: 14%;}
	
	#exp > div > img.voice.voice2 { top: auto; right: -100px; bottom: 5px;}
}

@media (min-width:1200px) {
	#step1 .mb > img, #step3 .mb > img { bottom: -50px; }
	#step2 .txtBlk { margin-left: calc(14% + 15px);width: 70%; }
	#step2 .numBlk .s-comment {top: 5%;right: 0%;}
	#exp.d-flex { text-align: right}
	#exp.d-flex > div { width: auto; }
	#exp .exp-parking .pics { margin: 0 auto}
	#exp p { text-align: center;}
}

@media (min-width:1281px) {
	#step3 {background-position: 75% 60%;}
}

#footBlk.d-flex { flex-wrap: wrap; justify-content: center; margin-top: 30px}
#footBlk .ttl { width: 40%; margin-bottom:15px}
#footBlk .tel { width: 100%; text-align: center; margin-bottom:20px}
#footBlk .tel > span { font-size: large}
#footBlk .addr { margin: 0 20px 10px; font-size:larger}
#footBlk .msg { margin: 0 45px;}