/* ===================================================================
	SCE CONFIDENTIAL
 ©2012 Sony Computer Entertainment Inc.
 All Rights Reserved.
	
	PlayStation®4 Online Users Guide
	
	1. 大枠レイアウト
	2. ナビゲーション
=================================================================== */
@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	{
	position: relative;
	width: 100%;
	max-width: 1500px;
	min-height: 310px;
	margin: 0 auto;
	padding: 0 0 20px;
}
/* PS4相当 */
body.width_PS4 #content	{ min-height: 500px; padding: 20px 0; }

@media screen and (max-width: 670px)	{	#content { padding: 68px 0 20px; } } /* モバイル */


/* ===================================================================
 2. ナビゲーション
=================================================================== */
#topMenuBox	{	width: 100%; }
@media screen and (max-width: 670px)	{	#topMenuBox	{ width: auto; padding: 0 10px; } }

ul#topMenuList:after { content:""; clear:both; display:block; }
ul#topMenuList	{	width: 100%; }
@media screen and (max-width: 670px)	{	ul#topMenuList	{	 } }
ul#topMenuList li.topMenu	{
	width: 150px;
	float: left;
	margin-bottom: 5px;
}
@media screen and (max-width: 670px)	{
	ul#topMenuList li.topMenu {
		width: 100%;
		float: none;
		margin-bottom: 2px;
	}
}
ul#topMenuList li a.menu	{
	display: block;
	width: 125px;
	height: 55px;
	padding: 25px 10px 0;
	line-height: 1.4em;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	/*font-weight: bold;*/
	word-break: break-all;
	z-index: 100;
	background: #2770b9;
}
@media screen and (max-width: 670px)	{
	ul#topMenuList li a.menu {
		display: block;
		width: auto;
		height: auto;
		margin: 0;
		padding: 13px 10px;
	}
}

ul#topMenuList li a.menu:hover	{
	background: #0457a8;
}
ul#topMenuList li.open a.menu	{
	position: relative;
	background: #03427f;
}
ul#topMenuList li.open a.menu:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -10px;
	border-top: 10px solid #03427f;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}
/* タッチデバイスでhoverが戻らないバグ対応 */
@media screen and (min-width: 0px)	{	ul#topMenuList li a.touch	{	background: #2770b9;	}	}

/* サブメニュー
--------------------------------------------------*/
.subMenuBox	{
	display: none;
	position: absolute;
	width: 445px;
	min-width: 400px;
	padding: 5px 0 0;
}
@media screen and (min-width: 1520px)	{
	.subMenuBox	{ position: relative; }
}
@media screen and (max-width: 670px)	{
	.subMenuBox {
		position: inherit;
		width: 100%;
		min-width: 100%;
	}
}
.borderBox:after { content:""; clear:both; display:block; }
.borderBox	{	background: #4b78a3;	}

.subMenuBox ul li	{	border-bottom: 1px solid #9bb5c8; }
.subMenuBox ul li:last-child	{	border-bottom: none; }
.subMenuBox ul li a	{
	display: block;
	padding: 12px 10px 11px 24px;
	line-height: 1.4em;
	color: #fff;
}
.subMenuBox ul li a:hover {
	text-decoration: none;
	background-color: #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: 10px 0 10px 10px; }

/* サブメニュー（2列、3列）
-------------------------------*/
.subMenuBox.column2	{ width: 595px; }
.subMenuBox.column3	{ width: 745px; }

.subMenuBox.column2 ul,
.subMenuBox.column3 ul	{
	width: 277px;
	float: left;
	margin-right: 20px;
}
.subMenuBox.column3 ul	{	width: 228px; }

.subMenuBox.column2 ul ul,
.subMenuBox.column3 ul ul	{
	width: auto;
	float: none;
	padding: 0 0 0 20px;
	margin: 0;
}

@media screen and (min-width: 920px)	{
	.subMenuBox.column3	{ width: 895px; }
}
@media screen and (max-width: 770px)	{
	.subMenuBox.column3	{ width: 595px; }
}
@media screen and (min-width: 920px)	{
	.subMenuBox.column3 ul	{	width: 278px; }
}
@media screen and (max-width: 770px)	{
	.subMenuBox.column3 ul	{	width: 178px; }
}
@media screen and (max-width: 670px)	{
	.subMenuBox.column2,
	.subMenuBox.column3	{ width: 100%; }
	.subMenuBox.column2 ul,
	.subMenuBox.column3 ul	{
		width: auto;
		float: none;
		margin: 0;
	}
}