@charset "UTF-8";
/* -----------------------------------------------------------------
	 common css Document
	バレエスタジオベル 様　top.css
 ----------------------------------------------------------------- */


/* body
-------------------------------------------------- */

.bg-top {
	background: #f9f0ee url(/wp/wp-content/themes/belle_tpl/images/top/headerbg_top.png) no-repeat top center;
}

/* header
-------------------------------------------------- */

header {
	position: relative;
}

/* Youtube用
-------------------------------------------------- */
.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
     margin:5% 0 5%;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

/* slider
-------------------------------------------------- */

.slider-wrapper {
	margin: 50px auto 40px auto;
	width: 1000px;
	height: 320px;
	text-align: center;
	z-index: 1;
	position: relative;
}

.photoframe {
	background: url(/wp/wp-content/themes/belle_tpl/images/top/photoframe.png) no-repeat;
	width: 599px;
	height: 390px;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: -32px;
	z-index: 99999999;
}

/* topcontent
-------------------------------------------------- */

.toplead {
	width: 596px;
	height: 190px;
	margin: 20px auto 15px auto;
	font-size:120%;
	color: #fa5485;
	text-align: center;
	left: 50%;
	top:0;
	background: url(images/toplead-bk.png) no-repeat center;
}

.top-banner {
	margin: 0 auto 30px auto;
	position: relative;
}

.top-banner li {
	display: block;
}

.top-banner li a {
	display: block;
	width: 596px;
	height: 163px;
	margin: 0 0 5px 0;
	background-repeat: no-repeat;
	text-indent: -9999em;
}

.top-banner li a:hover {
	opacity: 0.6;
   	filter: alpha(opacity=60);
  	-ms-filter: "alpha(opacity=60)";
    -khtml-opacity: 0.6;
    -moz-opacity: 0.6;
}

.top-banner li.num1 a {
	background-image: url(/wp/wp-content/themes/belle_tpl/images/top/top-banner01-new.png);
}

.top-banner li.num2 a {
	background-image: url(/wp/wp-content/themes/belle_tpl/images/top/top-banner02-new.png);
}

.top-banner li.num3 a {
	background-image: url(/wp/wp-content/themes/belle_tpl/images/top/top-banner03-new.png);
}

.top-banner li.num4 a {
	background-image: url(/wp/wp-content/themes/belle_tpl/images/top/top-banner04-new.png);
}
.top-banner li.num5 a {
	background-image: url(/wp/wp-content/themes/belle_tpl/images/top/top-banner05-new.png);
}
.top-banner li.num6 a {
	background-image: url(/wp/wp-content/themes/belle_tpl/images/top/top-banner06-new.png);
}


wrap-toplist:after {
	content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.whatsnew,
.schedule {
	margin: 0 0 40px 0;
}

.whatsnew {
	width: 596px;
}

.schedule {
	width: 596px;
}

.whatsnew h2,
.schedule h2 {
	background-repeat: no-repeat;
	height: 29px;
	margin: 0 0 30px 0;
	display: block;
	text-indent: -9999em;
}

.whatsnew h2 {
	width: 596px;
	background-image: url(/wp/wp-content/themes/belle_tpl/images/top/toplisttitle_whatsnew.jpg);
}

.schedule h2 {
	width: 596px;
	background-image: url(/wp/wp-content/themes/belle_tpl/images/top/toplisttitle_schedule.jpg);
}

.whatsnew dl {
	font-size: 80%;
	margin: 0 0 10px 0;
	padding: 0 0 5px 0;
	border-bottom: 1px dotted #eae9e7;
	box-sizing: border-box;
}

.whatsnew dt,
.whatsnew dd {
	display: inline-block;
	*display: inline;  
    *zoom: 1;
    vertical-align: top;
    line-height: 1.5em;
	box-sizing: border-box;
}

.whatsnew dt,
.schedule li {
	background: url(/wp/wp-content/themes/belle_tpl/images/top/icon_whatsnew.png) no-repeat 5px 5px;
	margin: 0 15px 0 0;
	padding: 0 0 0 20px;
	color: #000;
}

.whatsnew dd {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	line-height: 1.8em;
}

.whatsnew dd a,
.schedule li a {
	text-decoration: none;
	color: #000;
}
.whatsnew .wh-w {
	height: 250px;
	overflow-y: scroll;
}
.schedule li {
	margin: 0 0 10px 0;
	padding: 0 0 5px 20px;
	font-size: 80%;
	border-bottom: 1px dotted #eae9e7;
}

/* breakpoint for mobile - ipad
-------------------------------------------------- */
@media only screen and (max-width: 567px){

/* topcontent
-------------------------------------------------- */

.toplead {
	width: 100%;
	height: auto;
	text-align: justify;
}

.toplead br {
	display: none;
}

.top-banner li a {
	width: 100%;
	height: 0;
	background-size: contain;
	padding-top: 27.3489932886%;
}

.whatsnew h2,
.schedule h2 {
	width: 100%;
	background-image: none;
	margin: 0 0 10px 0;
	padding: 0 0 0 0;
	text-indent: 0;
	border-bottom: 1px solid #e5e343;
}

.whatsnew,
.schedule {
	margin: 0 0 20px 0;
	width: 100%;
	float: none;
}

.schedule li {
	margin: 0 0 5px 0;
	padding: 0 0 0 10px;
	font-size: 80%;
	border-bottom: 1px dotted #eae9e7;
	background-position: left;
}

.wrap-toplist iframe,
.wrap-toplist embed,
.wrap-toplist object {
	max-width: 100%;
}

/* slider
-------------------------------------------------- */

.slider-wrapper {
	margin: 10px auto 0 auto;
	width: 320px;
	height: auto;
	text-align: center;
	z-index: 1;
	position: relative;
}

slider-wrapper img,
.nivo-slice img,
.nivoSlider img {
	width: 100% !important;
	height: auto !important;
}

.photoframe {
	display: none;
}

.nivo-slice {
	left: 0 !important;
	background-size: 100% auto !important;
}

.nivoSlider {
	position:relative;
	width: 320px !important;
	height: 175px !important;
	left: 0;
	right: 0;
	margin: auto;
	background-size: 100% auto !important;
}

}