@charset "UTF-8";

* { box-sizing:border-box; }

html {
  height:100%;
}

body {
  font-family: 
      "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic",
      "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", 
      "メイリオ", Meiryo, 
      "ＭＳ Ｐゴシック", "MS PGothic", 
      sans-serif;
  height:100%;
}

/*
 *
 *    Reset
 *
 *
 ============================================================================ */
fieldset, img{
  border: 0 none;
}
table{
  border-collapse: collapse;
  border-spacing: 0;
}
address, caption, cite, code, dfn, em, th, var{
  font-style: normal;
  font-weight: normal;
}
ol, ul{
  list-style: outside none none;
}
.separate, .floatingw, legend{
  display: none;
}
button{
  border:none;
  cursor: pointer;
}

table{
  font-size: inherit;
}
pre, code, kbd, samp, tt{
  font-family: 'Roboto Condensed', sans-serif;
  line-height: 99%;
}
h1, h2, h3, h4, h5{
  font-size: 100%;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, p, blockquote{
  margin: 0;
  padding: 0;
}
input{
  background-color:transparent; border:none; 
}

/*
 *
 *    Module
 *
 *
 ============================================================================ */
.gothic {
    font-family: 
      "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic",
      "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", 
      "メイリオ", Meiryo, 
      "ＭＳ Ｐゴシック", "MS PGothic", 
      sans-serif;
}

.mincho {
    font-family: 
      "游明朝", YuMincho, 
      "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", 
      "HG明朝E", 
      "ＭＳ Ｐ明朝", "ＭＳ 明朝", 
      serif;
}

.media.sp { display:none; }

/*
 *
 *    Lib override
 *
 *
 ============================================================================ */
.modaal-wrapper { background-color:#FFF; }


/*
 *
 *    Main
 *
 *
 ============================================================================ */
/*#container { display:table; height:100%; width:1100px; margin:0 auto; }*/

/* #contents { display:block;  height:100%; text-align:center; vertical-align:middle; } */

#contents { text-align:center; }

/*
 *
 *  Loading (Javascript component)
 *  
 */
#layerLoading { display:none; position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgba(0,0,0,1); z-index:9999; }
#layerLoading > .inner { position:relative; width:100%; height:100%; text-align:center; }
#loadingAnime { display:inline-block; position:absolute; top:0; right:0; bottom:0; left:0; background:url(../img/anime-loading.gif) no-repeat center; background-size:48px; }

/*
 *
 *  game UI
 *  
 */
#contents #areaField { display:inline-block; position:relative; max-width:800px; max-height:567px; width:96vh; height:68vh; background:url(../img/game-ui/bg-game.jpg) no-repeat; background-size:cover; }
#contents #areaField::after { display:block; content:""; position:absolute; top:0; right:0; bottom:0; left:0; max-width:800px; max-height:567px; width:96vh; height:68vh; background:url(../img/game-ui/bg-game-light.jpg) no-repeat; background-size:cover; opacity:.3; z-index:1; }
/*
 *  game UI -> module 
 */
#contents #areaField .card { display:inline-block; max-width:70px; max-height:110px; 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:130%; }
#contents #areaField .handWrap > .view { 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:inline-block; width:4em; text-align:left; }
#contents #areaField .statusBox dl dd { display:inline-block; width:3em; text-align:right; }
#contents #areaField .statusBox dl dd::before { display:inline; content:"："; }
/*
 *  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:50px; max-height:50px; 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 { display:none; 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; bottom:30%; width:30%; }
/*
 *  game UI -> player [hand]
 */
#contents #playerField #playerHandWrap { position:absolute; right:0; bottom:12%; left:0; }
/*
 *  game UI -> player [chip]
 */
#contents #playerField #chipWrap { position:absolute; bottom:0; left:0; line-height:1em; }
#contents #playerField #chipWrap #chip { display:inline-block; overflow:hidden; }
#contents #playerField #chipWrap #chip > li { float:left; max-width:55px; max-height:55px; width:6.6vh; height:6.6vh; cursor:pointer; }
#contents #playerField #chipWrap #chip > li:nth-child(5) { background:url(../img/game-ui/chip-10.png) no-repeat; background-size:cover; }
#contents #playerField #chipWrap #chip > li:nth-child(4) { background:url(../img/game-ui/chip-100.png) no-repeat; background-size:cover; }
#contents #playerField #chipWrap #chip > li:nth-child(3) { background:url(../img/game-ui/chip-500.png) no-repeat; background-size:cover; }
#contents #playerField #chipWrap #chip > li:nth-child(2) { background:url(../img/game-ui/chip-1000.png) no-repeat; background-size:cover; }
#contents #playerField #chipWrap #chip > li:nth-child(1) { background:url(../img/game-ui/chip-5000.png) no-repeat; background-size:cover; }
#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; bottom:30%; right:-1%; overflow:hidden; }
#contents #playerField #gameButton .button { display:block; position:relative; float:left; width:9vh; height:9vh; }
#contents #playerField #gameButton .button .active { display: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:50%; width:28%; }
/*
 *  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.jpg) no-repeat; background-size:cover; z-index:1000; }
#contents #sceneWrap #btnGameStart { display:inline-block; position:absolute; bottom:17%; left:10%; width:40%; padding:15px 10px; border-radius:3px; font-size:125%; font-weight:bold; line-height:1em; background-color:#E93F2B; color:#FFF; cursor:pointer; transition:.2s; }
#contents #sceneWrap #btnGameStart:hover { background-color:#FF5541; }
/* 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 #sceneEvent.active > .inner { background-color:rgba(0,0,0,0); }
#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; z-index:910; }
#contents #sceneWrap #cmdWrap { position:absolute; top:50%; right:0; left:0; width:45%; border-radius:5px; margin:auto; background-color:rgba(0,0,0,.6); z-index:920; transform:translateY(-50%); }
#contents #sceneWrap #cmdWrap > .btn { padding:10px 0; color:#FFF; cursor:pointer; transition:.2s; }
#contents #sceneWrap #cmdWrap > .btn:hover { background-color:rgba(255,255,255,.3); }
#contents #sceneWrap #charaWrap { position:absolute; right:3%; bottom:0; width:40%; height:100%; background:url(../img/chara.png) no-repeat bottom; background-size:contain; z-index:900; }
#contents #sceneWrap #hideWinInfo { position:absolute; top:1%; right:2%; text-align:right; font-size:85%; color:#FFF; }
/* 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 { position:absolute; right:0; bottom:120px; left:0; width:30%; padding:15px 10px; border-radius:3px; margin:0 auto; line-height:1em; background-color:#FFF; color:#000; cursor:pointer; }
#contents #sceneWrap .gameRead { display:block; position:absolute; top:50%; right:0; left:0; center; font-size:260%; font-weight:bold; color:#FFF; transform: translateY(-65%); }