@charset "utf-8";

/* AQUAPLUS [Routes 公式サイト] 用
---------------------------------------
	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/table_design.css");		/* テーブル用デザイン */
table.table_list {		margin : 3px 0 20px; }	/* ＋形状 */
table.table_list td {	border-bottom : 1px solid #eee; text-align: left; }



/* ==========================================================================
 1.要素への定義
========================================================================== */
body {
	margin : 0;
	background : #333 url(images/bg.gif);
	padding : 0;
	font-family :ＭＳ Ｐゴシック;
	font-size : 9pt;
	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 : #e6ddff;
}
a:hover img	{	color : #a68860;
			text-decoration : none;
			background : #e6ddff;
}

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

h1 {
	margin : 0 auto 15;
	background : url(images/bg_h1.gif) no-repeat;
	padding-top : 3px;
	width : 690;
	height : 30;
	text-align : left;
	text-indent : 5px;
}

h2 {
	margin : 20px 0 0;
	padding : 0;
	text-align : left;
	text-indent : 5px;
}



/* ==========================================================================
 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_top.gif') no-repeat 5px 5px;
	width : 700px;
	height : 65px;
}

/* 最終更新日（ヘッダ中・右枠）*/
#header span {
	position : absolute;
	right : 0px;
	top : 0px;

	display: block;
	width : 123px;
	height : 21px;
	background : #000 url('images/update.gif') 0 0 no-repeat;
	text-align : right;
	line-height : 20px;
	font-weight : bold;
	color : #fff;
}

#aquaplus {
	position : absolute;
	left : 411px;
	top : 0px;
	width : 166px;
	height : 21px;
}
#menu {
	position : absolute;
	left : 212px;
	top : 39px;
}



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

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

/* Copyright表記（イメージ使用）*/
#footer #copyright-img {
	margin : 0px;
	background : #fff url(images/copyright.gif) no-repeat;
	height : 26px;

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



/* ==========================================================================
 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:センタリング */
}

/* エリア-幅3 */
.areaWidth3 {
	margin : 0 auto 30px;			/* 自センタリング・Gekko対策 */
	width : 660px;
	padding : 0;
	text-align : left;		/* IE:左寄せ */
}

/* 色-ハイライト表現 */
.cHi-s {	color : #05274f;
			background : #F5F4FB; }

/* 登場人物＆イメージ - メインエリア */
#interface {
	position : relative;
	background : url(images/base.gif) no-repeat;
	width : 690px;
	height : 340px;
}


#interface nav div {
	position: absolute;
	text-decoration : none;
	background : #555;
	width: 67px;
	height: 67px;
	cursor: pointer;
}

#interface nav div:hover	{
	background : #d4215c;
}

#lines {
	position: absolute;
}
#interface #lines div {
	position: absolute;
	background-color: #000;
}
#characters #interface nav div:nth-child(1) { left: 16px; top: 16px; background-image: url(images/chr/slct1.gif); }
#characters #interface nav div:nth-child(2) { left: 16px; top: 97px; background-image: url(images/chr/slct2.gif); }
#characters #interface nav div:nth-child(3) { left: 16px; top:178px; background-image: url(images/chr/slct3.gif); }
#characters #interface nav div:nth-child(4) { left: 16px; top:259px; background-image: url(images/chr/slct4.gif); }
#characters #interface nav div:nth-child(5) { left: 97px; top:259px; background-image: url(images/chr/slct5.gif); }
#characters #interface nav div:nth-child(6) { left: 97px; top:178px; background-image: url(images/chr/slct6.gif); }
#characters #interface nav div:nth-child(7) { left: 97px; top: 16px; background-image: url(images/chr/slct7.gif); }

#image #interface nav div:nth-child(1) { left: 16px; top: 16px; background-image: url(images/img/slct1.gif); }
#image #interface nav div:nth-child(2) { left: 16px; top: 97px; background-image: url(images/img/slct2.gif); }
#image #interface nav div:nth-child(3) { left: 16px; top:178px; background-image: url(images/img/slct3.gif); }
#image #interface nav div:nth-child(4) { left: 16px; top:259px; background-image: url(images/img/slct4.gif); }
#image #interface nav div:nth-child(5) { left: 97px; top:259px; background-image: url(images/img/slct5.gif); }
#image #interface nav div:nth-child(6) { left: 97px; top:178px; background-image: url(images/img/slct6.gif); }

#interface #lines div:nth-child(1) { width: 1px; height: 15px; left: 49px; top: 82px; }
#interface #lines div:nth-child(2) { width: 1px; height: 15px; left: 49px; top:163px; }
#interface #lines div:nth-child(3) { width: 1px; height: 15px; left: 49px; top:244px; }
#interface #lines div:nth-child(4) { width: 15px; height: 1px; left: 82px; top:292px; }
#interface #lines div:nth-child(5) { width: 1px; height: 15px; left:130px; top:244px; }
#interface #lines div:nth-child(6) { width: 1px; height: 96px; left:130px; top: 82px; }

/* CharacterVoice BuTton */
#voice {
	position : absolute;
	left:178px;
	top:178px;
	width:68px;
	height:68px;
	background-image: url(images/chr/cvbt1.gif);
	cursor: pointer;
}
#voice:hover,
#voice[data-status="play"] {
	background-image: url(images/chr/cvbt2.gif);
}
body[data-current="0"] #voice {
	display: none;
}

#chrImage {
	position : absolute;
}
#characters #chrImage {
	left: 178px;
	top: 0px;
	width: 512px;
	height: 340px;
}
#image #chrImage {
	left:259px;
	top: 16px;
	width: 404px;
	height: 311px;
}

body[data-current="0"] #chrImage { background-image: none; }
body[data-current="1"]#characters #chrImage { background-image: url(images/chr/char1.gif); }
body[data-current="2"]#characters #chrImage { background-image: url(images/chr/char2.gif); }
body[data-current="3"]#characters #chrImage { background-image: url(images/chr/char3.gif); }
body[data-current="4"]#characters #chrImage { background-image: url(images/chr/char4.gif); }
body[data-current="5"]#characters #chrImage { background-image: url(images/chr/char5.gif); }
body[data-current="6"]#characters #chrImage { background-image: url(images/chr/char6.gif); }
body[data-current="7"]#characters #chrImage { background-image: url(images/chr/char7.gif); }

body[data-current="1"]#image #chrImage { background-image: url(images/img/imag1.gif); }
body[data-current="2"]#image #chrImage { background-image: url(images/img/imag2.gif); }
body[data-current="3"]#image #chrImage { background-image: url(images/img/imag3.gif); }
body[data-current="4"]#image #chrImage { background-image: url(images/img/imag4.gif); }
body[data-current="5"]#image #chrImage { background-image: url(images/img/imag5.gif); }
body[data-current="6"]#image #chrImage { background-image: url(images/img/imag6.gif); }


/* テーブル縦罫線 */
.table_line_v {
	border-left : 1px solid #eee
}



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

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

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

a.fp { margin: 0 auto; }


/* [EOF] */