@charset "utf-8";






/*----------------------------------------------------------------------------------------------------
	Crossword
----------------------------------------------------------------------------------------------------*/



/*-- ベース --*/
.crossword { border-color: #005bab; background: #eff8ff; }

/*-- ゲームNo. --*/
#game_no { display: none; }

/*-- 壁 --*/
.play_wall { display: none; z-index: 31; position: absolute; left: 0; top: 0 ; width: 100%; height: 100%; background: #000; opacity: 0.4; filter: alpha(opacity=40); -ms-filter: 'alpha( opacity=40 )'; }

/*-- レイアウト --*/
.playFrame { position: relative; }

.play_r {
	max-width: 300px;
	overflow: hidden;
}

.crossword_play { position: relative; }
.crossword_play .play_infotxt { margin: 1px 0 10px; padding: 10px; font-size: 16px; font-weight: bold; color: #fff; background: #333; }
.crossword_play .play_main { z-index: 10; margin-bottom: 5px; background: #333; }

/*-- マス --*/
.cell_area { max-width: 302px; padding: 1px; background: #fff; border: 5px solid #005bab; }
.cell_area_inner { max-width: 300px; border: 1px solid #222; }
.cell_area_inner .cell_one { cursor: pointer; position: relative; float: left; width: 60px; height: 60px; }
.cell_area_inner .cell_one::before { position: absolute; left: 0; top: 0; z-index: 2; content: ''; width: 58px; height: 58px; border: 1px solid #222; }
.cell_area_inner dl { position: relative; width: 60px; height: 60px; }
.cell_area_inner .cell_one:hover dl { background: #c6faff; }
.cell_area_inner .selected1 { background: #c6faff; }
.cell_area_inner .selected2 { background: #8ae0ea; }
.cell_area_inner .error_cw { background: #f64476; }
.cell_area_inner .black { cursor: auto; background: #222; }
.cell_area_inner .black:hover dl { background: #222!important; }
.cell_area_inner dt { position: absolute; left: 2px; top: 1px; font-size: 1.2rem; color: #222; line-height: 1.0; }
.cell_area_inner dd { padding-top: 15px; font-size: 4.0rem; font-weight: bold; color: #222; line-height: 1.0; text-align: center; }

.play_main_inner {
	display: flex;
	gap: 5px;
	justify-content: center;
	padding: 5px 0;
}

@media (max-width: 700px) {
	.play_main_inner { flex-direction: column; }
	.play_l { width: 100%; margin-bottom: 5px; }
	.play_r { width: 100%; max-width: none; margin: 0 auto; margin-bottom: 5px; }
	.cell_area { margin: 0 auto; margin-bottom: 10px; }

}

@media (max-width: 400px) {

	.cell_area { max-width: 252px; margin: 0 auto; margin-bottom: 10px; }
	.cell_area_inner { max-width: 250px; }
	.cell_area_inner .cell_one { width: 50px; height: 50px; }
	.cell_area_inner .cell_one::before { width: 48px; height: 48px; }
	.cell_area_inner dl { width: 50px; height: 50px; }
	.cell_area_inner dd { font-size: 3.4rem; }

}

/*-- 入力 --*/
.flow_one { margin-bottom: 5px; padding: 0 5px; color: #fff; }
.hint_one { margin-bottom: 5px; }
.hint_btn_set { margin-bottom: 5px; font-weight: bold; text-align: center; }
.hint_btn { cursor: pointer; display: inline-block; margin: 0 5px; padding: 5px; font-size: 1.4rem; color: #fff; }
.hint_ttl { position: relative; margin-bottom: 5px; padding: 0 0 0 20px; }
.hint_key { position: absolute; left: 0; top: 0; width: 18px; height: 18px; color: #333; text-align: center; border-radius: 50%; background: #fff; }
.hint_name { display: inline-block; font-size: 1.4rem; vertical-align: middle; }
.hint_text { margin-bottom: 5px; font-size: 1.4rem; text-align: left; line-height: 1.4; }
.hint_btn_next { border: 2px solid #d7144e; border-radius: 6px; background: #f64474; }
.hint_btn_back { border: 2px solid #0297ad; border-radius: 6px; background: #18c4d8; }
.hint_input { margin-bottom: 5px; }
.hint_input input[type = 'text'] { padding: 5px; font-size: 1.6rem; }

/*-- カギ --*/
.key_tab_one { cursor: pointer; width: 48%; height: 20px; padding: 5px 0; font-weight: bold; border-radius: 6px 6px 0 0; text-align: center; background: #72aadb; }
.key_tab_one span { display: inline-block; vertical-align: middle; }
.key_tab_one.selected { background: #c5e0f7; }
.key_tab .y_ttl { float: right; }
.key_tab .x_ttl { float: left; }
.key_area ul { display: none; padding: 5px 0px; background: #c5e0f7; }
.key_area ul.selected { display: block; background: #c5e0f7; }
.key_area li { padding: 5px 10px; font-size: 16px; }
.key_area li .number { float: left; }
.key_area li .txt { margin-left: 30px; }
.arrow { position: relative; display: inline-block; width: 20px; height: 20px; margin-right: 5px; border-radius: 4px; background: #333; }
.arrow::before { position: absolute; content: ''; background: #fff; }
.arrow::after { position: absolute; content: ''; }
.arrow_x::before { left: 4px; top: 50%; width: 10px; height: 4px; margin-top: -2px; }
.arrow_x::after { right: -2px; top: 50%; width: 0; height: 0; margin-top: -5px; border: 5px solid transparent; border-left-color: #fff; }
.arrow_y::before { left: 50%; top: 4px; width: 4px; height: 10px; margin-left: -2px; }
.arrow_y::after { left: 50%; bottom: -2px; width: 0; height: 0; margin-left: -5px; border: 5px solid transparent; border-top-color: #fff; }

/*-- モーダル --*/
.popup { display: none; z-index: 32; position: absolute; left: 0; top: 100px; width: 100%; }
.popup_inner { width: 260px; margin: 0 auto; padding: 10px 10px 15px 10px; border: 5px solid #ccc; border-radius: 8px; background: #fff; }
.popup_text { padding: 10px 0px; font-size: 16px; line-height: 1.5; text-align: center; }
.popup_btn_ok { text-align: center; }
.popup_btn_ok span { cursor: pointer; display: inline-block; *display: inline; *zoom: 1; width: 100px; padding: 3px 0px; font-size: 16px; font-weight: bold; color: #fff; text-align: center; border: 2px solid #0297ad; border-radius: 6px; background: #18c4d8; }






/*-- おわり --*/