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

section img {width: 100%; height: auto;}

/* reason */
#reason {background-color: #dce6e7;}
#title {padding: 0; background-image: url("http://hot40yoga.com/assets/images/hot55/main.jpg");}

#hot55-main .body {border: solid 1px #fff;}
#hot55-main .body h3 {height: auto;}
#hot55-main .body h4 {height: auto;}
#hot55-main .body p {margin: 0 auto; color: #005c6f; line-height: 1.5em;}
#hot55-main .body p small {display: block; color: #fff;}
#hot55-main .body #price {height: auto;}
#hot55-main .body h5 {background-color: #005c6f; font-weight: normal; text-align: center; color: #fff;}
#hot55-main #staff {text-align: center; color: #fff;}
/* ============================================================================== PC === */

@media print, screen and (min-width: 769px) {
	
	#title h2 {width: 100%; height: auto;}
	#hot55-main {padding: 50px 0;}
	#hot55-main .body {width: 1000px; margin: 70px auto 0; padding-bottom: 30px;}
	#hot55-main .body h3 {width: 766px; margin: -68px auto 20px;}
	#hot55-main .body h4 {width: 600px; margin: 0 auto 20px;}
	#hot55-main .body p {width: 500px; font-size: 16px;}
	#hot55-main .body p small {font-size: 13px;}
	#hot55-main .body #price {width: 500px; margin: 0 auto 20px;}
	#hot55-main .body h5 {width: 500px; height: 30px; margin: 20px auto 10px; line-height: 30px; border-radius: 15px; font-size: 15px;}
	#hot55-main #staff {margin-top: 30px; font-size: 20px;}
	
}

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

@media screen and (max-width: 768px) {
	
	#title {padding-top: 1rem; background-position: 44%  center;}
	#title .body {position: relative; height: 100%;}
	#title h2 {margin-left: 0;}
	#title p {position: absolute; right: 0; bottom: 1rem; width: 10rem; height: auto;}
	#hot55-main {padding: 5% 0;}
	#hot55-main .body {margin: 5% auto 0; padding-bottom: 5%;}
	#hot55-main .body h3 {width: 32rem; margin: -2rem auto 2rem;}
	#hot55-main .body h4 {width: 30rem; margin: 0 auto 2rem;}
	#hot55-main .body p {width: 90%; font-size: 14px;}
	#hot55-main .body p small {font-size: 12px;}
	#hot55-main .body #price {width: 30rem; margin: 0 auto 2rem;}
	#hot55-main .body h5 {width: 90%; height: 3rem; margin: 2rem auto 1rem; line-height: 3rem; border-radius: 1.5rem; font-size: 13px;}
	#hot55-main #staff {margin-top: 2rem; font-size: 13px;}
	
	/*横向きの際に適用*/
	@media only screen and (orientation : landscape) {
		#title p {bottom: 6rem; width: 14rem;}
	}
}