@charset "utf-8";
/*
1.common
2.#contents
3..mainVisual
4.#header
5.#footer
*/
/*--------------------------------------------------
1.common
--------------------------------------------------*/
html {font-size:62.5%;/*10px*/}
body {background:#fffef0 url(../img/bg.webp) center repeat; color:#111111; font-size:14px; font-size:1.4em; line-height:1.5; font-family:"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; letter-spacing:0.02em;}
html,body {height:100%;}

img {max-width:100%; height:auto; image-rendering:-webkit-optimize-contrast;}
#wrapper {position:relative; width:100%; min-height:100%; margin:0 auto; overflow:hidden;}

/* font-sizeの指定はfont-size:14px; font-size:1.4rem;のように両方書く */
/* link */
a {text-decoration:none; -webkit-transition:color .2s; transition:color .2s;}
a:link {color:#990000;}
a:visited {color:#990000;}
a:hover {color:#ee3131; text-decoration:none;}
a:focus {color:#ee3131; text-decoration:none;}
a:active {color:#ee3131;}

/* .btn */
.btn {overflow:hidden;}
.btn a {display:inline-block; width:100%; height:100%; overflow:hidden; background-position:left bottom; background-repeat:no-repeat;}
.btn a img {-webkit-transition:all .3s;transition:all .3s;}
.btn a:hover img, .btn a:focus img {opacity:0; -ms-filter:"alpha(opacity=0)";}
/* .btn_form */
.btn_form {margin:0 auto 40px;}
.btn_form.btn a:hover img, .btn_form.btn a:focus img {opacity:1;}
/* .btn_shop_search */
.btn_shop_search {margin:0 auto 24px;}
.btn_shop_search.btn a:hover img, .btn_shop_search.btn a:focus img {opacity:1;}
/* #pageTop */
#pageTop {position:fixed; bottom:10px; right:10px; z-index:20; width:170px; height:56px;}
#pageTop a {width:170px; height:56px; background-image:url(../img/btn_pagetop.webp); background-size:170px 112px;}
/*--------------------------------------------------
2.#contents
--------------------------------------------------*/
#contents {position:relative; z-index:2; width:92%; max-width:1000px; margin:-24px auto 0;}

.privilege {margin-left:-3px; margin-right:-3px;}
.privilege_box {margin-bottom:20px; font-size:0; text-align:center; line-height:0;}
.privilege_box img {max-width:498px; width:100%;}

.notice_top, .notice_center {margin-bottom:32px; padding:16px 16px 13px; border-radius:8px; background-color:#f2efd2; color:#3a2500; font-size:15px; font-size:1.5rem; word-break:break-all;}
.notice_top h2 {margin-bottom:6px; padding-bottom:3px; color:#cc0000; font-size:16px; font-size:1.6rem; font-weight:bold;}
.notice_top p {font-size:14px; font-size:1.4rem;}
.notice_top p a {display:inline-block; position:relative; margin-top:4px; padding-left:11px;}
.notice_top p a::before {position:absolute; left:0; top:5px; border-width:5px 0 5px 5px; border-color:transparent; border-left-color:#990000; border-style:solid; content:'';}

.notice_center h2 {margin-bottom:12px; padding-bottom:3px; border-bottom:2px solid #3a2500; color:#3a2500; font-size:15px; font-size:1.5rem; font-weight:bold;}
.notice_center p {font-size:14px; font-size:1.4rem;}
.notice_center h2.notice_center_title_end {margin-top:21px; border-bottom:2px solid #a01400; color:#a01400;}
.notice_center p.notice_center_text_end {display:inline-block; color:#a01400;}

.step h2 {margin:0 auto 16px; text-align:center;}
.step p {line-height:0;}

.deta_box {position:relative; margin:40px auto; padding:14px 14px 13px; background:#3e474a; border:4px solid #ffffff; border-radius:10px; -webkit-box-sizing:border-box; box-sizing:border-box; color:#ffffff;}
.deta_box::before {position:absolute; top:-5px; left:-5px; width:100%; min-height:100%; padding:0 8px 8px 0; border:1px solid #3e474a; border-radius:10px; content:"";}
.deta_box::after {position:absolute; top:72%; right:-8px; width:74px; height:70px; background-image:url(../img/slime.webp); background-size:74px 70px; content:'';}
.deta_box h2 {padding-bottom:8px; font-weight:bold; font-size:16px; font-size:1.6rem;}
.deta_box p {font-size:15px; font-size:1.5rem; line-height:1.6;}
.deta_box span {display:block; margin-top:8px;}

.howto {position:relative; overflow:hidden; margin:40px auto 38px; color:#2a0b00;}
.howto dt {display:block; margin-bottom:10px; padding:13px 0; background-color:#76a227; color:#ffffff; font-size:15px; font-size:1.5rem; font-weight:bold; text-align:center;}
.howto a {color:#2a0b00; text-decoration:underline;}
.howto a:hover, .howto a:focus {color:#2c91c9;}
.howto .code {position:relative; display:block; margin-bottom:10px; padding:10px; border-radius:8px; text-align:center; background-color:#2c91c9; font-weight:bold; color:#ffffff; letter-spacing:0.05em;}
.howto .waku {position:relative; display:block; margin-bottom:26px; padding:10px 15px; border:2px solid #2c91c9; border-radius:8px; background-color:#f8fcff; line-height:1.6;}
.howto .waku:not(dd:last-child):before {position:absolute; left:50%; bottom:-23px; margin-left:-26px; line-height:0; width:52px; height:14px; background-image:url(../img/arrow1.webp); background-size:52px 14px; content:'';}
.howto .game_code {position:relative; float:left; width:72%;}
.howto .code2 {position:relative; display:block; float:right; width:20%; height:162px; margin-top:8%; padding:70px 15px; background-color:#76a227; font-weight:bold; color:#ffffff; font-size:16px; font-size:1.6rem; text-align:center;}
.howto .code2::before {position:absolute; left:-20px; top:55px; width:14px; height:52px; background-image:url(../img/arrow2.webp); background-size:14px 52px; content:'';}
.howto .code2::after {position:absolute; right:calc(50% - 26px); top:-26px; width:52px; height:14px; background-image:url(../img/arrow1.webp); background-size:52px 14px; content:'';}
.howto .receive {clear:both;}

.attention ul {margin:24px auto 0; font-size:14px; font-size:1.4rem;}
.attention ul li {position:relative; padding-left:15px;}
.attention ul li:not(:last-child) {padding-bottom:12px;}
.attention ul li:before {position:absolute; left:0; top:0; content:"・";}
.attention ul li span {font-weight:bold;}
.attention ul li a {text-decoration:underline;}

ul.caution {font-size:14px; font-size:1.4rem;}
ul.caution li {position:relative; padding-left:18px;}
ul.caution li:not(:last-child) {padding-bottom:6px;}
ul.caution li:before {position:absolute; left:0; top:0; content:"※";}

/*--------------------------------------------------
3..mainVisual
--------------------------------------------------*/
.main-visual {position:relative; width:100%; background:url(../img/mainVisual_sp.webp) center top / contain no-repeat;}
.main-visual::before {display:block; padding-top:calc(1000 / 800 * 100%); content:'';}
.main-visual_inner {position:absolute; top:16px; left:50%; max-width:1200px; width:85%; margin:0 auto; -webkit-transform:translateX(-50%); transform:translateX(-50%);}
.main-visual_inner * {margin:0 auto; text-align:center; line-height:0;}
.logo-dqx img {max-width:527px; width:60%;}
.site-logo img {max-width:826px; width:88%; margin-bottom:10px;}
.lede img {max-width:834px; width:100%;}
/*--------------------------------------------------
4.header
--------------------------------------------------*/
header {display:none;}
/*--------------------------------------------------
5.footer
--------------------------------------------------*/
footer {width:100%; margin-top:32px; padding:17px 0; border-top:1px solid #000000; -webkit-box-shadow:0 1px 0 #333333 inset; box-shadow:0 1px 0 #333333 inset; background-color:#000000; color:#ffffff;}
.footerIn {width:94%; max-width:1000px; margin:0 auto;}
.foot_logo {margin-bottom:5px;}
.copyright {font-size:12px; font-size:1.2rem; vertical-align:top;}
/* ---------------------------------------------------------
99.media queries
---------------------------------------------------------*/
/* 340px以上
----------------------------------------------------------*/
@media screen and (min-width: 340px) {
	.deta_box::after {top:50%; width:84px; height:80px; background-size:84px 80px;}
}

/* 630px以上
----------------------------------------------------------*/
@media screen and (min-width: 630px) {
	.howto .code2 {margin-top:4%;}
}

/* 768px以上
----------------------------------------------------------*/
@media screen and (min-width: 768px) {
	.btn_form {width:658px; height:73px; margin-bottom:43px;}
	.btn_form a {background-image:url(../img/btn_form_pc.webp); background-size:658px 146px;}
	.btn_form.btn a:hover img, .btn_form.btn a:focus img {opacity:0; -ms-filter:"alpha(opacity=0)";}

	.btn_shop_search {width:658px; height:73px; margin-bottom:35px;}
	.btn_shop_search a {background-image:url(../img/btn_shop_search_pc.webp); background-size:658px 146px;}
	.btn_shop_search.btn a:hover img, .btn_shop_search.btn a:focus img {opacity:0; -ms-filter:"alpha(opacity=0)";}

	#pageTop {bottom:67px;}

	.privilege {display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
	.privilege_box {display:inline-block; width:calc( 100% - 18px ); margin-bottom:22px;}

	.notice_top, .notice_center {margin-bottom:40px; padding:24px 24px 21px;}
	.notice_top + .notice_top {margin-top:-13px;}
	.notice_top h2 {margin-bottom:6px; padding-bottom:3px; color:#cc0000; font-size:17px; font-size:1.7rem; font-weight:bold;}
	.notice_top p {font-size:16px; font-size:1.6rem;}
	.notice_top p a {display:inline-block; position:relative; margin:0 0 0 8px; padding-left:11px;}
	.notice_top p a::before {position:absolute; left:0; top:5px; border-width:5px 0 5px 5px; border-color:transparent; border-left-color:#990000; border-style:solid; content:'';}

	.notice_center h2 {font-size:16px; font-size:1.6rem;}
	.notice_center p {font-size:15px; font-size:1.5rem;}
	.notice_center h2.notice_center_title_end {margin-top:21px; border-bottom:2px solid #a01400; color:#a01400;}
	.notice_center p.notice_center_text_end {display:inline-block; color:#a01400;}

	.step h2 {width:89.8%; margin-bottom:22px;}

	.deta_box {margin:40px auto; padding:18px;}
	.deta_box::after {top:50%; right:-8px; margin-top:-55px; width:116px; height:110px; background-image:url(../img/slime.webp); background-size:116px 110px; content:'';}
	.deta_box h2 {padding-bottom:4px;}
	.deta_box p {font-size:16px; font-size:1.6rem; line-height:1;}
	.deta_box span {display:inline-block; margin-left:8px;}
	.deta_box br {display:none;}

	.howto {margin:40px auto 38px; color:#2a0b00;}
	.howto .input{float:left; width:48%; max-width:480px;}
	.howto .receive{clear:none; float:right; width:48%; max-width:480px;}
	.howto .code2 {margin-top:43px;}
	.howto .receive:before {position:absolute; right:calc(25% - 166px); bottom:24%; width:330px; height:184px; background-image:url(../img/mon.webp); background-size:330px 184px; content:'';}

	.attention ul {font-size:15px; font-size:1.5rem;}
	.attention ul li {padding:0 0 9px 16px;}

	ul.caution {font-size:15px; font-size:1.5rem;}

	.main-visual {background:url(../img/mainVisual_pc.webp) center bottom / cover no-repeat;}
	.main-visual::before {padding-top:62.33%;}
	.main-visual_inner {top:8px; width:80%;}
	.logo-dqx img {margin-bottom:5px;}
	.site-logo img {margin-bottom:11px;}

	header {display:block; position:absolute; right:0; top:10px; z-index:5;}
	.sns li {float:left; margin-right:10px;}

	footer {margin-top:48px;}
	.foot_logo {display:inline-block; width:172px; margin:0 30px 0 0;}
	.copyright {display:inline-block; width:calc( 94% - 196px );}
}

/* 1200x以上
----------------------------------------------------------*/
@media screen and (min-width: 1200px) {
	#pageTop {bottom:10px;}

	#contents {margin-top:-65px;}

	.howto .code2 {width:22%;}
	.howto .receive::before {right:calc(25% - 190px); bottom:16%; width:380px; height:212px; background-size:380px 212px;}

	.main-visual::before {padding-top:748px;}

	.copyright {display:inline-block; width:auto;}
}