@import "import/animation.css";
@import "import/base.css";
@import "import/title.css";
@import "import/app.css";

section img {width: 100%; height: auto;}
#title {background-image: url("../images/faq/main.jpg");}
#faq dt, #faq dd {position: relative; box-sizing: border-box; line-height: 1.6em;}
#faq dt {color: #fff; cursor: pointer;
	background: url("http://hot40yoga.com/assets/images/common/icon10.svg") no-repeat right 40px center #34b6d1;
	background-size: 20px 10px;
}
#faq dt.active {background-image: url("http://hot40yoga.com/assets/images/common/icon11.svg");}
#faq dt span,
#faq dd span {position: absolute; font-weight: bold;}
#faq dd span {color: #e95377;}
#faq dd {display: none; background-color: #fff; color: #333;}
/* ============================================================================== PC === */

@media print, screen and (min-width: 769px) {
	
	#title h2 {margin-left: 600px;}
	#faq {padding: 50px 0;}
	#faq h3 {margin-bottom: 50px;}
	#faq dt, #faq dd {padding: 20px 30px;}
	#faq dt {padding-left: 100px; font-size: 16px;}
	#faq dd {padding-left: 100px; font-size: 14px;}
	#faq dt span,
	#faq dd span {left: 30px; font-size: 22px;}
	#faq dd span {left: 46px;}
	
	
}

/* ============================================================================== SP === */

@media screen and (max-width: 768px) {
	
	#title {padding-top: 1.5rem; background-position: 40% top;}
	#title h2 {margin-left: 0; padding-left: calc(100% - 18rem);}
	#faq {padding: 10% 0 5%;}
	#faq h3 {margin-bottom: 2rem;}
	#faq dt, #faq dd {padding: 5% 10% 5% 5%;}
	#faq dt {
		padding-left: 4.5rem; font-size: 12px;
		background-position: right 1rem center;
		background-size: 1.6rem .8rem;
	}
	#faq dd {padding: 5% 3% 5% 4.5rem; font-size: 11px;}
	#faq dt span,
	#faq dd span {left: 1rem; font-size: 14px;}
	#faq dd span {left: 2rem;}
	
	
}