@charset "utf-8";

.shroom_guide { position:relative; width:80%; margin:10rem auto; }
.shroom_guide .top { background:url(/images/2014/store/popup-how-top.png) no-repeat; height:4.5rem; }
.shroom_guide .middle { background:url(/images/2014/store/popup-how-body.png) repeat-y; height:auto; min-height:5rem; }
.shroom_guide .bottom { background:url(/images/2014/store/popup-how-bottom.png) no-repeat; height:5.7rem; }
.shroom_guide .top, .shroom_guide .middle, .shroom_guide .bottom {  width:100%; }
.shroom_guide .middle .content { width:90%; position:relative; margin:auto;  }
.shroom_guide .tree { position:absolute; top: -6.3rem; left: 15%; width: 70%; }
.shroom_guide .tree img { max-width:800%; width:100%; }
.shroom_guide .button { right:4%; top:1.9rem; text-align:center; cursor:pointer; }
.shroom_guide .button p { position:relative; margin-top:1.2rem; }
.title_box { width:100%; position:relative; top: 0rem; font-size: 3.2rem; }
.title_box .notes, .title_box .title { position:relative; display:inline-block; vertical-align:middle; }
.title_box .notes { background:url(/images/2014/store/earn/way-icon.png) no-repeat; width:20%; height:9rem; }
.title_box .title { width:50%; text-align:left; margin-left:5%; font-size:11px; }

.method .image { width:70%; position:relative; margin:auto; }
.method .m_title div { position:relative; display:inline-block; vertical-align:middle; }
.method .m_title .circle { background:url(/images/2014/store/earn/number-circle.png) no-repeat; width:10%; height:7rem; margin-right:1%; }
.method .m_title .circle p { margin-top: 1.5rem; }
.method.m1 .verdana { width:80%; position:relative; margin:1rem auto; }
.method.m2 .m_title .text { top:1rem; }
.method.m2 .count .image, .method.m2 .count .desc { position:relative; display:inline-block; vertical-align:middle; }
.method.m2 .count .image { width:25%; background:url(/images/2014/store/earn/way-02a-m.png) no-repeat; height:29rem; }
.method.m2 .count.c2 .image { background:none; height:auto; width:20%; }
.method.m2 .count .desc { width:62%; }
.method.m2 .count .desc .leaf, .method.m2 .count .desc .credits { position:relative; display:inline-block; vertical-align:middle; }
.method.m2 .count .desc .leaf { width:7%; margin-right:2%; }
.method.m2 .count .desc .others { width:80%; text-align:left; position:relative; left:15%; }
.method.m2 .borderbox { width:70%; border:1px dashed #592202; border-radius:2rem; position:relative; margin:2rem auto; }
.method.m2 .borderbox div { position:relative; display:inline-block; vertical-align:middle; max-width: 85%; }
.method.m2 .borderbox .mushroom { width:10%; margin-left:2%; }
.method.m2 .borderbox p { margin:1rem 2%; }
.verdana, .text, .credits { font-size:11px;}

@media only screen and (min-width: 481px) {
	.shroom_holder .title_box.desktop { display:block; }
	.shroom_holder .title_box.mobile { display:none;}
	.shroom_guide .top { height:4rem;}
	.text, .credits { font-size:3rem;}
	.title_box .title { font-size:3rem; }
	.verdana { font-size:2rem;}
/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
}

@media only screen and (min-width: 726px) {
	.method .m_title .circle p { margin-top:2rem; }
}

@media only screen and (min-width: 1024px) {
.method .m_title .circle { width:9%; }
}
@media only screen and (min-width: 1025px) {
	.title_box { font-size: 2.4rem; }
	.method.m2 .count .image { background:url(/images/2014/store/earn/way-02a.png) no-repeat; width:20%; height:24rem; }
	.text, .credits { font-size:2rem;}
	.title_box .title { font-size:2rem; }
	.verdana { font-size:1.3rem;}
}