@charset "utf-8";



/*Android対応*/
h1,h2,h3,h4,h5,h6,p,div,span,ul,li{
	max-height: 100%;
}


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

CPN用CSS

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

body{
	font-size:14px;
	line-height:1.4em;
	color:#333333;
	position: relative;
	background:url(../img/main_back.jpg) #f0e9df center top repeat;
	overflow-x: hidden;
}

a:link{text-decoration:underline;}
a:visited{text-decoration:underline;}
a:hover{text-decoration:none;}
a:active{text-decoration:underline;}

a{
	color: #8bf5ff;
}

img{
	border:0;;
}


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

コンテンツ

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

/*固定する場合*/
.fixed{
  position: fixed;
  top: -36px;
  z-index: 9999;
}

.hide-text {
    text-indent: 120%;
    white-space: nowrap;
    overflow: hidden;
}

.bold{
	font-weight: bold;
}

.red{
		color: #f52929;
}

.wrapper{
		background:url(../img/main_bg.png) center top no-repeat;
		width: 100%;
		min-width: 960px;
}

#wrap{
	width:960px;
	margin:0 auto 0;
	text-align:center;
	position: relative;
}

#keyVisual{
}

#keyVisual h1,
#keyVisual p{
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	text-align: center;
}

#keyVisual p img{
	margin-left: auto;
	margin-right: auto;
	display: block;
}

#keyVisual .itemPresent{
	margin-top: -25px;
}

#keyVisual .moreDetail{
background: url(../img/btn_moreDetail.png) no-repeat top center;
width:195px;
height: 42px;
display: block;
margin: -23px auto 16px;
z-index: 5;
position: relative;
}

#keyVisual .moreDetail:hover{
	background-position: center bottom;
}

.buyCrystaWebMonay .howto{
	position: relative;
	background: url(../img/buyCrystaWebMonay_back.png) no-repeat top center;
}

.buyCrystaWebMonay > p{
	font-size: 16px;
	line-height: 54px;
	text-align: left;
	padding-left: 10px;
}

.buyCrystaWebMonay .howto li{
	display: inline-block;
	width: 32%;
	position: relative;
	vertical-align: top;
	padding-top: 225px;
}

.buyCrystaWebMonay .howto li h3{
text-align: center;
}

.buyCrystaWebMonay .howto .one h3{
	padding-left: 0;
}

.buyCrystaWebMonay .howto .three h3{
	padding-left: 16px;
}

.buyCrystaWebMonay .howto .two{
	padding-top: 220px;
}

.buyCrystaWebMonay .howto .two h3{
	padding-bottom: 5px;
}

.buyCrystaWebMonay .howto .two h3 small.red{
	font-size: 12px;
	font-weight: bold;
}

.buyCrystaWebMonay .howto .two .buylawson,
.buyCrystaWebMonay .howto .two .buyministop{
	display: inline-block;
	position: relative;
	width: 136px;
	height: 59px;
}
.buyCrystaWebMonay .howto .two .buylawson{
	background: url(../img/btn_buylawson.png) no-repeat top center;
	padding-right: 8px;
  margin-left: -9px;
}
.buyCrystaWebMonay .howto .two .buyministop{
	background: url(../img/btn_buyministop.png) no-repeat top center;
}

.buyCrystaWebMonay .howto .two a:hover{
	background-position: bottom center;
}

.buyCrystaWebMonay .howto .three h3{
	margin-left: -20px;
}

.useItemCode{
	background: url(../img/btn_useItemCode.png) no-repeat top center;
	width: 448px;
	height: 68px;
	display: inline-block;
	position: relative;
	margin-top: 19px;
}
.useItemCode:hover{
	background-position: bottom center;
}

.howtoUseItemCode{
	display: block;
	color: #009bd5;
	line-height: 50px;
	font-size: 16px;
	width: 230px;
	margin: 0px auto;
}

.howtoUseItemCode img{
	vertical-align: middle;
	padding-right: 7px;
}

.DQX_AllInOnePackage{
	margin-top: -20px;
	padding-bottom: 23px;
	display: block;
}

.present h2{
	padding-bottom: 20px;
}

.present p {
	font-size: 18px;
	text-align: left;
	padding-left: 10px;
}

.present > p > small{
	font-size: 14px;
}

.present p span{
	padding-left: 1.9em;
}

.present .howto{
	position: relative;
	margin-bottom: 20px;
	background: url(../img/present_back.png) no-repeat top center;
	height: 104px;
	padding-top: 222px;
	margin-top: 15px;
}

.present .howto li{
	display: inline-block;
	width: 33%;
	vertical-align: top;
	font-size: 16px;
	position: relative;
	text-align: center;
}

.present .howto li .btn_wrap{
	margin-top: -22px;
}

.present .howto li h3{
	display: inline-block;
	padding-left: 10px;
	font-size: 16px;
}

.present .howto li.two h3{
	padding-left: 0;
	margin-left: -10px;
}

.present .howto li.three h3{
	padding-left: 0;
	margin-top: 3px;
	margin-left: -10px;
}

.present .howto li .btn_wrap a{
	display: block;
	margin:5px 10px 10px 10px;
}


.present .howto li .small{
	font-size: 12px;
	text-indent: 9px;
}

.present .howto .two img,
.present .howto .three img{
	display: block;
	margin: -4px auto 0;
	padding-left: 70px;
	padding-right: 70px;
}
.present .howto .three img{
	margin-top: -14px;
}

.aboutDQXWebMoneyCard{
		background: url(../img/btn_aboutDQXWebMoneyCard.png) no-repeat top center;
		display: block;
		width: 236px;
		height: 56px;
		padding-left: 34px;
}
.aboutDQXWebMoneyCard:hover{
	background-position: bottom center;
}

.present .useItemCode{
	margin-top: 33px;
}

.detail{
	margin-bottom: 73px;
	margin-top: 20px;
}

.detail h2{
	margin:0 0 20px;
}
.detail .cf{
	width: 940px;
	margin: 0 auto;
	clear: both;
}
.detail h3{
	font-size:16px;
	font-weight: bold;
	width:150px;
	height:32px;
	line-height:1em;
	color:#fff;
	float:left;
	padding: 8px 10px;
	background: url(../img/detail_item_tit.png) top left no-repeat;
	text-align: left;
}

.detail p{
	font-size: 14px;
	float:right;
	text-align:left;
	width:770px;
	margin:8px 0 20px;
}

.detail ul{
	margin-bottom: 11px;
	margin-top: 4px;
}

.detail li{
	text-align: left;
	margin-left: 170px;
	padding-bottom: 3px;
	padding-left: 1em;
	text-indent: -1em;
}

.detail li ul li{
	margin-left: 0px;
}

.detail .cf p a{
	color:#102bde;
}

.detail .marginBottomZero{
	margin-bottom: 0;
}


.purple{
	color:#993c9f;
}

.detail strong{
	color:#ff0000;
}


.yellow{
	color: #ffef00;
	font-weight: bold;
}

.blue{
	color: #102bde;
	text-decoration: underline;
}

.blueUnderline{
	color: #0000ff;
	text-decoration: underline;
}

.black{
	color: #131111;
	font-weight: bold;
}

.app_color{
	color: #be171a;
	font-weight: bold;
}

.web_color{
	color: #507ea4;
	font-weight: bold;
}

.clearBoth{
	clear: both;
}

.gotop{
	width: 900px;
	text-align: right;
	height: 40px;
	margin: 0 auto;
}

.gotop a{
	display: block;
	background-color: #0a4174;
	line-height: 40px;
	width: 120px;
	text-align: center;
	float: right;
	color: #fff;
	font-size: 12px;
	border-radius: 5px 5px 0 0;
	margin-right: 15px;
}

.btnHOME{
	padding:3% 0 0;
}

.btnHOME a{
	display:inline-block;
	margin-bottom:0.5em;
	padding:0.5em 2em;
	border-radius:3em;
	background-color:#aec0d1;
	color:#0a4174;
	text-decoration:none;
}


.foot{
	width: 100%;
	min-width: 960px;
	margin: 0 auto;
	text-align: center;
	color: #ffffff;
	background: url(../img/footer_back.png) center center #0a4174 no-repeat;
}

.foot div{
	font-size: 12px;
	padding-bottom: 24px;
}

#modal-overlay{
	z-index:10;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:120%;
	background-color:rgba(0,0,0,0.5);
}

#modal-content{
background-color: #fff;
padding:0 0 15px;
border-radius: 10px;

z-index:20;
position:fixed;
display:none;
width:740px;
text-align:center;
}

#modal-content #modal-title{
	margin-top: -100px;
	padding-left: 1px;
}

#modal-content .modal-notice{
	display: block;
	background-color: #003490;
	color:#fff;
	font-size: 18px;
	font-weight: bold;
	line-height: 35px;
	margin-left: 25px;
	margin-right: 25px;
	margin-top: 5px;
	margin-bottom: 5px;
}
#modal-content ul{
	margin: 5px 25px;
	background: url(../img/modal_back.png) top center no-repeat;
	height: 323px;
}

#modal-content ul li{
	width: 275px;
	float: left;
	text-align: left;
	padding-left: 70px;
	height: 200px;
	overflow: hidden;
}

#modal-content ul li:nth-child(1){padding-top: 19px;}
#modal-content ul li:nth-child(2){padding-top: 15px;}
#modal-content ul li:nth-child(3){padding-top: 19px;position: absolute;margin-top: 174px;}
#modal-content ul li:nth-child(4){margin-top: -49px;height: 150px;}

#modal-content #modal-close{
	background: url(../img/modal_close.png) no-repeat center top;
	display: block;
	width: 110px;
	height: 26px;
	margin: 0 auto;
	cursor: pointer;
}

#modal-content #modal-close:hover{
	background-position: center bottom;
}

.fixed{
	position: fixed!important;
	top: 0px;
}