.howto-header {

}

.howto-header h1 {
    border-radius: 4px;
    margin-bottom: 14px;
    height: 110px;
    background: none;
    display: flex;
    align-items: center;
}

@media (max-width: 800px){
	#wrapper .howto-header h1 {
		background: none;
		height: 81px;
		padding: 0px;
	}
}

.howto-header h1 img {
  width:auto;
  margin-left: 10px;
	@media (max-width: 800px){
	height: 56px;
	}
}

.howto-header p {
  font-size:15px;
  margin: 20px 20px 20px;
  line-height: 1.6;
}

.howto-header > div.title-wrapper {
  background-repeat: no-repeat;
  background-position:  right;
  @media (max-width: 800px){
    background-repeat: no-repeat;
    background-position:  right 25% center ;
    background-size:820px;
  }
}

.howto-main {
	overflow: hidden;
	@media (min-width: 601px){
	margin-top: 20px;
	}

}

h2.howto-step-title {
  margin: 0px 0px 10px 30px;
  min-height: 82px;
  display: flex;
  justify-content: center;
  align-items: center;
}

h2.howto-step-title:not(:first-child) {
	margin-top:25px;
}

h2.howto-step-title > span {
  color: white;
  font-size: 18px;
  clear: both;
  padding: 8px 10px 6px 61px;
  font-family: meiryo;
  text-align: left;
  background-color: #795284;
  position: relative;
  line-height: 1.4;
  display:block;
  width: 100%;
}

h2.howto-step-title > span:before {
  content:"";
  height: 83px;
  display: block;
  aspect-ratio: 1/1;
  position:absolute;
  top: 0;
  bottom: 0;
  left: -30px;
  margin: auto;
  background-repeat: no-repeat;
  background-size: 99%;
}

@media (max-width: 800px){
	h2.howto-step-title > span:before {
		height: 68px;
	}
	
	h2.howto-step-title > span {
		font-size: 16px;
		padding-left: 47px;
	}
}


h2.howto-step-title + p {
  text-align:left;
  margin: 15px 15px 18px 15px;
  font-size:15px;
  line-height: 1.6;
  @media (max-width: 600px){
  margin: 0px 15px 15px 15px;
  }
}

h2#step1 > span:before {
  background-image: url("../img/icon_step1.png");
}

h2#step2 > span:before {
  background-image: url("../img/icon_step2.png");
}

h2#step3 > span:before {
  background-image: url("../img/icon_step3.png");
}

h2#step4 > span:before {
  background-image: url("../img/icon_step4.png");
}

h2#step5 > span:before {
  background-image: url("../img/icon_step5.png");
}

h2#step6 > span:before {
  background-image: url("../img/icon_step6.png");
}

h2#number1 > span:before {
  background-image: url("../img/icon_number1.png");
}

h2#number2 > span:before {
  background-image: url("../img/icon_number2.png");
}

h2#number3 > span:before {
  background-image: url("../img/icon_number3.png");
}

h2#number4 > span:before {
  background-image: url("../img/icon_number4.png");
}

h2#number5 > span:before {
  background-image: url("../img/icon_number5.png");
}

h2#number6 > span:before {
  background-image: url("../img/icon_number6.png");
}

@media (min-width: 601px){
	.howto-step {
	  overflow: hidden;
	  margin-left: 15px;
	  display: flex;
	  flex-wrap: wrap;
	  gap: 8px 2px;
	}
	
	.howto-step li {
	  width: 177px;
	  background: url("../img/icon_next.png") no-repeat;
	  background-position: 166px 42px;
	  text-align: left;
	  padding-right: 5px;
	}
	
	.howto-step li img {
	  border: 1px solid #CACACA;
	  border-radius: 11px;
	  width: 156px;
	  height: auto;
	  margin-bottom: 2px;
	}
	
	.howto-step li p {
	  text-align: left;
	  font-size: 12px;
	  margin: 3px 0px;
	  line-height: 1.4;
	  text-align: center;
	  word-break: auto-phrase;
	}

	.howto-step li:not(:last-child) p {
	  padding-right: 20px;
	}
	
	.howto-step li:last-child {
	  width: 160px;
	}
}

@media (max-width: 600px){

	.howto-step {
	  border-top: 1px solid #c9ced0;
	}
	
	.howto-step li {
	  padding: 1px 2px;
	  background: url(../../images/sp/shop/article_icon.png) no-repeat right center;
	  background-size: 20px 12px;
	  border-bottom: 1px solid #c9ced0;
	}

	.howto-step li a {
	  display: flex;
	  overflow: hidden;
	  padding-right: 15px;
	  align-items: center;
	}

	.howto-step img {
	    width: 80px;
	    height: 50px;
	    float: left;
	    margin-right: 6px;
	}

	.howto-step p {
	  line-height: 1.4;
	  color:#6B4776;
	  margin: 5px 0;
	  font-size: 14px;
	}
}