/* ===================================================================
	SCE CONFIDENTIAL
 	Copyright (C) Sony Computer Entertainment Inc.
 	All Rights Reserved.
	
	サイト内共通
	
	1. 全体
	2. グローバルヘッダー
	3. グローバルメニュー
	4. グローバルフッター
	5. 共通パーツ
=================================================================== */
@charset "utf-8";

/* ===================================================================
 1. 全体
=================================================================== */

html { height: 100%; }
body {
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	background: #111111;
	height: 100%;
}
input, textarea {	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; }

/* ===================================================================
 2. グローバルヘッダー
=================================================================== */
#globalHeader {
	width: 100%;
	min-width: 800px;
	background: #fff;
}

@media screen and (min-width: 0px) {
  #globalHeader {	min-width: 320px; }
}

#headerWrapper:after { content:""; clear:both; display:block; }
#headerWrapper {
	position: relative;
	width: 100%;
	max-width: 1070px;
	margin: 0 auto;
	padding: 12px 0;
}
@media screen and (max-width: 560px)	{
	#headerWrapper {
		padding: 8px 0;
		border-bottom: 1px solid #333;
	}
	
}

/* company logo
----------------------------------------------------*/
#companyLogo {
	width: 100%;
	height: 24px;
	padding: 5px 0;
	background: #000;
}
#companyLogo span:after { content:""; clear:both; display:block; }
#companyLogo span {
	display: block;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}
#companyLogo span a {
	display: block;
	float: right;
	width: 100px;
	height: 24px;
	text-decoration: none;
	text-indent: -9999px;
	overflow: hidden;
	background: url(../images/company_logo.png) center center no-repeat;
}

/* Logo
----------------------------------------------------*/
#globalHeader #logo	{
	display: block;
	width: 242px;
	height: 54px;
	margin: 0 10px 0;
	text-indent: -9999px;
	overflow: hidden;
	background: url(../images/global_header_logo.png) left top no-repeat;
	background-size: 100%;
	/* PS20th */
	background-image: url(../images/global_header_logo_PS20th.png);
}
@media screen and (max-width: 560px)	{
	#globalHeader #logo {
		width: 194px;
		height: 43px; 
	}
}

/*==========================================
 3. GLOBAL MENU
============================================*/
#headerMenuWrapper	{
	clear: both;
	width: 100%;
	background: #fff;
	border-bottom: 1px solid #fff;
	
}
@media screen and (max-width: 560px)	{
	#headerMenuWrapper {
		display: none;
    border: none;
	
	}
}
#headerMenuBox	{
	position:relative;
	width: 100%;
	max-width: 1060px;
	margin: 0 auto;
}
@media screen and (max-width: 560px)	{
	#headerMenuBox {
		padding-top: 10px;
		text-align: center;
	}
}

/* モバイル用Menuボタン
----------------------------------------------------*/
#globalHeader #mobileMenu	{
	display: none;
}
@media screen and (max-width: 560px)	{
	#globalHeader #mobileMenu {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		width: 78px;
		height: 59px;
		line-height: 59px;
		padding-left: 15px;
		color: #fff;
		font-weight: normal;
		cursor: pointer;
		background: #fff url(../images/icon_arrow_bottom.png) 65px center no-repeat;
	}
	#globalHeader #mobileMenu.on	{
		background: #fff url(../images/icon_arrow_top.png) 65px center no-repeat;
	}
}

/* Search
----------------------------------------------------*/
#globalHeader #search	{
	position: absolute;
	right: 10px;
	top: -51px;
}
@media screen and (max-width: 800px)	{
	#globalHeader #search {
		top: -35px;
	}
}
@media screen and (max-width: 560px)	{
	#globalHeader #search {
		position: relative;
		right: inherit;
		top: inherit;
		margin-bottom: 10px;
	}
}
#globalHeader #search input#searchBox	{
	font-size: 12px;
	width: 125px;
	height: 21px;
	line-height: 21px;
	border: solid 1px #bbb;
	padding: 0 0 0 25px;
	background: #fff url(../images/global_header_search_icon.png) 5px center no-repeat;
	border-radius: 12px 0px 0px 12px;
	box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.1) inset;
}
#globalHeader #search input#searchBtn,
#globalHeader #search input#searchBtnE	{
	width: 58px;
	height: 23px;
	color: #fff;
	background: #565656;
	background: -moz-linear-gradient(
		top,
		#666666 0%,
		#666666 50%,
		#565656 50%,
		#818181 99%,
		#b5b5b5);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#666666),
		color-stop(0.50, #666666),
		color-stop(0.50, #565656),
		color-stop(0.99, #818181),
		to(#b5b5b5));
	text-decoration: none;
	border-style: none;
	cursor: pointer;
	border-radius: 0px 12px 12px 0px;
}
#globalHeader #search input#searchBtnE	{	font-size: 12px; }

/* Navigation
----------------------------------------------------*/
#globalHeader p#nav	{
	width: auto;
  margin-bottom: 0;
	position: absolute;
	right: 230px;
	top: -47px;
	font-size: 10px;
}
@media screen and (max-width: 800px)	{
	#globalHeader p#nav {
		right: 5px;
		top: -63px;
	}
}
@media screen and (max-width: 560px)	{
	#globalHeader p#nav {
		position: relative;
		right: inherit;
		top: inherit;
		margin-bottom: 10px;
	}
}
#globalHeader p#nav a	{
	padding: 0 10px;
	text-decoration: none;
	color: #666;
}
#globalHeader p#nav a.line	{	background: url(../images/line_dot_tate_b.png) right top repeat-y; }
#globalHeader p#nav a:hover	{	text-decoration: underline; }
@media screen and (max-width: 560px)	{	#globalHeader p#nav a { color: #fff; } }

/* Menu
----------------------------------------------------*/
ul#headerMenu:after { content:""; clear:both; display:block; }
ul#headerMenu	{
	width: 100%;
  max-width: 1060px;
	margin: 0 auto;
	list-style: none;
}
ul#headerMenu li	{
  position: relative;
	float: left;
  width: 20%;
}

ul#headerMenu a 	{
	display: block;
	height: 39px;
	line-height: 39px;
	text-align: center;
	/*  border-right: 1px #666 solid;*/
	color: #000;
	text-decoration: none;
	font-size: 18px;
}
ul#headerMenu li.globalMenu_corporate a {
	border-left: 1px #fff solid;
}
ul#headerMenu li.globalMenu_corporate a:hover {
	background-color: #fab303;
}
ul#headerMenu li.globalMenu_jigyo a:hover {
	background-color: #ef641f;
}
ul#headerMenu li.globalMenu_csr a:hover {
	background-color: #d93a34;
}
ul#headerMenu li.globalMenu_release a:hover {
	background-color: #2a90a6;
}
ul#headerMenu li.globalMenu_saiyo a:hover {
	background-color: #7fb03d;
}

ul#headerMenu li a:hover	{
	background-color: #ddd;
}

ul#headerMenu li:hover ul	{
	display: block;
	text-align: left;
}
@media screen and (max-width: 960px)	{
  ul#headerMenu li:first-child a {	border-left: none; }
  ul#headerMenu li:last-child a {	border-right: none; }
}
@media screen and (max-width: 560px)	{
  ul#headerMenu	{
    border-top: 1px solid #fff;
  }
  ul#headerMenu li {
    width: 50%;
    border-bottom: 1px solid #fff;
  }
  ul#headerMenu li:nth-child(odd) a 	{
    border-right: none;
  }
  ul#headerMenu li.globalMenu_top {	display: none; }
  ul#headerMenu li:hover ul	{
    display: none;
  }
}

/* アクティブなメニュー
-------------------------------*/
ul#headerMenu li.active > a	{
	background-color: #CCCCCC;
}

/* Sub-menu 
============================================*/
ul#headerMenu ul	{
  display: none;
  position: absolute;
  width: 100%;
  top: 39px;
  left: 0;
  z-index: 99999;
  list-style: none;
  background: #fff;
  border-bottom: 1px dotted #ccc;
}

ul#headerMenu ul li	{
  display: block;
  float: none;
  width: 100%;
  border-top: 1px #ccc dotted;
}

ul#headerMenu ul a	{
  float: none;
	display: block;
	height: auto;
  padding: 10px 5px;
  line-height: 1.4em;
  font-size: 72%;
  word-wrap: break-word;
	text-transform: none;
  border-right: 1px dotted #ccc;
  border-left: 1px dotted #ccc;
}

/* ===================================================================
 4. グローバルフッター
=================================================================== */
#globalFooter {
	clear: both;
	width: 100%;
	min-width: 800px;
	color: #ccc;
    background: #111;
}
@media screen and (min-width: 0px) 	{	#globalFooter {	min-width: 320px; } }
#globalFooter a	{
	color: #e3e3e3;
	text-decoration: none;
	line-height: 1.5em;
}
#globalFooter a:hover	{	text-decoration: underline; }

/* Navigation
----------------------------------------------------*/
#footerNavBg	{
	width: 100%;
	padding: 10px 0;
	background: #555;
}
/*@media screen and (max-width: 560px)	{	#footerNavBg { display: none; } }*/
#footerNavWrapper	{
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}
#footerNavBox	{
	padding: 0 30px;
}
@media screen and (max-width: 560px)    {
    #footerNavBox	{
        padding: 0 10px;
    }
}
#footerNavBox h2	{
	text-align: left;
	font-weight: normal;
	border-bottom: solid 1px #777;
	margin-bottom: 10px;
	color: #ccc;
}
#footerNavBox h3	{
    margin-bottom: 0;
	text-align: left;
	font-weight: normal;
}

ul#footerNav:after { content:""; clear:both; display:block; }
ul#footerNav	{
    width: 100%;
	margin-bottom: 0;
    word-wrap: break-word;
}
ul#footerNav li	{
    float: left;
    margin: 0 1em 5px 0;
    font-size: 85%;
    line-height: 1.2em;
    border-right: 1px solid #777;
}
ul#footerNav li a	{
    margin-right: 1em;
}
@media screen and (max-width: 560px)    {
    ul#footerNav li	{
        float: none;
        margin-right: 0;
        border-right: none;
    }
    ul#footerNav li a	{
        margin-right: 0;
    }
}

/* Corporate Navigation
----------------------------------------------------*/
#footerCorpWrapper {
	width: 100%;
	max-width: 1070px;
	margin: 0 auto;
	padding: 10px 0;
}
#footerCorpBox {
	padding: 0 20px;
	text-align: center;
}
ul#corpNav	{
    margin-bottom: 10px;
}
ul#corpNav li	{
	display: inline;
	white-space: nowrap;
	margin: 0 3px;
}
ul#corpNav li a	{
	font-size: 85%;
	text-decoration: none;
	margin-right: 10px;
}

/* Copyright */
#globalFooter .copyright {
	font-size: 11px;
	line-height: 1.4em;
    margin-bottom: 0;
	width: 100%;
}


/* ===================================================================
 5. 共通パーツ
=================================================================== */
/* SiteCatalyst
--------------------------*/
#SiteCatalyst { display: none; }

/* パンくずリスト
--------------------------*/
.container .sabupage .section {
	margin-bottom: 0px;
	width: 100%;
	margin-top: 120px;
}
.tit_sub_r {
	font-size: 30px;
	background-color: #DD280B;
	padding: 20px;
	font-weight: bold;
	color: #FFF;
}
p.breadLink_top {
    /*margin-bottom: 20px;*/
    font-size: 85%;
    color: #999;
    text-indent: 16px;
    background: url("../images/icon_home.png") left 2px no-repeat;
}

/* メディアネット等
--------------------------*/
.imgBox_bana {
	cursor:pointer;
	margin-bottom: 5px;
	padding-top: 5px;
	padding-right: 30px;
	padding-bottom: 0px;
	padding-left: 30px;
}

/* ページトップへ戻るボタン
--------------------------*/
.btnBackTop,
.btnBackTopVita{
    display: block;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    text-indent: -9999px;
    overflow: hidden;
    background: url(../images/btn_back_top_ie8.png) left top no-repeat;
    background-size: 40px auto;
    z-index: 99999;
}
@media screen and (-webkit-min-device-pixel-ratio: 2){
    .btnBackTop {
        background-image: url(../images/btn_back_top.png);
    }
}
.btnBackTopVita{
    position: inherit;
    bottom: inherit;
    right: inherit;
    margin: 0 auto;
}
.btnBackTop:hover,
.btnBackTopVita:hover{ background-position: left -40px; }


/* ========================================================
 4. サイドバナー
=========================================================== */
/* clearfix */
#contentBody:after, ul#sideBanner:after {
  content: "";
  clear: both;
  display: block;
}

@media screen and (max-width: 650px) {
  ul#sideBanner {
    margin: 0 auto;
    padding: 10px 10px 5px;
    text-align: center;
  }
}
ul#sideBanner li {
	list-style: none;
	margin-bottom: 10px;
	line-height: 1.3em;
	font-size: 100%;
	padding: 5px;
}
@media screen and (max-width: 650px) {
  ul#sideBanner li {
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
    vertical-align: top;
  }
}
ul#sideBanner li a {
	display: block;
	border: 1px solid #555;
	border-radius: 4px;
	color: #222;
	text-align: center;
	background-color: #f6f6f6;
	padding-top: 14px;
	padding-right: 9px;
	padding-bottom: 14px;
	padding-left: 9px;
}
@media screen and (max-width: 650px) {
  ul#sideBanner li a {
    padding: 6px;
  }
}
ul#sideBanner li a img {
  margin-bottom: 5px;
  width: 100%;
  height: auto;
}
ul#sideBanner li a:hover {
	border-color: #999999;
}
ul#sideBanner li a span {
  display: block;
  text-align: left;
}