@import "import/animation.css";
@import "import/base.css";
@import "import/title.css";
@import "http://hot40yoga.com/assets/css/import/experience.css";
@import "http://hot40yoga.com/assets/css/import/experience_bring.css";
@import "http://hot40yoga.com/assets/css/import/relaxed.css";
@import "import/app.css";

section img {width: 100%; height: auto;}
#title {background-image: url("http://hot40yoga.com/assets/images/beginners/main.jpg");}
#apply .body {
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
}
.apply-box {box-sizing: border-box; text-align: center;}
.apply-box h4 {box-sizing: border-box;}
.apply-box h4 img {width: 100%; height: auto;}
/* reason */
#reason {
	box-sizing: border-box; text-align: center;
	background-image:
		url("http://hot40yoga.com/assets/images/common/icon3.png"),
		url("http://hot40yoga.com/assets/images/beginners/bg2.jpg");
		
	background-position:
		center top,
		center center;
		
	background-repeat: no-repeat;
	background-color: #dce6e7;
}
#reason-block {margin: 0 auto; border: solid 2px #fff;}
.reason-box {display: inline-block; vertical-align: top; box-sizing: border-box; background-color: rgba(255,255,255,.8);}
.reason-box .icon {width: auto; text-align: center;}
.reason-box h4 {line-height: 1.5em; color: #0099a8;}
section#reason .icon img {width: auto; height: 100%;}

/* ============================================================================== PC === */

@media print, screen and (min-width: 769px) {
	
	#title {padding-top: 80px;}
	
	#apply {padding: 50px 0;}
	#apply h3 {width: 600px; margin: 0 auto 30px;}
	.apply-box {
		width: calc(100%/3);
		height: 240px;
		padding: 0 1% 1%;
	}
	.apply-box:nth-child(odd) {background-color: #34b6d1;}
	
	/* reason */
	#reason {
		padding: 90px 0 30px;
		background-size:
			76px 75px,
			auto 100%;
	}
	
	#reason h3 {width: 460px; margin: 0 auto 20px;}
	#reason-block {width: 800px; padding: 4px;}
	.reason-box {width: 250px; height: 250px; margin: 7px; padding: 20px 10px;}
	.reason-box .icon {height: 64px;}
	.reason-box h4 {margin: 15px 0; font-size: 16px;}
	.reason-box p {font-size: 13px;}
	
}

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

@media screen and (max-width: 768px) {
	
	#title {padding-top: 2rem;}
	
	#apply {padding: 10% 0;}
	#apply h3 {width: 35rem; margin: 0 auto 3rem;}
	.apply-box {width: calc(100%/2);}
	.apply-box h4 {padding: 0 0 2%;}
	.apply-box:nth-of-type(1),
	.apply-box:nth-of-type(4),
	.apply-box:nth-of-type(5),
	.apply-box:nth-of-type(8),
	.apply-box:nth-of-type(9),
	.apply-box:nth-of-type(12) {background-color: #34b6d1;}
	
	/* reason */
	#reason {
		padding: 6rem 0 5%;
		background-size:
			5rem auto,
			auto 100%;
	}
	
	#reason h3 {width: 30rem; margin: 0 auto 2rem;}
	#reason-block {width: 90%; margin: 0 auto; padding: 2%; box-sizing: border-box;}
	.reason-box {width: 100%; margin: 0 0 2%; padding: 3%;}
	.reason-box:last-child {margin-bottom: 0;}
	.reason-box .icon,
	.reason-box h4 {display: inline-block; vertical-align: middle;}
	.reason-box .icon {height: 3rem; margin-top: .5rem;}
	.reason-box h4 {margin: 1rem 0 0; font-size: 14px;}
	.reason-box p {margin-top: 2rem; font-size: 12px;}
	
}