@charset "utf-8";


/* Base layout
======================================================================= */
html { height: 100%; }
body { color: #000; background-color: #008cfd; height: 100%; text-align: center; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif; }

/* #page
----------------------------------------------------------------------- */
#page { background: url(../img/v3-background.jpg) center top no-repeat; }

/* #wrapper
----------------------------------------------------------------------- */
#wrapper { margin: 0 auto 16px; padding: 0 10px; width: 980px; text-align: left; }
#wrapper-inner { position: relative; width: 980px; background-color: #fff; box-shadow: 0 0 20px 4px rgba(0,0,0,.66); }

/* #product-logo
----------------------------------------------------------------------- */
#product-logo { position: absolute; top: 8px; left: -42px; z-index: 1000; }
#product-logo img { vertical-align: bottom; }

/* #main-wrap
----------------------------------------------------------------------- */
#main-wrap { position: relative; width: 980px; }


/*
#main-wrap.is-topicpath { margin-top: -21px; padding-top: 20px; background: url(../img/main-top.gif) no-repeat; }
*/

/* #topicpath
----------------------------------------------------------------------- */
/*
#topicpath { padding: 10px 10px 12px 24px; position: absolute; top: 0; right: 0; z-index: 100px; background: url(../img/topicpath-tray.png) left 20px no-repeat; height: 20px; line-height: 1; font-size: 12px; _zoom: 1; }
#topicpath a { color: #66ccff; text-decoration: none; }
*/

/* #side
----------------------------------------------------------------------- */
#side { width: 180px; color: #fff; background-color: #000; position: absolute; top: 0; bottom: 0; }
#side .pane { padding: 200px 0 16px; }
#side .pane:before { content: ""; position: absolute; top: 0; left: 0; width: 180px; height: 246px; background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImczMTEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiMzMzMzMzMiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMwMDAwMDAiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2czMTEpIiAvPgo8L3N2Zz4=); }
#side a { color: #fff; }

#side .mypage { position: relative; z-index: 800; }
#side .mypage .login a { display: block; width: 180px; height: 164px; background: url(../img/v3-side-login.png) 0 0 no-repeat; }
#side .mypage .login a:hover { background-position: -180px 0; }
#side .mypage .logout { text-align: center; font-size: 12px; font-weight: bold; }

#side .mypage-disable { }
#side .mypage-disable .login a { background-image: url(../img/v3-side-login-disable.png); }
#side .mypage-disable .login a:hover { background-position: 0 0; }
#side .mypage-disable .logout a { color: #444; }

/* 連携テクニック
#side .technique { margin: 8px 0 0; }
#side .technique p { background: url(../img/v3-side-technique.png) 0 0 no-repeat; }
#side .technique.current p { background-position: top right; }
#side .technique p a { display: block; width: 180px; height: 80px; }
#side .technique p a:hover { background-color: rgba(255,255,255,.2); }
#side .technique a span { display: none; }
 */

/* #gnav
----------------------------------------------------------------------- */
#gnav { margin-top: 16px; position: relative; z-index: 800; }
/* #gnav { margin-top: 16px; position: relative; z-index: 800; } */
#gnav ul { margin: 0; padding: 0; list-style: none; }
#gnav ul li { margin-top: 4px; line-height: 1; background: url(../img/v3-gnav-button.png) 0 0 no-repeat; font-size: 14px; font-weight: bold; }
#gnav ul li a { display:table-cell; width: 180px; height: 56px; color: #ffffff; vertical-align: middle; text-align:center; text-decoration: none; outline: none; text-shadow: 1px 1px 0 #000; }
* html             #gnav ul li a { display: inline; zoom: 1; }	/* IE 6 */
*:first-child+html #gnav ul li a { display: inline; zoom: 1; }	/* IE 7 */
#gnav ul li a:hover { background-color: rgba(255,255,255,.2); }
#gnav ul li.current { background-position: -180px 0; }
#gnav ul li.current a { color: #000; text-shadow: 1px 1px 0 #fff; }

/* #gnav ul li.first a { height: 112px; } */
#gnav ul li.technique a { height: 80px; } 

#gnav ul li:nth-child(9n+1) { background-position: 0 0; }
#gnav ul li:nth-child(9n+2) { background-position: 0 -280px; }
#gnav ul li:nth-child(9n+3) { background-position: 0 -168px; }
#gnav ul li:nth-child(9n+4) { background-position: 0 -224px; }
#gnav ul li:nth-child(9n+5) { background-position: 0 -280px; }
#gnav ul li:nth-child(9n+6) { background-position: 0 -336px; }
#gnav ul li:nth-child(9n+7) { background-position: 0 -392px; }
#gnav ul li:nth-child(9n+8) { background-position: 0 -448px; }
#gnav ul li:nth-child(9n+9) { background-position: 0 -504px; }

#gnav ul li.current:nth-child(9n+1) { background-position: -180px 0; }
#gnav ul li.current:nth-child(9n+2) { background-position: -180px -280px; }
#gnav ul li.current:nth-child(9n+3) { background-position: -180px -168px; }
#gnav ul li.current:nth-child(9n+4) { background-position: -180px -224px; }
#gnav ul li.current:nth-child(9n+5) { background-position: -180px -280px; }
#gnav ul li.current:nth-child(9n+6) { background-position: -180px -336px; }
#gnav ul li.current:nth-child(9n+7) { background-position: -180px -392px; }
#gnav ul li.current:nth-child(9n+8) { background-position: -180px -448px; }
#gnav ul li.current:nth-child(9n+9) { background-position: -180px -504px; }

/* 新規プレイヤー向けメニュー */
#gnav ul li.landing1 { background-image: url(../img/v3-side-landing1_slim.png); background-position: 0 0; }
#gnav ul li.landing2 { background-image: url(../img/v3-side-landing2_slim.png); background-position: 0 0; }
#gnav ul li.landing1 a,
#gnav ul li.landing2 a { overflow: hidden; text-align: left; text-indent: 100%; white-space: nowrap; }

/* 連携テクニック */
#gnav ul li.technique { background-image: url(../img/v3-side-technique-new.png); background-position: 0 0; }
#gnav ul li.technique a { overflow: hidden; text-align: left; text-indent: 100%; white-space: nowrap;}
#gnav ul li.technique.current { background-position: -180px 0; }

/* #main
----------------------------------------------------------------------- */
#main { padding-bottom: 55px; position: relative; float: right; color: #333333; background-color: #ffffff; width: 800px; }

#main a { color: #3399cc; }
#main a:link    { text-decoration: none; }
#main a:visited { text-decoration: none; }
#main a:hover   { text-decoration: underline; }

#main {}
body#index-home #main {}

/* #main-visual
----------------------------------------------------------------------- */
#main-visual { height: 264px; background: url(../img/v3-main-visual.jpg) no-repeat; }
#home-index #main-visual { position: relative; height: 680px; background: url(../img/v3-home-main-visual.jpg) no-repeat; }
#home-index #main-visual:after { position: absolute; left: 0; bottom: -30px; content: ""; width: 288px; height: 208px; background: url(../img/v3-home-main-visual-cab.png) no-repeat; }

/* #senav
----------------------------------------------------------------------- */
#senav { margin-top: -64px; color: #fff; background-color: #000; background-color: rgba(0,0,0,.8); }
#senav ul { display: table; list-style: none; }
#senav ul li { display: table-cell; width: 160px; height: 64px; position: relative; vertical-align: middle; text-align: center; font-size: 14px; font-weight: bold; }
#senav ul li a { color: #fff; display: table-cell; width: 20%; height: 64px; vertical-align: middle; text-align: center; text-shadow: 1px 1px 0 #000; }
#senav ul li a:hover { color: #fc0; background-color: rgba(255,255,255,.1); text-decoration: none; }
#senav ul li.current { background-color: #fc0; }
#senav ul li.current a { color: #000; text-shadow: 1px 1px 0 #fff; }
#senav ul li.current a:hover { color: #000; }
#senav ul li.current:after { margin-left: -12px; content: ""; position: absolute; top: 100%; left: 50%; width: 0; height: 0; border: 12px solid transparent; border-top-color: #fc0; z-index: 1; }

#home-index #senav { display: none; }

/* #headline
----------------------------------------------------------------------- */
#headline { margin: 0; padding: 19px 20px 20px 20px; background: url(../img/headline-pane.png) no-repeat; width: 760px; height: 39px; line-height: 1; font-size: 20px; text-shadow: -1px -1px 1px #ffffff, 1px 1px 2px #ffffff; }

/* #lnav
----------------------------------------------------------------------- */
#lnav { margin: 16px 8px -8px; }
#lnav ul.gen { margin: -1px; list-style: none; }
#lnav ul.gen li { display: inline-block; vertical-align: bottom; text-align: center; line-height: 1.25; font-size: 13px; font-weight: bold; }
#lnav ul.gen li div { margin: 1px 1px 0 0; display: table; width: 156px; }
#lnav ul.gen li a { display: table-cell; width: 100%; height: 40px; vertical-align: middle; text-align: center; color: #fff; background-color: #008ff2; text-shadow: 1px 1px 0 #000; }
#lnav ul.gen li .small { font-size: 11px; }

#lnav ul.gen-bu2 li div { width: 390px; }
#lnav ul.gen-bu3 li div { width: 261px; }
#lnav ul.gen-bu4 li div { width: 195px; }
#lnav ul.gen-bu6 li div { width: 130px; }

#lnav ul.gen a:hover { background-color: rgba(0,143,242,.8); text-decoration: none; }
#lnav ul.gen li.current a { color: #000; background-color: #fc0; text-shadow: 1px 1px 0 #fff; }

#lnav ul.gen a.na,
#lnav ul.gen a.na:hover { color: #ddd; background-color: #aaa; text-shadow: 1px 1px 0 #888; }

/*
#lnav { margin: -20px 0 -10px 30px; }
#lnav a { padding: 12px 10px; display: block; color: #ffffff !important; line-height: 1; font-size: 13px; text-shadow: 1px 1px 2px #000000; }

#lnav ul { height: 37px; overflow: hidden; list-style: none; }
#lnav ul li { display: inline; }
#lnav ul li div { padding-right: 1px; float: left; background: url(../img/lnav-menu-border.png) right 0px no-repeat; }
#lnav ul li div a { background: url(../img/lnav-menu.gif) -300px 0px no-repeat; }

#lnav ul li div.first a { padding-left: 25px; background-position: 0px 0px; }
#lnav ul li div.last { padding-left: 1px; padding-right: 0; background-position: 0px -37px; }
#lnav ul li div.last a { padding-right: 25px; background-position: right 0px; }

#lnav ul li.current a { background-position: -300px -37px; }
#lnav ul li.current div.first a { background-position: 0px -37px; }
#lnav ul li.current div.last a { background-position: right -37px; }

#lnav.with-back { margin-top: -24px; margin-bottom: 0; background: url(../img/lnav-back.gif) no-repeat; }
#lnav.with-back .back { margin: 0; float: left; height: 41px; }
#lnav.with-back .back a { padding: 14px 14px 14px 25px; }
#lnav.with-back ul { margin-top: 20px; float: left; }
*/

/* #content
----------------------------------------------------------------------- */
#content { padding: 0 30px 30px 30px; width: 740px; min-height: 710px; text-align: justify; text-justify: inter-ideograph; }

/* #pagetop
----------------------------------------------------------------------- */
#pagetop { margin-top: 20px; padding: 5px 25px; position: absolute; right: 0; bottom: 0; width: 800px; background: url(../img/pagetop.png) right bottom no-repeat; text-align: right; line-height: 1.25; font-size: 12px; }
#pagetop a { padding: 5px; display: block; color: #333333 !important; text-decoration: underline; }
#pagetop a:hover { color: #3399cc !important; }

/* #footer
----------------------------------------------------------------------- */
#footer { color: #fff; background-color: #000; }
#footer a { color: #fff; }

#footer .thanks {}
#footer .thanks img { width: 100%; }

#footer .upper { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8cmFkaWFsR3JhZGllbnQgaWQ9Imc0MDciIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI3NSUiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMDA2Njk5IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMDAzMzY2IiBvZmZzZXQ9IjEiLz4KPC9yYWRpYWxHcmFkaWVudD4KPHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI2c0MDcpIiAvPgo8L3N2Zz4=); }
/*
#footer .upper { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8cmFkaWFsR3JhZGllbnQgaWQ9Imc3NTMiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI1MCUiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMDA2Njk5IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMDAzMzY2IiBvZmZzZXQ9IjEiLz4KPC9yYWRpYWxHcmFkaWVudD4KPHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI2c3NTMpIiAvPgo8L3N2Zz4=); }
*/

#footer .upper .thanks { display: none; line-height: 1; }

#footer .banner { padding: 8px 0;  list-style-type: none; font-size: 0; text-align: center; box-shadow: inset 0 12px 12px -8px rgba(0,0,0,.66); }
#footer .banner li { margin: 8px; font-size: 1rem; display: inline-block; }
#footer .banner a { display: block; background-color: #fff; }
#footer .banner img { vertical-align: bottom; }
#footer .banner a:hover img { opacity: .8; }
#footer .nav { list-style-type: none; text-align: center; background-color: #002030; background-color: rgba(0,0,0,.5); font-size: 12px; }
#footer .nav li { margin: 1em 1.5em; display: inline-block; }

#footer .lower { padding: 16px 16px 32px; position: relative; line-height: 1.4; }
#footer .right small { font-size: 12px; }
#footer .license { padding-right: 57px; position: absolute; top: 16px; right: 16px; text-align: right; }
#footer .license img { position: absolute; right: 0; top: 0; }
#footer .license small { display: block; font-size: 12px; }

/* .content-only
======================================================================= */
body.content-only #wrapper,
body.content-only #wrapper-inner,
body.content-only #main-wrap { width: 800px; }
body.content-only #main { float: none; }

/* prettyPhoto
======================================================================= */
div.dark_square .pp_close { float: none; position: relative; width: 100%; height: 32px; background: url(../img/button-close.gif) center center no-repeat; }

/*
.pp_description { display: none !important; }
.pp_close { float: none !important; width: auto !important; height: 32px !important; background: url(../img/button-close.gif) center center no-repeat !important; }
.pp_nav { display: none !important; }
*/