@charset "utf-8";
/*--------------------------------------
  common
--------------------------------------*/
body{
	margin:0;
	padding:0;
	background:#520002 url(/common/images/lp/170920/bg_repeat.jpg) repeat-y center top;
}

h1,h2{
	margin:0;
}

ul,li{
	list-style-type: none;
	margin:0;
	padding:0;
}

a{
	color:#ffffff;
	text-decoration:none;
}
a:hover{
	color:#ffa500;
	text-decoration:underline;
}

img{
	border:none;
}


.imgsp{
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}

.clearfix{
	min-height: 1px;
}

#wrapper{
	position: relative;
	background:url(/common/images/lp/170920/bg.jpg) no-repeat center top;
	width:100%;
	max-width:1920px;
	min-width:960px;
	margin:0 auto;
	text-align: center;
	overflow: hidden;
}


/*--------------------------------------
  ビジュアル
--------------------------------------*/
/*通常時
#visual{
	position: relative;
	background:url(../../common/images/lp/171115/visual.jpg) no-repeat center top;
	width: 100%;
	height:846px;
}*/

/*背景ジャック時*/
#visual{
	position: relative;
	background:url(../../common/images/lp/180905/visual.jpg) no-repeat center top;
	width: 100%;
	height:846px;
}

#visual .line{
	position: absolute;
	bottom:-3px;
	background:url(../../common/images/lp/170920/visual_line.png) no-repeat center center;
	width: 100%;
	height:9px;
}

#visual .inner{
	position: relative;
	width:940px;
	height:100%;
	margin:0 auto;
}

#visual h1{
	position: absolute;
	top:230px;
	left:0;
	right: 0;
	margin:0 auto;
}

#visual .txt{
	position: absolute;
	bottom:100px;
	left:0;
	right: 0;
	margin:0 auto;
}

#visual .btn_sp{
	position: absolute;
	bottom:150px;
	right: 0;
	width: 177px;
}
#visual .btn_sp a:hover{
	opacity: 0.8;
}

/* 上部ボタン */
#btn_bg{
	background: url(../../common/images/lp/btn_bg.png) no-repeat left top;
	height:26px;
	position:absolute;
	top:0;
	right:12px;
	width: 292px;
}
#btn_bg li{
	float: left;
	font-size:12px;
	padding:5px 31px;
}

#btn_bg a.site{
	width:110px;
}

#btn_bg a.download{
	width:148px;
}

/* ボタン_メンバーページ */
#btn_member{
	position: absolute;
	top: 10px;
	right: 0;
}
#btn_member a{
	display: block;
	background-color: #dedcdc;
	width: 130px;
	padding: 5px;
	box-sizing: border-box;
	color: #908f8f;
	font-size: 12px;
	text-decoration: none;
	border-radius: 5px;
}
#btn_member a:hover{
	opacity: 0.8;
}

/* ボタン_特設サイト */
#btn_special{
	position: absolute;
	top: 50px;
	right: 0;
}
#btn_special a{
	display: block;
	background-color: #dedcdc;
	width: 130px;
	padding: 5px;
	box-sizing: border-box;
	color: #908f8f;
	font-size: 12px;
	text-decoration: none;
	border-radius: 5px;
}
#btn_special a:hover,
.bnr a:hover{
	opacity: 0.8;
}

/* 位置固定バナー */
#bnr{
	position: absolute;
	top:50px;
	right:0;
}

/* 追従バナー */
#bnr_camp{
	position: fixed;
	top: 50px;
	right: 0;
	z-index: 999;
	transition: all 0.3s;
}
#bnr_camp li{
	transition: all .5s;
}
#bnr_camp li.off:not(:hover){
	transform: translateX(280px);
}

@media (max-width: 1200px) {
	#bnr_camp li:not(:hover){
		transform: translateX(280px);
	}
}


/*--------------------------------------
  コンテンツ
--------------------------------------*/
#contents{
	position: relative;
	margin-top:-115px;
	z-index: 1;
}

/*--------------------------------------
  キャラクター
--------------------------------------*/
#chr{
	background:url(../../common/images/lp/170920/chr/bg.png) no-repeat center center;
	width: 958px;
	height:1628px;
	margin: 40px auto;
	padding: 40px 0;
	box-sizing: border-box;
}

#chr .chr_list01{
	position: relative;
	height:910px;
}
#chr .chr_list01 li:nth-child(1){
	position: absolute;
	top:0;
	left:10px;
}
#chr .chr_list01 li:nth-child(2){
	position: absolute;
	top:0;
	right:-1px;
}
#chr .chr_list01 li:nth-child(3){
	position: absolute;
	bottom:0;
	left:-27px;
}
#chr .chr_list01 li:nth-child(4){
	position: absolute;
	bottom:-4px;
	right:-64px;
}

#chr .chr_list02{
	width:758px;
	margin: 0 auto;
}
#chr .chr_list02 li{
	float: left;
	margin-right:1px;
}
#chr .chr_list02 li:nth-child(1){
	margin-right:-2px !important;
}
#chr .chr_list02 li:nth-child(2){
	margin-right:0 !important;
}

/*--------------------------------------
  内容紹介
--------------------------------------*/
#intro{
	background:url(../../common/images/lp/170920/intro/bg.png) no-repeat center center;
	width: 958px;
	height:864px;
	margin: 40px auto;
	padding: 40px 0;
	box-sizing: border-box;
}

#intro ul{
	position: relative;
	height:600px;
	margin-top:30px;
}
#intro ul li:nth-child(1){
	position: absolute;
	top:0;
	left:40px;
}
#intro ul li:nth-child(2){
	position: absolute;
	top:0;
	right:40px;
}
#intro ul li:nth-child(3){
	position: absolute;
	bottom:0;
	left:0;
	right: 0;
	margin:0 auto;
}


/*--------------------------------------
  登録フォーム
--------------------------------------*/
.formArea{
	position: relative;
	background:url(../../common/images/lp/180905/form.png) no-repeat center center;
	width: 920px;
	height:190px;
	margin:0 auto;
}
.formArea::after{
	content: url(../../common/images/lp/180905/check.png);
	position: absolute;
	top: -105px;
	right: -30px;
	pointer-events: none;
	opacity: 0;
}
.formArea.active::after{
	transition: opacity .3s;
	opacity: 1;
}

.formArea .form_input{
	position: absolute;
	top: 91px;
	left:54px;
}
.formArea .form_input input{
	width:510px;
	height:24px;
	line-height:24px;
	border:none;
	ime-mode: inactive;
	background-color:#fffeee;
	background-repeat: no-repeat;
	background-position: center center;
	color:#432519;
	font-size:20px;
	font-weight:bold;
	text-align: center;
	font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}

.formArea .form_btn{
	position: absolute;
	top: 5px;
	right:40px;
	background:url(../../common/images/lp/180905/btn_id_non.png) no-repeat center center;
	width: 264px;
	height:135px;
}
.formArea .form_btn a{
	display: none;
}
.formArea .form_btn a.enable{
	display: block;
}

/*.error_win{
	display: none;
}*/


/*--------------------------------------
  topボタン
--------------------------------------*/
#btn_top{
	position: fixed;
	bottom:30px;
	right:30px;
	z-index: 50;
	display: none;
}

/*--------------------------------------------
	モーダルウィンドウ
--------------------------------------------*/
#layer{
	display: none;
    position: fixed; 
    left: 0;
    top: 0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.7);
	z-index:100;
}

#modal{
	display: none;
    position: fixed; 
    top: calc(50% - 48px);
    left: 0;
	right:0;
    width: 660px;
	margin:0 auto;
	padding:20px;
	box-sizing: border-box;
    background-color: #e5e5e5;
    text-align: center;
	z-index:200;
}

#modal > div{
	position: relative;
	width:100%;
	height:100%;
	font-size:16px;
	color:#bc160a;
}

#modal .btn_close{
	position: absolute;
	top:-60px;
	right:-20px;
}

/*--------------------------------------
  フッター
--------------------------------------*/
#footer{
	background-color:#000;
	width:100%;
	margin-top:40px;
	padding:10px 0;
    font-size: 12px;
    line-height: 1.3;
}

#footer .inner{
	position: relative;
	width:900px;
	height:33px;
	margin:0 auto;
}

#footer ul{
	position: absolute;
}
#footer ul li{
	float: left;
	padding:10px 20px;
	border-right:1px solid #4a4a4a;
}
#footer ul li:last-child{
	border-right: none;
}

#footer .link{
	top:0;
	left:0;
}

#footer .sns{
	top:0;
	right:40px;
}
#footer .sns a:hover{
	opacity: 0.8;
}

#footer p{
    font-size: 10px;
	margin:20px 0 10px;
	color: #878787;
}