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

/*****************************************************************
	ナビ(TOP)
*****************************************************************/

.navi1 a{
	width:50px;
	background-position:0 -160px;
}

/*****************************************************************
	トップ
*****************************************************************/

#top{
	width:960px;
	margin:0 auto;
	overflow:hidden;
}

/*****************************************************************
	メインビジュアル
*****************************************************************/

.main_visual{
	width:960px;
	float:left;
}

.main_visual_img{
	width:960px;
	height:400px;
	float:left;
}

.slider_icon{
	width:66px;
	height:10px;
	margin:10px 0 0 0;
	float:right;
}

/*****************************************************************
	NEWS
*****************************************************************/
/*動画1つを右に並べるレイアウト用
.top_news{
	width:540px;
	margin:20px 0 0 0;
	float:left;
}
↓横幅いっぱいで動画を下に2つ並べるレイアウト*/
.top_news{
	width:100%;
	margin:20px 0 0 0;
	float:left;
}

.title02{
	width:100%;
	height:45px;
	border-bottom:10px solid #ff2600;
	float:left;
}

.title02 h2{
	font-size:3.1em;
	font-weight:normal;
	color:#000000;
	line-height:45px;
	text-indent:-3px;
}

.top_news_article{
	width:100%;
	height:55px;
	border-bottom:1px solid #cccccc;
	margin:10px 0 0 0;
	float:left;
	position:relative;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
}

.top_news_article a{
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	top:0;
	left:0;
}

.top_news_article:hover{
	opacity:0.7;
}

.top_news_article_line{
	width:100%;
	height:20px;
	float:left;
}

.top_news_genre1{/*イベント告知*/
	width:100px;
	height:20px;
	background-color:#000000;
	float:left;
}

.top_news_genre1 p{
	font-size:0.8em;
	color:#ffffff;
	line-height:20px;
	text-align:center;
}

.top_news_genre2{/*代講・休講*/
	width:100px;
	height:20px;
	background-color:#000000;
	float:left;
}

.top_news_genre2 p{
	font-size:0.8em;
	color:#ffffff;
	line-height:20px;
	text-align:center;
}

.top_news_genre3{/*その他*/
	width:100px;
	height:20px;
	background-color:#000000;
	float:left;
}

.top_news_genre3 p{
	font-size:0.8em;
	color:#ffffff;
	line-height:20px;
	text-align:center;
}

/*動画1つを右に並べるレイアウト用
.top_news_date{
	width:440px;
	height:20px;
	float:left;
}
↓横幅いっぱいで動画を下に2つ並べるレイアウト*/
.top_news_date{
	width:860px;
	height:20px;
	float:left;
}

.top_news_date p{
	font-size:1em;
	line-height:20px;
	text-align:right;
}

.top_news_article_title{
	width:100%;
	height:20px;
	margin:10px 0 0 0;
	float:left;
}

.top_news_article_title p{
	font-size:1em;
	line-height:20px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.top_news_readmore{
	width:130px;
	height:27px;
	background-color:#000000;
	margin:10px 0 0 0;
	float:right;
	position:relative;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
}

.top_news_readmore a{
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	top:0;
	left:0;
}

.top_news_readmore:hover{
	opacity:0.7;
}

.top_news_readmore p{
	color:#ffffff;
	line-height:29px;
	text-indent:10px;
}
/*****************************************************************
	MOVIE
*****************************************************************/
/*
.pickup_movie01{
	width:400px;
	margin:20px 0 0 0;
	float:right;
}
*/

.pickup_movie01{
	width:475px;
	margin:10px 0 0 0;
	float:left;
}

.pickup_movie02{
	width:475px;
	margin:10px 0 0 0;
	float:right;
}

/*****************************************************************
	STUDIO RENTAL/INSTRUCTOR COURSE/ACCESS
*****************************************************************/
/*
.top_banner_box{
	width:400px;
	margin:20px 0 0 0;
	float:right;
}

.top_banner{
	width:100%;
	margin:10px 0 0 0;
	float:left;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
}

.top_banner:first-child{
	margin:0;
}

.top_banner a{
	width:100%;
	display:block;
}

.top_banner:hover{
	opacity:0.7;
}
*/
/*****************************************************************
	LESSON & INSTRUCTOR
*****************************************************************/

.section{
	width:960px;
	margin:30px 0 0 0;
	float:left;
}

.title01{
	width:100%;
	height:45px;
	border-bottom:10px solid #ff2600;
	float:left;
}

.title01 h2{
	font-size:3.1em;
	font-weight:normal;
	color:#000000;
	line-height:45px;
	text-indent:-3px;
}

.class_list1{/*1クラス用 margin有*/
	width:112px;
	margin:10px 9px 0 0;
	float:left;
}

.class_list1_ml{/*1クラス用 margin無*/
	width:112px;
	margin:10px 0 0 0;
	float:left;
}

.class_list2{/*2クラス用 margin有*/
	width:233px;
	margin:10px 9px 0 0;
	float:left;
}

.class_list2_ml{/*2クラス用 margin無*/
	width:233px;
	margin:10px 0 0 0;
	float:left;
}

.class_list3{/*3クラス用 margin有*/
	width:354px;
	margin:10px 9px 0 0;
	float:left;
}

.class_list3_ml{/*3クラス用 margin無*/
	width:354px;
	margin:10px 0 0 0;
	float:left;
}

.class_list4{/*4クラス用 margin有*/
	width:475px;
	margin:10px 9px 0 0;
	float:left;
}

.class_list4_ml{/*4クラス用 margin無*/
	width:475px;
	margin:10px 0 0 0;
	float:left;
}

.class_list5{/*5クラス用 margin有*/
	width:596px;
	margin:10px 9px 0 0;
	float:left;
}

.class_list5_ml{/*5クラス用 margin無*/
	width:596px;
	margin:10px 0 0 0;
	float:left;
}

.class_list6{/*6クラス用 margin有*/
	width:718px;
	margin:10px 9px 0 0;
	float:left;
}

.class_list6_ml{/*6クラス用 margin無*/
	width:718px;
	margin:10px 0 0 0;
	float:left;
}


.class_list7{/*7クラス用 margin有*/
	width:838px;
/*	width:840px;*/
	margin:10px 9px 0 0;
	float:left;
}

.class_list7_ml{/*7クラス用 margin無*/
	width:838px;
/*	width:840px;*/
	margin:10px 0 0 0;
	float:left;
}

.class_list8{/*8クラス用 margin有*/
	width:960px;
	margin:10px 9px 0 0;
	float:left;
}

.class_list8{/*8クラス用 margin無*/
	width:960px;
	margin:10px 0 0 0;
	float:left;
}

.class_list_title{
	width:100%;
	padding: 6px 0;
	background-color:#000000;
	float:left;
}

.class_list_title h3{
	font-size:0.9em;
	color:#ffffff;
	font-weight:normal;
	text-align:center;
	line-height: 1.2;
}

.class_list_title h3 span{/*小学高学年～中学生用*/
	font-size:0.8em;
}

.top_class_individual{
	width:112px;
	margin:10px 9px 0 0;
	float:left;
	position:relative;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
}

.top_class_individual:last-child{
	margin:10px 0 0 0;
}

.top_class_individual.-line2{
	margin-top: 22px;
}

.top_class_individual a{
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	top:0;
	left:0;
}

.top_class_individual:hover{
	opacity:0.7;
}

.top_class_individual_img{
	max-width:112px;
	height:112px;
	float:left;
}

.top_class_individual_img img{
	width:112px;
	height:112px;
/*
	border-right:1px solid #000000;
	border-bottom:1px solid #000000;
	border-left:1px solid #000000;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
*/
}

.top_class_individual_name{/*ダンス経験者*/
	width:100%;
	background-color: var(--color-normal);
	float:left;
	padding: 3px 0;
	height: 13px;
}

.top_class_individual_name p{
	font-size:0.68em;
	line-height:1.2;
	text-align:center;
	white-space: nowrap;
}
.top_class_individual_name.-yellow {
	background: var(--color-yellow);
}
.top_class_individual_name.-red {
	background: var(--color-red);
	color: #fff;
}
.top_class_individual_name.-blue {
	background: var(--color-blue);
	color: #fff;
}
.top_class_individual_name.-green {
	background: var(--color-green);
}

.top_class_individual_line{
	width:100%;
	height:20px;
	border-bottom:1px solid #888888;
	float:left;
}

.top_class_individual_line p{
	font-size:0.7em;
	line-height:20px;
	text-align:center;
}

.top_class_comingsoon{
	width:112px;
	height:195px;
	background:#ffffff;
	border:1px solid #cccccc;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	margin:10px 9px 0 0;
	padding:77px 0 0 0;
	float:left;
}

.top_class_comingsoon:last-child{
	margin:10px 0 0 0;
}

.top_class_comingsoon p{
	color:#cccccc;
	text-align:center;
	line-height:20px;
}

.schedule_supplementary{
	width:100%;
	float:left;
}

.schedule_supplementary p{
	font-size:0.9em;
	text-align:left;
}

.schedule_supplementary span{
	font-size:1.4em;
}

.schedule_supplementary .normal{
	color:#f4f4f4;
}

.schedule_supplementary .yellow{
	color:#ffe26d;
}

.schedule_supplementary .blue{
	color:#ccffff;
}

.schedule_supplementary .green{
	color:#ccff99;
}


.schedule_supplementary .pink{
	color:#ffccff;
}

.schedule_supplementary .red{
	color:#ff0461;
}

.schedule_supplementary .orange{
	color:#ff4f02;
}


.schedule_supplementary .grey{
	color:#aaaaaa;
}

/*****************************************************************
	STUDIO
*****************************************************************/

.title03{
	width:100%;
	height:45px;
	border-bottom:10px solid #ff2600;
	float:left;
}

.title03 h2{
	font-size:3.1em;
	font-weight:normal;
	color:#000000;
	line-height:45px;
	text-indent:-1px;
}

.studio_introduction{
	width:100%;
	margin:10px 0 0 0;
	float:left;
}

.studio_individual{
	width:225px;
	margin:0 20px 0 0;
	float:left;
}

.studio_individual:last-child{
	margin:0;
}

.studio_individual_img{
	width:225px;
	height:150px;
	float:left;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
}

.studio_individual_img a{
	width:100%;
	height:100%;
	display:block;
}

.studio_individual_img:hover{
	opacity:0.7;
}
/*
.studio_individual_img img{
	width:225px;
	height:150px;
	border:1px solid #000000;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
}
*/
.studio_explanation{
	width:225px;
	float:left;
}

.studio_explanation p{
	font-size:0.8em;
	line-height:20px;
}

/*****************************************************************
	LINK
*****************************************************************/

.top_link_banner_box{
	width:100%;
	margin:10px 0 0 0;
	float:left;
}

.top_link_banner{
	width:225px;
	margin:0 20px 0 0;
	float:left;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
}

.top_link_banner:last-child{
	margin:0;
}

.top_link_banner a{
	width:100%;
/*	height:100%;	*/
	display:block;
}

.top_link_banner:hover{
	opacity:0.7;
}

.top_link_banner_s{
	width:225px;
	float:left;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
}

.top_link_banner_s:nth-child(2){
	margin:20px 0 0 0;
}

.top_link_banner_s a{
	width:100%;
/*	height:100%;	*/
	display:block;
}

.top_link_banner_s:hover{
	opacity:0.7;
}