@charset "utf-8";

/* AQUAPLUS [うたわれるもの 公式サイト用]
---------------------------------------
	0.common読込
	1.要素への定義
	2.クラスの定義
	3.ベースデザイン
	4.内部デザイン
---------------------------------------
(c)AQUAPLUS All Rights Reserved.
	http://aquaplus.jp/
*/

/* ==========================================================================
 0.common読込
========================================================================== */
@import url("../../css/common/element.css");			/* 要素への定義 */
@import url("../../css/common/gen_class.css");			/* 汎用クラス */

@import url("../../css/common/list1.css");		/* テーブル用デザイン */
@import url("../../css/common/table_design.css");		/* テーブル用デザイン */
table.table_list {		margin : 3px 0 20px; }	/* ＋形状 */
table.table_list th {	height:16px; }	/*IEでは無視？*/
table.table_list td {	border-bottom : 1px solid #eee; }



/* ==========================================================================
 1.要素への定義
========================================================================== */
body {
	margin : 0;
	background : #333 url(images/bg.gif);
	padding : 0;
	font-weight: normal;
	font-size: 9pt;
	font-family: Meiryo,'メイリオ','ＭＳ Ｐゴシック';
	line-height: 12pt;
	color : #666;
/*	text-align : center;	/* IE:センタリング*/
	overflow-y : scroll;	/* Mozilla 縦スクバー常時表示 */
}

a {			text-decoration : none; }
a:link {	color : #f66; }
a:visited {	color : #ffa0a0; }
a:active {	color : #777; }
a:hover	{	color : #a68860;
			text-decoration : none;
			background : #ece6dd;
}
a:hover img	{	color : #a68860;
			text-decoration : none;
			background : #ece6dd;
}

hr {
	color : #cef5ce;		/* [s2] */
}

h1 {
	margin : 0 5px 15px;
	background : #ebdfdf;
	padding : 0;
	text-align : left;
	text-indent : 5px;
}

h2 {
	margin:0 2px 15px;
	background: #ebdfdf;
	padding:0;
	text-align:left;
	text-indent:5px;
	font-weight: bold;
	font-size: 9pt;
	line-height: 14pt;
	color:#fff;
}

/* ==========================================================================
 2.クラスの定義
========================================================================== */



/*=======================================================================
 3.ベースデザイン
========================================================================== */

/* --------------------------------------------------------------------------
 背面部 */

/* エリア-背景1（非スクロール時・下余白用）*/
#areaBg1 {
	margin : 0 auto;	/* 自センタリング・Gekko対策 */
	background : #fff url("images/bg_main.gif") repeat-y;
	width : 744px;
	height : 100%;
}

/* エリア-背景2（Gekko対策・スクロール時に背景が１画面分なのを回避）*/
#areaBg2 {
	background : #fff url("images/bg_main.gif") repeat-y;
	width : 744px;
/*	text-align : center;		/* エリア内センタリング・IE対策 */

}

/* --------------------------------------------------------------------------
 ヘッダ部 */
 
/* ヘッダ全体（背景）*/
#header {
	position : relative;
	margin : 0;
	background : url("images/logo_lt.gif") no-repeat 5px 3px;
	width:700px;
	height:48px;
}

/* 最終更新日（ヘッダ中・右枠）*/
#header_update {
	position : absolute;
	right:6px;
	bottom:6px;
}
/* 日付 */
#header_update span {
	font-weight : bold;
	color : #c00;
}

#aquaplus {
	position : absolute;
	right:6px;
	top:6px;
}

#menu {
	position : absolute;
	left : 149px;
	top : 43px;
}

#header .making {
	position : absolute;
	left : 550px;
	top : 28px;
	font-size : 8pt;
}


/* --------------------------------------------------------------------------
 グローバルナビゲーション */
#globalNavi {
	margin:5px 5px 10px;
	padding: 0 0 0 12px;
	width: 690px;
	height: 26px;
	overflow-y: hidden;
	background: url("images/globalNavi.gif") no-repeat;
}

#globalNavi li {
	display:inline;
	padding: 0;
	background: none;
}

#globalNavi li a {
	display:block;
	float: left;
	width: 74px;
	height: 26px;
	background-image: url("images/globalNavi.gif");
	background-repeat: no-repeat;
	background-position: 0px 26px;

	text-indent:-9999px;
	overflow-y: hidden;
}


/* オン */
#gn-top	a:hover , #gn-top	a.on {background-position:  -12px -26px;}
#gn-prd	a:hover , #gn-prd	a.on {background-position:  -86px -26px;}
#gn-pub	a:hover , #gn-pub	a.on {background-position: -160px -26px;}
#gn-str	a:hover , #gn-str	a.on {background-position: -234px -26px;}
#gn-chr	a:hover , #gn-chr	a.on {background-position: -308px -26px;}
#gn-ss1	a:hover , #gn-ss1	a.on {background-position: -382px -26px;}
#gn-ss2	a:hover , #gn-ss2	a.on {background-position: -456px -26px;}
#gn-sys	a:hover , #gn-sys	a.on {background-position: -530px -26px;}
#gn-sy2	a:hover , #gn-sy2	a.on {background-position: -604px -26px;}



/* --------------------------------------------------------------------------
 フッタ部 */

/* フッタ全体（最下段文字列含む） */
#footer {
	margin : 0;
	padding : 20px 0 10px;
	width : 100%;
	text-align : center;
	color : #999999;
}

/* Copyright表記（イメージ使用）*/
#footer #copyright-img {
	background : #ebdfdf;
	height: 20px;
	line-height: 20px;
}


#footer .banner a {
	display: block;
	width: 468px;
	background-color: transparent;
	margin: 5px auto;
}
#footer .banner a:hover {
	opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=75); /* IE lt 8 */
	-ms-filter: "alpha(opacity=75)"; /* IE 8 */
	-khtml-opacity: .75; /* Safari 1.x */
	-moz-opacity: .75; /* FF lt 1.5, Netscape */
}


/* ==========================================================================
 4.内部デザイン
========================================================================== */

/* エリア-幅1 */
.areaWidth1 {
	margin : 0 auto;			/* 自センタリング・Gekko対策 */
	width : 700px;
	padding : 0;
}

/* エリア-幅2 */
.areaWidth2 {
	margin : 0 auto;			/* 自センタリング・Gekko対策 */
	width : 690px;
	padding : 0;
/*	text-align : center;		/* IE:左寄せ */
}


/* ==========================================================================
 TOP
========================================================================== */
#areaImg {
	position: relative;
	width: 700px;
	height: 430px;
	background: url("images/ttl_uta.jpg") no-repeat;
	margin-bottom: 16px;
}

#btn_pv {
	position: absolute;
	left: 450px;
	top: 250px;
	width: 207px;
	height: 123px;
}

#btn_pv a {
	display: block;
	position: relative;
	width: 207px;
	height: 123px;
	background: url("images/btn_pv.png") no-repeat! important; background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/btn_pv.png",sizingMethod="image");		/*IE用*/
	
	text-align: left;
	text-indent: -9999px;
	overflow-x: hidden;
}

#btn_pv a:hover {
	background: url("images/btn_pv2.png") no-repeat! important; background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/btn_pv2.png",sizingMethod="image");		/*IE用*/
}


#update {
	height: 120px;
	overflow-y: scroll;
}



/* --------------------------------------------------------------------------
オーバーレイ */
#texts_ovr {
	z-index:5;
	visibility:hidden;
	position:absolute;
	left:28px;
	top: 96px;
	width:644px;	/* movie+フチ(4px) */
	height:402px;	/* movie+16px+close(18px)+フチ(4px) */
	background:#fff url("images/bg_texts_ovr.jpg") no-repeat;
}

#texts_ovr * {
	margin:2px auto auto;
}

#texts_ovr a#close {
	display:block;
	text-indent:-9999px;
	text-decoration:none;
	height: 26px;
}

#texts_ovr a#close:hover {
	background: none;
}

#alpha {
	visibility:hidden;
	z-index:4;
	position: absolute;
	top: 84px;
	left:0px;
	width:700px;
	height:438px;
	background:#000;

	filter: alpha(opacity=40);	/* IE */
	-moz-opacity:0.4;			/* Mozilla */
	opacity:0.4;				/* Opera */
}


/* ==========================================================================
 物語
========================================================================== */
#areaStory {
	position: relative;
	width: 700px;
	height: 430px;
	background: url("images/story.jpg") no-repeat;

	text-align:left;			/* テキスト非表示 */
	text-indent:-9999px;
}

#areaStory object {
	position: absolute;
	right: 8px;
	top: 1px;
	display: block;
	width: 135px;
	height: 25px;
}

/* ==========================================================================
 登場人物
========================================================================== */
#areaChar {
	position: relative;
	width: 700px;
	height: 430px;
}

#voice {
	position: absolute;
	left: 15px;
	bottom: 75px;
	display: block;
	width: 41px;
	height: 41px;
	text-align: left;
	text-indent: -9999px;
	overflow-x: hidden;
}

a#voice:hover {background: url("images/characters/voiceOn.gif") 3px 3px no-repeat; }

#areaGuard {
	position: absolute;
	left: 10px;
	bottom: 57px;
	width: 680px;
	height: 55px;
}

.c01 { background: url("images/characters/chr01.jpg") no-repeat; }
.c02 { background: url("images/characters/chr02.jpg") no-repeat; }
.c03 { background: url("images/characters/chr03.jpg") no-repeat; }
.c04 { background: url("images/characters/chr04.jpg") no-repeat; }
.c05 { background: url("images/characters/chr05.jpg") no-repeat; }
.c06 { background: url("images/characters/chr06.jpg") no-repeat; }
.c07 { background: url("images/characters/chr07.jpg") no-repeat; }
.c08 { background: url("images/characters/chr08.jpg") no-repeat; }
.c09 { background: url("images/characters/chr09.jpg") no-repeat; }
.c10 { background: url("images/characters/chr10.jpg") no-repeat; }
.c11 { background: url("images/characters/chr11.jpg") no-repeat; }
.c12 { background: url("images/characters/chr12.jpg") no-repeat; }
.c13 { background: url("images/characters/chr13.jpg") no-repeat; }
.c14 { background: url("images/characters/chr14.jpg") no-repeat; }
.c15 { background: url("images/characters/chr15.jpg") no-repeat; }
.c16 { background: url("images/characters/chr16.jpg") no-repeat; }
.c17 { background: url("images/characters/chr17.jpg") no-repeat; }
.c18 { background: url("images/characters/chr18.jpg") no-repeat; }
.c19 { background: url("images/characters/chr19.jpg") no-repeat; }
.c20 { background: url("images/characters/chr20.jpg") no-repeat; }


#localNaviBg {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 700px;
	height: 57px;
	background: url("images/characters/localNaviBg.gif") no-repeat;
}

#localNavi1 ,
#localNavi2 {
	position: absolute;
	width: 680px;
	height: 80px;
	left: 10px;
	display: block;
}


#localNavi1 {
	bottom: 31px;
}

#localNavi2 {
	bottom: 5px;
}

#areaChar li {
	display: inline;
	margin: 0px;
	padding: 0px;
	background: none;
}
#areaChar li a {
	float: left;
	display: block;
	background-repeat: no-repeat;
	width: 68px;
	height: 80px;

	text-align: left;
	text-indent: -9999px;
	overflow-x: hidden;
}


#ln01 a:hover { background: url("images/characters/ln01.png") !important; background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/characters/ln01.png",sizingMethod="image"); }
#ln02 a:hover { background: url("images/characters/ln02.png") !important; background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/characters/ln02.png",sizingMethod="image"); }
#ln03 a:hover { background: url("images/characters/ln03.png") !important; background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/characters/ln03.png",sizingMethod="image"); }
#ln04 a:hover { background: url("images/characters/ln04.png") !important; background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/characters/ln04.png",sizingMethod="image"); }
#ln05 a:hover { background: url("images/characters/ln05.png") !important; background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/characters/ln05.png",sizingMethod="image"); }
#ln06 a:hover { background: url("images/characters/ln06.png") !important; background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/characters/ln06.png",sizingMethod="image"); }
#ln07 a:hover { background: url("images/characters/ln07.png") !important; background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/characters/ln07.png",sizingMethod="image"); }
#ln08 a:hover { background: url("images/characters/ln08.png") !important; background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/characters/ln08.png",sizingMethod="image"); }
#ln09 a:hover { background: url("images/characters/ln09.png") !important; background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/characters/ln09.png",sizingMethod="image"); }
#ln10 a:hover { background: url("images/characters/ln10.png") !important; background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/characters/ln10.png",sizingMethod="image"); }
#ln11 a:hover { background: url("images/characters/ln11.png") !important; background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/characters/ln11.png",sizingMethod="image"); }
#ln12 a:hover { background: url("images/characters/ln12.png") !important; background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/characters/ln12.png",sizingMethod="image"); }
#ln13 a:hover { background: url("images/characters/ln13.png") !important; background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/characters/ln13.png",sizingMethod="image"); }
#ln14 a:hover { background: url("images/characters/ln14.png") !important; background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/characters/ln14.png",sizingMethod="image"); }
#ln15 a:hover { background: url("images/characters/ln15.png") !important; background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/characters/ln15.png",sizingMethod="image"); }
#ln16 a:hover { background: url("images/characters/ln16.png") !important; background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/characters/ln16.png",sizingMethod="image"); }
#ln17 a:hover { background: url("images/characters/ln17.png") !important; background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/characters/ln17.png",sizingMethod="image"); }
#ln18 a:hover { background: url("images/characters/ln18.png") !important; background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/characters/ln18.png",sizingMethod="image"); }
#ln19 a:hover { background: url("images/characters/ln19.png") !important; background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/characters/ln19.png",sizingMethod="image"); }
#ln20 a:hover { background: url("images/characters/ln20.png") !important; background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/characters/ln20.png",sizingMethod="image"); }


/* --------------------------------------------------------------------------
 『ムービーダウンロード』ボタン */
.dl_movie {
	position: relative;
	display: block;
	width: 200px;
	height: 50px;
	margin: 0 auto;
	background: transparent url(../../images/dl_movie.gif) no-repeat;
}

.dl_movie span {
	display:block;
	position:relative;
	right:6px;
	top:31px;
	margin:0;
	text-align:right;
	color:#fff;
}

.dl_movie:hover {
	background:transparent url(../../images/dl_movie.gif) no-repeat;
}



/* [EOF] */