@charset "utf-8";






/*----------------------------------------------------------------------------------------------------
	Tsume_shogi
----------------------------------------------------------------------------------------------------*/



/*-- ベース --*/
.tsume_shogi { padding: 0!important; border: none!important; background: #fcebd1!important; }











/*--------------------------------------------------
	Play
--------------------------------------------------*/
#game_no { display: none; }
#game_day { display: none; }

.game_play { position: relative; margin-bottom: 5px; }

.play {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 5px;
	max-width: 470px;
	margin: auto;
}
.play .left { box-sizing: border-box; width: 100%; }
.play .right { box-sizing: border-box; width: 100%; }

@media screen and (max-width: 1063px) {
	.play .left { float: none; margin-bottom: 5px; }
	.play .right { float: none; }
}

.play .right .ttl_val { flex: 1; padding: 2px 3px 0px 4px; font-size: 16px; font-weight: bold; color: #fff; line-height: 1.5; text-align: center; background: #724502; }
.play .right .answer_number { flex: 1; width: 155px; padding: 2px 3px 0px 4px; font-size: 16px; font-weight: bold; color: #fff; line-height: 1.5; text-align: center; background: #bf7500; }
.play .right .tab_me { flex: 1; cursor: pointer; width: 70px; padding: 2px 3px 0px 4px; font-size: 16px; font-weight: bold; color: #fff; line-height: 1.5; text-align: center; background: #666; }
.play .right .tab_enemy { flex: 1; cursor: pointer; width: 70px; padding: 2px 3px 0px 4px; font-size: 16px; font-weight: bold; color: #fff; line-height: 1.5; text-align: center; background: #666; }
.play .right .on { cursor: auto; color: #724502; background: #ffd38c; }

/* CSS追加【2022/02/09】棋譜 */
.play .right_ui { display: flex; width: 100%; }
.play .right_ui_ttl { display: flex; border: 1px solid #bf7500; }
.play .right_kifu { width: 50%; }
.play .right_mine { width: 50%; }
/* ここまで */

#enemy { display: none; min-height: 165px; padding: 5px; padding-bottom: 0; background: #ffd38c; border: 1px solid #bf7500; }
/* CSS追加【2022/02/09】後手 */
@media screen and (max-width: 660px) {
	#enemy { background: #ffd38c; border: 1px solid #bf7500;}
}
/* ここまで */

#enemy dl { float: left; margin-right: 5px; }
#enemy dt { display: inline-block; *display: inline; *zoom: 1; cursor: auto; width: 50px; height: 50px; margin-right: 2px; border: 1px solid #ffd38c; }
#enemy dd { display: inline-block; *display: inline; *zoom: 1; width: 20px; height: 20px; margin: -2px 0px 0px -15px; *margin: -2px 0px 0px -20px; padding: 2px; font-size: 14px; color: #fff; text-align: center; vertical-align: top; border-radius: 50%; background: #915901; }
#me { height: 160px; padding: 5px; border: 1px solid #bf7500; background: #ffd38c; }
#me dl { float: left; margin-right: 5px; }
#me dt { display: inline-block; *display: inline; *zoom: 1; cursor: pointer; width: 50px; height: 50px; margin-right: 2px; border: 1px solid #ffd38c; }
#me dd { display: inline-block; *display: inline; *zoom: 1; width: 20px; height: 20px; margin: -2px 0px 0px -15px; *margin: -2px 0px 0px -20px; padding: 2px; font-size: 14px; color: #fff; text-align: center; vertical-align: top; border-radius: 50%; background: #915901; }
#me .waiting { border: 1px solid #915901; }

#kifu { height: 160px; padding: 5px; border: 1px solid #bf7500; background: #fff; }
#kifu ol { list-style-type: none; margin: 0px; padding: 0px 5px; }
#kifu ol li { margin-bottom: 2px; padding: 0px 0px 0px 16px; font-size: 14px; line-height: 1.5; }
#kifu .kifu_me { background: url(/_template_data/img/tsume_shogi/ver_001/sprite_v2.png) no-repeat -400px -97px; }
#kifu .kifu_enemy { background: url(/_template_data/img/tsume_shogi/ver_001/sprite_v2.png) no-repeat -400px -197px; }

.info { display: flex; justify-content: center; align-items: center; position: relative; height: 70px; padding: 10px; border: 2px solid #edbf07; border-radius: 10px; background: url(/_template_data/img/tsume_shogi/ver_001/bg4.gif) repeat; }
.info #number { position: absolute; left: 5px; top: 5px; width: 64px; height: 64px; }
.info .number1 { background: url(/_template_data/img/tsume_shogi/ver_001/sprite_v2.png) no-repeat 0px -900px; }
.info .number3 { background: url(/_template_data/img/tsume_shogi/ver_001/sprite_v2.png) no-repeat -100px -900px; }
.info .number5 { background: url(/_template_data/img/tsume_shogi/ver_001/sprite_v2.png) no-repeat -200px -900px; }
.info .number7 { background: url(/_template_data/img/tsume_shogi/ver_001/sprite_v2.png) no-repeat -300px -900px; }

.info .menu { margin: 0px 65px; color: #fff; }
.info .menu a { display: inline-block; *display: inline; *zoom: 1; cursor: pointer; text-decoration: none; margin: 0px 5px; padding: 2px 10px 0px 10px; font-size: 20px; line-height: 1.5; border-radius: 6px; }
.info .menu .y { font-weight: bold; color: #fff; background: #ed8a00; }
.info .menu .n { font-weight: bold; color: #fff; background: #1c98cc; }

/* CSS追加【2022/02/09】手順（選択） */
@media screen and (max-width: 660px) {
	.info .menu a { padding: 5px 10px; font-size: 1.2rem; text-align: center; }
}
/* ここまで */

.info .hint { position: absolute; right: 5px; top: 5px; padding: 0px; }
.info .hint a { display: inline-block; *display: inline; *zoom: 1; width: 64px; height: 64px; background: url(/_template_data/img/tsume_shogi/ver_001/sprite_v2.png) no-repeat -400px -900px; }
.info .hint a.ng { cursor: auto; display: inline-block; *display: inline; *zoom: 1;background: url(/_template_data/img/tsume_shogi/ver_001/sprite_v2.png) no-repeat -500px -900px; }

.move_me { display: inline-block; *display: inline; *zoom: 1; width: 0px; height: 16px; margin-right: 5px; background: url(/_template_data/img/tsume_shogi/ver_001/sprite_v2.png) no-repeat -1100px -80px; }
.move_enemy { display: inline-block; *display: inline; *zoom: 1; width: 0px; height: 16px; margin-right: 5px; background: url(/_template_data/img/tsume_shogi/ver_001/sprite_v2.png) no-repeat -1100px -160px; }

#board { box-sizing: border-box; width: 100%; margin-bottom: 5px; padding: 30px 30px 0 0; background: url(/_template_data/img/tsume_shogi/ver_001/position.png) no-repeat; background-size: contain; }
#board ul li { position: relative; float: right; width: calc(100% / 9); height: auto; aspect-ratio: 1; background-color: #f8bb53; }
#board ul li:hover { background-color: #eee; }
#board ul li.selected { background-color: #915901; }
#board ul li.moved { background-color: #d9941f; }
#board ul li.movable { cursor: pointer; color: #fff; background-color: #d68d19; }
#board ul li.addable { cursor: pointer; color: #fff; background-color: #d68d19; }
#board ul li div { width: 100%; height: 100%; }

#board ul li::before {
	position: absolute;
	left: 0;
	top: 0;
	content: '';
	width: 100%;
	height: 100%;
	border: 1px solid #724502;
	box-sizing: border-box;
}
/* CSS追加【2022/02/09】駒の位置 */
#board ul li .me { cursor: pointer; }
#board ul li .enemy { pointer-events: none; }

#board ul li .P  { width: 100%; background: url(/_template_data/img/tsume_shogi/sente_koma/P.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .TP { width: 100%; background: url(/_template_data/img/tsume_shogi/sente_koma/TP.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .L  { width: 100%; background: url(/_template_data/img/tsume_shogi/sente_koma/L.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .TL { width: 100%; background: url(/_template_data/img/tsume_shogi/sente_koma/TL.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .N  { width: 100%; background: url(/_template_data/img/tsume_shogi/sente_koma/N.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .TN { width: 100%; background: url(/_template_data/img/tsume_shogi/sente_koma/TN.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .S  { width: 100%; background: url(/_template_data/img/tsume_shogi/sente_koma/S.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .TS { width: 100%; background: url(/_template_data/img/tsume_shogi/sente_koma/TS.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .G  { width: 100%; background: url(/_template_data/img/tsume_shogi/sente_koma/G.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .B  { width: 100%; background: url(/_template_data/img/tsume_shogi/sente_koma/B.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .TB { width: 100%; background: url(/_template_data/img/tsume_shogi/sente_koma/TB.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .R  { width: 100%; background: url(/_template_data/img/tsume_shogi/sente_koma/R.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .TR { width: 100%; background: url(/_template_data/img/tsume_shogi/sente_koma/TR.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .K  { width: 100%; background: url(/_template_data/img/tsume_shogi/sente_koma/K.png) no-repeat; background-position: center; background-size: 100% 100%; }

#board ul li .vP  { width: 100%; background: url(/_template_data/img/tsume_shogi/gote_koma/vP.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .vTP { width: 100%; background: url(/_template_data/img/tsume_shogi/gote_koma/vTP.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .vL  { width: 100%; background: url(/_template_data/img/tsume_shogi/gote_koma/vL.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .vTL { width: 100%; background: url(/_template_data/img/tsume_shogi/gote_koma/vTL.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .vN  { width: 100%; background: url(/_template_data/img/tsume_shogi/gote_koma/vN.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .vTN { width: 100%; background: url(/_template_data/img/tsume_shogi/gote_koma/vTN.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .vS  { width: 100%; background: url(/_template_data/img/tsume_shogi/gote_koma/vS.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .vTS { width: 100%; background: url(/_template_data/img/tsume_shogi/gote_koma/vTS.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .vG  { width: 100%; background: url(/_template_data/img/tsume_shogi/gote_koma/vG.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .vB  { width: 100%; background: url(/_template_data/img/tsume_shogi/gote_koma/vB.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .vTB { width: 100%; background: url(/_template_data/img/tsume_shogi/gote_koma/vTB.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .vR  { width: 100%; background: url(/_template_data/img/tsume_shogi/gote_koma/vR.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .vTR { width: 100%; background: url(/_template_data/img/tsume_shogi/gote_koma/vTR.png) no-repeat; background-position: center; background-size: 100% 100%; }
#board ul li .vK  { width: 100%; background: url(/_template_data/img/tsume_shogi/gote_koma/vK.png) no-repeat; background-position: center; background-size: 100% 100%; }
/* ここまで */

#board #error { display: none; position: absolute; left: 75px; top: 95px; width: 300px; height: 200px; padding-top: 100px; font-size: 14px; line-height: 1.5; text-align: center; border-radius: 6px; background: #fff; }
#board #error a { display: inline-block; *display: inline; *zoom: 1; margin-top: 10px; padding: 10px; font-size: 14px; font-weight: bold; color: #fff; line-height: 1.5; text-align: center; border-radius: 6px; background: #1c98cc; }
#board #wall { display: none; position: absolute; left: 1px; top: 30px; z-index: 4; width: calc(100% - 20px); height: 100%; background: rgba(0, 0, 0, 0.4); }
#board #start_btn { display: none; position: absolute; width: 100%; top: 215px; z-index: 5; }
#board #clear_btn { display: none; position: absolute; width: 100%; top: 215px; z-index: 5; }

/* 20220311 nishida
	.leftのfloatを解除した影響で位置の調整が必要。
*/
@media screen and (max-width: 1063px) {
	#board #wall {
		top: 20px;
	}
}

#menu_update { padding: 2px 10px 0px 10px; display: none; font-size: 20px; text-align: center; }
#menu_reload { padding: 2px 10px 0px 10px; display: none; font-size: 20px; text-align: center; }
#menu_auto { padding: 2px 10px 0px 10px; display: none; font-size: 20px; text-align: center; }
#menu_retry { padding: 2px 10px 0px 10px; display: none; font-size: 20px; text-align: center; }

/* CSS追加【2022/02/09】ゲームの進行内容 */
@media screen and (max-width: 660px) {
	.menu_comment { margin-bottom: 2px; }

	#menu_update { padding: 0; font-size: 1.2rem; text-align: center; }
	#menu_reload { padding: 0; font-size: 1.2rem; text-align: center; }
	#menu_auto { padding: 0; font-size: 1.2rem; text-align: center; }
	#menu_retry { padding: 0; font-size: 1.2rem; text-align: center; }
}
/* ここまで */

#menu_clear { padding: 2px 10px 0px 10px; display: none; font-size: 20px; }
#menu_hint { padding: 2px 10px 0px 10px; display: none; font-size: 20px; }
#menu_adclose { display: none; padding: 2px 10px 0px 10px; font-size: 20px; line-height: 1.5; }
#default0 { display: none; padding: 2px 10px 0px 10px; font-size: 20px; line-height: 1.5; }
#default1 { display: none; padding: 2px 10px 0px 10px; font-size: 20px; line-height: 1.5; }
#default2 { display: none; padding: 2px 10px 0px 10px; font-size: 20px; line-height: 1.5; }
#default3 { display: none; padding: 2px 10px 0px 10px; font-size: 20px; line-height: 1.5; }
#default4 { display: none; padding: 2px 10px 0px 10px; font-size: 20px; line-height: 1.5; }
#default5 { display: none; padding: 2px 10px 0px 10px; font-size: 20px; line-height: 1.5; }

/* CSS追加【2022/02/09】ヒント情報など */
@media screen and (max-width: 660px) {
	#menu_clear { font-size: 1.4rem; }
    #menu_hint { font-size: 1.4rem; }
    #menu_adclose { font-size: 1.4rem; }
	#default0 { font-size: 1.4rem; }
	#default1 { font-size: 1.4rem; }
	#default2 { font-size: 1.4rem; }
	#default3 { font-size: 1.4rem; }
	#default4 { font-size: 1.4rem; }
	#default5 { font-size: 1.4rem; }
}
/* ここまで */

/* CSS追加【2022/02/09】手駒表示(先手・後手) */
#enemy .P  { background: url(/_template_data/img/tsume_shogi/gote_koma/vP.png) no-repeat; background-position: center; }
#enemy .L  { background: url(/_template_data/img/tsume_shogi/gote_koma/vL.png) no-repeat; background-position: center; }
#enemy .N  { background: url(/_template_data/img/tsume_shogi/gote_koma/vN.png) no-repeat; background-position: center; }
#enemy .S  { background: url(/_template_data/img/tsume_shogi/gote_koma/vS.png) no-repeat; background-position: center; }
#enemy .G  { background: url(/_template_data/img/tsume_shogi/gote_koma/vG.png) no-repeat; background-position: center; }
#enemy .B  { background: url(/_template_data/img/tsume_shogi/gote_koma/vB.png) no-repeat; background-position: center; }
#enemy .R  { background: url(/_template_data/img/tsume_shogi/gote_koma/vR.png) no-repeat; background-position: center; }
#enemy .K  { background: url(/_template_data/img/tsume_shogi/gote_koma/vK.png) no-repeat; background-position: center; }

#me .P  { background: url(/_template_data/img/tsume_shogi/sente_koma/P.png) no-repeat; background-position: center; }
#me .L  { background: url(/_template_data/img/tsume_shogi/sente_koma/L.png) no-repeat; background-position: center; }
#me .N  { background: url(/_template_data/img/tsume_shogi/sente_koma/N.png) no-repeat; background-position: center; }
#me .S  { background: url(/_template_data/img/tsume_shogi/sente_koma/S.png) no-repeat; background-position: center; }
#me .G  { background: url(/_template_data/img/tsume_shogi/sente_koma/G.png) no-repeat; background-position: center; }
#me .B  { background: url(/_template_data/img/tsume_shogi/sente_koma/B.png) no-repeat; background-position: center; }
#me .R  { background: url(/_template_data/img/tsume_shogi/sente_koma/R.png) no-repeat; background-position: center; }
#me .K  { background: url(/_template_data/img/tsume_shogi/sente_koma/K.png) no-repeat; background-position: center; }
/* ここまで */

#temp_log { display: none; }
#temp_log_for_j { display: none; }

.btn_top { float: right; padding: 5px 40px 0px 0px; }
.btn_top a { display: inline-block; *display: inline; *zoom: 1; padding: 7px 10px; font-size: 14px; color: #fff; text-align: center; border: 2px solid #fff; border-radius: 6px; background: #bf5100; }

/*-- play_adnet  --*/
.adnet_play_300 { margin-bottom: 10px; padding: 5px; text-align: center; background: #fff; }

.adnet_head { width: 728px; margin: 0px auto; margin-bottom: 5px; }


/*-- modal --*/
#ad_modal { display: none; }
#ad_modal img { vertical-align: bottom; }
.ad_modal { z-index: 20; position: absolute; left: 340px; top: 540px; text-align: center; }
.ad_modal_frame { width: 340px; height: 290px; border-radius: 6px; border: 1px solid #ccc; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.6); }
.ad_modal_close p { z-index: 21; position: absolute; top: -8px; right: -8px; text-align: center; border-radius: 6px; -webkit-border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -moz-border-radius: 6px; border: 1px solid #333; cursor: pointer; box-shadow: 0 2px 3px 0	 rgba(0,0,0,0.6); }
.ad_modal_close p span { display: inline-block; *display: inline; *zoom: 1; width: 18px; height: 18px; padding: 0; font-weight: bold; font-size: 16px; color: #fff; line-height: 1.2; border-radius: 4px; border: 2px solid #fff; background: #333; }
.ad_modal_close p span:hover { color: #fff; background-color: #666; }

/*-- modal2 --*/
#ad_modal2 { display: none; }
#ad_modal2 img { vertical-align: bottom; }
.ad_modal2 { z-index: 20; position: absolute; left: 340px; top: 455px; text-align: center; }
.ad_modal2_frame { width: 340px; height: 290px; padding-top: 20px; border-radius: 6px; border: 1px solid #ccc; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.6); }
.ad_modal2_close p { z-index: 21; position: absolute; top: -8px; right: -8px; text-align: center; border-radius: 6px; -webkit-border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -moz-border-radius: 6px; border: 1px solid #333; cursor: pointer; box-shadow: 0 2px 3px 0	 rgba(0,0,0,0.6); }
.ad_modal2_close p span { display: inline-block; *display: inline; *zoom: 1; width: 18px; height: 18px; padding: 0; font-weight: bold; font-size: 16px; color: #fff; line-height: 1.2; border-radius: 4px; border: 2px solid #fff; background: #333; }
.ad_modal2_close p span:hover { color: #fff; background-color: #666; }



/*--------------------------------------------------
	Media（メディア毎色変更箇所）
--------------------------------------------------*/



/*---------- Paragraph Header Bg ----------*/
.game_ttl h2 { background: #000; }
.game_ttl_long h2 { background: #000; }



/*---------- Main Contents Bg ----------*/
.game_rule { border: 2px solid #005bab; background: #c5e0f7; }
.game_play { background: #fcebd1; }
.game_play .left .cell_area { border: 5px solid #005bab; }
.game_play .left .answer_area .flow1 p span { color: #80bdf2; }
.game_play .right .key_tab .y_ttl { background: #72aadb; }
.game_play .right .key_tab .x_ttl { background: #72aadb; }
.game_play .right .key_tab .selected { background: #c5e0f7; }
.game_play .right .key_area ul { background: #c5e0f7; }
.game_answer { background: #c5e0f7; }
.simple_overlay { background: #72aadb; }