@charset "UTF-8";

@media screen and (max-width: 786px) {

/*
 *
 *    Module
 *
 *
 ============================================================================ */
.media.pc { display:none; }
.media.sp { display:block; }

/*
 *
 *    Main
 *
 *
 ============================================================================ */
#container { display:block; width:auto; margin:0 auto; }

#contents { display:block; text-align:center; }

/*
 *
 *  Loading (Javascript component)
 *  
 */

/*
 *
 *  game UI
 *  
 */
#contents #areaField { display:block; max-width:none; max-height:none; width:100vw; height:158vw; margin:0 auto; background:url(../img/game-ui/bg-game-sp.jpg) no-repeat; background-size:cover; }
#contents #areaField::after { max-width:none; max-height:none; width:100vw; height:158vw; opacity:.3; z-index:1;  background:url(../img/game-ui/bg-game-light-sp.jpg) no-repeat; background-size:cover; }
/*
 *  game UI -> module 
 */
#contents #areaField .card { display:inline-block; max-width:60px; max-height:100px; width:9vh; height:13.4vh; background-size:contain; background-repeat:no-repeat; }
#contents #areaField .wireBox { padding:20px; border:solid 2px #FFF; border-radius:3px; background-color:rgba(0,0,0,.3); color:#FFF; font-size:100%; }
#contents #areaField .handWrap > .view { line-height:1em; color:#FFF; }
#contents #areaField .statusBox { display:table; text-align:left; }
#contents #areaField .statusBox dl { display:inline-block; text-align:left; line-height:1.6em; }
#contents #areaField .statusBox dl + dl { margin-top:.3vh; }
#contents #areaField .statusBox dl dt { display:block; width:auto; font-size:85%; }
#contents #areaField .statusBox dl dt::after { display:inline; content:"："; }
#contents #areaField .statusBox dl dd { display:block; width:auto; text-align:left; font-size:115%; }
#contents #areaField .statusBox dl dd::before { display:none; content:""; }
#contents #areaField .statusBox .statusTtl { padding-bottom:5px; border-bottom:solid 1px #ccc; margin-bottom:10px; line-height:1.4em; }
/*
 *  game UI -> setting @ parent: areaField
 */
#contents #areaField #areaSetting { position:absolute; bottom:2.2%; right:4%; z-index:8000; }
#contents #areaField #areaSetting #listSetting { overflow:hidden; }
#contents #areaField #areaSetting #listSetting li { float:left; max-width:35px; max-height:35px; width:4.5vh; height:4.5vh; }
#contents #areaField #areaSetting #listSetting li+li { margin-left:.5vh; }
#contents #areaField #areaSetting #listSetting li a { display:block; width:100%; height:100%; background:url(../img/game-ui/btn-home.png) no-repeat; background-size:cover; }
#contents #areaField #areaSetting #listSetting li #scene { display:block; width:100%; height:100%; background:url(../img/game-ui/btn-scene.png) no-repeat; background-size:cover; }
#contents #areaField #areaSetting #listSetting li #se { width:100%; height:100%; background:url(../img/game-ui/btn-se-none.png) no-repeat; background-size:cover; }
#contents #areaField #areaSetting #listSetting li #se.active { background:url(../img/game-ui/btn-se.png) no-repeat; background-size:cover; }
/*
 *  game UI -> layer [background]
 */
#contents #layerBg { position:absolute; top:0; right:0; bottom:0; left:0; z-index:9000; }
#contents #layerBg > .inner { position:relative; width:100%; height:100%; background-color:rgba(0,0,0,.9); }
#contents #layerBg > .inner.lightBg { background-color:rgba(0,0,0,.3); }
#contents #layerBg > .inner.noBg { background-color:transparent; }
#contents #layerBg .dialog { position:absolute; width:100%; text-align:center; }
#contents #layerBg .dialog .msg { margin-bottom:20px; color:#FFF; }
#contents #layerBg .dialog .dialogItem { display:inline-block; cursor:pointer; padding:20px 60px; margin:0 10px; background-color:rgba(255,255,255,.7); }

#contents #layerBg .judge { position:absolute; width:100%; text-align:center; }
#contents #layerBg .judge .msg { margin-bottom:20px; font-size:260%; color:#FFF; }

#contents #layerBg .message { position:absolute; width:100%; text-align:center; }
#contents #layerBg .msg { margin-bottom:20px; font-size:120%; color:#FFF; }
/*
 *  game UI -> player 
 */
#contents #playerField { position:absolute; bottom:0; width:100%; height:50%; padding:2% 3.5%; }
#contents #playerField > .inner { position:relative; width:100%; height:100%; z-index:2; }
/*
 *  game UI -> player [status]
 */
#contents #playerField #playerStatus.wireBox { position:absolute; right:0; bottom:20%; width:30%; }
/*
 *  game UI -> player [hand]
 */
#contents #playerField #playerHandWrap { position:absolute; right:0; bottom:24%; left:0; }
/*
 *  game UI -> player [chip]
 */
#contents #playerField #chipWrap { position:absolute; bottom:0; left:0; line-height:1em; z-index:10; }
#contents #playerField #chipWrap #chip { display:block; }
#contents #playerField #chipWrap #chip > li { float:none; max-width:55px; max-height:55px; width:6.6vh; height:6.6vh; }
#contents #playerField #chipWrap #chip > li + li { margin-top:3%; }
#contents #playerField #chipWrap #resetChip { display:inline-block; max-width:55px; max-height:55px; width:6.6vh; height:6.6vh; background:url(../img/game-ui/chip-reset.png) no-repeat; background-size:cover; cursor:pointer; }
/*
 *  game UI -> player [button]
 */
#contents #playerField #gameButton { position:absolute; right:0; bottom:0; left:0; margin:0 auto; text-align:center; }
#contents #playerField #gameButton .button { display:inline-block; position:relative; float:none; width:8vh; height:8vh; }
#contents #playerField #gameButton .button .active { display:inline-block; position:absolute; top:0; right:0; width:100%; height:100%; z-index:10; }
#contents #playerField #gameButton .button input:hover { opacity:1; }
#contents #playerField #gameButton .button input { display:block; position:absolute; top:0; right:0; width:100%; height:100%; z-index:20; opacity:0; transition:.2s; }
#contents #playerField #gameButton #dealButton input { background:url(../img/game-ui/btn-deal-active.png) no-repeat; background-size:cover; }
#contents #playerField #gameButton #hitButton input { background:url(../img/game-ui/btn-hit-active.png) no-repeat; background-size:cover; }
#contents #playerField #gameButton #standButton input { background:url(../img/game-ui/btn-stand-active.png) no-repeat; background-size:cover; }
#contents #playerField #gameButton #dealButton .active { background:url(../img/game-ui/btn-deal.png) no-repeat; background-size:cover; }
#contents #playerField #gameButton #hitButton .active { background:url(../img/game-ui/btn-hit.png) no-repeat; background-size:cover; }
#contents #playerField #gameButton #standButton .active { background:url(../img/game-ui/btn-stand.png) no-repeat; background-size:cover; }
/*
 *  game UI -> character 
 */
#contents #characterField { position:absolute; top:0; width:100%; height:50%; }
#contents #characterField > .inner { position:relative; width:100%; height:100%; padding:3vh; z-index:3; }
/*
 *  game UI -> character [talk]
 */
#contents #characterField #characterTalk { text-align:left; }
/*
 *  game UI -> character [status]
 */
#contents #characterStatus.wireBox { position:absolute; top:34%; width:28%; z-index:1000; }
/*
 *  game UI -> character [hand]
 */
#contents #characterField #characterHandWrap { position:absolute; top:49%; right:0; left:0; }

/* Scene */
#contents #sceneWrap,
#contents #sceneWrap .inner { position:relative; height:100%; }
/* Scene -> start */
#contents #sceneWrap #sceneStart { position:absolute; right:0; left:0; width:100%; height:100%; background:url(../img/bg-title-sp.jpg) no-repeat; background-size:cover; z-index:1000; }
#contents #sceneWrap #btnGameStart { display:block; position:absolute; right:0; bottom:10%; left:0; width:80%; padding:15px 10px; border-radius:3px; margin:0 auto;  }
/* Scene -> talk */
#contents #sceneWrap #sceneEvent { position:relative; height:100%; background:url(../img/bg-casino.jpg) no-repeat; background-size:cover; z-index:999; }
#contents #sceneWrap #sceneEvent > .inner { background-color:rgba(0,0,0,.4); }
#contents #sceneWrap #talkWrap { position:absolute; right:0; bottom:25px; left:0; width:95%; height:12em; padding:30px; border-radius:5px; margin:0 auto; text-align:left; background-color:rgba(0,0,0,.6); color:#FFF; }
#contents #sceneWrap #cmdWrap { position:absolute; right:0;left:0; width:45%; border-radius:5px; margin:auto; background-color:#000; }
#contents #sceneWrap #cmdWrap > .btn { padding:15px 0; color:#FFF; cursor:pointer; }
#contents #sceneWrap #charaWrap { width:80%; }
#contents #sceneWrap #hideWinInfo { z-index:1000; }
/* Scene -> Continue */
#contents #sceneWrap #sceneContinue { position:absolute; top:0; right:0; left:0; width:100%; height:100%; background:#000; z-index:9000; }
#contents #sceneWrap #btnGameContinue { display:inline-block; position:absolute; bottom:120px; padding:10px; border-radius:3px; line-height:1em; background-color:#FFF; color:#000; cursor:pointer; }

}