@charset "utf-8";

@import "reset.css";

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

"Design is not just what it looks like and feels like. Design is how it works." - Steave Jobs

"Think different." - 

Author : EXTRADNA (http://www.extradna.com) 
Last modified : Dec-14, 2012

(C) Copyright EXTRADNA. All rights reserved.

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/*
============================================
COMMON
============================================
*/

a:link { color: #cc0000; text-decoration: underline; }
a:visited { color: #cc0000; text-decoration: underline; }
a:hover { color: #cc0000; text-decoration: none; }
a:active { color: #cc0000; text-decoration: none; }

strong { color:#fffc00;}

#bgRepeat { background:#000 url(../img/body_bg.jpg) no-repeat center top; color:#fff;}


#container { width:983px; margin:0 auto;}

.skpBnr { width:728px; height:90px; margin:0px auto 50px;}
#sdContents .skpBnr{ width:728px; height:90px; margin:70px auto 0px;}

/*==================================================
ヘッダー
==================================================*/

#hdr { width:100%; height:143px;background:#fff;}
#hdrInner { width:955px; margin: 0 auto; padding-top:51px; background:url(../img/hdr.gif) no-repeat left 15px;}

#hdrInfo { width:720px; height:92px; text-indent:-9999px; overflow: hidden; float:left;}
#hdrInfo a { width:670px; height:77px; text-decoration:none; display:block;}
#hdrInfo a:hover { background:#fff; opacity:0.3; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=30)";}

ul#hdrNavi { width:235px; height:77px; float:right;}
ul#hdrNavi li { list-style:none; width:235px; height:36px; margin-top:5px; float:left; text-indent:-9999px; overflow: hidden;}
ul#hdrNavi li:first-child { margin-top:0px;}
ul#hdrNavi li a { height:36px; text-decoration:none; display:block;}
ul#hdrNavi li.about a { background:url(../img/hdrNavi01About.gif) no-repeat left top;}
ul#hdrNavi li.how a { background:url(../img/hdrNavi02How.gif) no-repeat left top;}
ul#hdrNavi li a:hover { background-position:-235px 0px;}

/*==================================================
GG
==================================================*/
#GGWrap{
	width:955px;
	margin: 0 auto;
	position:relative;
}
.cach{
	text-align:center;
	padding:44px;
}
.schedulearea{
	text-align:center;
	padding:30px;
}
.headbnr{
	position: absolute;
	left: 655px;
	top: 167px;
}
#moviearea{
	position: absolute;
	width: 300px;
	height: 200px;
	left: 655px;
	top: 450px;
}

#GGnav{
	margin-bottom:13px;
	height:59px;
}
#GGnav li{
	list-style:none;}
#GGnav li a{
	display:block;
	text-indent:-9999px;
	float:left;
	width:190px;
	height:59px;
	background: url(../img/nav.gif) no-repeat;
	margin-right:1px;
}
#GGnav li.nav01 a{background-position:0 0;}
#GGnav li.nav02 a{background-position:-191px 0;}
#GGnav li.nav03 a{background-position:-382px 0;}
#GGnav li.nav04 a{background-position:-573px 0;}
#GGnav li.nav05 a{background-position:-764px 0;}

#GGnav li.nav01 a:hover{background-position:0 -59px;}
#GGnav li.nav02 a:hover{background-position:-191px -59px;}
#GGnav li.nav03 a:hover{background-position:-382px -59px;}
#GGnav li.nav04 a:hover{background-position:-573px -59px;}
#GGnav li.nav05 a:hover{background-position:-764px -59px;}

#GGnav li a:hover{
	-webkit-transition: 0.3s ease;
	-moz-transition: 0.3s ease;
	-ms-transition: 0.3s ease;
	transition: 0.3s ease;
}

.tex_border{
	background:url(../img/tex_border_bg.gif) repeat 0 0;
	padding:10px
}
.inner{
	color:#0d0d0d;
	background:#FFF;
	padding:25px 25px;
}
.inner h2{
	margin-bottom:20px;
}
.section{
	clear:both;
}
#about,#mustsee,#charactor,#schedule,#present{
	margin-bottom:50px;
}
/*========
about
========*/
#about #l_col{
	width:630px;
	float:left;
	padding-bottom:20px;
}
#about #r_col{
	width:230px;
	float:right;
}
#about .h_border{
	padding-bottom:17px;
	background:url(../img/about_border.gif) repeat-x 0 bottom;
}
#about h3{
	margin-bottom:20px;
}
#about .key{
	margin-bottom:15px;
}

.s3,.s4,.s5{
	width:620px;
	min-height:170px;
	padding:0 0 0 265px;
	
}
.s3{ background:url(../img/photo_s3.jpg) no-repeat 0 0; margin-bottom:30px;}
.s4{ background:url(../img/photo_s4.jpg) no-repeat 0 0; margin-bottom:30px;}
.s5{ background:url(../img/photo_s5.jpg) no-repeat 0 0;}

#about .date{
	background:#f2f2f2;
	padding:12px 15px;
	font-weight:bold;
	margin-top:1.5em;
}
#about h4{
	margin-bottom:10px;
}
#about .section{
	padding-bottom:45px;
}

/*========
mustsee
========*/
#mustsee h3{
	margin-bottom:20px;
}
#mustsee .section{
	overflow:hidden;
	zoom:1;
	padding-bottom:30px;
}
#zoom{
	display:block;
	width:240px;
	height:159px;
	background:url(../img/mustsee_photo04.jpg) no-repeat right 0; 
}
#zoom:hover{
	background-position:right -159px;
	-webkit-transition: 0.3s ease;
	-moz-transition: 0.3s ease;
	-ms-transition: 0.3s ease;
	transition: 0.3s ease;
}

/*========
charactor
========*/
.castboxL,
.castboxR{
	width:415px;
}
.h15{
	clear:both;
	height:15px;
}
.castboxL{
	float:left;
}
.castboxR{
	float:right;
}
.castbox_inner{
	background:#FFF;
	padding:10px;
	line-height:1.25em;
}
/*キャラクター*/
dl.charactor{
	padding:0 0 0 150px;
	min-height:245px;
	margin-bottom:15px;
}
dl.charactor dt{
	margin-bottom:15px;
}

#cast01 dl.charactor{background:url(../img/cast01.jpg) no-repeat;}
#cast02 dl.charactor{background:url(../img/cast02.jpg) no-repeat;}
#cast03 dl.charactor{background:url(../img/cast03.jpg) no-repeat;}
#cast04 dl.charactor{background:url(../img/cast04.jpg) no-repeat;}
#cast05 dl.charactor{background:url(../img/cast05.jpg) no-repeat;}

#cast06 dl.charactor{
	padding:0;
}
#cast06 dl.charactor dt{
	margin-bottom:20px;
}

/*俳優*/
dl.actor{
	font-size:11px;
}
dl.actor dt{
	font-weight:bold;
}
dl.actor dd{
	color:#333333;
}

/*========
schedule
========*/
#schedule .section{
	width:480px;
	min-height:450px;
	background:url(../img/schedule_img.jpg) no-repeat 0 0;
	padding:30px 0 0 390px;
	margin-bottom:15px;
	text-align:center;
	font-size:13px;
	
}
#schedule h3{
	margin-bottom:45px;
}
#schedule p.date{
	font-size:15px;
	margin-bottom:25px;
}
#schedule .schedule_box{
	text-align:left;
	background:#f2f2f2;
	padding:15px 0 15px 15px;
	margin-top:30px;
}
#schedule .schedule_box dt{
	font-weight:bold;
	clear:left;
	float:left;
	width:5.5em;
}
#schedule .schedule_box dd{
	margin:0 0 0 5.5em;
}


/*========
present
========*/
#present .section{
	margin-bottom:15px;}
#present_h{
	position:relative;
	padding:50px 0 0 0;
}
#present_h .fuki{
	position:absolute;
	top:0;
	right:-11px;
}
#present h3{
	margin:0 0 20px 0;
}
#present .h_border{
	padding-bottom:17px;
	background:url(../img/about_border.gif) repeat-x 0 bottom;
	margin:40px 0 20px;
}
#present h5{
	font-size:16px;
	margin:8px;
}
#present .gray{
	background:#f2f2f2;
	padding:15px 0 15px 15px;
	margin-bottom:20px;
	font-size:16px;
}
#present strong{
	color:#000;
	font-weight:bold;
}
#present dl{
	font-size:12px;
	padding:20px 0; 
}
#present dt{
	clear: left;
	float:left;
	width:7em;
	font-weight:bold;
}
#present dd{
	margin:0 0 0 7em;
}
.btn_present{
	overflow:hidden;
	padding:10px 0 20px;
	text-align:center;
}

.btn_present p.btn_present01{
	background:url(../img/btn_present01.gif) no-repeat top;
	height:78px;
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
.btn_present p{
	padding:10px;
	font-size:20px;
	color:#df0615;
	font-weight:bold;
}
.btn_present p.btn_present01{
	background:url(../img/btn_present01.gif) no-repeat top;
	padding:0;
}
a.btn_present01,
a.btn_present02{
	display: block;
	width:431px;
	height:78px;
}
a.btn_present01{
	background:url(../img/btn_present01.gif) no-repeat top;
	margin:0 auto;
}
a.btn_present02{
	background:url(../img/btn_present02.gif) no-repeat top;
	float:right;
}
.btn_present01:hover,
.btn_present02:hover{
	background-position:bottom;
	-webkit-transition: 0.3s ease;
	-moz-transition: 0.3s ease;
	-ms-transition: 0.3s ease;
	transition: 0.3s ease;
}


/* ページトップ */
p.pagetop{
	clear:both;
	height:23px;
}
.pagetop a{
	display:block;
	float:right;
	width:23px;
	height:24px;
	background:url(../img/pagetop.gif) top left no-repeat;
}
.pagetop a:hover{
	background-position:0 -24px;
	-webkit-transition: 0.3s ease;
	-moz-transition: 0.3s ease;
	-ms-transition: 0.3s ease;
	transition: 0.3s ease;
}


/*==================================================
スーパー！ドラマTV
==================================================*/
#sdContents { width:955px; margin: 0 auto; padding:70px 0 35px; background:#fff; color:#000;}

.sdTitle { height:60px; border-bottom:1px solid #999;}


#sdAbout { width:906px; margin:0 auto 0; background:#fef8e5; border:1px solid #999;}
#sdAboutLead { padding:30px 0px; text-align:center;}
#sdAboutTxt { padding:0 10px 0px 22px;}
.sdAboutCol { width:201px; margin-right:21px; padding-bottom:20px; float:left;}
.sdAboutCol img { margin-bottom:12px;}
.sdAboutCol p { margin-top:0; line-height: 1.4em;}
.sdAboutCol p.doramaTitle {
	height: 2.2em;
	font-weight: bold;
}
.sdAboutCol p.onairDate { margin-top:7px; padding-top:7px; border-top:1px dashed #000;}
.sdAboutColMgnAdj { margin-right: 0;}
.sdAboutNum { text-align:right;  color:#555; margin-top:0; padding:0 15px 10px 0;}


#sdHow { width:906px; margin:50px auto 0; background:#fef8e5; border:1px solid #999;}
#sdHowCol { width:853px; height:358px; margin:0px auto;}
#sdHowLogo { width:376px; padding-top:40px; float:left;}
#sdHowCatch { width:382px; margin-right:30px; padding-top:40px; float:right;}
#sdHowLead { height:88px; text-align:center;}
#sdHowFee { height:152px; text-align:center;}
#sdHowJoin { height:85px; text-align:center;}

#sdHowDtail{ padding:0 0px 20px 19px;}
.sdHowDtailCol {
	text-align:center;
	width:403px;
	padding:9px;
	background:#FFF;
	border:solid 1px #CCC;
	margin-right:20px;
	padding-bottom:20px;
	float:left;
}
.sdHowDtailCol a{
	display:block;
}
.sdHowDtailCol a:hover img{
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
	-webkit-transition: 0.3s ease;
	-moz-transition: 0.3s ease;
	-ms-transition: 0.3s ease;
	transition: 0.3s ease;
}
#ftr { text-align:center; margin-top:35px; padding:0 20px; font-size:70%;}



/*
=================================================
汎用
=================================================
*/
.mgnB10 { margin-bottom: 10px;}
.mgnB20 { margin-bottom: 20px;}
.mgnB40 { margin-bottom: 40px;}
.flL{ float:left; padding-right:15px;}
.flR{ float:right; padding-left:15px;}
.mh6{ min-height:6em;}
/*
=================================================
フロートクリア用 clearfixクラス
=================================================
*/

.clearfix:after { content: " "; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix { display: inline-block;min-height: 1%;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-Mac */