@charset "utf-8";

/* COMMON
---------------------------------------------------------- */
#bg {
	background: url(../images/common/bg.png);
	}

#wrapper {
	width: 1200px;
	background: url(../images/common/bg_h2.png) top right no-repeat;
	margin: 0 auto;
	}

/* navi */
#navi {
	width: 300px;
	height:930px;
	float: left;
	}

#navi #logo {
	padding: 20px 0 15px 0;
	}

#navi ul#share {
	width: 260px;
	height: 21px;
	margin: 0 0 14px 0;
	overflow: hidden;
	}

#navi ul#share li {
	width: 120px;
	float: left;
	}

#navi nav ul li {
	margin: 0 10px 10px 0;
	float: left;
	}

/* contents */
article {
	width: 900px;
	margin: 0 0 20px 0;
	float: left;
	}

article h2 {
	margin: 40px 0 35px 125px;
	}

article .borderWhite {
	border: 8px solid #fff;
	}

article .borderBlack {
	border: 2px solid #000;
	}

article .contents {
	min-height: 730px;
	background: #fff;
	}

article .list {
	min-height: 730px;
	background: url(../images/common/bg_list.png) #fff;
	}

article #list {
	width: 150px;
	padding: 30px 15px 20px 15px;
	float: left;
	}

article #list ul li {
	margin: 0 0 10px 0;
	}

article #list ul#btn li a {
	color: #333;
	font-size: 12px;
	letter-spacing: 2px;
	text-align: center;
	text-decoration: none;
	background: #fff;
	border: 1px solid #000;
	display: block;
	padding: 5px 0;
	}

article #list ul#btn li a:hover {
	color: #fff;
	background: #000;
	border: 1px solid #000;
	}

article #list ul#btn li .active {
	color: #fff;
	background: #000;
	border: 1px solid #000;
	pointer-events: none;
	}

a.imgLink {
	border: medium none transparent;
	-webkit-transition: 0.3s ease-in-out;  
	-moz-transition: 0.3s ease-in-out;  
	-o-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out;
	}

a:hover.imgLink {
	background: #fff;
	filter: alpha(opacity=70);
	opacity: 0.7;
	}

article p#comingsoon {
	text-align: center;
	padding: 353px 0 0 0;
	}

/* footer */
footer {
	font-size: 10px;
	color: #fff;
	line-height: 12px;
	text-align: center;
	background-color: #000;
	padding: 7px 0;
	}

/* pagetop */
p#pagetop {
	bottom: 15px;
	right: 15px;
	position: fixed;
	}

p#pagetop a img {
	border: medium none transparent;
	}

p#pagetop a:hover img {
	filter: alpha(opacity=60);
	opacity: 0.6;
	}


/* ニュース
---------------------------------------------------------- */
#news {
	width: 820px;
	margin: 0 auto;
	padding: 30px 0;
	}

#news section {
	margin: 0 auto 40px auto;
	}

#news section.end {
	margin: 0;
	}

#news section p.date {
	color: #fff;
	font-size: 10px;
	line-height: 10px;
	letter-spacing: 2px;
	background: #000;
	padding: 5px;
	}

#news section h3 {
	font-size: 16px;
	font-weight: normal;
	border-bottom: 3px dotted #666;
	margin: 0 0 15px 0;
	padding: 12px 0;
	}

#news section .detail .table th {
	color: #fff;
	text-align: left;
	font-weight: normal;
	background: #000;
	border: 1px solid #666;
	padding: 5px 15px;
	}
	
#news section .detail .table td {
	border: 1px solid #666;
	background: #fff;
	padding: 5px 15px;
	}

#news section .detail h4 {
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 3px;
	border-bottom: 1px solid #333;
	margin: 0 0 10px 0;
	padding: 0 0 5px 0;
	}

#news section .detail h5 {
	font-size: 14px;
	color: #fff;
	text-align: center;
	letter-spacing: 3px;
	background: #000;
	margin: 0 0 10px 0;
	padding: 7px 5px;
	}

#news section .detail h6 {
	font-size: 12px;
	color: #fff;
	background: #1e1e22;
	margin: 0 0 5px 0;
	padding: 5px;
	}

#news section .detail .box {
	border: 1px solid #000;
	padding: 10px;
	}

#news section .detail .left {
	float: left;
	}

#news section .detail .right {
	float: right;
	}


/* オンエア
---------------------------------------------------------- */
#onair {
	width: 820px;
	margin: 0 auto;
	padding: 30px 0;
	}

#onair .txt {
	text-align: center;
	margin: 0 0 10px 0;
	}

#onair .line {
	border-bottom: 3px dotted #333;
	margin: 0 0 30px 0;
	padding: 0 0 20px 0;
	}

#onair h3 {
	text-align:center;
	margin:0 0 15px 0;
	padding:0;
	}

#onair table {
	font-size: 14px;
	border-collapse: collapse;
	border: 1px solid #666;
	margin: 0 auto;
	}

#onair table th {
	font-weight: bold;
	color: #fff;
	background-color: #000;
	border: 1px solid #666;
	text-align: left;
	padding: 10px 15px;
	}

#onair table td {
	border: 1px solid #666;
	padding: 15px;
	}

#onair table td.gray {
	color: #333;
	background-color: #ebebeb;
	}


/* キャスト＆スタッフ
---------------------------------------------------------- */
#cast_staff {
	width: 820px;
	margin: 0 auto;
	padding: 30px 0 15px 0;
	}

#cast_staff h3 {
	margin:0 0 5px 0;
	}

#cast_staff ul li {
	font-size: 14px;
	letter-spacing: 3px;
	padding: 12px 5px;
	}

#cast_staff ul li.gray {
	color: #333;
	background-color: #ebebeb;
	}


/* キャラクター
---------------------------------------------------------- */
#character {
	width: 640px;
	margin: 0 auto;
	padding: 30px;
	float: left;
	}

#character h3 {
	margin: 0 0 15px 0;
	}

#character #bg {
	height:615px;
	background: url(../images/character/bg_character.png) no-repeat;
	position: relative;
	}

#character #bg #image {
	top: 100px;
	right: 0;
	position: absolute;
	z-index: 0;
	}

#character #bg #txt_monochrome {
	top: 40px;
	right: 30px;
	position: absolute;
	z-index: 10;
	}

#character #bg #txt_maneo {
	top: 96px;
	right: 10px;
	position: absolute;
	z-index: 10;
	}

#character #bg #txt_kikuko {
	top: 70px;
	left: 10px;
	position: absolute;
	z-index: 10;
	}

#character #bg #txt_mana {
	top: 54px;
	right: 30px;
	position: absolute;
	z-index: 10;
	}

#character #bg #txt_ru {
	top: 65px;
	left: 35px;
	position: absolute;
	z-index: 10;
	}

#character #bg #txt_yayoi {
	top: 55px;
	right: 5px;
	position: absolute;
	z-index: 10;
	}

#character #bg #txt_akiko {
	top: 55px;
	right: 30px;
	position: absolute;
	z-index: 10;
	}

#character #bg #txt_caramel {
	top: 10px;
	right: 40px;
	position: absolute;
	z-index: 10;
	}


/* ストーリー
---------------------------------------------------------- */
#list ul.storyBtn li a {
	color: #333;
	font-size: 12px;
	line-height: 20px;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	background: #fff;
	border: 1px solid #000;
	display: block;
	margin: 0 0 10px 0;
	padding: 5px 0;
	}

#list ul.storyBtn li a:hover {
	color: #fff;
	background: #000;
	}

#list ul.storyBtn li .active {
	color: #fff;
	background: #000;
	border: 1px solid #000;
	pointer-events: none;
	}

#list ul.storyList {
	margin: -7px 0 15px 0;
	}

#list ul.storyList li {
	text-align: center;
	border-bottom: 1px dotted #000;
	margin: 0;
	}

#list ul.storyList li a {
	color: #333;
	font-size: 12px;
	line-height: 20px;
	letter-spacing: 5px;
	text-decoration: none;
	padding: 5px 0;
	display: block;
	}

#list ul.storyList li a:hover {
	color: #00a5ff;
	}

#list ul.storyList li .active {
	color: #00a5ff;
	font-weight: bold;
	pointer-events: none;
	}
	
#story {
	width: 640px;
	margin: 0 auto;
	padding: 30px;
	float: left;
	}

#story h3 {
	margin: 0 0 15px 0;
	}

#story h4 {
	font-size: 18px;
	font-weight: normal;
	letter-spacing: 2px;
	border-bottom: 3px dotted #333;
	margin: 0 0 10px 0;
	padding: 0 0 7px 0;
	}

#story p#staff {
	margin: 0 0 15px 0;
	}

#story #intro {
	height:615px;
	background: url(../images/story/bg_introduction.png) no-repeat;
	position: relative;
	}

#story #intro #introTit {
	top: 50px;
	left: 22px;
	position: absolute;
	z-index: 0;
	}

#story #intro #introTxt {
	top: 150px;
	left: 20px;
	position: absolute;
	z-index: 10;
	}


/* リリース
---------------------------------------------------------- */
#release {
	width: 640px;
	margin: 0 auto;
	padding: 30px;
	float: left;
	}

#release h3 {
	margin: 0 0 15px 0;
	}

#release h4 {
	font-size: 18px;
	font-weight: normal;
	letter-spacing: 2px;
	border-bottom: 3px dotted #333;
	margin: 0 0 10px 0;
	padding: 0 0 7px 0;
	}

/* DB */
.DBtmp_box      {width:640px; margin:0;}
.DBtmp_top      {margin:0; padding:0;}
.DBtmp_left     {width:150px; text-align:center; padding:15px 20px 0 0;}
.DBtmp_right    {width:470px; padding:15px 0 0 0;}
.DBtmp_compound {margin:0; padding:0; padding:0 0 3px 0;}
.DBtmp_catch    {font-weight:bold;}
.DBtmp_title    {font-size: 18px; font-weight: normal; letter-spacing: 2px; border-bottom: 3px dotted #333; margin: 0; padding: 0 0 7px 0;}
.DBtmp_subtitle {font-weight:bold; margin:0; padding:0;}
.DBtmp_date     {margin:0; padding:0;}
.DBtmp_detail   {margin:0; padding:0;}
.DBtmp_list     {margin:0; padding:0;}
.DBtmp_listline {margin:0; padding:0;}


/* スペシャル
---------------------------------------------------------- */
#special {
	width: 640px;
	margin: 0 auto;
	padding: 30px;
	float: left;
	}

#special h3 {
	margin: 0 0 15px 0;
	}

/* movie */
#special #movie h4 {
	font-size: 18px;
	font-weight: normal;
	letter-spacing: 2px;
	border-bottom: 3px dotted #333;
	margin: 0 0 15px 0;
	padding: 0 0 7px 0;
	}

/* shop */
#special #shop {
	font-size: 12px;
	line-height: 20px;
	}

#special #shop p {
	font-size: 14px;
	line-height: 24px;
	}

#special #shop .tit {
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 3px;
	border-bottom: 3px dotted #333;
	margin: 0 0 10px 0;
	padding: 0 0 5px 0;
	}

#special #shop h4.goods {
	font-size: 14px;
	color: #fff;
	text-align: center;
	letter-spacing: 3px;
	background: #000;
	margin: 0 0 10px 0;
	padding: 7px 5px;
	}

#special #shop h5 {
	font-size: 12px;
	color: #fff;
	background: #1e1e22;
	padding: 5px;
	}

#special #shop .box {
	border: 1px solid #000;
	padding: 10px;
	}

#special #shop img {
	margin: 5px 0;
	}

#special #shop a.btn {
	color: #333;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	background: #ebf0f0;
	border-top: 1px solid #333;
	border-bottom: 3px solid #333;
	border-left: 1px solid #333;
	border-right: 3px solid #333;
	margin: 10px 0 0 0;
	padding: 10px 5px;
	display: block;
	}

#special #shop a.btn:hover {
	color: #333;
	background: #fff;
	border-top: 1px solid #333;
	border-bottom: 3px solid #333;
	border-left: 1px solid #333;
	border-right: 3px solid #333;
	}

#special #shop a.btn2 {
	color: #333;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	text-decoration: none;
	background: #ebf0f0;
	border-top: 1px solid #333;
	border-bottom: 3px solid #333;
	border-left: 1px solid #333;
	border-right: 3px solid #333;
	margin: 10px 0 0 0;
	padding: 5px;
	display: block;
	}

#special #shop a.btn2:hover {
	color: #333;
	background: #fff;
	border-top: 1px solid #333;
	border-bottom: 3px solid #333;
	border-left: 1px solid #333;
	border-right: 3px solid #333;
	}

#special #shop #pasela {
	color: #fff;
	background: #000;
	padding: 20px;
	}

#special #shop #pasela h4 {
	font-size: 14px;
	border-bottom: 3px dotted #ebf0f0;
	margin: 0 0 10px 0;
	padding: 0 0 5px 0;
	}

#special #wall ul li {
	width: 300px;
	margin: 0 0 20px 0;
	float: left;
	}

#special #wall h4 {
	font-size: 14px;
	color: #fff;
	text-align: center;
	background: #1e1e22;
	margin: 0 0 5px 0;
	padding: 5px;
	}

#special #wall .btn {
	text-align: center;
	margin: 5px 0 0 0;
	}

#special #wall #new {
	width: 400px;
	margin: 0 auto 40px auto;
	}

#special #wall ul li.left {
	margin: 0 40px 0 0;
	}