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

#areaCourse {}

#areaCourse .typeTtl {
	margin-bottom:65px;
	padding:1.2em 1.0em;
	position:relative;
	overflow:hidden;
	border-radius: 10px;        /* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 10px;   /* Firefox用 */
}
#areaCourse .typeTtl .photo{
	position:absolute;
	left:0;
	top:0;
	/*width:100%;*/
	min-width:100%;
	min-height:100%;
	background:#333;
	line-height:0;
	z-index:2;
}
#areaCourse .typeTtl .photo img{
	/*width:100%;
	height:auto;*/
	min-width:100%;
	min-height:100%;
	opacity:0.5;
}

#areaCourse .typeTtl h3{
	box-sizing:border-box;
	text-align:center;
	font-weight:bold;
	font-size:1.6em;
	/*color:#fff;
	background:#FF6E6E;*/
	color:#FF6E6E;
	background:#fff;
	width:200px;
	height:200px;
	line-height:1.8em;
	border-radius: 200px;        /* CSS3草案 */  
	-webkit-border-radius: 200px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 200px;   /* Firefox用 */
	margin:0 auto 10px;
	padding:70px 15px 0;
	position:relative;
	z-index:10;
}

#areaCourse .typeTtl p{
	font-size:1.07em;
	font-weight:bold;
	color:#fff;
	/*color:#FFA8A8;*/
	text-align:center;
	position:relative;
	z-index:11;
	margin-bottom:0;
}

#areaCourse .groupCourse {
	padding:0 0 55px 0;
	border-bottom:solid 1px #ccc;
	margin-bottom:55px;
}

#areaCourse .frameDeview {
	width:200px;
	height:200px;
	line-height:200px;
	box-sizing:border-box;
	position:relative;
	background:#60DFDB no-repeat center center;
	background-size:100%;
	color:#fff;
	margin:0 auto;
	font-size:2.07em;
	font-weight:bold;
	text-align:center;
	border-radius: 200px;        /* CSS3草案 */  
	-webkit-border-radius: 200px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 200px;   /* Firefox用 */
	padding:0 0 0 0;
	transition-property:width, height, line-height, font-size;
	transition-duration:0.3s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}
#areaCourse #courseActorKari .frameDeview {
	background-image:url("css_img/photoBgDebut_actor.png");
}
#areaCourse #courseSingerKari .frameDeview {
	background-image:url("css_img/photoBgDebut_singer.png");
}

#areaCourse .groupCourse h4 {
	text-align:center;
	margin-bottom:25px;
	position:relative;
	padding:0 0 1.5em;
	font-size:1.36em;
	font-weight:bold;
	color:#999;
}

#areaCourse .groupCourse span {
	position:absolute;
	bottom:0;
	left:0;
	display:block;
	width:100%;
	font-size:0.78em;
	color:#FFA8A8;
}

#areaCourse dl {
	border:solid 1px #999;
	border-radius: 15px;        /* CSS3草案 */  
	-webkit-border-radius: 15px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 15px;   /* Firefox用 */
	overflow:hidden;
}

#areaCourse dt {
	text-align:center;
	box-sizing:border-box;
	padding:5px 15px;
	font-size:1.17em;
	color:#fff;
	background:#999;
}

#areaCourse dd {
background:#fff;
padding:15px 15px;
}

#areaCourse .boxItmCourse {
	margin-bottom:55px;
	position:relative;
	padding-bottom:55px;
}
#areaCourse .boxItmCourse:after {
	position:absolute;
	content:"";
	display:block;
	width:35px;
	height:35px;
	border-left:solid 3px #ccc;
	border-bottom:solid 3px #ccc;
	bottom:0;
	left:50%;
	margin-left:-17px;
	-moz-transform:    rotate( -45deg );  /* Firefox用 */
	-webkit-transform: rotate( -45deg );  /* Chrome,Safari,新しいOpera用 */
	-o-transform:      rotate( -45deg );  /* 古いOpera用 */
	-ms-transform:     rotate( -45deg );  /* IE9用 */
	transform:         rotate( -45deg );  /* CSS3の書き方 */
}

/* ウィンドウ幅が768zpx〜の場合に適用するCSS */
@media screen and ( min-width:768px ){

	#areaCourse .frameDeview {
	width:400px;
	height:400px;
	line-height:400px;
	font-size:3.22em;
	border-radius: 400px;        /* CSS3草案 */  
	-webkit-border-radius: 400px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 400px;   /* Firefox用 */
}

}

/* ウィンドウ幅が992px〜の場合に適用するCSS */
@media screen and ( min-width:992px ){

}