@charset "utf-8";



/* 全体設定
----------------------------- */
html {
	height: 100%;	/* footer下寄せ */
}
body {
	overflow-y: scroll;	/* 常に縦スクロールバー出してメニューガタつき解消 */

	min-height: 100%;	/* footer下寄せ */
	display: -ms-flexbox;
	display: flex;	/* footer下寄せ */
	    -ms-flex-direction: column;
	        flex-direction: column;	/* footer下寄せ */

	background: url('../img/base/bg-pattern.png'),
    url("../img/base/bg.jpg") fixed center center;
	background-size: auto, cover;
}
@media (max-width: 768px){
	body {
    background: url('../img/base/bg-pattern.png'),
      url("../img/base/bgs.jpg") fixed center center;
    background-size: auto, cover;
	}
}


/* webfont
----------------------------- */
.appendMenu li, h2 {
	font-family: 'Orbitron', sans-serif;
}
.menu_ruby {
	font-family: 'Meiryo', 'Mplus 1p', sans-serif;
}






/* bootstrap修正
----------------------------- */
.navbar.navbar-default, .navbar.navbar-inverse {
  background-color: transparent;	/* メニュー背景色 */
	background: rgba(10, 10, 10, 0.95);
  border-bottom: none;
}

.navbar {
  min-height: 0;	/* メニューの最低限の高さ */
}

@media (min-width: 768px){	/* メニューの各ボタン */
	.navbar.navbar-default .navbar-nav>li>a, .navbar.navbar-inverse .navbar-nav>li>a {
    padding-top: 7px;
    padding-bottom: 7px;
    margin-top: 0;
    margin-bottom: 0;
    background-color: transparent;

		text-align: center;	/* センタリング メディアクエリついてるからモバイルはセンタリングされてない */
	}
}
.navbar.navbar-default .navbar-nav>li>a, .navbar.navbar-inverse .navbar-nav>li>a {
	text-align: center;	/* センタリング メディアクエリついてるからモバイルはセンタリングされてない */
}


/* bootstrap修正 メインメニューのボタン文字色
----------------------------- */
.navbar-default .navbar-nav>li>a {	/* ボタン文字色 有効リンク */
  color: #ccc;
}
.navbar-default .navbar-nav>li>a.nolink {	/* ボタン文字色 無効リンク */
  color: #444;
}
@media (min-width: 768px) {	/* ボタン文字色 アクティブページ */
	.navbar.navbar-default .navbar-nav>li.active>a, .navbar.navbar-inverse .navbar-nav>li.active>a {
    color: #ccc;
		text-shadow: 1px 1px 0 #555;
	}
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {	/* ボタン文字色 hover */
	color: #fff;
}
.navbar-default .navbar-nav>li>a.nolink:focus, .navbar-default .navbar-nav>li>a.nolink:hover {	/* ボタン文字色 無効リンクのhover */
    color: #444;
}
@media (min-width: 768px) {
	.navbar.navbar-default .navbar-nav>li.active>a:hover, .navbar.navbar-inverse .navbar-nav>li.active>a:hover {	/* ボタン文字色 activeボタンのhover */
    color: #ccc;
	}
}

@media (max-width: 768px) {	/* モバイルメニューのアクティブボタン */
	.navbar.navbar-default .navbar-nav>li.active>a, .navbar.navbar-default .navbar-nav>li.open>a, .navbar.navbar-inverse .navbar-nav>li.active>a, .navbar.navbar-inverse .navbar-nav>li.open>a {
    color: #CC0066;
	}
}


/* メニューのロゴ画像をセンタリング
----------------------------- */
.navbar-header {
	float: none;
}
.navbar-header img {
	margin: auto;
}

@media (min-width: 768px) {
	.navbar-nav {
		float: none;
		display: -ms-flexbox;
		display: flex;	/* メニューの均等マージン */
		-ms-flex-pack: justify;
		    justify-content: space-between;	/* メニューの均等マージン */

	}
}


@media (min-width: 768px) {
	.navbar.navbar-default .navbar-nav>li>a::after, .navbar.navbar-inverse .navbar-nav>li>a::after {	/* メニューボタンのhover時に出るアンダーバー */
    width: 100%;
    height: 3px;
    content: "";
    background-color: #CC0066;
	}
}
@media (min-width: 768px) {
	.navbar.navbar-default .navbar-nav>li.active>a::after, .navbar.navbar-inverse .navbar-nav>li.active>a::after {	/* メニューボタンの親要素liに.activeつけてるとこ */
    height: 3px;
    background-color: #CC0066;
	}
}

@media (max-width: 768px) {	/* モバイルメニューの調整 */
	.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {	/* メニューの高さ制限解除 */
	    max-height: none;
	}
	.navbar-fixed-top, .navbar-fixed-bottom {
		position: static;	/* メニュー固定解除 高さ固定してないからメニュー項目の数が多くなると表示しきれなくなる可能性がある */
	}
	.navbar .nav > li {	/* メニューボタン範囲拡大 */
		padding: .5em;
	}
}









/* メインメニュー設定
----------------------------- */
.appendMenu li {
	text-transform: uppercase;	/* メインメニューの英字ぜんぶ大文字 */
}
.menu_ruby {	/* メインメニューの文字ルビ */
	font-size: 1rem;
	letter-spacing: .2em;
	line-height: 1.2;
	display: block;
	font-weight: bold;
}


@media (min-width: 767px) {	/* この解像度だとメニューが改行してるので数値調整 */
	header nav {
		margin-top: -250px;
	}
}
@media (min-width: 990px) {	/* デスクトップ時のみタイトルロゴ分メニュー下げる scrolling-nav.cssとセットで調整 */
	header nav {
		margin-top: -290px;
	}
}






/* メインメニュー設定の現在のページ表示
----------------------------- */
.page_top .appendMenu li:nth-of-type(1) a,
.page_story .appendMenu li:nth-of-type(2) a,
.page_character .appendMenu li:nth-of-type(3) a,
.page_gallery .appendMenu li:nth-of-type(4) a,
.page_download .appendMenu li:nth-of-type(5) a,
.page_special .appendMenu li:nth-of-type(6) a {
  color: #111;	font-weight: bold;	background: #CC0066;
}

.page_top .appendMenu li:nth-of-type(1) a:hover,
.page_story .appendMenu li:nth-of-type(2) a:hover,
.page_character .appendMenu li:nth-of-type(3) a:hover,
.page_gallery .appendMenu li:nth-of-type(4) a:hover,
.page_download .appendMenu li:nth-of-type(5) a:hover,
.page_special .appendMenu li:nth-of-type(6) a:hover {
  color: #CC0066;
}



/* SNSボタン
----------------------------- */
.jssocials-share-link {
	font-size: 2.5rem;
	border: none;
	color: #999;
}
.share {
	text-align: center;
}


.jssocials-share-link:hover, .jssocials-share-link:focus, .jssocials-share-link:active {
	border: none;
  color: #fff;
}


/* 下に張り付くタイトルロゴ
----------------------------- */
.footer-logo-wrap {
  background: rgba(0, 0, 0, .8);
  position: fixed;
  bottom: 3vh;
  width: 100%;
}
.footer-logo {
  display: flex;
  justify-content: space-between;  /* SNSアイコン群の縦センタリング */
}

.footer-logo .jssocials-share-link {
	font-size: 2rem;
}
.footer-logo .jssocials {
  display: flex;
  align-items: center;  /* SNSアイコン群とロゴの左右寄せ */
}
.footer-logo .jssocials-share {
    margin: 0 .6em 0 0;
}

.footer-logo-title {
  width: 50vw;
  max-width: 550px;
  margin: -1.3em 0;  /* 黒帯の高さ */
}



/* footer下寄せ(footerの高さ指定必要なし)
----------------------------- */
.footer-wrap {
	-ms-flex: 1;
	    flex: 1;	/* bodyに diplay: flex; と flex-direction: column; つけてる */
}

/* 最下部ロゴとコピーライト
----------------------------- */
footer {
	text-align: center;
	background: rgba(10, 10, 10, 0.95);
	padding-top: .5em;
}
@media (min-width: 768px) {  /* デスクトップ解像度では.footer-logoに合うようにする */
  footer {
    background: rgba(0, 0, 0, 1);
  	min-height: 9em;
  }
}
small {	/* コピーライトテキスト */
	font-size: 1.5rem;
	letter-spacing: .1em;
	color: #999;
	text-shadow: 0 0 10px #FF0000;
	font-weight: bold;
}

footer .appendMenu {
	padding: 0;
	list-style: none;
	display: -ms-flexbox;
	display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
footer .appendMenu .nolink {
	color: #222;
}
footer .appendMenu li {
	width: 50%;

}









/* 汎用ボックス
----------------------------- */
.box {
	padding: 0;
  box-shadow: 0 0 30px rgba(0,0,0,0.9);
	color: #333;
	border-radius: 3px;
	background: url("../img/base/bg-box.jpg");
	background-size: cover;

	/* SVG背景 http://www.svgeneration.com/recipes/Circles-Everywhere/ */
	background-color: #9792ae;
	background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGNvdW50PScxMDAlJyBoZWlnaHQ9JzEwMCUnPgoJPGNpcmNsZSBjeD0nNTAlJyBjeT0nNTAlJyByPSc1JScgZmlsbC1vcGFjaXR5PScuMycgZmlsbD0nI2ZmZTllOScgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9JzUwJScgcj0nMTAlJyBmaWxsLW9wYWNpdHk9Jy4zJyBmaWxsPScjZmZlOWU5JyAvPgoJPGNpcmNsZSBjeD0nNTAlJyBjeT0nNTAlJyByPScxNSUnIGZpbGwtb3BhY2l0eT0nLjMnIGZpbGw9JyNmZmU5ZTknIC8+Cgk8Y2lyY2xlIGN4PSc1MCUnIGN5PSc1MCUnIHI9JzIwJScgZmlsbC1vcGFjaXR5PScuMycgZmlsbD0nI2ZmZTllOScgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9JzUwJScgcj0nMjUlJyBmaWxsLW9wYWNpdHk9Jy4zJyBmaWxsPScjZmZlOWU5JyAvPgoJPGNpcmNsZSBjeD0nNTAlJyBjeT0nNTAlJyByPSczMCUnIGZpbGwtb3BhY2l0eT0nLjMnIGZpbGw9JyNmZmU5ZTknIC8+Cgk8Y2lyY2xlIGN4PSc1MCUnIGN5PSc1MCUnIHI9JzM1JScgZmlsbC1vcGFjaXR5PScuMycgZmlsbD0nI2ZmZTllOScgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9JzUwJScgcj0nNDAlJyBmaWxsLW9wYWNpdHk9Jy4zJyBmaWxsPScjZmZlOWU5JyAvPgoJPGNpcmNsZSBjeD0nNTAlJyBjeT0nNTAlJyByPSc0NSUnIGZpbGwtb3BhY2l0eT0nLjMnIGZpbGw9JyNmZmU5ZTknIC8+Cgk8Y2lyY2xlIGN4PSc1MCUnIGN5PSc1MCUnIHI9JzUwJScgZmlsbC1vcGFjaXR5PScuMycgZmlsbD0nI2ZmZTllOScgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzIwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2VkZjFmZicgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzMwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2VkZjFmZicgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzQwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2VkZjFmZicgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzUwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2VkZjFmZicgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzYwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2VkZjFmZicgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzcwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2VkZjFmZicgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzgwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2VkZjFmZicgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzkwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2VkZjFmZicgLz4KCTxjaXJjbGUgY3g9JzUwJScgY3k9Jy0xMCUnIHI9JzEwMCUnIGZpbGwtb3BhY2l0eT0nLjInIGZpbGw9JyNlZGYxZmYnIC8+Cgk8Y2lyY2xlIGN4PScwJyBjeT0nMCcgcj0nMTAlJyBmaWxsLW9wYWNpdHk9Jy4yJyBmaWxsPScjZjJlYWZiJyAvPgoJPGNpcmNsZSBjeD0nMCcgY3k9JzAnIHI9JzIwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2YyZWFmYicgLz4KCTxjaXJjbGUgY3g9JzAnIGN5PScwJyByPSczMCUnIGZpbGwtb3BhY2l0eT0nLjInIGZpbGw9JyNmMmVhZmInIC8+Cgk8Y2lyY2xlIGN4PScwJyBjeT0nMCcgcj0nNDAlJyBmaWxsLW9wYWNpdHk9Jy4yJyBmaWxsPScjZjJlYWZiJyAvPgoJPGNpcmNsZSBjeD0nMCcgY3k9JzAnIHI9JzUwJScgZmlsbC1vcGFjaXR5PScuMicgZmlsbD0nI2YyZWFmYicgLz4KCTxjaXJjbGUgY3g9JzAnIGN5PScwJyByPSc2MCUnIGZpbGwtb3BhY2l0eT0nLjInIGZpbGw9JyNmMmVhZmInIC8+Cgk8Y2lyY2xlIGN4PScwJyBjeT0nMCcgcj0nNzAlJyBmaWxsLW9wYWNpdHk9Jy4yJyBmaWxsPScjZjJlYWZiJyAvPgoJPGNpcmNsZSBjeD0nMTAwJScgY3k9JzAnIHI9JzEwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2ViZmZlZScgLz4KCTxjaXJjbGUgY3g9JzEwMCUnIGN5PScwJyByPScyMCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyNlYmZmZWUnIC8+Cgk8Y2lyY2xlIGN4PScxMDAlJyBjeT0nMCcgcj0nMzAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjZWJmZmVlJyAvPgoJPGNpcmNsZSBjeD0nMTAwJScgY3k9JzAnIHI9JzQwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2ViZmZlZScgLz4KCTxjaXJjbGUgY3g9JzEwMCUnIGN5PScwJyByPSc1MCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyNlYmZmZWUnIC8+Cgk8Y2lyY2xlIGN4PScxMDAlJyBjeT0nMCcgcj0nNjAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjZWJmZmVlJyAvPgoJPGNpcmNsZSBjeD0nMTAwJScgY3k9JzAnIHI9JzcwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2ViZmZlZScgLz4KCTxjaXJjbGUgY3g9JzEwMCUnIGN5PScxMDAlJyByPScxMCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyNmZmZmZWYnIC8+Cgk8Y2lyY2xlIGN4PScxMDAlJyBjeT0nMTAwJScgcj0nMjAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjZmZmZmVmJyAvPgoJPGNpcmNsZSBjeD0nMTAwJScgY3k9JzEwMCUnIHI9JzMwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2ZmZmZlZicgLz4KCTxjaXJjbGUgY3g9JzEwMCUnIGN5PScxMDAlJyByPSc0MCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyNmZmZmZWYnIC8+Cgk8Y2lyY2xlIGN4PScxMDAlJyBjeT0nMTAwJScgcj0nNTAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjZmZmZmVmJyAvPgoJPGNpcmNsZSBjeD0nMTAwJScgY3k9JzEwMCUnIHI9JzYwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2ZmZmZlZicgLz4KCTxjaXJjbGUgY3g9JzEwMCUnIGN5PScxMDAlJyByPSc3MCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyNmZmZmZWYnIC8+Cgk8Y2lyY2xlIGN4PScwJScgY3k9JzEwMCUnIHI9JzEwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2ZmZjdlZCcgLz4KCTxjaXJjbGUgY3g9JzAlJyBjeT0nMTAwJScgcj0nMjAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjZmZmN2VkJyAvPgoJPGNpcmNsZSBjeD0nMCUnIGN5PScxMDAlJyByPSczMCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyNmZmY3ZWQnIC8+Cgk8Y2lyY2xlIGN4PScwJScgY3k9JzEwMCUnIHI9JzQwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2ZmZjdlZCcgLz4KCTxjaXJjbGUgY3g9JzAlJyBjeT0nMTAwJScgcj0nNTAlJyBmaWxsLW9wYWNpdHk9Jy4xJyBmaWxsPScjZmZmN2VkJyAvPgoJPGNpcmNsZSBjeD0nMCUnIGN5PScxMDAlJyByPSc2MCUnIGZpbGwtb3BhY2l0eT0nLjEnIGZpbGw9JyNmZmY3ZWQnIC8+Cgk8Y2lyY2xlIGN4PScwJScgY3k9JzEwMCUnIHI9JzcwJScgZmlsbC1vcGFjaXR5PScuMScgZmlsbD0nI2ZmZjdlZCcgLz4KPC9zdmc+);




	-webkit-font-feature-settings : "palt";
	        font-feature-settings : "palt";	/* 自動カーニング */

	text-shadow: 0 0 10px rgba(0,0,0,0.5);
	/* windows環境で無理やりテキストアンチエイリアス */
	transform: rotate(0.028deg);
	-ms-transform: rotate(0.028deg);
	-moz-transform: rotate(0.028deg);
	-webkit-transform: rotate(0.028deg);
}
@media (max-width: 767px) {
	.box {
		padding: 1em .5em;
	}
}
.box img {	/* 画像にはアンチエイリアスの回転かけない */
	transform: rotate(-0.028deg);
	-ms-transform: rotate(-0.028deg);
	-moz-transform: rotate(-0.028deg);
	-webkit-transform: rotate(-0.028deg);
}


h2 {
	text-align: center;
	margin: 0 0 1em;
	padding: .7em 2em 0em;
	color: #ccc;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;

	text-transform: uppercase;
	background: #111;

	font-size: 2.5rem;

	border-bottom: 1px solid #CC0066;
}
.h2_ruby {
	font-size: 1rem;
	vertical-align: top;
	letter-spacing: .5em;
	font-weight: bold;
}

@media (max-width: 767px) {
	h2 {
		margin: -.5em -.25em 1em;
	}
}

h2 .first-color { color: #ff2361; }
h2 .end-color { color: #2371ff; }






/* 18歳以上確認ウィンド
----------------------------- */
.check18 a:link, .check18 a:visited {	/* 年齢確認ウィンドのリンクカラー */
	color: #444;
}
.check18 {
	display: none;	/* クッキー認証通ったら消す */
}


/* トップに戻るボタン
----------------------------- */
@media (min-width: 990px) {	/* モバイル解像度では最下部に固定 */
	.return_to_top {
		position: fixed;
		bottom: 8vh;
		right: 2%;
	}
}
.return_to_top:first-letter {	/* クソデカ△君 */
	font-size: 5rem;
}
.return_to_top a {
	transition: all .2s ease-out;
	text-align: center;
	text-decoration: none;
	color: #999;
	display: block;
	padding: .5em 1em;
}
@media (max-width: 990px) {
	.return_to_top a {
		width: 95%;
		margin: auto;
		font-size: 1.3rem;
		padding: .3em 1em;
	}
	.return_to_top:first-letter {	/* クソデカ△君 */
		font-size: 3rem;
	}
}
.return_to_top a:hover {
	margin-bottom: 2%;
	text-shadow: 0 1px 10px rgba(256, 50, 220, 0.7);
}