@charset "utf-8";
/*------------------------------------------------------------
	トープページ
------------------------------------------------------------*/
#main .mainVisual {
	margin-top: -100px;
	min-height: 348px;
	background: url(../img/instructor/main_img.jpg) no-repeat fixed;
	background-size: 100% auto;
}

#main .comNaviBox .naviUl li a,
#main .comNaviBox .naviUl li a:hover {
	background: url(../img/common/icon19.gif) no-repeat left 4px;
}

#main {
	margin-bottom: 0;
}

#main .mainBox .headLine01 {
	margin-bottom: 25px;
	padding-left: 0;
	font-size: 15px;
	font-weight: 700;
	background: none;
}

#main .mainBox .headLine01 span {
	display: inline-block;
	margin: 0 15px -3px 0;
	font-size: 30px;
	vertical-align: baseline;
}

#main .mainBox .headLine01 .red {
	color: #e6303c;
}

#main .mainBox.index {
	margin-top: 0;
	padding: 0;
}

#main .mainBox.index .bgInner {
	padding: 35px 0 50px;
	position: relative;
}

#main .mainBox.index .bgInner:last-child:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0px;
    background-color: #fff;
    width: 100%;
    height: 45px;
    z-index: 10;
}

#main .mainBox.index .bgInner .comBg {
	background-color: #fff;
}

#main .mainBox.index .bgInner .comSec {
	padding: 40px 0;
}

#main .comList li,
#main .comList li a {
	width: 138px;
}

#main .comList li a .pho {
	width: 138px;
	height: 144px;
	margin-bottom: 0;
}

#main .comList li a .pho:before {
    content: "";
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#main .comList li a .pho span {
	width: 138px;
	height: 144px;
}

#main a:hover .pho:before{

}

#main .comList li a .cat {
    display: block;
    padding: 6px 5px 4px;
    font-size: 11px;
    color: #fff;
    margin-bottom: 5px;
    margin-top: -2px;
}

/* DANCE */
.dance_dance_kids a .cat {background-color: #862020;}

.dance_dance_kids a:hover .cat {background-color:#9c4a4a;}

.dance_dance_kids a .pho:before {border: 2px solid #862020;}

.dance_dance_kids a:hover .pho:before {border: 2px solid #9c4a4a !important;}

.dance_regular a .cat {background-color: #c32b2b;}

.dance_regular a:hover .cat {background-color:#cc5353;}

.dance_regular a .pho:before {border: 2px solid #c32b2b;}

.dance_regular a:hover .pho:before {border: 2px solid #cc5353 !important;}

.dance_kids a .cat {background-color: #e27012;}

.dance_kids a:hover .cat {background-color: #e88d41;}

.dance_kids a .pho:before {border: 2px solid #e27012;}

.dance_kids a:hover .pho:before {border: 2px solid #e88d41 !important;}

.dance_kidsselect a .cat {background-color: #e2127c;}

.dance_kidsselect a:hover .cat {background-color: #e94e9d;}

.dance_kidsselect a .pho:before {border: 2px solid #e2127c;}

.dance_kidsselect a:hover .pho:before {border: 2px solid #e94e9d !important;}


.dance_regular_kidsselect a .cat {background-color: #b68f17;}

.dance_regular_kidsselect a:hover .cat {background-color: #c5a545;}

.dance_regular_kidsselect a .pho:before {border: 2px solid #b68f17;}

.dance_regular_kidsselect a:hover .pho:before {border: 2px solid #c5a545 !important;}


.dance_dance_kids_kidsselect a .cat {background-color: #e88181;}

.dance_dance_kids_kidsselect a:hover .cat {background-color:#ed9a9a;}

.dance_dance_kids_kidsselect a .pho:before {border: 2px solid #e88181;}

.dance_dance_kids_kidsselect a:hover .pho:before {border: 2px solid #ed9a9a !important;}

/* VOCAL */
.vocal_regular a .cat {background-color: #05388e;}

.vocal_regular a:hover .cat {background-color: #3760a5;}

.vocal_regular a .pho:before {border: 2px solid #05388e;}

.vocal_regular a:hover .pho:before {border: 2px solid #3760a5 !important;}

.vocal_dance_kids a .cat {background-color: #54207b;}

.vocal_dance_kids a:hover .cat  {background-color: #744a93;}

.vocal_dance_kids a .pho:before {border: 2px solid #54207b;}

.vocal_dance_kids a:hover .pho:before {border: 2px solid #744a93 !important;}

.vocal_kids a .cat {background-color: #0a8ad2;}

.vocal_kids a:hover .cat {background-color: #389fd8;}

.vocal_kids a .pho:before {border: 2px solid #0a8ad2;}

.vocal_kids a:hover .pho:before {border: 2px solid #389fd8 !important;}


.vocal_rap_regular a .cat {background-color: #06b0b2;}

.vocal_rap_regular a:hover .cat {background-color: #55bdc0;}

.vocal_rap_regular a .pho:before {border: 2px solid #06b0b2;}

.vocal_rap_regular a:hover .pho:before {border: 2px solid #55bdc0 !important;}


.voicetrainer a .cat {background-color: #113058;}

.voicetrainer a:hover .cat {background-color: #415979;}

.voicetrainer a .pho:before {border: 2px solid #113058;}

.voicetrainer a:hover .pho:before {border: 2px solid #415979 !important;}

.vocal_rap a .cat {background-color: #3daac1;}

.vocal_rap a:hover .cat {background-color: #69b0ca;}

.vocal_rap a .pho:before {border: 2px solid #3daac1;}

.vocal_rap a:hover .pho:before {border: 2px solid #69b0ca !important;}

.rap a .cat {background-color: #332f56;}

.rap a:hover .cat {background-color: #5c5978;}

.rap a .pho:before {border: 2px solid #332f56;}

.rap a:hover .pho:before {border: 2px solid #5c5978 !important;}

.rap_regular a .cat{background-color: #6961af;}

.rap_regular a:hover .cat {background-color: #6961af;}

.rap_regular a:hover .pho:before {border: 2px solid #6961af !important;}

.rap_regular  a .pho:before {border: 2px solid #6961af;}

.rap_dance_kids a .cat{background-color: #716baa;}

.rap_dance_kids a:hover .cat {background-color: #716baa;}

.rap_dance_kids a:hover .pho:before {border: 2px solid #716baa !important;}

.rap_dance_kids  a .pho:before {border: 2px solid #716baa;}

.dj a .cat {background-color: #2b2b29;}

.dj a:hover .cat {background-color: #555554;}

.dj a .pho:before {border: 2px solid #2b2b29;}

.dj a:hover .pho:before {border: 2px solid #555554 !important;}


/* ACT */
.act_regular a .cat {background-color: #206039;}

.act_regular a:hover .cat  {background-color: #4d8061;}

.act_regular a .pho:before {border: 2px solid #206039;}

.act_regular a:hover .pho:before {border: 2px solid #4d8061 !important;}

.act_kids a .cat {background-color: #3b9035;}

.act_kids a:hover .cat  {background-color: #60a45b;}

.act_kids a .pho:before {border: 2px solid #3b9035;}

.act_kids a:hover .pho:before {border: 2px solid #60a45b !important;}
/* 210107 以下4行追加 */
.act_dance_kids a .cat {background-color: #206039;}

.act_dance_kids a:hover .cat  {background-color: #4d8061;}

.act_dance_kids a .pho:before {border: 2px solid #206039;}

.act_dance_kids a:hover .pho:before {border: 2px solid #4d8061 !important;}



.kids a .cat {background-color: #009688;}

.kids a:hover .cat {background-color: #33aba0;}

.kids a .pho:before {border: 2px solid #009688;}

.kids a:hover .pho:before {border: 2px solid #33aba0 !important;}


/*.kids_overall a .cat {background-color: #b68f17;}

.kids_overall a:hover .cat {background-color: #c5a545;}

.kids_overall a .pho:before {border: 2px solid #b68f17;}

.kids_overall a:hover .pho:before {border: 2px solid #c5a545 !important;}*/

.kidsdance a .cat {background-color: #de9322;}

.kidsdance a:hover .cat {background-color: #e2a64c;}

.kidsdance a .pho:before {border: 2px solid #de9322;}

.kidsdance a:hover .pho:before {border: 2px solid #e2a64c !important;}


.keysmusicclass a .cat {background-color: #b71de3;}

.keysmusicclass a:hover .cat {background-color: #be4ede;}

.keysmusicclass a .pho:before {border: 2px solid #b71de3;}

.keysmusicclass a:hover .pho:before {border: 2px solid #be4ede !important;}

/* EPI */
.dance_dance_kids_epi a .cat {background-color: #208667;}

.dance_dance_kids_epi a:hover .cat {background-color:#196d53;}

.dance_dance_kids_epi a .pho:before {border: 2px solid #208667;}

.dance_dance_kids_epi a:hover .pho:before {border: 2px solid #196d53 !important;}

.epi a .cat {background-color: #00c1a7;}

.epi a:hover .cat {background-color:#00b098;}

.epi a .pho:before {border: 2px solid #00c1a7;}

.epi a:hover .pho:before {border: 2px solid #00b098 !important;}

.dance_kids_epi a .cat {background-color: #2fbd92;}

.dance_kids_epi a:hover .cat {background-color:#28a07c;}

.dance_kids_epi a .pho:before {border: 2px solid #2fbd92;}

.dance_kids_epi a:hover .pho:before {border: 2px solid #28a07c !important;}

.dance_regular_epi a .cat {background-color: #239a88;}

.dance_regular_epi a:hover .cat {background-color: #1f8878;}

.dance_regular_epi a .pho:before {border: 2px solid #239a88;}

.dance_regular_epi a:hover .pho:before {border: 2px solid #1f8878 !important;}

#main .index .comSec {
	padding: 80px 0 50px;
}

#main .index .comSec:last-child {
	padding-bottom: 80px;
}

#main .index .comSec01 {
	padding: 40px 0 80px;
}

#main .omiya {
	margin: -10px 0 -20px;
	position: relative;
}

#main .omiya .comBg {
	height: 120%;
	top: -50px;
}

#main .mainBox.index .btmBox {
	background-color: #fff;
}



/*------------------------------------------------------------
	detail
------------------------------------------------------------*/
#main .comDetailBox {
	margin-bottom: 52px;
}

#main .comDetailBox .title.choreographer {
	margin-bottom: 20px;
}

#main .detailList li {
	margin-bottom: 10px;
	padding: 17px 25px;
	background-color: #fff;
	overflow: hidden;
}

#main .detailList li .lTxt {
	float: left;
	width: 140px;
	font-size: 13px;
	font-weight: 700;
}

#main .detailList li .rTxt {
	padding-left: 25px;
	float: right;
	width: 885px;
	border-left: 2px solid #000;
}

#main .detailList li .rTxt li {
	margin-bottom: 5px;
	padding: 0;
	font-size: 13px;
	background: none;
}

#main .comDetailBox a[href^="mailto:"],
#main .detailList a[href^="mailto:"] {
	text-decoration: underline;
}

#main .comDetailBox a[href^="mailto:"]:hover,
#main .detailList a[href^="mailto:"]:hover {
	text-decoration: none;
}

#main .detailList .video {
	position:relative;
	width:100%;
	padding-top:56.25%;
}

#main .detailList .video iframe{
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
}


@media all and (min-width: 769px)  {
	#main .listBox {
		height: auto !important;
	}
}
@media all and (min-width: 0) and (max-width: 768px)  {
	#main .mainVisual {
		margin-top: -25%;
		min-height: 200px;
		background: url(../img/instructor/sp_main_img.jpg) no-repeat fixed;
		background-size: auto 320px;
	}

	#main .comNaviBox {
		display: none;
	}

	#main .index .comSec,
	#main .index .comSec01 {
   	 	padding: 0;
	}

	#main .index .comSec:last-child {
		padding: 0;
	}

	#main .mainBox.index .bgInner {
		padding: 0;
	}

	#main .mainBox.index .bgInner .comSec {
		padding: 0;
	}

	#main .mainBox.index .bgInner:last-child:after{
		display: none;
	}

	#main .mainBox .headLine01 {
		margin-bottom: 0;
		padding: 13px 20px;
		position: relative;
		font-size: 12px;
		cursor: pointer;
		background: #F2F2F2;
		border-top: 1px solid #CCC;
	}

	#main .mainBox .headLine01 span {
		margin-right: 5px;
		font-size: 20px;
	}

	#main .mainBox .headLine01:after {
		margin-top: -7px;
		width: 14px;
		height: 14px;
		background: url(../img/common/icon16.gif) no-repeat left top;
		background-size: 14px 14px;
		position: absolute;
		top: 50%;
		right: 20px;

		content: "";
	}

	#main .mainBox .headLine01.open:after {
		background: url(../img/common/icon16_close.gif) no-repeat left top;
		background-size: 14px 14px;
	}

	#main .mainBox .comBg {
		display: none;
	}

	#main .listBox {
		height: 0;
		overflow: hidden;
	}

	#main .comList {
		padding: 0 20px 20px;
		margin: 0;
	}

	#main .comList li {
		margin: 15px 3.5% 0 0;
		width: 31%;
	}

	#main .comList li a {
		width: auto;
	}

	#main .comList li a .pho{
		display: block;
	}

	#main .comList li a:hover .pho:before {
		display: block;
	}

	#main .comList li a .pho span{display: block;}

	#main .comList li a .pho span img{width: 100%;}

	#main .comSec {
		margin: 0;
		padding: 0;
		background-color: #F2F2F2;
	}

	#main .omiya {
		margin: 0;
	}

	/*------------------------------------------------------------
		detail
	------------------------------------------------------------*/
	#main .detail {
		padding-top: 150px;
	}

	#main .comDetailBox {
		margin-bottom: 40px;
	}

	#main .detailList {
		margin: 0 20px;
	}

	#main .detailList li {
		margin-bottom: 5px;
		padding: 15px 15px 12px;
	}

	#main .detailList li .lTxt {
		margin-bottom: 5px;
		float: none;
		width: auto;
		font-size: 11px;
	}

	#main .detailList li .rTxt {
		padding: 8px 0 0;
		float: none;
		width: auto;
		border-top: 2px solid #000;
		border-left: none;
	}

	#main .detailList li .rTxt li {
		font-size: 11px;
		line-height: 1.3;
	}
}

@media all and (min-width: 550px) and (max-width: 768px)  {
	#main .mainVisual {
		min-height: 260px;
		background-size: auto 400px;
	}
}

@media only screen and (min-device-width: 550px) and (max-device-width: 1024px) {
	#main .mainVisual {
		background-attachment: inherit;
		background-size: 100% auto;
	}
}