@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/*------------------------------------------------------------------------------

共通

------------------------------------------------------------------------------*/
html {
	background-color: transparent;
}

body {
	background: url(../img/bg.jpg) repeat top;
	background-size: 100%;
	color: #000000;
	/*font: 13px/1.231 "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;*/
	font: 14px/1.231 "Open Sans", sans-serif;
	*font-size: small;
	*font: x-small;
	letter-spacing: 0;
	line-height:1.8;
}

img {
	vertical-align: bottom;
}

a {
	color: #ff5426;
}

em {
	color: #ff4343;
}

strong {
	color: #ff4b9f;
	font-weight: bold;
	font-size: larger;
}

.logo_img{
	vertical-align: middle;
	padding-right: 10px;
}

.clear {
	clear: both;
}

.margin_top {
	margin-top: 5px;
}

.margin_bottom {
	margin-bottom: 10px;
}

.align_right {
	text-align: right;
}

.align_center {
	text-align: center;
}

.font_small {
	font-size: small;
}

.caption {
	background: url(../img/nav_bg.png) repeat-x;
	background-size: 4px 60px;
	position: relative;
	margin-bottom: 4px;
	z-index: 1;
}

.caption h2 {
	background: url(../img/nav_frame.png) no-repeat;
	background-size: 320px 180px;
	background-position: right -120px;
	height: 60px;
}

.caption p {
	background: url(../img/nav_frame.png) no-repeat;
	background-size: 320px 180px;
	background-position: left -0px;
	height: 60px;
}


.content p.padding_top_clear {
	padding: 4px 10px 10px 10px;
}

.new {
	position: absolute;
	background: url(../img/new.png) no-repeat;
	background-size: 46px 20px;
	width: 62px;
	height: 26px;
	text-indent: -9999em;
}

.gradation {
	background: -moz-linear-gradient(top, #fffae7, #362323);
	background: -webkit-linear-gradient(top, #fffae7, #362323);
	background: linear-gradient(#fffae7, #362323);
	width: 100%;
	height: 80px;
}


/*----------------------------------------------------------

開閉式コンテンツ

----------------------------------------------------------*/
.collapsible {
	margin-bottom: 4px;
}

.collapsible .caption {
	background: url(../img/collapsible_cap_bg.png) repeat-x;
	background-size: 4px 39px;
	margin-bottom: 0px;
}

.collapsible .caption div/*a*/{
	display: block;
	background: url(../img/collapsible_cap_frame.png) no-repeat;
	background-size: 320px 156px;
	background-position: right -78px;
	cursor: pointer;
}

.collapsible .caption h3 {
	background: url(../img/collapsible_cap_frame.png) no-repeat;
	background-size: 320px 156px;
	background-position: left -0px;
	height: auto;
}

.collapsible.collapsed .caption div/*a*/{
	display: block;
	background: url(../img/collapsible_cap_frame.png) no-repeat;
	background-size: 320px 156px;
	background-position: right -117px;
}

.collapsible.collapsed .caption h3 {
	background: url(../img/collapsible_cap_frame.png) no-repeat;
	background-size: 320px 156px;
	background-position: left -39px;
	height: auto;
}

.collapsible .content {
	display: none;
}

.collapsible.collapsed .content {
	display: block;
}

.collapsible .close {
	text-align: right;
}

.collapsible .close a {
	color: #ff4b9f;
}

/*----------------------------------------------------------

コンテンツ

----------------------------------------------------------*/
.content {
	position: relative;
	background-color: #fffce0;
	z-index: 1;
}

.content p {
	padding: 10px;
}
.content p.padding_top_clear {
	padding: 4px 10px 10px 10px;
}

.content h4,
.content h5,
.content h6 {
	color: #ff6623;
	padding: 10px;
	padding-bottom: 0px;
}

.content .ss {
	border: solid #000000;
	border-width: 2px 0px 2px 0px;
}

.content .youtube {
	text-align: center;
	margin-top: 0px;
}

.content .separate {
	border-width: 0px;
	margin: 0px;
	padding: 0px;
	vertical-align: middle;
}

.content .new {
/*	display: block;*/
	margin-bottom: -10px;
}

.content.reverse {
	background-color: #362323;
}

.content .light {
	background-color: #fffae7;
}

.content .dark strong {
	color: #ff569a;
}

.content .dark em {
	color: #ff4141;
}

/*----------------------------------------------------------

ナビゲーション

----------------------------------------------------------*/
#nav {
	margin-top: 12px;
}
#nav.index {
	margin-top: 8px;
}

#nav li {
	background: url(../img/nav_bg.png) repeat-x;
	background-size: 4px 60px;
	margin-top: 4px;
	position: relative;
}

#nav a {
	display: block;
	background: url(../img/nav_frame.png) no-repeat;
	background-size: 320px 180px;
	background-position: right -60px;
	position: relative;
}

#nav p {
	background: url(../img/nav_frame.png) no-repeat;
	background-size: 320px 180px;
	background-position: left -0px;
}

#nav li.disable {
	background: url(../img/nav_bg_disable.png) repeat-x;
	background-size: 4px 60px;
	margin-top: 4px;
}

#nav li.disable span {
	display: block;
	background: url(../img/nav_frame_disable.png) no-repeat;
	background-size: 320px 120px;
	background-position: right -60px;
	position: relative;
}

#nav li.disable span p {
	background: url(../img/nav_frame_disable.png) no-repeat;
	background-size: 320px 120px;
	background-position: left -0px;
}

/*----- TOP -----*/
#nav .top .new,
#top h2 .new {
	position: absolute;
	left: 125px;
	top: 5px;
	visibility: hidden;
}

/*----- STORY -----*/
#nav .story .new,
#story h2 .new {
	position: absolute;
	left: 117px;
	top: 5px;
	visibility: hidden;
}

/*----- CHARACTER -----*/
#nav .character .new,
#character h2 .new {
	position: absolute;
	left: 234px;
	top: 5px;
	visibility: hidden;
}

/*----- SYSTEM -----*/
#nav .system .new,
#system h2 .new {
	position: absolute;
	left: 174px;
	top: 5px;
	visibility: hidden;
}

/*----- MOVIE -----*/
#nav .movie .new,
#movie h2 .new {
	position: absolute;
	left: 170px;
	top: 5px;
/*	visibility: hidden;*/
}

/*----- SPECIAL -----*/
#nav .special .new,
#special h2 .new {
	position: absolute;
	left: 200px;
	top: 5px;
	visibility: hidden;
}


/*----- 小さい版 -----*/
.nav_small {
	margin-bottom: 4px;
}

.nav_small .caption {
	background: url(../img/collapsible_cap_bg.png) repeat-x;
	background-size: 4px 39px;
	margin-bottom: 0px;
}

.nav_small .caption p {
	display: block;
	background: url(../img/nav_small_cap_frame.png) no-repeat;
	background-size: 320px 156px;
	background-position: right -78px;
	height: 39px;
}

.nav_small .caption a {
	display: block;
	background: url(../img/nav_small_cap_frame.png) no-repeat;
	background-size: 320px 156px;
	background-position: right -78px;
	cursor: pointer;
}

.nav_small .caption h3 {
	background: url(../img/nav_small_cap_frame.png) no-repeat;
	background-size: 320px 156px;
	background-position: left -0px;
	height: auto;
}

/*----- 小さい版リンク無しバナー -----*/
.nav_banner {
	margin-bottom: 4px;
}

.nav_banner .caption {
	background: url(../img/collapsible_cap_bg.png) repeat-x;
	background-size: 4px 39px;
	margin-bottom: 0px;
}

.nav_banner .caption p {
	display: block;
	background: url(../img/nav_banner_cap_frame.png) no-repeat;
	background-size: 320px 156px;
	background-position: right -78px;
	height: 39px;
}

.nav_banner .caption a {
	display: block;
	background: url(../img/nav_banner_cap_frame.png) no-repeat;
	background-size: 320px 156px;
	background-position: right -78px;
	cursor: pointer;
}

.nav_banner .caption h3 {
	background: url(../img/nav_banner_cap_frame.png) no-repeat;
	background-size: 320px 156px;
	background-position: left -0px;
	height: auto;
}

/*----- サブのキャプション -----*/
.sub_caption {
	background: url(../img/sub_cap_bg.png) repeat-x;
	background-size: 320px 29px;
	margin-top: 8px;
	margin-bottom: 4px;
}
.sub_caption h3 {
	background: url(../img/nav_system_cap.png) no-repeat;
	background-size: 320px 58px;
	background-position: left -0px;
	height: auto;
}
.sub_caption a {
	display: block;
	background: url(../img/nav_system_cap.png) no-repeat;
	background-size: 320px 58px;
	background-position: right -29px;
}
.sub_caption p {
	width: 320px;
	margin: 0px auto;
}


/*----------------------------------------------------------

各ページ右上に配置のナビゲーション

----------------------------------------------------------*/
#gNav #navbtn{
  width: 50px;
  margin: 0;
  position: fixed;
  top: 0;
  right: 10px;
  z-index: 6;
  padding: 0;
}
#gNav #navbtn img {
  width: 50px;
}
#gNav ul{
	position: fixed;
	top: -800px;
	background: #fffce0;
	padding: 65px 0 0 0;
	z-index: 5;
}
#gNav li {
	width: 49%;
	float: left;
	margin-bottom: 10px;
	background: url('../img/nav_bg.png') repeat-x;
	background-size: 100% 100%;
}
#gNav li:nth-child(odd) {
	width: 49%;
	margin-right: 2%;
}
#gNav li img{
	width: 100%;
}
/*----------------------------------------------------------

フッター

----------------------------------------------------------*/
hr.under_content {
	margin: 0;
}
.footer {
	margin-top: 0px;
	padding-top: 10px;
	width: 100%;
	background: url(../img/footer.jpg) bottom center no-repeat;
	background-size: cover;
}

/*----- SNS -----*/
#social ul {
	width: 304px;
	margin: 0 auto;
	text-align: center;
}
#social li {
	width: 88px;
	float: left;
	margin-left: 10px;
	margin-bottom: 8px;
	text-align: center;
}
#social li:nth-child(3) {
	margin-right: 10px;
}
#social li img {
	width: 88px;
}
#link ul {
	width: 186px;
	margin: 0 auto;
	text-align: center;
}
#link li {
	width: 88px;
	float: left;
	margin-bottom: 8px;
	text-align: center;
}
#link li:nth-child(1) {
	margin-right: 10px;
}
#link li img {
	width: 88px;
}
.copyright {
	font-size: 10px;
	text-align: center;
	color: #000000;
	margin: 0px auto 10px;
	line-height: 1.6em;
}