@charset "utf-8";

html.pc body.sp { min-width: 600px; overflow: auto; }
body.sp article[role=main],
body.sp article[role=main] #cmn_stackbox { width: 100%; margin: 0 auto; padding: 0; }

html.nonav { background-color: #fff; }
body.nonav { width: 100% !important; height: 100% !important; background-color: transparent; }
body.nonav header[role="banner"],
body.nonav header[role="banner"] * { height: auto; background-color: transparent !important; }
body.nonav header[role="banner"] { margin: 0 auto -0.5em; padding-top: 1em; border-top: none; }
body.nonav header[role="banner"]:before { border: none; }
body.nonav header[role="banner"] > div { height: auto; }
body.nonav header[role="banner"] > div > h1 { width: 100%; height: 2em; margin: 0; padding: 0.25em 0 0; border: none; box-shadow: none; text-align: left; }
body.nonav header[role="banner"] > div.social_box { z-index: 1010 !important; }

/* SP fix start */
body.true_padding #cmn_stackbox { padding: 1em !important; }

body.no_title article[role="main"] #cmn_stackbox > h2 { color: inherit; background-color: transparent; }
body.no_title article[role="main"] #cmn_stackbox > h2 { padding: 0 !important; background: none; }
body.no_title article[role="main"] #cmn_stackbox h3 { color: inherit; }
body.no_title article[role="main"] #cmn_stackbox h3::before { content: ''; display: none; }

/* SP fix end */

body#online .tourokutext > div { display: block; float: left; width:50%; text-align: center; }
body#online .tourokutext > div .captiotxt { margin-bottom: 0.5em; color: #000000; }
body#online .tourokutext > div > a { display: block; margin-bottom: 10px; height: 50px; }
body#online .tourokutext .nav a { padding-right: 0.5em; }
body#online .tourokutext .nav a:before { content: '\00e4a2'; padding-right: 0.5em; font-family: 'fontello'; }
body#online .tourokutext #cittaonlinemember { float: right; width:50%; }
body#online .titlebox { display: block; margin-bottom: 1em; padding-top: 1em; 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,246,247,1)), color-stop(1%,rgba(246,246,247,0.99)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top,  rgba(246,246,247,1) 0%,rgba(246,246,247,0.99) 1%,rgba(255,255,255,0) 100%);
background: -moz-linear-gradient(top,  rgba(246,246,247,1) 0%, rgba(246,246,247,0.99) 1%, rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top,  rgba(246,246,247,1) 0%,rgba(246,246,247,0.99) 1%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top,  rgba(246,246,247,1) 0%,rgba(246,246,247,0.99) 1%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom,  rgba(246,246,247,1) 0%,rgba(246,246,247,0.99) 1%,rgba(255,255,255,0) 100%);
}
body#online .titlebox h1 { color: #014A36; font-size: 1.4em; line-height: 1; padding-left: 0.9em;
background: transparent url(/common/images/title_bg.png) no-repeat 0 20%; }

body#online .couponitem,
body#online .presentbox {  border-top: 1px dotted #ddd; border-bottom: 1px dotted #ddd; background-color: #fffbef;}
body#online .presentbox{ padding: 10px; }
body#online .couponitem { padding: 10px; }
body#online .presentbox.second,
body#online .couponitem.second { background-color: #f9fcf6; }

body#online .presentbox >div,
body#online .presentbox >img { float: left; width: 45%; }
body#online .presentbox >img  { padding-right: 2%; }
body#online .presentbox >div h4 { margin-bottom: 1em; color: #d89c7d; font-size: 1.6em; }
body#online .presentbox >div h5 { margin-bottom: 0.5em;  color: #3b94cc; font-size: 1.2em; }
body#online .presentbox >div p { margin-bottom: 1em; line-height: 1.6; }
body#online .mailmagaitem h4 img{ width: 62%; }
body#online .mailmagaitem p { margin-bottom: 1em; }
body#online .mailmagaitem figure,
body#online .couponitem figure { float: left; margin-right: 0.5em; }
body#online .couponitem h4 { margin-bottom: 1em; font-size: 1.2em; color: #3b94cc; }
body#online .mailmagaite { width: 200px; }
body#online #spp2_bg { position: relative;  background: transparent url(/online/images/10th_party_s.png) repeat 0 0; }
body#online #spp2_bg h4 { color: #ffffff; font-size: 2em; padding: 18px 0 0 126px;}
body#online #spp2_bgtitle { position: absolute; top: 18px; left: 18px; }
body#online #spp2_bg p { float: left; width: 48%;margin:40px 10px 20px 18px;color: #ffffff; line-height: 1.4; }
body#online #spp2_bg .photo { float: left; margin-top: 30px; }
body#online .tokuten { margin-bottom: 5px; padding: 5px 0; border: 1px solid #b6b6b6; background-color: #ffe28c;color: #000; text-align: center; }

body#online .tokuten em { background-color: #fff; margin-right: 10px;padding: 2px 10px; font-style: normal; }
body#online .tokuten.green { background-color: #dbebcc; }
body#online #spp2_bg:after,
body#online .mailmagaitem:after,
body#online .couponitem:after,
body#online .presentbox:after { content: ""; clear: both; display: block; height: 0; }

/* SP LOVER */

body#sp_lover article[role="main"] div { line-height: 1.6; }
body#sp_lover article[role="main"] div a { color: #000;}
body#sp_lover article[role="main"] div a:before { content: '\00e4a2'; padding-right: 0.5em; font-family: 'fontello'; font-size: 1.3em; color: #ec79a0; }

/* END */

/* CSS3 Media Query */
@media screen and ( max-width: 767px ){
	html:not(.pc) body.nonav header[role="banner"] { margin-bottom: 0; }
	html:not(.pc) body.nonav header[role="banner"] > div { width: 97%; padding: 0; }
	html:not(.pc) body.nonav header[role="banner"] > div.social_box { position: relative; margin-bottom: 0; padding-top: 1.5em; }
	html:not(.pc) body.nonav [role="main"] p.spgosite { position: absolute; top: -4.5em; width: 97%; padding: 0; }
}

@media only screen and ( max-width: 599px ) {
	html:not(.pc) body.nonav header[role="banner"] > div > h1 { position: relative; max-width: 60%; margin: -0.5em 0 -1.5em 2%; }
	html:not(.pc) body.nonav header[role="banner"] > div.social_box { margin-top: 0; padding-top: 2em; }
	html:not(.pc) body#online .mailmagaitem h4 img{ width: 50%; }
}

@media only screen and ( max-width: 599px ) and ( orientation: portrait ) {
	html:not(.pc) body#online .presentbox >div,
	html:not(.pc) body#online .presentbox >img { float: none; width:90%; }
	html:not(.pc) body#online #spp2_bg p {width: 90%; }
	html:not(.pc) body#online #spp2_bg .photo { margin: 0 0 0 18px; }
	html:not(.pc) body#online .tourokutext #cittaonlinemember,body#online .tourokutext > div { float: none; width:80%;}
}

@media only screen and ( max-width: 599px ) and ( orientation: landscape ) {
}


@media screen and ( min-width: 600px ) and ( max-width: 767px ){
}

@media screen and ( min-width: 768px ) and ( max-width: 1023px ){
	html:not(.pc) body.sp article[role=main] { width: 750px !important; }
}


@media screen and ( min-width: 1024px ) {
	html:not(.pc) body#sp_lover article[role="main"] header,
	html:not(.pc) body.sp article[role=main] { width: 950px !important; }
	html:not(.pc) body#online #spp2_bg h4 { display: none;}
	html:not(.pc) body#online #spp2_bg { width: 100%; height: 400px; background: transparent url(/online/images/10th_party.jpg) no-repeat -12px 0; }
	html:not(.pc) body#online #spp2_bgtitle,
	html:not(.pc) body#online #spp2_bg .photo { display: none; }
	html:not(.pc) body#online #spp2_bg p { margin: 88px 0 0 18px;color: #ffffff; line-height: 1.4; }
}

/* PC Only Start */
.pc:not(.msie8) body#sp_lover article[role="main"] header,
.pc:not(.msie8) body.sp article[role=main] { width: 950px !important; }
.pc:not(.msie8) body#online #spp2_bg h4 { display: none;}
.pc:not(.msie8) body#online #spp2_bg { width: 100%; height: 400px; background: transparent url(/online/images/10th_party.jpg) no-repeat -12px 0; }
.pc:not(.msie8) body#online #spp2_bgtitle,
.pc:not(.msie8) body#online #spp2_bg .photo { display: none; }
.pc:not(.msie8) body#online #spp2_bg p { margin: 88px 0 0 18px;color: #ffffff; line-height: 1.4; }
/* PC Only End */