/* Game
=================================== */

#game #pagettl { font-size:180%; }

#introduction { margin-bottom:20px; text-align:center; }
#gm-lead1 { color:#e0232e; font-size:150%; line-height:140%; font-weight:bold; margin-bottom:7px; text-align:center; }

#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 { margin-bottom:20px; }
.gm-box .txt { 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%; color:#d51222; }

#gm-prize { text-align:center; /* for space */ font-size:0; }
#gm-prize li { display:inline-block; width:220px; margin:0 7px; 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-box:after {content:"";clear:both;display:block;}

#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.jpg); background-position:center center; background-repeat: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) {

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

#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-space { display:none; }

.gm-sttl { font-size:100%; padding:10px; }

#gm-prize li { margin:1%; width:48%; }

#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.jpg); }

}

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

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

}