@charset "UTF-8";

/* *********************************************************
フェノメノ ビジュアルノベル版特設サイト
File name : screen.css
Author    : Nitroplus Web Team
Modified  : 2012-07-06
********************************************************* */
body { background: #000; color: #b3b2b0; font-size: 90%; /* 14px */ line-height: 1.7; }
a { color: #c4ac4a; text-decoration: underline; -webkit-transition: .5s ease-out; -moz-transition: .5s ease-out; -o-transition: .5s ease-out; transition: .5s ease-out; padding: 1px; }
a:hover, a:focus { text-decoration: none; background-color: #c4ac4a; color: #000; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; -o-transition: .2s ease-out; transition: .2s ease-out; }
a:focus { outline: none; }
#container { background: url(../img/back.jpg) no-repeat top center; min-width: 960px; }
#wrapper { width: 960px; margin: 0 auto; }

/* ヘッダー
========================================================= */
#header { min-height: 600px; height: auto !important; height: 600px; position: relative; }
#header h1 { position: absolute; left: 647px; top: 29px; }
#header .catch1 { position: absolute; left: 854px; top: 29px;}
#header .catch2 { position: absolute; left: 112px; top: 100px; }
#header .samp1 { position: absolute; left: 20px; top: 154px; }
#header .samp2 { position: absolute; left: 70px; top: 447px; }
#header .logo_company { position: absolute; top: 29px; left: 20px; }
#header .logo_company li { display: inline-block; }
#header .logo_company a:hover,#header .logo_company a:focus { background-color: transparent; opacity: .7; /* FireFox, Webkit, Opera */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=70)"; /* IE */ filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); }

/* 朗読館バナー
========================================================= */
#bnr { padding: 30px 0; text-align: center; }
#bnr a, #bnr a:hover, #bnr a:focus { background: transparent; }
#bnr a img { filter: alpha(opacity=100); opacity: 1; -webkit-transition: .5s ease-out; -moz-transition: .5s ease-out; -o-transition: .5s ease-out; transition: .5s ease-out; }
#bnr a:hover img, #bnr a:focus img { filter: alpha(opacity=70); opacity: .7; }

/* ダウンロード
========================================================= */
.dlInfo { padding: 80px 0 0 275px; background: url(../img/ttl_dl.png) no-repeat top left; min-height: 270px; height: auto !important; height: 270px; }
.dlInfo th { text-align: right; color: #c4ac4a; width: 8.0em; }
.dlInfo li { margin-top: 1.0em; }
.dlList { padding-bottom: 36px; margin-left: 70px; }
.dlList a { color: #ab0600; }
.dlList a:hover { color: #000; background-color: #ab0600; }
.dlList dl { display: block; width: 880px; border-bottom: 1px dotted #510200; }
.dlList p + dl { /*最初のdlList*/ border-top: 1px dotted #510200; margin-top: 20px; }
.dlList dt { padding: 20px 0 6px 0; color: #ab0600; }
.dlList dd { padding-bottom: 18px; width: 220px; float: left; }
.dlList dd a img { -webkit-transition: .5s ease-out; -moz-transition: .5s ease-out; -o-transition: .5s ease-out; transition: .5s ease-out; }
.dlList dd a:hover img { opacity: 0; /* FireFox, Webkit, Opera */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /* IE */ filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; -o-transition: .2s ease-out; transition: .2s ease-out; }
.dlList dd a { padding: 0; display: block; background: url(../img/btn_dlhover.gif) no-repeat top left; }
.dlList dd a:hover { background-color: transparent; }
.dlList p { padding-top: 20px; }
.dlInstall { width: 824px; border: 1px solid #c4aa43; padding: 32px 28px; background: #000; border-radius: 12px; -webkit-border-radius: 12px; /* Safari,Google Chrome */ -moz-border-radius: 12px; /* Firefox */ behavior: url(http://testtest.nitroplus.co.jp/game/phenomeno/js/PIE.htc); /* IE */ margin-left: 70px; position: relative; }
.dlInstall h3 { font-size: 114%; color: #c4ac4a; font-weight: bold; }

/* 製品情報
========================================================= */
#Info { margin-top: 66px; padding: 95px 0 50px 0; background: url(../img/ttl_info.gif) no-repeat top left; padding-right: 10px; }
.productInfo { background: url(../img/ttl_productinfo.gif) no-repeat top right; padding-left: 135px; margin-left: 270px; }
.productInfo h3 { font-size: 114%; color: #c4ac4a; font-weight: bold; margin-left: -0.3em; }
.specInfo { background: url(../img/ttl_specinfo.gif) no-repeat 270px 0; padding-left: 405px; padding-top: 47px; }
.productInfo th, .specInfo th { text-align: right; color: #c4ac4a; width: 11.0em;  }
.productInfo td, .specInfo td {padding-bottom:6px;}

/* 商品情報
========================================================= */
.novelInfo { position: relative; background: url(../img/goodsinfo_back.gif) repeat; width: 618px; margin: 30px 0 50px 70px; padding: 28px 32px 28px 230px; min-height: 200px; }
.novelInfo h1 { font-size: 114%; color: #cecdca; font-weight: bold; padding-bottom: 10px; }
.novelInfo p { color: #b3b2b0; }
.novelInfo figure { position: absolute; left: 27px; top: -30px; }
.novelInfo img { position: relative; box-shadow: -7px 7px 0px black; -moz-box-shadow: -7px 7px 0px black; -webkit-box-shadow: -7px 7px 0px black; behavior: url(http://testtest.nitroplus.co.jp/game/phenomeno/js/PIE.htc); /* IE */ }
.novelInfo figure a{background:transparent #000;}
.novelInfo figure a:hover{background-color:#000;opacity: .7; /* FireFox, Webkit, Opera */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=70)"; /* IE */ filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);}

/* フッター
========================================================= */
.footer { padding-bottom: 60px; width: 880px; margin-left: 70px; font-size: 80%; }
.footer li { float: left; padding: 0 0.5em; }
.footer .fotter_info { float: left; margin-left: -0.5em; }
.footer .fotter_info a { color: #76746f; }
.footer .fotter_info a:hover { background-color: transparent; }
.footer .fotter_copyright { float: right; margin-right: -0.5em; color: #abaaa7; }

/*oocss
--------------------------------------------------------- */
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; /* IE6-7 */ }
.br05 { margin-bottom: .5em; }
.br10 { margin-bottom: 1em; }
.br15 { margin-bottom: 1.5em; }
.br25 { margin-bottom: 2.5em; }
.br35 { margin-bottom: 3.5em; }
.caution { color: #82817e; padding-left: 1.0em; text-indent: -1em; }
.hide-txt { text-indent: 100%; white-space: nowrap; overflow: hidden; height: 0; }
.tooltip { position: relative; display: inline-block; text-decoration: none; color: #fff; outline: none; }
.tooltip span { font-size: 30%; visibility: hidden; position: absolute; bottom: 0; right: 120%; z-index: 999; margin-left: -127px; padding: 10px; opacity: .0; background-color: #000; background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)); background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)); background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)); background-image: -o-linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)); background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)); -moz-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(0, 0, 0, 0.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(0, 0, 0, 0.5) inset; box-shadow: 0 1px 2px rgba(255, 255, 255, 0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.tooltip:hover { border: 0; /* IE6 fix */ }
.tooltip:hover span { bottom: 20px; visibility: visible; opacity: .9; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }