@charset "utf-8";

.section-howto{
	display: flex;
	margin: 50px 0;
}
.section-howto .hw-side{
	width: 200px;
	padding: 15px;
	background: #F3F3F3;
}
.section-howto .hw-main{
	width:800px;
	padding: 15px 10px 20px 30px;
}
.section-howto .hw-main p{
	margin-bottom: 1em;
}
.cmn-headline-ss {
    margin-bottom: 10px;
    font-size: 2rem;
}
.section-howto .hw-side h3{
	margin: 0 0 1em;
}
.section-howto .hw-side ul{
	margin: 0 0 1.5em;
}
.section-howto .hw-side ul li{
	margin: 0 0 0.75em;
	padding-left: 0.25em;
	font-size: 0.9em;
}
.section-howto .hw-main .hw-box{
	display: flex;
}
.section-howto .hw-main .img{
	max-width: 355px;
	padding: 15px;
}
.section-howto .hw-main .txt{
	padding: 15px;
	max-width: 425px;
}
.section-howto .hw-main .txt i{
	color: #FFBF00;
}
.section-howto .hw-main .txt h4{
	margin-bottom: 0.5em;
}
.section-howto .hw-main .txt ul{
	margin-left: 1.5em;
	margin-bottom: 1em;
}
.section-howto .hw-main .txt li{
	list-style-type: disc;
	margin-bottom: 0.5em;
}
.section-howto .hw-main .txt span{
	display: block;
	font-size: 0.8em;
	margin: 0.5em 0;
	padding-left: 1em;
	text-indent: -1em;
	color: #FF0000;
}
.section-howto .hw-main .txt span:before{
	content: "※";

}
.drw-head {
    position: relative;
    padding-left: 15px;
    cursor: pointer;
}
.drw-box{display: block;}

.drw-head::after {
    content: "";
    position: absolute;
    display: block;
    margin-top: -5px;
    top: 50%;
    left: 0px;
    width: 8px;
    height: 8px;
    border-bottom: solid 2px #000;
    border-right: solid 2px #000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.drw-head.open::after{
	margin-top: 0px;
	-webkit-transform: rotate(225deg);
	transform: rotate(225deg);
}


@media screen and (max-width: 768px){
	.drw-box{display: none; padding: 15px 10px; font-size: 1.6rem;}
	.drw-box li>a{
		display: block;
		padding: 5px 0;
	}
	.drw-head {
	    padding: 15px;
	    padding-left: 15px;
	    border: 1px solid #CCC;
	    margin-bottom: -1px !important;
	    font-size: 1.6rem;
	}
	.no-head{
	    padding: 0px;
	    border: 1px solid #CCC;
	    margin-bottom: -1px !important;
	    font-size: 1.6rem;
	}
	.no-head>a{
	    padding: 15px;
	    display: block;
	    font-size: 1.6rem;
	    position: relative;
	}
	.drw-head::after {
	    left: auto;
	}
	.drw-head::after {
	    content: "";
	    position: absolute;
	    display: block;
	    margin-top: -5px;
	    top: 50%;
	    right: 15px;
	    width: 8px;
	    height: 8px;
	    border-bottom: solid 2px #000;
	    border-right: solid 2px #000;
	    -webkit-transform: rotate(45deg);
	    transform: rotate(45deg);
	}
	.no-head>a::after {
	    content: "";
	    position: absolute;
	    display: block;
	    margin-top: -5px;
	    top: 50%;
	    right: 15px;
	    width: 8px;
	    height: 8px;
	    border-bottom: solid 2px #000;
	    border-right: solid 2px #000;
	    -webkit-transform: rotate(-45deg);
	    transform: rotate(-45deg);
	}
	.section-howto .hw-side ul {
	    margin: 0 0 0.5em;
	}
	.section-howto .hw-side ul li {
	    margin: 0 0 1px;
	    padding: 0.5em 1em;
	    font-size: 0.9em;
	    background: #EEE;
	}
	.section-howto .cmn-headline-s {
	    font-size: 2rem;
	    background: #EEE;
	    padding: 0.5em 0.5em;
	}
	.section-howto .cmn-headline-ss {
	    font-size: 1.6rem;
	}
	.section-howto{
		display: block;
		margin: 10px 0 50px;
	}
	.section-howto .hw-side{
		width: 100%;
		padding: 15px;
		background: #FFFFFF;
	}
	.section-howto .hw-main{
		width: 100%;
		padding: 20px;
	}
	.section-howto .hw-main .hw-box{
		display: block;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 0.5em;
	}
	.section-howto .hw-main .img{
		max-width: 80%;
		margin: 0 auto;
		padding:2em 0px;
		text-align: center;
		order: 2;
	}

	.section-howto .hw-main .txt{
		padding: 0 0 0 0px;
		max-width: 100%;
		order: 1;
	}
	
}