/* Game
=================================== */
.txt-center{text-align:center; }
#game #pagettl { font-size:180%; }
#gm-lead { margin-bottom:20px; text-align:center; }
#gm-lead1 { color:#e0232e; font-size:150%; line-height:140%; font-weight:bold; margin-bottom:7px; }
#gm-qr { width:180px; margin:auto; }
#gm-qr p { position:relative; width:100%; height:0; padding-top:100%; }
#gm-qr p span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background:url(../img/game/qr.png) center center no-repeat; background-size:cover; text-indent:-9999px; }

.gm-box { padding:10px;margin-bottom:20px; }
.gm-box .txt { font-size:100%; line-height:180%; padding-bottom:0.5em; }
.gm-box .txt-s { font-size:90%; line-height:180%; padding-bottom:0.5em; }
@media (hover: hover) { .gm-box .txt a:hover { text-decoration:none; } }
.gm-box .ttl { margin-bottom: 0.5em; font-size:110%; color:#C70025; border-left:#C70025 3px solid; padding-left: 6px; font-size:90%; line-height:180%; }
.gm-box dl dt, .gm-box dl dd { font-size:90%; line-height:180%; }
.gm-box dl dt { clear: both; float:left; }
.gm-box dl dd { padding-left:9.0em; }

.gm-sttl { position:relative; margin-bottom:10px; padding:20px; font-size:110%; line-height:140%; background:#fff8f1; color:#C70025; }
.gm-sttl::before,
.gm-sttl::after { position: absolute; left: 0; content: ''; width: 100%; height: 6px; box-sizing: border-box; }
.gm-sttl::before { top: 0; border-top: 2px solid #C70025; border-bottom: 1px solid #e33c7d; }
.gm-sttl::after { bottom: 0; border-top: 1px solid #e33c7d; border-bottom: 2px solid #C70025; }

.gm-sttl2 { margin-bottom:0.5em; padding:0.5em 0; border-bottom:#d51222 1px solid; font-size:120%; line-height:140%; color:#d51222; }

#gm-prize { text-align:center; /* for space */ font-size:0; }
#gm-prize li { display:inline-block; margin:0 10px; vertical-align:middle; /* for space */ font-size:1rem; }
#gm-prize li p { position:relative; width:100%; height:0; padding-top:100%; }
#gm-prize li p .inner { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }
@media (hover: hover) { #gm-prize li p a:hover { opacity:0.7; } }
#gm-prize li:nth-child(1),
#gm-prize li:nth-child(2) { width:200px; }
#gm-prize li:nth-child(1) p,
#gm-prize li:nth-child(2) p { padding-top:100%; }
#gm-prize li:nth-child(1) p .inner { background-image:url(../img/game/prize1.jpg); }
#gm-prize li:nth-child(2) p .inner { background-image:url(../img/game/prize2.jpg); }
#gm-prize li:nth-child(3) { width:267px; }
#gm-prize li:nth-child(3) p { padding-top:75%; }
#gm-prize li:nth-child(3) p .inner { background-image:url(../img/game/prize3.jpg); }

#gm-box:after {content:"";clear:both;display:block;}
#gm-box-l { float:left; width:75%; }
#gm-box-r { float:right; width:23%; }

#gm-dgm { width:90%; margin:20px 5%; border:#ccc 1px solid; }
#gm-dgm p { position:relative; width:100%; height:0; padding-top:calc(1200% / 1900 * 100); }
#gm-dgm p span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-image:url(../img/game/diagram_pc.png); background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }

#gm-pic { width:100%; padding-top:15px; }
#gm-pic p { position:relative; width:100%; height:0; padding-top:calc(1822% / 914 *100); }
#gm-pic p span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background:url(../img/game/game_capture.png) center center no-repeat; background-size:cover; text-indent:-9999px; }

.toggle-box { padding-bottom:0.5em; }
.toggle-btn { position:relative; cursor:pointer; }
@media (hover: hover) { .toggle-btn:hover { opacity:0.7; } }
.toggle-btn .plmn { position:absolute; top:0.78em; right:1.0em; display:block; font-size:70%; color:#555; }

/* ------------ Media Queries ------------ */

@media all and (max-width: 767px) {

#gm-lead { margin-bottom:15px; line-height:130%; text-align:left; }
#gm-lead1 { font-size:110%; line-height:130%; margin-bottom:10px;text-align:center;  }

#gm-outline p { padding-bottom:0.5em; }
#gm-outline strong { display: block; }

.gm-box dl dt { float:none; }
.gm-box dl dd { padding-left:0.5em; padding-bottom: 0.3em; }

.gm-sttl { font-size:100%; padding:10px; }
#gm-prize { text-align:center; }
#gm-prize li:nth-child(1),
#gm-prize li:nth-child(2) { margin:0 2% 4% 2%; width:44%; }
#gm-prize li:nth-child(3) { margin:0 2% 0 2%; width:60%; }

.gm-sttl2 { font-size:100%; }

#gm-box-l { float:none; width:100%; }
#gm-box-r { float:none; width:40%; margin:0 30%; }

#gm-dgm { width:50%; margin:20px 25%; }
#gm-dgm p { padding-top:calc(1640% / 1070 * 100); }
#gm-dgm p span { background-image:url(../img/game/diagram_smp.png); }


}


@media all and (max-width: 500px) {

#gm-dgm { width:80%; margin:20px 10%; }

}
