@charset "utf-8";

.programming-ex-game .main-image { position: relative; }
.programming-ex-game .main-image .option-view { display: none; }
.programming-ex-game .main-image .option-view.show { display: block; }
.programming-ex-game .main-image .clear-view { display: none; }
.programming-ex-game .main-image .clear-view.show { display: block; }
.programming-ex-game .main-image .clear-view .button-next { position: absolute; right: 30px; bottom: 20px; }
.programming-ex-game .main-image .movie-view { display: none; }
.programming-ex-game .main-image .movie-view.show { display: block; }
.programming-ex-game .main-image .movie-view .movie-container { position: absolute; left: 88px; top: 15px; width: 704px; height: 396px; }
.programming-ex-game .main-image .movie-view .movie { display: none; }
.programming-ex-game .main-image .movie-view .movie.show { display: block; }
.programming-ex-game .main-image .movie-view .button-back { position: absolute; left: 30px; bottom: 20px; }
.programming-ex-game .main-image .movie-view .button-next { position: absolute; right: 30px; bottom: 20px; }
.programming-ex-game .main-image .movie-view .button-next-enabled { display: none; }
.programming-ex-game .main-image .movie-view .button-next-enabled.show { display: block; }
.programming-ex-game .main-image .movie-view .button-next-disabled.hide { display: none; }
.programming-ex-game .main-image .input-view { display: none; }
.programming-ex-game .main-image .input-view.show { display: block; }
.programming-ex-game .main-image .input-view .fields { position: absolute; left: 524px; top: 269px; }
.programming-ex-game .main-image .input-view input.field { background: #fff; border: none; width: 73px; height: 60px; margin-right: 22px; text-align: center; font-size: 50px; font-weight: bold; }
.programming-ex-game .main-image .input-view input.field:focus { outline: none; }
.programming-ex-game .main-image .input-view .sign { position: absolute; left: 487px; top: 198px; width: 343px; height: 204px; display: none; justify-content: center; align-items: center; }
.programming-ex-game .main-image .input-view .sign.show { display: flex; }
.programming-ex-game .main-image .input-view .button-restart { position: absolute; left: 30px; bottom: 20px; }
.programming-ex-game .main-image .input-view .button-restart.hide { display: none; }
.programming-ex-game .main-image .input-view .button-decide { display: none; position: absolute; right: 30px; bottom: 20px; }
.programming-ex-game .main-image .input-view .button-decide.show { display: block; }
.programming-ex-game .main-image .input-view .button-open { display: none; position: absolute; right: 30px; bottom: 20px; }
.programming-ex-game .main-image .input-view .button-open.show { display: block; }
.programming-ex-game .main-image .mission-clear-view { display: none; }
.programming-ex-game .main-image .mission-clear-view.show { display: block; }
.programming-ex-game .skip-game.hide { display: none; }
.programming-ex-game .back-top.hide { display: none; }

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

#main .main-image img.hina { all: initial; line-height: inherit; height: auto; }
#main .main-image img.button { all: initial; line-height: inherit; height: auto; }

/* ================================================== 600px未満（ スマートフォン用 ）専用設定 */
@media screen and (max-width:599px){
    #main .main-image img.hina { all: initial; width: 20%; }
    #main .main-image img.button { all: initial; width: 80%; }
}

#game-bg {
    max-width: 890px;
	width: 100%;
	height: auto;
	margin: 30px auto 0 auto;
	padding: 20px;
	/*border: 2px solid blue;*/
	border: none;
	text-align: center;
	background: no-repeat center url("../images/programming-ex/game/bg_map.png");
	background-size: cover;
}

.gameframe{
    position:relative;
	padding-top:56.25%;
	overflow:hidden;
	width: 100%;
	background-color: #000;
	user-select: none;
	-webkit-overflow-scrolling:touch;
	border: none;
}
.gameframe iframe{
    position:absolute;
	top:0;
	left:0;
	width: 100%;
	height:100%;
	border: none;
	overflow:hidden; 
	background-color: #000;
	user-select: none;
    display:block;
}