@import "import/animation.css";
@import "import/base.css";
@import "import/title.css";
@import "http://hot40yoga.com/assets/css/import/yoga_effect.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/whats_hotyoga/main.jpg");}

#what {background-color: #fff;}

#yoga-effect #read {color: #fff; text-align: center;}
#other-effect {box-sizing: border-box; text-align: center;}
#other-effect h3 {margin: 0 auto;}
#other-effect ul {text-align: center;}
#other-effect li {display: inline-block; vertical-align: top; height: auto;}
#other-effect {
	background-image:
		url("http://hot40yoga.com/assets/images/common/icon3.png"),
		url("http://hot40yoga.com/assets/images/whats_hotyoga/bg2.jpg");
		
	background-position:
		center top,
		center center;
		
	background-repeat: no-repeat;
}
/* ============================================================================== PC === */

@media print, screen and (min-width: 769px) {
	
	#yoga-effect {padding: 50px 0;}
	#yoga-effect h3 {width: 628px; auto; margin: 0 auto 30px;}
	#yoga-effect #read {margin: 20px 0 40px; font-size: 18px;}
	#yoga-effect #read strong {font-size: 20px;}
	
	#other-effect {
		background-size:
			76px 75px,
			auto 100%;
	}
	
	#other-effect {padding: 130px 0 30px;}
	#other-effect h3 {width: 518px;}
	#other-effect ul {margin: 50px 0;}
	#other-effect li {width: 240px; margin: 0 10px;}
	
}

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

@media screen and (max-width: 768px) {
	
	#title {padding-top: 2rem; background-position: 20% top;}
	
	#yoga-effect {padding: 5% 0;}
	#yoga-effect h3 {width: 80%; auto; margin: 0 auto 2rem;}
	#yoga-effect #read {margin: 1rem 0 2rem; padding: 0 5%; font-size: 13px;}
	#yoga-effect #read strong {font-size: 15px;}
	
	#other-effect {
		background-size:
			5rem auto,
			auto 100%;
	}
	
	#other-effect {padding: 6rem 0 0;}
	#other-effect h3 {width: auto; height: 5rem; text-align: center;}
	#other-effect h3 img {width: auto; height: 100%;}
	#other-effect ul {margin: 0;}
	#other-effect li {width: 50%; padding: 5%; box-sizing: border-box;}
	
}