@charset "UTF-8";

/*--------------------------------------------------------------
TOP
--------------------------------------------------------------*/
#top {
	height: 556px;
}
#top .wrap {
	z-index: 10;
}

/* Information */
#info {
	position: absolute;
	top: 390px;
	left: 32px;
	width: 520px;
	height: 154px;
	background: url(https://static.yama96.jp/images/pc/info_bg.png) no-repeat;
	color: #DCDCDC;
}
#infoIn {
	position: relative;
	z-index: -1;
	margin: 39px 22px 0 20px;
	height: 93px;
	padding-right: 1px;
	overflow: hidden;
}
#infoIn iframe {
	min-height: 96px !important;
	margin-top: -2px !important;
}
#info dl {
	margin: 41px 25px 0 30px;
	width: 381px;
	height: 92px;
	overflow-y: auto;
}
#info dt, #info dd {
	margin: 0 10px 0 0;
	padding: 4px 0 0;
}
#info dt {
/*
	float: left;
	width: 3em;
	width: 7em;
*/
	color: #F5DC78;
	font-weight: bold;
}
#info dt a { color: #F5DC78; }
#info dd {
/*
	margin-left: 4em;
	margin-left: 8em;
*/
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px dotted #666;
}
#info dd img {
	display: block;
	margin: .5em auto .1em;
	max-width: 100%;
	max-height: 200px;
}

/* Movie */
#top-movie {
	position: absolute;
	top: 334px;
	right: 20px;
	width: 312px;
	height: 208px;
	background: url(https://static.yama96.jp/images/pc/top_pv_bg.png) no-repeat;
}
.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}
.mfp-ready .mfp-figure {
  opacity: 0;
}
.mfp-zoom-in.mfp-fade .mfp-figure, .mfp-zoom-in.mfp-fade .mfp-iframe-holder .mfp-iframe-scaler {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
}
.mfp-zoom-in.mfp-image-loaded .mfp-figure, .mfp-zoom-in.mfp-ready .mfp-iframe-holder .mfp-iframe-scaler {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
button.mfp-close {
	top: -44px !important;
}
.mfp-close {
	top: -4px !important;
	background: url(https://static.yama96.jp/images/pc/close.png) 99% 0 no-repeat !important;
	color: transparent !important;
}

/* Main Image */
#top #main-image img:first-child { z-index: 1; }
#top #main-image img {
	position: absolute;
	top: 0;
	left: 0;
}

/* 今すぐ無料でプレイ！ */
#access {
	width: 941px;
	margin: 8px 0 0 29px;
	padding: 42px 2px 0 13px;
	background: url(https://static.yama96.jp/images/pc/access_bg.png) center top no-repeat;
}
#access h2 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	text-align: center;
}
#access .box {
	position: relative;
	width: 345px;
	height: 102px;
	background: url(https://static.yama96.jp/images/pc/access_mail.png) no-repeat;
}
#access input, #access select {
	float: left;
	margin-top: 53px;
	font-size: 12px;
}
#access input[type="email"], #access select {
	border: 1px solid #B4B4B4;
	border-radius: 2px;
}
#i-mail {
	width: 82px;
	height: 14px;
	margin-left: 19px;
	padding: 4px;
	line-height: 16px;
}
#i-domain {
	width: 110px;
	height: 24px;
	margin-left: 24px;
	padding: 2px 2px 2px 4px;
	line-height: 18px;
}
#access input.btn {
	margin-left: 11px;
}
#access p {
	font-size: 84%;
	padding: 14px 4px 0 0;
	text-align: right;
}

/* top-bushou */
#top-bushou {
	position: relative;
	left: -100%;
	right: -100%;
	width: 100%;
	margin-top: 12px;
	padding: 0 100%;
	background: url(https://static.yama96.jp/images/pc/bg3.jpg) center top repeat-x;
}
#top-bushou div.clearfix {
	height: 322px;
}
#top-bushou h3 {
	margin: 28px 0 0;
	text-align: center;
}

/*--------------------------------------------------------------
物語
--------------------------------------------------------------*/
#storyPage { padding-bottom: 58px; }
#story.box955 {
	margin-bottom: 37px;
	background-image: url(https://static.yama96.jp/images/pc/story_bg.png);
}
#story.box955:before { background-image: url(https://static.yama96.jp/images/pc/story_h.png); }
#story.box955:after { background-image: url(https://static.yama96.jp/images/pc/story_f.png); }
#storyBox, #storyBox-bs {
	position: relative;
	width: 895px;
	height: 457px;
	overflow: hidden;
	margin: 6px auto;
	background: url(https://static.yama96.jp/images/pc/story_bg2.png) center center no-repeat;
}
#storyBox div {
	width: 915px;
	height: 100%;
	overflow: hidden;
	overflow-y: scroll;
}
#storyBox div img { position: relative; margin: 30px 0; z-index: -1; }
#storyBox:before, #storyBox:after, #storyBox-bs:before, #storyBox-bs:after {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 40px;
	z-index: 10;
}
#storyBox:before,#storyBox-bs:before {
	top: -6px;
	background: url(https://static.yama96.jp/images/pc/story_mask_h.png) center no-repeat;
}
#storyBox:after, #storyBox-bs:after {
	bottom: -6px;
	background: url(https://static.yama96.jp/images/pc/story_mask_f.png) center no-repeat;
}

#storyBox-bs .bx-wrapper .bx-prev { display: none; }
#storyBox-bs .bx-wrapper .bx-next {
	background: url(https://static.yama96.jp/images/pc/story/btn_next.png) no-repeat;
	background-position: 0 0;
	width: 50px;
	height: 50px;
	display: none;
	top: 400px;
	left: 420px;
}
#storyBox-bs .bx-wrapper .bx-next:hover { background-position: 0 -50px; }
#storyBox-bs:hover .bx-wrapper .bx-next { display: block; }

/*--------------------------------------------------------------
遊び方
--------------------------------------------------------------*/
#playPage { padding-bottom: 20px; }
#playPage #main-image {
	position: relative;
	top: 84px;
	width: 1120px;
	height: 642px;
	margin-left: -560px;
}
#playPage #main-image .text {
	position: absolute;
	top: 321px;
	left: 92px;
	height: 185px;
	overflow: auto;
	font-size: 14px;
	line-height: 1.8;
	text-align: left;
	text-shadow: 1px 1px 2px rgb(0,0,0), -1px 1px 2px rgb(0,0,0), -1px -1px 2px rgb(0,0,0), 1px -1px 2px rgb(0,0,0);
	filter: glow(color=#111111,strength=1px);
}
#playPage #main-image .text h2 {
	font-weight: normal;
}

/* 今すぐ無料でプレイ！ */
#playPage #access {
	position: relative;
	width: 971px;
	margin: -39px auto 0;
	padding: 0 0 0 1px;
	background: none;
}
#playPage #access .box {
	position: relative;
	width: 387px;
	height: 130px;
	background: url(https://static.yama96.jp/images/pc/play_access_mail.png) no-repeat;
}
#playPage #i-mail  {
	width: 118px;
	margin-left: 19px;
}
#playPage #i-domain {
	margin-left: 25px;
}
#playPage #access input.btn {
	margin-left: 13px;
}
#playPage #access .box p {
	clear: both;
	width: 30em;
	height: 30px;
	overflow: hidden;
	margin-left: 19px;
	padding-top: 9px;
	font-size: 10px;
	text-align: left;
}

/* 説明 */
#play {
	position: relative;
	left: 50%;
	width: 1020px;
	margin: 43px 0 30px -487px;
	text-align: left;
}
#play section {
	position: relative;
	float: left;
	height: 308px;
}
#play .box01, #play .box03 {
	width: 490px;
}
#play .box02, #play .box04 {
	width: 530px;
}
#play h3 { position: absolute; }
#play p {
	position: relative;
	height: 140px;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.6;
}
#play .box01 p, #play .box02 p { top: 142px; }
#play .box03 p, #play .box04 p { top: 156px; }
#play .box01 p, #play .box03 p { left: 42px; }
#play .box02 p, #play .box04 p { left: 52px; }

/*--------------------------------------------------------------
武将紹介
--------------------------------------------------------------*/
#bushouPage { padding-bottom: 20px; }
#bushouPage #main-image {
	top: 84px;
	width: 1302px;
	height: 630px;
	margin-left: -651px;
}

#bushou {
	position: relative;
	margin-top: 27px;
	padding: 0 0 0 35px;
}
#bushouPage #bushou { margin-top: 570px; }
#bushou li {
	float: left;
	width: 184px;
	height: 327px;
	margin: -80px 0 0 -23px;
	background: url(https://static.yama96.jp/images/pc/bushou_bg.png) center center no-repeat;
}
#bushou li a { outline: none; }
#bushou li img { margin: 71px 0 0 18px; }
#bushou li span {
	display: block;
	width: 156px;
	height: 42px;
	margin: 4px 0 0 14px;
	background: url(https://static.yama96.jp/images/pc/bushou_name.png) no-repeat;
	text-align: center;

	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", MS PMincho, "ＭＳ 明朝", MS Mincho, serif;
	font-size: 12px;
	font-weight: bold;
	line-height: 40px;
}
#bushou li span img { margin: 9px 0 0; }

#bushou-page.mfp-zoom-out-cur, #bushou-page.mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: pointer !important; }
#bushou-page .mfp-figure figure {
	cursor: default;
}
#bushou-page .mfp-figure figure:after {
	content: "";
	position: absolute;
	top: 40px;
	bottom: 40px;
	left: 0;
	right: 0;
	border: 10px solid #FFF;
}
#bushou-page .mfp-bottom-bar {
	text-align: center;
}
#bushou-page .mfp-title {
	display: inline-block;
	margin-top: 5px;
	padding: 8px 20px;
	background-color: rgba(0,0,0,.8);
	border-radius: 20px;
	font-size: 110%;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", MS PMincho, "ＭＳ 明朝", MS Mincho, serif;
	font-feature-settings: "palt";
	font-weight: bold;
	letter-spacing: 5px;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
}
#bushou-page .mfp-arrow-left {
	left: 50%;
	margin-left: -280px;
}
#bushou-page .mfp-arrow-right {
	right: 50%;
	margin-right: -280px;
}
#bushou-page .mfp-arrow-left:before {
	border-right-color: #999;
}
#bushou-page .mfp-arrow-left:after {
	border-right-color: #000;
}
#bushou-page .mfp-arrow-right:before {
	border-left-color: #999;
}
#bushou-page .mfp-arrow-right:after {
	border-left-color: #000;
}

/*--------------------------------------------------------------
動画集
--------------------------------------------------------------*/
#movie {
	width: 994px;
	margin: 0 auto;
	padding-bottom: 6px;
}
#movie .box {
	position: relative;
	float: left;
	width: 319px;
	margin: 8px 0 47px 9px;
	background: url(https://static.yama96.jp/images/pc/movie_bg.png) center top repeat-y;
	text-align: center;
}
#movie .box:before, #movie .box:after {
	content: "";
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: 72px;
}
#movie .box:before {
	top: -24px;
	background: url(https://static.yama96.jp/images/pc/movie_h.png) center top no-repeat;
}
#movie .box:after {
	bottom: -23px;
	background: url(https://static.yama96.jp/images/pc/movie_f.png) center bottom no-repeat;
}
#movie .box img, #movie .box h2 {
	position: relative;
	z-index: 10;
}
#movie .box h2 {
	width: 258px;
	margin: 10px auto 0;
	padding: 8px;
	background-color: #050505;
	color: #DCDCDC;
	font-weight: normal;
}


/*--------------------------------------------------------------
動画集
--------------------------------------------------------------*/
#qa {
	font-size: 116%;
	line-height: 1.6;
}
#qa .box955 { padding-bottom: 29px; }
#qa h2 {
	position: relative;
	z-index: 10;
}
#qa .box {
	margin: 12px 66px 0 76px;
	padding: 0 10px 5px 0;
	color: #FFF;
	text-align: left;
}
#qa h3 {
	width: 805px;
	height: 36px;
	overflow: hidden;
	padding-left: 15px;
	background: url(https://static.yama96.jp/images/pc/ttl_sub.png) no-repeat;
	line-height: 36px;
}
#qa ul {
	margin: 16px 0 20px;
	padding-left: 15px;
}
#qa li {
	padding-left: 1em;
	text-indent: -1em;
	padding-bottom: 6px;
}
#qa li:before { content: "・"; }
#qa a { color: #F5DC78; }

#qa section {
	position: relative;
	margin: 0 auto;
	padding: 62px 56px 20px 60px;
	background: url(https://static.yama96.jp/images/pc/box955_bg2.png) center top no-repeat;
	text-align: left;
}
#qa section h4 {
	margin-bottom: 10px;
	padding: 0 0 22px 8px;
	background: url(https://static.yama96.jp/images/pc/bar.png) left bottom no-repeat;
	color: #F5DC78;
	font-size: 110%;
}
#qa section p { padding: 0 16px 0 23px; }
#qa section .mt1em { padding-top: 3px; }
#qa section .textR { padding: 22px 6px 0 0; }

/*--------------------------------------------------------------
利用規約 / プライバシーポリシー / 特定商取引に関する法律
--------------------------------------------------------------*/
#page .box955 h2 {
	position: relative;
	z-index: 10;
}
#page .box955 .box {
	height: 272px;
	overflow-y: auto;
	margin: 12px 66px 0 76px;
	padding-right: 10px;
	color: #FFF;
	line-height: 1.6;
	text-align: left;
}
#page .box h3 {
	margin-top: 1.5em;
}
#page .box p {
	margin-left: 1em;
}
#page .box ul, #page .box ol {
	margin-left: 1em;
	padding-left: 20px;
}
#page .box ul { list-style: disc outside; }
#page .box ol { list-style: decimal outside; }
#page .box ol ul { margin-left: 0; list-style: lower-alpha outside; }
#page .box table {
	width: 99%;
	margin: 1em 0;
}
#page .box th, #page .box td {
	padding: 5px 10px;
	border: 1px solid #444;
	font-weight: normal;
	text-align: left;
	vertical-align: top;
}

.qr-code-box {
	position: relative;
}
.qr-code-box .qr-code {
	position: absolute;
	top: 15px;
	right: 16px;
}
.qr-code-box .play-qr-code {
	position: absolute;
	top: 23px;
	right: 10px;
}