@charset "utf-8";

/* ヘッダー
========================================== */

#header {
	background:#f7f4e8;
	border-bottom:1px solid #ebe7da;
}
#header ul {
	width:1033px;
	margin:0 auto;
	text-align:right;
}
#header ul li {
	display:inline-block;
	*display:inline;
	*zoom:1;
}

/* メインレイアウト
========================================== */

#wrap {
	max-width:1033px;
	margin-left:auto;
	margin-right:auto;
}
#wrap:after {
	content:"."; display:block; clear:both; height:0; visibility:hidden; font-size:0;
}
#left {
	float:left;
	width:168px;
}
#left #logo {
	padding:42px 0 58px;
	margin:0 auto;
	text-align:center;
}
#main {
	width:850px;
	float:left;
	border-left:1px solid #dfdacd;
	margin-left:14px;
	background:#FAE9EE;
}
#contents {
	padding-left:67px;
	margin-top:28px;
}

/* メインビジュアル
========================================== */

#main #head {
	position:relative;
	height:560px;
	background:#FFF;
}
#main #head img {
	position:absolute;
}
#main #head img#head_main  {top:190px;left:27px;z-index:10;}
#main #head img#head_tit   {top:15px;left:158px;z-index:10;}
#main #head img#head_badge {top:-15px;left:-15px;z-index:10;}
#main #head img#head_ebiko {bottom:-20px;left:-20px;z-index:10;}
#main #head img#head_sp    {bottom:-30px;right:53px;z-index:10;}
#main #head img#head_staff {top:152px;left:492px;z-index:10;}
#main #head #head_player  {
	display: none;
	position:absolute;
	top:190px;
	left:27px;
	z-index: 100;
	width: 608px;
	height: 342px;
}
#main #head #video_player  {
	display: none;
	position:absolute;
	top:190px;
	left:27px;
	z-index: 100;
	width: 608px;
	height: 342px;
}

#head #head_ebiko:hover {
	animation:rumble 0.12s linear infinite;
	cursor:pointer;
}
@keyframes rumble{
	0%	{transform:rotate(0deg)	translate(0,0);}
	12.5%	{transform:rotate(0.4deg)	translate(1px,-1px);}
	25%	{transform:rotate(0.8deg)	translate(0px,1px);}
	37.5%	{transform:rotate(0.4deg)	translate(-1px,0);}
	50%	{transform:rotate(0deg)	translate(0,0);}
	62.5%	{transform:rotate(-0.4deg)	translate(1px,0);}
	75%	{transform:rotate(-0.8deg)	translate(0,1px);}
	87.5%	{transform:rotate(-0.4deg)	translate(-1px,-1px);}
	100%	{transform:rotate(0deg)	translate(0,0);}
}

/* SNSボタン
========================================== */

ul.snsList {
	margin-top:30px;
}
ul.snsList li {
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:top;
	margin-right:5px;
}

/* AREA共通
========================================== */

#txt em {
	border-bottom:dashed 1px #aaa;
}

/* AREA01
========================================== */

#area01 {
	background:url(../img/line_slash750.png) no-repeat -67px 0;
	margin-top:40px;
	position:relative;
	margin-left:-67px;
}
#area01:after {
	content:"."; display:block; clear:both; height:0; visibility:hidden; font-size:0;
}
#area01 #icDon {
	position:absolute;
	top:50px;
	left:67px;	
}
#area01 #pic {
	float:left;
	width:357px;
	margin-left:57px;
	padding-top:115px;
}
#area01 #txt {
	float:left;
	width:236px;
	margin-left:40px;
	padding-top:110px;
	font-size:14px;
}
#area01 #tit {
	float:left;
	margin-left:34px;
}
#area01 #ic_ebi {
	position:absolute;
	bottom:0;
	right:30px;
}

/* AREA02
========================================== */

#area02 {
	background:url(../img/line_slash666.png) no-repeat right 0;
	margin-top:50px;
	padding-bottom:40px;
	position:relative;
}
#area02:after {
	content:"."; display:block; clear:both; height:0; visibility:hidden; font-size:0;
}
#area02 #icDon {
	position:absolute;
	top:50px;
	right:45px;	
}
#area02 #tit {
	float:left;
}
#area02 #pic {
	float:right;
	width:347px;
	margin-right:55px;
	padding-top:115px;
}
#area02 #txt {
	float:left;
	width:236px;
	margin-left:40px;
	padding-top:110px;
	font-size:14px;
}
#area02 #ic_ebi {
	position:absolute;
	bottom:0;
	left:248px;
}

/* AREA03
========================================== */

#area03 {
	background:url(../img/line_slash750.png) no-repeat -67px 0;
	margin-top:50px;
	position:relative;
	margin-left:-67px;
}
#area03:after {
	content:"."; display:block; clear:both; height:0; visibility:hidden; font-size:0;
}
#area03 #icDon {
	position:absolute;
	top:50px;
	left:67px;	
}
#area03 #pic {
	float:left;
	width:392px;
	margin-left:47px;
	padding-top:40px;
}
#area03 #txt {
	float:left;
	width:236px;
	margin-left:15px;
	padding-top:200px;
	font-size:14px;
}
#area03 #tit {
	float:left;
	margin-left:34px;
}

/* AREA02
========================================== */

#area04 {
	background:url(../img/line_slash666.png) no-repeat right 0;
	margin-top:50px;
	padding-bottom:40px;
	position:relative;
}
#area04:after {
	content:"."; display:block; clear:both; height:0; visibility:hidden; font-size:0;
}
#area04 #icDon {
	position:absolute;
	top:50px;
	right:45px;	
}
#area04 #tit {
	float:left;
}
#area04 #pic {
	float:right;
	width:346px;
	margin-right:55px;
	padding-top:85px;
}
#area04 #txt {
	float:left;
	width:236px;
	margin-left:40px;
	padding-top:110px;
	font-size:14px;
}
#area04 #ic_ebi {
	position:absolute;
	bottom:0;
	left:288px;
}

/* AREA05
========================================== */

#area05 {
	background:url(../img/line_slash750.png) no-repeat -67px 0;
	margin-top:50px;
	position:relative;
	margin-left:-67px;
}
#area05:after {
	content:"."; display:block; clear:both; height:0; visibility:hidden; font-size:0;
}
#area05 #icDon {
	position:absolute;
	top:50px;
	left:67px;	
}
#area05 #pic {
	float:left;
	width:392px;
	margin-left:47px;
	padding-top:125px;
}
#area05 #txt {
	float:left;
	width:236px;
	margin-left:15px;
	padding-top:115px;
	font-size:14px;
}
#area05 #tit {
	float:left;
	margin-left:34px;
}

/* AREA06
========================================== */

#area06 {
	background:url(../img/line_slash750.png) no-repeat 47px 0;
	margin-top:50px;
	position:relative;
	margin-left:-67px;
}
#area06 #pic {
	text-align:center;
	padding:60px 0 0;
}

/* ポスター
========================================== */

#poster {
	padding-top:80px;
	position:relative;
	margin-left:-20px;
}
#poster #icDon {
	position:absolute;
	top:30px;
	right:45px;
}

/* ページトップへ
========================================== */

#pageTop {
	text-align:right;
	margin:50px 67px 20px 0;
}
#pageTop a {
	background:url(../img/ic_pagetop.gif) no-repeat 0 50%;
	padding-left:24px;
	font-size:13px;
}
#pageTop a em {
	border-bottom:dotted 1px #999;
}

/* ネタバレ
========================================== */

#netabare {
	padding-top:80px;
	margin-left:-20px;
}
#netabare h3 {
	text-align:center;
	font-size:18px;
}
#netabare dl {
	margin-top:7px;
	width:690px;
	background:#FEFCFC;
	border:dashed 1px #CCC;
	padding:20px 20px 20px 35px;
}
#netabare dl:after {
	content:"."; display:block; clear:both; height:0; visibility:hidden; font-size:0;
}
#netabare dl dt {
	float:left;
	width:290px;
	margin-top:10px;
}
#netabare dl dd {
	float:left;
	width:380px;
	font-size:17px;
}
#netabare ul {
	margin-top:10px;
}
#netabare ul li {
	text-indent:-20px;
	padding-left:20px;
	padding-right:40px;
}

/* フッター（#footerのfont-familyと画像パスのみ変更）
========================================== */

#footer  {background:#000; padding:20px 0;font-size:12px; line-height:1.5em; font-family:"ＭＳ Ｐ明朝", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", Osaka, serif;}
	#footer a        {border-bottom:1px dotted #000; color:#5e534a;}
	#footer a:hover  {border-color:#71655d; color:#71655d;}
	#footInner  {width:980px; margin:0 auto;}
		#footInner #fLogo  {float:left;}
		
		#footInner #fInfo  {float:right; width:720px; height:100%;}
			
			/* footSitemap */
			#footSitemap  {margin-bottom:25px;}
				#footSitemap ul  {border-left:1px dotted #2b2925; padding:0 0 0 17px; float:left; height:100%;}
				#footSitemap .clm1  {width:193px;}
				#footSitemap .clm2  {width:173px;}
				#footSitemap .clm3  {width:193px;}
				#footSitemap ul li  {background:url(../../material/images/common/ic_arrow-d_x.gif) no-repeat 0 50%; padding-left:10px; line-height:200%;}
				#footSitemap #qr_code  {border-left:1px dotted #2b2925; padding-left:17px; float:right;}
                #footSitemap #qr_code li  {background:none; padding:0;}
                
                #footSitemap .blank li  {background:url(../../material/images/common/ic_blank-link.gif) no-repeat 0 50%; padding-left:10px;}
                
                #footSitemap ul .no_link   {color:#8f8782; background:none;}
			
			/* exList */
			#exList  {float:left; text-align:left; font-size:83%;}
				#exList li  {display:inline-block; *display:inline; *zoom:1; background:url(../images/common/line_dot-y.gif) no-repeat 0 50%; padding:0 0 0 10px; line-height:100%; vertical-align:middle; margin-right:10px;}
				#exList .first  {background:none; padding-left:0;}
				#exList a   {background:url(../../material/images/common/ic_blank-link.gif) no-repeat 0 50%; padding-left:10px;}

			/* lngList */
			#lngList  {float:right;}
				#lngList li   {float:left;}
				#lngList .en  {background:url(../../material/images/common/btn_language-en_on.gif) no-repeat 0 0;}
				#lngList .ch  {background:url(../../material/images/common/btn_language-ch_on.gif) no-repeat 0 0; margin-left:10px;}

.pointTINY {cursor:pointer; color:#0066FF;}

.tbox {position:absolute; display:none; padding:14px 17px; z-index:900}
.tinner {padding:15px; -moz-border-radius:5px; border-radius:5px; background:#fff url(../../material/images/common/ic_preload.gif) no-repeat 50% 50%; border-right:1px solid #333; border-bottom:1px solid #333}
.tmask {position:absolute; display:none; top:0px; left:0px; height:100%; width:100%; background:#000; z-index:800}
.tclose {position:absolute; top:-12px; right:0px; width:30px; height:30px; cursor:pointer; background:url(../../material/images/common/ic_close.png) no-repeat}
.tclose:hover {background-position:0 -30px}

#error {background:#ff6969; color:#fff; text-shadow:1px 1px #cf5454; border-right:1px solid #000; border-bottom:1px solid #000; padding:0}
#error .tcontent {padding:10px 14px 11px; border:1px solid #ffb8b8; -moz-border-radius:5px; border-radius:5px}
#success {background:#2ea125; color:#fff; text-shadow:1px 1px #1b6116; border-right:1px solid #000; border-bottom:1px solid #000; padding:10; -moz-border-radius:0; border-radius:0}
#bluemask {background:#4195aa}
#frameless {padding:0}
#frameless .tclose {right:-12px;}

