@charset "utf-8";
/*------------------------------------------------

Copyright Maple Acupuncture & Moxibustion Clinic.

course.css

------------------------------------------------*/

#index #visualmain {
	position: relative;
	width: 100%;
	height: 360px;
	background: url(../../../course/images/mainimg.jpg) center top no-repeat;
	background-size: cover;
}
#index #visualmain h2 {
	position: absolute;
	top: 130px;
	letft: 0;
	width: 100%;
	height: 70px;
	text-indent: -9999px;
	background: url(../../course/images/title.png) center top no-repeat;
	background-size: auto 70px;
}

/* main
------------------------------*/
.sec {
	width: 100%;
}
#index #main h3 {
	margin: 0 0 50px 0;
	font-size: 1.4em;
	font-weight: normal;
	color: #000;
	line-height: 1.4em;
}
#index #main .box {
	margin: 0 0 80px 0;
	width: 46%;
}
#index #main .box.fR {
	min-height: 500px;
	background: url(../../../course/images/img_course01.jpg) center top no-repeat;
	background-size: cover;
}
#index #main .box h4 {
	margin: 0 0 20px 0;
	font-size: 1.0em;
	color: #c90;
	line-height: 1.0em;
}
#index #main .box p {
	line-height: 1.6em;
}
#index #main .box p.price {
	margin: 0 0 40px 0;
	color: #000;
}
#index #main .box p.price:last-child {
	margin: 0;
}
#index #main .box p strong {
	font-size: 1.6em;
	font-weight: normal;
}
#index #main .box dl {
	width: 100%;
}
#index #main .box dl dt {
	clear: both;
	width: 34%;
	color: #000;
	line-height: 1.8em;
	float: left;
}
#index #main .box dl dd {
	width: 66%;
	color: #000;
	line-height: 1.8em;
	float: left;
}
#index #main .box dl dd strong {
	font-size: 1.4em;
	font-weight: normal;
}
#index #main .box .txt {
	margin: 0 0 30px 0;
	padding: 0 0 30px 0;
	border-bottom: 1px solid #e0e0e0;
}
#index #main .box .txt:last-child {
	margin: 0;
	padding: 0;
	border: none;
}
#index #main p.reserved {
	margin: 0 auto;
	width: 50%;
}
#index #main p.reserved a {
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	padding: 20px 0;
	font-size: 1.2em;
	color: #fff;
	line-height: 1.0em;
	text-align: center;
	text-decoration: none;
	background: #fc0;
	display: block;
}
#index #main p.reserved a:hover {
	color: #000;
	background: #fe0;
}

/* toggle
--------------------*/
.category {
	margin: 0 0 30px 0;
	width: 100%;
}
.category .categoryTitle {
	color: #000;
	line-height: 1.0em;
}
.category .toggleContents {
	padding: 20px;
	background: #fff;
	z-index: 10;
}
.category .toggleContents p {
	line-height: 1.6em;
}
.category .toggleContents p strong {
	font-size: 1.0em !important;
	color: #000;
}
.category .toggleContents p .att {
	font-size: 1.0em;
}
.toggleKey {
	padding: 15px 0 15px 26px;
	color: #09c;
	text-decoration: underline;
	background: url(../../../common/images/toggle_open.png) left center no-repeat;
	background-size: 20px 20px;
	cursor: pointer;
	display: block;
}
.toggleKey.open {
	font-weight: bold;
	color: #d60;
	text-decoration: none;
	background: url(../../../common/images/toggle_close.png) left center no-repeat;
	background-size: 20px 20px;
}

/* contact
------------------------------*/
#contact {
	padding: 40px 0 60px 0;
	width: 100%;
	background: #fff;
}
#contact .inner {
	margin: 0 auto;
	width: 90%;
	max-width: 600px;
	min-height: 120px;
	background: url(../../../common/images/nav_contact.png) left top no-repeat;
	background-size: 120px 120px;
}
#contact .inner p {
	padding: 24px 0 0 150px;
	line-height: 1.6em;
}





@media screen and (max-width: 800px) {
	#index #visualmain {
		height: 280px;
	}
	#index #visualmain h2 {
		top: 100px;
		height: 60px;
		background-size: auto 60px;
	}

/* main
------------------------------*/
	#index #main .box dl dt {
		width: 44%;
	}
	#index #main .box dl dd {
		width: 56%;
	}

/* contact
------------------------------*/
	#contact {
		padding: 30px 0 50px 0;
	}
}



@media screen and (max-width: 640px) {
	#index #visualmain {
		height: 200px;
	}
	#index #visualmain h2 {
		top: 65px;
		height: 50px;
		background-size: auto 50px;
	}

/* main
------------------------------*/
	#index #main {
		padding: 20px 0 40px 0;
	}
	#index #main h3 {
		margin: 0 0 30px 0;
		padding: 0 5%;
		font-size: 18px;
	}
	#index #main .box {
		margin: 0;
		padding: 30px 5%;
		width: 90%;
	}
	#index #main .box.fL,
	#index #main .box.fR {
		float: none;
	}
	#index #main .box.fR {
		padding: 0;
		width: 100%;
		height: 220px;
		min-height: inherit;
		background: url(../../../course/images/img_course01_sp.jpg) center top no-repeat;
		background-size: cover;
	}
	#index #main .box p strong {
		font-size: 18px;
	}
	#index #main .box .txt {
		margin: 0 0 20px 0;
		padding: 0 0 20px 0;
	}
	#index #main p.reserved {
		width: 90%;
	}
	#index #main p.reserved a {
		padding: 15px 0;
		font-size: 14px;
	}
	#index #main .box dl dt {
		width: 30%;
	}
	#index #main .box dl dd {
		width: 70%;
	}
	#index #main .box dl dd strong {
		font-size: 16px;
	}

/* contact
------------------------------*/
	#contact {
		padding: 30px 0 40px 0;
	}
	#contact .inner {
		min-height: inherit;
		background-position: center top;
		background-size: 80px 80px;
	}
	#contact .inner p {
		padding: 100px 0 0 0;
	}
}



@media screen and (max-width: 480px) {
	#index #visualmain {
		height: 160px;
	}
	#index #visualmain h2 {
		top: 45px;
	}

/* main
------------------------------*/
	#index #main .box.fR {
		height: 140px;
	}
	#index #main .box dl dt {
		width: 44%;
	}
	#index #main .box dl dd {
		width: 56%;
	}
}