@charset "UTF-8";

html {
	height: 100%;
}

body {
	background:#770308 url(../contents/images/bg01.jpg) center top repeat-y;
	height: 100%;
}
@media screen and (min-width: 1367px) {
	body {
		background-size:100% auto;
	}
}

/*#contents {
	height: 100%;
}*/


/* ========================================
	contents
======================================== */
.h1-title {
	padding-top: 58px;
	margin-bottom: 29px;
	text-align: center;
}
.lead {
	margin-bottom: 31px;
	text-align: center;
}

.tab {
	position: relative;
	width: 960px;
	margin: 0 auto;
	font-size: 0;
	z-index: 1;
}
.tab li {
	display: inline-block;
}
.tab li:first-child {
	margin-right: 10px;
}
.tab li img {
	vertical-align: top;
}

#pay-contents, #free-contents {
	position: relative;
	margin-top: -7px;
	padding-top: 47px;
	padding-bottom: 95px;
	/*padding-bottom: 205px;*/
	text-align: center;
	background: #f3eeed url(../contents/images/contents_bg.png) center top repeat-y;
}
/*#free-contents {
	height: 100%;
}*/

@media screen and (min-width: 1367px) {
	#pay-contents, #free-contents {
		background-size:100% auto;
	}
}

/*-----------------------------
	index.html
-----------------------------*/
.pay-contents-line {
	width: 100%;
	height: 2px;
	position: absolute;
	top: 5px;
	left: 0;
	background-color: #afa564;
}

.pay-info {
	width: 866px;
	height: 283px;
	margin: 0 auto;
	margin-bottom: 56px;
	padding-top: 38px;
	background: url(../contents/images/pay_info_bg.png) center top no-repeat;
}
.info-btn {
	margin-top: -12px;
}

#pay-contents #set-contents {
	width: 860px;
	margin: 0 auto 0 auto;
	padding-top: 32px;
	text-align: left;
	background: url(../contents/images/pay_set_line.png) center top no-repeat;
}

#pay-contents .set-title-area {
	position: relative;
	height: 128px;
}
#pay-contents .set-title-area .sub{
    margin-left: 195px
}

#set3-2:before{
    content: "";
    background: url(../contents/images/dottedline.gif) repeat-x;
    display: block;
    width: 688px;
    height: 2px;
    margin-left: 172px;
    padding-top: 30px;
}

#pay-contents .set-text {
	position: absolute;
	top: 67px;
	left: 201px;
}
#pay-contents .set-date {
	position: absolute;
	top: 62px;
	left: 0;
}
#pay-contents .set-price {
	position: absolute;
	top: 22px;
	left: 641px;
}
#pay-contents .set-icon {
	position: absolute;
	top: 28px;
	right: 0;
	width: 40px;
	height: 40px;
	background: url(../contents/images/pay_icon_close.png);
	cursor: pointer;
}
#pay-contents .set-icon:hover {
	background: url(../contents/images/pay_icon_open.png);
}
#pay-contents .is-hide .set-icon:hover {
	background: url(../contents/images/pay_icon_close.png);
}
#pay-contents .is-hide .set-icon {
	background: url(../contents/images/pay_icon_open.png) !important;
}

#pay-contents .set-box {
	position: relative;
	width: 690px;
	height: 274px;
	margin: 0 0 20px 170px;
	background: url(../contents/images/pay_set_bg.png) center top no-repeat;
}
#pay-contents .box-name {
	position: absolute;
	top: 21px;
	left: 29px;
}
#pay-contents .box-difficulty {
	position: absolute;
	top: 26px;
	left: 377px;
}
#pay-contents .box-price {
	position: absolute;
	top: 26px;
	right: 29px;
}
#pay-contents .box-text {
	position: absolute;
	top: 86px;
	left: 29px;
}
#pay-contents .box-text p {
	margin-bottom: 30px;
}
#pay-contents .box-img {
	position: absolute;
	top: 79px;
	right: 30px;
	width: 260px;
}

.set-schedule {
	margin-bottom: 70px;
}

.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
	bottom: -20px;
}
.bx-wrapper .bx-pager.bx-default-pager a{
  background: none;
	border: #FFF 2px solid;
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #FFF;
}



/*-----------------------------
第2弾・第3弾 BG
-----------------------------*/
#pay-contents .tp1 {
	position: relative;
	width: 690px;
	height: 325px;
	margin: 0 0 20px 170px;
	background: url(../contents/images/bg2-1.png) center top no-repeat;
}

#pay-contents .tp2 {
	position: relative;
	width: 690px;
	height: 378px;
	margin: 0 0 20px 170px;
	background: url(../contents/images/bg3-14.png) center top no-repeat;
}
#pay-contents .tp3 {
	position: relative;
	width: 690px;
	height: 410px;
	margin: 0 0 20px 170px;
	background: url(../contents/images/bg3.png) center top no-repeat;
}
#pay-contents .tp4 {
	position: relative;
	width: 690px;
	height: 306px;
	margin: 0 0 20px 170px;
	background: url(../contents/images/bg4.png) center top no-repeat;
}



/*-----------------------------
第4弾
-----------------------------*/
#pay-contents #set4 .box-text p {
	margin-bottom: 0;
}
#set4 .set-box {
	position: relative;
	width: 690px;
	margin: 0 0 20px 170px;
	background: center top no-repeat;
}
#set4 .set-box.set-box1 {
	height: 1109px;
	background-image: url(../contents/images/bg5-1.png);
}
#set4 .set-box.set-box2 {
	height: 1117px;
	background-image: url(../contents/images/bg5-2.png);
}
#set4 .box-text {
	width: 630px;
}
#set4 .box-subhead {
	text-align: center;
}

/* chara */
#set4 .chara-list {
	margin-top: 20px;
}
#set4 .chara-item {
	float: left;
	width: 300px;
	margin-left: 30px;
}
#set4 .chara-item:first-child {
	margin-left: 0;
}
#set4 .chara-img {
	position: relative;
}
#set4 .set-box1 .chara-img {
	height: 350px;
}
#set4 .set-box2 .chara-img {
	height: 360px;
}
#set4 .chara-img img {
	position: absolute;
}
#set4 .set-box1 .chara-item1 .chara-img img {
	top: 10px;
	left: 40px;
}
#set4 .set-box1 .chara-item2 .chara-img img {
	top: 1px;
	left: 50px;
}
#set4 .set-box2 .chara-item1 .chara-img img {
	top: -30px;
	left: 40px;
}
#set4 .set-box2 .chara-item2 .chara-img img {
	top: 5px;
	left: 40px;
}
#set4 .chara-name-box {
	padding-bottom: 18px;
	margin-bottom: 15px;
	background: url(../contents/images/chara_border.png) center bottom no-repeat;
	background-size: 290px 2px;
	position: relative;
}
#set4 .chara-name {
	text-align: center;
}
#set4 .set-box1 .chara-item2 .chara-name {
	margin-right: 20px;
}
#set4 .set-box2 .chara-item2 .chara-name {
	margin-right: 20px;
}
#set4 .chara-btn {
	position: absolute;
	top: 0;
	right: 50px;
	transition: all 500ms ease;
}
#set4 .set-box1 .chara-item2 .chara-btn{
	right: 60px;
}
#set4 .set-box2 .chara-item2 .chara-btn{
	right: 60px;
}
#set4 .chara-btn:hover {
	opacity: 0.8;
}

/* screen shot */
#set4 .img-box {
	margin-top: 34px;
}
#set4 .main-img {
	float: left;
	width: 314px;
	height: 188px;
	position: relative;
}
#set4 .main-img ul {
}
#set4 .main-img ul li {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	transition: all 500ms ease;
	opacity: 0;
}
#set4 .main-img .img1 .main-img-1 {
	opacity: 1;
}
#set4 .main-img .img2 .main-img-2 {
	opacity: 1;
}
#set4 .main-img .img3 .main-img-3 {
	opacity: 1;
}
#set4 .main-img .img4 .main-img-4 {
	opacity: 1;
}
#set4 .sub-img-list {
	float: left;
	width: 316px;
}
#set4 .sub-img-list li {
	float: left;
	width: 150px;
	height: 90px;
	margin-left: 8px;
	margin-bottom: 8px;
	box-sizing: border-box;
}
#set4 .sub-img-list li a {
	display: block;
	position: relative;
	transition: all 300ms ease;
}
#set4 .sub-img-list li a:hover {
	opacity: 0.8;
}
#set4 .sub-img-list li a:after {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	box-sizing: border-box;
	border: 3px solid transparent;
	transition: all 500ms ease;
}
#set4 .sub-img-list li.is-current a:after {
	border-color: #81191c;
}

/* fee */
#set4 .box-fee {
	margin-top: 27px;
}


/*-----------------------------
	modal
-----------------------------*/
.is-dlc-modal {
	width: 100%;
	height: 100%;
}
.is-dlc-modal .dlc-modal-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 30;
	opacity: 0;
	display: none;
  overflow: scroll;
}
.is-dlc-modal .dlc-modal-inner {
	width: 700px;
	height: 1000px;
  margin: 50px auto;
  /*
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
  */
}
.is-dlc-modal .dlc-modal-close {
	position: absolute;
	display: block;
	width: 50px;
	height: 50px;
	top: 50px;
	right: 50px;
	background: url(../common/modal_close_btn.png);
	transition: all 500ms ease;
}
.is-dlc-modal .dlc-modal-close:hover {
	opacity: 0.8;
}



/*-----------------------------
	free.html
-----------------------------*/
#free-contents #set-contents {
	width: 860px;
	margin: 0 auto;
	padding: 32px 0 12px 0;
	text-align: left;
	background-image: url(../contents/images/free_set_line.png), url(../contents/images/free_set_line.png);
	background-repeat: no-repeat, no-repeat;
	background-position: center top, center bottom;
}

.free-contents-line {
	width: 100%;
	height: 2px;
	position: absolute;
	top: 5px;
	left: 0;
	background-color: #821e1e;
}

.free-contents-text {
	margin-bottom: 40px;
}

#free-contents li {
	position: relative;
	height: 187px;
	margin-bottom: 20px;
}
#free-contents .set-date {
	position: absolute;
	top: 17px;
	left: 0;
}
#free-contents .set-box {
	position: absolute;
	top: 0;
	right: 0;
	width: 690px;
	height: 187px;
	background: url(../contents/images/free_set_bg.png) center top no-repeat;
}
#free-contents .box-name {
	position: absolute;
	top: 21px;
	left: 29px;
}
#free-contents .box-text {
	position: absolute;
	top: 86px;
	left: 29px;
}
#free-contents .box-text p {
	margin-bottom: 30px;
}

#free-contents li:nth-child(2) {
	height: 302px;
}
#free-contents li:nth-child(2) .set-box {
	height: 302px;
	background: url(../contents/images/free_set_bg_l.png) center top no-repeat;
}
#free-contents .box-text p.note-text {
	padding: 9px 0 0 20px;
}