@charset "utf-8";

/* ****************************************************
Title: index.css
---------------------------------------------------------------------------- */

#header {background:url(../img/index/color_bg.png) no-repeat top left; height:680px; position: relative;}

.nav_matsu{top: 307px; left: 190px;}
.nav_class {top: 14px; left: 245px;}
.nav_live{top: 159px; left: 196px;}
.nav_review{top: 437px; left: 278px;}
.nav_rental{top: 509px; left: 429px;}
.nav_contact{top: 196px; left: 21px;}
.nav_fb{top: 361px; left: 26px;}
.nav_yt {top: 494px; left: 116px;}
.matsu {top: 140px; left: 692px;}

h1 {text-align: center; color: #C6C; font-size: 70%;}

/* =============================
 .section0
==============================*/
.sec00 {background: url(../img/index/bg_topic2.png) no-repeat bottom left; width:1000px; padding-bottom:80px;border-radius: 20px;}
.sec00 .sc_wrap { background:url(../img/index/bg_topic.png) no-repeat top left; padding:30px 30px 0;}
.sec00 h1 {text-align:left; margin-bottom:10px;}
.sec00 .topic { background: url(../img/index/speker.png) no-repeat top left; padding-left: 100px; margin-left:10px;}
.sec00 p {font-size: 140%;}
.sec00 dl dt,
.sec00 dl dd {font-size: 140%;}

.sec00 .topic2 { background: url(../img/index/first.png) no-repeat top left; padding-left: 100px; margin-left:10px;}

.topic h1 {color: rgb(255, 51, 0);font-size: 200%;font-weight: bold;}
.topic h2 {color: rgb(255, 51, 0);font-size: 150%;font-weight: bold;}
.topic h3 {color:#000;font-size: 150%;font-weight: bold;}


.topic2 h1 {color: rgb(255, 51, 0);font-size: 200%;font-weight: bold;}
.topic2 h2 {color: rgb(255, 51, 0);font-size: 150%;font-weight: bold;}
.topic2 h3 {color:#000;font-size: 150%;font-weight: bold;}
.topic2 p.kome {    color: rgb(255, 51, 0);
    font-size: 90%;

}

/* =============================
 .section1
==============================*/
.sec01 .about,
.sec01 .studiolist {width: 450px;}

.sec01 .about {background: url(../img/index/bg_about.png) no-repeat top left; height: 726px;padding: 30px 20px;}

.sec01 .about .catch {font-size: 150%; font-weight: bold; color:#FF3300; margin-bottom: 15px;}

.sec01 .studiolist{background: url(../img/index/bg_studio.png) no-repeat top left; height: 726px;padding: 30px 20px;}
.sec01 .studiolist .studio {margin-bottom: 10px; padding-bottom: 10px; border-bottom: dashed 1px #f30;}
.sec01 .studiolist .studio_txt {width: 200px;}
.sec01 .studiolist .studio_txt dt {font-weight: bold; color: #F30;}
.sec01 .studiolist .studio_txt dd {font-size:85%;}
.sec01 .studiolist .studio_txt .tomap {text-align:right; margin-top:5px;}

/* =============================
 .section2
==============================*/
.free {width:660px;}
.free .free_wrap {padding: 38px 20px 20px; background: url(../img/index/el_bg.png) no-repeat top left; height:380px;}
.free .free_wrap .fl {width:285px; padding: 20px 0;}
.free .free_wrap .first {padding-right:20px; margin-right:20px; border-right: solid 1px #999966;}
.free .free_wrap dl dt {margin-bottom: 15px;}
.free .free_wrap dl dt.kids {width: 55%; margin: 0 auto 15px;}

.cs {width:660px;}
.cs .cs_wrap {padding: 38px 20px 20px; background: url(../img/index/cs_bg.png) no-repeat top left; height:440px;}
.cs .cs_wrap .fl {width:285px; padding: 20px 0;}
.cs .cs_wrap .first {padding-right:20px; margin-right:20px; border-right: solid 1px #999966;height: 310px;}
.cs .cs_wrap dl dt {margin-bottom: 15px;}



/* =============================
 .section3
==============================*/
.pagination {
margin: 0 auto;
min-height: 1px;
}

/*3つ時*//*
.pagination {width: 75px;}

/*4つ時*//*
.pagination {width: 100px;}

/*5つ時*/
.pagination {width: max-content;}




.full {position:relative;}
.full span {    display: block;
    position: absolute;
    top: 5px;
    right: 5px;
    background: transparent url("../img/live/full.png") no-repeat scroll 0% 0%;
    width: 72px;
    height: 72px;
}




.sec03 .live {width:320px; height:498px; background:url(../img/index/lf_bg.png) no-repeat top left; }
.sec03 #live {position:relative;}

.sec03 .live .pd_wrap {padding-top:38px;}



/*
	Slideshow
*/

#slides {
	position:absolute;
	top:120px;
	left:43px;
	z-index:100;
}


.slides_container {
	width:235px;
	overflow:hidden;
	position:relative;
	display:none;
	margin-bottom:3px;
}


.slides_container div {
	width:235px;
	height:340px;
	display:block;
	position: relative;
}

.livedata {position: absolute;
bottom: 0px;
background: url(../img/index/livedata_bg.png) repeat top left;
width: 235px;
text-align: center;
padding: 0.2em 0;
color:#fff;
font-size:75%;
}

.slides_container div.panel_img dl dt {
	font-weight: bold;
}

div.slide01 p.slide01_btn,
div.slide02 p.slide01_btn,
div.slide03 p.slide01_btn,
div.slide04 p.slide01_btn {
	position: absolute;
	bottom: 50px;
	left:250px;
}

.slides_container div img {
	display:block;
}

/*
	Next/prev buttons
*/

#slides .next,#slides .prev {
	position:absolute;
	top:105px;
	left:0px;
	width:21px;
	height:21px;
	display:block;
	z-index:101;
}

#slides .next {
	left:300px;
}

/*
	Pagination
*/


.pagination:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}

* html .pagination {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

.pagination li {
	float:left;
	margin:0 6px;
	list-style:none;
}

.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url(../img/pagination.png);
	background-position:0 0;
	float:left;
	overflow:hidden;
}

.pagination li.current a {
	background-position:0 -12px;
}





/* =============================
 .section4
==============================*/

.sec04 .facebook {width: 490px; height:536px;background: url(../img/index/fb_bg.png) no-repeat top left; padding-top:40px;}
.sec04 .facebook .fb_wrap { width: 445px; margin: 0 auto;}
.sec04 .youtube {width: 490px; height:536px;background: url(../img/index/yt_bg.png) no-repeat top left;padding-top:40px;}
.sec04 .youtube .yt_wrap { width: 445px; margin: 0 auto;}