/* ===================================================================
	SCE CONFIDENTIAL
 ©2013 Sony Computer Entertainment Inc.
 All Rights Reserved.
	
	PlayStation®4 Online Users Guide
	
	1. 大枠レイアウト
	2. ナビゲーション
	3. コンテンツ
=================================================================== */
@charset "utf-8";

/* ===================================================================
 1. 大枠レイアウト
=================================================================== */
#contentWrapper:after { content:""; clear:both; display:block; }
#contentWrapper	{
	width: 100%;
	min-width: 750px;
	background: #cfe2fd;
}
@media screen and (min-width: 0px)	{	#contentWrapper { min-width: 320px; } }

#content	{
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 0 20px;
}
@media screen and (max-width: 670px)	{
	#content {	padding: 68px 0 30px;}
}

#contentRight	{
	position: relative;
	float: right;
	width: 100%;
	margin-left: -200px;
}
#contentBody	{
	position: relative;
	min-height: 338px;
	padding: 20px 20px 60px;
	margin-left: 200px;
	background: #fff;
}

@media screen and (min-width: 1170px)	{
	#contentBody	{	padding: 20px 40px 60px;	}
}
@media screen and (max-width: 670px)	{
	#contentRight {
		float: none;
		margin-left: 0;
		padding: 5px 10px 0;
	}
	#contentBody	{
		min-height: inherit;
		padding: 10px 10px 60px;
		margin-left: 0;
	}
}

/* ===================================================================
 2. ナビゲーション
=================================================================== */
#topMenuBox	{
	position: relative;
	z-index: 100;
	float: left;
	width: 200px;
}
#topMenuBox.fixed	{
	position: fixed;
	top: 0;
}
@media screen and (max-width: 670px)	{
	#topMenuBox	{
		float: none;
		width: auto;
		padding: 0 10px;
	}
	#topMenuBox.fixed	{ position: relative; }
}

/* メニューに戻るボタン（スマホ用） */
#backMenu	{	display: none; margin: 0 }
#backMenu a	{
	display: block;
	padding: 13px 10px;
	line-height: 1.4em;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	background: #0457a8 url(../../../imgps4/icon_arrow_backMenu.png) 10px center no-repeat;
}
#backMenu a:hover	{ background-color: #03427f; }

ul#topMenuList	{
	width: 180px;
	margin: 0 10px;
}
@media screen and (max-width: 670px)	{	ul#topMenuList { width: 100%; margin: 0; } }

ul#topMenuList li.topMenu	{
	width: 100%;
	margin-bottom: 2px;
}
@media screen and (max-width: 670px)	{
	ul#topMenuList li.topMenu { display: none; width: 100%; }
	ul#topMenuList li.active	{ display: block; }
	/* メニュー状態
	--------------------------*/
	#content.mobileMenu ul#topMenuList li.topMenu { display: block; }
	#content.mobileMenu #contentRight { display: none; }
}

ul#topMenuList li a.menu	{
	display: block;
	padding: 11px 10px;
	line-height: 1.4em;
	color: #fff;
	font-size: 100%;
	text-align: center;
	text-decoration: none;
	/*font-weight: bold;*/
	background: #2770b9;
}
@media screen and (max-width: 670px)	{
	ul#topMenuList li a.menu {
		padding: 13px 10px;
	}
}

ul#topMenuList li a.menu:hover	{
	background: #0457a8;
}
/* オープンしているメニュー */
ul#topMenuList li.open a.menu	{
	position: relative;
	z-index: 100;
	background-color: #0457a8;
}
ul#topMenuList li.open a.menu:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -10px;
	border-left: 10px solid #0457a8;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}
/* アクティブなメニュー */
ul#topMenuList li.active a.menu	{
	background-color: #03427f;
	background-image: none;
}
ul#topMenuList li.active.open a.menu:before {
	border-left: 10px solid #03427f;
}
@media screen and (max-width: 670px)	{
	ul#topMenuList li.open a.menu:before {
		top: 100%;
		left: 50%;
		margin-top: 0;
		margin-left: -6px;
		border-top: 6px solid #03427f;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: none;
	}
	ul#topMenuList li.open a.menu	{
		background-color: #03427f;
	}
	ul#topMenuList li.active a.menu	{
		background-image: url(../../../imgps4/icon_arrow_backMenu.png);
		background-position: 10px center;
		background-repeat: no-repeat;
		padding: 13px 10px 13px 35px;
	}
	ul#topMenuList li.active a.menu:hover	{	background-color: #0457a8; }
	#content.mobileMenu ul#topMenuList li.active a.menu	{	background-image: none; }
}

/* タッチデバイスでhoverが戻らないバグ対応 */
@media screen and (min-width: 0px)	{	ul#topMenuList li a.touch	{	background: #2770b9; 	}	}

/* サブメニュー
--------------------------------------------*/
.subMenuBox	{
	display: none;
	position: absolute;
	left: 200px;
	top: 10px;
	width: 338px;
}
@media screen and (max-width: 670px)	{
	.subMenuBox {
		position: inherit;
		width: auto;
		padding-top: 5px;
	}
}

.borderBox	{
	background: #4b78a3;	
}

.subMenuBox ul li	{	border-bottom: 1px solid #9bb5c8; }
.subMenuBox ul li:last-child	{	border-bottom: none; }
.subMenuBox ul li p	{
	margin-bottom: 1em;
}
.subMenuBox ul li a	{
	display: block;
	padding: 12px 10px 11px 24px;
	line-height: 1.4em;
	color: #fff;
}
/* アクティブなサブメニュー */
.subMenuBox ul li a.active {
	position: relative;
	color: #fff;
	background: #03427f;
}
.subMenuBox ul li a.active:hover	{ background: #03427f; }
.subMenuBox ul li a.active:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -10px;
	border-left: 10px solid #03427f;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}
@media screen and (max-width: 670px)	{
	.subMenuBox ul li a.active {
		background: inherit;
	}
	.subMenuBox ul li a.active:before {
		border: none;
	}
}
.subMenuBox ul li a:hover {
	text-decoration: none;
	background: #0457a8;
}

/* サブメニュー第3階層
-------------------------------*/
.subMenuBox ul li a.sub	{ background-position: 10px center; background-repeat: no-repeat; background-image: url(../../../imgps4/icon_arrow_right.png); }
.subMenuBox ul li a.open.sub	{ background-image: url(../../../imgps4/icon_arrow_down.png); }
.subMenuBox ul ul	{	padding: 0 0 0 20px; }
.subMenuBox ul.subList { display: none; }
.subMenuBox ul.subList li	{ border: none; }
.subMenuBox ul.subList li a	{ border-top: 1px dashed #bbb;	padding-left: 10px; }


/* ===================================================================
 3. コンテンツ
=================================================================== */
/* 見出し
--------------------------*/
#contentBody h1	{
	font-size: 115%;
	margin-bottom: 20px;
	padding-left: 3px;
	border-bottom: 2px solid #03427f;
	border-left: 10px solid #03427f;
}

/* next & prevボタン
--------------------------*/
ul#nextPrev:after { content:""; clear:both; display:block; }
ul#nextPrev	{
	position: absolute;
	width: 100%;
	height: 34px;
	left: 50%;
	bottom: 0;
	margin-left: -50%;
	padding-top: 10px;
	border-top: 1px solid #ccc;
}
ul#nextPrev li	{
	position: absolute;
	width: 40px;
	height: 34px;
	left: 50%;
	top: 10px;
}
ul#nextPrev li a	{
	display: block;
	width: 40px;
	height: 34px;
	text-indent: -9999px;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center 0px;
}
ul#nextPrev li a:hover	{ background-color: #2770b9; background-position: center -34px;}
ul#nextPrev li#linkTop	{
	margin-left: -20px;
}
ul#nextPrev li#linkTop a	{	background-image: url(../../../imgps4/icon_link_top.png); }
ul#nextPrev li#linkPrev	{
	margin-left: -100px;
}
ul#nextPrev li#linkPrev a	{	background-image: url(../../../imgps4/icon_link_prev.png); }
ul#nextPrev li#linkNext	{
	margin-left: 50px;
}
ul#nextPrev li#linkNext a	{	background-image: url(../../../imgps4/icon_link_next.png); }