@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:wght@600&display=swap');
/*--------------------------------------------------
*
* 	reset
*
*--------------------------------------------------*/

* { margin: 0; padding:0; }

*,
*::before,
*::after { box-sizing:border-box; }

h1,h2,h3,h4,h5,h6 { font-weight:normal; line-height:1; }

ul{ list-style:none; }

img{ vertical-align:bottom; }

strong,em { font-weight:normal; }

/*--------------------------------------------------
*
*   Google fonts
*
*--------------------------------------------------*/
.font-mplas { font-family:'Baloo Tammudu 2', cursive; }

/*--------------------------------------------------
*
*   以降後削除
*
*--------------------------------------------------*/
.initForm input[type="text"],
.initForm input[type="password"],
.initForm input[type="search"],
.initForm input[type="submit"],
.initForm button,
.initForm input[type="button"] { border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: button; appearance: button; border: none; background-color:transparent; }
.initForm input[type="submit"]::-webkit-search-decoration,
.initForm input[type="button"]::-webkit-search-decoration { display: none; }
.initForm button:focus,
.initForm input[type="submit"]:focus,
.initForm input[type="button"]:focus { outline-offset: -2px; }
.initForm textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; resize: none; padding: 0; border: 0; outline: none; background: transparent; }

/*--------------------------------------------------
*
* 	csv
*
*--------------------------------------------------*/
path {
  fill-opacity: 0;
  transition: fill-opacity 0.5s;
}

/*--------------------------------------------------
*
*   common
*
*--------------------------------------------------*/
html,body { height:100%; }
#container, #contents { height:100%; }

/*--------------------------------------------------
*
* 	main
*
*--------------------------------------------------*/
#game-container { display:table; width:100%; height:100%; margin:0 auto; }
#game-container > .scene { display:table-cell; vertical-align:middle; }
#game-container #gameCvgFalse,
#game-container #gameCvgTrue { position:fixed; z-index:2000; }
#game-container .gameButton { padding:10px 30px; border:solid 2px #333; border-radius:3px; line-height:1.4em; cursor:pointer; transition:.2s; }

#gameSurfaceContainer { width:100%; height:100%; }
#gameSurfaceContainer > .gameInr { position:relative; width:100%; height:100%; }
#gameSurfaceContainer #judgePanel { position:absolute; width:100%; height:100%; }
#gameSurfaceContainer .surface { position:absolute; width:100%; height:100%; text-align:center; }
#gameSurfaceContainer .surface img { width:auto; height:auto; max-width:100%; max-height:100%; }
#gameSurfaceContainer #beforeSurface { z-index:2; }
#gameSurfaceContainer #afterSurface { z-index:1; }
#gameSurfaceContainer #flowPanel { width:100%; height:3px; background-color:#39dddd; transition:.3s; }
#gameSurfaceContainer #flowPanel.hard { background-color:#d22b2b; }
#gameSurfaceContainer .message { display:inline-block; position:absolute; top:40px; left:20px; min-width:280px; padding:40px 30px 30px; border-radius:50%; box-shadow:2px 2px 5px 1px rgba(0,0,0,.2); margin:0 auto; text-align:center; font-size:115%; font-weight:bold; background-color:#FFF; color:#86CBBE; z-index:3000; transform:rotate(-10deg); }
#gameSurfaceContainer .message span { display:inline-block; }
#gameSurfaceContainer .message.gameStart { display:table; top:3px;/* flowPanelの高さ */ right:0; bottom:0; left:0; width:100%; height:100%; padding:0; border-radius:0; box-shadow:none; font-size:165%; background-color:rgba(0,0,0,.7); color:#FFF; cursor:pointer; transform:rotate(0); }
#gameSurfaceContainer .message.gameStart span { display:table-cell; text-align:center; vertical-align:middle; }

#sceneStart { text-align:center; }
#sceneStart #gameTtl { max-width:600px; margin:0 auto 40px; }
#sceneStart #gameTtl img { width:100%; }
#sceneStart #gameStartBtn { display:block; width:100%; max-width:320px; border-color:#86CBBE; margin:0 auto; text-align:center; font-size:115%; font-weight:bold; background-color:#86CBBE; color:#FFF; }
#sceneStart #gameStartBtn:hover { border-color:#71EAD2; background-color:#71EAD2; }

#sceneSelect { padding:30px; }
#sceneSelect #gameSelectTitle { margin-bottom:50px; text-align:center; font-size:165%; font-weight:bold; line-height:1.6em; color:#65BDAD; }
#sceneSelect #gameSelectScore { text-align:right; font-size:85%; line-height:1.4em; color:#777; }
#sceneSelect #gameSelectWrap { overflow:hidden; }
#sceneSelect #gameSelectWrap img { width:100%; }
#sceneSelect #gameSelectWrap .gameSelectItem { overflow:hidden; position:relative; height:180px; float:left; width:32%; margin-right:2%; margin-bottom:2%; }
#sceneSelect #gameSelectWrap .gameSelectItem:nth-child(3n) { margin-right:auto; }
#sceneSelect #gameSelectWrap .gameSelectItem::after { content:""; position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; background-color:rgba(255,255,255,0); cursor:pointer; }
#sceneSelect #gameSelectWrap .gameSelectItem.lock::before { content:""; position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; background:url(../img/ico-lock.png) no-repeat center center; background-size:40px; z-index:10; }
#sceneSelect #gameSelectWrap .gameSelectItem.lock::after { content:""; position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; background-color:rgba(255,255,255,.7); cursor:auto; }
#sceneSelect #gameSelectWrap .gameSelectItem img { position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); transition:.3s; }
#sceneSelect #gameSelectWrap .gameSelectItem:hover img { transform: translate(-50%, -50%) scale(1.1,1.1); }
#sceneSelect #gameSelectWrap .gameSelectItem.lock:hover img { transform: translate(-50%, -50%) scale(1,1); }

#sceneCongrats { text-align:center; }
#sceneCongrats #gameCongratsTtl { font-size:165%; font-weight:bold; color:#65BDAD; }
#sceneCongrats #gameCongratsTxt { margin-bottom:20px; color:#777; }
#sceneCongrats #gameCongratsUrl { margin-bottom:25px; font-size:85%; line-height:1.4em; }
#sceneCongrats #gameCongratsBtn { display:block; border-color:#999; margin:0 auto; text-align:center; font-size:85%; font-weight:bold; color:#777; }
#sceneCongrats #gameCongratsBtn:hover { background-color:#999; color:#FFF; }

/*--------------------------------------------------
*
* 	Develop mode
*
*--------------------------------------------------*/
#game-container.develop { width:100%; height:100%; }
#game-container.develop #gameSurfaceContainer .surface img { max-width:none; max-height:none; }


/*--------------------------------------------------
*
* 	debug
*
*--------------------------------------------------*/
#gameDebugContainer { position:fixed; top:0; left:0; background-color:rgba(0,0,0,.8); color:#FFF; font-size:85%; z-index:9999; }
#gameDebugContainer > div { padding:20px 30px; }

#gameDebugContainer .gameDbgSec .gameDbgItem > span::before { display:inline; content:"："; }